{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "schrift-hero-viewportbreit",
 "name": "Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)",
 "name_en": "Oversized type hero / fit-to-width wordmark / Oversized fit-to-width type with scroll scaling",
 "kurz": "Eine Wortmarke füllt die Viewportbreite bis auf die Kante, Buchstaben steigen aus Masken, beim Scrollen wird sie überdeckt, schrumpft ins Header-Logo oder zerfällt in gestaffelte Tempi.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "ruhig",
  "editorial",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "selbstbewusst",
  "editorial",
  "brutal",
  "minimal",
  "plakativ"
 ],
 "technik": [
  "css",
  "text-fit",
  "clamp",
  "splittext",
  "gsap",
  "scrolltrigger",
  "variable-fonts",
  "scroll-driven-css",
  "flip"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Hero besteht aus einem einzigen kurzen Wort: Studio, Person oder Produkt. Es wird so groß gesetzt, dass es genau die Innenbreite des Viewports füllt, fast ohne Seitenrand. Kleine Begleittexte (Claim, Ort, Jahr, Scroll-Hinweis) stehen in den Ecken oder an Rasterspalten. Beim Laden steigen die Buchstaben einzeln aus einer Maske. Beim Scrollen bleibt die Wortmarke stehen und wird vom Inhalt überdeckt, schrumpft ins Header-Logo oder ihre Buchstaben laufen mit unterschiedlichem Tempo davon.",
  "warum_es_wirkt": "Der Kontrast zwischen riesig und winzig schafft sofort Hierarchie und wirkt selbstbewusst. Die Schrift ist zugleich Logo, Bild und Layout, ein Foto braucht es nicht. Die Schriftwahl wird zur Markenaussage. Wix nennt das für 2026 „Exaggerated hierarchy“.",
  "wann_einsetzen": "Portfolios, Studios, Personal Brands und Launch-Seiten mit kurzem Namen oder starker Wortmarke. Auch als Footer mit riesigem Namen oder als Übergang vom Hero zum Logo in der Navigation.",
  "wann_nicht": "Bei langen Namen oder Firmennamen aus mehreren Wörtern: Auf dem Telefon wird die Schrift unlesbar klein. Bei Seiten, auf denen Nutzer sofort Information brauchen (Shop-Startseite, Behörde). Wenn Markenrichtlinien das Skalieren des Logos verbieten.",
  "varianten": [
   "Einpassen: Wortmarke steht still (sticky), der Inhalt schiebt sich darüber",
   "Logo-Übergabe: Wortmarke schrumpft beim Scrollen von Vollbreite ins Header-Logo (scroll-driven transform oder GSAP Flip)",
   "Gestaffelt: Buchstaben laufen beim Scrollen mit unterschiedlichem Tempo",
   "Kinetisch: Buchstaben dehnen oder stauchen sich über variable Achsen (wdth, wght)",
   "Mehrzeiliger Typo-Block mit gemischten Schnitten (Serif kursiv und Grotesk), zeilenweise eingerückt",
   "Riesentypo über Vollbild-Video (siehe cinematic-video-hero) oder als Maske für Bild und Video (siehe typo-maske-medien)",
   "Endlosliste riesiger Wörter mit Bildvorschau zum aktiven Wort",
   "Footer-Name, der beim Erreichen des Seitenendes hochwächst",
   "Mehrzeiliger Plakat-Titel, jede Zeile randvoll per text-fit: grow (Chrome 150), Rückfall über die Messung in JS"
  ],
  "umsetzung": "Einpassen per JS: Text bei 100px messen, dann font-size = Platz / Breite in em. Bei fonts.ready und Resize neu messen. Für optische Randlosigkeit die Seitenlinien von erstem und letztem Zeichen abziehen (Canvas measureText, actualBoundingBox). Ohne JS: font-size in vw einmal pro Schrift und Wort kalibrieren, oder container-type: inline-size mit cqi. Alternativ SVG <text> mit textLength und viewBox. Künftig CSS text-fit: grow (CSS Text 5, laut MDN experimentell, noch nicht Baseline) mit @supports-Rückfall. Wichtig: line-height 0.8 bis 0.9, letter-spacing leicht negativ (−0.05em), Leerraum unter der Grundlinie per negativem margin abziehen. Reveal: Buchstaben teilen (SplitText oder eigenes Skript), jeder in eigener Maske, translateY 100 % → 0 mit expo.out. Beim Teilen geht das Paar-Kerning verloren; es lässt sich je Paar messen und als margin zurückgeben. Logo-Übergabe: Start- und Zielrechteck messen, transform: translate() scale() an den Scroll koppeln (ScrollTrigger mit scrub oder animation-timeline: scroll(), animation-range 0 60vh), transform-origin oben links. Immer transform skalieren, nie font-size animieren (kein Reflow).",
  "mobil": "Die Wortmarke bleibt randlos, wird aber klein. Lange Namen auf zwei Zeilen umbrechen (eigene mobile Aufteilung) oder um 90° gedreht setzen. Scroll-Kinetik reduzieren. Das Wort muss kurz genug sein.",
  "reduzierte_bewegung": "Schrift sofort statisch zeigen, kein Buchstaben-Reveal, kein Scroll-Schrumpfen. Die Logo-Übergabe wird zur kurzen Überblendung.",
  "barrierefreiheit": "Echtes <h1> verwenden, aber nur, wenn es wirklich die Seitenüberschrift ist. Kein Bild oder Canvas ohne Textalternative. Gesplittete Buchstaben: aria-label am Elternelement, aria-hidden auf den Spans, sonst buchstabiert der Screenreader. Bei 200 % Zoom darf nichts abgeschnitten werden, darum Fit-Text mit Mindestgröße."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "15–40vw Schriftgröße",
  "sonstiges": "letter-spacing -.05em (14islands, Instrument), line-height .83–1; Rejouice 29.674vw mit letter-spacing -1.353vw",
  "herkunft": "beobachtet",
  "quelle": "https://14islands.com/_next/static/css/f2973826e8215c7b.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": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Mat Voyce",
   "url": "https://matvoyce.tv/",
   "auszeichnung": "Awwwards SOTD 30.01.2025, Typography Honors, Developer Award; laut hontran.dev GSAP-Site-of-the-Year-2025-Nominierung",
   "beobachtung": "Live geprüft (da6dd504a6fc9642.css): .heading mit font-size 40.36vw (mobil 40vw) und height .8em.",
   "art": "website"
  },
  {
   "seite": "USSR Design Almanac (Obys)",
   "url": "https://ussr.obys.agency/",
   "auszeichnung": "",
   "beobachtung": "Laut htmlburger übergroße Retro-Custom-Schrift, die beim Scrollen animiert.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Playground Paris",
   "url": "https://playgroundparis.com/",
   "auszeichnung": "",
   "beobachtung": "Laut htmlburger schwere, übergroße Custom-Typo im Hero mit farbigen Hover-Effekten.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Osmo – Fit Text to Width / Big Typo Scroll Preview (Infinite)",
   "url": "https://www.osmo.supply/resource/fit-text-to-width",
   "auszeichnung": "",
   "beobachtung": "Ressourcen gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Wix – Web Design Trends 2026",
   "url": "https://www.wix.com/blog/web-design-trends",
   "auszeichnung": "",
   "beobachtung": "‚Exaggerated hierarchy‘: übergroße Typo neben winzigem Text als Trend 2026.",
   "art": "artikel"
  },
  {
   "seite": "Figma – Web Design Trends 2026",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Oversized Headlines und Typo über Bildern für Hero-Sektionen.",
   "art": "artikel"
  },
  {
   "seite": "14islands",
   "url": "https://14islands.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (f2973826e8215c7b.css): .Text_h1 font-size max(5rem,19.676vw), letter-spacing -.05em, line-height 1.",
   "art": "website"
  },
  {
   "seite": "Instrument",
   "url": "https://www.instrument.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS): .purpose .title1 font-size 27.95vw (ab 640px 17.03vw), font-variation-settings \"wght\" 400, \"wdth\" 0, letter-spacing -.05em, line-height .8257, white-space nowrap.",
   "art": "website"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (style-new.css): .home-header .big-name h1 font-size max(9em,15vw), nowrap, als Laufband.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: text-fit",
   "url": "https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/text-fit"
  },
  {
   "titel": "CSS Fit-Text Explainer (Google)",
   "url": "https://github.com/explainers-by-googlers/css-fit-text/blob/main/README.md"
  },
  {
   "titel": "Kizu: Fit-to-Width Text (reines CSS)",
   "url": "https://github.com/kizu/kizu.ru/blob/source/src/posts/2024-07-19-fit-to-width/index.en.md"
  },
  {
   "titel": "Osmo – Fit Text to Width",
   "url": "https://www.osmo.supply/resource/fit-text-to-width"
  },
  {
   "titel": "Chrome – Scroll-driven Animations",
   "url": "https://developer.chrome.com/docs/css-ui/scroll-driven-animations"
  }
 ],
 "kombinierbar_mit": [
  "cinematic-video-hero",
  "footer-cta-riesen-wortmarke",
  "blueprint-raster-sichtbar",
  "meta-labels-hud-typografie",
  "typo-maske-medien",
  "marquee-laufband",
  "variable-font-axes"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "schriftanimation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Mat Voyce gleicher URL jetzt geprüft; drei weitere; Awwwards-Seiten entfernt."
  ],
  "zusammengelegt_aus": [
   "schrift-hero-viewportbreit",
   "giant-type-scale"
  ],
  "trendstatus_begruendung": "Konflikt etabliert (layouts) vs. aufsteigend (schriftanimation). Aufgelöst zu 'etabliert' für den Grundtyp; die Skalierung beim Scrollen ist als (aufsteigende) Variante geführt.",
  "querverweis_kategorien": [
   "Schrift-Animationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Wortmarke füllt die Viewportbreite bis auf die Kante, Buchstaben steigen aus Masken, beim Scrollen wird sie überdeckt, schrumpft ins Header-Logo oder zerfällt in gestaffelte Tempi.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schrift": "Archivo 800, font-stretch 87.5 % (wdth 87,5)",
   "font_size": "per JS eingepasst: Breite bei 100px messen, size = Platz / (Breite in em − linke − rechte Seitenlinie); Ergebnis ca. 40,8vw (1440 px), 39,7vw (390 px); CSS-Rückfall --fs: 40.8vw",
   "letter_spacing": "-0.05em plus Paar-Kerning je Buchstabenpaar (per Canvas gemessen, geht beim Teilen sonst verloren)",
   "line_height": "0.83",
   "grundlinie": "margin-bottom -0.065em (Leerraum unter der Grundlinie abgezogen, Schrift sitzt auf der Kante)",
   "seitenrand": "clamp(10px, 1.25vw, 24px), optisch randlos (Seitenlinien von erstem und letztem Zeichen abgezogen)",
   "reveal": "translateY(104%) → 0, je Buchstabe eigene Maske (clip-path: inset(-.25em -.25em 0 -.25em))",
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out)",
   "dauer_ms": 1200,
   "stagger_ms": 60,
   "verzoegerung_ms": 80,
   "begleittexte": "opacity 0 → 1, translate 12px → 0, 900 ms expo.out, 500 ms Verzögerung",
   "einpassen": "Hero position: sticky, Wortmarke fixed; dunkler Inhalt (z-index 2) schiebt sich darüber; Header-Logo blendet ein, sobald 85 % der Wortmarkenhöhe überdeckt sind (spätestens bei 82vh Scroll), 600 ms",
   "uebergabe": "scale 1 → Logohöhe/Wortmarkenhöhe (ca. 0,05) plus translate auf die Logo-Position, scrub über 0–60vh, transform-origin 0 0; Begleittexte opacity 1 − p × 2,5; Wortmarke dann mix-blend-mode: difference",
   "gestaffelt": "translateY je Buchstabe = −Scroll × Tempo, Tempo 0.35 / 1.15 / 0.6 / 1.4 / 0.85, bis 120vh; Werte >1 entkommen dem Inhalt",
   "header_band": "#121212, Höhe 66px (Telefon 92px), opacity 150 ms linear, sobald die Inhaltskante den Header erreicht",
   "ui_ms": 150
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten wie Desktop (Scroll-getrieben, kein Hover nötig); Varianten-Umschalter rutscht in eine eigene Zeile, Navigation entfällt, Aussage steht über der Wortmarke. Wortmarke bleibt randlos (ca. 39,7vw bei 390 px). Variante text-fit: kein Hover nötig, Titel passt sich an jede Breite an (390 px: drei Zeilen randvoll); Pult unten links eingeklappt.",
  "reduziert": "Kein Buchstaben-Reveal und kein Einfahren der Begleittexte, Schrift steht sofort. Gestaffelt bleibt statisch. Übergabe wird zur Überblendung (Wortmarke aus, Header-Logo an, 300 ms) bei halber Strecke. Variante text-fit: kein Zeilen-Reveal, Titel steht sofort; die Vorführung wechselt nur zwischen nativ und Messung.",
  "korrekturen": {
   "beschreibung": "Der Hero besteht aus einem einzigen kurzen Wort: Studio, Person oder Produkt. Es wird so groß gesetzt, dass es genau die Innenbreite des Viewports füllt, fast ohne Seitenrand. Kleine Begleittexte (Claim, Ort, Jahr, Scroll-Hinweis) stehen in den Ecken oder an Rasterspalten. Beim Laden steigen die Buchstaben einzeln aus einer Maske. Beim Scrollen bleibt die Wortmarke stehen und wird vom Inhalt überdeckt, schrumpft ins Header-Logo oder ihre Buchstaben laufen mit unterschiedlichem Tempo davon.",
   "warum_es_wirkt": "Der Kontrast zwischen riesig und winzig schafft sofort Hierarchie und wirkt selbstbewusst. Die Schrift ist zugleich Logo, Bild und Layout, ein Foto braucht es nicht. Die Schriftwahl wird zur Markenaussage. Wix nennt das für 2026 „Exaggerated hierarchy“.",
   "wann_einsetzen": "Portfolios, Studios, Personal Brands und Launch-Seiten mit kurzem Namen oder starker Wortmarke. Auch als Footer mit riesigem Namen oder als Übergang vom Hero zum Logo in der Navigation.",
   "wann_nicht": "Bei langen Namen oder Firmennamen aus mehreren Wörtern: Auf dem Telefon wird die Schrift unlesbar klein. Bei Seiten, auf denen Nutzer sofort Information brauchen (Shop-Startseite, Behörde). Wenn Markenrichtlinien das Skalieren des Logos verbieten.",
   "varianten": [
    "Einpassen: Wortmarke steht still (sticky), der Inhalt schiebt sich darüber",
    "Logo-Übergabe: Wortmarke schrumpft beim Scrollen von Vollbreite ins Header-Logo (scroll-driven transform oder GSAP Flip)",
    "Gestaffelt: Buchstaben laufen beim Scrollen mit unterschiedlichem Tempo",
    "Kinetisch: Buchstaben dehnen oder stauchen sich über variable Achsen (wdth, wght)",
    "Mehrzeiliger Typo-Block mit gemischten Schnitten (Serif kursiv und Grotesk), zeilenweise eingerückt",
    "Riesentypo über Vollbild-Video (siehe cinematic-video-hero) oder als Maske für Bild und Video (siehe typo-maske-medien)",
    "Endlosliste riesiger Wörter mit Bildvorschau zum aktiven Wort",
    "Footer-Name, der beim Erreichen des Seitenendes hochwächst",
    "Mehrzeiliger Plakat-Titel, jede Zeile randvoll per text-fit: grow (Chrome 150), Rückfall über die Messung in JS"
   ],
   "umsetzung": "Einpassen per JS: Text bei 100px messen, dann font-size = Platz / Breite in em. Bei fonts.ready und Resize neu messen. Für optische Randlosigkeit die Seitenlinien von erstem und letztem Zeichen abziehen (Canvas measureText, actualBoundingBox). Ohne JS: font-size in vw einmal pro Schrift und Wort kalibrieren, oder container-type: inline-size mit cqi. Alternativ SVG <text> mit textLength und viewBox. Künftig CSS text-fit: grow (CSS Text 5, laut MDN experimentell, noch nicht Baseline) mit @supports-Rückfall. Wichtig: line-height 0.8 bis 0.9, letter-spacing leicht negativ (−0.05em), Leerraum unter der Grundlinie per negativem margin abziehen. Reveal: Buchstaben teilen (SplitText oder eigenes Skript), jeder in eigener Maske, translateY 100 % → 0 mit expo.out. Beim Teilen geht das Paar-Kerning verloren; es lässt sich je Paar messen und als margin zurückgeben. Logo-Übergabe: Start- und Zielrechteck messen, transform: translate() scale() an den Scroll koppeln (ScrollTrigger mit scrub oder animation-timeline: scroll(), animation-range 0 60vh), transform-origin oben links. Immer transform skalieren, nie font-size animieren (kein Reflow).",
   "mobil": "Die Wortmarke bleibt randlos, wird aber klein. Lange Namen auf zwei Zeilen umbrechen (eigene mobile Aufteilung) oder um 90° gedreht setzen. Scroll-Kinetik reduzieren. Das Wort muss kurz genug sein.",
   "reduzierte_bewegung": "Schrift sofort statisch zeigen, kein Buchstaben-Reveal, kein Scroll-Schrumpfen. Die Logo-Übergabe wird zur kurzen Überblendung.",
   "barrierefreiheit": "Echtes <h1> verwenden, aber nur, wenn es wirklich die Seitenüberschrift ist. Kein Bild oder Canvas ohne Textalternative. Gesplittete Buchstaben: aria-label am Elternelement, aria-hidden auf den Spans, sonst buchstabiert der Screenreader. Bei 200 % Zoom darf nichts abgeschnitten werden, darum Fit-Text mit Mindestgröße."
  },
  "geprueft": "02.11.2026",
  "notiz": "Erfundenes Kölner Studio „Kerbe“: Wortmarke in Archivo 800 (wdth 87,5), per JS randlos eingepasst inkl. Seitenlinien und Paar-Kerning. Drei Varianten per Umschalter: Einpassen (sticky, wird überdeckt), Übergabe (schrumpft ins Header-Logo, scrub 0–60vh), Gestaffelt (Buchstaben mit eigenem Tempo). Header mit mix-blend-mode: difference, dunkles Band erscheint erst, wenn der Inhalt den Header erreicht. Vorführung: Selbst-Scroll durch alle drei Varianten in Schleife. Reines CSS/JS ohne Bibliothek. Varianten 01.11.2026: Pult unten links, startet eingeklappt (?v=basis|textfit), weil es sonst über der Wortmarke liegt. Plattform-Variante „text-fit“ in der Welt Kultur (Halle Oststadt, Lange Nacht der offenen Ateliers): ein Block je Zeile mit text-fit: grow, Weiche „Fallback: Messung“ im Pult nutzt dieselbe Messung wie die Grundvariante. Geprüft in Chromium 153 (text-fit greift dort schon); text-fit vergrößert auch die Zeilenbox, Inline-Blöcke würden dagegen nicht skaliert, darum Maske und Bewegung auf Block-Ebene. Bilder 02.11.2026: Die vier Portfolio-Arbeiten (Fotos und Namen) sind ersetzt durch erfundene Kunden als Inline-SVG mit den Hausschriften: Brauhaus Lindwurm, Ofen Kollektiv, Rheinblatt, Salon Kamm (bilder.json kam nicht). Zugang 02.11.2026: --leise Alpha .58 → .66 (5,2:1 auf #ebe8e1). Logo in der Leiste ist nur per Tab erreichbar, solange es sichtbar ist (.gedeckt), sonst tabindex -1 und aria-hidden. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Offen (Fehlalarm): Leiste mit mix-blend-mode: difference misst die Prüfung als Weiß auf Papier (1,2:1), sichtbar ist fast Schwarz.",
  "varianten": [
   {
    "id": "basis",
    "name": "Wortmarke",
    "wann": "Kreativstudio, Marke mit kurzem Namen: ein Wort über die volle Breite, per JS randlos eingepasst (Einpassen, Übergabe, Gestaffelt).",
    "werte": {
     "aufbau": "ein Wort, Archivo 800 wdth 87,5, per JS auf die Breite gemessen (Seitenlinien und Paar-Kerning)",
     "bewegung": "Reveal expo.out 1200 ms, Versatz 60 ms; Scroll-Varianten Einpassen / Übergabe / Gestaffelt",
     "rezept": "kreativstudio-buehne",
     "details": "siehe bau.werte"
    }
   },
   {
    "id": "textfit",
    "name": "text-fit, mehrzeilig",
    "wann": "Kultur, Festival, Veranstaltung: ein Titel aus mehreren Zeilen, jede Zeile randvoll in eigener Größe, wie ein Plakat.",
    "werte": {
     "aufbau": "h1 mit einem Block je Zeile, jede Zeile in eigener Maske (overflow: clip)",
     "plattform": "@supports (text-fit: grow) { .tf-z { text-fit: grow } } je Zeile, ab Chrome 150; Grundgröße 20px, der Browser skaliert jede Zeile auf die Breite und vergrößert dabei auch die Zeilenbox",
     "fallback": "ohne text-fit: Messung wie in der Grundvariante: Laufweite bei 100px (Range), Seitenlinien per Canvas measureText abziehen, font-size = Breite / (Laufweite − Seitenlinien), margin-left = −linke Seitenlinie; ResizeObserver misst neu",
     "kante": "nativ an der Laufweite (Advance), Messung an der Tinte (optisch randlos)",
     "ergebnis": "1280 px: Faktor ≈ 3,5× / 3,7× / 5,0× bzw. 165 / 175 / 237 px",
     "hoehe": "max-inline-size: min(100 %, (100svh − 330px) × 2,6), damit der Titel in den Viewport passt",
     "schrift": "Schibsted Grotesk 900, versal, letter-spacing −.025em, line-height .84; Text Atkinson Hyperlegible Next; Daten IBM Plex Mono tnum",
     "reveal": "translateY 105 % → 0, 450 ms cubic-bezier(0.215, 0.61, 0.355, 1), Versatz 70 ms (Rezept: Reveal höchstens 500 ms)",
     "farben": "Grund #EFEDEA, Text #0B0B0B, Sparten Kunst #2F7D4A, Musik #C4421A, Tanz #3D5F9A, Film #B0186B (immer mit Text-Label)",
     "vorfuehrung": "Auftritt, dann Bühne 100 % → 60 % → 100 % (je 2200 ms), jede Zeile passt sich live an; reduziert wechselt stattdessen die Weiche",
     "rezept": "kultur-programm-haltung"
    }
   }
  ]
 }
}