{
 "schema": "fundus-rezept/1",
 "stand": "02.11.2026",
 "basis": {
  "stand": "02.11.2026 (Runde 5: Redaktion nach KI-Audit und Lückenrecherche)",
  "muster": [
   "vt-cross-document-mpa",
   "css-view-reveal-nativ",
   "unterstreichung-varianten",
   "button-zustaende",
   "validierung-nach-interaktion",
   "consent-banner-gestaltet",
   "fokus-stil-system",
   "sprunglinks-landmarken",
   "bewegung-pausieren-schalter",
   "fehlerseite-leerzustand",
   "dialog-modal-nativ",
   "zoom-und-textabstand-robust",
   "kontrastmodus-forced-colors",
   "firmendaten-strukturiert",
   "sofort-navigation-vorladen"
  ],
  "beschreibung": "Grundausstattung, die jedes Rezept ohne Nennung bekommt: native Seitenübergänge zwischen echten Seiten (vt-cross-document-mpa) und Vorladen der Hauptwege (sofort-navigation-vorladen), beides nicht bei Onepagern; native Scroll-Reveals nur wo sinnvoll, Link-Unterstreichung, vollständige Button-Zustände, Validierung erst nach Interaktion, ein gestaltetes Consent-Banner, Fehlerseite und Leerzustand, natives Dialog-Modal und eine einzige Datenquelle für Firmendaten, aus der Kontaktblock, Öffnungszeiten und JSON-LD entstehen (firmendaten-strukturiert). Dazu die Barrierefreiheit der Kategorie zugang: sichtbarer Fokus, Sprunglinks und Landmarken, Pause für Bewegung, 200 % Zoom und Textabstände ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus (kontrastmodus-forced-colors). In Sektionen dürfen Basis-Muster genannt werden, wenn sie dort besonders wichtig sind (z. B. Formular-Validierung); in den Kategorie-Listen der Rezepte stehen sie nicht.",
  "regeln": [
   "Keine Schrift kommt in mehr als 3 Rezepten vor (headline, text und akzent zusammen gezählt, alternative_eigenprojekt ausgenommen).",
   "Ein Rezept darf Headline- und Textschrift nicht 1:1 mit einem anderen Rezept teilen.",
   "Pflichtfeld signatur: 1–2 Muster, die kein anderes Rezept nutzt (Basis ausgenommen); jedes Signatur-Muster steht auch in den Muster-Listen des Rezepts.",
   "cinematic-video-hero nur mit eigenem, hochwertigem Footage. Für typische KMU-Kunden (Gastro, Mode/Concept Store) ist ein Foto-Hero Standard, Video steht unter hero_variante.",
   "Kontakt/Anfrage, Online-Termin und Anfahrt sind eigene Sektionen (kontakt-anfrage-formular bzw. mehrschritt-anfrage, termin-buchung-zwei-klick, karte-zwei-klick, oeffnungszeiten-status), auch wenn ein Rezept sie nicht nennt; die Adresse steht immer auch als Text da; studio-visitenkarte-footer steht nur im Footer.",
   "Drittanbieter-Inhalte (Video, Karte, Buchung, Social Feeds) erst nach Einwilligung bzw. Klick laden.",
   "Höchstens ein Material-Effekt (Glow, Verlaufsrahmen, Raster, Textur) pro Ansicht.",
   "Automatisch bewegte Inhalte (Laufband, Wortwechsel, Autoplay) nie für wichtige Information; immer pausierbar und unter prefers-reduced-motion statisch.",
   "Barrierefreiheit gehört zur Grundausstattung (BFSG seit 28.06.2025): sichtbarer Fokus (fokus-stil-system), Sprunglinks und Landmarken, Pause für alles, was sich länger als 5 s bewegt (bewegung-pausieren-schalter), native Dialoge, 200 % Zoom und 320 px Breite ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus prüfen (kontrastmodus-forced-colors). Rechtliches (Erklärung zur Barrierefreiheit) vom Kunden prüfen lassen.",
   "Firmendaten (Name, Adresse, Telefon, Zeiten samt Sonderzeiten, Leistungen, Profil-Links) aus einer Quelle; JSON-LD nur für sichtbare Inhalte, keine eigenen Bewertungssterne im Markup (firmendaten-strukturiert).",
   "Wer online Verträge mit Verbrauchern schließt (Shop, Kurs, Abo, Mitgliedschaft, Online-Anmeldung), braucht im Footer ohne Login „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, seit 19.06.2026) – vom Kunden prüfen lassen.",
   "Bewertungen von Google oder anderen Plattformen nur mit Echtheitshinweis direkt an den gezeigten Bewertungen (bewertungsprofil-mit-echtheitshinweis); bewertungen-verteilung nur für eigene, geprüfte Bewertungen.",
   "Pflichtangaben (Impressum, Datenschutzerklärung, Branchenpflichten aus Leitfaden 8a und den Rezept-regeln) als Seiten, Links oder markierte Platzhalter; keine Rechtstexte erfinden, alles vom Kunden prüfen lassen. Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO), keine pauschalen Umweltaussagen ohne Nachweis.",
   "consent-banner-gestaltet nur, wenn beim Laden einwilligungspflichtige Dienste laufen. Laden alle Dritten erst per 2-Klick, genügt ein Einstellungs-Dialog im Footer („Datenschutz-Einstellungen“) zum Widerrufen.",
   "Starter- und Beispielseiten ohne echte Daten: Bewertungen, Preise, Allergene und Kennzahlen als markierte Platzhalter, nie erfundene Kundenstimmen als echt.",
   "Werbung mit Rate, Zins, „0 %“, Ratenzahlung, Leasing oder „später bezahlen“ braucht ab 20.11.2026 finanzierung-pflichtangaben: effektiver Jahreszins mindestens so groß wie die Rate, Warnhinweis „Achtung! Kreditaufnahme kostet Geld.“ direkt dabei (vom Kunden prüfen lassen).",
   "Verkauf von Waren an Verbraucher braucht seit 27.09.2026 den EU-Hinweis zur gesetzlichen Gewährleistung (eu-gewaehrleistungshinweis), mindestens als Footer-Link, sicherer an Produktseite und Checkout; nur die amtliche Vorlage der EU-Kommission."
  ],
  "herkunft": "Art-Director-Prüfung der 18 Rezepte, Runde 3 (Basis-Block, Signatur-Pflichtfeld, Schriftverteilung, 2-Klick-Muster). Runde 5 (02.11.2026): zugang-Muster, Firmendaten und Vorladen in die Grundausstattung, Regeln zu Kontakt, Verträgen, Bewertungen und Pflichtangaben (KI-Audit Befund 3, Lückenrecherche N1–N3, N6, K5)."
 },
 "id": "kreativstudio-buehne",
 "name": "Kreativstudio: Studio-Bühne",
 "branche": "Kreativstudio, Digitalagentur, Agentur-Portfolio",
 "stimmung": [
  "laut",
  "selbstbewusst",
  "kinematisch",
  "präzise"
 ],
 "kurz": "Viel Lautstärke durch riesige Typo, Showreel-Video und harten Schwarz-Weiß-Kontrast, aber eine einzige, konsequente Bewegungskurve. Die drei Referenzen setzen alle auf eine neutrale Schweizer Grotesk (Suisse Intl, Lausanne). Den Charakter tragen Größe, Schnitt und Video, Deko-Effekte braucht es nicht. Award-nah, aber gebaut wie ein Produkt: Lenis, GSAP, View Transitions, kein Fake-Loader.",
 "referenzen": [
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "HTML und /_astro/Footer.v_lo1qnf.css (@font-face, cubic-bezier) sowie /_astro/*.js",
   "beobachtung": "Astro-Seite (data-astro-transition-persist, 9× view-transition im CSS), Lenis (data-lenis-prevent) und GSAP. @font-face: Suisse Intl (light bis bold) und Manrope. Häufigste Kurve cubic-bezier(.16,1,.3,1) (11×) mit transform .8s und 1.2s; als Akzent eine Überschwing-Kurve (.34,4.56,.64,1), 0,7 s auf Icons. Zeilenhöhen 110 %/120 %, Laufweite -.03em bis .02em. Sektionenfolge: TopheadSection (h1) → PreviewSection showreel (video autoplay muted loop) → What we do → LogoreelSection → Selected work → Clients → Why Cuberto → Insights → FAQ → OutroSection „Have a product to build or rethink?“ → Footer. Kontextueller Cursor über data-cursor-icon (14× arrow-up-right, play, times)."
  },
  {
   "seite": "K72",
   "url": "https://k72.ca/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "https://k72.ca/assets/styles/main.css?v=20240527152606, https://k72.ca/assets/scripts/app.js",
   "beobachtung": "@font-face: nur Lausanne 300 und 500. Headlines in vw: font-size 10vw (5×), 11vw (3×), 9vw, 8vw; Zeilenhöhe .8667. Eine Kurve zieht sich durch alles: cubic-bezier(0.215,0.61,0.355,1) 339× (easeOutCubic), Standard opacity und transform 0,6 s (126×), UI 0,15–0,3 s. Farben: #000/#fff und eine einzige Signalfarbe #d3fd50 (22×). GSAP und SplitText im app.js, Swiper, data-module-time (Zeitanzeige im Header), Hauptmenü als eigenes Modul (data-module-main-nav)."
  },
  {
   "seite": "Fantasy",
   "url": "https://fantasy.co/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "HTML-Inline-CSS, /_nuxt/entry.Cqb0HUwZ.css, /_nuxt/SiteFoot.ixeZfeGR.css",
   "beobachtung": "Nuxt mit GSAP, ScrollTrigger, Lenis und WebGL. Inline-@font-face: Suisse Intl Medium (+ Italic) als „sans“ und Suisse Intl Condensed Bold als „condensed“. Kurve cubic-bezier(.19,1,.22,1) 23×: transform .75s (9×), .5s, 1s, 1.25s. Fades separat: opacity .35s ease-out. Laufweite -.02em bis -.04em, Zeilenhöhe .9/.95 bei Headlines. Folge: media-hero (Vollbild, h1 „Lead by Design“) → Positionierungssatz → drei Leistungs-Sektionen (Intelligent Systems, Digital Products, Brand Experiences) → Case (LIV Golf) → media-hero-exp → storytelling → Footer „Let's talk“. Doppel-Unterstreichung .uline-double: ::before/::after mit scaleX und gegenläufigem transform-origin, je .75s cubic-bezier(.19,1,.22,1), .5s versetzt."
  }
 ],
 "schrift": {
  "paarung_basis": "grilli-frei",
  "abweichung": "",
  "headline": "tiktok-sans",
  "text": "tiktok-sans",
  "akzent": "dm-mono",
  "techniken": [
   "headline-laufweite-zeilenabstand",
   "fluide-typo-clamp-cqi",
   "versal-kondensiert-fit-to-width",
   "mono-labels-versal"
  ],
  "groessen": "h1 clamp(3.5rem, 10vw, 11rem) (K72 setzt 9–11vw), TikTok Sans wdth 75, wght 800, letter-spacing -0.03em, line-height 0.9 (Fantasy .9/.95). h2 clamp(2rem, 4.5vw, 4.5rem), wdth 100, wght 600, -0.02em. Fließtext 1.125rem/1.4, wght 400. Labels DM Mono 0.75rem, Versal, +0.04em. Zwei Breiten derselben Familie ersetzen den Schnittwechsel Suisse/Suisse Condensed bei Fantasy.",
  "alternative_eigenprojekt": "cabinet-laut (Cabinet Grotesk 800 + Supreme) oder Switzer als Suisse-Ersatz (ITF-FFL, nicht für Templates)"
 },
 "farbe": {
  "prinzip": "Schwarz und Weiß tragen 90 % der Fläche, dazu genau eine Signalfarbe für CTA, Hover-Flächen und Seitenübergang (K72: #d3fd50 als einzige Farbe). Sektionen dürfen invertieren (Cuberto: -inverse). Kein Verlauf.",
  "beispiel": [
   "#0b0b0b Grund dunkel / Text",
   "#f2f2f2 Grund hell (Fantasy-Grau)",
   "#ffffff Text auf Dunkel",
   "#8a8a8a Meta und Labels",
   "#ff5a1f Signalfarbe, nur CTA, Hover-Fläche, Übergangs-Panel",
   "#6B6B6B Meta-Text barrierefrei auf hellem Grund (4,8 : 1 auf #f2f2f2; #8a8a8a nur auf dunklem Grund oder für Linien)"
  ]
 },
 "animationsstil": "token-editorial-langsam",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "animationsstil_hinweis": "Bewusst token-editorial-langsam: Die drei Referenzen nutzen gemessen eine steile Out-Kurve (Cuberto .16,1,.3,1; Fantasy .19,1,.22,1; K72 easeOutCubic) mit 750–1200 ms – genau die Umsetzung dieses Tokens. Laut wird die Seite über Größe und Schnitt, nicht über die Kurve.",
 "bewegung": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui (dieselbe Expo-Kurve)",
  "beobachtet": "Cuberto cubic-bezier(.16,1,.3,1) 11×, Fantasy cubic-bezier(.19,1,.22,1) 23×, K72 easeOutCubic 339×; Icons mit Überschwingen cubic-bezier(.34,4.56,.64,1) bei 0,7 s (Cuberto); Expo-Out auf 6 von 23 Award-Seiten (Browser-Nachmessung)",
  "dauer_ms": "Reveals und Bildmasken 750–1200, Seitenübergang 800–1000, Hover/UI 200–400, Fades 350",
  "regel": "Eine Out-Kurve für alles Sichtbare, wie bei allen drei Referenzen. Laut wird es über Größe und Schnitt, nicht über wildere Kurven. Menü-Overlay, FAQ und Formular über animationsstil_ui token-toggle-asymmetrisch (gleiche Öffnen-Kurve, Schließen schneller). Überschwingen höchstens auf kleinen Icons. prefers-reduced-motion: Reveals auf reine Opazität 200 ms."
 },
 "hero_beschreibung": "Schrift-Hero als Standard: Studio-Name bzw. ein kurzes Wort über die volle Breite (schrift-hero-viewportbreit, Variante basis), darunter ein Satz Haltung. cinematic-video-hero nur mit eigenem Showreel-Material in hoher Qualität (stumm, Poster, Pause-Knopf); sonst startet das Showreel als stumme Vorschau in der Sektion direkt danach. Kein Stockvideo.",
 "muster": {
  "seitenuebergang": [
   "clip-path-reveal-seite",
   "vt-shared-element-morph"
  ],
  "preloader": [
   "intro-ohne-wartezeit",
   "einmal-intro-session"
  ],
  "navigation": [
   "vollbild-overlay-menue-bildvorschau",
   "menue-icon-und-label-morph",
   "hide-on-scroll-header"
  ],
  "hero": [
   "schrift-hero-viewportbreit",
   "cinematic-video-hero"
  ],
  "hero_variante": [],
  "sektionen": [
   {
    "zweck": "Showreel direkt nach dem Hero",
    "muster": [
     "medien-expansion-scroll",
     "eigener-videoplayer"
    ],
    "varianten": {
     "eigener-videoplayer": "showreel"
    }
   },
   {
    "zweck": "Leistungen (3–4 Felder)",
    "muster": [
     "section-overlap-uebergang"
    ]
   },
   {
    "zweck": "Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf)",
    "muster": [
     "logo-wand-social-proof"
    ],
    "varianten": {
     "logo-wand-social-proof": "laufband"
    }
   },
   {
    "zweck": "Ausgewählte Arbeiten",
    "muster": [
     "projektindex-hover-vorschau",
     "case-study-geruest",
     "reading-flow-reihenfolge"
    ],
    "varianten": {
     "reading-flow-reihenfolge": "zeilen"
    }
   },
   {
    "zweck": "Haltung / Warum wir",
    "muster": [
     "scroll-word-highlight"
    ]
   },
   {
    "zweck": "FAQ",
    "muster": [
     "akkordeon-hoehe-auto"
    ],
    "varianten": {
     "akkordeon-hoehe-auto": "basis"
    }
   },
   {
    "zweck": "Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
    "muster": [
     "footer-cta-riesen-wortmarke",
     "kontakt-anfrage-formular",
     "karte-zwei-klick"
    ],
    "varianten": {
     "karte-zwei-klick": "bild"
    }
   }
  ],
  "scroll": [
   "smooth-scroll-lenis",
   "clip-path-bild-reveal",
   "section-overlap-uebergang"
  ],
  "schrift_animation": [
   "split-mask-reveal",
   "text-roll-hover",
   "marquee-laufband"
  ],
  "hover": [
   "magnetische-elemente",
   "bild-zoom-in-maske"
  ],
  "cursor": [
   "kontextueller-cursor"
  ],
  "mikro": [
   "druck-feedback",
   "icon-squash-stretch"
  ],
  "material": [],
  "galerie": [
   "video-vorschau-hover-viewport",
   "drag-slider-traegheit-loop"
  ],
  "footer": [
   "footer-cta-riesen-wortmarke",
   "studio-visitenkarte-footer",
   "kolophon-footer"
  ],
  "button": [
   "pfeil-icon-button",
   "text-roll-hover"
  ],
  "hero_varianten": {
   "schrift-hero-viewportbreit": "basis"
  }
 },
 "signatur": [
  "footer-cta-riesen-wortmarke",
  "text-roll-hover"
 ],
 "varianten_demo": {
  "schrift-hero-viewportbreit": "basis",
  "studio-visitenkarte-footer": "buehne",
  "pfeil-icon-button": "kreis-expand",
  "bild-zoom-in-maske": "basis"
 },
 "nicht_verwenden": [
  "cursor-follower-lerp – Cuberto nutzt einen kontextuellen Cursor mit Icons, keinen nachziehenden Punkt; der Lerp-Follower gilt im Katalog als 2020er-Award-Look",
  "prozent-zaehler – Fake-Ladezeit vor dem Showreel verschlechtert LCP; keine der drei Seiten hat einen",
  "Aurora-/Glow-Hintergrund (Anti-Muster) – liest sich als KI-Template, passt nicht zum Schwarz-Weiß-Kontrast",
  "velocity-skew-verzerrung und webgl-bildverzerrung auf Case-Bildern – verfälscht Kundenarbeit, die verkauft werden soll",
  "Manrope als Textschrift – Cuberto nutzt sie zwar, sie steht aber auf der Claude-Verbotsliste (SaaS-Standard)",
  "Mehr als eine Signalfarbe oder mehrere Easing-Kurven parallel – bricht die Konsequenz, die alle drei Referenzen auszeichnet"
 ],
 "regeln": [
  "h1 mindestens 9vw auf Desktop; nie mehr als 3–4 Wörter pro Zeile; line-height 0.9–0.95, letter-spacing -0.02 bis -0.04em.",
  "Showreel als stumm geloopte Video-Vorschau direkt nach dem Hero (autoplay muted playsinline loop), Ton nur per Klick im Vollbild.",
  "Eine Easing-Kurve, eine Signalfarbe, eine Schriftfamilie in zwei Breiten: Konsequenz statt Vielfalt.",
  "Arbeiten als Index mit Hover-Vorschau auf Desktop; auf Touch immer sichtbare Thumbnails.",
  "Seite endet mit großem Kontakt-CTA als Satz (Cuberto: „Have a product to build or rethink?“, Fantasy: „Let's talk.“) und einer Riesen-Wortmarke.",
  "Cursor zeigt nur Kontext (Pfeil, Play, Schließen), ersetzt nie den System-Cursor auf Formularen und Texten.",
  "Leistungen höchstens 3–4 Felder, jedes mit eigener Vollbild-Sektion statt Icon-Raster.",
  "marquee-laufband höchstens einmal pro Seite und nur mit echtem Inhalt (Kunden, Leistungen), mit Pause-Knopf; nie als reine Deko (wann_nicht: Template-Klischee 2026).",
  "Pflichtangaben und Recht (Leitfaden 8a): Kundenlogos, Arbeiten und Case Studies nur mit Freigabe der Kunden (Nutzungsrecht, ggf. NDA); Showreel-Musik lizenziert; fotorealistische KI-Bilder, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO); Impressum, Datenschutz – vom Kunden prüfen lassen."
 ],
 "template_tauglich": false,
 "template_variante": "Template-Variante (dann template-tauglich, Aufwand mittel): ohne smooth-scroll-lenis, ohne kontextueller-cursor, ohne magnetische-elemente, ohne einmal-intro-session; drag-slider-traegheit-loop durch css-native-karussell ersetzen. Bleiben: Schrift-Hero, Showreel als Video-Vorschau, clip-path-Reveals, text-roll-hover, footer-cta-riesen-wortmarke, eine Kurve, eine Signalfarbe.",
 "aufwand": "hoch",
 "leistung": "Showreel als MP4/WebM unter 4 MB mit Poster-Bild, preload=none unterhalb des Folds (wie Cuberto). Lenis nur auf Desktop mit Feinzeiger, auf Touch nativer Scroll. Split-Text erst nach dem Laden der Webfonts initialisieren (document.fonts.ready), sonst springen die Zeilen. TikTok Sans als Variable-Datei mit Subset Latin, eine Datei für beide Breiten.",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "stimmung_tags": [
  "laut",
  "filmisch",
  "präzise"
 ],
 "raum": {
  "basis_px": 8,
  "skala_px": [
   4,
   6,
   8,
   12,
   16,
   24,
   40,
   56,
   112,
   176
  ],
  "sektion": "clamp(88px, 12vw, 176px)",
  "dichte": "mittel",
  "hinweis": "Werte wie im Starter (starter/kreativstudio-buehne/tokens.css: --abschnitt, --rand, --spalte). Große Sektionssprünge, aber enge Spalten und Label-Zeilen mit 6 px Zeilenabstand."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(16px, 2.6vw, 40px)",
  "spalt": "clamp(12px, 1.6vw, 24px)",
  "max_breite": "none",
  "hinweis": "Volle Breite mit Rand, kein zentrierter Container. Leistungen als eigene Vollbild-Sektionen, Arbeiten als Index; Anfrage 6/6."
 },
 "form": {
  "radius_klein": "4px",
  "radius_gross": "12px",
  "pille": true,
  "linie": "1px Linienfarbe auf Schwarz, als Oberkante von Datenzeilen",
  "schatten": "nur die Hover-Vorschau im Index (Starter: 0 24px 60px -20px rgb(0 0 0 / .6)), sonst keiner",
  "hinweis": "Bilder und Showreel 4 px, Anfrage-Panel 12 px, Knöpfe als Pille (Starter --knopf-radius 999px; pfeil-icon-button, Variante kreis-expand)."
 },
 "bildsprache": {
  "licht": "Hart und kontrastreich, Kundenarbeit in Originalfarbe; Showreel-Stills scharf.",
  "ausschnitt": "Case-Bilder formatfüllend, Details der Arbeit, Plakate und Screens im Anschnitt.",
  "personen": "Team als Porträtreihe im gleichen Licht; kein Teamfoto mit Laptops.",
  "formate": [
   "16:9",
   "4:5",
   "3:2"
  ],
  "nicht": "Keine Mockup-Laptops mit Stock-UI, keine Aurora- oder Glow-Hintergründe, keine verzerrten oder gewellten Case-Bilder, kein Stockvideo."
 },
 "ton": {
  "anrede": "du",
  "saetze": "Sehr kurz, oft ein Satz pro Zeile, drei bis vier Wörter in der Headline. Cases mit Aufgabe, Idee, Ergebnis.",
  "haltung": "Selbstbewusst und präzise, Haltung statt Leistungskatalog.",
  "beispiele": [
   "Wir machen Marken laut.",
   "Hast du etwas, das wir bauen sollen?"
  ],
  "nicht": "„Wir sind Ihr Partner für digitale Lösungen“, „360°“, „ganzheitlich“, „Full-Service“, Buzzword-Ketten."
 },
 "hero_aufbau": {
  "raster": "Wie im Starter: 12 Spalten über die volle Breite; oben eine Label-Zeile (Spalte 1–4, 5–7, 8–9, 10–12), unten rechts ein Satz Haltung, ganz unten die Wortmarke randbündig (schrift-hero-viewportbreit, Variante basis).",
  "bild": "Kein Bild im Hero; das Showreel 16:9 folgt direkt danach als stumme Vorschau. cinematic-video-hero nur mit eigenem Showreel.",
  "h1": "clamp(3.5rem, 10vw, 11rem), mindestens 9vw, TikTok Sans wdth 75 / 800, über die volle Breite, Grundlinie an der Unterkante.",
  "handlung": "Kein CTA-Paar im Hero; „Kontakt“ im Kopf, der große Kontakt-Satz und die Riesen-Wortmarke am Seitenende (footer-cta-riesen-wortmarke).",
  "zusatz": "Label-Zeile in DM Mono 0.75rem Versal (Studio, Disziplin, Ort, Status); Haltungssatz höchstens 22ch."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "cursor-follower-lerp"
   ],
   "grund": "Cuberto nutzt einen kontextuellen Cursor mit Icons, keinen nachziehenden Punkt; der Lerp-Follower gilt im Katalog als 2020er-Award-Look"
  },
  {
   "ids": [
    "prozent-zaehler"
   ],
   "grund": "Fake-Ladezeit vor dem Showreel verschlechtert LCP; keine der drei Seiten hat einen"
  },
  {
   "ids": [],
   "grund": "Aurora-/Glow-Hintergrund (Anti-Muster) – liest sich als KI-Template, passt nicht zum Schwarz-Weiß-Kontrast"
  },
  {
   "ids": [
    "velocity-skew-verzerrung"
   ],
   "grund": "und webgl-bildverzerrung auf Case-Bildern – verfälscht Kundenarbeit, die verkauft werden soll"
  },
  {
   "ids": [],
   "grund": "Manrope als Textschrift – Cuberto nutzt sie zwar, sie steht aber auf der Claude-Verbotsliste (SaaS-Standard)"
  },
  {
   "ids": [],
   "grund": "Mehr als eine Signalfarbe oder mehrere Easing-Kurven parallel – bricht die Konsequenz, die alle drei Referenzen auszeichnet"
  }
 ],
 "starter": "https://cecodesign.de/lab/fundus/starter/kreativstudio-buehne/index.html",
 "alle_muster": [
  {
   "id": "footer-cta-riesen-wortmarke",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/meta.json"
  },
  {
   "id": "text-roll-hover",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/meta.json"
  },
  {
   "id": "schrift-hero-viewportbreit",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=basis"
  },
  {
   "id": "cinematic-video-hero",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
  },
  {
   "id": "medien-expansion-scroll",
   "rolle": "Sektion: Showreel direkt nach dem Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/meta.json"
  },
  {
   "id": "eigener-videoplayer",
   "rolle": "Sektion: Showreel direkt nach dem Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json",
   "variante": "showreel",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=showreel"
  },
  {
   "id": "section-overlap-uebergang",
   "rolle": "Sektion: Leistungen (3–4 Felder)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/meta.json"
  },
  {
   "id": "logo-wand-social-proof",
   "rolle": "Sektion: Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
   "variante": "laufband",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=laufband"
  },
  {
   "id": "projektindex-hover-vorschau",
   "rolle": "Sektion: Ausgewählte Arbeiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json"
  },
  {
   "id": "case-study-geruest",
   "rolle": "Sektion: Ausgewählte Arbeiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/meta.json"
  },
  {
   "id": "reading-flow-reihenfolge",
   "rolle": "Sektion: Ausgewählte Arbeiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/meta.json",
   "variante": "zeilen",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo?v=zeilen"
  },
  {
   "id": "scroll-word-highlight",
   "rolle": "Sektion: Haltung / Warum wir",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/meta.json"
  },
  {
   "id": "akkordeon-hoehe-auto",
   "rolle": "Sektion: FAQ",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "karte-zwei-klick",
   "rolle": "Sektion: Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild"
  },
  {
   "id": "clip-path-reveal-seite",
   "rolle": "Seitenwechsel",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/meta.json"
  },
  {
   "id": "vt-shared-element-morph",
   "rolle": "Seitenwechsel",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/meta.json"
  },
  {
   "id": "intro-ohne-wartezeit",
   "rolle": "Intro",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/meta.json"
  },
  {
   "id": "einmal-intro-session",
   "rolle": "Intro",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/meta.json"
  },
  {
   "id": "vollbild-overlay-menue-bildvorschau",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/meta.json"
  },
  {
   "id": "menue-icon-und-label-morph",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/meta.json"
  },
  {
   "id": "hide-on-scroll-header",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/meta.json"
  },
  {
   "id": "smooth-scroll-lenis",
   "rolle": "Scroll",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/meta.json"
  },
  {
   "id": "clip-path-bild-reveal",
   "rolle": "Scroll",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/meta.json"
  },
  {
   "id": "split-mask-reveal",
   "rolle": "Schrift",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/meta.json"
  },
  {
   "id": "marquee-laufband",
   "rolle": "Schrift",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/meta.json"
  },
  {
   "id": "magnetische-elemente",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/meta.json"
  },
  {
   "id": "bild-zoom-in-maske",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis"
  },
  {
   "id": "kontextueller-cursor",
   "rolle": "Cursor",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/cursor/kontextueller-cursor/meta.json"
  },
  {
   "id": "druck-feedback",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
  },
  {
   "id": "icon-squash-stretch",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/meta.json"
  },
  {
   "id": "video-vorschau-hover-viewport",
   "rolle": "Galerie",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/meta.json"
  },
  {
   "id": "drag-slider-traegheit-loop",
   "rolle": "Galerie",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/drag-slider-traegheit-loop/meta.json"
  },
  {
   "id": "studio-visitenkarte-footer",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
   "variante": "buehne",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=buehne"
  },
  {
   "id": "kolophon-footer",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/meta.json"
  },
  {
   "id": "pfeil-icon-button",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
   "variante": "kreis-expand",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=kreis-expand"
  },
  {
   "id": "token-editorial-langsam",
   "rolle": "Animationsstil",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/meta.json"
  },
  {
   "id": "token-toggle-asymmetrisch",
   "rolle": "Animationsstil für UI",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
  },
  {
   "id": "headline-laufweite-zeilenabstand",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json"
  },
  {
   "id": "fluide-typo-clamp-cqi",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/meta.json"
  },
  {
   "id": "versal-kondensiert-fit-to-width",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/meta.json"
  },
  {
   "id": "mono-labels-versal",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
  }
 ]
}