/* =========================================================================== Hotel Christof – Homepage Eigene Komponenten-Styles. Ergänzt Tailwind (assets/js/tailwind.js). Farbwelt wie auf onstay.christof.it und shop.christof.it: Weinrot #9b204e / #c62649, Azur #93bdd5, warme Grautöne. Aufbau der Datei: 1. Farbschema (hell/dunkel) 6. Bausteine 2. Grundlagen 7. Fussbereich 3. Breiten und Abstände 8. Banner, Chat, Kleinkram 4. Kopfleiste und Navigation 9. Grosse Bildschirme (bis 2500 px) 5. Titelbereich =========================================================================== */ /* =========================================================================== 1. Farbschema Alle Farben laufen über diese Variablen. Der Dunkelmodus überschreibt weiter unten dieselben Namen – am übrigen Stylesheet ändert sich nichts. Umgeschaltet wird über , gesetzt schon vor dem ersten Zeichnen (siehe inc/layout.php). =========================================================================== */ :root { color-scheme: light; --brand-700: #9b204e; /* Grundton – Symbole, Linien */ --brand-800: #881c44; --brand-600: #c62649; /* Akzent – Verläufe */ --brand-100: #fdf4f7; /* zarte Fläche hinter Icons */ --brand-text: #9b204e; /* Markenfarbe auf hellem Grund */ /* Gefüllte Flächen, auf denen WEISSE Schrift steht (Knöpfe, farbige Abschnitte). Bewusst eigene Werte: im Dunkelmodus wird die Marke für Text aufgehellt – als Knopfhintergrund wäre weisse Schrift darauf dann zu blass (WCAG 1.4.6 verlangt 7:1). Diese beiden bleiben deshalb in beiden Darstellungen dunkel: 7,8:1 bzw. 9,1:1 gegen Weiss. */ --brand-fill: #9b204e; --brand-fill-hover: #881c44; /* --- Hausfarben --------------------------------------------------------- Die fuenf Farben aus dem Corporate Design. Zu jeder gehoert fest die Schrift darauf: Weiss ist NICHT ueberall moeglich - auf Oliv kaeme es auf 2,25:1, auf Gold auf 1,69:1, und die Seite haelt WCAG AAA mit 7:1. Mit den hier hinterlegten Werten erreichen alle fuenf mindestens 7,28:1. Aenderungen bitte in inc/farben.php spiegeln; die Pruefung vergleicht beide Stellen. */ --ci-bordeaux: #9d204a; --ci-bordeaux-fg: #ffffff; --ci-bordeaux-hover: #871c40; --ci-braun: #6f4f46; --ci-braun-fg: #ffffff; --ci-braun-hover: #5f443c; --ci-oliv: #b2b307; --ci-oliv-fg: #231c1b; --ci-oliv-hover: #babb20; --ci-gold: #ebc400; --ci-gold-fg: #231c1b; --ci-gold-hover: #edca1a; --ci-navy: #202e59; --ci-navy-fg: #ffffff; --ci-navy-hover: #1c284d; --azure-500: #3d7fa3; --azure-300: #93bdd5; --azure-200: #d1e5f0; --ink-900: #2e2523; /* Haupttext */ --ink-700: #544b49; /* Fliesstext */ /* Nebentext: aus #7d7573 abgedunkelt. Der alte Wert kam auf dem Seitenhintergrund nur auf 4,3:1 – zu wenig selbst für WCAG AA. Jetzt 7,7:1 auf der Seite und 7,2:1 auf abgesetzten Flächen (AAA). */ --ink-500: #554e4d; /* Nebentext */ --ink-300: #c9c3c1; --ink-200: #e4e0df; /* Linien, Rahmen */ --ink-100: #f2f0ef; --ink-50: #faf9f9; /* Seitenhintergrund */ --surface: #fff; /* Karten, Kacheln, Eingabefelder */ --surface-2: #f2f0ef; /* leicht abgesetzte Fläche */ --shadow-rgb: 26, 20, 19; --header-bg: rgba(255, 255, 255, .86); --toast-bg: #2e2523; --toast-fg: #fff; --header-h: 68px; /* Die Rundungen als Leiter, von der Textmarke bis zur grossen Flaeche. 999px bleibt daneben stehen und meint etwas anderes: eine Form, die RUND sein soll - Knopf, Punkt, Bildnis. Wer eine Textmarke rund macht, bekommt bei einer Zeile eine Pille und bei zweien einen Wulst. */ --radius-xs: 8px; --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; /* Lesebreite und maximale Breite. Bewusst grosszügig: die Seite soll auch auf 2500 px etwas hermachen, ohne dass Textzeilen unlesbar lang werden. */ --wrap: 1180px; --wrap-wide: 1660px; --gutter: 20px; /* Breite von Ueberschrift, Untertitel und Fliesstext. ----------------------------------------------------------------------- Bis 25.09.2026 stand hier 70ch - bei dieser Schrift rund 603 Pixel. Der Betreiber hat ausdruecklich 1200 Pixel gewuenscht. Was das bedeutet: --wrap ist 1180 Pixel breit. In einem normalen Rahmen greift die Grenze damit gar nicht mehr, der Text nutzt die ganze Spalte; nur im breiten Rahmen (--wrap-wide, 1660) begrenzt sie noch. Eine Zeile wird dann etwa 140 Zeichen lang. WCAG 1.4.8 empfiehlt hoechstens 80 Zeichen je Zeile - das ist die Stufe AAA und eine Empfehlung, keine Pflicht. Die Entscheidung liegt beim Betreiber und ist so gefallen. Sie steht hier an EINER Stelle: wer es sich anders ueberlegt, aendert diese Zeile und nicht sieben. */ --lesebreite: 1200px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Fuer die Bildbewegung: beginnt sofort zu laufen, laeuft am Ende weich aus. Begruendung samt Zahlen bei .img-zoom--in. */ --ease-zoom: cubic-bezier(.2, .12, .45, 1); } :root[data-theme="dark"] { color-scheme: dark; /* Im Dunkeln hebt sich die dunkle Markenfläche kaum vom Grund ab (2,4:1). Ein feiner heller Rand macht die Umrisse der Knöpfe erkennbar – WCAG 1.4.11 verlangt dafür 3:1. */ --brand-fill-edge: rgba(244,241,240,.34); /* Bordeaux, Braun und Dunkelblau heben sich vom dunklen Grund kaum ab (1,4:1 bis 2,6:1). WCAG 1.4.11 verlangt fuer die Umrisse eines Bedienelements 3:1 - der feine helle Rand liefert das. Oliv und Gold brauchen ihn nicht, die leuchten von selbst. */ --ci-edge: rgba(244,241,240,.34); /* Marke aufhellen: #9b204e hat auf dunklem Grund zu wenig Kontrast. */ --brand-700: #d3457b; --brand-800: #9b204e; --brand-600: #e46f9c; --brand-100: #3d1526; --brand-text: #f0a3c0; /* Gefüllte Markenflächen bleiben dunkel – siehe Erklärung oben. */ --brand-fill: #9b204e; --brand-fill-hover: #881c44; --azure-500: #5f9dbf; --azure-300: #93bdd5; --azure-200: #2b4354; --ink-900: #f4f1f0; --ink-700: #d5cecb; /* Aufgehellt von #a49b98: dort waren es nur 5,7:1 auf abgesetzten Flächen. */ --ink-500: #b8afac; --ink-300: #6c6968; --ink-200: #3a302e; --ink-100: #2b2321; --ink-50: #171211; --surface: #211a19; --surface-2: #2b2321; --shadow-rgb: 0, 0, 0; --header-bg: rgba(33, 26, 25, .86); --toast-bg: #f4f1f0; --toast-fg: #211a19; } /* =========================================================================== 2. Grundlagen =========================================================================== */ html { -webkit-text-size-adjust: 100%; /* "clip" statt "hidden": verhindert seitliches Scrollen, ohne position:sticky zu zerstören – davon lebt die feststehende Ebene. */ overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 12px); /* Rollbalken einfärben – keine eigene Leiste, nur Farbe. Die Vorgabe der Browser ist auf dem warmen Grau der Seite so blass, dass man die Rinne sieht, den Griff aber nicht: dann weiss man nicht, wo auf der Seite man gerade ist. Erste Angabe = Griff, zweite = Rinne. */ scrollbar-color: var(--ink-500) var(--ink-100); } /* Älteres Safari und Chrome kennen scrollbar-color noch nicht. Nur dort greift die Sonderbehandlung – sonst wäre der Balken zweimal gestaltet. */ @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-track { background: var(--ink-100); } ::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 999px; border: 3px solid var(--ink-100); /* Luft um den Griff */ } ::-webkit-scrollbar-thumb:hover { background: var(--brand-700); } ::-webkit-scrollbar-corner { background: var(--ink-100); } } body { margin: 0; background: var(--ink-50); color: var(--ink-900); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: clip; } img, video { max-width: 100%; height: auto; } button { font: inherit; color: inherit; } a { color: inherit; } /* Das hidden-Attribut muss auch dann greifen, wenn eine Klasse display setzt – sonst wären der "nach oben"-Knopf und die Banner von Anfang an sichtbar. */ [hidden] { display: none !important; } /* Auffangnetz für die Inline-Icons: ein ohne Grössenangabe bläht sich sonst auf die volle Breite seines Kastens auf. Die Klassen darunter gewinnen, weil Klassen stärker sind als ein Elementname. */ svg { width: 20px; height: 20px; flex: none; } /* --------------------------------------------------------------------------- Die Handvoll Tailwind-Klassen, die diese Website wirklich benutzt Sie standen bisher in tailwind.js – 451 kB JavaScript, das im den Seitenaufbau anhielt, um im Browser bei JEDEM Aufruf ein Stylesheet zu bauen. Herausgekommen sind daraus genau diese Zeilen. Nachgezählt: 226 Symbole in sieben Grössen, dazu die Schriftglättung. Die eingestellten Farben (brand-, ink-, azure-) und max-w-content kamen in der ganzen Website kein einziges Mal vor. Warum sie jetzt hier stehen und nicht in output.css: dort müssten sie nach jedem neuen Symbol neu gebaut werden. Wer das einmal vergisst, sucht den Fehler im Symbol. Die Werte sind Tailwinds eigene (1 = 0.25rem). --------------------------------------------------------------------------- */ .h-3 { height: .75rem; } .w-3 { width: .75rem; } .h-4 { height: 1rem; } .w-4 { width: 1rem; } .h-5 { height: 1.25rem; } .w-5 { width: 1.25rem; } .h-6 { height: 1.5rem; } .w-6 { width: 1.5rem; } .h-7 { height: 1.75rem; } .w-7 { width: 1.75rem; } .h-8 { height: 2rem; } .w-8 { width: 2rem; } .h-12 { height: 3rem; } .w-12 { width: 3rem; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-sans { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; border-radius: 6px; } .font-display { font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif; font-weight: 400; letter-spacing: -.01em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--brand-fill); color: #fff; text-decoration: none; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 12px; } /* =========================================================================== 3. Breiten und Abstände =========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } .wrap--full { max-width: none; padding-inline: 0; } .sec { position: relative; } /* Der Abstand ueber und unter jedem Baustein. ------------------------------------------------------------------------- Als Variable, damit der oberste Baustein damit rechnen kann (siehe unten). Frueher stand hier eine Treppe: 52px, ab 1280px 84, ab 1700px 106, ab 2100px 128, ab 2400px 150. Zwei Dinge waren daran falsch. Erstens die Hoehe der Stufen. 1280px ist eine gewoehnliche Laptopbreite, und dort sprang der Abstand um sechzig Prozent auf 84px - macht 168px zwischen zwei Bausteinen. Der Sprung war groesser als noetig, und was danach kam, erst recht. Zweitens die Treppe selbst: derselbe Wert an fuenf Stellen, die auseinanderlaufen, sobald einer davon angefasst wird. Jetzt eine Kurve. Sie waechst gleichmaessig mit der Breite und hoert irgendwann auf: 360px -> 31px 1280px -> 48px 1920px -> 60px 768px -> 38px 1600px -> 54px 2740px -> 76px (Ende) 1.5rem + 1.9vw ist die Gerade dazwischen; clamp() haelt sie unten und oben an. Bei sehr grosser Schrift waechst der feste Teil mit - deshalb rem und nicht px. Zur Steigung: die erste Fassung dieser Kurve hatte 3.1vw und ergab auf einem 1920er Schirm wieder genau 84px - dieselbe Zahl, die vorher beanstandet worden war. Sie war nur an einer anderen Stelle herausgekommen. Wer hier etwas aendert, rechnet die Werte bitte fuer die Breite nach, auf der er sitzt, und nicht nur fuer 1280. */ :root { --sec-pad: clamp(28px, 1.5rem + 1.9vw, 76px); --sec-pad-sm: clamp(20px, 1rem + 1.2vw, 48px); } /* --- Eine Hausfarbe anlegen ----------------------------------------------- Ein Element bekommt die Klasse .ci-- und arbeitet danach nur noch mit --fill, --fill-fg und --fill-hover. So braucht jede Stelle, die faerbbar sein soll, genau EINEN Regelsatz statt fuenf. Kommt eine sechste Hausfarbe dazu, steht sie hier einmal - und wirkt ueberall. Die Schriftfarbe ist bewusst mitgekoppelt und nicht frei waehlbar: sie ist das, was die Lesbarkeit sichert (siehe oben). */ .ci--bordeaux { --fill: var(--ci-bordeaux); --fill-fg: var(--ci-bordeaux-fg); --fill-hover: var(--ci-bordeaux-hover); } .ci--braun { --fill: var(--ci-braun); --fill-fg: var(--ci-braun-fg); --fill-hover: var(--ci-braun-hover); } .ci--oliv { --fill: var(--ci-oliv); --fill-fg: var(--ci-oliv-fg); --fill-hover: var(--ci-oliv-hover); } .ci--gold { --fill: var(--ci-gold); --fill-fg: var(--ci-gold-fg); --fill-hover: var(--ci-gold-hover); } .ci--navy { --fill: var(--ci-navy); --fill-fg: var(--ci-navy-fg); --fill-hover: var(--ci-navy-hover); } .sec--pad { padding-block: var(--sec-pad); } .sec--pad-sm { padding-block: var(--sec-pad-sm); } /* Der oberste Baustein einer Seite. „flush" = füllt den Platz selbst (Bild, Video): er beginnt bei null und die Kopfleiste schwebt darüber. Sonst bekommt er mindestens deren Höhe als Abstand – als Teil des Abschnitts, nicht als leerer weisser Streifen davor. Zwei Klassen, damit die Regel gegen .sec--pad gewinnt, egal in welcher Reihenfolge die Stile stehen. */ .sec.sec--flush { padding-top: 0; } .sec.sec--below-header { padding-top: max(var(--sec-pad), calc(var(--header-h) + 30px)); } .sec--soft { background: var(--surface-2); } .sec--brand { background: var(--brand-fill); color: #fff; } .sec--dark { background: #171211; color: #fff; } .sec--azure { background: var(--azure-200); } /* Abschnitt in einer Hausfarbe. Die Schrift kommt aus --fill-fg, nicht aus einer festen Angabe - deshalb funktionieren helle (Oliv, Gold) und dunkle Flaechen mit demselben Regelsatz. */ .sec--ci { background: var(--fill); color: var(--fill-fg); } .sec--ci a { color: var(--fill-fg); } .sec--ci .kicker { color: var(--fill-fg); opacity: .75; } .sec--ci .sec__lead, .sec--ci .prose { color: var(--fill-fg); opacity: .92; } .sec--ci .prose h2, .sec--ci .prose h3, .sec--ci .sec__title { color: var(--fill-fg); opacity: 1; } .sec--ci .prose { max-width: var(--lesebreite); } .sec--brand a, .sec--dark a { color: #fff; } .spacer--sm { height: 26px; } .spacer--md { height: 52px; } .spacer--lg { height: 90px; } .rule { border: 0; border-top: 1px solid var(--ink-200); margin: 0; } /* Überschriften und Fliesstext ---------------------------------------------- */ .kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-text); } .kicker--light { color: rgba(255,255,255,.82); } .sec--brand .kicker, .sec--dark .kicker { color: rgba(255,255,255,.75); } .sec__title { margin: 0 0 14px; font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.9rem); line-height: 1.14; } .sec__title--sm { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem); } .sec__sub { margin: 0 0 16px; font-size: 1.05rem; color: var(--ink-500); } .sec__lead { margin: 0 0 8px; color: var(--ink-700); font-size: 1.03rem; max-width: var(--lesebreite); } .sec--brand .sec__lead, .sec--dark .sec__lead { color: rgba(255,255,255,.85); } .sec__head { margin-bottom: 30px; max-width: var(--lesebreite); } .intro { text-align: center; margin-inline: auto; max-width: var(--lesebreite); } .intro .sec__lead { margin-inline: auto; } /* Zeilenlänge. Der Wert steht in --lesebreite, samt Begründung; hier nur das Wesentliche: begrenzt wird ausschliesslich Fliesstext. Bilder, Kacheln und farbige Abschnitte behalten die volle Breite. */ .prose { color: var(--ink-700); max-width: var(--lesebreite); } .sec--brand .prose, .sec--dark .prose { max-width: var(--lesebreite); } .prose--2col { max-width: none; } /* Die Lesebreite gehoert der SPALTE, nicht dem Absatz. ------------------------------------------------------------------------- Vorher hatte nur der Fliesstext eine Grenze (70 Zeichen), die Ueberschrift darueber nicht. Also standen die beiden verschieden breit da. Solange der Text rechts ausfranst, faellt das niemandem auf - im Blocksatz aber ist die rechte Kante eine gerade Linie, und dann sieht man den Unterschied sofort. Genau daran ist es aufgefallen. Der Fehler war nicht der Blocksatz. Der Blocksatz hat ihn nur sichtbar gemacht. Deshalb bekommt die Spalte die Grenze und alles darin richtet sich danach: Ueberschrift und Text stehen auf derselben Breite und beginnen an derselben Kante. So macht man Satz. Nicht am .prose selbst, sondern als eigene Klasse: in einer schmalen Spalte - neben einem Bild, in einer Zimmerbeschreibung - waere sie wirkungslos. So entscheidet der Baustein, ob er sie braucht. */ /* Denselben Wert wie .prose - das ist hier Bedingung, nicht Bequemlichkeit. Waere die Spalte enger oder breiter als der Text darin, stuenden Ueberschrift und Text wieder auf verschiedenen Kanten, und genau das sollte diese Klasse beheben. Darum beide aus --lesebreite. */ .lesespalte { max-width: var(--lesebreite); margin-inline: auto; } .lesespalte .prose { max-width: none; } /* Die Einleitung ist selbst schon so eine Spalte: mittig, --lesebreite breit. Ihr Fliesstext darf sich darin nicht noch einmal verengen - eine zweite, engere Grenze blieb sonst als Luft an der rechten Seite stehen, weil der Text ohne eigene Zentrierung links anschlaegt. Solange beide aus --lesebreite kommen, ist das ohnehin dasselbe Mass; die Zeile bleibt trotzdem stehen, damit eine spaetere abweichende Grenze am .prose nicht wieder in die Einleitung durchschlaegt. */ .intro .prose { max-width: none; } /* Blocksatz. ------------------------------------------------------------------------- Auf Wunsch waehlbar, aber nicht die Vorgabe: WCAG 1.4.8 (AAA) raet davon ab, weil die Luecken zwischen den Woertern ungleich werden und das Auge beim Zeilenwechsel haengenbleibt. Deshalb kommt die Silbentrennung gleich mit. Ohne sie reisst deutscher Blocksatz grosse Luecken - „Zimmerkategorie" passt entweder in die Zeile oder nicht, und dazwischen gibt es nichts. Die Trennung richtet sich nach dem lang-Attribut der Seite; deshalb wirkt sie in allen drei Sprachen. */ .prose--justify { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Ueberschriften bleiben linksbuendig - eine getrennte Ueberschrift im Blocksatz sieht aus wie ein Fehler. */ .prose--justify h2, .prose--justify h3, .prose--justify h4 { text-align: left; hyphens: manual; } /* Auf schmalen Schirmen bleibt zu wenig Platz je Zeile; dort werden die Luecken so gross, dass Blocksatz mehr schadet als nuetzt. */ @media (max-width: 560px) { .prose--justify { text-align: left; } } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose p { margin: 0 0 1em; } .prose h2 { font-size: 1.5rem; margin: 1.6em 0 .5em; color: var(--ink-900); } .prose h3 { font-size: 1.2rem; margin: 1.5em 0 .4em; color: var(--ink-900); } .prose h4 { font-size: 1.05rem; margin: 1.4em 0 .4em; color: var(--ink-900); } /* Listen im Fliesstext. ------------------------------------------------------------------------- Der Grundstock (output.css, Tailwind Preflight) nimmt JEDER Liste ihre Punkte: menu,ol,ul{list-style:none}. Fuer die Listen der Oberflaeche - Menue, Karten, Kacheln, Sprachwahl - ist das genau richtig; die sollen keine Punkte haben, und ohne die Regel muesste jede einzelne sie selbst abschalten. Im Fliesstext ist es falsch. Und es faellt nicht auf, wenn man es nicht selbst tippt: im Editor des Backends stehen die Punkte - dort gilt der Grundstock nicht - und auf der fertigen Seite fehlen sie. Wer die Liste schreibt, sieht sie also; wer die Seite anschaut, nicht. Zurueckgeholt wird deshalb genau hier, im .prose, und nirgends sonst. Die Punkte tragen die Hausfarbe, wie die uebrigen Auszeichnungen im Text auch. ::marker kennt nicht jeder aeltere Browser - dort bleibt der Punkt in der Textfarbe, und das ist kein Verlust, nur kein Gewinn. */ .prose ul, .prose ol { margin: 0 0 1em; } .prose ul { list-style: disc; padding-left: 1.4em; } .prose ol { list-style: decimal; padding-left: 1.7em; } /* Verschachtelt wechselt das Zeichen, damit die Ebene ablesbar bleibt. */ .prose ul ul { list-style: circle; } .prose ul ul ul { list-style: square; } .prose ol ol { list-style: lower-alpha; } .prose li { margin-bottom: .4em; } .prose li::marker { color: var(--brand-700); } .prose ol > li::marker { font-weight: 600; } /* Eine Unterliste haengt an ihrem Punkt, sie faengt keinen neuen Absatz an. */ .prose li > ul, .prose li > ol { margin: .4em 0 0; } /* Auf farbigem und dunklem Grund waere die Hausfarbe zu dunkel. */ .sec--brand .prose li::marker, .sec--dark .prose li::marker { color: rgba(255,255,255,.7); } .prose a { color: var(--brand-text); text-underline-offset: 3px; } .prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--brand-700); color: var(--ink-900); font-style: italic; } .prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .96rem; } .prose th, .prose td { padding: .55em .7em; border-bottom: 1px solid var(--ink-200); text-align: left; } .prose img { border-radius: var(--radius-sm); } .prose--2col { columns: 2; column-gap: 46px; } @media (max-width: 860px) { .prose--2col { columns: 1; } } .sec--brand .prose, .sec--dark .prose { color: rgba(255,255,255,.86); } .sec--brand .prose h2, .sec--brand .prose h3, .sec--dark .prose h2, .sec--dark .prose h3 { color: #fff; } /* Häkchenliste (wie auf shop.christof.it) ---------------------------------- */ .ticklist { list-style: none; margin: 18px 0 0; padding: 0; } .ticklist li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: var(--ink-700); } .ticklist svg { flex: none; margin-top: 4px; color: var(--brand-700); } /* Knöpfe -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease-out), box-shadow .2s; } .btn:active { transform: scale(.97); } /* 44 px bleibt die Untergrenze – kleiner wäre der Knopf auf dem Handy schwer zu treffen (WCAG 2.5.5). "Klein" heisst hier also: schmaler, nicht flacher. */ .btn--sm { min-height: 44px; padding: 0 18px; font-size: .87rem; } .btn--primary { background: var(--brand-fill); color: #fff; } .btn--primary:hover { background: var(--brand-fill-hover); box-shadow: 0 10px 26px -14px rgba(155,32,78,.9); } .btn--ghost { border-color: var(--ink-200); color: var(--ink-900); background: var(--surface); } .btn--ghost:hover { border-color: var(--brand-700); color: var(--brand-text); } .btn--light { background: #fff; color: var(--brand-800); } .btn--light:hover { background: var(--brand-100); } .btn--ghost-light { border-color: rgba(255,255,255,.5); color: #fff; } .btn--ghost-light:hover { background: rgba(255,255,255,.14); } /* Ein Knopf in einer Hausfarbe: .btn .btn--ci .ci--oliv. Die Farbwerte bringt .ci-- mit (siehe Abschnitt 2), hier steht nur, wie sie am Knopf wirken. Die Schriftfarbe ist mitgekoppelt und nicht frei waehlbar - sie ist das, was die Lesbarkeit sichert. */ .btn--ci { background: var(--fill); color: var(--fill-fg); border-color: transparent; } .btn--ci:hover { background: var(--fill-hover); color: var(--fill-fg); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } /* --- Baustein „Knöpfe" ---------------------------------------------------- Eine eigene Reihe und nicht .btn-row: die bringt einen Abstand nach oben mit, den sie innerhalb eines Aufrufs braucht (dort steht Text darüber). Hier steht oft nichts darüber, und dann wäre der Abstand ein schiefer Rand. -------------------------------------------------------------------------- */ .btnrow { display: flex; flex-wrap: wrap; gap: 12px; } .btns--left .btnrow { justify-content: flex-start; } .btns--center .btnrow { justify-content: center; } .btns--right .btnrow { justify-content: flex-end; } /* Überschrift und Text folgen der Ausrichtung der Knöpfe. Eine linksbündige Zeile über mittigen Knöpfen sähe nach Versehen aus. Der Text trägt eine Lesebreite; zum Zentrieren braucht er darum auch die automatischen Seitenränder. */ .btns--center { text-align: center; } .btns--center .sec__lead { margin-inline: auto; } .btns--right { text-align: right; } .btns--right .sec__lead { margin-left: auto; } /* Steht Text darüber, brauchen die Knöpfe Luft. */ .btns--kopf .btnrow { margin-top: 22px; } /* Auf dem Handy jeder Knopf in einer eigenen Zeile - auf Wunsch. 560 px ist die Grenze, an der drei Knöpfe nebeneinander unleserlich werden. */ @media (max-width: 560px) { .btnrow--block { flex-direction: column; } .btnrow--block .btn { width: 100%; } } /* =========================================================================== 4. Kopfleiste und Navigation =========================================================================== */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 90; border-bottom: 1px solid transparent; transition: transform .32s var(--ease), border-color .3s, box-shadow .3s; padding-top: env(safe-area-inset-top); } /* Hintergrund und Weichzeichner liegen in einer EIGENEN Ebene hinter dem Inhalt – nicht auf .site-header selbst. Der Grund: ein Element mit backdrop-filter beschneidet in Chrome und Safari alles, was über seinen Rand hinausragt. Läge der Filter auf der Kopfleiste, würde das Aufklappmenü genau an ihrer Unterkante abgeschnitten – und zwar erst, sobald man am Titelbild vorbeigescrollt ist, denn darüber ist der Filter ausgeschaltet. Genau dieses Verhalten war zu sehen. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: background .3s; } .site-header__inner { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); } /* Über dem Titelbild transparent mit hellem Text */ .site-header.is-over-hero::before { background: linear-gradient(to bottom, rgba(0,0,0,.46), rgba(0,0,0,0)); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header.is-over-hero { border-bottom-color: transparent; } .site-header.is-stuck { border-bottom-color: var(--ink-200); box-shadow: 0 10px 30px -24px rgba(var(--shadow-rgb), .55); } /* Beim Runterscrollen weg, beim Hochscrollen wieder da – mehr Platz fürs Bild */ .site-header.is-hidden { transform: translateY(-105%); } .brand { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; } /* Ab Tablet gibt der Name nicht mehr nach. Vorher schrumpfte er, weil er in derselben Reihe wie das Menue steht und als Einziger nachgeben konnte - erst wurde er abgeschnitten, dann war er weg. Er ist aber das Wichtigste in der Leiste. */ @media (min-width: 700px) { .brand { flex: none; } .brand__name, .brand__claim { overflow: visible; text-overflow: clip; } } .brand__logo { height: 40px; width: auto; flex: none; } .brand__text { min-width: 0; display: flex; flex-direction: column; } .brand__name { font-size: 1.02rem; line-height: 1.18; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__claim { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-header.is-over-hero .brand__name { color: #fff; } .site-header.is-over-hero .brand__claim { color: rgba(255,255,255,.75); } /* Die Schublade ist ein Kind der Kopfleiste und liegt mit z-index 95 über den Werkzeugen. Ohne eigene Ebene wäre der Menüknopf – bei offenem Menü das X zum Schliessen – davon verdeckt. Eine Stufe höher gelegt bilden Werkzeuge und Menüknopf bei offener Schublade deren oberste Zeile. */ .site-header__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; z-index: 96; } /* Über dem Titelbild sind diese Knöpfe weiss auf durchsichtig. Auf der hellen Schublade wären sie unsichtbar – dort zurück auf die normale Darstellung. */ .nav.is-open ~ .site-header__tools .switcher__trigger, .nav.is-open ~ .site-header__tools .burger { background: rgba(155,32,78,.07); border-color: rgba(155,32,78,.14); color: var(--ink-700); } /* --- Grosser Auftritt ganz oben -------------------------------------------- Solange die Kopfleiste über dem Titelbereich schwebt, ist sie höher und das Logo deutlich grösser – dort ist Platz dafür und ein Bild dahinter. Beim ersten Scrollen fährt beides weich in die kompakte Leiste zusammen. Bewusst NICHT über --header-h gelöst: an dieser Zahl hängen Sprungmarken, Brotkrumen und die Schublade. Die Leiste wächst nur optisch. */ @media (min-width: 650px) { .site-header.is-over-hero .site-header__inner { min-height: 108px; } .site-header.is-over-hero .brand { gap: 16px; } .site-header.is-over-hero .brand__logo { height: 66px; } .site-header.is-over-hero .brand__name { font-size: 1.42rem; } .site-header.is-over-hero .brand__claim { font-size: 11.5px; letter-spacing: .22em; } /* Der Verlauf über dem Bild wird mitgezogen, damit die Schrift auch bei einem hellen Titelbild sicher lesbar bleibt. */ .site-header.is-over-hero::before { background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.12) 62%, rgba(0,0,0,0)); } } .site-header__inner, .brand, .brand__logo, .brand__name, .brand__claim { transition: min-height .3s var(--ease), gap .3s var(--ease), height .3s var(--ease), font-size .3s var(--ease), color .2s; } @media (prefers-reduced-motion: reduce) { .site-header__inner, .brand, .brand__logo, .brand__name, .brand__claim { transition: none; } } /* --- Aktionsknöpfe oben rechts (Gutscheine, Anfragen, Buchen) -------------- */ .topcta { display: none; } .topcta__list { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .topcta__list a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; text-decoration: none; border: 1px solid var(--ink-200); color: var(--ink-900); background: var(--surface); transition: all .2s; } .topcta__list a:hover { border-color: var(--brand-700); color: var(--brand-text); } /* Der Nur-Symbol-Knopf ist rund statt laenglich - sonst stuende ein einzelnes Zeichen verloren in einer breiten Pille. Die Hoehe bleibt bei 36 px wie bei den anderen; die 44 px Bedienflaeche kommen ueber das Feld darum. */ /* Rund statt laenglich - ein einzelnes Zeichen stuende in einer breiten Pille verloren. 44 x 44 ist zugleich die Mindestgroesse fuer Bedienelemente nach WCAG 2.5.5; die Textknoepfe daneben sind 36 px hoch, der runde darf ruhig etwas herausragen. Das Symbol darin ist bewusst gross: es traegt den ganzen Knopf. Beide Masse gleich, obwohl nicht jede Zeichnung quadratisch ist - ein SVG behaelt sein Seitenverhaeltnis und sitzt mittig. Ein Logo im Format 4:3 wird damit 28 x 21. */ .topcta__list .iconlink { width: 44px; height: 44px; padding: 0; } .topcta__list .iconlink__icon { width: 28px; height: 28px; } .topcta__list li:last-child .iconlink:not(.ci) { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } .topcta__list li:last-child a { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } .topcta__list li:last-child a:hover { background: var(--brand-fill-hover); } .site-header.is-over-hero .topcta__list a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; } .site-header.is-over-hero .topcta__list li:last-child a { background: var(--brand-fill); border-color: var(--brand-fill); } @media (min-width: 1100px) { .topcta { display: block; } } /* --- Menü-Knopf ------------------------------------------------------------ */ .burger { display: grid; place-content: center; gap: 5px; /* 44 x 44 – Mindestgrösse für Bedienelemente nach WCAG 2.5.5 (AAA). */ width: 44px; height: 44px; padding: 0; cursor: pointer; border: 1px solid rgba(155,32,78,.14); border-radius: 999px; background: rgba(155,32,78,.07); -webkit-tap-highlight-color: transparent; } .burger span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .28s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); } .site-header.is-over-hero .burger { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; } @media (min-width: 1100px) { .burger { display: none; } } /* --- Menüknopf bei weggefahrener Kopfleiste -------------------------------- Sitzt genau dort, wo der Menüknopf in der Leiste steht – so wandert er beim Erscheinen nicht durchs Bild. Fährt die Leiste zurück, verschwindet er. */ .navpeek { position: fixed; z-index: 89; top: calc(env(safe-area-inset-top) + 14px); right: var(--gutter); display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: var(--brand-fill); color: #fff; box-shadow: 0 10px 26px -10px rgba(var(--shadow-rgb), .8); opacity: 0; transform: translateY(-14px) scale(.9); transition: opacity .26s var(--ease), transform .26s var(--ease-out); -webkit-tap-highlight-color: transparent; } .navpeek.is-on { opacity: 1; transform: none; } .navpeek span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: currentColor; } .navpeek:hover { background: var(--brand-fill-hover); } /* Ab der Breite, ab der die Leiste ohnehin das ganze Menü zeigt, sitzt der Knopf dort, wo sonst die Aktionsknöpfe stehen – nicht über dem Menü. */ @media (min-width: 1100px) { .navpeek { top: calc(env(safe-area-inset-top) + 16px); } } /* --- Navigation: Schublade auf dem Handy ----------------------------------- */ .nav { position: fixed; inset: 0 0 0 auto; z-index: 95; width: min(94vw, 420px); background: var(--surface); transform: translateX(102%); transition: transform .34s var(--ease-out); display: flex; flex-direction: column; box-shadow: -20px 0 60px -30px rgba(var(--shadow-rgb), .7); visibility: hidden; } .nav.is-open { transform: none; visibility: visible; } .nav__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--header-h) + env(safe-area-inset-top) + 16px) 20px 32px; flex: 1; } /* Abdunkler hinter der Schublade. Muss UNTER der Kopfleiste liegen (z-index 90): die Schublade ist ein Kind der Kopfleiste und teilt sich deren Stapelebene. Läge der Abdunkler darüber, wäre die Schublade verdeckt und jeder Klick würde das Menü sofort wieder schliessen. */ .nav-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(var(--shadow-rgb), .45); opacity: 0; transition: opacity .3s; } .nav-backdrop.is-on { opacity: 1; } .nav__list { list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; border-bottom: 1px solid var(--ink-200); } .nav__link { display: flex; align-items: center; gap: 8px; padding: 15px 44px 15px 0; font-size: 1.06rem; font-weight: 600; text-decoration: none; color: var(--ink-900); transition: color .2s; } .nav__item.is-active > .nav__link, .nav__item.is-trail > .nav__link { color: var(--brand-text); } .nav__chev { display: none; } /* --- Darstellungsarten in der Schublade ----------------------------------- Hier wird NICHT auf "nur Symbol" umgestellt: eine senkrechte Liste aus lauter Zeichen kann niemand lesen. Das Symbol kommt vor die Beschriftung, die Beschriftung bleibt. Auch der Knopf bleibt eine normale Zeile - eine Reihe gefuellter Balken untereinander waere unruhig. Die gewaehlte Farbe zeigt sich als Streifen an der Kante: erkennbar, ohne die Liste zu zerreissen. */ .nav__icon { flex: 0 0 auto; } /* Die Beschriftung bleibt hier stehen - ausdruecklich und nicht nur, weil zufaellig keine Regel sie versteckt. Das Verstecken passiert erst ab 1100 px; wuerde dort jemand die Bedingung lockern, faellt es hier nicht mit um. Eine senkrechte Liste aus lauter Zeichen kann niemand lesen. */ .nav__item--icon > .nav__link .nav__label { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: normal; } /* In der Schublade steht das Symbol VOR dem Text, in Lesegroesse - es ist dort Beiwerk, nicht der Menuepunkt selbst. */ .nav__item--icon > .nav__link .nav__icon { width: 22px; height: 22px; } .nav__item.ci > .nav__link { box-shadow: inset 3px 0 0 var(--fill); padding-left: 12px; } .nav__item--button > .nav__link { font-weight: 700; } .nav__item--button.ci > .nav__link { color: var(--fill); } .nav__item--highlight > .nav__link { color: var(--brand-text); } .nav__item--highlight.ci > .nav__link { color: var(--fill); } .nav__toggle { position: absolute; top: 6px; right: -6px; display: grid; place-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink-500); transition: transform .28s var(--ease); } .nav__toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--brand-text); } .nav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); } .nav__item.is-open > .nav__sub { grid-template-rows: 1fr; } .nav__sub-inner { overflow: hidden; } .nav__sub-list { list-style: none; margin: 0; padding: 0 0 12px; } .nav__sub-link { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; text-decoration: none; color: var(--ink-700); font-size: .97rem; transition: color .2s; } .nav__sub-link:hover, .nav__sub-link.is-active { color: var(--brand-text); } .nav__sub-icon { flex: none; margin-top: 3px; color: var(--brand-700); opacity: .8; } .nav__sub-label { display: block; font-weight: 500; } .nav__sub-note { display: block; font-size: .82rem; color: var(--ink-500); } .nav__actions { margin-top: 26px; } .nav__cta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .nav__cta a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 1px solid var(--ink-200); color: var(--ink-900); } .nav__cta li:last-child a { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } /* In der Schublade sind die Knoepfe volle Breite. Ein 44 px breites Feld mittendrin saehe aus wie ein Versehen - hier zaehlt die Reihe, nicht das Format. Die Beschriftung bleibt trotzdem verborgen, wie eingestellt. */ /* In der Schublade ist der Knopf volle Breite - und die Beschriftung kommt zurueck. Ein 44 px breites Kaestchen mittendrin saehe aus wie ein Versehen, und eine senkrechte Liste aus lauter Zeichen liest niemand. Die Einstellung "Nur Symbol" gilt fuer die waagrechte Leiste; hier zaehlt die Lesbarkeit mehr als das Format. */ .nav__cta .iconlink { width: auto; height: auto; min-height: 48px; gap: 8px; } .nav__cta .iconlink__icon { width: 22px; height: 22px; } .nav__cta .iconlink__label { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: normal; } /* Im Fussbereich stehen die Verweise untereinander - dort genuegt das Symbol an seiner Stelle, ohne runden Knopf. */ .flist .iconlink { width: 44px; height: 44px; } .flist .iconlink__icon { width: 22px; height: 22px; opacity: .78; } .flist .iconlink:hover .iconlink__icon { opacity: 1; } /* Dunkelmodus: Umrisse fuer die dunklen Hausfarben (siehe --ci-edge). */ :root[data-theme="dark"] .ci--bordeaux > .nav__link, :root[data-theme="dark"] .ci--braun > .nav__link, :root[data-theme="dark"] .ci--navy > .nav__link, :root[data-theme="dark"] .nav__item--button > .nav__link { box-shadow: inset 0 0 0 1px var(--ci-edge); } /* --- Navigation ab 1100 px: waagrecht mit Aufklappmenü --------------------- */ @media (min-width: 1100px) { .nav { position: static; width: auto; background: none; box-shadow: none; transform: none; visibility: visible; margin-left: 18px; } .nav__scroll { overflow: visible; padding: 0; } .nav__list { display: flex; align-items: center; gap: 2px; } .nav__item { border: 0; } .nav__link { padding: 10px 13px; font-size: .93rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; } .nav__chev { display: block; opacity: .55; transition: transform .25s var(--ease); } .nav__item.has-sub:focus-within .nav__chev, .nav__item.has-sub.is-open .nav__chev { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .nav__item.has-sub:hover .nav__chev { transform: rotate(180deg); } } .nav__link:hover { background: rgba(155,32,78,.08); color: var(--brand-text); } /* Gefaerbte Punkte behalten ihre Farbe, auch ueber dem Titelbild - dort traegt die Flaeche den Kontrast, nicht der Untergrund. Deshalb :not(.ci). */ .site-header.is-over-hero .nav__item:not(.ci) > .nav__link { color: #fff; } .site-header.is-over-hero .nav__item:not(.ci) > .nav__link:hover { background: rgba(255,255,255,.16); color: #fff; } .site-header.is-over-hero .nav__item.is-active:not(.ci) > .nav__link { color: #fff; } .nav__item.is-active:not(.ci) > .nav__link { background: rgba(155,32,78,.1); } /* --- Darstellungsarten waagrecht --------------------------------------- Vier Moeglichkeiten, alle auf derselben Pillenform: normal Text, durchsichtig - wie bisher hervorgehoben Text in der Farbe, etwas fetter als Knopf gefuellte Pille; ohne Farbwahl die Markenfarbe, denn "Knopf" heisst: das hier ist die Handlung nur Symbol quadratisch, 44x44 - die Mindestgroesse, die WCAG 2.5.5 fuer Bedienelemente verlangt. Die Beschriftung bleibt im Quelltext und wird nur ausgeblendet: Vorlesesoftware und Suchmaschinen bekommen weiter einen Text, kein Bildchen. */ .nav__item.ci > .nav__link { box-shadow: none; padding-left: 13px; } .nav__item.ci > .nav__link, .nav__item.ci.is-active > .nav__link { background: var(--fill); color: var(--fill-fg); } .nav__item.ci > .nav__link:hover { background: var(--fill-hover); color: var(--fill-fg); } .nav__item.ci > .nav__link .nav__chev { opacity: .8; } .nav__item--highlight > .nav__link { font-weight: 700; color: var(--brand-text); } .nav__item--highlight.ci > .nav__link { color: var(--fill-fg); } .nav__item--button > .nav__link { background: var(--brand-fill); color: #fff; font-weight: 700; } .nav__item--button > .nav__link:hover { background: var(--brand-fill-hover); color: #fff; } .site-header.is-over-hero .nav__item--button > .nav__link { color: #fff; } .nav__item--icon > .nav__link { display: grid; place-content: center; /* 44 px waren die Mindestgroesse der Bedienflaeche - als Kaestchen fuer ein Zeichen, das den ganzen Menuepunkt tragen soll, aber zu knapp. Jetzt etwas mehr, damit das Symbol Luft hat. */ width: 52px; min-height: 48px; padding: 0; } /* Deutlich groesser als die 20 px der uebrigen Symbole: hier steht das Zeichen allein und ist der Menuepunkt. Beide Massen gleich, obwohl nicht jede Zeichnung quadratisch ist: ein SVG behaelt sein Seitenverhaeltnis und sitzt mittig im Kaestchen. Ein Logo im Format 4:3 wird damit 32 x 24 - breit genug, um erkennbar zu sein, ohne die Zeile aufzublaehen. */ .nav__item--icon > .nav__link .nav__icon { width: 32px; height: 32px; } .nav__item--icon > .nav__link .nav__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Ein Untermenue am Nur-Symbol-Punkt: der Pfeil wuerde neben dem Zeichen keinen Platz finden und die 44 px sprengen. Das Aufklappen selbst funktioniert weiter. */ .nav__item--icon > .nav__link .nav__chev { display: none; } .nav__toggle { display: none; } .nav__actions { display: none; } /* Aufklappmenü: liegt unter dem Eintrag, wird beim Überfahren oder per Tastatur sichtbar. Kein JavaScript nötig. */ .nav__sub { position: absolute; top: 100%; left: 50%; z-index: 40; display: block; min-width: 250px; transform: translate(-50%, 10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s, transform .26s var(--ease-out), visibility .22s; padding-top: 10px; } /* Sichtbar wird das Aufklappmenue auf drei Wegen: :hover - nur wo es einen Zeiger gibt, den man darueberfahren kann :focus-within - Tastatur .is-open - vom Fingertipp gesetzt (siehe app.js) Das :hover-Aufklappen steckt bewusst in einer eigenen Abfrage. Auf einem breiten Touchgeraet taeuscht der Browser beim Tippen ein Ueberfahren vor - das Menue ging auf UND die Seite lud. Wo nicht ueberfahren werden kann, gibt es die Regel deshalb gar nicht. */ .nav__item.has-sub:focus-within > .nav__sub, .nav__item.has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } @media (hover: hover) and (pointer: fine) { .nav__item.has-sub:hover > .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } } .nav__sub-inner { background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb), .65); padding: 10px; } .nav__sub-list { padding: 0; } .nav__sub-link { padding: 9px 12px; border-radius: 11px; } .nav__sub-link:hover { background: var(--brand-100); } } /* --- Kopfleiste zwischen 1100 und 1580 px: Menue in einer eigenen Zeile ---- Bei acht bis zehn Menuepunkten passt waagrecht nicht beides in eine Reihe. Die Loesung ist nicht, den Namen des Hauses schrumpfen zu lassen, sondern dem Menue eine eigene Zeile zu geben: oben Logo, Name und die Knoepfe, darunter das Menue ueber die volle Breite. Das ist bei Hotels eine gaengige und ruhige Anordnung - es sieht nach Absicht aus und nicht nach Platznot. Ab 1580 px ist wieder alles in einer Reihe, weil es dort bequem passt. */ @media (min-width: 1100px) and (max-width: 1579.98px) { :root { /* Die Leiste ist jetzt hoeher. An dieser Zahl haengen Sprungmarken, Brotkrumen und der Abstand des obersten Bausteins - sie muss mitwachsen, sonst rutscht Inhalt darunter. */ --header-h: 118px; } .site-header__inner { flex-wrap: wrap; align-items: center; align-content: center; row-gap: 0; } .brand { order: 1; } .site-header__tools { order: 2; } .nav { order: 3; flex-basis: 100%; margin-left: 0; } /* Feine Linie zwischen den beiden Zeilen - sie fasst sie zu einer Komposition zusammen, statt wie ein zufaelliger Umbruch zu wirken. */ .nav__list { justify-content: center; gap: 4px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--ink-200); } .site-header.is-over-hero .nav__list { border-top-color: rgba(255,255,255,.28); } .nav__link { padding: 9px 11px; font-size: .88rem; letter-spacing: .03em; } /* Das Aufklappmenue haengt jetzt an der zweiten Zeile. */ .nav__sub { padding-top: 8px; } /* Der grosse Auftritt ueber dem Titelbild faellt hier etwas kleiner aus - sonst wuerde die Leiste mit zwei Zeilen zu wuchtig. */ .site-header.is-over-hero .site-header__inner { min-height: 92px; } .site-header.is-over-hero .brand__logo { height: 54px; } .site-header.is-over-hero .brand__name { font-size: 1.24rem; } } /* --- Umschalter Darstellung/Sprache (wie auf onstay.christof.it) ----------- */ .switcher { position: relative; } .switcher__trigger { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 4px; /* 44 x 44 – siehe .burger. */ height: 44px; min-width: 44px; padding: 0 11px; cursor: pointer; border: 1px solid rgba(155,32,78,.14); border-radius: 999px; background: rgba(155,32,78,.07); color: var(--ink-700); transition: background .2s, color .2s, border-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; } .switcher__trigger:active { transform: scale(.93); } .switcher__trigger svg { width: 17px; height: 17px; } .site-header.is-over-hero .switcher__trigger { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; } .switcher__code--trigger { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; } /* Im Symbol steht immer das gerade Gewählte – gesteuert über data-theme-mode am , ganz ohne JavaScript. */ .switcher__icon { display: none; } .switcher__icon.is-fixed, :root[data-theme-mode="light"] .switcher__icon[data-theme-icon="light"], :root[data-theme-mode="auto"] .switcher__icon[data-theme-icon="auto"], :root[data-theme-mode="dark"] .switcher__icon[data-theme-icon="dark"] { display: grid; } .switcher__panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 100; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--ink-200); border-radius: 15px; box-shadow: 0 12px 38px -14px rgba(var(--shadow-rgb), .6); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .2s, transform .2s cubic-bezier(.34,1.3,.64,1), visibility .2s; } .switcher.is-open > .switcher__panel { opacity: 1; visibility: visible; transform: none; } .switcher.is-open .switcher__trigger { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } .theme-switch__btn, .lang-switch__item { display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; background: none; color: var(--ink-700); text-decoration: none; font-size: .9rem; transition: background .2s, color .2s; } .theme-switch__btn:hover, .lang-switch__item:hover { background: var(--surface-2); color: var(--brand-text); } .theme-switch__btn.is-active, .lang-switch__item.is-active { background: var(--brand-100); color: var(--brand-text); font-weight: 600; } .theme-switch__btn svg { width: 17px; height: 17px; flex: none; } .switcher__code { display: inline-grid; place-items: center; width: 20px; font-size: 11.5px; font-weight: 700; } .switcher__label { font-weight: 500; } /* --- Unter 445 px: Darstellung und Sprache gehören ins Menü ----------------- Auf sehr schmalen Geräten drängten die beiden runden Knöpfe den Hotelnamen zusammen. Sie verschwinden deshalb aus der Leiste und erscheinen erst mit der Schublade – an genau derselben Stelle wie sonst, oben rechts neben dem Menüknopf. Im HTML wird nichts verschoben: die Knöpfe bleiben, wo sie sind, und liegen nur über der Schublade (siehe .site-header__tools). */ @media (max-width: 444.98px) { .site-header__tools > .switcher { display: none; } .nav.is-open ~ .site-header__tools > .switcher { display: block; } /* Drei Knöpfe in einer Reihe – etwas enger, damit sie nicht randlos werden. */ .site-header__tools { gap: 6px; } .switcher__trigger { padding: 0 8px; } /* Feine Linie unter der Knopfzeile, damit sie als Teil des Menüs liest und nicht über dem ersten Menüpunkt zu schweben scheint. */ .nav.is-open::before { content: ""; position: absolute; z-index: 1; left: 20px; right: 20px; top: calc(var(--header-h) + env(safe-area-inset-top)); border-top: 1px solid var(--ink-200); } /* Der Hotelname bekommt den gewonnenen Platz. */ .brand { gap: 9px; } .brand__logo { height: 34px; } } /* =========================================================================== 5. Titelbereich (Hero) =========================================================================== */ .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; margin-top: 0; overflow: clip; } .hero--medium { min-height: 62svh; } .hero--tall { min-height: 84svh; } .hero--full { min-height: 100svh; } .hero__stage { position: absolute; inset: 0; z-index: -2; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); } .hero__slide.is-active { opacity: 1; } .hero__img { width: 100%; height: 100%; object-fit: cover; } /* Abdunkelung: unten stärker, damit die Schrift immer sitzt. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero--ov-none::before { background: linear-gradient(to top, rgba(0,0,0,.45), transparent 42%); } .hero--ov-soft::before { background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.16) 52%, rgba(0,0,0,.28)); } .hero--ov-strong::before { background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.36) 55%, rgba(0,0,0,.48)); } .hero__body { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--header-h) + 40px) 74px; color: #fff; } .hero--center .hero__body { display: flex; align-items: center; min-height: inherit; text-align: center; } .hero--center .hero__body .wrap { width: 100%; } .hero--bottom-center { text-align: center; } /* visibility gehört dazu, nicht nur opacity: sonst bleiben die Knöpfe in den ausgeblendeten Texten mit der Tabulatortaste erreichbar – der Fokus landet dann auf etwas Unsichtbarem (WCAG 2.4.3 und 2.4.7). visibility wechselt sprunghaft: beim Einblenden sofort, beim Ausblenden erst am Ende. */ .hero__text { max-width: 44ch; opacity: 0; transform: translateY(18px); visibility: hidden; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility .7s; position: absolute; pointer-events: none; } .hero__text.is-active { opacity: 1; transform: none; visibility: visible; position: relative; pointer-events: auto; } .hero--center .hero__text, .hero--bottom-center .hero__text { max-width: 60ch; margin-inline: auto; } .hero__kicker { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82); } .hero__title { margin: 0 0 14px; color: #fff; font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.06; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .hero__lead { margin: 0; font-size: clamp(1rem, .95rem + .4vw, 1.22rem); color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(0,0,0,.4); } /* bottom/gap sind auf die 44 px grossen Trefferflächen abgestimmt: der sichtbare Punkt sitzt dadurch optisch wieder da, wo er vorher war. */ .hero__dots { position: absolute; z-index: 3; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 0; } /* Der sichtbare Punkt bleibt klein, die Trefferfläche ist 44 x 44 gross (WCAG 2.5.5). Gezeichnet wird der Punkt über ::before, der Knopf selbst ist durchsichtig – so wächst die Fläche, ohne dass die Leiste plump wirkt. */ .hero__dot { width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; background: none; display: grid; place-content: center; -webkit-tap-highlight-color: transparent; } .hero__dot::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.55); transition: width .25s, background .25s; } .hero__dot.is-active::before { background: #fff; width: 26px; } .hero__nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: none; place-content: center; width: 46px; height: 46px; padding: 0; cursor: pointer; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(0,0,0,.24); color: #fff; transition: background .2s, transform .2s; } .hero__nav:hover { background: rgba(0,0,0,.42); } .hero__nav--prev { left: 18px; } .hero__nav--next { right: 18px; } @media (min-width: 900px) { .hero__nav { display: grid; } } .hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,.72); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; animation: nudge 2.4s var(--ease) infinite; } @media (min-width: 900px) { .hero:not(:has(.hero__dots)) .hero__scroll { display: flex; } } @keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } } .hero__fade { position: absolute; inset-inline: 0; bottom: 0; height: 90px; z-index: 1; background: linear-gradient(to top, var(--ink-50), transparent); pointer-events: none; } /* Schlichte Kopfzeile für Seiten ohne Titelbild ----------------------------- */ .pagehead { padding-block: calc(var(--header-h) + 34px) 8px; } .pagehead__title { margin: 0 0 8px; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); line-height: 1.1; } .pagehead__sub { margin: 0; color: var(--ink-500); font-size: 1.06rem; } body:not(.is-home) .crumbs + .pagehead { padding-top: 8px; } /* Der Streifen oben ist der Platz fuer die schwebende Kopfleiste - die Brotkrume ist auf Unterseiten das Erste im Inhalt und laege sonst darunter. */ .crumbs { padding-top: calc(var(--header-h) + 18px); font-size: .84rem; color: var(--ink-500); } /* Steht sie dagegen UNTER einem buendig anschliessenden Baustein - Video, Titelbereich, Bild ueber die ganze Breite -, dann ist die Kopfleiste laengst vorbeigescrollt. Dort waere der Streifen eine Luecke ohne Grund. */ .crumbs--nach { padding-top: 18px; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--brand-text); text-decoration: underline; } /* =========================================================================== 6. Bausteine =========================================================================== */ /* --- Einblenden beim Scrollen (wie auf onstay.christof.it) ----------------- */ .reveal { opacity: 0; transform: translateY(26px) scale(.988); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); } /* Kacheln einer Reihe leicht versetzt – wirkt lebendiger als alles auf einmal */ .tiles > li.reveal:nth-child(2) { transition-delay: .07s; } .tiles > li.reveal:nth-child(3) { transition-delay: .14s; } .tiles > li.reveal:nth-child(4) { transition-delay: .21s; } .tiles > li.reveal:nth-child(5) { transition-delay: .28s; } .tiles > li.reveal:nth-child(6) { transition-delay: .35s; } /* --- Sanfte Bildbewegung, je Bild im Backend wählbar ----------------------- „Langsam heranfahren" und „langsam herausfahren" begannen zu spät und wirkten zäh. Woran das lag, lässt sich ausrechnen: Eine Skalierung nimmt das Auge etwa ab einem halben Prozent wahr - bei 8,5 % Gesamtweg also nach 5,9 % des Wegs. Mit `ease-in-out` steht die Bewegung am Anfang aber praktisch still (die Kurve beginnt mit Steigung null): die 5,9 % waren erst nach 17 % der Laufzeit erreicht, bei 26 Sekunden also nach 4,4 SEKUNDEN. So lange sah das Bild aus, als bewege es sich überhaupt nicht. Die neue Kurve beginnt mit einer Steigung von 0,6 statt null - sichtbar nach 1,4 s. Am Ende läuft sie weiterhin auf Steigung null aus, sonst gäbe es bei `alternate` an den Umkehrpunkten einen Ruck. Die Dauer geht von 26 auf 22 Sekunden. Das Spitzentempo steigt damit nur um 17 % - es soll flotter wirken, nicht hektisch. Der grössere Teil des Gewinns kommt aus dem früheren Anfang, nicht aus mehr Geschwindigkeit. */ .img-zoom { transform-origin: center; will-change: transform; } .img-zoom--in { animation: zoomIn 22s var(--ease-zoom) infinite alternate; } .img-zoom--out { animation: zoomOut 22s var(--ease-zoom) infinite alternate; } @keyframes zoomIn { from { transform: scale(1); } to { transform: scale(1.085); } } @keyframes zoomOut { from { transform: scale(1.085); } to { transform: scale(1); } } /* Parallaxe: --par kommt aus app.js (Scrollposition, -1 … 1) */ .img-zoom--parallax { transform: translate3d(0, calc(var(--par, 0) * 34px), 0) scale(1.14); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .img-zoom--in, .img-zoom--out { animation: none; } /* Das Heranfahren beim Ueberfahren ist Bewegung - dafuer ein ruhiges Zeichen. Ganz weglassen waere falsch: dass das Bild anklickbar ist, muss man auch dann erkennen. */ .split__link:hover .split__img, .split__link:focus-visible .split__img { scale: 1; filter: brightness(1.06); } .img-zoom--parallax { transform: none; } .hero__slide { transition: none; } html { scroll-behavior: auto; } } /* --- Bild + Text ----------------------------------------------------------- */ .split { display: grid; gap: 28px; align-items: center; } .split__media { margin: 0; position: relative; } .split__img { width: 100%; height: auto; display: block; } .split--rounded .split__img { border-radius: var(--radius-lg); } .split--square .split__img { border-radius: 0; } .split__media { box-shadow: 0 30px 70px -40px rgba(var(--shadow-rgb), .7); border-radius: var(--radius-lg); overflow: clip; } .split--square .split__media { border-radius: 0; } /* Zweites, versetztes Bild – gibt der Fläche Tiefe */ .split__media2 { position: absolute; right: -14px; bottom: -22px; width: 42%; border-radius: var(--radius); overflow: clip; box-shadow: 0 22px 50px -26px rgba(var(--shadow-rgb), .8); border: 4px solid var(--ink-50); display: none; } @media (min-width: 700px) { .split__media2 { display: block; } } .split:has(.split__media2) { overflow: visible; } /* Das Bild als Link --------------------------------------------------------- Steht beim Baustein ein Knopf-Ziel, wird das Bild anklickbar. Beim Ueberfahren fahrt es ein wenig heran - das ist das Zeichen, dass dort etwas passiert. Ohne Ziel gibt es diesen Rahmen gar nicht, also auch keine Regung; genau so war es gewuenscht. ZWEI Dinge sind hier nicht beliebig: Erstens `scale` und nicht `transform`. Das Bild traegt moeglicherweise schon die langsame Bildbewegung, und die laeuft als Animation auf `transform`. Eine Animation schlaegt jede gewoehnliche Angabe auf derselben Eigenschaft - ein transform beim Ueberfahren waere bei genau diesen Bildern wirkungslos geblieben, bei allen anderen nicht. Ein Fehler, der nur an einzelnen Bausteinen aufgefallen waere. `scale` ist eine eigene Eigenschaft und rechnet sich mit der Animation zusammen. Zweitens schneidet der LINK ab, nicht das Bild. Beim zweiten, versetzten Bild steht .split__media auf overflow: visible - das herangefahrene Bild waere dort ueber seine abgerundete Ecke hinausgewachsen. */ .split__link { display: block; overflow: clip; border-radius: inherit; /* nimmt die Rundung des Rahmens */ } .split__link .split__img { transition: scale .55s var(--ease-out); } .split__link:hover .split__img, .split__link:focus-visible .split__img { scale: 1.04; } /* Der Link ist nur dann mit der Tastatur erreichbar, wenn KEIN Knopf daneben dasselbe Ziel hat - dann braucht er auch einen sichtbaren Rahmen. */ .split__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .split:has(.split__media2) .split__media { overflow: visible; } .split:has(.split__media2) .split__img { border-radius: var(--radius-lg); } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split--wide-image { grid-template-columns: 1.35fr 1fr; } .split--wide-text { grid-template-columns: 1fr 1.35fr; } .split--right .split__media { order: 2; } /* Steht das Bild rechts, richtet sich der Text nach rechts aus - er wendet sich damit dem Bild zu statt von ihm weg. Das gilt NUR hier, innerhalb der zweispaltigen Darstellung. Schmaler als 900 Pixel stehen Bild und Text untereinander; dann ist rechts vom Text gar kein Bild mehr, zu dem er sich wenden könnte, und rechtsbündiger Fliesstext über die volle Breite läse sich nur schlecht. text-align allein genügt nicht. Die Spalte wird auf grossen Bildschirmen über 1100 Pixel breit, .prose ist aber auf 70 Zeichen (rund 700 Pixel) begrenzt: der Textkasten stünde links in der Spalte und die Zeilen wären innerhalb dieses Kastens rechtsbündig - eine Kante in der Mitte der Spalte, die nach einem Fehler aussieht. Darum rückt der Kasten selbst mit an den rechten Rand. */ .split--right .split__body { text-align: right; } .split--right .split__body .prose { margin-inline-start: auto; } /* Die Häkchen wandern auf die Aussenseite mit - eine Liste, deren Zeichen links und deren Text rechts klebt, hätte in der Mitte ein Loch. */ .split--right .ticklist li { flex-direction: row-reverse; } .split--right .btn-row { justify-content: flex-end; } /* Läuft mit, wenn Bild und Text unterschiedlich hoch sind. */ .split--sticky { align-items: start; } .split--sticky .split__body { position: sticky; top: calc(var(--header-h) + 34px); } } @media (min-width: 1500px) { .split--bleed .split__media { margin-inline-start: calc((100vw - var(--wrap-wide)) / -2 - var(--gutter)); } .split--bleed.split--right .split__media { margin-inline: 0 calc((100vw - var(--wrap-wide)) / -2 - var(--gutter)); } .split--bleed .split__img { border-start-start-radius: 0; border-end-start-radius: 0; } } /* --- Kleines Bild mit Text (Logo erklären) --------------------------------- */ /* Die Grösse kommt aus dem Baustein: --imgnote-b und --imgnote-h stehen als style am
. Fehlen sie, gilt die Originalgrösse des Bildes. Es sind echte Breiten, keine Höchstwerte: ein Logo, das kleiner hochgeladen wurde als gewünscht, soll auf die angegebene Grösse wachsen. Gedeckelt wird getrennt davon mit max-width: 100% – sonst ragte das Bild auf dem Telefon aus der Seite. */ .imgnote { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-start; } .imgnote--middle { align-items: center; } .imgnote--right { flex-direction: row-reverse; } .imgnote__media { margin: 0; flex: 0 0 auto; max-width: 100%; } .imgnote__img { display: block; width: var(--imgnote-b, auto); height: var(--imgnote-h, auto); max-width: 100%; /* Sind BEIDE Masse gesetzt und passt das Seitenverhältnis nicht dazu, wird eingepasst statt verzerrt. Ein in die Länge gezogenes Logo darf nicht vorkommen – das ist eine Marke, keine Dekoration. */ object-fit: contain; object-position: center; } /* Logos sind oft durchsichtig. Auf dunklem Grund verschwindet ein dunkles Logo sonst spurlos, und im Backend sieht alles richtig aus. */ .imgnote--plate .imgnote__media { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 12px 30px -20px rgba(var(--shadow-rgb), .4); } .imgnote__body { flex: 1 1 260px; min-width: 0; } .imgnote__body > :first-child { margin-top: 0; } .imgnote__body .sec__title { margin-bottom: 10px; } /* Schmale Anzeige: Text unter das Bild. Ein 200 Pixel breites Bild neben einer 120 Pixel breiten Textspalte liest niemand. */ @media (max-width: 560px) { .imgnote, .imgnote--right { flex-direction: column; } } /* --- Kacheln --------------------------------------------------------------- */ .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } @media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .tiles--c3 { grid-template-columns: repeat(3, 1fr); } .tiles--c4 { grid-template-columns: repeat(4, 1fr); } } /* Schriftfarbe an derselben Stelle wie der Grund - und ausdruecklich, nicht geerbt. ------------------------------------------------------------------------- Hier stand `color: inherit`. Der Zweck war richtig: die Kachel ist oft ein , und ohne diese Zeile waere der ganze Kasten in der Linkfarbe. Geerbt wird aber auch die Farbe eines farbigen Abschnitts - und die ist auf dunklem Grund WEISS. Die Kachel behaelt ihren hellen Grund (anders als die Zimmer- und Nachrichtenkarten, die auf dunklen Abschnitten durchscheinend werden). Weisse Schrift auf weisser Kachel ist unsichtbar, und es fiel nur bei der Ueberschrift auf: Kleinzeile, Text und „mehr" setzen ihre Farbe selbst - die Ueberschrift war die einzige, die erbte. Deshalb: wo ein Kasten seinen eigenen Grund mitbringt, gehoert die Schriftfarbe daneben. Genau so macht es das Newsletter-Fenster seit immer (.nldlg). */ .tile { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: var(--radius); overflow: clip; text-decoration: none; color: var(--ink-900); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 10px 28px -18px rgba(var(--shadow-rgb), .35); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } a.tile:hover { transform: translateY(-6px); box-shadow: 0 10px 20px -8px rgba(var(--shadow-rgb), .16), 0 30px 60px -28px rgba(155,32,78,.5); } .tile__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; } .tile__media img { width: 100%; height: 100%; object-fit: cover; } .tile__img--alt { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease); } a.tile:hover .tile__img--alt { opacity: 1; } .tile__body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .tile__kicker { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-text); } .tile__title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.24; } .tile__text { margin: 0; color: var(--ink-500); font-size: .95rem; } .tile__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px; font-size: .88rem; font-weight: 600; color: var(--brand-text); } .tile__more svg { transition: transform .25s var(--ease-out); } a.tile:hover .tile__more svg { transform: translateX(4px); } .tile__icon { display: grid; place-content: center; width: 52px; height: 52px; margin: 22px 22px 0; border-radius: 15px; background: var(--brand-100); color: var(--brand-700); } /* Kachelform "Bild mit Text darüber" */ .tiles--overlay .tile { position: relative; min-height: 340px; justify-content: flex-end; } .tiles--overlay .tile__media { position: absolute; inset: 0; aspect-ratio: auto; } .tiles--overlay .tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12) 62%); } .tiles--overlay .tile__body { position: relative; z-index: 2; color: #fff; } .tiles--overlay .tile__text { color: rgba(255,255,255,.86); } .tiles--overlay .tile__kicker, .tiles--overlay .tile__more { color: #fff; } /* --- Feststehende Ebene ---------------------------------------------------- */ /* Der Kniff: ein hoher Abschnitt, darin ein position:sticky-Kasten in Bildschirmhöhe. Beim Scrollen bleibt der Kasten stehen, der Abschnitt läuft weiter – und der nächste Abschnitt schiebt sich anschliessend darüber, weil er im Stapel höher liegt. Reines CSS, deshalb auch auf dem Handy flüssig. */ /* Bild und Text liegen in EINER Rasterzelle, also uebereinander. Das Bild klebt und ist einen Bildschirm hoch; der Text bringt seine Hoehe selbst mit und bestimmt damit, wie lange das Bild stehen bleibt. Frueher steckten beide gemeinsam in einem klebenden Kasten von einem Bildschirm Hoehe - da wurde jeder laengere Text oben und unten abgeschnitten, ohne dass man es merkte. */ .reveal-layer { position: relative; z-index: 0; display: grid; grid-template-columns: 1fr; } .reveal-layer > * { grid-area: 1 / 1; } .reveal-layer__media { position: sticky; top: 0; /* Ohne dieses "start" zoege das Raster das Bild auf die volle Zeilenhoehe - und was die ganze Zeile fuellt, hat keinen Weg zum Kleben. Das ist die eine Zeile, an der das ganze Verhalten haengt. */ align-self: start; height: 100svh; overflow: clip; /* haelt den sanften Zoom im Rahmen */ } .reveal-layer__img { width: 100%; height: 100%; object-fit: cover; } /* Die Abdunkelung gehoert ans Bild, nicht an den Text: sie soll mitkleben. */ .reveal-layer__media::after { content: ""; position: absolute; inset: 0; } .reveal-layer--ov-none .reveal-layer__media::after { background: rgba(0,0,0,.12); } .reveal-layer--ov-soft .reveal-layer__media::after { background: rgba(0,0,0,.42); } .reveal-layer--ov-strong .reveal-layer__media::after { background: rgba(0,0,0,.62); } /* min-height sorgt dafuer, dass ein kurzer Text weiterhin mittig auf einem vollen Bildschirm steht - so wie bisher. Wird der Text laenger, waechst der Kasten, und genau so lange bleibt das Bild stehen. */ .reveal-layer__body { position: relative; z-index: 1; align-self: start; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; color: #fff; } /* Luft vor und nach dem Text. Ohne sie begaenne der Text am oberen Bildschirmrand und endete am unteren - er wirkte angeklebt statt vorbeiziehend. Wie viel, bestimmt die Einstellung "Wie lange das Bild steht". */ .reveal-layer--medium .reveal-layer__body { padding-block: 24svh; } .reveal-layer--tall .reveal-layer__body { padding-block: 38svh; } .reveal-layer--full .reveal-layer__body { padding-block: 52svh; } .reveal-layer__body--center { text-align: center; } .reveal-layer__body--right { text-align: right; } .reveal-layer__body--center .wrap, .reveal-layer__body--right .wrap { max-width: 800px; } .reveal-layer__title { margin: 0 0 16px; color: #fff; font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.8rem); line-height: 1.08; text-shadow: 0 2px 30px rgba(0,0,0,.4); } /* Der Text zieht jetzt ueber das ganze Bild hinweg, nicht nur ueber dessen Mitte - er kommt also auch ueber helle Stellen. Ein leichter Schatten haelt ihn dort lesbar, ohne dass die Abdunkelung staerker werden muss. */ .reveal-layer__text { margin: 0 auto; max-width: 58ch; color: rgba(255,255,255,.92); font-size: 1.06rem; text-shadow: 0 1px 16px rgba(0,0,0,.45); } .reveal-layer__body--left .reveal-layer__text { margin-inline: 0; } .reveal-layer__body--center .btn-row { justify-content: center; } /* Der folgende Abschnitt muss über der feststehenden Ebene liegen. */ .reveal-layer + .sec, .reveal-layer + .hero, .reveal-layer + .bleed { position: relative; z-index: 1; background: var(--ink-50); } .reveal-layer + .sec--soft { background: var(--surface-2); } .reveal-layer + .sec--brand { background: var(--brand-fill); } .reveal-layer + .sec--dark { background: #171211; } /* --- Bild über die ganze Breite ------------------------------------------- */ .bleed { overflow: clip; } .bleed__figure { margin: 0; position: relative; } .bleed__img { width: 100%; object-fit: cover; display: block; } .bleed--short .bleed__img { height: 40svh; } .bleed--medium .bleed__img { height: 62svh; } .bleed--tall .bleed__img { height: 86svh; } .bleed--auto .bleed__img { height: auto; } .bleed__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px var(--gutter) 18px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); color: #fff; font-size: .88rem; } /* --- Bilderreihe: zwei bis vier Bilder ------------------------------------- Der kleine Bruder der Galerie. Dort ein Raster ueber mehrere Spalten, hier EINE Reihe in gleicher Hoehe - und die Reihe darf schmaler sein als der Text darueber. Genau das braucht man, um unter einen Abschnitt noch ein paar Ansichten zu setzen. -------------------------------------------------------------------------- */ .imgrow { display: grid; gap: 14px; /* Die Breite deckelt die Reihe; die Ausrichtung entscheidet, wo sie im Bereich sitzt, solange sie schmaler ist. */ max-width: var(--imgrow-max, 860px); } .imgrow--s { --imgrow-max: 620px; } .imgrow--m { --imgrow-max: 860px; } .imgrow--l { --imgrow-max: 1100px; } .imgrow--voll { --imgrow-max: none; } .imgrow--center { margin-inline: auto; } .imgrow--start { margin-inline: 0 auto; } .imgrow--end { margin-inline: auto 0; } /* Auf dem Handy untereinander: zwei Bilder nebeneinander sind auf 360px je 160px breit - da erkennt man nichts mehr. Ab 560px in einer Reihe. */ @media (min-width: 560px) { .imgrow--n2 { grid-template-columns: repeat(2, 1fr); } .imgrow--n3 { grid-template-columns: repeat(3, 1fr); } .imgrow--n4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .imgrow--n4 { grid-template-columns: repeat(4, 1fr); } } /* Kein Bild wird groesser gezeichnet, als es ist. ------------------------------------------------------------------------- `width: 100%` am Bild zieht es auf die Spaltenbreite - auch ein kleines. Ein 400px breites PNG in einer breiten Reihe wurde so vervierfacht: unscharf, und ueber tausend Pixel hoch. `max-width: 100%` verhindert das nicht, es verhindert nur das Ueberlaufen nach der anderen Seite. --imgw ist die echte Breite aus dem Medienverwalter. WO der Deckel sitzt, ist dabei entscheidend. Er sass zuerst am figure, zusammen mit justify-items: center an der Reihe. Damit wurde das figure auf seinen Inhalt geschrumpft - und seine Breite haing davon ab, was darin steht. Mit Bildunterschrift gab der Text ihm eine Breite, ohne blieb nichts uebrig und die Bilder verschwanden. Jetzt sitzt er am Bild selbst (bzw. am Knopf darum). Das figure bleibt so breit wie seine Spalte, das Bild wird gedeckelt, und beides steht mittig. Keine Breite haengt mehr davon ab, ob eine Unterschrift da ist. */ .imgrow__item { margin: 0; display: grid; gap: 6px; justify-items: center; } .imgrow__item > img, .imgrow__btn { width: 100%; max-width: min(100%, var(--imgw, 100%)); } .imgrow__btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); overflow: clip; } .imgrow__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; } .imgrow img { width: 100%; display: block; border-radius: var(--radius-sm); transition: transform .4s var(--ease-out); } .imgrow__btn img { border-radius: 0; } .imgrow__btn:hover img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .imgrow__btn:hover img { transform: none; } } /* Eine gemeinsame Bildform - sonst stehen zwei Bilder unterschiedlicher Form nebeneinander und die Reihe wirkt schief. Ohne Angabe behaelt jedes Bild seine eigene; bei einem einzelnen Hochformat ist das das Richtige. */ .imgrow--r4-3 img { aspect-ratio: 4 / 3; object-fit: cover; } .imgrow--r3-2 img { aspect-ratio: 3 / 2; object-fit: cover; } .imgrow--r16-9 img { aspect-ratio: 16 / 9; object-fit: cover; } .imgrow--r1-1 img { aspect-ratio: 1 / 1; object-fit: cover; } .imgrow--r3-4 img { aspect-ratio: 3 / 4; object-fit: cover; } .imgrow__cap { font-size: .82rem; color: var(--ink-500); line-height: 1.4; } .sec--brand .imgrow__cap, .sec--dark .imgrow__cap { color: rgba(255,255,255,.75); } /* Abstand nach oben verkuerzen: der Baustein gehoert meist zu dem darueber, und der volle Abschnittsabstand traennte ihn davon. */ .sec--tight-top { padding-top: calc(var(--sec-pad) * .25); } .sec--no-top { padding-top: 0; } /* --- Galerie --------------------------------------------------------------- */ .gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); } } .gallery__item { position: relative; padding: 0; border: 0; cursor: pointer; overflow: clip; border-radius: var(--radius-sm); background: var(--surface-2); aspect-ratio: 1 / 1; transition: transform .3s var(--ease-out); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .gallery__item:hover img { transform: scale(1.06); } /* Mosaik: jedes fünfte Bild grösser – wirkt weniger nach Tabelle */ @media (min-width: 700px) { .gallery--mosaic .gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } } .gallery--strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .gallery--strip .gallery__item { flex: 0 0 78%; scroll-snap-align: center; aspect-ratio: 4 / 3; } @media (min-width: 900px) { .gallery--strip .gallery__item { flex-basis: 34%; } } /* Grossansicht */ .lightbox { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; background: rgba(0,0,0,.92); opacity: 0; transition: opacity .25s; /* Kommt das Bild von draussen herein, ragt es waehrend der Bewegung ueber den Rand. Abgeschnitten wird hier am Bildschirmrand - dort sieht es ohnehin niemand, und es kann kein Rollbalken aufblitzen. */ overflow: clip; } .lightbox.is-on { opacity: 1; } .lightbox img { max-width: 94vw; max-height: 84svh; border-radius: 8px; } /* Titel und Unterschrift unter dem Bild. ------------------------------------------------------------------------- Der Titel kommt aus der Mediathek („Titel (Tooltip)"). Auf den kleinen Bildern der Seite zeigt ihn der Browser beim Ueberfahren als Sprechblase; in der Grossansicht steht er geschrieben da. Das ist kein Widerspruch, sondern derselbe Text am passenden Ort: hier schaut man das Bild an, hier faehrt man nicht darueber. In der Hausschrift (font-display, dieselbe wie die Ueberschriften) und zurueckhaltend hell - er soll das Bild begleiten, nicht mit ihm konkurrieren. Ein gemeinsamer Kasten statt zwei frei gesetzter Zeilen: nur so koennen sie nicht uebereinander liegen, wenn beide da sind. */ .lightbox__text { position: absolute; bottom: 22px; left: 0; right: 0; display: grid; gap: 4px; justify-items: center; padding-inline: 20px; text-align: center; } .lightbox__title { margin: 0; max-width: 52ch; color: rgba(255,255,255,.95); font-size: clamp(1.02rem, .92rem + .45vw, 1.3rem); line-height: 1.3; } .lightbox__cap { margin: 0; max-width: 62ch; color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.45; } /* Steht Text darunter, bekommt das Bild etwas weniger Hoehe - sonst laege der Text auf einem niedrigen Bildschirm im Bild. Ohne Text bleibt es bei der vollen Hoehe; die Regel greift nur, wenn wirklich etwas dasteht. */ .lightbox:has(.lightbox__text:not([hidden])) img { max-height: 74svh; } /* Der Bildnachweis: unten links, klein und zurueckhaltend. Er soll auffindbar sein, nicht auffallen - und der Bildunterschrift in der Mitte nicht ins Gehege kommen. Deshalb links und eine Spur kleiner. max-width, damit ein langer Name nicht unter das mittige Feld laeuft. */ .lightbox__credit { position: absolute; bottom: 22px; left: 20px; margin: 0; max-width: min(38vw, 320px); color: rgba(255,255,255,.55); font-size: .76rem; line-height: 1.3; } @media (max-width: 600px) { /* Auf dem Handy ist in einer Zeile kein Platz fuer beides: der Nachweis rueckt unter die Unterschrift. */ .lightbox__text { bottom: 44px; } .lightbox__credit { left: 0; right: 0; max-width: none; text-align: center; } } .lightbox__btn { position: absolute; display: grid; place-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; } .lightbox__btn:hover { background: rgba(255,255,255,.26); } .lightbox__close { top: 18px; right: 18px; } .lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); } /* --- Zahlen & Fakten ------------------------------------------------------- */ .facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; text-align: center; } @media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); } } .fact { display: flex; flex-direction: column; align-items: center; gap: 4px; } .fact__icon { color: var(--brand-700); margin-bottom: 4px; } .fact__value { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 700; line-height: 1; } .fact__label { font-size: .86rem; color: var(--ink-500); } /* --- Aufklappbare Fragen --------------------------------------------------- */ .acc { max-width: 860px; margin-inline: auto; } .acc__item { background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .acc__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; font-weight: 600; list-style: none; } .acc__q::-webkit-details-marker { display: none; } .acc__chev { flex: none; color: var(--brand-700); transition: transform .28s var(--ease); } .acc__item[open] .acc__chev { transform: rotate(180deg); } .acc__a { padding: 0 20px 20px; } /* --- Aufruf ---------------------------------------------------------------- */ /* Der Aufruf darf mehr Luft haben als ein gewoehnlicher Baustein - aber abgeleitet, nicht als zweite Treppe daneben. Wer den Abstand aendert, aendert diesen mit. */ .cta { padding-block: calc(var(--sec-pad) * 1.2); text-align: center; position: relative; overflow: clip; } .cta--image { color: #fff; } .cta__media { position: absolute; inset: 0; z-index: 0; } .cta__img { width: 100%; height: 100%; object-fit: cover; } .cta--image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 1; } .cta__inner { position: relative; z-index: 2; } .cta__title { margin: 0 0 12px; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.7rem); line-height: 1.12; } .cta__text { margin: 0 auto; max-width: 60ch; opacity: .92; } .cta .btn-row { justify-content: center; } /* --- Video ----------------------------------------------------------------- */ .video-figure { margin: 0; } .video-figure__caption { margin: 10px 0 0; font-size: .85rem; color: var(--ink-500); text-align: center; } /* Der Rahmen gibt das Seitenverhältnis vor; das Video selbst füllt ihn aus. So springt beim Laden nichts – die Höhe steht schon vor dem ersten Bild. */ .video-box { position: relative; width: 100%; background: #000; overflow: clip; } .video-box--16-9 { aspect-ratio: 16 / 9; } .video-box--21-9 { aspect-ratio: 21 / 9; } .video-box--4-3 { aspect-ratio: 4 / 3; } .video-box--1-1 { aspect-ratio: 1 / 1; } .video-box--4-5 { aspect-ratio: 4 / 5; } .video-box--3-4 { aspect-ratio: 3 / 4; } /* 9:16 bringt eine Breite von Haus aus mit: ohne sie würde ein Handyvideo über die ganze Lesebreite laufen und wäre dreimal so hoch wie der Bildschirm. Wer es anders will, begrenzt die Breite selbst (siehe unten) - diese Regel steht vorher und wird davon überschrieben. */ .video-box--9-16 { aspect-ratio: 9 / 16; max-width: 460px; margin-inline: auto; } /* "auto" heisst: das Video bestimmt die Höhe selbst. */ .video-box--auto { aspect-ratio: auto; } .video-box--rund { border-radius: var(--radius); } /* --- Breite begrenzen ----------------------------------------------------- Der Weg für ein Video im Hochformat. Ohne das bleibt dort nur die Wahl zwischen bildschirmhoch und beschnitten oder vollständig mit schwarzen Balken links und rechts. Mit einer Begrenzung steht das Video schmal in der Mitte: kein Beschnitt, keine Balken, weil der Kasten genau das Format des Videos hat. max-width und nicht width: auf einem Bildschirm, der schmaler ist als die Vorgabe, bleibt das Video so breit wie der Platz - sonst stünde auf dem Handy ein 460 Pixel breites Video in einem 390 Pixel breiten Fenster. Steht nach den Seitenverhältnissen, damit es die 460 Pixel von 9:16 übersteuert (gleiche Gewichtung, spätere Regel gewinnt). ------------------------------------------------------------------------- */ .video-box--schmal { max-width: var(--video-b); margin-inline: auto; } /* Volle Bildschirmhöhe. svh statt vh: auf dem Handy zählt damit die Höhe OHNE die ein- und ausfahrende Adressleiste – sonst springt das Video beim Scrollen. Das Bild wird links und rechts beschnitten, die Mitte bleibt. */ .video-box--h-screen { aspect-ratio: auto; height: 100svh; } @media (max-width: 900px) { .video-box--h-screen-sm { aspect-ratio: auto; height: 100svh; } } /* Ein bildschirmhohes Video ganz oben braucht unten nicht den vollen Abstand – der nächste Abschnitt bringt seinen eigenen mit. Ganz auf null war es aber zu viel des Guten: hat der folgende Abschnitt einen farbigen Hintergrund, stösst das Video hart dagegen. Es bleibt deshalb ein schmaler Streifen stehen, deutlich weniger als --sec-pad, aber sichtbar. Auffallen musste das erst auf schmalen Bildschirmen, weil nur dort "screen_sm" ueberhaupt greift. */ .sec--flush.sec--pad:has(.video-box--h-screen) { padding-bottom: clamp(16px, 2.2vw, 28px); } @media (max-width: 900px) { .sec--flush.sec--pad:has(.video-box--h-screen-sm) { padding-bottom: clamp(16px, 2.2vw, 28px); } } .video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; } .video-box--auto .video { height: auto; } .video-box--cover .video { object-fit: cover; } .video-embed { position: relative; background: var(--surface-2); cursor: pointer; } /* Bei YouTube/Vimeo kennen wir die Masse nicht – "auto" braucht deshalb trotzdem eine Höhe, sonst bliebe der Kasten flach. */ .video-embed.video-box--auto { aspect-ratio: 16 / 9; } .video-embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-embed__play { position: absolute; inset: 0; margin: auto; width: 82px; height: 82px; display: grid; place-content: center; cursor: pointer; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--brand-700); transition: transform .25s var(--ease-out), background .2s; } .video-embed:hover .video-embed__play { transform: scale(1.08); background: #fff; } .video-embed__note { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 11px; color: rgba(255,255,255,.75); } /* --- Zitat ----------------------------------------------------------------- */ .quote { margin: 0; max-width: 800px; margin-inline: auto; text-align: center; } .quote__text { margin: 0 0 20px; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.85rem); line-height: 1.4; } /* Die Gaensefuesschen. ------------------------------------------------------------------------- Aus dem Stylesheet und nicht aus dem Text: so stehen sie IMMER da, auch wenn jemand sie beim Eintippen vergisst - und sie richten sich nach der Sprache. `quotes` legt fest, welche Zeichen gelten; open-quote und close-quote holen sie sich daraus. Das lang-Attribut der Seite entscheidet. Etwas groesser als der Text, wie gewuenscht. line-height: 0 und die kleine Verschiebung nach unten halten die Zeile trotzdem ruhig - ohne sie waere die erste Zeile des Zitats hoeher als die uebrigen. */ :root { quotes: "\201E" "\201C" "\201A" "\2018"; } /* de: „ " */ html[lang="it"] { quotes: "\00AB" "\00BB" "\2039" "\203A"; } /* it: « » */ html[lang="en"] { quotes: "\201C" "\201D" "\2018" "\2019"; } /* en: " " */ .quote__text::before, .quote__text::after { font-size: 1.35em; line-height: 0; vertical-align: -.18em; color: var(--brand-700); opacity: .75; } .quote__text::before { content: open-quote; margin-right: .04em; } .quote__text::after { content: close-quote; margin-left: .04em; } .quote__by { display: flex; align-items: center; justify-content: center; gap: 16px; } /* Der Kreis war 52 Pixel gross - darauf erkennt man niemanden. Jetzt waechst er mit dem Bildschirm mit; die Grenzen halten ihn auf dem Handy noch neben dem Namen und lassen ihn am Schreibtisch nicht zum Portraet werden. Die eigene Eigenschaft, weil Breite und Hoehe zwingend gleich sein muessen - stuende die Formel zweimal da, wuerde sie irgendwann nur an einer Stelle geaendert, und aus dem Kreis wuerde ein Ei. flex:none: ohne das drueckt ein langer Name den Kreis schmal. */ .quote__avatar { --quote-avatar: clamp(72px, 8vw, 104px); width: var(--quote-avatar); height: var(--quote-avatar); flex: none; border-radius: 999px; object-fit: cover; } .quote__by span { display: flex; flex-direction: column; text-align: left; } /* Der Name traegt das Zitat - er darf groesser sein als der Fliesstext. */ .quote__by strong { font-size: 1.18rem; line-height: 1.25; } .quote__by small { font-size: .9rem; color: var(--ink-500); } /* Auf farbigem und dunklem Grund ging die Funktion unter: --ink-500 ist ein dunkles Grau, und auf Bordeaux liest sich das nicht mehr. Dasselbe gilt fuer die Gaensefuesschen in der Hausfarbe. */ .sec--brand .quote__by small, .sec--dark .quote__by small { color: rgba(255,255,255,.82); } .sec--brand .quote__text::before, .sec--brand .quote__text::after, .sec--dark .quote__text::before, .sec--dark .quote__text::after { color: #fff; opacity: .55; } /* Und auf einer Hausfarbe: dort bestimmt --fill-fg die Schriftfarbe. */ .sec--ci .quote__by small { color: var(--fill-fg); opacity: .85; } .sec--ci .quote__text::before, .sec--ci .quote__text::after { color: var(--fill-fg); opacity: .55; } /* --- Newsletter ------------------------------------------------------------ */ .news { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--ink-200); } .sec--brand .news { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); } .news__icon { display: grid; place-content: center; width: 52px; height: 52px; flex: none; border-radius: 15px; background: var(--brand-100); color: var(--brand-700); } .news__body { flex: 1 1 260px; } .news__body .sec__title { margin-bottom: 4px; } .news__text { margin: 0; color: var(--ink-500); } .sec--brand .news__text { color: rgba(255,255,255,.82); } .news__cta { flex: none; } /* Die ganze Karte reagiert auf einen Klick, nicht nur der Knopf. */ .news--klickbar { cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); } .news--klickbar:hover { border-color: var(--brand-700); box-shadow: 0 18px 44px -26px rgba(155,32,78,.7); transform: translateY(-2px); } .news--klickbar:hover .news__icon { background: var(--brand-fill); color: #fff; } .news__icon { transition: background .25s, color .25s; } /* --- Partner --------------------------------------------------------------- */ .partners__head { margin: 0 0 20px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); } .partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px; } .partners__logo { max-height: 54px; width: auto; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s, transform .3s var(--ease-out); } .partners li:hover .partners__logo { filter: none; opacity: 1; transform: scale(1.05); } :root[data-theme="dark"] .partners__logo { filter: grayscale(1) brightness(1.9); } :root[data-theme="dark"] .partners li:hover .partners__logo { filter: brightness(1.15); } /* --- Kontakt --------------------------------------------------------------- */ .contact { display: grid; gap: 28px; } @media (min-width: 900px) { .contact { grid-template-columns: 380px 1fr; gap: 52px; } } .contact__card { padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--ink-200); } .contact__addr { font-style: normal; color: var(--ink-700); margin-bottom: 16px; } .contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .contact__list a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-700); } .contact__list a:hover { color: var(--brand-text); } .contact__list svg { color: var(--brand-700); flex: none; } /* --- Teilen ---------------------------------------------------------------- */ .share-wrap { padding-block: 8px 52px; } .share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .share__label { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); } .share__links { display: flex; gap: 8px; } .share__btn { display: grid; place-content: center; width: 40px; height: 40px; border: 1px solid var(--ink-200); border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--ink-700); text-decoration: none; transition: all .2s; } .share__btn:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } /* --- Fehlerseite ----------------------------------------------------------- */ .error-page { padding-top: calc(var(--header-h) + 60px); text-align: center; } .error-page .btn-row { justify-content: center; } /* =========================================================================== Popup-Fenster: wie sie hereinkommen =========================================================================== Betroffen sind die zwei Fenster, die es im Frontend gibt: die Newsletter-Anmeldung (ein echtes ) und die Bild-Grossansicht (.lightbox). Welcher Effekt gilt, steht unter Einstellungen und landet als data-popup am . AUFBAU. Eine einzige Regel wendet die Bewegung an; jeder Effekt setzt nur drei Variablen. Sonst stuenden hier fuenfundvierzig fast gleiche Regeln mit je zwei Selektoren - und beim naechsten Fenster muesste man alle fuenfundvierzig anfassen. ANIMATION, NICHT TRANSITION. Ein geht von display:none auf sichtbar. Ein transition springt dabei ohne Umweg ans Ziel (dafuer gaebe es @starting-style, das aber noch nicht ueberall sitzt). Eine Animation laeuft verlaesslich an, sobald das Element gezeichnet wird. Das Formular OHNE JavaScript (.nldlg__panel--offen) steht offen auf der Seite und bekommt deshalb nichts davon ab: der Selektor verlangt ein geoeffnetes darueber. ======================================================================== */ .nldlg[open] .nldlg__panel, .lightbox.is-on img { animation: var(--pop-anim, pop-fade) var(--pop-dur, .45s) var(--pop-ease, ease) both; transform-origin: var(--pop-origin, center); } /* „Ohne Bewegung" ist kein Effekt, sondern das Abschalten der Regel oben. */ [data-popup="none"] .nldlg[open] .nldlg__panel, [data-popup="none"] .lightbox.is-on img { animation: none; } /* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt sie nicht - unabhaengig davon, was hier ausgewaehlt ist. Ein Fenster, das heranspringt, kippt und wackelt, ist bei Reisekrankheit und bestimmten Formen von Migraene nicht nur unschoen. Das sanfte Einblenden bleibt. */ @media (prefers-reduced-motion: reduce) { .nldlg[open] .nldlg__panel, .lightbox.is-on img { animation: pop-fade .3s ease both; } } /* Welcher Effekt welche Bewegung bekommt - eine Zeile je Effekt. */ [data-popup="fade"] { --pop-anim: pop-fade; --pop-dur: .45s; --pop-ease: ease; } [data-popup="swing"] { --pop-anim: pop-swing; --pop-dur: .8s; --pop-ease: cubic-bezier(.175, .885, .32, 1.275); --pop-origin: top center; } [data-popup="rubber"] { --pop-anim: pop-rubber; --pop-dur: .9s; --pop-ease: ease; } [data-popup="roll-left"] { --pop-anim: pop-roll-left; --pop-dur: 1s; --pop-ease: cubic-bezier(.25, .46, .45, .94); } [data-popup="roll-right"] { --pop-anim: pop-roll-right; --pop-dur: 1s; --pop-ease: cubic-bezier(.25, .46, .45, .94); } [data-popup="skew"] { --pop-anim: pop-skew; --pop-dur: .7s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="slide-rotate"] { --pop-anim: pop-slide-rotate; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="heartbeat"] { --pop-anim: pop-heartbeat; --pop-dur: 1s; --pop-ease: ease; } [data-popup="jello"] { --pop-anim: pop-jello; --pop-dur: 1s; --pop-ease: ease; } [data-popup="flip-xy"] { --pop-anim: pop-flip-xy; --pop-dur: .9s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="zoom-corner"] { --pop-anim: pop-zoom-corner; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: top left; } [data-popup="swing-bottom"] { --pop-anim: pop-swing-bottom; --pop-dur: .8s; --pop-ease: cubic-bezier(.175, .885, .32, 1.275); --pop-origin: bottom center; } [data-popup="bounce-down"] { --pop-anim: pop-bounce-down; --pop-dur: .9s; --pop-ease: ease; } [data-popup="bounce-up"] { --pop-anim: pop-bounce-up; --pop-dur: .9s; --pop-ease: ease; } [data-popup="rotate-down-left"] { --pop-anim: pop-rotate-down-left; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: left bottom; } [data-popup="rotate-down-right"] { --pop-anim: pop-rotate-down-right; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: right bottom; } [data-popup="light-speed"] { --pop-anim: pop-light-speed; --pop-dur: .7s; --pop-ease: cubic-bezier(.25, .46, .45, .94); } [data-popup="fade-scale-rotate"] { --pop-anim: pop-fade-scale-rotate; --pop-dur: 1s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="blur"] { --pop-anim: pop-blur; --pop-dur: .8s; --pop-ease: ease; } [data-popup="unfold-vertical"] { --pop-anim: pop-unfold-vertical; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: top center; } [data-popup="unfold-horizontal"] { --pop-anim: pop-unfold-horizontal; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: left center; } [data-popup="unroll-top"] { --pop-anim: pop-unroll-top; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: top center; } [data-popup="unroll-left"] { --pop-anim: pop-unroll-left; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: left center; } [data-popup="unroll-bottom"] { --pop-anim: pop-unroll-bottom; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: bottom center; } [data-popup="unroll-right"] { --pop-anim: pop-unroll-right; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); --pop-origin: right center; } [data-popup="slide-left"] { --pop-anim: pop-slide-left; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="slide-right"] { --pop-anim: pop-slide-right; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="slide-top"] { --pop-anim: pop-slide-top; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="slide-bottom"] { --pop-anim: pop-slide-bottom; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="spring"] { --pop-anim: pop-spring; --pop-dur: .8s; --pop-ease: cubic-bezier(.68, -.55, .27, 1.55); } [data-popup="zoom-rotate"] { --pop-anim: pop-zoom-rotate; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="perspective"] { --pop-anim: pop-perspective; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="origami"] { --pop-anim: pop-origami; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="origami-right"] { --pop-anim: pop-origami-right; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="bounce"] { --pop-anim: pop-bounce; --pop-dur: .8s; --pop-ease: ease; } [data-popup="diagonal-tl"] { --pop-anim: pop-diagonal-tl; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="diagonal-tr"] { --pop-anim: pop-diagonal-tr; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="diagonal-bl"] { --pop-anim: pop-diagonal-bl; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="diagonal-br"] { --pop-anim: pop-diagonal-br; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="convex"] { --pop-anim: pop-convex; --pop-dur: .9s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="flip-x"] { --pop-anim: pop-flip-x; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="flip-ys"] { --pop-anim: pop-flip-ys; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="flip-ys-reverse"] { --pop-anim: pop-flip-ys-reverse; --pop-dur: .8s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-popup="flip-mix"] { --pop-anim: pop-flip-mix; --pop-dur: .9s; --pop-ease: cubic-bezier(.34, 1.56, .64, 1); } @keyframes pop-fade { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-swing { from { transform: rotateX(-100deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-rubber { 0% { transform: scale(1); opacity: 0; } 30% { transform: scaleX(1.25) scaleY(.75); opacity: 1; } 40% { transform: scaleX(.75) scaleY(1.25); } 50% { transform: scaleX(1.15) scaleY(.85); } 65% { transform: scaleX(.95) scaleY(1.05); } 75% { transform: scaleX(1.05) scaleY(.95); } 100% { transform: scale(1); opacity: 1; } } @keyframes pop-roll-left { from { transform: translateX(-120%) rotate(-720deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-roll-right { from { transform: translateX(120%) rotate(720deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-skew { from { transform: skewX(40deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-slide-rotate { from { transform: translateY(100%) rotate(15deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-heartbeat { 0% { transform: scale(1); opacity: 0; } 14% { transform: scale(1.15); opacity: 1; } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } @keyframes pop-jello { 0% { transform: skewX(0) skewY(0); opacity: 0; } 15% { transform: skewX(-12.5deg) skewY(-12.5deg); opacity: 1; } 30% { transform: skewX(6.25deg) skewY(6.25deg); } 45% { transform: skewX(-3.125deg) skewY(-3.125deg); } 60% { transform: skewX(1.5625deg) skewY(1.5625deg); } 75% { transform: skewX(-.78125deg) skewY(-.78125deg); } 100% { transform: skewX(0) skewY(0); opacity: 1; } } @keyframes pop-flip-xy { from { transform: perspective(800px) rotateX(90deg) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-zoom-corner { from { transform: scale(0) translate(-100%, -100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-swing-bottom { from { transform: rotateX(100deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-bounce-down { 0% { transform: translateY(-300px); opacity: 0; } 60% { transform: translateY(25px); opacity: 1; } 75% { transform: translateY(-10px); } 90% { transform: translateY(5px); } 100% { transform: translateY(0); opacity: 1; } } @keyframes pop-bounce-up { 0% { transform: translateY(300px); opacity: 0; } 60% { transform: translateY(-25px); opacity: 1; } 75% { transform: translateY(10px); } 90% { transform: translateY(-5px); } 100% { transform: translateY(0); opacity: 1; } } @keyframes pop-rotate-down-left { from { transform: rotate(-90deg) translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-rotate-down-right { from { transform: rotate(90deg) translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-light-speed { from { transform: translateX(100%) skewX(-30deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-fade-scale-rotate { from { transform: scale(.3) rotate(-180deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-blur { from { transform: scale(1.2); opacity: 0; filter: blur(20px); } to { transform: none; opacity: 1; filter: none; } } @keyframes pop-unfold-vertical { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-unfold-horizontal { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-unroll-top { from { transform: perspective(900px) rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-unroll-left { from { transform: perspective(900px) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-unroll-bottom { from { transform: perspective(900px) rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-unroll-right { from { transform: perspective(900px) rotateY(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-slide-left { from { transform: perspective(900px) translate3d(-150%, 0, 0) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-slide-right { from { transform: perspective(900px) translate3d(150%, 0, 0) rotateY(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-slide-top { from { transform: perspective(900px) translate3d(0, -150%, 0) rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-slide-bottom { from { transform: perspective(900px) translate3d(0, 150%, 0) rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-spring { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-zoom-rotate { from { transform: scale(0) rotate(45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-perspective { from { transform: perspective(1000px) translateZ(-300px) rotateX(30deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-origami { from { transform: rotate(-90deg) scale(.3) skewX(20deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-origami-right { from { transform: rotate(90deg) scale(.3) skewX(-20deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-bounce { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 40% { transform: scale(.9); } 60% { transform: scale(1.03); } 80% { transform: scale(.97); } 100% { transform: scale(1); opacity: 1; } } @keyframes pop-diagonal-tl { from { transform: translate3d(-200%, -200%, 0) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-diagonal-tr { from { transform: translate3d(200%, -200%, 0) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-diagonal-bl { from { transform: translate3d(-200%, 200%, 0) rotate(45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-diagonal-br { from { transform: translate3d(200%, 200%, 0) rotate(45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-convex { from { transform: scale(.2); opacity: 0; border-radius: 50%; } to { transform: none; opacity: 1; } } @keyframes pop-flip-x { from { transform: perspective(900px) rotateX(180deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-flip-ys { from { transform: perspective(900px) rotateY(180deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-flip-ys-reverse { from { transform: perspective(900px) rotateY(-180deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pop-flip-mix { from { transform: perspective(900px) rotateX(180deg) rotateY(180deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } } /* =========================================================================== Bildwechsel in der Grossansicht =========================================================================== Beim Blättern mit den Pfeilen, der Tastatur oder dem Finger. Welcher Effekt gilt, steht unter Einstellungen; die Bausteine „Bildergalerie" und „Bilderreihe" dürfen davon abweichen. WIE DIE WAHL ANKOMMT. Der allgemeine Wert steht als data-slider am und setzt dort die Variablen. Weicht ein Baustein ab, setzt das Skript dasselbe Merkmal am Grossansicht-Fenster selbst - und weil CSS-Variablen vererbt werden, gewinnt automatisch die nähere Angabe. Es braucht also keine Rangfolge im Skript. RICHTUNG. --slide-dir ist 1 beim Vorwärtsblättern und -1 beim Zurück. Damit kommt ein seitlicher Effekt von der richtigen Seite herein, und es braucht trotzdem nur EINEN Keyframe-Satz je Effekt. WARUM ANIMATION UND KEIN TRANSITION. Es wechselt nur die Bildquelle, das Element bleibt dasselbe. Ein transition hätte nichts, wovon es ausgehen könnte. Die Animation wird bei jedem Wechsel neu gestartet (siehe app.js). ======================================================================== */ .lightbox img.is-wechsel { animation: var(--sld-anim, none) var(--sld-dur, .45s) var(--sld-ease, ease) both; transform-origin: var(--sld-origin, center); } /* „Standard" heisst: ohne Übergang. Das Bild ist einfach da - das ist bei schnellem Durchblättern das Ruhigste, und darum die Vorgabe. */ [data-slider="none"] { --sld-anim: none; } /* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt ein sanftes Überblenden - unabhängig von der Auswahl. Ganz ohne Übergang wäre hier auch möglich; ein kurzes Überblenden macht aber sichtbar, DASS ein neues Bild da ist, und das ist eine Hilfe, keine Zierde. */ @media (prefers-reduced-motion: reduce) { .lightbox img.is-wechsel { animation: sld-fade .25s ease both; } } /* Welcher Effekt welche Bewegung bekommt - eine Zeile je Effekt. */ [data-slider="fade"] { --sld-anim: sld-fade; --sld-dur: .4s; --sld-ease: ease; } [data-slider="grau"] { --sld-anim: sld-grau; --sld-dur: .7s; --sld-ease: ease; } [data-slider="slide"] { --sld-anim: sld-slide; --sld-dur: .45s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="slide-soft"] { --sld-anim: sld-slide-soft; --sld-dur: .5s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="push"] { --sld-anim: sld-push; --sld-dur: .5s; --sld-ease: cubic-bezier(.25, .46, .45, .94); } [data-slider="rise"] { --sld-anim: sld-rise; --sld-dur: .45s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="drop"] { --sld-anim: sld-drop; --sld-dur: .45s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="zoom-in"] { --sld-anim: sld-zoom-in; --sld-dur: .45s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="zoom-out"] { --sld-anim: sld-zoom-out; --sld-dur: .45s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="zoom-soft"] { --sld-anim: sld-zoom-soft; --sld-dur: .6s; --sld-ease: ease; } [data-slider="flip-y"] { --sld-anim: sld-flip-y; --sld-dur: .55s; --sld-ease: cubic-bezier(.25, .46, .45, .94); } [data-slider="flip-x"] { --sld-anim: sld-flip-x; --sld-dur: .55s; --sld-ease: cubic-bezier(.25, .46, .45, .94); } [data-slider="rotate"] { --sld-anim: sld-rotate; --sld-dur: .55s; --sld-ease: cubic-bezier(.34, 1.56, .64, 1); } [data-slider="spin"] { --sld-anim: sld-spin; --sld-dur: .7s; --sld-ease: cubic-bezier(.25, .46, .45, .94); } [data-slider="swing"] { --sld-anim: sld-swing; --sld-dur: .6s; --sld-ease: cubic-bezier(.175, .885, .32, 1.275); --sld-origin: top center; } [data-slider="skew"] { --sld-anim: sld-skew; --sld-dur: .5s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="blur"] { --sld-anim: sld-blur; --sld-dur: .55s; --sld-ease: ease; } [data-slider="blur-zoom"] { --sld-anim: sld-blur-zoom; --sld-dur: .6s; --sld-ease: ease; } [data-slider="iris"] { --sld-anim: sld-iris; --sld-dur: .6s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="curtain"] { --sld-anim: sld-curtain; --sld-dur: .55s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="wipe-up"] { --sld-anim: sld-wipe-up; --sld-dur: .55s; --sld-ease: cubic-bezier(.16, 1, .3, 1); } [data-slider="bounce"] { --sld-anim: sld-bounce; --sld-dur: .65s; --sld-ease: ease; } [data-slider="elastic"] { --sld-anim: sld-elastic; --sld-dur: .7s; --sld-ease: ease; } @keyframes sld-fade { from { opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-grau { from { filter: grayscale(1) contrast(.9); opacity: 0; } to { transform: none; opacity: 1; filter: grayscale(0) contrast(1); } } @keyframes sld-slide { from { transform: translateX(calc(var(--slide-dir, 1) * 100%)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-slide-soft { from { transform: translateX(calc(var(--slide-dir, 1) * 40px)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-push { from { transform: translateX(calc(var(--slide-dir, 1) * 160%)); } to { transform: none; opacity: 1; } } @keyframes sld-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-zoom-in { from { transform: scale(.88); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-zoom-out { from { transform: scale(1.12); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-zoom-soft { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-flip-y { from { transform: perspective(1200px) rotateY(calc(var(--slide-dir, 1) * 70deg)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-flip-x { from { transform: perspective(1200px) rotateX(70deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-rotate { from { transform: rotate(calc(var(--slide-dir, 1) * 12deg)) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-spin { from { transform: rotate(calc(var(--slide-dir, 1) * 180deg)) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-swing { from { transform: rotateX(-45deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-skew { from { transform: skewX(calc(var(--slide-dir, 1) * -18deg)) translateX(calc(var(--slide-dir, 1) * 60px)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sld-blur { from { filter: blur(18px); opacity: 0; } to { transform: none; opacity: 1; filter: blur(0); } } @keyframes sld-blur-zoom { from { filter: blur(14px); transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; filter: blur(0); } } @keyframes sld-iris { from { clip-path: circle(0% at 50% 50%); } to { transform: none; opacity: 1; clip-path: circle(75% at 50% 50%); } } @keyframes sld-curtain { from { clip-path: inset(0 calc(50% - 50% * var(--slide-dir, 1)) 0 calc(50% + 50% * var(--slide-dir, 1))); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes sld-wipe-up { from { clip-path: inset(100% 0 0 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes sld-bounce { 0% { transform: translateY(-60px); opacity: 0; } 55% { transform: translateY(12px); opacity: 1; } 75% { transform: translateY(-6px); } 90% { transform: translateY(3px); } 100% { transform: translateY(0); opacity: 1; } } @keyframes sld-elastic { 0% { transform: scale(.7); opacity: 0; } 45% { transform: scale(1.06); opacity: 1; } 70% { transform: scale(.97); } 88% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } /* --- Angeld-Zahlung (hogast-Widget) ---------------------------------------- Das Widget bringt seine eigene Gestaltung mit; hier steht nur, was es umgibt. Bewusst zurückhaltend: je mehr wir hineinregieren, desto eher bricht etwas, wenn hogast sein Stylesheet ändert - und das tut es, ohne uns zu fragen. Das ist der Preis dafür, dass das Haus immer die aktuelle Fassung hat. */ .pay { margin-top: 22px; } .pay__note { margin-top: 26px; font-size: .92rem; } /* Steht kein Schlüssel in den Einstellungen, erscheint hier ein Satz statt des Formulars - sichtbar, aber nicht wie eine Fehlermeldung. */ .pay__hinweis { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--ink-200); border-radius: var(--radius); background: var(--surface); color: var(--ink-700); font-size: .95rem; } /* --- Zahlungsbeleg -------------------------------------------------------- Die Seite NACH der Zahlung: Baustein „Zahlungsbeleg". Bewusst wie ein Beleg und nicht wie eine Erfolgsmeldung: ein Kasten, eine Liste, keine Farbe über die ganze Fläche. Der Gast soll die Angaben lesen und wiederfinden können - die Freude über die gelungene Zahlung macht der Text der Seite, nicht der Kasten. Die beiden Farben sind dieselben wie bei den Hinweisen zum Newsletter (.nlnote--ok): im Haus gibt es nur ein Grün für „hat geklappt". ------------------------------------------------------------------------- */ .payres { margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--ink-200); border-radius: var(--radius); background: var(--surface); } /* Die Ergebniszeile. Steht über der Liste und trägt die Farbe. */ .payres__state { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 1rem; } .payres__state svg, .payres__test svg { flex: none; } .payres--ok .payres__state { background: #eef7f1; color: #245c3a; } .payres--bad .payres__state { background: var(--surface-2); color: var(--ink-900); } .payres--open .payres__state { background: var(--surface-2); color: var(--ink-900); } /* Die Werte. Zwei Spalten ab Tablet, auf dem Handy untereinander - eine Buchungsnummer neben einem schmalen Etikett bricht sonst mitten entzwei. */ .payres__list { margin: 0; } .payres__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid var(--ink-200); } .payres__row:first-child { border-top: 0; padding-top: 0; } .payres__row dt { margin: 0; font-size: .86rem; color: var(--ink-500); } .payres__row dd { margin: 0; font-weight: 600; color: var(--ink-900); /* Belegnummern sind lang und haben keine Trennstellen. */ overflow-wrap: anywhere; } @media (min-width: 640px) { .payres__row { grid-template-columns: 11rem 1fr; gap: 16px; align-items: baseline; } .payres__row dt { font-size: .92rem; } } /* Der Hinweis auf den Testbetrieb. Bleibt rot: wer ihn übersieht, hält sein Angeld für bezahlt. */ .payres__test { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #fdeceb; color: #8a2018; font-size: .94rem; font-weight: 600; } /* =========================================================================== 7. Fussbereich =========================================================================== */ .site-footer { margin-top: 0; } /* Farbige Zeile mit Hotelname, Logo, Adresse, Telefon, E-Mail, CIN */ .footer-bar { /* Alle drei Stufen halten weisse Schrift auf 7:1 (WCAG 1.4.6). Heller dürfen sie nicht werden – #c62649 käme nur auf 5,6:1. */ background: linear-gradient(120deg, #6d1637, var(--brand-fill) 55%, #881c44); color: #fff; } .footer-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; padding-block: 20px; } .footer-bar__brand { display: flex; align-items: center; gap: 12px; } .footer-bar__logo { height: 44px; width: auto; } .footer-bar__name { display: block; font-size: 1.16rem; line-height: 1.2; } .footer-bar__company { display: block; font-size: .78rem; color: rgba(255,255,255,.7); } .footer-bar__addr { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.9); } .footer-bar__addr span { display: inline-flex; align-items: flex-start; gap: 8px; } .footer-bar__addr svg { flex: none; margin-top: 3px; opacity: .8; } .footer-bar__contact { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; } .footer-bar__contact a, .footer-bar__cin { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.92); text-decoration: none; } .footer-bar__contact a:hover { color: #fff; text-decoration: underline; } .footer-bar__contact svg { opacity: .8; flex: none; } .footer-bar__cin { color: rgba(255,255,255,.72); font-size: .82rem; letter-spacing: .03em; } /* Spalten */ .footer-main { background: #241d1c; color: rgba(255,255,255,.78); } :root[data-theme="dark"] .footer-main { background: #120e0e; } .footer-main__grid { display: grid; gap: 34px; padding-block: 46px; grid-template-columns: 1fr; } @media (min-width: 700px) { .footer-main__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .footer-main__grid { grid-template-columns: 1.4fr repeat(3, 1fr) 1fr; gap: 44px; } } .footer-head { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); } .footer-intro { margin: 0 0 22px; max-width: 40ch; font-size: .95rem; line-height: 1.7; } .flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .flist a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); text-decoration: none; font-size: .93rem; transition: color .2s, gap .2s; } .flist a:hover { color: #fff; gap: 12px; } .flist svg { flex: none; opacity: .6; } /* --- Verweis, der nur aus einem Symbol besteht ---------------------------- Verwendet bei den Aktionsknoepfen oben und in den Fussmenues (Darstellung "Nur Symbol"). Die Beschriftung steht weiter im Quelltext und ist nur unsichtbar - ohne sie waere der Verweis fuer Vorlesesoftware eine namenlose Grafik. 44 x 44: Mindestgroesse fuer Bedienelemente nach WCAG 2.5.5 (AAA). Auch dann, wenn die Zeichnung selbst kleiner ist. */ .iconlink { display: inline-grid; place-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; flex: none; } .iconlink__icon { width: 24px; height: 24px; } /* Die Beschriftung eines Nur-Symbol-Verweises. Versteckt, aber NICHT display:none - so bleibt sie fuer Vorlesesoftware und Suchmaschinen lesbar. Wo sie sichtbar sein soll (Schublade), wird sie weiter unten zurueckgeholt. */ .iconlink__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Mit Hausfarbe wird daraus ein gefuellter runder Knopf. */ .iconlink.ci { background: var(--fill); color: var(--fill-fg); border-color: var(--fill); } .iconlink.ci:hover { background: var(--fill-hover); color: var(--fill-fg); } /* Gesamtnote von Google unter den Karten. Zurueckhaltend: sie ergaenzt die Stimmen, sie soll ihnen nicht die Schau stehlen. */ .revs__google { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 0; font-size: .95rem; color: var(--ink-700); } .revs__google a { color: inherit; text-underline-offset: 3px; } .sec--brand .revs__google, .sec--dark .revs__google { color: rgba(255,255,255,.85); } .sec--ci .revs__google { color: var(--fill-fg); opacity: .9; } .socials { display: flex; gap: 10px; } .social { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.86); text-decoration: none; font-size: .88rem; font-weight: 600; transition: background .2s, color .2s, transform .2s var(--ease-out); } .social:hover { background: var(--brand-fill); color: #fff; transform: translateY(-2px); } .footer-partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .footer-partners img { max-height: 42px; width: auto; filter: grayscale(1) brightness(2.4); opacity: .7; transition: opacity .3s, filter .3s; } .footer-partners a:hover img { opacity: 1; filter: brightness(1.1); } /* Rechtliches */ .footer-legal { background: #1a1413; color: rgba(255,255,255,.55); font-size: .82rem; } :root[data-theme="dark"] .footer-legal { background: #0c0909; } .footer-legal__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 16px; } .footer-legal__copy { margin: 0; } .footer-legal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .footer-legal__links a, .footer-legal__menu a { color: rgba(255,255,255,.6); text-decoration: none; } .footer-legal__links a:hover, .footer-legal__menu a:hover { color: #fff; text-decoration: underline; } .footer-legal__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } /* =========================================================================== 8. Banner, Chat, Kleinkram =========================================================================== */ /* Nach oben */ .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; place-content: center; width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer; background: var(--brand-fill); color: #fff; box-shadow: 0 12px 30px -12px rgba(155,32,78,.85); opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s var(--ease-out), bottom .3s var(--ease); } .to-top.is-on { opacity: 1; transform: none; } /* Platz für das Chatfenster: sobald eines gefunden wird, rückt der Knopf darüber und die beiden überlagern sich nicht mehr. Der Wert kommt aus app.js und ist die gemessene Höhe des Chatfensters plus Luft. Die 92px sind nur der Rückfall – sie passen zu den üblichen runden Sprechblasen, falls sich nichts messen lässt. */ body.has-chat .to-top { bottom: var(--chat-platz, 92px); } /* Reservierter Platz für den Website-Chat (Skript kommt später) */ .chat-slot { position: fixed; right: 18px; bottom: 18px; z-index: 71; } .chat-slot:empty { pointer-events: none; } /* Sonderinfo-Banner */ .banner { position: fixed; z-index: 150; opacity: 0; transition: opacity .35s var(--ease), transform .4s var(--ease-out); } .banner.is-on { opacity: 1; } .banner__inner { position: relative; display: flex; gap: 16px; background: var(--surface); color: var(--ink-900); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px rgba(var(--shadow-rgb), .8); overflow: clip; } .banner--brand .banner__inner { background: var(--brand-fill); color: #fff; border-color: var(--brand-fill); } .banner--dark .banner__inner { background: #171211; color: #fff; border-color: #2b2321; } .banner--brand .banner__text, .banner--dark .banner__text { color: rgba(255,255,255,.86); } .banner--brand .btn--primary { background: #fff; color: var(--brand-800); } .banner__media { flex: none; width: 34%; max-width: 190px; } .banner__media img { width: 100%; height: 100%; object-fit: cover; } .banner__body { padding: 20px 46px 20px 20px; flex: 1; } .banner__title { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.24; } .banner__text { margin: 0; font-size: .93rem; color: var(--ink-500); } .banner__text p:last-child { margin-bottom: 0; } .banner__actions { margin-top: 14px; } .banner__close { position: absolute; top: 10px; right: 10px; display: grid; place-content: center; width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(var(--shadow-rgb), .07); color: inherit; } .banner__close:hover { background: rgba(var(--shadow-rgb), .16); } .banner--brand .banner__close, .banner--dark .banner__close { background: rgba(255,255,255,.16); } /* Platzierungen */ .banner--modal { inset: auto 12px 12px; transform: translateY(20px); } .banner--modal.is-on { transform: none; } @media (min-width: 700px) { .banner--modal { inset: auto auto 24px 24px; width: 430px; } } .banner--top { inset: 0 0 auto; transform: translateY(-100%); padding-top: env(safe-area-inset-top); } .banner--top.is-on { transform: none; } .banner--top .banner__inner { border-radius: 0; border-inline: 0; border-top: 0; } .banner--bottom { inset: auto 0 0; transform: translateY(100%); } .banner--bottom.is-on { transform: none; } .banner--bottom .banner__inner { border-radius: 0; border-inline: 0; border-bottom: 0; } /* Kurznachricht */ .toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 16px); padding: 11px 20px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-fg); font-size: .9rem; font-weight: 500; opacity: 0; transition: opacity .25s, transform .25s var(--ease-out); box-shadow: 0 16px 40px -16px rgba(var(--shadow-rgb), .8); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* Cookie-Symbol am Bildrand ausblenden: die Einstellungen stehen als Texteintrag im Fussbereich (siehe inc/layout.php). */ #cookie_img, .cookie_img { display: none !important; } /* Wenn das Menü offen ist, soll die Seite dahinter nicht mitscrollen. */ body.nav-open { overflow: hidden; } /* =========================================================================== 9. Grosse Bildschirme Die Seite ist bis 2500 px optimiert: mehr Luft, grössere Schrift, breitere Raster – aber Textzeilen bleiben lesbar kurz. =========================================================================== */ @media (min-width: 1280px) { /* --header-h steht hier NICHT: zwischen 1100 und 1580 px hat die Leiste zwei Zeilen und ist hoeher. Der Wert fuer eine Zeile kommt deshalb erst ab 1580 px - siehe unten. */ :root { --gutter: 34px; } } /* Ab hier steht das Menue wieder in EINER Zeile und die Kopfleiste ist hoeher - da darf das Symbol mitwachsen. Zwischen 1100 und 1580 px waere das zu wuchtig: dort liegt das Menue in zwei Zeilen. */ @media (min-width: 1580px) { /* Ab hier passt wieder alles in eine Reihe. */ :root { --header-h: 76px; } /* Und die Kopfleiste ist höher – da darf das Symbol mitwachsen. Zwischen 1100 und 1580 px wäre das zu wuchtig: dort liegt das Menü in zwei Zeilen und jeder zusätzliche Pixel Höhe zählt doppelt. */ .nav__item--icon > .nav__link { width: 56px; } .nav__item--icon > .nav__link .nav__icon { width: 36px; height: 36px; } .topcta__list .iconlink { width: 48px; height: 48px; } .topcta__list .iconlink__icon { width: 32px; height: 32px; } } @media (min-width: 1700px) { :root { --wrap: 1280px; --wrap-wide: 1800px; --gutter: 44px; } .tiles { gap: 26px; } .footer-main__grid { padding-block: 66px; } } @media (min-width: 2100px) { :root { --wrap: 1400px; --wrap-wide: 2040px; --gutter: 56px; --radius: 22px; --radius-lg: 32px; } body { font-size: 1.06rem; } .tiles--c3 { grid-template-columns: repeat(3, 1fr); } .tiles--c4 { grid-template-columns: repeat(4, 1fr); } .gallery { grid-template-columns: repeat(5, 1fr); gap: 18px; } .hero__body { padding-bottom: 100px; } } @media (min-width: 2400px) { :root { --wrap: 1500px; --wrap-wide: 2260px; } body { font-size: 1.1rem; } .gallery { grid-template-columns: repeat(6, 1fr); } } /* Druck: alles Bewegliche weg. */ @media print { .site-header, .nav, .to-top, .banner, .share, .chat-slot, .footer-main, .hero__nav, .hero__dots { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } body { background: #fff; color: #000; } } /* Umrisse gefüllter Markenknöpfe im Dunkelmodus – siehe --brand-fill-edge. */ :root[data-theme="dark"] .btn--primary, :root[data-theme="dark"] .to-top, :root[data-theme="dark"] .topcta__list li:last-child a, :root[data-theme="dark"] .nav__cta li:last-child a { border: 1px solid var(--brand-fill-edge); } /* =========================================================================== 10. Weitere Bausteine Zimmer · Wetter · Anfahrt · Zeitleiste · Preise · Bewertungen · Vorher/Nachher · Logo-Laufband · Umgebung · Aktuelles =========================================================================== */ /* --- Zimmer & Angebote ----------------------------------------------------- */ .rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } @media (min-width: 760px) { .rooms--c2, .rooms--c3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .rooms--c3 { grid-template-columns: repeat(3, 1fr); } } .room { display: flex; flex-direction: column; overflow: clip; background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s; } .room:hover { border-color: var(--brand-700); transform: translateY(-3px); box-shadow: 0 22px 46px -28px rgba(var(--shadow-rgb), .5); } /* Eine Karte je Reihe: Bild seitlich – das wirkt bei Suiten grosszügiger. */ @media (min-width: 900px) { .rooms--c1 .room { flex-direction: row; } .rooms--c1 .room__media { width: 44%; flex: none; aspect-ratio: auto; } .rooms--c1 .room__body { flex: 1; } } .room__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; background: var(--surface-2); } .room__img { width: 100%; height: 100%; object-fit: cover; display: block; } .room__img--alt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); } .room:hover .room__img--alt { opacity: 1; } /* --------------------------------------------------------------------------- Eckband über dem Zimmerbild: „ab 2027" --------------------------------------------------------------------------- GEOMETRIE, damit sie beim nächsten Anfassen nicht geraten werden muss: Das Band ist ein Streifen, der um 45 Grad gedreht wird. Gedreht wird um seinen eigenen Mittelpunkt, der dabei liegen bleibt - der Mittelpunkt muss also dort sitzen, wo das Band die Ecke kreuzen soll. Schneidet es die obere Kante bei 0.85 der Kastenbreite und die rechte Kante im gleichen Abstand, liegt die Mitte dieser Strecke bei (1 - 0.425 | 0.425). Daraus kommen `left` und `top`; die Breite 1.5 ist absichtlich zu gross, der Überhang wird vom Kasten weggeschnitten. WER ES VERSCHIEBEN WILL, fasst --zb an und nicht die Faktoren: grösser heisst „weiter vom Eck weg, Richtung Bildmitte" und zugleich „längeres Band". Die Dicke sitzt in --zb-h, dazu passend die Schriftgrösse. Die Faktoren halten das Band auf der Diagonale - wer sie ändert, stellt es schief. pointer-events: none ist Pflicht und nicht Geschmack: auf der Detailseite liegt das Band über dem Knopf, der die Grossansicht öffnet, und in der Übersicht über der klickbaren Karte. Ohne das wäre genau die Ecke, auf der „ab 2027" steht, tot. */ .zbadge { --zb: 180px; /* Seite des quadratischen Ausschnitts */ --zb-h: 38px; /* Höhe des Streifens */ position: absolute; top: 0; right: 0; width: var(--zb); height: var(--zb); overflow: clip; pointer-events: none; /* Über das zweite Foto, das beim Überfahren darübergelegt wird. */ z-index: 2; } .zbadge__text { position: absolute; width: calc(var(--zb) * 1.5); height: var(--zb-h); left: calc(var(--zb) * -0.175); top: calc(var(--zb) * 0.425 - var(--zb-h) / 2); transform: rotate(45deg); background: var(--fill); color: var(--fill-fg); text-align: center; font-size: .98rem; font-weight: 600; line-height: var(--zb-h); letter-spacing: .06em; text-transform: uppercase; /* Ein langer Text soll das Band nicht sprengen, sondern abbrechen. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 10px rgb(0 0 0 / .28); } /* Auf der Karte etwas kleiner - die Karte selbst ist kleiner als das Titelfoto der Detailseite. Abgeschnitten wird die Ecke dort von der Karte (.room hat overflow: clip und einen Radius), hier braucht es nichts. */ .room__media .zbadge { --zb: 154px; --zb-h: 34px; } .room__media .zbadge__text { font-size: .88rem; } /* Eine Karte je Reihe, Bild seitlich: dort richtet sich die Höhe des Bildes nach dem Text daneben (aspect-ratio: auto). Bei einer Karte mit wenig Text ist das Bild flach - ein Band für 154px Kastenbreite liefe dann unten aus dem Bild heraus und würde abgeschnitten. Darum hier etwas knapper. */ @media (min-width: 900px) { .rooms--c1 .room__media .zbadge { --zb: 124px; --zb-h: 30px; } .rooms--c1 .room__media .zbadge__text { font-size: .82rem; } } /* Auf der Detailseite schneidet nichts von aussen - also die Ecke des Titelfotos selbst nachbilden. */ .roomdet__media .zbadge { border-top-right-radius: var(--radius-lg); } @media (max-width: 480px) { .zbadge { --zb: 126px; --zb-h: 29px; } .zbadge__text { font-size: .8rem; letter-spacing: .04em; } } .room__body { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; } .room__title { margin: 0; font-size: 1.24rem; line-height: 1.25; } .room__specs, .room__feat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .room__specs { gap: 6px 16px; } .room__specs li { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-700); } .room__specs svg { color: var(--brand-700); } .room__text { margin: 0; color: var(--ink-500); font-size: .95rem; } /* Ausstattung als Text - die Symbole sind bewusst weg. Sie mussten je Punkt einzeln ausgesucht werden, und fuer eine Zeile wie „Balkon nach Sueden" gibt es ohnehin keines, das das sagt. */ /* Ausstattung als Textmarken. ------------------------------------------------------------------------- Keine 999px: das ist die Rundung fuer Formen, die rund sein SOLLEN. Hier steht freier Text, und der bricht auf einer schmalen Karte um - „Balkon nach Sueden" wird dann zweizeilig, und aus der Pille wird ein Wulst. Mit --radius-xs sieht eine Zeile aus wie ein Etikett und drei auch noch. align-items: flex-start ist der zweite Teil davon. Ohne das zieht flex alle Marken einer Reihe auf die Hoehe der hoechsten - eine zweizeilige Nachbarin macht aus jedem einzeiligen Etikett einen halbleeren Kasten. */ .room__feat { gap: 6px; align-items: flex-start; } .room__feat li { padding: 5px 10px; border-radius: var(--radius-xs); background: var(--surface-2); font-size: .8rem; line-height: 1.35; color: var(--ink-700); /* Ein ueberlanges Wort sprengt sonst die Karte statt umzubrechen. */ overflow-wrap: break-word; max-width: 100%; } .room__foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ink-200); } .room__price { margin: 0; display: flex; flex-direction: column; line-height: 1.2; } .room__from { font-size: .78rem; color: var(--ink-500); } .room__price strong { font-size: 1.4rem; color: var(--brand-text); font-weight: 700; } .room__price small { font-size: .76rem; color: var(--ink-500); } .sec--brand .room, .sec--dark .room { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); } .sec--brand .room__text, .sec--dark .room__text, .sec--brand .room__specs li, .sec--dark .room__specs li { color: rgba(255,255,255,.82); } .sec--brand .room__price strong, .sec--dark .room__price strong { color: #fff; } /* Die ganze Karte ist der Verweis. ------------------------------------------------------------------------- Umgesetzt ueber ein ::after des Titel-Verweises, das sich ueber die ganze Karte legt. Der Grund: verschachtelte sind in HTML nicht erlaubt, und ein um die ganze Karte haette dem Screenreader den kompletten Karteninhalt als Linktext vorgelesen. So bleibt genau EIN Verweis je Karte, und sein Text ist der Name des Zimmers. */ .room--link { position: relative; } .room__link { text-decoration: none; color: inherit; } .room__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); } .room--link:hover .room__title { color: var(--brand-text); } /* Anfragen und Buchen sind ECHTE Verweise und muessen ueber der Klickflaeche liegen - sonst fuehrten beide auf die Detailseite. Der z-index ist der Grund, warum die Karte trotzdem als Ganzes klickbar bleibt: darunter faengt das ::after alles ab, was kein Knopf ist. */ .room__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; } /* Die Tastatur muss sehen, wo sie steht. Ohne das waere die Karte zwar erreichbar, aber der Rahmen laege unsichtbar hinter ihr. */ .room__link:focus-visible::after { outline: 2px solid var(--brand-600); outline-offset: 3px; } /* --- Zimmer: die Detailansicht -------------------------------------------- Bild gross, Text daneben. Unter 900px untereinander - ein Zimmerbild quer auf halber Breite ist auf dem Handy zu klein, um etwas zu zeigen. */ .roomdet { display: grid; gap: 26px; } @media (min-width: 900px) { .roomdet { grid-template-columns: 55% 1fr; gap: 34px; align-items: start; } } /* Jedes Bild ist ein Knopf: anklicken oeffnet die Grossansicht mit Pfeilen, Tastatur und Wischen. Das ist dieselbe Galerie wie im Bilder-Baustein - deshalb steht hier nur das Aussehen, keine zweite Technik. */ .roomdet__media { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); /* Bezug für das Eckband: dessen obere rechte Ecke ist die des ersten Fotos, denn das nimmt oben die ganze Breite ein. */ position: relative; } @media (min-width: 600px) { .roomdet__media { grid-template-columns: repeat(4, 1fr); } } .roomdet__shot { margin: 0; padding: 0; border: 0; cursor: zoom-in; position: relative; border-radius: var(--radius-sm); overflow: clip; background: var(--surface-2); /* Das erste Bild nimmt die ganze Breite ein, die uebrigen den Streifen darunter. So bleibt es EIN Raster statt zweier Behaelter. */ grid-column: span 1; } .roomdet__shot--hero { grid-column: 1 / -1; border-radius: var(--radius-lg); } .roomdet__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease-out); } .roomdet__shot:not(.roomdet__shot--hero) img { aspect-ratio: 4 / 3; } .roomdet__shot:hover img { transform: scale(1.05); } .roomdet__shot:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .roomdet__shot:hover img { transform: none; } } .roomdet__body { display: flex; flex-direction: column; gap: 14px; } .roomdet__title { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; } .roomdet__lead { margin: 0; font-size: 1.06rem; color: var(--ink-700); } .roomdet__specs { gap: 8px 20px; } .roomdet__text { color: var(--ink-700); } .roomdet__feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (min-width: 520px) { .roomdet__feat { grid-template-columns: repeat(2, 1fr); } } .roomdet__feat li { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; color: var(--ink-700); } .roomdet__feat svg { color: var(--brand-700); flex: none; margin-top: 3px; } .roomdet__foot { margin-top: 6px; } /* Der Knopf zum 360°-Rundgang traegt ein eigenes Symbol. Es kommt aus assets/icons/ und nimmt dort, wo es einfarbig gezeichnet ist, die Textfarbe an - auf einem gefuellten Knopf also die helle Schrift. */ .room__tour { display: inline-flex; align-items: center; gap: 8px; } .room__tour svg { flex: none; } /* Auf der Karte nur das Symbol: dort stehen schon Buchen und Anfragen, ein dritter Knopf mit Text spraenge in die zweite Zeile. Quadratisch und mindestens 44px - das ist die kleinste Flaeche, die ein Finger sicher trifft (WCAG 2.5.5). */ .room__tour--icon { width: 44px; min-width: 44px; padding: 0; justify-content: center; gap: 0; } .room__tour--icon.btn--sm { width: 44px; min-width: 44px; padding: 0; } .sec--brand .roomdet__lead, .sec--dark .roomdet__lead, .sec--brand .roomdet__text, .sec--dark .roomdet__text, .sec--brand .roomdet__feat li, .sec--dark .roomdet__feat li { color: rgba(255,255,255,.85); } /* --- Angebote: Zeitraeume -------------------------------------------------- Auf der Karte steht EIN Termin, auf der Detailseite alle kommenden. Beide sehen gleich aus - der Gast soll nicht erst lernen, dass es zweierlei ist. */ .offer__date, .offer__dates li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--brand-text); } .offer__date { margin: 0; } .offer__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .offer__date svg, .offer__dates svg { flex: none; color: var(--brand-700); } .sec--brand .offer__date, .sec--dark .offer__date, .sec--brand .offer__dates li, .sec--dark .offer__dates li { color: #fff; } .sec--brand .offer__date svg, .sec--dark .offer__date svg, .sec--brand .offer__dates svg, .sec--dark .offer__dates svg { color: rgba(255,255,255,.8); } /* --- Newsletter: Fenster und Rueckmeldung ---------------------------------- Das Fenster ist ein ; ::backdrop ist der dunkle Rand, den der Browser selbst zeichnet. -------------------------------------------------------------------------- */ .nldlg { border: 0; padding: 0; background: none; max-width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); color: var(--ink-900); /* NICHT der Rollbereich - das ist der Punkt. ----------------------------------------------------------------------- Das vorgeschlagene Standard-Stylesheet des HTML-Standards gibt einem modalen Fenster `dialog:modal { overflow: auto }`. Es ist damit von sich aus ein Rollbereich. Beim Hereinkommen ragt der Kasten darin ueber seinen Rahmen hinaus - bei „Aus der Unschaerfe" durch scale(1.2), bei allen Effekten, die von draussen kommen, durch die Verschiebung. Das ist rollbarer Ueberhang, und der Browser zeigt dafuer Rollbalken rechts und unten. Nach dem Effekt verschwinden sie wieder: ein Flackern von einer Sekunde, das aussieht wie ein Fehler. `overflow: hidden` waere die falsche Antwort - dann waere ein langes Anmeldeformular auf einem niedrigen Fenster nicht mehr erreichbar. Darum rollt jetzt der Kasten selbst (siehe .nldlg__panel), und das Fenster laesst den Effekt ueber seinen Rand hinaus. Weil es fest im Bild steht (position: fixed), entstehen daraus keine Rollbalken fuer die Seite. */ overflow: visible; } .nldlg::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } .nldlg__panel { position: relative; display: grid; gap: 12px; padding: 28px 26px 24px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 40px 90px -40px rgba(var(--shadow-rgb), .8); /* Hier rollt es, nicht am Fenster darum. Ein langes Formular bleibt damit auf einem niedrigen Bildschirm erreichbar - und der Einblend-Effekt erzeugt keine Rollbalken, weil die eigene Bewegung eines Rollbereichs seinen eigenen Ueberhang nicht vergroessert. */ max-height: calc(100dvh - 40px); overflow-y: auto; /* Ausdruecklich dazu: steht nur overflow-y auf auto, rechnet der Browser overflow-x ebenfalls auf auto - und dann koennte hier ein waagrechter Balken auftauchen, wo vorher keiner moeglich war. Quer gibt es nichts zu rollen; das Formular ist so breit wie der Kasten. */ overflow-x: hidden; } /* Der offene Zweig ohne JavaScript steht in der Seite und braucht keine eigene Hoehenbegrenzung - dort rollt die Seite. */ .nldlg__panel--offen { max-height: none; overflow-y: visible; } /* Der Zweig ohne JavaScript steht offen auf der Seite - dort braucht es weder Schatten noch Schliessknopf. */ .nldlg__panel--offen { box-shadow: none; border: 1px solid var(--ink-200); margin-top: 18px; } .nldlg__panel--offen .nldlg__nur-js { display: none; } .nldlg__x { position: absolute; top: 10px; right: 10px; display: grid; place-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--ink-500); } .nldlg__x:hover { background: var(--ink-100); color: var(--ink-900); } .nldlg__title { margin: 0; font-size: 1.3rem; padding-right: 36px; } .nldlg__lead { margin: 0; color: var(--ink-500); font-size: .94rem; } .nldlg__feld { display: grid; gap: 4px; font-size: .88rem; } .nldlg__feld > span { font-weight: 600; } .nldlg__feld em { font-style: normal; font-weight: 400; color: var(--ink-500); } .nldlg__zwei { display: grid; gap: 12px; } @media (min-width: 460px) { .nldlg__zwei { grid-template-columns: 1fr 1fr; } } .nldlg__ok { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-700); line-height: 1.45; } /* Mindestens 24px: kleiner trifft ein Finger das Kaestchen nicht sicher. */ .nldlg__ok input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--brand-fill); } .nldlg__err { margin: 0; color: var(--bad, #b3261e); font-size: .84rem; } .nldlg__fein { margin: 0; font-size: .8rem; } .nldlg__fein a { color: var(--ink-500); } .nldlg__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } /* Der Koeder gegen Maschinen: fuer Menschen unerreichbar, aber nicht display:none - manche Ausfueller ueberspringen genau das. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Die Rueckmeldung nach dem Absenden, an der Stelle des Knopfes. */ .news__done { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 260px; font-size: .94rem; color: var(--ink-700); } .news__done svg { flex: none; color: var(--ok, #2f7d4f); } .sec--brand .news__done { color: rgba(255,255,255,.9); } .sec--brand .news__done svg { color: #fff; } /* Und die Auskunft nach dem Klick im Postfach - ganz oben auf der Seite. */ .nlnote-wrap { padding-top: 22px; } /* Auf einer Seite ohne sichtbaren Titel ist die Auskunft das Erste im Inhalt - und die Kopfleiste schwebt darueber. Ohne diesen Abstand laege sie halb darunter, ausgerechnet die eine Zeile, wegen der jemand kommt. */ main > .nlnote-wrap:first-child { padding-top: calc(var(--header-h) + 30px); } .nlnote { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .96rem; } .nlnote svg { flex: none; } .nlnote--ok { background: #eef7f1; color: #245c3a; } .nlnote--bad { background: var(--ink-100); color: var(--ink-900); } /* --- Bildnachweise --------------------------------------------------------- Steht im Impressum und soll dort ordentlich aussehen, nicht auffallen. Zwei Spalten ab Tablet: eine Liste aus zwanzig einzeiligen Eintraegen untereinander macht die Seite unnoetig lang. -------------------------------------------------------------------------- */ .credits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px 28px; font-size: .94rem; color: var(--ink-700); } @media (min-width: 700px) { .credits { grid-template-columns: repeat(2, 1fr); } } .credits li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-block: 4px; border-bottom: 1px solid var(--ink-200); } .credits__wer { font-weight: 600; color: var(--ink-900); } .credits__n { font-size: .84rem; color: var(--ink-500); } /* Je Bild eine Zeile: dort steht der Dateiname vorn und traegt die Zeile. */ .credits--liste .credits__datei { flex: 1 1 12ch; color: var(--ink-500); font-size: .86rem; } .credits--liste .credits__wer { font-weight: 500; } .sec--brand .credits, .sec--dark .credits { color: rgba(255,255,255,.82); } .sec--brand .credits li, .sec--dark .credits li { border-bottom-color: rgba(255,255,255,.18); } .sec--brand .credits__wer, .sec--dark .credits__wer { color: #fff; } /* --- Wetter & Webcam ------------------------------------------------------- */ .wx { display: grid; gap: 20px; } .wx__main { display: grid; gap: 14px; } .wx__now { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--ink-200); } /* Die Symbole kommen vom Landeswetterdienst und liegen gespiegelt auf dem eigenen Server. Fester Platz, damit beim Laden nichts springt. */ .wx__sym { width: 64px; height: 64px; flex: none; object-fit: contain; } .wx__sym--sm { width: 40px; height: 40px; } .wx__temp { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 300; line-height: 1; } .wx__temp small { font-size: .42em; vertical-align: super; color: var(--ink-500); } .wx__meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .wx__meta strong { font-size: 1.05rem; } .wx__meta span { font-size: .88rem; color: var(--ink-500); } .wx__text { margin: 0; color: var(--ink-700); } .wx__tomorrow { padding: 16px 20px; border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 8px; } .wx__tomorrow-head { margin: 0; display: flex; align-items: center; gap: 12px; } .wx__tomorrow-head > span { display: flex; flex-direction: column; line-height: 1.3; } .wx__tomorrow-head > span span { font-size: .88rem; color: var(--ink-500); } .wx__tomorrow-temp { margin-left: auto; font-size: 1.5rem; font-weight: 300; white-space: nowrap; } .wx__tomorrow-temp small { font-size: .6em; color: var(--ink-500); margin-left: 5px; } .wx__tomorrow .wx__text { font-size: .93rem; } .wx__days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .wx__days li { flex: 1 1 78px; display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .85rem; } .wx__day { font-weight: 700; } .wx__dayic { width: 38px; height: 38px; object-fit: contain; } .wx__hi { font-weight: 700; } .wx__lo { color: var(--ink-500); font-size: .8rem; } .wx__evo { padding: 16px 20px; border-radius: var(--radius); background: var(--surface-2); } .wx__evo-title { margin: 0 0 6px; font-size: 1rem; } .wx__evo p { margin: 0; font-size: .93rem; color: var(--ink-700); } /* Die Karte des Landeswetterdienstes ist nur 350 x 220 Pixel gross. Über etwa 700 Pixel Breite wird sie sichtbar unscharf – dort ist deshalb Schluss, und die Karte sitzt mittig in der Zeile statt links zu kleben. */ .wx__map { margin: 0; } .wx__map img { width: 100%; max-width: 700px; margin-inline: auto; border-radius: var(--radius); display: block; background: var(--surface-2); } .wx__src { margin: 2px 0 0; font-size: .74rem; color: var(--ink-500); } .wx__src a { color: inherit; } /* --- Webcam (eigener Baustein) --------------------------------------------- */ .webcam { margin: 0; } .webcam__frame { position: relative; overflow: clip; background: var(--surface-2); } .webcam__frame--rund { border-radius: var(--radius); } .webcam__frame--16-9 { aspect-ratio: 16 / 9; } .webcam__frame--21-9 { aspect-ratio: 21 / 9; } .webcam__frame--4-3 { aspect-ratio: 4 / 3; } .webcam__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Bei "nach dem Bild richten" bestimmt das Bild die Hoehe selbst. */ .webcam__frame--auto img { height: auto; object-fit: contain; } .webcam__zoom { position: absolute; right: 12px; top: 12px; display: grid; place-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; transition: background .2s; } .webcam__frame a:hover .webcam__zoom { background: rgba(0,0,0,.75); } .webcam__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: .84rem; color: var(--ink-500); } /* Der Punkt macht sichtbar, dass sich das Bild von selbst erneuert - ohne ihn haelt man ein ruhiges Bild fuer eine haengende Kamera. */ .webcam__live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); } .webcam__live::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #2f7d4f; animation: camlive 2.4s ease-in-out infinite; } @keyframes camlive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .webcam__live::before { animation: none; } } .sec--brand .webcam__caption, .sec--dark .webcam__caption { color: rgba(255,255,255,.78); } .sec--brand .webcam__live, .sec--dark .webcam__live { color: #fff; } /* Auf farbigem Grund. Die Symbole der Provinz sind für hellen Grund gezeichnet – auf Weinrot und Dunkel bekommen sie deshalb eine helle Scheibe darunter. */ .sec--brand .wx__now, .sec--dark .wx__now { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); } .sec--brand .wx__days li, .sec--dark .wx__days li, .sec--brand .wx__tomorrow, .sec--dark .wx__tomorrow, .sec--brand .wx__evo, .sec--dark .wx__evo { background: rgba(255,255,255,.1); } .sec--brand .wx__sym, .sec--dark .wx__sym, .sec--brand .wx__dayic, .sec--dark .wx__dayic { background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px; } .sec--brand .wx__meta span, .sec--dark .wx__meta span, .sec--brand .wx__lo, .sec--dark .wx__lo, .sec--brand .wx__src, .sec--dark .wx__src, .sec--brand .wx__text, .sec--dark .wx__text, .sec--brand .wx__evo p, .sec--dark .wx__evo p, .sec--brand .wx__temp small, .sec--dark .wx__temp small, .sec--brand .wx__tomorrow-temp small, .sec--dark .wx__tomorrow-temp small, .sec--brand .wx__tomorrow-head > span span, .sec--dark .wx__tomorrow-head > span span { color: rgba(255,255,255,.78); } /* --- Anfahrt --------------------------------------------------------------- */ .dir { display: grid; gap: 24px; } @media (min-width: 900px) { .dir:has(.dir__map) { grid-template-columns: 1fr 1fr; align-items: start; } } .dir__map { position: relative; margin: 0; border-radius: var(--radius); overflow: clip; cursor: pointer; } .dir__mapimg { width: 100%; display: block; } .dir__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Die sofort eingebettete Karte bringt keine eigene Hoehe mit: ein