{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "sticky-shrink-header",
 "name": "Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt",
 "name_en": "Shrinking / restyling sticky header",
 "kurz": "Der Header schrumpft scrollgekoppelt von 168 auf 64 px, die Marke von 4.5625 auf 3.125 rem, und bekommt beim Andocken eine Glasfläche mit Haarlinie.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "präzise",
  "laut"
 ],
 "stimmung_roh": [
  "markant",
  "editorial",
  "funktional"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "scroll-state-queries",
  "gsap",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Am Seitenanfang ist der Header großzügig: viel Raum, große Marke, manchmal die ganze Wortmarke. Beim Scrollen schrumpft er an den Scroll gekoppelt auf eine kompakte Höhe. Das Logo skaliert mit oder wechselt zur Bildmarke. Sobald er andockt, bekommt er Hintergrund, Trennlinie oder Blur. Sonderfall Studio-Seiten: die große Wortmarke aus dem Hero wandert beim Scrollen in die Logo-Position.",
  "warum_es_wirkt": "Beim Einstieg steht die Marke groß da, beim Lesen nimmt der Header kaum Platz weg. Weil der Übergang am Scroll hängt, wirkt er flüssig statt umgeschaltet. Glas und Haarlinie trennen den Header erst dann vom Inhalt, wenn Inhalt darunter liegt.",
  "wann_einsetzen": "Marken mit starker Wortmarke oder Bildmarke, Editorial-Seiten, Portfolios und Shops mit großem Logo. Auch bei leisen Seiten, wenn der Header am Anfang die Visitenkarte ist.",
  "wann_nicht": "Wenn der Header ohnehin klein ist. Wenn die Umsetzung über height läuft und dabei der Inhalt ruckelt; dann Höhe konstant halten und transform nutzen.",
  "varianten": [
   "Schrumpfen: Höhe und Marke scrollgekoppelt verkleinern (Chrome-Anleitung 200 → 50 px über 150 px; Stewart & Partners Logo 4.5625 → 3.125 rem über 500 px).",
   "Umfärben beim Andocken: nur Hintergrund, Linie oder Inhalt wechseln, sobald scroll-state(stuck: top) greift.",
   "Wortmarke wandert ins Logo: der große Name aus dem Hero skaliert und verschiebt sich scrollgekoppelt in den Header.",
   "Glas statt Fläche: halbtransparenter Hintergrund mit backdrop-filter: blur(12px), eingeblendet in 200 ms (Resend, Clay); auch als Progressive Blur."
  ],
  "umsetzung": "Reines CSS über eine Scroll-Timeline: @property --p { syntax: '<number>'; inherits: true; initial-value: 0 } @keyframes p { to { --p: 1 } } header { position: fixed; animation: p linear both; animation-timeline: scroll(root block); animation-range: 0px 500px }. Alle Teile rechnen aus --p nur transform und opacity, die Höhe bleibt konstant. Das ist schneller als height zu animieren. Die Chrome-Anleitung animiert height direkt (200 → 50 px über 150 px). Andocken: header { position: sticky; top: 0; container-type: scroll-state } und @container scroll-state(stuck: top) { .innen { background: …; border-bottom: … } }. Der Stil muss auf Nachfahren liegen. Support prüfen mit CSS.supports('animation-timeline: scroll()') und CSS.supports('container-type: scroll-state'), sonst --p bzw. eine Klasse per JS setzen. Fallstrick: den animation-Shorthand vor animation-timeline schreiben, sonst setzt er sie zurück. Mit GSAP: ScrollTrigger mit start 'top top', end '+=500', scrub und ease 'none'.",
  "mobil": "Geringere Ausgangshöhe (z. B. 120 → 56 px) und kleinere Marke (Stewart & Partners mobil 4 → 3 rem). Nebenzeilen wie Status früh ausblenden. Die wandernde Wortmarke kleiner beginnen lassen oder weglassen.",
  "reduzierte_bewegung": "Statt kontinuierlichem Schrumpfen zwei feste Zustände ohne Übergang, z. B. Wechsel nach halbem Scrollweg.",
  "barrierefreiheit": "Der Logo-Link behält seinen Namen (aria-label), auch wenn nur die Bildmarke sichtbar ist. Text nicht unter lesbare Größe skalieren (Endgröße mindestens 16 px). Kontrast in beiden Zuständen prüfen, besonders auf Glas über Bildern. Die Navigation bleibt in beiden Zuständen per Tastatur erreichbar."
 },
 "messwerte": {
  "easing": "linear (scrub)",
  "dauer_ms": "scrollgekoppelt über 500 px",
  "stagger_ms": "",
  "distanz": "Logo 4.5625rem → 3.125rem",
  "sonstiges": "Resend: Glas-Layer opacity 0 → 1 in 200 ms",
  "herkunft": "beobachtet",
  "quelle": "https://cdn.prod.website-files.com/66601c7c6b0d48cf88bbe06c/67050947032a3d18164ce14f_sp-scripts.txt"
 },
 "kurve": {
  "bezier": [
   0.42,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0.42, 0, 0.58, 1)",
  "name": "ease-in-out",
  "dauer_ms": 500
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Developers: Shrinking header on scroll",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-atoms/shrinking-header-on-scroll?hl=de",
   "auszeichnung": "",
   "beobachtung": "animation-timeline: scroll(block root), animation-range 0px 150px, height 200 → 50 px, JS-Fallback.",
   "art": "artikel"
  },
  {
   "seite": "ICS MEDIA: scroll-state() für Sticky-Header",
   "url": "https://ics.media/en/entry/250602/",
   "auszeichnung": "",
   "beobachtung": "stuck-Query ab Chrome/Edge 133 (02/2025), Header-Hintergrund wechselt beim Andocken.",
   "art": "artikel"
  },
  {
   "seite": "Osmo: Scroll Driven Header Styling",
   "url": "https://osmo.supply/resource/scroll-driven-header-styling",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "Nur Titel gesehen.",
   "art": "demo"
  },
  {
   "seite": "Stewart & Partners",
   "url": "https://www.stewartpartners.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (sp-scripts.txt): .head-logo_holder schrumpft scrollgekoppelt von 4.5625rem auf 3.125rem Breite (mobil 4rem → 3rem), ScrollTrigger start top top, end +=500, scrub, ease linear.",
   "art": "website"
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Header sticky top-0, after:bg-black/60 after:backdrop-blur-md after:opacity-0 mit transition 200ms ease-in-out – Glas-Hintergrund erscheint beim Andocken.",
   "art": "website"
  },
  {
   "seite": "Clay",
   "url": "https://clay.global/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (0120046ed8c784ca.css): .Header_Header_scrolled{backdrop-filter:blur(12px)}.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome Developers: Header wird beim Scrollen kleiner",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-atoms/shrinking-header-on-scroll?hl=de"
  },
  {
   "titel": "ICS MEDIA: CSS @container scroll-state()",
   "url": "https://ics.media/en/entry/250602/"
  }
 ],
 "kombinierbar_mit": [
  "hide-on-scroll-header",
  "schwebende-pill-navigation",
  "footer-cta-riesen-wortmarke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Header schrumpft scrollgekoppelt von 168 auf 64 px, die Marke von 4.5625 auf 3.125 rem, und bekommt beim Andocken eine Glasfläche mit Haarlinie.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (scrub, Scroll-Timeline); Glas und Umfärben 200ms ease-in-out; Hover 120ms cubic-bezier(0.165, 0.84, 0.44, 1)",
   "technik": "@property --p (<number>) wird per animation-timeline: scroll(root block) von 0 auf 1 animiert; alle Teile rechnen daraus nur transform/opacity. JS-Fallback setzt --p = scrollY / Scrollweg.",
   "schrumpfen_scrollweg": "animation-range: 0px 500px",
   "schrumpfen_hoehe": "168px → 64px (Telefon 120px → 56px), Glas per scaleY(1 - p * (1 - 64/168)), Zeile per translateY(p * (64px - 168px) / 2)",
   "schrumpfen_marke": "Breite 4.5625rem → 3.125rem per scale(1 - p * 0.3151); Telefon 4rem → 3rem (scale bis 0.75); Name rückt um 1.4375rem nach (Telefon 1rem)",
   "schrumpfen_nebenzeilen": "Rolle und Status opacity 1 - p * 2.5 (bei p = 0.4 weg)",
   "wortmarke_scrollweg": "animation-range: 0px 150px",
   "wortmarke": "Name 64px → 16px per scale(1 → 0.25), y 112px → 24px, Header 216px → 64px; Telefon 40px → 16px (scale bis 0.4), y 64px → 20px, Header 128px → 56px; letter-spacing -0.035em, wght 500",
   "andocken": "position: sticky; top: 0; container-type: scroll-state; @container scroll-state(stuck: top) { … } auf Nachfahren; Fallback Klasse .angedockt per getBoundingClientRect().top <= 0",
   "andocken_wechsel": "Label „Inhalt“ → Monogramm + Name, opacity und translateY 6px, 200ms ease-in-out; obere Haarlinie weg, Glas und untere Haarlinie an",
   "glas": "background rgba(252, 252, 252, 0.74) (dunkel rgba(11, 11, 9, 0.72)), backdrop-filter: blur(12px) saturate(1.4), opacity 0 → 1 in 200ms ease-in-out ab scrollY ≥ 1px, Haarlinie 1px #e8e8e8",
   "leiste_hoehe": "56px",
   "farben": "#fcfcfc Grund, #0b0b09 Text, #646464 Sekundär, #e8e8e8 Linie, #f0f0f0 Hover-Fläche, #2f5bea Fokus und Link-Hover",
   "schriften": "Host Grotesk 400/500, Newsreader Italic (opsz 24, 1.05em) für einzelne Wörter, Geist Mono 11px versal 0.14em für Metadaten",
   "reduziert": "p springt bei halbem Scrollweg (250px bzw. 75px) von 0 auf 1, ohne Übergang"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten wie am Desktop, da scrollgekoppelt. Kleinere Ausgangshöhe (120 → 56 px), Marke 4 → 3 rem, Wortmarke 40 → 16 px; Status und Nebenlinks ausgeblendet; Listenzeilen reagieren auf :active statt Hover.",
  "reduziert": "Keine Scroll-Timeline und keine Übergänge: der Header kennt nur zwei feste Zustände (groß bis zum halben Scrollweg, danach kompakt), Glas und Andock-Wechsel schalten hart um.",
  "korrekturen": {
   "beschreibung": "Am Seitenanfang ist der Header großzügig: viel Raum, große Marke, manchmal die ganze Wortmarke. Beim Scrollen schrumpft er an den Scroll gekoppelt auf eine kompakte Höhe. Das Logo skaliert mit oder wechselt zur Bildmarke. Sobald er andockt, bekommt er Hintergrund, Trennlinie oder Blur. Sonderfall Studio-Seiten: die große Wortmarke aus dem Hero wandert beim Scrollen in die Logo-Position.",
   "warum_es_wirkt": "Beim Einstieg steht die Marke groß da, beim Lesen nimmt der Header kaum Platz weg. Weil der Übergang am Scroll hängt, wirkt er flüssig statt umgeschaltet. Glas und Haarlinie trennen den Header erst dann vom Inhalt, wenn Inhalt darunter liegt.",
   "wann_einsetzen": "Marken mit starker Wortmarke oder Bildmarke, Editorial-Seiten, Portfolios und Shops mit großem Logo. Auch bei leisen Seiten, wenn der Header am Anfang die Visitenkarte ist.",
   "wann_nicht": "Wenn der Header ohnehin klein ist. Wenn die Umsetzung über height läuft und dabei der Inhalt ruckelt; dann Höhe konstant halten und transform nutzen.",
   "varianten": [
    "Schrumpfen: Höhe und Marke scrollgekoppelt verkleinern (Chrome-Anleitung 200 → 50 px über 150 px; Stewart & Partners Logo 4.5625 → 3.125 rem über 500 px).",
    "Umfärben beim Andocken: nur Hintergrund, Linie oder Inhalt wechseln, sobald scroll-state(stuck: top) greift.",
    "Wortmarke wandert ins Logo: der große Name aus dem Hero skaliert und verschiebt sich scrollgekoppelt in den Header.",
    "Glas statt Fläche: halbtransparenter Hintergrund mit backdrop-filter: blur(12px), eingeblendet in 200 ms (Resend, Clay); auch als Progressive Blur."
   ],
   "umsetzung": "Reines CSS über eine Scroll-Timeline: @property --p { syntax: '<number>'; inherits: true; initial-value: 0 } @keyframes p { to { --p: 1 } } header { position: fixed; animation: p linear both; animation-timeline: scroll(root block); animation-range: 0px 500px }. Alle Teile rechnen aus --p nur transform und opacity, die Höhe bleibt konstant. Das ist schneller als height zu animieren. Die Chrome-Anleitung animiert height direkt (200 → 50 px über 150 px). Andocken: header { position: sticky; top: 0; container-type: scroll-state } und @container scroll-state(stuck: top) { .innen { background: …; border-bottom: … } }. Der Stil muss auf Nachfahren liegen. Support prüfen mit CSS.supports('animation-timeline: scroll()') und CSS.supports('container-type: scroll-state'), sonst --p bzw. eine Klasse per JS setzen. Fallstrick: den animation-Shorthand vor animation-timeline schreiben, sonst setzt er sie zurück. Mit GSAP: ScrollTrigger mit start 'top top', end '+=500', scrub und ease 'none'.",
   "mobil": "Geringere Ausgangshöhe (z. B. 120 → 56 px) und kleinere Marke (Stewart & Partners mobil 4 → 3 rem). Nebenzeilen wie Status früh ausblenden. Die wandernde Wortmarke kleiner beginnen lassen oder weglassen.",
   "reduzierte_bewegung": "Statt kontinuierlichem Schrumpfen zwei feste Zustände ohne Übergang, z. B. Wechsel nach halbem Scrollweg.",
   "barrierefreiheit": "Der Logo-Link behält seinen Namen (aria-label), auch wenn nur die Bildmarke sichtbar ist. Text nicht unter lesbare Größe skalieren (Endgröße mindestens 16 px). Kontrast in beiden Zuständen prüfen, besonders auf Glas über Bildern. Die Navigation bleibt in beiden Zuständen per Tastatur erreichbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept „freelancer-stille-visitenkarte“, erfundene Interaction-Designerin Marit Oswald aus Heidelberg-Bergheim (Host Grotesk, Newsreader Italic, Graustufen, eine Schmuckfarbe nur für Fokus). Das Rezept passt, weil der Header hier die Visitenkarte ist; die Wortmarke bleibt bewusst bei 64 px statt viewportbreit (nicht_verwenden). Drei Varianten per Umschalter: Schrumpfen (Scroll-Timeline 0–500 px), Andocken (echte scroll-state-Query mit Fallback), Wortmarke (0–150 px). Ein registriertes --p steuert alle Teile, Werte-Anzeige zeigt scrollY und p live. Monogramm als eigene SVG. Vorschau scrollt selbst und wechselt je Runde die Variante. AD-Review 01.11.2026: Note 4."
 }
}