{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "frosted-glass-erweitert",
 "name": "Frosted Glass mit erweitertem Backdrop",
 "name_en": "Next-level frosted glass / glassmorphism 2.0",
 "kurz": "Sticky Header aus getöntem Glas, dessen Backdrop doppelt so hoch ist: Farbe von unten fließt schon vor der Kante ein, eine 4-px-Lichtkante gibt Tiefe ohne Schatten.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "ruhig",
  "hochwertig",
  "technisch",
  "luftig"
 ],
 "technik": [
  "css",
  "backdrop-filter",
  "mask-image"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Glasfläche für Sticky Header und schwebende Navigation, deren Unschärfe auch Inhalt knapp unterhalb der Kante einbezieht. Ein Kindelement trägt den backdrop-filter und ist doppelt so hoch wie der Kopf. Eine Maske schneidet die untere Hälfte weg. Farbe und Kontur von unten kommen so schon an, bevor sie die Kante erreichen, wie bei echtem Glas. Eine 3 bis 4 px hohe zweite Fläche unter dem Kopf mit kleinerem Blur und mehr Helligkeit bildet die Lichtkante.",
  "warum_es_wirkt": "Der Blur sieht dicht und körperhaft aus, nicht wie ein milchiger Filter. Die Lichtkante gibt Tiefe ohne Schlagschatten. Beim Scrollen bleibt der Inhalt unter der Navigation ahnbar, die Navigation wirkt leicht.",
  "wann_einsetzen": "Sticky Header, Bottom-Bars, Dock-Navigation, Overlays über Bild- oder Farbflächen, Medien-Controls über Video.",
  "wann_nicht": "Über ruhigem, einfarbigem Grund (Effekt unsichtbar, nur Kosten). Für große Textflächen. Bei mehreren gestapelten Glasebenen (Performance, Matsch).",
  "varianten": [
   "Klar getönt mit saturate(150–180 %) gegen Grauschleier",
   "Dunkles Rauchglas für Dark Mode, stärkerer Blur (bis 30px)",
   "Pill-Navigation, die beim Scrollen schrumpft (Anleihe an die Tabbar von iOS 26)",
   "Glas mit Grain-Overlay gegen Banding"
  ],
  "umsetzung": "Header: position: sticky, halbtransparenter Hintergrund für die Lesbarkeit, kein Filter direkt darauf. Kind .backdrop: position: absolute; inset: 0; height: 200%; backdrop-filter: blur(16px); mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%); pointer-events: none. Gegen Flackern am Viewport-Rand bekommt .backdrop einen Verlauf von der Seitenfarbe (oben deckend) bis transparent bei 50 %. Kind .backdrop-edge: inset: 0; height: 100%; transform: translateY(100%); kleinerer Blur mit brightness/saturate, maskiert auf die Kantendicke. Header-Inhalt mit position: relative und z-index darüber. Kein Vorfahre darf filter, opacity < 1, mask oder clip-path tragen, sonst sieht der Backdrop nichts. Gate: @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)); Fallback fast deckend, z. B. hsl(0 0% 100% / .95). Runde Ecken: clip-path: inset(0 0 50% 0 round …) oder eine SVG-Maske mit rect rx/ry statt der Verlaufsmaske. Fallstricke: overflow: hidden statt Maske klappt erst ab Chrome 142. Firefox hat einen Bug bei position: sticky mit Vorfahre overflow plus border-radius. overscroll-behavior: none verhindert Flackern in Firefox.",
  "mobil": "Funktioniert. Auf schwachen Android-Geräten Blur auf 8 bis 10px senken und nur ein Glaselement gleichzeitig zeigen.",
  "reduzierte_bewegung": "Der Kern hat keine Bewegung. Eine schrumpfende Navigation bleibt bei reduce statisch.",
  "barrierefreiheit": "Kontrast Text zu Glas gegen den ungünstigsten Hintergrund prüfen (4.5:1). Bei prefers-reduced-transparency: reduce deckenden Hintergrund zeigen. Der Fokusring muss auf Glas sichtbar bleiben."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Backdrop-Höhe 200%, Maske bei 50%, Kante 4px",
  "sonstiges": "Produktion: blur(8px)–blur(30px), oft mit Sättigungsboost: Cuberto blur(12px) saturate(300%), htarchitecte.com blur(16px) saturate(180%), Fiddle.Digital blur(.25rem) saturate(200%); Grundfläche fast deckend (#fffffff2, #454742fa). Referenzwerte Comeau: blur(16px), Kante 4px.",
  "herkunft": "beobachtet",
  "quelle": "https://cuberto.com/_astro/Footer.v_lo1qnf.css"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Josh W. Comeau – Next-level frosted glass (Referenzartikel, Update 10/2026)",
   "url": "https://www.joshwcomeau.com/css/backdrop-filter/",
   "auszeichnung": "",
   "beobachtung": "Kompletter Aufbau mit 200%-Backdrop, Maske, Flacker-Fix, Kantenelement und @supports-Fallback; nennt >97% Unterstützung (caniuse, 10/2026).",
   "art": "artikel"
  },
  {
   "seite": "Apple – Liquid Glass Ankündigung",
   "url": "https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
   "auszeichnung": "",
   "beobachtung": "Tabbars schrumpfen beim Scrollen und wachsen beim Zurückscrollen; Controls als eigene funktionale Ebene über dem Inhalt – Leitbild für Web-Navigationen 2026.",
   "art": "artikel"
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Kopfleisten-Fläche (z-index 94, Höhe 8rem) mit backdrop-filter: blur(12px) saturate(300%) auf fast deckendem Weiß (#fffffff2); weitere Glasflächen blur(8px) und blur(15px) (Footer.v_lo1qnf.css).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Evervault",
   "url": "https://evervault.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): 52 backdrop-filter-Regeln im Framer-Bundle, Flächen mit blur(8px) auf transparentem Grund, kombiniert mit mix-blend-mode: plus-lighter für leuchtende Kanten.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Terminal Industries",
   "url": "https://terminal-industries.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Produkt-Panel .phone-panel mit backdrop-filter: blur(30px) auf #454742fa und 1px-Rand; insgesamt 47 backdrop-filter-Vorkommen (Nuxt).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Next-level frosted glass with backdrop-filter",
   "url": "https://www.joshwcomeau.com/css/backdrop-filter/"
  }
 ],
 "kombinierbar_mit": [
  "liquid-glass-refraktion",
  "grain-noise-overlay",
  "progressive-blur"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsbelege; Saturate-Boost als häufige Ergänzung in Messwerte aufgenommen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Sticky Header aus getöntem Glas, dessen Backdrop doppelt so hoch ist: Farbe von unten fließt schon vor der Kante ein, eine 4-px-Lichtkante gibt Tiefe ohne Schatten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "backdrop_hoehe": "200 % der Kopfhöhe",
   "maske": "linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)",
   "flacker_fix": "background: linear-gradient(to bottom, Seitenfarbe 0%, transparent 50%)",
   "kante": "4px, translateY(100%), backdrop-filter: blur(8px) brightness(1.06) saturate(1.6) (Rauchglas: brightness(1.6) saturate(1.4), Grund rgb(255 255 255 / .06))",
   "klar": "backdrop-filter: blur(16px) saturate(180%); Grund rgb(241 238 232 / .5); Seite #f1eee8",
   "rauchglas": "backdrop-filter: blur(30px) saturate(140%); Grund rgb(69 71 66 / .55); Seite #121311",
   "pill": "backdrop-filter: blur(12px) saturate(300%); Grund rgb(255 255 255 / .55); clip-path: inset(0 0 50% 0 round 999px); Ring inset 0 0 0 1px rgb(255 255 255 / .55) + inset 0 1px 0 rgb(255 255 255 / .9); top 14px; Höhe 64px → 54px, Breite min(1080px) → min(560px) ab 40px Scroll",
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out)",
   "dauer_ms": 600,
   "ui_ms": 150,
   "kopf_hoehe": "68px (Telefon 60px)",
   "fallback": "@supports not backdrop-filter: rgb(Seite / .95); prefers-reduced-transparency: deckend"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Glas, Navigation als Menü-Knopf; die Pill schrumpft auf 230px. Umschalter mit größeren Tippflächen, ohne Zeilenbeschriftung.",
  "reduziert": "Glas bleibt (keine Bewegung im Kern). Pill schrumpft nicht, Farbwechsel ohne Übergang; Vorführung springt an eine feste Stelle statt zu scrollen.",
  "korrekturen": {
   "beschreibung": "Glasfläche für Sticky Header und schwebende Navigation, deren Unschärfe auch Inhalt knapp unterhalb der Kante einbezieht. Ein Kindelement trägt den backdrop-filter und ist doppelt so hoch wie der Kopf. Eine Maske schneidet die untere Hälfte weg. Farbe und Kontur von unten kommen so schon an, bevor sie die Kante erreichen, wie bei echtem Glas. Eine 3 bis 4 px hohe zweite Fläche unter dem Kopf mit kleinerem Blur und mehr Helligkeit bildet die Lichtkante.",
   "warum_es_wirkt": "Der Blur sieht dicht und körperhaft aus, nicht wie ein milchiger Filter. Die Lichtkante gibt Tiefe ohne Schlagschatten. Beim Scrollen bleibt der Inhalt unter der Navigation ahnbar, die Navigation wirkt leicht.",
   "wann_einsetzen": "Sticky Header, Bottom-Bars, Dock-Navigation, Overlays über Bild- oder Farbflächen, Medien-Controls über Video.",
   "wann_nicht": "Über ruhigem, einfarbigem Grund (Effekt unsichtbar, nur Kosten). Für große Textflächen. Bei mehreren gestapelten Glasebenen (Performance, Matsch).",
   "varianten": [
    "Klar getönt mit saturate(150–180 %) gegen Grauschleier",
    "Dunkles Rauchglas für Dark Mode, stärkerer Blur (bis 30px)",
    "Pill-Navigation, die beim Scrollen schrumpft (Anleihe an die Tabbar von iOS 26)",
    "Glas mit Grain-Overlay gegen Banding"
   ],
   "umsetzung": "Header: position: sticky, halbtransparenter Hintergrund für die Lesbarkeit, kein Filter direkt darauf. Kind .backdrop: position: absolute; inset: 0; height: 200%; backdrop-filter: blur(16px); mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%); pointer-events: none. Gegen Flackern am Viewport-Rand bekommt .backdrop einen Verlauf von der Seitenfarbe (oben deckend) bis transparent bei 50 %. Kind .backdrop-edge: inset: 0; height: 100%; transform: translateY(100%); kleinerer Blur mit brightness/saturate, maskiert auf die Kantendicke. Header-Inhalt mit position: relative und z-index darüber. Kein Vorfahre darf filter, opacity < 1, mask oder clip-path tragen, sonst sieht der Backdrop nichts. Gate: @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)); Fallback fast deckend, z. B. hsl(0 0% 100% / .95). Runde Ecken: clip-path: inset(0 0 50% 0 round …) oder eine SVG-Maske mit rect rx/ry statt der Verlaufsmaske. Fallstricke: overflow: hidden statt Maske klappt erst ab Chrome 142. Firefox hat einen Bug bei position: sticky mit Vorfahre overflow plus border-radius. overscroll-behavior: none verhindert Flackern in Firefox.",
   "mobil": "Funktioniert. Auf schwachen Android-Geräten Blur auf 8 bis 10px senken und nur ein Glaselement gleichzeitig zeigen.",
   "reduzierte_bewegung": "Der Kern hat keine Bewegung. Eine schrumpfende Navigation bleibt bei reduce statisch.",
   "barrierefreiheit": "Kontrast Text zu Glas gegen den ungünstigsten Hintergrund prüfen (4.5:1). Bei prefers-reduced-transparency: reduce deckenden Hintergrund zeigen. Der Fokusring muss auf Glas sichtbar bleiben."
  },
  "geprueft": "31.10.2026",
  "notiz": "Portfolio eines erfundenen Kölner Designstudios, kräftige Projektbilder laufen unter dem Kopf durch. Umschalter für drei Varianten (Klar, Rauchglas, Pill) und für den Backdrop (erweitert, einfach, geteilter Vergleich mit Etiketten). Vorführung scrollt die Seite selbst und wechselt pro Runde die Einstellung, beginnend mit dem Vergleich. Pill mit runden Ecken nutzt clip-path statt Maske; Lichtkante dort als heller Ring. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise (hell) Alpha .56 → .66 (4,9:1), Pult-Labels ebenso; Band-Label Alpha .65 → .8; Variante Rauchglas: Band auf Orange mit dunkler Schrift #121311 (6,9:1, Weiß hatte 2,5:1), Label .75; Kontrastmodus-Rahmen für Knöpfe."
 }
}