/* ================= Overlay-Kopfleiste ================= * * Nur auf der Startseite: der Hero laeuft bis an die Viewport-Oberkante, * Topbar und Navigation liegen transparent darauf. Beim Scrollen faehrt die * Leiste weich in den soliden Zustand. * * Geschaltet wird ueber html[data-hdr="overlay"], gesetzt in * layout/header.tpl. Alle Regeln hier haengen an diesem Attribut - der * bestehende Header-Code in layout.css bleibt unberuehrt, und der Modus ist * durch das eine Attribut abschaltbar. Auf allen anderen Seiten steht dort * "solid" und keine einzige Regel dieser Datei greift. * * Der Dunkelmodus kombiniert beide Attribute am ; data-theme setzt der * Inline-Bootstrap im , bevor das erste Pixel gemalt wird. * * Vorlage: project/CLAUDE-CODE-PROMPT-Overlay-Header.md. Die Werte stammen * von dort und nicht aus design/handoff - die Referenzdatei "Startseite * V3.dc.html" ist der Stand vor dem Overlay und kennt data-hdr nicht. * * Der zweite Zustand heisst data-hsolid und sitzt ebenfalls am , * gesetzt von js/tw-header.js. */ /* ---- Leiste: Verlauf, Topbar, Header ---- */ /* Kein Verlauf ueber dem Hero. * * Die Vorlage sieht ein 250 px hohes Verlaufs-Pseudoelement auf .topstick vor. * Umgesetzt und wieder entfernt: bei 97 % Deckung am oberen Rand legt es einen * milchigen Film ueber die oberen 250 px des Heros. Bluetenzweig, Blaetter und * Baeume verblassen darunter, und genau das liest sich als eigener Hintergrund * der Navigationsleiste - das Gegenteil des Ziels. Ohne den Verlauf laeuft das * Hero-Bild ungedaempft bis unter die Zeile durch. * * Fuer die Lesbarkeit taugte er ohnehin nicht: mit Verlauf gemessen kam das * Warenkorb-Icon ueber dem dunklen Zweig auf 1,42:1. Das traegt jetzt der * Icon-Grund weiter unten. */ /* Topbar als helles Milchglasband, Header vollstaendig transparent. */ html[data-hdr="overlay"] .usp { background: rgba(255,255,255,.26); backdrop-filter: blur(6px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); transition: background .35s ease, box-shadow .35s ease; } html[data-hdr="overlay"][data-theme="dark"] .usp { background: rgba(255,255,255,.07); box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); } html[data-hdr="overlay"] .hdr { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .35s ease, border-color .35s ease; } /* ---- Scroll-Zustand: zurueck auf die soliden Token-Werte ---- */ html[data-hdr="overlay"][data-hsolid] .usp { background: var(--sky-300); backdrop-filter: none; box-shadow: none; } html[data-hdr="overlay"][data-hsolid][data-theme="dark"] .usp { background: #111c35 } html[data-hdr="overlay"][data-hsolid] .hdr { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom-color: var(--hair); } html[data-hdr="overlay"][data-hsolid][data-theme="dark"] .hdr { background: rgba(11,19,38,.94) } /* ---- Kontrast im Overlay ---- * Der helle Himmel traegt Navy; im Dunkeln liegt die Leiste auf Nachtblau * und braucht die aufgehellten Toene. Ab data-hsolid gelten wieder die * normalen Token-Werte aus layout.css, deshalb hier durchgehend :not(). */ html[data-hdr="overlay"]:not([data-hsolid]) .mnav > a, html[data-hdr="overlay"]:not([data-hsolid]) .hnav > a { color: var(--navy-900) } html[data-hdr="overlay"]:not([data-hsolid]) .usp { color: var(--navy-800) } html[data-hdr="overlay"]:not([data-hsolid]) .usp svg { color: var(--navy-800) } html[data-hdr="overlay"]:not([data-hsolid]) .icbtn { color: var(--navy-800) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .mnav > a, html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .hnav > a { color: var(--navy-100) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .usp { color: #d7e6fa } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .usp svg { color: var(--sky-300) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .icbtn { color: var(--navy-100) } /* Icons brauchen einen eigenen kleinen Grund, keinen Balken. * * Oben rechts reicht der Bluetenzweig in die Zeile hinein - dunkles Navy auf * dunklem Zweig. Gemessen ohne diesen Grund: Warenkorb 1,42:1, Konto 1,14:1. * WCAG 1.4.11 verlangt fuer Bedienelemente 3:1. Der Wert ist derselbe, den * die Vorlage fuer den Hover vorsieht; als Ruhezustand traegt er die * Lesbarkeit ueber jedem Bildinhalt, ohne die Zeile zuzukleben. */ html[data-hdr="overlay"]:not([data-hsolid]) .icbtn { background: rgba(255,255,255,.42); transition: background var(--transition-fast); } html[data-hdr="overlay"]:not([data-hsolid]) .icbtn:hover { background: rgba(255,255,255,.72) } /* Dunkel deutlich fester als hell: dort sind die Icons die hellen Flaechen, und der Bluetenzweig der Nachtfassung ist blass. Bei .42 kam das Icon bei 1440 px auf 2,79:1 - knapp unter der Schwelle. */ html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .icbtn { background: rgba(11,19,38,.62) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .icbtn:hover { background: rgba(11,19,38,.82) } /* Suchfeld: durchscheinend, damit der Himmel darunter sichtbar bleibt, im Fokus deutlich fester. */ html[data-hdr="overlay"]:not([data-hsolid]) .hsearch { background: rgba(255,255,255,.44); border-color: rgba(255,255,255,.7); color: var(--navy-900); transition: background .35s ease, border-color .35s ease; } html[data-hdr="overlay"]:not([data-hsolid]) .hsearch input { color: var(--navy-900) } html[data-hdr="overlay"]:not([data-hsolid]) .hsearch input::placeholder { color: rgba(17,28,53,.5) } html[data-hdr="overlay"]:not([data-hsolid]) .hsearch:focus-within { background: rgba(255,255,255,.92) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .hsearch { background: rgba(11,19,38,.42); border-color: rgba(160,218,254,.34); color: var(--color-text-inverse); } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .hsearch input { color: var(--color-text-inverse) } html[data-hdr="overlay"][data-theme="dark"]:not([data-hsolid]) .hsearch input::placeholder { color: rgba(215,230,250,.55) } /* ---- Hero im Overlay-Modus ---- * Nur noch der Offset unter der Leiste. Die Hero-Hoehe kommt aus * startseite.css (an die Breite gekoppelt, gilt fuer beide Header-Modi); * eine feste Hoehe hier wuerde den clamp mit hoeherer Spezifitaet * ueberschreiben. Nur padding-top, kein Shorthand: das padding-bottom von * .hshell reserviert die Wolkenzone und muss stehen bleiben. */ html[data-hdr="overlay"] .hshell { padding-top: clamp(150px, 11vw, 220px) } @media (max-width: 640px) { /* 156px statt der 120px der Vorgabe: die Leiste endet mobil bei y=100, und die Headline muss laut Abnahme mindestens 56px darunter beginnen - mit 120px blieben gemessen nur 27px. */ html[data-hdr="overlay"] .hshell { padding-top: 156px } }