/* ========================================================= SARAH CARINA — Globale Navigation Markenarchitektur: Entdecken · Buch · Studio · EchtSein · Über Sarah · Start hier · Mein Bereich Baut auf den Design-Tokens aus style.css auf. ========================================================= */ :root { --nav-h: 92px; /* Header-Höhe initial */ --nav-h-scrolled: 72px; /* Header-Höhe nach Scroll */ --nav-motion: 220ms; /* Premium-Timing: ruhig, aber direkt */ --nav-max: 1360px; /* max. Inhaltsbreite Mega-Menü */ --z-mega: 90; --z-mobile: 120; /* Header liegt über dem Fullscreen-Menü, damit Logo und Schließen-Button jederzeit erreichbar bleiben. */ --z-header: 130; /* HOEHE DER SCHWEBENDEN KOPFZEILE, GLOBAL LESBAR Seit die Kopfzeile `fixed` ist, laeuft das Heldenbild bis an die Oberkante — die Ueberschrift darin muss aber unterhalb der Kopfzeile beginnen. Die Hero-Sektionen rechnen diesen Wert auf ihren oberen Abstand drauf. WARUM NICHT --nav-h: das steht auf `.site-header` selbst und ist von einer Sektion aus nicht erreichbar (dort gilt der :root-Wert 92px, waehrend die Startseiten-Kopfzeile 124px hoch ist). Die Werte hier muessen deshalb denen der Kopfzeile folgen. */ --nav-topbar-h: 30px; /* schmaler Streifen, traegt nur noch den Hell/Dunkel-Schalter */ --nav-inset: 7.5%; /* seitliche Einrueckung des Panels */ --nav-offset: 130px; /* Streifen + Panel, siehe unten */ } /* Die Startseite traegt die gestapelte Wortmarke und damit eine hoehere Kopfzeile — dieselben Werte wie .site-header--brand. */ body.startseite { --nav-offset: 122px; } /* --------------------------------------------------------- HEADER — sticky, ruhig, ohne Layout-Shift (CLS) Die Höhe ist fest, damit beim Scroll-Wechsel nichts springt. --------------------------------------------------------- */ /* Die Kopfzeile LIEGT ueber dem Inhalt, sie steht nicht davor. Mit `sticky` beanspruchte sie eine eigene Zeile im Fluss — das Heldenbild begann erst darunter. `fixed` nimmt sie aus dem Fluss: das Bild laeuft bis an die Oberkante, die Kopfzeile schwebt durchsichtig darueber und faerbt sich erst beim Scrollen ein (siehe .is-scrolled). Nebeneffekt, der uns entgegenkommt: die Hoehenaenderung beim Scrollen verschiebt jetzt keinen Inhalt mehr. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); /* Zwei Baender uebereinander statt einer Zeile: oben der schmale dunkle Streifen, darunter das eingerueckte Panel. Deshalb Block statt Flex und keine feste Hoehe mehr. */ display: block; height: auto; padding: 0; background: transparent; /* KEIN Weichzeichner auf dem Kopf selbst — style.css traegt aus der alten Kopfzeile noch eine Regel fuer das ELEMENT `header`, die sonst durchschlaegt und das Heldenbild verwischt. */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* --------------------------------------------------------- SCHMALER DUNKLER STREIFEN — Vorbild christinaslonova.com Traegt die Nebenwege (Mein Bereich, Hell/Dunkel), damit das Panel darunter nur Wortmarke und Menue zeigt. --------------------------------------------------------- */ .nav-topbar { height: var(--nav-topbar-h); background: var(--ink-fixed); display: flex; align-items: center; padding: 0 clamp(20px, 4vw, 48px); } .nav-topbar-inner { width: 100%; max-width: var(--nav-max); margin: 0 auto; display: flex; align-items: center; gap: 20px; } .nav-topbar .nav-account, .nav-topbar .theme-toggle { color: #f0ece4; } .nav-topbar .nav-account { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .92; } .nav-topbar .nav-account:hover { opacity: 1; } .nav-topbar .theme-toggle { margin-left: auto; } /* --------------------------------------------------------- EINGERUECKTES PANEL — schwebt ueber dem Heldenbild Wie in der Vorlage seitlich eingerueckt (dort 7,5 % je Seite) und nur zart eingefaerbt, sodass das Bild durchscheint. Beim Scrollen wird es dichter, siehe .is-scrolled. --------------------------------------------------------- */ .nav-shell { /* Beide Einrueckungen einzeln abziehen. `calc(100% - 2 * var(...))` wurde vom Browser verworfen, das Panel lief dann ueber die volle Breite. Ohne Multiplikation rechnet er zuverlaessig. */ width: calc(100% - var(--nav-inset) - var(--nav-inset)); max-width: var(--nav-max); margin: 0 auto; height: var(--nav-h); padding: 0 clamp(18px, 2.4vw, 38px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(229, 226, 219, 0.34); /* Der Weichzeichner steht jetzt schon hier, nicht erst unter .is-scrolled: die Leiste soll oben genauso aussehen wie beim Scrollen. Ohne ihn laeuft das Heldenbild ungefiltert durch und die Leiste wirkt oben deutlich durchsichtiger als unterwegs. */ -webkit-backdrop-filter: saturate(1.2) blur(18px); backdrop-filter: saturate(1.2) blur(18px); transition: height var(--nav-motion) var(--ease), background-color var(--nav-motion) var(--ease); } html[data-theme="dark"] .nav-shell { background: rgba(22, 21, 20, 0.34); } body.hat-kein-hero main { padding-top: var(--nav-offset); } /* Impressum und Datenschutz tragen nur die Wortmarke und KEINEN dunklen Streifen — dort ist der Kopf entsprechend flacher. Faellt der Browser auf die Regel darueber zurueck, entsteht nur etwas mehr Luft. */ body.hat-kein-hero:not(:has(.nav-topbar)) main { padding-top: var(--nav-h); } .site-header.is-scrolled .nav-shell { height: var(--nav-h-scrolled); /* Beim Scrollen bleibt die Anmutung von oben: dieselbe zarte Einfaerbung wie im Ruhezustand, nicht die dichte Flaeche. Der Weichzeichner bleibt aber an — ohne ihn laeuft auf Seiten ohne Heldenbild der Fliesstext lesbar durch die Leiste und die Menuepunkte werden unleserlich. Er macht das Band ruhig, ohne es zuzudecken. */ background: rgba(229, 226, 219, 0.34); -webkit-backdrop-filter: saturate(1.2) blur(18px); backdrop-filter: saturate(1.2) blur(18px); } html[data-theme="dark"] .site-header.is-scrolled .nav-shell { background: rgba(22, 21, 20, 0.34); } /* Menü offen: Header trägt Flächenfarbe, damit das Mega-Menü anschließt */ .site-header.has-open-menu .nav-shell { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--hairline); } /* Die Reihenfolge steht im HTML: Wortmarke links, Menue rechts — wie in der Vorlage. Die Nebenwege (Mein Bereich, Hell/Dunkel) sitzen im dunklen Streifen darueber. Frueher stand hier eine zweite .nav-shell-Regel aus der gespiegelten Fassung; sie kam spaeter im Stylesheet und setzte die Breite wieder auf 100 %, wodurch die Einrueckung des Panels wirkungslos blieb. Deshalb entfernt — es gibt nur noch die eine Regel weiter oben. */ /* --------------------------------------------------------- LOGO / WORTMARKE — übernimmt die Home-Funktion --------------------------------------------------------- */ .nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .nav-logo-mark { width: auto; height: 42px; display: block; } /* Gestapelte Wortmarke (nur Startseite): Zeichen mittig ueber dem Namen, der Claim mittig darunter. Der Block ist hoeher als die einzeilige Fassung, deshalb bekommt die Startseite eine hoehere Kopfzeile — sonst klebt das Zeichen an der Oberkante. */ /* 118 statt 124: die Unterkante der Kopfzeile lag auf dem Auge im Heldenbild. Zusammen mit dem von 38 auf 30 verschmaelerten Streifen sitzt sie jetzt 14 px hoeher, also zwischen Wimper und Braue. */ /* Durchgehend die kompakte Fassung: das ist der Zustand, den die Leiste frueher erst beim Scrollen angenommen hat. Sie gilt jetzt auch oben, damit nichts springt. */ .site-header--brand { --nav-h: 84px; --nav-h-scrolled: 84px; } /* Oben KEINE Flaeche: die Kopfzeile ist durchsichtig, damit das Heldenbild bis an die Oberkante durchlaeuft. Der fruehere feste Ton #b4aea5 stand als Balken ueber dem Bild und schnitt es ab. Beim Scrollen kommt die Farbe zurueck — derselbe Ton wie bisher. */ .site-header--brand.is-scrolled { /* Auch gescrollt keine Flaeche: die Kopfzeile soll durchgehend so wirken wie im Ruhezustand. Damit stellt sich die Frage nach zwei verschiedenen Taupe gar nicht mehr — neben dem Panel liegt jetzt durchgehend das Bild beziehungsweise der Seitengrund. */ background: transparent; border-bottom-color: transparent; } /* Auf dem dunkleren Grund faellt die Unterzeile (8,5 px) von 5,74:1 auf 3,47:1 und damit unter WCAG AA. Deshalb hier ein tieferer Ton: 4,60:1. */ .site-header--brand .nav-logo-claim { color: #464137; } html[data-theme="dark"] .site-header--brand { background: transparent; } html[data-theme="dark"] .site-header--brand.is-scrolled { background: transparent; } html[data-theme="dark"] .site-header--brand .nav-logo-claim { color: var(--text-muted); } /* Der schmale Streifen ganz oben ist auf der Startseite NICHT schwarz, sondern traegt dasselbe Greige, das beim Scrollen links und rechts des Panels erscheint. So steht oben kein harter Balken mehr ueber dem Heldenbild, Streifen und gescrollte Kopfzeile sind ein Ton. Die Schrift darin muss dafuer kippen: das helle #f0ece4 kommt auf diesem Grund nur auf 1,6:1, das dunkle Ink auf 7,6:1. Im Dunkelmodus bleibt der Streifen schwarz, dort passt er zum Rest. */ .site-header--brand .nav-topbar { background: #b4aea5; } .site-header--brand .nav-topbar .nav-account, .site-header--brand .nav-topbar .theme-toggle { color: #211f1c; } html[data-theme="dark"] .site-header--brand .nav-topbar { background: var(--ink-fixed); } html[data-theme="dark"] .site-header--brand .nav-topbar .nav-account, html[data-theme="dark"] .site-header--brand .nav-topbar .theme-toggle { color: #f0ece4; } /* Abstand und Zeichengroesse wie in der kompakten Fassung. */ .nav-logo--stacked { flex-direction: column; align-items: center; gap: 4px; text-align: center; } .nav-logo--stacked .nav-logo-mark { height: 34px; } .nav-logo--stacked .nav-logo-text { text-align: center; } .nav-logo-text { display: block; line-height: 1.15; } .nav-logo-name { display: block; font-family: "Jost", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 2.6px; color: var(--ink); white-space: nowrap; } .nav-logo-claim { display: block; font-size: 8.5px; letter-spacing: 2.6px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; } /* --------------------------------------------------------- PRIMÄRNAVIGATION (Desktop) --------------------------------------------------------- */ .nav-primary { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin: 0; padding: 0; list-style: none; } .nav-item { position: relative; } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; position: relative; font-family: "Jost", sans-serif; font-size: 12.5px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: 10px 0; cursor: pointer; white-space: nowrap; transition: color var(--nav-motion) var(--ease); } /* MEIN BEREICH als gefuellter Knopf: er ist kein Menuepunkt unter gleichen, sondern der Weg in den geschuetzten Bereich. Die Flaeche macht das auf den ersten Blick klar. Kontrast #f0ece4 auf #141312 liegt bei 15,3:1. Im Dunkelmodus dreht der Knopf um, sonst stuende Schwarz auf fast Schwarz. */ .nav-link--account { padding: 9px 18px; border-radius: 999px; background: var(--ink-fixed); color: #f0ece4; letter-spacing: 1.5px; transition: background-color var(--nav-motion) var(--ease), color var(--nav-motion) var(--ease); } /* Die Unterstreichung der uebrigen Punkte wuerde im Knopf liegen. */ .nav-link--account::after { content: none; } .nav-link--account:hover { background: #2f2b26; color: #fff; } html[data-theme="dark"] .nav-link--account { background: #f0ece4; color: #141312; } html[data-theme="dark"] .nav-link--account:hover { background: #fff; } /* Dezente Unterstreichung als einzige Hover-Geste */ .nav-link::after, .nav-trigger::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: var(--accent-dark); transform: scaleX(0); transform-origin: right; transition: transform var(--nav-motion) var(--ease); } .nav-link:hover::after, .nav-trigger:hover::after, .nav-item.is-open .nav-trigger::after { transform: scaleX(1); transform-origin: left; } .nav-trigger svg { width: 9px; height: 9px; transition: transform var(--nav-motion) var(--ease); } .nav-item.is-open .nav-trigger svg { transform: rotate(180deg); } /* --------------------------------------------------------- AKTIONEN RECHTS — Start hier · Mein Bereich · Theme --------------------------------------------------------- */ .nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-start { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: var(--pill); background: var(--ink-fixed); color: var(--bg-fixed); font-family: "Jost", sans-serif; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; transition: transform var(--nav-motion) var(--ease), box-shadow var(--nav-motion) var(--ease); } .nav-start:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .nav-account { display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px; font-family: "Jost", sans-serif; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: opacity var(--nav-motion) var(--ease); opacity: 0.85; } .nav-account:hover { opacity: 1; } .nav-account svg { width: 17px; height: 17px; flex-shrink: 0; } /* --------------------------------------------------------- MEGA-MENÜ — großzügig, editorial, ruhig --------------------------------------------------------- */ .mega { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-mega); background: var(--bg); border-bottom: 1px solid var(--hairline); box-shadow: 0 24px 48px -32px rgba(26, 24, 21, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--nav-motion) var(--ease), transform var(--nav-motion) var(--ease), visibility var(--nav-motion); } .site-header .mega { position: fixed; top: calc(var(--nav-topbar-h) + var(--nav-h)); } .site-header.is-scrolled .mega { top: calc(var(--nav-topbar-h) + var(--nav-h-scrolled)); } .nav-item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mega-inner { max-width: var(--nav-max); margin: 0 auto; padding: clamp(34px, 4vw, 54px) clamp(20px, 4vw, 48px) clamp(38px, 4vw, 56px); } .mega-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 26px; } .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); /* Spalten in natürlicher Höhe: hält das Menü ruhig und kompakt */ align-items: start; margin: 0; padding: 0; list-style: none; } .mega-grid--3 { grid-template-columns: repeat(3, 1fr); } .mega-grid--2 { grid-template-columns: repeat(2, 1fr); } .mega-col { display: flex; flex-direction: column; } .mega-title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; color: var(--ink); margin: 0 0 10px; } .mega-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; max-width: 30ch; } /* Sekundäre Links innerhalb einer Spalte */ .mega-links { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .mega-links a { font-size: 13.5px; color: var(--ink); opacity: 0.78; transition: opacity var(--nav-motion) var(--ease), transform var(--nav-motion) var(--ease); display: inline-block; } .mega-links a:hover { opacity: 1; transform: translateX(3px); } /* Zweite Reihe im Entdecken-Menue: die drei Identitaets-Themen stehen als eigene Spalten unter den Hauptspalten — gleiche Schriftgroesse, Untertitel darunter. Als Linkliste in der ersten Spalte wirkte der Block unruhig und liess das Menue nach links kippen. */ .mega-rule { grid-column: 1 / -1; height: 1px; background: var(--hairline); margin: 6px 0 0; } .mega-sub { display: block; /* style.css setzt fuer JEDEN Link in