{
 "schema": "fundus-rezepte/1",
 "stand": "02.11.2026",
 "anleitung": "Für Claude: Zuerst ein Rezept nach branche und stimmung wählen (nie ohne Rezept bauen). bauplan (Text) fasst das Rezept mit Demo-Links zusammen, tokens_css ist der Startpunkt für Schrift, Farbe, Kurven und Dauern; starter ist, wo vorhanden, eine fertige Beispielseite. Dann animationsstil (Muster der Kategorie animationsstile) als CSS-Variablen anlegen, schrift übernehmen (schriften.json; bei Templates nur template_ok), muster.sektionen in dieser Reihenfolge bauen, signatur ist Pflicht, nicht_verwenden ist verbindlich. basis gilt für jedes Rezept. alle_muster nennt jedes Muster mit Rolle, meta.json und, falls festgelegt, der passenden Demo-Variante (variante, demo_url). Muster unter optional nur als Zusatz. Ausführlich: leitfaden.txt.",
 "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)."
 },
 "anzahl": 28,
 "rezepte": [
  {
   "id": "architektur-ruhiges-raster",
   "name": "Architektur: ruhiges Raster",
   "branche": "Architekturbüro / Planungsbüro / Innenarchitektur",
   "stimmung": [
    "ruhig",
    "präzise",
    "zurückhaltend",
    "sachlich"
   ],
   "kurz": "Die Arbeit steht im Vordergrund, die Website tritt zurück: eine Schriftfamilie in einem Schnitt, weiße und hellgraue Flächen, Projektlisten statt Effekte. Bewegung ist kurz und ohne Show, Seitenwechsel laufen über native View Transitions. So arbeiten David Chipperfield, KAAN und Sauerbruch Hutton – kein Award-Feuerwerk.",
   "referenzen": [
    {
     "seite": "David Chipperfield Architects",
     "url": "https://davidchipperfield.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Eigene Schrift per @font-face 'DCA' (400) und 'DCA Monument Grotesk' (800). Bewegungs-Tokens in main-8cc52464.css: --trans-func-default cubic-bezier(.1,.6,.4,1), --trans-func-ease-in-out cubic-bezier(.55,.08,0,1), --trans-func-ease-out cubic-bezier(0,.23,.07,1); Dauern xs .125s, sm .25s, md .5s, lg .75s, xl 1s, xxl 3s; Modals .15s. '@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}'. Schriftgrößen-Stufen 1 / 1.25 / 1.563 / 1.953 / 2.4rem (Faktor 1,25), Laufweite -.012em bis -.02em, Unterstreichung offset .35ex / Stärke 8 %. Farben: Text #231F20, sekundär #76767A, tertiär #C5C7C7, Fläche #FFFFFF. Navigation nur Practice / Projects / People / News / Contact, mobil 'Menu'.",
     "herkunft": "beobachtet",
     "quelle": "https://davidchipperfield.com/dist/assets/main-8cc52464.css"
    },
    {
     "seite": "KAAN Architecten",
     "url": "https://www.kaanarchitecten.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Nur 'Suisse Intl Book' (Gewicht 450) plus Italic per @font-face, Laufweite -.04875rem. Tokens in app-hnm3wrp6.css: --trans-func-default cubic-bezier(.1,.6,.4,1), --trans-func-ease-out cubic-bezier(.1,.9,.3,1), Menü-Öffnen ease-out, Schließen default; Dauern sm .25s, md .5s, lg 1s, xl 2s, Modal rein .3s / raus .2s. '@view-transition{navigation:auto}' plus view-transition-name 'header-main' für den Kopf und eigene Gruppen für die Register-Listen (.35s, Liste blendet mit 'register-list-in' .75s ein). Sticky Header in Versalien, der beim Hochscrollen wiederkommt (.is-scrolled-up). Lesemaß --text-measure 50ch. Flächen #FFFFFF / #E1E3E3 (dim) / #1F2323 (dunkel). Navigation About / Work / Repository, Projekte als h3-Liste, Filterbuttons, Swiper für Bildreihen.",
     "herkunft": "beobachtet",
     "quelle": "https://kaanarchitecten.com/dist/assets/app-hnm3wrp6.css"
    },
    {
     "seite": "sauerbruch hutton",
     "url": "https://www.sauerbruchhutton.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): @font-face 'Spectral' 400/600/700 (Serif) plus Suisse in vier Schnitten (suisse-l 200, -r 400, -m 500, -sb 600). Kurve cubic-bezier(.165,.84,.44,1) (easeOutQuart) neben kurzen .15–.25s ease-Übergängen; jQuery + slick. Projektkarten werden per JS-Template mit 'Titel • Ort • Jahr' beschriftet. Farben Text #5C5C5C auf #FAFAFA.",
     "herkunft": "beobachtet",
     "quelle": "https://www.sauerbruchhutton.de/cache/header-1b034a5.min.css"
    }
   ],
   "schrift": {
    "paarung_basis": "kursiv-akzent-grotesk",
    "abweichung": "Gegenüber der Paarung: ohne Akzent instrument-serif.",
    "headline": "hanken-grotesk",
    "text": "hanken-grotesk",
    "akzent": "",
    "groessen": "Stufen mit Faktor 1,25 wie bei Chipperfield (1 / 1.25 / 1.563 / 1.953 / 2.441 / 3.052rem). h1 clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500 (kein Bold), Laufweite -0.02em; Fließtext 1.0625–1.125rem, wght 400, Laufweite -0.012em, Zeilenhöhe 1.45, max-width 50ch; Bildunterschriften/Meta 0.8rem. Kursiv statt fett für Hervorhebungen (KAAN: Book + Book Italic).",
    "techniken": [
     "eine-familie-wenig-gewichte",
     "fluide-typo-clamp-cqi",
     "lesesatz-text-wrap",
     "text-box-trim"
    ],
    "alternative_eigenprojekt": "Paarung schweizer-editorial (switzer + fragment-mono, ITF) – kommt Suisse Intl am nächsten, aber nicht für IONOS-Templates."
   },
   "farbe": {
    "prinzip": "Achromatisch, die Projektfotos liefern die Farbe. Weiß als Grund, ein kühles Hellgrau für Flächenwechsel, warmes Fast-Schwarz statt #000. Höchstens ein Interaktionston (Fokus/Links).",
    "beispiel": [
     "#FFFFFF Grund",
     "#E1E3E3 Fläche/Filter (KAAN bg-dim)",
     "#231F20 Text (Chipperfield)",
     "#76767A Sekundärtext/Meta",
     "#1F2323 dunkle Sektion/Footer (KAAN bg-dark)",
     "#0022FF Fokus/Interaktion (steht in beiden CSS-Dateien)"
    ]
   },
   "animationsstil": "token-swiss-knackig",
   "bewegung": {
    "easing": "cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig, Eintritt); Austritt cubic-bezier(0.5, 0, 0.75, 0)",
    "beobachtet": "cubic-bezier(0.1, 0.6, 0.4, 1) als Standard, Ausklang cubic-bezier(0.1, 0.9, 0.3, 1) für Öffnen und Einblenden (Chipperfield, KAAN identisch)",
    "dauer_ms": "125 (Farbe/Stroke), 250 (UI, Hover), 500 (Panels), 750–1000 (Bild-Einblendung)",
    "regel": "Eine Kurve für alles aus den Stil-Tokens: Öffnen und Einblenden mit der Eintrittskurve, Schließen mit der Austrittskurve in etwa 70 % der Dauer. Nur Deckkraft und Transform, keine Federn, keine Diagonalen. Unter prefers-reduced-motion: View Transitions aus.",
    "herkunft": "beobachtet (davidchipperfield.com, kaanarchitecten.com)"
   },
   "hero_beschreibung": "Ein Projektbild randlos mit Bürokopf und Titelzeile wie eine Ausgabe (editorial-magazin-layout, Variante cover), Bildunterschrift „Titel • Ort • Jahr“ und Meta-Labels in Textgröße (meta-labels-hud-typografie). Kein Video, kein Slider, aus der Demo kein Lenis. Template: ein starkes Projektfoto mit Büroname und Leistung.",
   "muster": {
    "seitenuebergang": [
     "vt-shared-element-morph"
    ],
    "preloader": [],
    "navigation": [
     "hide-on-scroll-header",
     "menue-icon-und-label-morph"
    ],
    "hero": [
     "editorial-magazin-layout",
     "meta-labels-hud-typografie"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Projekte / Werkverzeichnis",
      "muster": [
       "projektindex-hover-vorschau",
       "flip-zustandswechsel"
      ],
      "varianten": {
       "flip-zustandswechsel": "nativ"
      }
     },
     {
      "zweck": "Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)",
      "muster": [
       "akkordeon-hoehe-auto",
       "listen-hover-bildvorschau"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen"
      }
     },
     {
      "zweck": "Projekt-Detailseite",
      "muster": [
       "case-study-geruest",
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Büro / Team",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster"
      }
     },
     {
      "zweck": "Aktuelles / Auszeichnungen",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "zeitung"
      }
     },
     {
      "zweck": "Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)",
      "muster": [
       "kontakt-anfrage-formular",
       "karte-zwei-klick",
       "oeffnungszeiten-status"
      ],
      "varianten": {
       "oeffnungszeiten-status": "termin",
       "karte-zwei-klick": "bild"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "listen-hover-bildvorschau",
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "akkordeon-hoehe-auto"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild",
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "kolophon-footer"
    ],
    "button": [
     "pfeil-icon-button",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "editorial-magazin-layout": "cover"
    }
   },
   "signatur": [
    "meta-labels-hud-typografie"
   ],
   "varianten_demo": {
    "css-native-karussell": "buehne",
    "galerie-shared-element-vollbild": "basis",
    "studio-visitenkarte-footer": "basis",
    "pfeil-icon-button": "linie",
    "kontur-button-zeichnen": "ecken",
    "akkordeon-hoehe-auto": "leistungen"
   },
   "nicht_verwenden": [
    "smooth-scroll-lenis – Projekttexte und Pläne werden gelesen, Trägheit stört",
    "crosshair-coordinates-cursor – Architektur-Klischee, keine der Referenzen nutzt einen eigenen Cursor",
    "bildstapel-intro / prozent-zaehler – keine Referenz hat einen Preloader, Ladezeit geht vor",
    "webgl-bildverzerrung – verfälscht Architekturfotografie",
    "marquee-laufband – zu laut für die Haltung",
    "blueprint-raster-sichtbar als Deko – nur, wenn das Raster wirklich das Layout trägt"
   ],
   "regeln": [
    "Eine Familie, ein bis zwei Gewichte; Betonung über Kursiv oder Größe, nie über Fett.",
    "Projektbilder in Originalfarbe und unbeschnittenem Seitenverhältnis; Bildunterschrift 'Titel • Ort • Jahr' in Meta-Größe.",
    "Navigation mit höchstens 5 Punkten (Büro, Projekte, Team, Aktuelles, Kontakt); Header sticky, verschwindet beim Runterscrollen.",
    "Projektliste umschaltbar Liste/Raster mit Filter (Typologie, Jahr) – Umschalten per View Transition, nicht per Effekt.",
    "Textspalten höchstens 50ch, großzügiger Weißraum statt Trennlinien.",
    "Alle Übergänge mit einer Kurve aus den Tokens; UI 250 ms, Panels 500 ms; nichts dauert länger als 1 s.",
    "Kontakt als eigene Sektion (kurzes Anfrageformular, Karte per 2-Klick) und zusätzlich als Visitenkarte im Footer: Adresse, Telefon, E-Mail, Kammer-Eintrag.",
    "oeffnungszeiten-status als Terminbetrieb: „Termin nach Vereinbarung · Telefon erreichbar Mo–Fr 9–17 Uhr“ statt „Jetzt geöffnet“ (wann_nicht des Musters).",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Architektenkammer, Berufsbezeichnung und Kammer-Eintrag; Projektfotos nur mit Nutzungsrecht der Fotograf:innen und Zustimmung der Bauherren; Wettbewerbe und Auszeichnungen mit Jahr und Quelle – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Sehr leicht: kein JS-Framework nötig, View Transitions nativ (Fallback harter Wechsel). Bilder als AVIF/WebP mit srcset; Hover-Vorschau in der Projektliste erst ab (hover:hover), mobil zeigt die Liste Vorschaubilder inline.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "ruhig",
    "präzise"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     80,
     128,
     200
    ],
    "sektion": "clamp(96px, 12vw, 200px)",
    "dichte": "luftig",
    "hinweis": "Weißraum statt Trennlinien (Regel). Große Sprünge zwischen Sektionen, kleine Abstände innerhalb einer Projektzeile: Titel, Ort und Jahr stehen 4 bis 8 px auseinander."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 4vw, 64px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "none",
    "hinweis": "Bilder randlos oder über 8 Spalten, Text in Spalte 1 bis 5 und höchstens 50ch. Projektliste als Liste oder Raster umschaltbar (3 Spalten Desktop, 1 mobil)."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #E1E3E3, nur in Projektlisten und Filtern",
    "schatten": "keiner",
    "hinweis": "Keine Pille: Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Nebenaktion als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken)."
   },
   "bildsprache": {
    "licht": "Natürliches Tageslicht, Architekturfotografie in Originalfarbe, stürzende Linien korrigiert.",
    "ausschnitt": "Unbeschnitten im Original-Seitenverhältnis (Regel); Totale des Baus, dazu Details von Material und Fuge.",
    "personen": "Selten, höchstens klein als Maßstab im Raum, nie als Motiv.",
    "formate": [
     "3:2",
     "4:5",
     "Original"
    ],
    "nicht": "Keine Renderings mit Lichtreflexen, keine Stockbilder, kein Zuschnitt auf ein einheitliches Kachelformat, keine Filter oder Duotone."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz und sachlich, Substantive tragen. Projekte als „Titel • Ort • Jahr“, Beschreibungen in drei bis fünf Sätzen.",
    "haltung": "Die Arbeit spricht, die Website tritt zurück. Keine Superlative, keine Selbstbeschreibung.",
    "beispiele": [
     "Wohnen am Kanal. Umbau eines Speichers, 2024.",
     "Wir planen Schulen, Wohnhäuser und Räume für Kultur."
    ],
    "nicht": "„Wir leben Architektur“, „innovative Lösungen“, „visionär“, „ganzheitlich“, Ausrufezeichen."
   },
   "hero_aufbau": {
    "raster": "Bürokopf als Zeile oben wie der Titel einer Ausgabe, darunter ein Bild randlos über die volle Breite (editorial-magazin-layout, Variante cover).",
    "bild": "Ein Projektfoto, randlos, 3:2 oder Originalformat; kein Slider, kein Video.",
    "h1": "clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500, unten links über Spalte 1 bis 6, unter dem Bild statt darauf.",
    "handlung": "Kein CTA-Paar. „Projekte“ als Textlink mit Pfeil unter der Titelzeile, „Kontakt“ im Kopf.",
    "zusatz": "Bildunterschrift „Titel • Ort • Jahr“ in 0.8rem, Meta-Labels in Textgröße (meta-labels-hud-typografie)."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/architektur-ruhiges-raster/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/architektur-ruhiges-raster/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/architektur-ruhiges-raster/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/architektur-ruhiges-raster/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Projekttexte und Pläne werden gelesen, Trägheit stört"
    },
    {
     "ids": [
      "crosshair-coordinates-cursor"
     ],
     "grund": "Architektur-Klischee, keine der Referenzen nutzt einen eigenen Cursor"
    },
    {
     "ids": [
      "bildstapel-intro",
      "prozent-zaehler"
     ],
     "grund": "keine Referenz hat einen Preloader, Ladezeit geht vor"
    },
    {
     "ids": [
      "webgl-bildverzerrung"
     ],
     "grund": "verfälscht Architekturfotografie"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "zu laut für die Haltung"
    },
    {
     "ids": [
      "blueprint-raster-sichtbar"
     ],
     "grund": "als Deko – nur, wenn das Raster wirklich das Layout trägt"
    }
   ],
   "alle_muster": [
    {
     "id": "meta-labels-hud-typografie",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "cover",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover",
     "varianten_je_rolle": [
      {
       "rolle": "Hero",
       "variante": "cover",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover"
      },
      {
       "rolle": "Sektion: Projekt-Detailseite",
       "variante": "magazin",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
      },
      {
       "rolle": "Sektion: Aktuelles / Auszeichnungen",
       "variante": "zeitung",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
      }
     ]
    },
    {
     "id": "projektindex-hover-vorschau",
     "rolle": "Sektion: Projekte / Werkverzeichnis",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json"
    },
    {
     "id": "flip-zustandswechsel",
     "rolle": "Sektion: Projekte / Werkverzeichnis",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/meta.json",
     "variante": "nativ",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "leistungen",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
    },
    {
     "id": "listen-hover-bildvorschau",
     "rolle": "Sektion: Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/meta.json"
    },
    {
     "id": "case-study-geruest",
     "rolle": "Sektion: Projekt-Detailseite",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/meta.json"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Büro / Team",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)",
     "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": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "vt-shared-element-morph",
     "rolle": "Seitenwechsel",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-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": "menue-icon-und-label-morph",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/meta.json"
    },
    {
     "id": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis"
    },
    {
     "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": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "ecken",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken"
    },
    {
     "id": "token-swiss-knackig",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/meta.json"
    },
    {
     "id": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "text-box-trim",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
    }
   ]
  },
  {
   "id": "handwerk-werkstatt-klartext",
   "name": "Handwerk: Werkstatt und Klartext",
   "branche": "Handwerksbetrieb (Tischlerei/Schreinerei, Elektro, Sanitär/Heizung, Maler)",
   "stimmung": [
    "bodenständig",
    "vertrauenswürdig",
    "materialnah",
    "direkt"
   ],
   "kurz": "Echte Fotos aus Werkstatt und Baustelle, erdige Materialfarben und ein einziger Signalton für 'Anfragen' oder 'Anrufen'. Leistungen, Referenzen und Ablauf stehen klar gegliedert, Telefon und Anfrage sind auf jeder Seite zu erreichen. Bewegung ist knapp und funktional wie in einer Produkt-UI, nicht inszeniert.",
   "referenzen": [
    {
     "seite": "Holzrausch (Schreinerei/Innenausbau, München)",
     "url": "https://www.holzrausch.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Nuxt + Tailwind, GSAP 3.11.5 mit ScrollTrigger. @font-face 'ABCRepro' 300/400 (Grotesk) und 'ABCArizonaText' 300/400. Tailwind-Theme im Bundle: Farben blau #97a2bc, ocker #dfd6d0, hellblau #efedea, grün #bdc1a9, braun #c3b4a5, cement #d3cdc2, orange #fb6100; Schriftgrößen sm .8125rem/Zeilenhöhe .9375rem, md 1.25rem/1.2, lg 3rem/Laufweite -0.01em/Zeilenhöhe 1. Eigene Cursor-Bilder plus/left/right für die Lightbox. Komponenten LayoutIntro, LayoutLightbox, LayoutInquire (Anfrage) und AnimationsScrollIntoView; Startseite als Masonry mit wechselnd eingerückten Artikeln. Tailwind-Übergänge .15s cubic-bezier(.4,0,.2,1).",
     "herkunft": "beobachtet",
     "quelle": "https://www.holzrausch.de/_nuxt/ (Theme-Konfiguration im Modern-Bundle)"
    },
    {
     "seite": "deVOL Kitchens (Möbel-/Küchentischlerei, UK)",
     "url": "https://www.devolkitchens.co.uk/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Shopify (Dawn-Basis). @font-face 'EB Garamond' 400/500/700 und 'gill-sans-nova' 300–700 über Typekit. Übergänge über var(--duration-short) ease; Versal-Labels mit .1rem Laufweite. Navigation nach Produktlinien, jede mit 'Projects' und 'Catalogue', dazu 'Catalogue & Price List' als eigener Hauptpunkt. Startseite reiht Projektgeschichten ('The Primrose Hill Kitchen', 'The Black Kitchen, Bath').",
     "herkunft": "beobachtet",
     "quelle": "https://www.devolkitchens.co.uk/cdn/shop/t/138/assets/base.css"
    },
    {
     "seite": "thermondo (Heizungsbau/Wärmepumpe)",
     "url": "https://www.thermondo.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Nuxt + Tailwind mit Container Queries (.content-section @container). @font-face 'Mont' 700/900 (Headlines), 'Open Sans Variable' 300–800 (Text). Tokens in entry.DZRC-CXB.css: --ease-sys-standard cubic-bezier(.2,0,0,1), --ease-sys-decelerate cubic-bezier(.05,.7,.1,1), --ease-sys-accelerate cubic-bezier(.4,0,1,1); Dauern fast .15s, moderate .2s, slow .28s, slower .4s. Primär-CTA #f60439, Hover #d10000, Text #1a1a1a/#333. Mega-Menü mit Kurzbeschreibung je Leistung ('Effizient heizen mit Wärme aus der Außenluft.'). Sektionen u. a. 'Das sagen unsere Kund*innen' und 'Wärmepumpe ab 8.700 € nach Förderung' (Ab-Preis offen genannt).",
     "herkunft": "beobachtet",
     "quelle": "https://www.thermondo.de/_nuxt/entry.DZRC-CXB.css"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Ausgang war barrierearm (schibsted-grotesk + atkinson-hyperlegible-next). Headline special-gothic (amerikanische Gothic mit wdth-Achse, Condensed One für Gewerk-Labels), damit sich handwerk von kultur unterscheidet; eb-garamond als dritte Schrift gestrichen.",
    "headline": "special-gothic",
    "text": "atkinson-hyperlegible-next",
    "akzent": "",
    "groessen": "h1 clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic wght 700, wdth 100, Laufweite -0.01em, Zeilenhöhe 1.05 (Holzrausch lg: 3rem / -0.01em / 1); h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); Gewerk-Labels und Zahlenleiste in Special Gothic Condensed One (bzw. wdth 75), 0.8125rem Versal, +0.04em; Fließtext Atkinson Hyperlegible Next mind. 1.0625rem (17px), Zeilenhöhe 1.55; Meta 0.8125rem.",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "tabellenziffern",
     "lesesatz-text-wrap"
    ],
    "alternative_eigenprojekt": "Premium-Tischlerei als Eigenprojekt: Headline zodiak oder erode, Text satoshi (ITF) – näher an Holzrausch/deVOL, aber nicht für Templates. Tischlerei-Variante (template-tauglich): eb-garamond als dritte Stimme nur für Projekt-Titel und Kundenzitate, wie bei deVOL."
   },
   "farbe": {
    "prinzip": "Materialfarben als Flächen (Zement, Holz, Salbei), dunkle Schrift, und genau ein kräftiger Signalton, der nur für Anfrage- und Anruf-Buttons gilt. Kein Firmenblau-Verlauf.",
    "beispiel": [
     "#EFEDEA Grund (Holzrausch hellblau)",
     "#D3CDC2 Karten/Flächen (cement)",
     "#C3B4A5 Holzton für Akzentflächen (braun)",
     "#BDC1A9 Sekundärfläche (grün)",
     "#1A1A1A Text",
     "#FB6100 Signal: Anfrage/Anruf (Holzrausch orange; bei SHK z. B. Rot wie thermondo #F60439)"
    ]
   },
   "animationsstil": "token-tech-praezise",
   "bewegung": {
    "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9)",
    "beobachtet": "cubic-bezier(0.4, 0, 0.2, 1) mit .15s (Holzrausch 15×), Schließen cubic-bezier(0.4, 0, 1, 1); Dauer-Tokens .15–.4s (thermondo)",
    "dauer_ms": "150 (Hover, Farbe), 200–280 (Menüs, Akkordeon), 400 (Bild-Einblendung)",
    "regel": "Bewegung erklärt nur Zustände: Menü auf, Akkordeon auf, Formular gesendet. Einblendungen beim Scrollen höchstens 8 px Versatz plus Deckkraft. Schließen schneller als Öffnen (Austrittskurve des Stils).",
    "herkunft": "beobachtet (Holzrausch 15× cubic-bezier(.4,0,.2,1) .15s; thermondo Dauer-Tokens .15–.4s)"
   },
   "hero_beschreibung": "Echtes Foto (Team, Werkstatt, fertiges Projekt) + ein Satz Leistung + Region + zwei CTAs (Anfrage, Telefon). Kein Effekt-Muster; die Zahlen stehen in einer eigenen Sektion direkt darunter.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns",
     "mobile-bottom-navigation"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte)",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "typo"
      }
     },
     {
      "zweck": "Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)",
      "muster": [
       "bild-zoom-in-maske",
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "bild-zoom-in-maske": "basis",
       "leistungsseite-antwort-zuerst": "handwerk"
      }
     },
     {
      "zweck": "Referenzen / Projekte",
      "muster": [
       "masonry-grid-lanes-galerie",
       "vorher-nachher-vergleichsregler"
      ]
     },
     {
      "zweck": "So läuft ein Auftrag ab",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)",
      "muster": [
       "testimonials-neu-gedacht",
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "zitat",
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Zertifikate / Innung / Herstellerpartner",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "siegel-nachweis"
      }
     },
     {
      "zweck": "Team / Ausbildung / Karriere",
      "muster": [
       "team-ueber-mich-layout",
       "stellen-karriere"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster",
       "stellen-karriere": "wenige"
      }
     },
     {
      "zweck": "Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)",
      "muster": [
       "kostenrechner-konfigurator",
       "finanzierung-pflichtangaben"
      ],
      "varianten": {
       "kostenrechner-konfigurator": "bad",
       "finanzierung-pflichtangaben": "rechner"
      }
     },
     {
      "zweck": "FAQ (Kosten, Förderung, Termine)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion",
       "datei-upload-ablage"
      ],
      "varianten": {
       "mehrschritt-anfrage": "plz",
       "formular-fehlerzusammenfassung": "liste",
       "datei-upload-ablage": "foto"
      }
     },
     {
      "zweck": "Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "karte",
       "karte-zwei-klick": "bild"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "druck-feedback"
    ],
    "material": [],
    "galerie": [
     "masonry-grid-lanes-galerie",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "fuellung-vom-eintrittspunkt",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "vorher-nachher-vergleichsregler"
   ],
   "optional": [
    "agentenformular-webmcp"
   ],
   "varianten_demo": {
    "agentenformular-webmcp": "projekt",
    "galerie-shared-element-vollbild": "basis",
    "studio-visitenkarte-footer": "praxis",
    "fuellung-vom-eintrittspunkt": "basis",
    "mobile-bottom-navigation": "kontakt",
    "bild-zoom-in-maske": "basis",
    "kontur-button-zeichnen": "ecken"
   },
   "nicht_verwenden": [
    "hide-on-scroll-header – Telefon und Anfrage müssen immer sichtbar bleiben",
    "smooth-scroll-lenis – verzögert, bringt hier nichts",
    "kreistext-siegel-rotierend – 'Meisterbetrieb'-Siegel ist Template-Klischee; Meisterbrief lieber als echtes Foto oder Logo",
    "papier-druck-textur – Holz- oder Papier-Fake-Texturen wirken billig, echte Fotos zeigen das Material",
    "magnetische-elemente / cursor-follower-lerp – Agentur-Gesten, die zu einem Betrieb nicht passen",
    "scramble-decode – technisch-kalt, gegen die Branche"
   ],
   "regeln": [
    "Hero = echtes Foto (Team, Werkstatt, fertiges Projekt) + ein Satz Leistung + Region + zwei CTAs (Anfrage, Telefon). Die Zahlenleiste (seit 19xx, Projekte, Mitarbeitende) ist eine eigene Sektion direkt darunter, nur mit echten Werten.",
    "Telefonnummer als tel:-Link im Header und mobil in einer unteren Leiste (Anrufen / Anfrage / WhatsApp).",
    "Leistungen mit kurzer Beschreibung je Punkt (wie thermondos Mega-Menü), bei mehr als 5 Leistungen eigene Unterseiten.",
    "Wenn möglich Ab-Preise oder Förderhinweise offen nennen (thermondo: 'ab 8.700 € nach Förderung').",
    "Referenzen als Masonry mit Ort und Gewerk, Renovierung als Vorher/Nachher-Regler mit deckungsgleichen Fotos.",
    "Anfrageformular kurz: Leistung (Auswahl), PLZ, Wunschzeitraum, Foto-Upload optional; Validierung erst nach dem Verlassen eines Feldes.",
    "Ein Signalton nur für Handlungen; alle anderen Farben aus dem Material.",
    "Footer mit Öffnungszeiten, Notdienst (falls vorhanden), Einzugsgebiet und Handwerkskammer-Eintrag.",
    "agentenformular-webmcp nur als Zusatz (optional, Priorität F): Die Anfrage funktioniert vollständig als normales Formular.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer, Eintragung in die Handwerksrolle und ggf. Meistertitel; Preise und Ab-Preise inkl. MwSt.; Förderhinweise nur aktuell und mit Stand; Google-Bewertungen nur mit Echtheitshinweis direkt daneben (OLG Frankfurt 19.05.2026); keine pauschalen Umweltaussagen wie „klimaneutral“ ohne Nachweis (UWG seit 27.09.2026); Foto-Upload mit Datenschutzhinweis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Leicht, weil kaum JS: native Popover, CSS-Reveals, Masonry über CSS Grid (grid-lanes mit Fallback). Größter Posten sind die Fotos – AVIF/WebP, loading=lazy ab der zweiten Bildreihe. Die untere Mobilleiste darf weder Consent-Banner noch Chat-Widget verdecken.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Solar, Wärmepumpe, Energieberatung",
     "hinweis": "Schrift, Farbe, Stil und Signatur bleiben; vorher-nachher-vergleichsregler zeigt Heizungsraum oder Dach vor und nach der Montage mit deckungsgleichen Fotos. kostenrechner-konfigurator geprüft: Die Demo-Varianten bad und dach passen nicht zu PV oder Wärmepumpe. Aufbau der Variante dach übernehmen (Fläche, Abhängigkeiten, Zähler); Eingaben für PV Dachfläche, Ausrichtung, Neigung und Jahresverbrauch, für die Wärmepumpe Wohnfläche, Baujahr, heutige Heizung und Heizkörper oder Fußbodenheizung. Formeln und Spannen nur aus eigenen Erfahrungswerten des Betriebs, Ergebnis immer als Spanne mit Annahmen und Stand-Datum, Übergabe an die Anfrage ohne Kontaktpflicht vor dem Ergebnis; ohne belastbare Werte nur Ab-Preise und Beispielprojekte (wann_nicht). produktfinder-quiz geprüft: Variante schritte („Welche Lösung passt zu meinem Haus?“) nur mit Fachperson dahinter und nie als Hürde vor der Anfrage; bei weniger als fünf Lösungen (z. B. Luft-Wasser, Sole-Wasser, Hybrid) statt Quiz vergleichstabelle-sticky, Variante alternativen (Textwerte statt Häkchen). Anfrage wie im Rezept mit mehrschritt-anfrage, Variante plz, dazu Foto-Upload von Zählerschrank, Heizung oder Dach. Energieberater:innen mit team-ueber-mich-layout. Recht: Förderprogramme nur mit Stand-Datum, Link zur Quelle und ohne Zusage (z. B. KfW-Heizungsförderung 458: Zuschuss 30 bis 80 %, Antrag vor Vorhabenbeginn und nach Vertrag mit einem Fachunternehmen; BAFA-Förderung der Energieberatung für Wohngebäude); Nullsteuersatz für bestimmte PV-Anlagen (§ 12 Abs. 3 UStG) nur als Hinweis mit Verweis auf die Steuerberatung; keine pauschalen Umweltaussagen wie „klimaneutral heizen“ ohne Nachweis (seit 27.09.2026); Ertrags- und Einsparprognosen als Spanne mit Annahmen, nie als Garantie; Energieberatung für Förderprogramme nur mit nachweisbarer Listung in der Energieeffizienz-Expertenliste; Handwerkskammer und Meistertitel im Impressum – vom Kunden prüfen lassen.",
     "sektionen": [
      "Was bringt das bei mir? (Rechner für PV oder Wärmepumpe, Ergebnis als Spanne mit Annahmen, Übergabe an die Anfrage)",
      "Welche Lösung passt? (wenige Fragen zu Haus und Ziel; bei weniger als fünf Lösungen eine Vergleichstabelle)",
      "Förderung und Steuern (Programme mit Stand-Datum und Quelle; Antrag vor Auftrag; wer den Antrag stellt)",
      "So läuft es ab (Vor-Ort-Termin, Planung und Angebot, Förderantrag, Montage, Inbetriebnahme, Anmeldung beim Netzbetreiber, Wartung)",
      "Referenzen (Ort, Anlage, kWp bzw. Heizlast, Baujahr; Mess- oder Ertragswerte nur mit Zeitraum)",
      "Energieberatung (wer berät, Qualifikation, Ablauf, Kosten und Zuschuss)",
      "Leistungen (je Technik eine Unterseite, Antwort zuerst)",
      "FAQ (Lautstärke, Platzbedarf, Speicher, Notstrom, Wartung, Förderung)",
      "Anfrage (PLZ zuerst, Objekt, Ziel, Fotos)",
      "Kontakt / Anfahrt / Einzugsgebiet"
     ],
     "weglassen": [
      "Kostenrechner für Bad oder Dachdämmung (durch den Rechner für PV bzw. Wärmepumpe ersetzt)",
      "Zertifikate als Logo-Wand ohne Bezug (nur echte Herstellerpartner, Qualifikationen und Listungen)"
     ],
     "muster_zusatz": [
      "produktfinder-quiz",
      "vergleichstabelle-sticky"
     ]
    }
   ],
   "stimmung_tags": [
    "warm",
    "präzise"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     40,
     56,
     80,
     120
    ],
    "sektion": "clamp(64px, 8vw, 120px)",
    "dichte": "mittel",
    "hinweis": "Klar gegliedert, nicht gedrängt: Leistungen als Liste mit 24 px zwischen den Punkten, Zahlenleiste mit 32 px Innenabstand. Mobil eine Leiste unten, darüber 80 px Freiraum am Seitenende."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(16px, 2.4vw, 32px)",
    "max_breite": "1280px",
    "hinweis": "Hero asymmetrisch 5/7 (Text links, Foto rechts). Leistungen als Liste mit kurzer Beschreibung, keine Icon-Kacheln. Referenzen als Masonry mit 3 Spalten, mobil 1."
   },
   "form": {
    "radius_klein": "4px",
    "radius_gross": "8px",
    "pille": false,
    "linie": "1px #D3CDC2 (Zement) zwischen Leistungen und um Formularfelder",
    "schatten": "keiner",
    "hinweis": "Flächen trennen sich über die Materialtöne (Zement, Holz, Salbei), nicht über Schatten. Der Signalton #FB6100 ist nur Fläche der Anfrage- und Anruf-Knöpfe."
   },
   "bildsprache": {
    "licht": "Echtes Licht in Werkstatt und auf der Baustelle, auch Arbeitslicht; nicht nachgeschärft, nicht gefiltert.",
    "ausschnitt": "Hände am Werkstück, Material im Anschnitt, fertiger Raum in der Totale. Vorher und Nachher deckungsgleich aus derselben Position.",
    "personen": "Ja: das eigene Team bei der Arbeit, mit Einwilligung, Gesicht erlaubt.",
    "formate": [
     "3:2",
     "4:5",
     "1:1"
    ],
    "nicht": "Keine Stock-Handwerker mit Helm und Daumen hoch, keine Holz- oder Papier-Fake-Texturen, keine Renderings statt echter Projekte, kein „Meisterbetrieb“-Siegel als Deko."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz und konkret: Leistung, Ort, Zahl, nächster Schritt. Ein Satz pro Leistung, Ab-Preise offen.",
    "haltung": "Direkt wie am Telefon, bodenständig, ohne Werbesprech.",
    "beispiele": [
     "Küchen und Einbaumöbel aus eigener Werkstatt in [Ort].",
     "Rufen Sie an. Wir kommen zum Aufmaß."
    ],
    "nicht": "„Ihr kompetenter Partner rund ums Haus“, „Qualität, die überzeugt“, „Wir sind Ihr Partner für …“, „klimaneutral“ ohne Nachweis."
   },
   "hero_aufbau": {
    "raster": "12 Spalten, Text über Spalte 1 bis 5, Foto über 6 bis 12 bis an den rechten Rand; mobil Foto oben, Text darunter.",
    "bild": "Echtes Foto (Team, Werkstatt oder fertiges Projekt), 3:2 Desktop, 4:5 mobil.",
    "h1": "clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic 700, oben im Textblock links.",
    "handlung": "„Anfrage stellen“ (gefüllt, #FB6100) und „Anrufen“ als tel:-Link mit sichtbarer Nummer, nebeneinander unter dem Leistungssatz.",
    "zusatz": "Region als eigene Zeile unter der H1; die Zahlenleiste ist eine eigene Sektion direkt darunter; mobil untere Leiste Anrufen / Anfrage / WhatsApp."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "hide-on-scroll-header"
     ],
     "grund": "Telefon und Anfrage müssen immer sichtbar bleiben"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "verzögert, bringt hier nichts"
    },
    {
     "ids": [
      "kreistext-siegel-rotierend"
     ],
     "grund": "'Meisterbetrieb'-Siegel ist Template-Klischee; Meisterbrief lieber als echtes Foto oder Logo"
    },
    {
     "ids": [
      "papier-druck-textur"
     ],
     "grund": "Holz- oder Papier-Fake-Texturen wirken billig, echte Fotos zeigen das Material"
    },
    {
     "ids": [
      "magnetische-elemente",
      "cursor-follower-lerp"
     ],
     "grund": "Agentur-Gesten, die zu einem Betrieb nicht passen"
    },
    {
     "ids": [
      "scramble-decode"
     ],
     "grund": "technisch-kalt, gegen die Branche"
    }
   ],
   "starter": "https://cecodesign.de/lab/fundus/starter/handwerk-werkstatt-klartext/index.html",
   "alle_muster": [
    {
     "id": "vorher-nachher-vergleichsregler",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "typo",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=typo"
    },
    {
     "id": "bild-zoom-in-maske",
     "rolle": "Sektion: Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)",
     "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": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: FAQ (Kosten, Förderung, Termine)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "handwerk",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk"
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Referenzen / Projekte",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So läuft ein Auftrag ab",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "zitat",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Zertifikate / Innung / Herstellerpartner",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "siegel-nachweis",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Team / Ausbildung / Karriere",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Team / Ausbildung / Karriere",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "wenige",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige"
    },
    {
     "id": "kostenrechner-konfigurator",
     "rolle": "Sektion: Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/meta.json",
     "variante": "bad",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad"
    },
    {
     "id": "finanzierung-pflichtangaben",
     "rolle": "Sektion: Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/meta.json",
     "variante": "rechner",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=rechner"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "plz",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "datei-upload-ablage",
     "rolle": "Sektion: Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/meta.json",
     "variante": "foto",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=foto"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)",
     "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": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "kontakt",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "ecken",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken"
    },
    {
     "id": "token-tech-praezise",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "agentenformular-webmcp",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/meta.json",
     "variante": "projekt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt"
    }
   ]
  },
  {
   "id": "fahrschule-freundlich-buchbar",
   "name": "Fahrschule: freundlich und buchbar",
   "branche": "Fahrschule / lokaler Dienstleister mit Online-Buchung (auch Nachhilfe, Kurse)",
   "stimmung": [
    "freundlich",
    "ermutigend",
    "klar",
    "lokal"
   ],
   "kurz": "Nimmt die Angst und führt direkt zur Anmeldung: große, freundliche Headline, eine Klassen- oder Kurswahl als Einstieg, transparente Preise und ein klarer Ablauf in Schritten. Etwas Federung bei Buttons und eine gezeichnete Straße bringen Leben rein, Formulare bleiben aber nüchtern und zugänglich.",
   "referenzen": [
    {
     "seite": "TOFU Driving (London)",
     "url": "https://www.tofudriving.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Astro 7.0.6, CSS inline. @font-face 'Fraunces Variable' und 'Hanken Grotesk Variable' (beide 100–900). h1 clamp(3.1rem,9vw,8.5rem), h2 clamp(2.5rem,6.5vw,6rem). Buttons: transform .35s cubic-bezier(.34,1.56,.64,1) (Überschwinger) plus box-shadow, Karten .45s mit derselben Kurve; Einblendungen opacity/transform .8s cubic-bezier(.16,1,.3,1). @keyframes marquee, float, twinkle, road-draw, road-fade (gezeichnete Straße); ein schräges Band (-rotate-2, scale 1.02). Farb-Tokens cream #f8f8ec, cream-deep #eef0d8, navy #142b50, night #0e1d38, sky #3fbadf, plate #ffd60a (Kennzeichen-Gelb), ink #17243c, muted #566175. Navigation Lessons (Automatik, Schaltung, Intensiv, Auffrischung, Theorie) / Learn / Become an Instructor; alle CTAs auf /contact#book. Sektionen 'They did it. You're next.' und 'Start with a first lesson.'; prefers-reduced-motion 8× berücksichtigt.",
     "herkunft": "beobachtet",
     "quelle": "https://www.tofudriving.com/ (Inline-CSS)"
    },
    {
     "seite": "Coastline Academy (USA)",
     "url": "https://www.coastlineacademy.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Next.js + MUI. @font-face 'Poppins' 300/400/600/700. MUI-Kurve cubic-bezier(0.4,0,0.2,1) 225×, Dauern 150–300 ms. Farb-Tokens primary #1e2631, secondary #0bd1c2, highlight #9ef62e / #ff70a6. Sektionenfolge: 'Find a Coastline Location Near You' (Standortsuche), 'What our customers say', 'Steps to Getting Your License', '250,000 Students', Sicherheit ('Marked cars with a second brake', 'Dashcam in every car').",
     "herkunft": "beobachtet",
     "quelle": "https://www.coastlineacademy.com/_next/static/immutable/chunks/0eh7irq0aq217.css"
    },
    {
     "seite": "Kruzee (Kanada/USA)",
     "url": "https://www.kruzee.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): WordPress/Elementor 4.2.4. Google Fonts 'Bricolage Grotesque' (opsz 12–96, wght 200–800) und 'Inter'. Gelb #ffce31 (80×) als Hauptakzent, Lottie im Einsatz. Einstieg über einen Dialog 'Welcome to Kruzee! Where are you visiting us from?' (Standortwahl) und danach 'What would you like to do?'. Navigation Services (10 Hour Package, Driving Lessons, Online-Kurs) / Cities / For Parents / About / Contact.",
     "herkunft": "beobachtet",
     "quelle": "https://www.kruzee.com/ (HTML-Kopf, Google-Fonts-Link)"
    }
   ],
   "schrift": {
    "paarung_basis": "grundschrift-familie",
    "abweichung": "Gegenüber der Paarung: ohne Akzent playwrite-de-grund.",
    "headline": "bricolage-grotesque",
    "text": "atkinson-hyperlegible-next",
    "akzent": "",
    "groessen": "h1 clamp(2.5rem, 1rem + 6.5vw, 6rem), wght 700, opsz 96, Laufweite -0.02em, Zeilenhöhe 0.98, hyphens:auto (deutsche Komposita wie 'Führerscheinausbildung' sind länger als TOFUs englische Zeilen, deshalb Obergrenze 6rem statt 8.5rem); h2 clamp(2rem, 1rem + 4vw, 4rem); Fließtext 1.125rem, Zeilenhöhe 1.6; Preise mit tabellarischen Ziffern.",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "tabellenziffern",
     "headline-laufweite-zeilenabstand"
    ],
    "alternative_eigenprojekt": "Nicht nötig – alles frei. Variante näher an TOFU: Paarung soft-serif-warm (fraunces + hanken-grotesk), ebenfalls template-tauglich."
   },
   "farbe": {
    "prinzip": "Helle, warme Grundfläche, dunkles Navy für Vertrauen und Text, ein Himmelblau als Sekundärton und Kennzeichen-Gelb als Fläche für Hervorhebungen (nie Gelb als Textfarbe auf Hell).",
    "beispiel": [
     "#F8F8EC Grund (TOFU cream)",
     "#EEF0D8 Sektionswechsel",
     "#142B50 Text/Navy, Footer",
     "#3FBADF Sekundär, Links auf Dunkel",
     "#FFD60A Hervorhebung als Fläche (Kennzeichen-Gelb)",
     "#566175 gedämpfter Text"
    ]
   },
   "animationsstil": "token-federnd-verspielt",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.34, 1.56, 0.64, 1) (token-federnd-verspielt, nur Transform kleiner Elemente)",
    "beobachtet": "cubic-bezier(0.34, 1.56, 0.64, 1) für Buttons und Karten, Einblendungen cubic-bezier(0.16, 1, 0.3, 1), Formulare cubic-bezier(0.4, 0, 0.2, 1) 150–200 ms (tofudriving Inline-CSS, MUI-Standard bei Coastline)",
    "dauer_ms": "350–450 (Buttons, Karten-Hover), 800 (Einblendungen mit cubic-bezier(0.16, 1, 0.3, 1))",
    "regel": "Federung nur für Transform kleiner Elemente (Buttons, Karten, Badges), nie auf Deckkraft oder großen Flächen. Einblendungen mit der Expo-Out-Kurve des UI-Stils ohne Überschwingen. Formulare und Buchungsschritte ohne Federung (150–200 ms, animationsstil_ui token-toggle-asymmetrisch).",
    "herkunft": "beobachtet (tofudriving.com Inline-CSS; MUI-Standard bei Coastline)"
   },
   "hero_beschreibung": "Klassenwahl statt Prompt: ein Satz Ort + Angebot + nächster Schritt, darunter eine echte Auswahl (Klasse B/B197/A/BE + Standort, animiertes-select), die zu Preis und freien Terminen führt. Kein Fake-Eingabefeld.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns",
     "mobile-bottom-navigation"
    ],
    "hero": [
     "animiertes-select"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)",
      "muster": [
       "vergleichstabelle-sticky",
       "preis-section-editorial",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "vergleichstabelle-sticky": "pakete",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "mehrschritt-anfrage": "leiste",
       "formular-fehlerzusammenfassung": "liste"
      }
     },
     {
      "zweck": "In 5 Schritten zum Führerschein (die Straße zeichnet sich als einzige Linie; prozess-timeline-wachsende-linie liefert nur das Raster, ohne eigene Linie)",
      "muster": [
       "prozess-timeline-wachsende-linie",
       "svg-pfad-zeichnen-scroll"
      ],
      "varianten": {
       "svg-pfad-zeichnen-scroll": "strasse"
      }
     },
     {
      "zweck": "Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)",
      "muster": [
       "testimonials-neu-gedacht",
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "wand",
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Fahrlehrer:innen & Fahrzeuge",
      "muster": [
       "team-ueber-mich-layout",
       "css-native-karussell"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement",
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)",
      "muster": [
       "wochen-kursplan",
       "programm-kalender",
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "wochen-kursplan": "studio",
       "programm-kalender": "programm",
       "akkordeon-hoehe-auto": "basis"
      }
     },
     {
      "zweck": "FAQ (Kosten, Dauer, Sprachen, Intensivkurs)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [
     "svg-pfad-zeichnen-scroll"
    ],
    "schrift_animation": [
     "highlight-marker-underline",
     "marquee-laufband"
    ],
    "hover": [],
    "cursor": [],
    "mikro": [
     "fortschrittsring",
     "animiertes-select"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "tiefen-taste-3d",
     "button-zustaende"
    ]
   },
   "signatur": [
    "svg-pfad-zeichnen-scroll"
   ],
   "nicht_verwenden": [
    "interaktives-3d-hero – ein 3D-Auto ist Deko ohne Nutzen und teuer auf Handys der Zielgruppe",
    "smooth-scroll-lenis / fullpage-snap-slides – Jugendliche und Eltern scannen Preise, Scroll-Kapern nervt",
    "kinetische-typo-intro / logo-aufbau-intro – Anmeldung geht vor",
    "hold-to-confirm – Hürde bei der Anmeldung",
    "konfetti-erfolg – nach der Anmeldung reicht eine klare Bestätigung mit nächsten Schritten",
    "Federkurven auf Formularfeldern oder Deckkraft – flackert"
   ],
   "regeln": [
    "Hero beantwortet in einem Satz Ort + Angebot + nächsten Schritt; Einstieg ist eine echte Auswahl (Klasse B/B197/A/BE + Standort), die zu Preis und freien Terminen führt – kein Fake-Eingabefeld.",
    "Preise transparent je Klasse (Grundbetrag, Fahrstunde, Sonderfahrten, Prüfungsgebühren) mit Tabs; tabellarische Ziffern.",
    "Ablauf als nummerierte Schritte (Anmeldung, Sehtest/Erste Hilfe, Theorie, Praxis, Prüfung); nur eine wachsende Linie: die Straße (svg-pfad-zeichnen-scroll) zeichnet sich, prozess-timeline-wachsende-linie bleibt ohne eigene Linie. Der Text muss ohne Animation verständlich sein.",
    "Anmeldung als eigene Sektion in höchstens 3 Schritten mit Fortschrittsring; Pflichtfelder minimal, Validierung erst nach Interaktion, Bestätigungsseite mit nächsten Schritten plus E-Mail.",
    "Zugänglich: Kontrast mind. 4.5:1, Gelb nur als Fläche hinter dunklem Text, Sprachen der Fahrlehrer:innen sichtbar (TOFU: 'In your language').",
    "Mobil unten feste Leiste 'Anmelden' / 'Anrufen' / 'WhatsApp'.",
    "Bestanden-Stimmen als statische Karten mit Vorname, Klasse und Monat – echt oder gar nicht. Ein Laufband (marquee-laufband) höchstens einmal als schmale Leiste mit echten Inhalten (Klassen, nächster Theoriestart), mit Pause-Knopf, nie mit Stimmen oder wichtigen Infos; im Template weglassen.",
    "Pflichtangaben und Recht (Leitfaden 8a): Preise vollständig und wie im Preisaushang nach Fahrlehrergesetz (Grundbetrag, Fahrstunde, Sonderfahrten, Prüfungsentgelte), inkl. MwSt.; bei Online-Anmeldung Widerrufs-Button (§ 356a BGB, seit 19.06.2026) und Erklärung zur Barrierefreiheit (Variante bfsg); Fotos von Fahrschüler:innen nur mit Einwilligung, bei Minderjährigen der Eltern; Google-Bewertungen nur mit Echtheitshinweis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Statisch generierbar (TOFU: Astro mit Inline-CSS). SVG-Straße per stroke-dashoffset mit animation-timeline: view(), Fallback statisch. Kein Lottie im Hero (Kruzee nutzt es, kostet). Buchungs-Widget eines Drittanbieters erst nach Consent bzw. Klick laden.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt: eine lokale deutsche Fahrschule (bisher nur UK/US/Kanada) (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten_demo": {
    "tiefen-taste-3d": "stapel",
    "mobile-bottom-navigation": "fab",
    "svg-pfad-zeichnen-scroll": "strasse",
    "css-native-karussell": "peek",
    "studio-visitenkarte-footer": "praxis"
   },
   "stimmung_tags": [
    "verspielt",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     128
    ],
    "sektion": "clamp(72px, 9vw, 136px)",
    "dichte": "mittel",
    "hinweis": "Großzügig um die Headline, kompakt in Preisen und Formular: Tabellenzeilen 12 px, Formularfelder 16 px Abstand, Schritte des Ablaufs 48 px."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 56px)",
    "spalt": "clamp(16px, 2vw, 28px)",
    "max_breite": "1240px",
    "hinweis": "Headline über 10 Spalten, Auswahl darunter über 6. Preise als Tabs über volle Breite, Ablauf als nummerierte Schritte, die gezeichnete Straße läuft durch den Rand."
   },
   "form": {
    "radius_klein": "12px",
    "radius_gross": "20px",
    "pille": true,
    "linie": "1px #566175 um Felder, Karten ohne Linie auf #EEF0D8",
    "schatten": "nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten und Felder ohne Schatten",
    "hinweis": "Freundlich rund, aber nicht weich: Pillen für Knöpfe und Klassen-Chips, 20 px für Preis- und Stimmenkarten. Gelb #FFD60A nur als Fläche hinter dunklem Text."
   },
   "bildsprache": {
    "licht": "Helles Tageslicht draußen, freundlich, eher Vormittag.",
    "ausschnitt": "Fahrlehrer:in und Fahrschüler:in im oder am Auto, Halbtotale, Blick nach vorn.",
    "personen": "Ja: echte Fahrlehrer:innen mit Namen und Sprachen; Fahrschüler:innen nur mit Einwilligung, bei Minderjährigen der Eltern.",
    "formate": [
     "4:5",
     "3:2",
     "1:1"
    ],
    "nicht": "Keine Stock-Teenager mit Schlüssel in der Hand, kein 3D-Auto, keine Verkehrszeichen-Clipart, kein Konfetti."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz, ermutigend, ein Schritt pro Satz. Preise und Fristen als Zahl, nicht als Umschreibung.",
    "haltung": "Nimmt die Angst, erklärt den Weg. Abschnitte für Eltern (Kosten, Anmeldung Minderjähriger) im gleichen Ton, ohne Jugendsprache.",
    "beispiele": [
     "Dein Führerschein in [Ort]. Starte mit Klasse B.",
     "Theorie beginnt jeden Montag. Du kannst jederzeit einsteigen."
    ],
    "nicht": "„Mit uns sicher ans Ziel!“, Jugendsprache, Emojis, Angstmache vor der Prüfung, Fake-Eingabefeld."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: H1 oben über Spalte 1 bis 10, darunter die Auswahl über 1 bis 6; rechts 4 bis 5 Spalten Foto oder der Anfang der gezeichneten Straße.",
    "bild": "Optional ein Foto 4:5 rechts; die Straße (svg-pfad-zeichnen-scroll) beginnt im Hero und zeichnet sich beim Scrollen.",
    "h1": "clamp(2.5rem, 1rem + 6.5vw, 6rem), Bricolage 700, oben links, hyphens: auto.",
    "handlung": "Auswahl Klasse + Standort (animiertes-select) mit Knopf „Preise und Termine“ als Tiefen-Taste; daneben „Anrufen“ als Textlink.",
    "zusatz": "Zeile „Nächster Theoriestart: [Datum]“ unter der Auswahl; mobil feste untere Leiste Anmelden / Anrufen / WhatsApp."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "interaktives-3d-hero"
     ],
     "grund": "ein 3D-Auto ist Deko ohne Nutzen und teuer auf Handys der Zielgruppe"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "fullpage-snap-slides"
     ],
     "grund": "Jugendliche und Eltern scannen Preise, Scroll-Kapern nervt"
    },
    {
     "ids": [
      "kinetische-typo-intro",
      "logo-aufbau-intro"
     ],
     "grund": "Anmeldung geht vor"
    },
    {
     "ids": [
      "hold-to-confirm"
     ],
     "grund": "Hürde bei der Anmeldung"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Anmeldung reicht eine klare Bestätigung mit nächsten Schritten"
    },
    {
     "ids": [],
     "grund": "Federkurven auf Formularfeldern oder Deckkraft – flackert"
    }
   ],
   "alle_muster": [
    {
     "id": "svg-pfad-zeichnen-scroll",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/meta.json",
     "variante": "strasse",
     "demo_url": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=strasse"
    },
    {
     "id": "animiertes-select",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "preis-section-editorial",
     "rolle": "Sektion: Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: In 5 Schritten zum Führerschein (die Straße zeichnet sich als einzige Linie; prozess-timeline-wachsende-linie liefert nur das Raster, ohne eigene Linie)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "wand",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Fahrlehrer:innen & Fahrzeuge",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Fahrlehrer:innen & Fahrzeuge",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "wochen-kursplan",
     "rolle": "Sektion: Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/meta.json",
     "variante": "studio",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio"
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)",
       "variante": "basis",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
      },
      {
       "rolle": "Sektion: FAQ (Kosten, Dauer, Sprachen, Intensivkurs)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)",
     "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": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "fab",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab"
    },
    {
     "id": "highlight-marker-underline",
     "rolle": "Schrift",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/meta.json"
    },
    {
     "id": "marquee-laufband",
     "rolle": "Schrift",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/meta.json"
    },
    {
     "id": "fortschrittsring",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "tiefen-taste-3d",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
     "variante": "stapel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=stapel"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "token-federnd-verspielt",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/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": "fluide-typo-clamp-cqi",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "immobilien-diskret-hochwertig",
   "name": "Immobilien: diskret und hochwertig",
   "branche": "Immobilienmakler / Projektentwickler / Hausverwaltung mit Verkauf",
   "stimmung": [
    "seriös",
    "hochwertig",
    "ruhig",
    "vertrauensvoll"
   ],
   "kurz": "Eine klassische Antiqua für Headlines, eine neutrale Grotesk für Fakten, warme helle Flächen und viel Platz für Objektfotos. Für Eigentümer zählt die Bewertung (Lead), für Käufer die Suche – beides ist ab dem ersten Bildschirm erreichbar. Bewegung ist leise: Bilder kommen mit langer Ausklang-Kurve, die UI reagiert in 400 ms.",
   "referenzen": [
    {
     "seite": "Inigo (Makler für historische Häuser, UK)",
     "url": "https://www.inigo.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Next.js + Tailwind. Typekit fhi1swm: 'adobe-caslon-pro', 'Big Caslon Reg/It' (Headlines), dazu @font-face 'Soehne Web' normal/600 (Text). Utility-Klassen 'duration-400 [transition-timing-function:var(--ease-out-quart)]' mit cubic-bezier(.165,.84,.44,1) für Header, Menü und Opazität; Höhenwechsel .4s easeOutQuart. Versal-Labels mit 1.5px Laufweite (18×). Farb-Tokens beige #b5b2af, clay #d0b0a4, footer #b1b6c0. Navigation Buy / Sell / Prime / Almanac (Magazin) / Newsletter / Alerts (Suchauftrag) / Search; Sektionen Prime, New, Featured, Featured Past Sales.",
     "herkunft": "beobachtet",
     "quelle": "https://www.inigo.com/ (HTML, Typekit-Link, /_next/static/chunks/0lenvdebhop0y.css)"
    },
    {
     "seite": "DAHLER (Makler, Deutschland)",
     "url": "https://www.dahler.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Drupal + Alpine.js. @font-face 'tiempos' und 'tiempos-fine' 400 (Serif), 'founders-grotesk' 400/600. Marken-Tokens --color-brand-primary #02385c, --color-brand-grey #e8e2db, dazu Orange #ed7f1a und Gold #ab9044. Seiten-Drawer per Alpine x-transition 'ease-out duration-500' rein / 'ease-in duration-500' raus (translate-x). Sektionen: 'Herzlich willkommen in der Welt exklusiver Immobilien', 'Unsere aktuellen Immobilienangebote', 'An einem von über 100 Standorten', 'Aktuelle Marktzahlen & Immobilienpreise in Ihrer Region', 'Wie können wir Ihnen helfen?' mit Verkaufen / Bewerten / Kaufen, Newsletter.",
     "herkunft": "beobachtet",
     "quelle": "https://www.dahler.com/ (aggregiertes Drupal-CSS css_Ab72…, css_Xyzu…)"
    },
    {
     "seite": "Engel & Völkers",
     "url": "https://www.engelvoelkers.com/de/de",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Next.js, GSAP + ScrollTrigger mit CustomEase im Bundle. Eigene variable Schriften 'Engel Voelkers Head VF App' und 'Text VF App' (400–700). Tokens --color-ev-red #E60000, --color-desert-storm #F6F6F4, --color-white-linen #FCFAF5, --color-brown-light #EFE8DF; UI-Übergänge .2s cubic-bezier(0.3,0.2,0.2,0.8). h1 'Ihre Immobilie verdient den bestmöglichen Preis' (Eigentümer zuerst), Fly-out-Navigation Kaufen & Mieten / Verkaufen (Bewerten, Immobilienpreise, Verkäufer-Guide), Städte-Kacheln, Magazin.",
     "herkunft": "beobachtet",
     "quelle": "https://www.engelvoelkers.com/de/de (HTML + _next-Chunks)"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "",
    "headline": "libre-caslon-display",
    "text": "hanken-grotesk",
    "akzent": "",
    "groessen": "h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, Laufweite -0.005em, Zeilenhöhe 1.08 – nur ab 2rem einsetzen (Display-Schnitt). Zwischentitel und Fließtext in Hanken Grotesk 400/500, 1.0625rem, Zeilenhöhe 1.55. Labels Versal 0.75rem mit 0.09em (~1.5px wie Inigo). Objektdaten (m², Zimmer, Preis) mit tabellarischen Ziffern.",
    "techniken": [
     "serif-grotesk-duotone",
     "tabellenziffern",
     "optische-groessen-opsz"
    ],
    "alternative_eigenprojekt": "Eigenprojekt mit ITF: Headline sentient oder zodiak, Text switzer – näher an Tiempos/Söhne der Referenzen. Template-Alternative mit moderner Serif: newsreader statt libre-caslon-display."
   },
   "farbe": {
    "prinzip": "Warme, fast weiße Flächen und ein Sandton als Bühne für Fotos, ein tiefer Markenton für Headlines und Footer, ein sparsamer Akzent ausschließlich für den Haupt-CTA (Bewertung anfragen).",
    "beispiel": [
     "#FCFAF5 Grund (E&V white-linen)",
     "#EFE8DF Sandfläche/Karten (E&V brown-light, ähnlich Dahler #E8E2DB)",
     "#02385C Markenton für Headlines, Footer (Dahler)",
     "#313131 Fließtext",
     "#B5B2AF Linien/Meta (Inigo beige)",
     "#ED7F1A CTA-Akzent (Dahler) – nur Buttons",
     "#716F6D Meta-Text barrierefrei (4.8 : 1 auf #FCFAF5; #B5B2AF nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-editorial-langsam",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam), nur für Bilder; UI über animationsstil_ui",
    "beobachtet": "easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1) mit .4s für UI (Inigo --ease-out-quart); Drawer Öffnen ease-out, Schließen ease-in, 400–500 ms (Dahler, Alpine x-transition); .2s (E&V)",
    "dauer_ms": "200 (Hover/Farbe), 400 (Menü, Höhe, Header), 900–1100 (Bild-Einblendung)",
    "regel": "UI (Menü, Filter, Drawer, Formulare) über animationsstil_ui token-toggle-asymmetrisch: Öffnen mit der Expo-Kurve in etwa 400 ms, Schließen schneller mit cubic-bezier(0.7, 0, 0.84, 0). Nur Bilder dürfen die lange Landephase des Editorial-Stils nutzen (clip-path-Aufdeckung plus scale 1.06 → 1).",
    "herkunft": "beobachtet (inigo.com --ease-out-quart .4s; dahler.com Alpine x-transition 500 ms; E&V .2s)"
   },
   "hero_beschreibung": "Foto-Hero als Standard: ein echtes Objekt- oder Regionsfoto, ein Satz Positionierung und zwei Wege als Knöpfe: „Angebote ansehen“ (Kaufen/Mieten, Ort) und „Was ist meine Immobilie wert?“. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Objektsuche (Portal-Feed mit Filter) oder ein funktionierendes Bewertungsformular läuft; mit KI-Assistent dahinter direkt am Feld kennzeichnen (Art. 50 KI-VO). Kein Fake-Eingabefeld.",
   "muster": {
    "seitenuebergang": [
     "vt-shared-element-morph"
    ],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns",
     "hide-on-scroll-header"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [
     "prompt-hero-eingabefeld"
    ],
    "sektionen": [
     {
      "zweck": "Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
      "muster": [
       "css-native-karussell",
       "facettenfilter-ergebnisliste",
       "objekt-steckbrief-expose",
       "karussell-steuerung"
      ],
      "varianten": {
       "objekt-steckbrief-expose": "anzeige",
       "css-native-karussell": "peek",
       "facettenfilter-ergebnisliste": "leiste",
       "karussell-steuerung": "daumen"
      }
     },
     {
      "zweck": "Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten)",
      "muster": [
       "stapelkarten",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Marktzahlen der Region",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "diagramm"
      }
     },
     {
      "zweck": "Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)",
      "muster": [
       "objekt-steckbrief-expose",
       "split-screen-sticky-seiten",
       "galerie-shared-element-vollbild",
       "richtungsbewusste-uebergaenge"
      ],
      "varianten": {
       "objekt-steckbrief-expose": "kauf",
       "split-screen-sticky-seiten": "titel",
       "galerie-shared-element-vollbild": "produkt"
      }
     },
     {
      "zweck": "Referenzen / verkaufte Objekte",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Team / Standort",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "termin",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Ratgeber / Magazin",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "zeitung"
      }
     },
     {
      "zweck": "Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)",
      "muster": [
       "testimonials-neu-gedacht",
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "zitat",
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     }
    ],
    "scroll": [
     "clip-path-bild-reveal"
    ],
    "schrift_animation": [
     "split-mask-reveal"
    ],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "animiertes-select",
     "toggle-switch"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild",
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "pfeil-icon-button",
     "button-zustaende"
    ],
    "hero_varianten": {
     "foto-hero": "randlos-unten-links"
    }
   },
   "signatur": [
    "richtungsbewusste-uebergaenge"
   ],
   "varianten_demo": {
    "bild-zoom-in-maske": "gegen",
    "pfeil-icon-button": "tausch",
    "galerie-shared-element-vollbild": "produkt",
    "css-native-karussell": "peek",
    "studio-visitenkarte-footer": "basis",
    "footer-newsletter-mit-persoenlichkeit": "kultur"
   },
   "nicht_verwenden": [
    "gaussian-splats / scroll-3d-kamerafahrt – 10–100 MB pro Objekt, Rundgang lieber als verlinkter 360°-Dienst im Exposé",
    "webgl-bildverzerrung / zoom-parallax – Objektfotos müssen unverfälscht wirken",
    "smooth-scroll-lenis – Exposé-Daten werden gelesen und verglichen",
    "kreistext-siegel-rotierend – Template-Deko",
    "marquee-laufband mit Objekten – Angebote müssen vollständig lesbar sein",
    "token-luxus-weich in voller Länge (1,2–2,4 s) für UI – zu träge beim Durchklicken von Angeboten"
   ],
   "regeln": [
    "Erster Bildschirm mit zwei Wegen: Objektsuche (Kaufen/Mieten, Ort) und 'Was ist meine Immobilie wert?' – beide mit echter Funktion (Portal-Feed bzw. Bewertungsformular). Als Eingabefeld (prompt-hero-eingabefeld) nur, wenn diese Funktion läuft; sonst Foto-Hero mit zwei Knöpfen.",
    "Serif nur für Headlines ab 2rem, alle Daten und Formulare in der Grotesk.",
    "Objektkarten: Foto 4:3, Ort, Zimmer, m², Preis in Tabellenziffern; Karte → Exposé per Shared-Element-Übergang.",
    "Exposé: Bilder links scrollen, Eckdaten und Kontaktformular rechts sticky; mobil Eckdaten oben, Anfrage-Button unten fest.",
    "Ein CTA-Akzent pro Seite (Bewertung oder Anfrage), sonst nur Markenton und Sand.",
    "Pflichtangaben sichtbar: Energieausweis-Daten in Anzeige und Exposé (GEG), Provisionshinweis, Impressum mit Erlaubnis nach § 34c GewO und zuständiger Behörde – vom Kunden prüfen lassen.",
    "Suchauftrag/Newsletter als Footer-Angebot (Inigo 'Alerts').",
    "Übergänge richtungsbewusst: Karte → Exposé tiefer (Shared Element), Exposé → nächstes Objekt seitlich, Zurück gespiegelt.",
    "Pflichtangaben und Recht (Leitfaden 8a): Objektfotos und Grundrisse nur mit Nutzungsrecht; Plattform-Bewertungen nur mit Echtheitshinweis direkt daneben; KI-Suche oder Chat direkt beim Start kennzeichnen (Art. 50 KI-VO); Bewertungsformular mit Datenschutzhinweis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Bildlastig: Karussells nativ (scroll-snap) statt Slider-Bibliothek, Exposé-Bilder mit srcset und fetchpriority nur für das erste Bild. Portal-Anbindung (OpenImmo/Schnittstelle) serverseitig rendern, damit Objekte indexierbar sind. View Transitions mit Fallback.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "ruhig",
    "luxuriös"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     72,
     112,
     160
    ],
    "sektion": "clamp(88px, 10vw, 152px)",
    "dichte": "luftig",
    "hinweis": "Viel Platz um Objektfotos; Objektdaten dagegen dicht in einer Zeile (Zimmer, m², Preis mit 16 px Abstand), damit man vergleichen kann."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 4vw, 64px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "1440px",
    "hinweis": "Objektkarten 3 Spalten, Foto 4:3. Exposé 7/5: Bilder links scrollen, Eckdaten und Formular rechts sticky; mobil Eckdaten oben."
   },
   "form": {
    "radius_klein": "2px",
    "radius_gross": "0",
    "pille": true,
    "linie": "1px #B5B2AF für Linien und Meta-Trenner",
    "schatten": "keiner",
    "hinweis": "Bilder und Karten eckig, nur die Haupthandlung ist eine dunkle Pille (pfeil-icon-button, Variante tausch). Der Akzent #ED7F1A bleibt dem einen CTA vorbehalten."
   },
   "bildsprache": {
    "licht": "Tageslicht oder blaue Stunde, ruhig und unverfälscht; keine übertriebene HDR-Bearbeitung.",
    "ausschnitt": "Objekt in der Totale, Innenräume auf Augenhöhe mit geraden Linien, Details wie Parkett, Fenster, Treppe.",
    "personen": "Nein in Objektfotos; Makler:innen als einheitliche Porträts im Team.",
    "formate": [
     "4:3",
     "3:2",
     "16:9"
    ],
    "nicht": "Keine Weitwinkelverzerrung, kein Himmeltausch, keine Handschlag- oder Schlüsselübergabe-Stockfotos, keine Zoom- oder WebGL-Effekte auf Objektfotos."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Ruhig und vollständig, Fakten mit Einheit. Lagebeschreibung in zwei bis drei Sätzen, keine Aufzählung von Adjektiven.",
    "haltung": "Diskret und beratend, nie drängend. Eigentümer:innen und Käufer:innen werden getrennt angesprochen.",
    "beispiele": [
     "Häuser mit Geschichte zwischen Fluss und Altstadt.",
     "Was ist Ihre Immobilie wert? Wir schätzen sie vor Ort ein."
    ],
    "nicht": "„Traumimmobilie“, „exklusiv“ in jedem Satz, „Jetzt zuschlagen“, „provisionsfrei“ ohne Prüfung."
   },
   "hero_aufbau": {
    "raster": "Foto randlos über die volle Breite, Textblock unten links über Spalte 1 bis 6 auf einer ruhigen Bildzone.",
    "bild": "Ein echtes Objekt- oder Regionsfoto, 16:9 Desktop, 4:5 mobil.",
    "h1": "clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, unten links.",
    "handlung": "„Angebote ansehen“ (dunkle Pille) und „Was ist meine Immobilie wert?“ (#ED7F1A), nebeneinander unter der H1. Prompt-Feld nur als hero_variante mit echter Suche.",
    "zusatz": "Kein Versal-Label über der H1 (C13): Region oder Leistung steht in der H1 oder als ruhige Zeile darunter in der Grundschrift. Suchauftrag erst im Footer. Umsetzung: foto-hero/randlos-unten-links."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "gaussian-splats",
      "scroll-3d-kamerafahrt"
     ],
     "grund": "10–100 MB pro Objekt, Rundgang lieber als verlinkter 360°-Dienst im Exposé"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "zoom-parallax"
     ],
     "grund": "Objektfotos müssen unverfälscht wirken"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Exposé-Daten werden gelesen und verglichen"
    },
    {
     "ids": [
      "kreistext-siegel-rotierend"
     ],
     "grund": "Template-Deko"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "mit Objekten – Angebote müssen vollständig lesbar sein"
    },
    {
     "ids": [
      "token-luxus-weich"
     ],
     "grund": "in voller Länge (1,2–2,4 s) für UI – zu träge beim Durchklicken von Angeboten"
    }
   ],
   "alle_muster": [
    {
     "id": "richtungsbewusste-uebergaenge",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "randlos-unten-links",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links"
    },
    {
     "id": "prompt-hero-eingabefeld",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "objekt-steckbrief-expose",
     "rolle": "Sektion: Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
       "variante": "anzeige",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=anzeige"
      },
      {
       "rolle": "Sektion: Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)",
       "variante": "kauf",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=kauf"
      }
     ]
    },
    {
     "id": "karussell-steuerung",
     "rolle": "Sektion: Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/meta.json",
     "variante": "daumen",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=daumen"
    },
    {
     "id": "stapelkarten",
     "rolle": "Sektion: Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/stapelkarten/meta.json"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Marktzahlen der Region",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "diagramm",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "titel",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Team / Standort",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)",
     "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": "editorial-magazin-layout",
     "rolle": "Sektion: Ratgeber / Magazin",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "zeitung",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "zitat",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "vt-shared-element-morph",
     "rolle": "Seitenwechsel",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/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": "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": "bild-zoom-in-maske",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
     "variante": "gegen",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "toggle-switch",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "kultur",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "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": "serif-grotesk-duotone",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    }
   ]
  },
  {
   "id": "gastro-warm-appetitlich",
   "name": "Gastronomie: warm und einladend",
   "branche": "Restaurant / Café / Bar / Rösterei mit Café",
   "stimmung": [
    "warm",
    "einladend",
    "persönlich",
    "sinnlich"
   ],
   "kurz": "Fühlt sich an wie das Lokal selbst: warmes Papier-Weiß, eine weiche Serif mit Charakter, Hausfarben aus Einrichtung oder Logo, große Food- und Raumfotos. Karte, Reservierung und Öffnungszeiten sind nie mehr als einen Tipp entfernt. Bilder blenden sanft ein, alles andere bleibt ruhig.",
   "referenzen": [
    {
     "seite": "Dishoom (Restaurants, UK)",
     "url": "https://www.dishoom.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Next.js, GSAP + ScrollTrigger und Swiper im Bundle. Typekit axn5fbj mit vielen Display-Schriften (gill-sans-nova, big-caslon-fb, hepta-slab, baskerville-urw u. a.) plus eigene @font-face 'cheltenhamBT' 400/700 und eine Standort-Schrift 'dishoomBattersea'. --default-bg-color #f0ece0, --default-text-color #353839, --nav-bg #eac16e, dazu Salbei #7f937a, Rosé #e1a894, Grün #006642. Versal-Labels .15em/.25em. Hero-Bild startet mit filter:brightness(0) und hellt in .7s ease-out auf, ein weiteres Bild läuft opacity 0 → 1 und scale .8 → 1 in .7s ease-out. Navigation nach Standorten (Cafés / Permit Rooms) und Explore (Menus, Shop, Group feasting, Order delivery …). Einstieg 'Peruse menus, book tables, explore gifts' mit drei Kacheln MENUS / RESERVATIONS / STORE; dazu Rezepte, 'Awards and Accolades'.",
     "herkunft": "beobachtet",
     "quelle": "https://www.dishoom.com/ (HTML-Inline-Styles, _next-Chunks, Typekit-CSS)"
    },
    {
     "seite": "noma (Kopenhagen)",
     "url": "https://noma.dk/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): WordPress. Nur 'Helvetica Neue' als Schrift, Grund #f8f8f8, Übergänge opacity .2s ease und transform var(--animation-speed) ease-in-out. Erster Navigationspunkt 'Reservations', danach Shop, Kaffee, Guide, People, News & Events. Startseite: h1 'noma', 'Copenhagen 2026-2027', Anmeldung für Reservierungs-Updates; Footer-Blöcke Contact / Booking + Hours / Careers / About / Follow.",
     "herkunft": "beobachtet",
     "quelle": "https://noma.dk/ (HTML + Theme-CSS)"
    },
    {
     "seite": "Bonanza Coffee Roasters (Berlin)",
     "url": "https://www.bonanzacoffee.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Shopify. @font-face 'Apercu Pro' 400/800, 'Fraunces' 400, 'Lyyra Standard' 800, 'Inter' 300–700. Kurve cubic-bezier(.29,.63,.44,1) mit var(--duration-default) für transform/visibility der Drawer (steht in components-sections.css, nicht in base.css; am 31.10.2026 per curl nachgeprüft). Farben #293e3a (Dunkelgrün), #dcdbc8 (Sand), #efedeb, #d0d0ce. Claim 'Unnecessarily Good Coffee'; Cafés stehen als h2 mit Adresse ('Alte Schonhauser str. 15 | 10119 | Berlin'); Navigation Coffee / Subscription / Wholesale / Where to Find.",
     "herkunft": "beobachtet",
     "quelle": "https://bonanzacoffee.de/cdn/shop/t/13/assets/components-sections.css"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Ausgang war soft-serif-warm (fraunces + hanken-grotesk + dm-mono). Text auf commissioner gewechselt, damit Gastro sich von praxis unterscheidet; kein Mono-Akzent (Preise in Mono wirken nach Tech).",
    "headline": "fraunces",
    "text": "commissioner",
    "akzent": "",
    "groessen": "h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces wght 450–600, opsz automatisch, SOFT 50–100, Laufweite -0.01em, Zeilenhöhe 1.02; Fließtext Commissioner FLAR 0, wght 400, 1.0625rem, Zeilenhöhe 1.55; Versal-Labels und Karten-Rubriken (Öffnungszeiten, Kategorien) Commissioner FLAR 60–100 als Brücke zur Serif, 0.75rem mit 0.15em (Dishoom); Speisekarte: Gericht 1.125rem/500, Beschreibung 0.9375rem, Preis rechtsbündig mit tabellarischen Ziffern. DM Mono aus der Paarung weglassen – Preise in Mono wirken nach Tech.",
    "techniken": [
     "serif-grotesk-duotone",
     "optische-groessen-opsz",
     "tabellenziffern"
    ],
    "alternative_eigenprojekt": "Fine Dining: Paarung garamond-wein (eb-garamond, template-tauglich) oder als Eigenprojekt gambarino/erode (ITF). Für Bars mit Plakatcharakter: young-serif als Headline."
   },
   "farbe": {
    "prinzip": "Warmes Papier-Weiß statt Reinweiß, warme dunkle Schrift, eine bis zwei Hausfarben aus Interieur, Geschirr oder Logo. Food-Fotos immer in voller Farbe; Flächenfarben eher gedeckt, damit das Essen leuchtet.",
    "beispiel": [
     "#F0ECE0 Grund (Dishoom)",
     "#353839 Text",
     "#7F937A Hausfarbe Salbei für Flächen",
     "#293E3A dunkle Sektion/Footer (Bonanza)",
     "#EAC16E Akzent Senf für Navigation/Badges (Dishoom nav-bg)",
     "#E1A894 Zweitakzent Rosé, sparsam",
     "#293E3A Signal: Haupthandlung als dunkle Pille (Senf nur als Kreis oder Akzent; Salbei trägt keine Schrift: 2,8 : 1 mit Weiß)"
    ]
   },
   "animationsstil": "token-editorial-langsam",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam), nur Bilder und h1; UI über animationsstil_ui",
    "beobachtet": "Bilder .7s ease-out (Dishoom), .2s (noma); Kurve als Expo-Out-Standard aus dem Katalog gewählt",
    "dauer_ms": "200 (Hover, Tabs), 700 (Bild-Einblendung), 400 (Menü/Overlay)",
    "regel": "Nur Bilder bekommen eine eigene Einblendung (Aufhellen oder scale 0.96 → 1 mit Deckkraft, ~700 ms wie Dishoom). Text erscheint ohne Effekt oder mit einem einzigen Masken-Reveal für die h1. Karten-Tabs, Reservierung, Warenkorb und Kaufbox kurz und funktional über animationsstil_ui token-toggle-asymmetrisch.",
    "herkunft": "beobachtet (Dishoom .7s ease-out auf Bildern; noma .2s); Kurve als Expo-Out-Standard aus dem Katalog gewählt"
   },
   "hero_beschreibung": "Foto-Hero als Standard: echtes Foto von Raum, Team oder Gericht, dazu Öffnungszeiten, Adresse und „Reservieren“. Video nur als Variante, wenn eigenes, hochwertiges Material vorhanden ist (stumm, Poster, Pause-Knopf).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation",
     "live-uhr-und-standort",
     "native-popover-dropdowns"
    ],
    "hero": [
     "foto-hero-mit-leiste"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Karte (Mittag / Abend / Getränke)",
      "muster": [
       "speisekarte-editorial",
       "tabs-pfeiltasten-focusgroup"
      ],
      "varianten": {
       "speisekarte-editorial": "bistro",
       "tabs-pfeiltasten-focusgroup": "auto"
      }
     },
     {
      "zweck": "Haltung / Geschichte des Hauses",
      "muster": [
       "scroll-word-highlight",
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)",
      "muster": [
       "termin-buchung-zwei-klick",
       "kontakt-anfrage-formular",
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter",
       "split-screen-sticky-seiten": "bild"
      }
     },
     {
      "zweck": "Raum & Speisen (Bilder)",
      "muster": [
       "masonry-grid-lanes-galerie"
      ]
     },
     {
      "zweck": "Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "band"
      }
     },
     {
      "zweck": "Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
      "muster": [
       "css-native-karussell",
       "produkt-kaufbox-varianten",
       "warenkorb-drawer",
       "gutschein-konfigurator",
       "eu-gewaehrleistungshinweis"
      ],
      "varianten": {
       "css-native-karussell": "produktreihe",
       "produkt-kaufbox-varianten": "kompakt",
       "warenkorb-drawer": "drawer",
       "eu-gewaehrleistungshinweis": "kaufbox"
      }
     },
     {
      "zweck": "Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis)",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "auszeichnungen"
      }
     },
     {
      "zweck": "Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Standorte (nur bei mehreren Häusern)",
      "muster": [
       "standortfinder-liste",
       "oeffnungszeiten-status"
      ],
      "varianten": {
       "standortfinder-liste": "kompakt",
       "oeffnungszeiten-status": "kompakt"
      }
     },
     {
      "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [
     "clip-path-bild-reveal"
    ],
    "schrift_animation": [
     "scroll-word-highlight",
     "split-mask-reveal"
    ],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "druck-feedback",
     "icon-squash-stretch"
    ],
    "material": [
     "papier-druck-textur"
    ],
    "galerie": [
     "masonry-grid-lanes-galerie",
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "pfeil-icon-button",
     "druck-feedback"
    ],
    "hero_varianten": {
     "foto-hero-mit-leiste": "karte"
    }
   },
   "signatur": [
    "live-uhr-und-standort"
   ],
   "varianten_demo": {
    "footer-newsletter-mit-persoenlichkeit": "saison",
    "bild-zoom-in-maske": "gegen",
    "mobile-bottom-navigation": "basis",
    "css-native-karussell": "produktreihe",
    "studio-visitenkarte-footer": "praxis",
    "pfeil-icon-button": "tausch"
   },
   "nicht_verwenden": [
    "graustufen-zu-farbe – Essen braucht Farbe",
    "halbton-raster – frisst Food-Details",
    "bild-trail-cursor – Gimmick, lenkt von Karte und Reservierung ab",
    "smooth-scroll-lenis / fullpage-snap-slides – Gäste suchen schnell Öffnungszeiten",
    "preloader jeder Art (prozent-zaehler, logo-aufbau-intro) – mobil unterwegs zählt jede Sekunde",
    "Speisekarte nur als PDF – nicht lesbar, nicht indexierbar"
   ],
   "regeln": [
    "Öffnungszeiten, Adresse und Reservieren auf dem ersten Bildschirm; mobil unten fest: Reservieren / Karte / Route / Anrufen.",
    "Karte als HTML-Text mit Tabs (Mittag, Abend, Getränke), Allergene als Kürzel mit Legende; PDF höchstens zusätzlich.",
    "Echte Fotos von Raum, Team und Gerichten; der Hero ist standardmäßig ein Foto. Video nur als Variante mit eigenem Material, ohne Ton, mit Poster-Bild und Pause-Knopf.",
    "Signatur live-uhr-und-standort nur gekoppelt an den Öffnungsstatus ('18.42 · Küche bis 22 Uhr', Zeiten aus oeffnungszeiten-status, echte Zeiten inkl. Feiertage); eine reine Uhr ist Deko und entfällt.",
    "Eine Hausfarbe für Flächen, ein Akzent für Badges; Food-Fotos nie einfärben oder überlagern.",
    "Tischreservierung über termin-buchung-zwei-klick: das Widget (OpenTable, Quandoo u. a.) erst nach Consent bzw. Klick laden; vorher Telefon und E-Mail anbieten. Eine Buchungsleiste mit Datumsbereich ist für Zimmer und Zeiträume gebaut, nicht für Tische (Datum, Uhrzeit, Personen).",
    "Papier-Textur nur, wenn Karte oder Logo selbst Print-Charakter haben, und dann kaum sichtbar.",
    "Pflichtangaben und Recht (Leitfaden 8a): Allergene und Zusatzstoffe auf der Karte, Preise inkl. MwSt.; mit Shop: Gesamtpreis, Versandkosten, Grundpreis je kg, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Produktsicherheit (GPSR); bei Lebensmitteln im Fernabsatz Pflichtangaben (Zutaten, Allergene, Lebensmittelunternehmer, LMIV) vor dem Kauf; Google-Bewertungen nur mit Echtheitshinweis; keine pauschalen Umweltaussagen („nachhaltig“, „klimaneutral“) ohne Nachweis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Standard ist ein Foto-Hero (AVIF, fetchpriority=high). In der Video-Variante: kurzer, stummer Loop (unter 3 MB, AVC/HEVC + Poster), mobil ggf. nur Poster. Instagram-Feed und Karten-Einbettung erst nach Klick. Fraunces und Commissioner als Variable-Dateien mit Subset (Latin) und font-display:swap; nur Achsen laden, die gebraucht werden.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Rösterei / Café mit Online-Shop",
     "sektionen": [
      "Foto-Hero: Rösterei oder Café, Öffnungsstatus, „Zum Shop“ und „Anfahrt“",
      "Bohnen & Shop (css-native-karussell Variante produktreihe, produkt-kaufbox-varianten, warenkorb-drawer Variante drawer)",
      "Café-Karte (speisekarte-editorial Variante bistro)",
      "Rösterei / Herkunft (editorial-magazin-layout Variante magazin)",
      "Gutscheine und Abo (gutschein-konfigurator)",
      "Anfahrt & Öffnungszeiten (oeffnungszeiten-status, karte-zwei-klick)",
      "Footer: Vertrag widerrufen / Abo kündigen (widerruf-und-kuendigung-schaltflaeche), Erklärung zur Barrierefreiheit (bfsg)"
     ],
     "weglassen": [
      "Reservieren (Café ohne Tischreservierung)",
      "Presse & Auszeichnungen ohne echte Erwähnungen",
      "Standorte bei nur einem Haus"
     ],
     "muster_zusatz": [
      "gutschein-konfigurator",
      "widerruf-und-kuendigung-schaltflaeche"
     ],
     "hinweis": "Shop-Regeln und nicht_verwenden aus d2c-produkt-zuerst gelten zusätzlich; Schrift, Farbe, Stil und Signatur (live-uhr-und-standort mit Öffnungsstatus) bleiben aus gastro."
    }
   ],
   "stimmung_tags": [
    "warm",
    "editorial"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     144
    ],
    "sektion": "clamp(72px, 9vw, 128px)",
    "dichte": "mittel",
    "hinweis": "Speisekarte dicht und gut scanbar (Gericht und Beschreibung 4 px, Gerichte 20 px auseinander), Bilder mit viel Luft. Öffnungszeiten immer im ersten Bildschirm."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(12px, 2vw, 24px)",
    "max_breite": "1360px",
    "hinweis": "Hero asymmetrisch 7/5 (Foto/Text) oder Foto randlos. Karte in 2 Spalten, Preis rechtsbündig. Bildstrecken dürfen randlos laufen."
   },
   "form": {
    "radius_klein": "6px",
    "radius_gross": "12px",
    "pille": true,
    "linie": "1px #353839 mit 20 % Deckkraft zwischen Gerichten",
    "schatten": "keiner",
    "hinweis": "Weich, aber nicht verspielt: 12 px an Fotos und Karten, Pillen nur für Reiter (Mittag, Abend, Getränke) und Badges in #EAC16E."
   },
   "bildsprache": {
    "licht": "Warmes Fenster- oder Abendlicht, gerichtete Schatten, Essen in voller Farbe.",
    "ausschnitt": "Teller von oben oder in 45°, Raum mit Gästen in Unschärfe, Hände beim Anrichten.",
    "personen": "Ja: Team und Gastgeber:in; Gäste nur unscharf oder mit Einwilligung.",
    "formate": [
     "4:5",
     "1:1",
     "3:2"
    ],
    "nicht": "Keine eingefärbten oder überlagerten Food-Fotos, kein Graustufen- oder Halbton-Effekt, keine Stockfotos, kein Text auf dem Teller."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz und sinnlich, Zutaten statt Adjektive. Öffnungszeiten und Adresse als nüchterne Zeile.",
    "haltung": "Persönlich wie die Gastgeber:in an der Tür. Ein Café oder eine Bar darf duzen, dann auf der ganzen Seite.",
    "beispiele": [
     "Heute ab 18 Uhr, Küche bis 22 Uhr.",
     "Wir kochen mit dem, was die Höfe rund um [Ort] liefern."
    ],
    "nicht": "„kulinarische Reise“, „Gaumenfreuden“, „mit Liebe gemacht“ ohne Beleg, „nachhaltig“ ohne Nachweis."
   },
   "hero_aufbau": {
    "raster": "12 Spalten, Foto über Spalte 1 bis 7 (oder randlos), Textblock über 8 bis 12; mobil Foto oben.",
    "bild": "Echtes Foto von Raum, Team oder Gericht, 4:5 oder 3:2. Video nur als hero_variante mit eigenem Material.",
    "h1": "clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces 450–600, links im Textblock.",
    "handlung": "„Reservieren“ (gefüllt, Hausfarbe) und „Karte ansehen“ (Kontur), darunter Adresse mit Route.",
    "zusatz": "Statuszeile aus live-uhr-und-standort und oeffnungszeiten-status („18.42 · Küche bis 22 Uhr“); mobil feste Leiste Reservieren / Karte / Route / Anrufen."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "graustufen-zu-farbe"
     ],
     "grund": "Essen braucht Farbe"
    },
    {
     "ids": [
      "halbton-raster"
     ],
     "grund": "frisst Food-Details"
    },
    {
     "ids": [
      "bild-trail-cursor"
     ],
     "grund": "Gimmick, lenkt von Karte und Reservierung ab"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "fullpage-snap-slides"
     ],
     "grund": "Gäste suchen schnell Öffnungszeiten"
    },
    {
     "ids": [
      "prozent-zaehler",
      "logo-aufbau-intro"
     ],
     "grund": "preloader jeder Art (prozent-zaehler, logo-aufbau-intro) – mobil unterwegs zählt jede Sekunde"
    },
    {
     "ids": [],
     "grund": "Speisekarte nur als PDF – nicht lesbar, nicht indexierbar"
    }
   ],
   "starter": "https://cecodesign.de/lab/fundus/starter/gastro-warm-appetitlich/index.html",
   "alle_muster": [
    {
     "id": "live-uhr-und-standort",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/meta.json"
    },
    {
     "id": "foto-hero-mit-leiste",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=karte"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "speisekarte-editorial",
     "rolle": "Sektion: Karte (Mittag / Abend / Getränke)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json",
     "variante": "bistro",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Karte (Mittag / Abend / Getränke)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "scroll-word-highlight",
     "rolle": "Sektion: Haltung / Geschichte des Hauses",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Haltung / Geschichte des Hauses",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "magazin",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Raum & Speisen (Bilder)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "band",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt"
    },
    {
     "id": "warenkorb-drawer",
     "rolle": "Sektion: Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
     "variante": "drawer",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer"
    },
    {
     "id": "gutschein-konfigurator",
     "rolle": "Sektion: Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json"
    },
    {
     "id": "eu-gewaehrleistungshinweis",
     "rolle": "Sektion: Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "auszeichnungen",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=auszeichnungen"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)",
     "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": "standortfinder-liste",
     "rolle": "Sektion: Standorte (nur bei mehreren Häusern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/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": "bild-zoom-in-maske",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
     "variante": "gegen",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/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": "papier-druck-textur",
     "rolle": "Material",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "saison",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "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": "serif-grotesk-duotone",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    }
   ]
  },
  {
   "id": "boutique-hotel-gastgeber",
   "name": "Boutique-Hotel: Gastgeber mit Haltung",
   "branche": "Hotel / Boutique-Unterkunft / Pension / Ferienapartments",
   "stimmung": [
    "gastfreundlich",
    "entspannt",
    "hochwertig",
    "ortsverbunden"
   ],
   "kurz": "Die Website ist das Foyer: großes Bild oder kurzer Film vom Haus, direkt darunter die Buchungsleiste mit Datum und Gästen. Eine leichte Serif für Stimmung, eine breite Grotesk für Labels, sandige Töne. Weiche, langsame Bildwechsel (clip-path-Reveal, Slideshow mit innerer Gegenbewegung), aber eine schnelle Buchungsstrecke mit eigenem, asymmetrischem UI-Tempo.",
   "referenzen": [
    {
     "seite": "The Hoxton (Boutique-Hotels)",
     "url": "https://thehoxton.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): WordPress. Vorgeladene Schriften GT America (Thin, Light, Regular, Medium, Extended Regular, Extended Bold) und Tiempos Fine (Light, Light Italic, Italic, Bold). Section 'irnmn-booking-system' als Buchungsleiste direkt nach dem Hero (zusätzlich Variante '--bar-wra…'), danach cb-global-hero, cb-promo, 'Trending destinations'. Farben #3e3a37 (warmes Dunkel), #fef2e3 (Creme). Übergänge all .5s, opacity .2s, background/color .6s linear. Navigation Why Book With Us? / Global Offers / Join Dis-loyalty / Meetings & Events / What's On / My Booking, 6 Sprachen.",
     "herkunft": "beobachtet",
     "quelle": "https://thehoxton.com/ (HTML-Preloads + _static-CSS)"
    },
    {
     "seite": "Aman",
     "url": "https://www.aman.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Drupal + jQuery. Erste Section 'aman-booking-bar-section', dann Video-Absatz, Slider-Karten, 'Seasonal Experiences', hervorgehobene Sektion auf bg-sand-grey. @font-face u. a. 'Lyon Display Web' 300, 'Lyon Text Web' 400, 'WhitneyBook' 200–400, 'SuisseBP', 'Calligraph810'. Farben #f3eee7 (Sand, 50×), #e6e2db, #d5d1c8, Text #313131, Grau-Grün #82847f. Laufweite .05rem (23×) für Labels. Übergänge border-color/color .4s; cubic-bezier(0.19,1,0.22,1) (Expo-Out).",
     "herkunft": "beobachtet",
     "quelle": "https://www.aman.com/ (aggregiertes Drupal-CSS)"
    },
    {
     "seite": "Michelberger Hotel (Berlin)",
     "url": "https://www.michelbergerhotel.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Gatsby 3.13.1. Nur 'Untitled Sans' Regular und Italic per @font-face (eine Schrift, ein Gewicht). Übergänge opacity 300ms linear und 600ms linear. Eigene Datumsauswahl auf der Seite (Klassen CalendarDay__default, CalendarDay__blocked_minimum_nights, __blocked_out_of_range → Mindestaufenthalt wird im Kalender gezeigt). Sprachen Deutsch/Englisch.",
     "herkunft": "beobachtet",
     "quelle": "https://www.michelbergerhotel.com/ (HTML + Gatsby-Bundles)"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "",
    "headline": "newsreader",
    "text": "mona-sans",
    "akzent": "",
    "groessen": "h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader opsz 72, wght 300–400, Laufweite -0.015em, Zeilenhöhe 1.05; Kursiv für Ortsnamen/Akzente (wie Tiempos Fine Italic bei Hoxton). Labels und Buttons Mona Sans wdth 112–125 (breit wie GT America Extended), 0.75rem Versal, Laufweite 0.06em; Fließtext Mona Sans wdth 100, 1.0625rem, Zeilenhöhe 1.6.",
    "techniken": [
     "serif-grotesk-duotone",
     "optische-groessen-opsz",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Eigenprojekt: Paarung hairline-hero (zodiak + instrument-sans) oder sentient als Headline (ITF). Michelberger-Variante (eine Grotesk, ein Gewicht) template-tauglich mit hanken-grotesk."
   },
   "farbe": {
    "prinzip": "Sand und Creme als Grund, warmes Dunkelbraun-Grau statt Schwarz, ein gedämpfter Naturton aus dem Haus (Holz, Stein, Pflanzen). Kein Gold, keine Verläufe – die Fotos tragen die Stimmung.",
    "beispiel": [
     "#F3EEE7 Grund (Aman Sand)",
     "#FEF2E3 Creme für Buchungsleiste/Karten (Hoxton)",
     "#3E3A37 Text/Footer (Hoxton)",
     "#D5D1C8 Linien, Rahmen",
     "#82847F Sekundärtext, Meta (Aman)",
     "#6E5A47 Hauston für Buttons (frei gewählt aus dem Interieur, hier Beispiel Holz)",
     "#6A6C67 Meta-Text barrierefrei (4.6 : 1 auf #F3EEE7; #82847F nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-luxus-weich",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder und Hero-Wechsel); UI über animationsstil_ui",
    "beobachtet": "Deckkraft 300/600 ms linear (Michelberger), .4s (Aman), .5–.6s (Hoxton); UI cubic-bezier(0.4, 0, 0.2, 1) 150–250 ms",
    "dauer_ms": "300–600 (Deckkraft, linear oder sine, wie Michelberger), 400 (UI-Farben, Rahmen wie Aman), 900–1200 (Bild-Crossfades/Hero-Wechsel)",
    "regel": "Lange, sanfte Kurven nur für Bilder und Hero-Wechsel; Buchungsleiste, Datumsauswahl und Formulare reagieren in 150–250 ms über animationsstil_ui token-toggle-asymmetrisch. Keine Federn, kein Überschwingen, kein Dauer-Ken-Burns – höchstens einmaliges Zurückskalieren 1.06 → 1.",
    "herkunft": "beobachtet (Michelberger opacity 300/600 ms linear; Aman .4s; Hoxton .5–.6s); Sinus-Kurve aus token-luxus-weich"
   },
   "hero_beschreibung": "Foto-Hero als Standard: ein starkes, echtes Foto von Haus, Zimmer oder Lage, Name und ein Satz zur Lage; die Buchungsleiste liegt halb darüber. cinematic-video-hero nur als Variante mit eigenem, hochwertigem Footage (stumm, Poster, Pause-Knopf, mobil Standbild); Pensionen und Ferienwohnungen bleiben beim Foto.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "vollbild-overlay-menue-bildvorschau",
     "native-popover-dropdowns",
     "mobile-bottom-navigation"
    ],
    "hero": [
     "foto-hero-mit-leiste"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Buchungsleiste (Datum, Gäste) direkt unter dem Hero",
      "muster": [
       "buchungsleiste-datumsbereich"
      ],
      "varianten": {
       "buchungsleiste-datumsbereich": "leiste"
      }
     },
     {
      "zweck": "Zimmer & Suiten",
      "muster": [
       "akkordeon-panels",
       "galerie-shared-element-vollbild",
       "karussell-steuerung"
      ],
      "varianten": {
       "galerie-shared-element-vollbild": "produkt",
       "karussell-steuerung": "zaehler"
      }
     },
     {
      "zweck": "Restaurant / Bar / Spa",
      "muster": [
       "split-screen-sticky-seiten",
       "speisekarte-editorial"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild",
       "speisekarte-editorial": "menue"
      }
     },
     {
      "zweck": "Erlebnisse & Umgebung / Was ist los",
      "muster": [
       "editorial-magazin-layout",
       "programm-kalender"
      ],
      "varianten": {
       "editorial-magazin-layout": "zeitung",
       "programm-kalender": "programm"
      }
     },
     {
      "zweck": "Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
      "muster": [
       "css-native-karussell",
       "gutschein-konfigurator"
      ],
      "varianten": {
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis",
       "bewertungen-verteilung",
       "testimonials-neu-gedacht"
      ],
      "varianten": {
       "bewertungen-verteilung": "seitlich",
       "testimonials-neu-gedacht": "zitat",
       "bewertungsprofil-mit-echtheitshinweis": "mehrere"
      }
     },
     {
      "zweck": "Tagungen & Feiern",
      "muster": [
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild"
      }
     },
     {
      "zweck": "Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
      "muster": [
       "karte-zwei-klick",
       "kontakt-anfrage-formular"
      ],
      "varianten": {
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg"
      }
     }
    ],
    "scroll": [
     "clip-path-bild-reveal"
    ],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "animiertes-select",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild",
     "slideshow-innere-gegenparallaxe",
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "pfeil-icon-button",
     "glas-button"
    ],
    "recht": [
     "widerruf-und-kuendigung-schaltflaeche"
    ],
    "hero_varianten": {
     "foto-hero-mit-leiste": "leiste"
    }
   },
   "signatur": [
    "slideshow-innere-gegenparallaxe"
   ],
   "varianten_demo": {
    "footer-newsletter-mit-persoenlichkeit": "saison",
    "bild-zoom-in-maske": "gegen",
    "glas-button": "frost",
    "pfeil-icon-button": "tausch",
    "mobile-bottom-navigation": "basis",
    "galerie-shared-element-vollbild": "produkt",
    "css-native-karussell": "peek",
    "studio-visitenkarte-footer": "gastgeber",
    "slideshow-innere-gegenparallaxe": "hero"
   },
   "nicht_verwenden": [
    "gaussian-splats – Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser",
    "3d-karussell-zylinder – Zimmerfotos seitlich verzerrt",
    "smooth-scroll-lenis – verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames",
    "logo-aufbau-intro / prozent-zaehler – Gäste wollen sofort Verfügbarkeit sehen",
    "magnetische-elemente – Agentur-Geste, passt nicht zum Gastgeber-Ton",
    "konfetti-erfolg nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger"
   ],
   "regeln": [
    "Buchungsleiste (Anreise, Abreise, Gäste, Button) direkt unter dem Hero und mobil als feste untere Leiste – wie Hoxton und Aman.",
    "Mindestaufenthalt und belegte Tage schon im Kalender zeigen (Michelberger), nicht erst im Buchungsschritt.",
    "Hero-Film nur mit eigenem Material, stumm, mit Poster und Pause; sonst ein starkes Foto.",
    "Direktbuchungs-Vorteile klar benennen (Hoxton 'Why Book With Us?'), Preise mit 'ab' und Zeitraum.",
    "Serif nur für Headlines und kurze Zitate; Labels breit und versal, Fließtext neutral.",
    "Zimmerkategorien mit Größe, Bettenart, Ausblick und 3–6 Fotos; Detailbilder im Vollbild per Shared-Element-Übergang.",
    "Mehrsprachig (mindestens DE/EN) mit Sprachwahl im Header.",
    "Lage und Anreise als eigene Sektion und zusätzlich im Footer als Visitenkarte; Karte erst nach Klick laden.",
    "Buchungsleiste, Datumsauswahl, Menüs und Drawer nutzen token-toggle-asymmetrisch (öffnen ca. 300 ms mit Ausklang-Kurve, schließen ca. 200 ms); token-luxus-weich gilt nur für Bilder und Hero-Wechsel.",
    "Pflichtangaben und Recht (Leitfaden 8a): Preise inkl. MwSt. als Gesamtpreis mit allen unvermeidbaren Kosten, Kurtaxe bzw. Übernachtungssteuer erkennbar; Storno- und Zahlungsbedingungen vor der Buchung; für Beherbergung gilt meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; Erklärung zur Barrierefreiheit (bfsg) bei Online-Buchung; Plattform-Bewertungen nur mit Echtheitshinweis (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Gästefotos nur mit Einwilligung – vom Kunden prüfen lassen.",
    "Auf dem Telefon nur eine untere Leiste: Buchen gehört in mobile-bottom-navigation, keine zweite feste Buchungsleiste darüber.",
    "Gutscheine online verkaufen heißt Verbrauchervertrag: dann gehört widerruf-und-kuendigung-schaltflaeche dazu (Abschnitt 8a, vom Kunden prüfen lassen).",
    "glas-button nur über Fotos (Hero, Slideshow). Auf Creme und in Formularen gilt pfeil-icon-button in der Hausfarbe."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Booking-Engine-Widget (iFrame oder Script) erst bei Interaktion laden, Leiste vorher selbst gerendert und Parameter per URL übergeben. Video-Hero unter 4 MB, mobil Poster. Kein Parallax; die innere Gegenbewegung der Slideshow entfällt bei reduced motion.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Ferienwohnung / Pension (wenige Einheiten)",
     "hinweis": "Für Ferienwohnungen, Ferienhäuser und kleine Pensionen mit etwa einer bis acht Einheiten. Schrift, Farbe, Stil und Signatur bleiben; slideshow-innere-gegenparallaxe nur für die Bilder der Einheiten, nie im Kalender. buchungsleiste-datumsbereich auf der Startseite in der Variante leiste, auf jeder Wohnungsseite in der Variante zimmer (Buchungskarte rechts, Gesamtpreis unter dem Formular); belegte Tage, Mindestaufenthalt und An- bzw. Abreisetage stehen schon im Kalender. Bei nur einer Wohnung mit wenigen Anfragen statt Online-Buchung den Belegungskalender als Ansicht und darunter kontakt-anfrage-formular (wann_nicht von buchungsleiste-datumsbereich). Widgets von Channel-Manager oder Buchungsportal über termin-buchung-zwei-klick (Variante platzhalter, mobil linkout), Telefon und E-Mail daneben. Saisonpreise ab drei Einheiten als vergleichstabelle-sticky, sonst als einfache Tabelle. Gastgeber:innen mit team-ueber-mich-layout, Variante statement. Recht: Endpreis inkl. Endreinigung, Bettwäsche und Nebenkosten, wenn sie in jedem Fall anfallen (PAngV; OLG Schleswig 22.03.2013, 6 U 27/12); Kurtaxe bzw. Gästebeitrag als kommunale Abgabe getrennt und gut sichtbar nennen (Empfehlung des DTV); Anzahlung, Storno und Zahlungsarten vor der Buchung; für Beherbergung zu festen Terminen meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; eine Registriernummer anzeigen, wo die Gemeinde eine Registrierung verlangt (Zweckentfremdungssatzung; die EU-Verordnung 2024/1028 zur Kurzzeitvermietung gilt seit Mai 2026, ein bundesweites Register gibt es nicht); BFSG bei Online-Buchung prüfen (Kleinstunternehmen ausgenommen) – vom Kunden prüfen lassen.",
     "sektionen": [
      "Belegung und Preis direkt unter dem Hero (Kalender mit belegten Tagen und Mindestaufenthalt; Gesamtpreis für den Zeitraum inkl. Endreinigung, Kurtaxe getrennt daneben)",
      "Die Wohnungen bzw. Zimmer (je Einheit Größe, Betten, Ausstattung, 3–6 Fotos, Buchungskarte)",
      "Direkt buchen oder anfragen (eigene Buchung, Widget per 2-Klick oder Anfrage; Vorteile der Direktbuchung als Text)",
      "Preise und Bedingungen (Saisonpreise, Endreinigung, Bettwäsche, Haustiere, Anzahlung, Storno)",
      "Ihre Gastgeber:innen (wer da ist, Schlüsselübergabe, Erreichbarkeit)",
      "Umgebung und Anreise (Adresse als Text, Karte per 2-Klick, Parken, ÖPNV)",
      "Gästestimmen (Plattform-Bewertungen mit Echtheitshinweis)",
      "Erklärung zur Barrierefreiheit (bei Online-Buchung Variante BFSG prüfen)"
     ],
     "weglassen": [
      "Restaurant / Bar / Spa",
      "Tagungen & Feiern",
      "Angebote & Pakete (höchstens eine Zeile, wenn es echte Pakete gibt)",
      "Gutscheine (nur mit Zahlungsdienst und Codeverwaltung)"
     ],
     "muster_zusatz": [
      "termin-buchung-zwei-klick",
      "vergleichstabelle-sticky",
      "team-ueber-mich-layout"
     ]
    }
   ],
   "stimmung_tags": [
    "warm",
    "luxuriös",
    "ruhig"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     168
    ],
    "sektion": "clamp(88px, 11vw, 168px)",
    "dichte": "luftig",
    "hinweis": "Werte wie im Starter (starter/boutique-hotel-gastgeber/tokens.css: --s-1 bis --s-8, --sektion). Bilder und Kapitel mit viel Luft, die Buchungsleiste dagegen kompakt mit 56 px Höhe."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(18px, 3.6vw, 56px)",
    "spalt": "clamp(16px, 2.4vw, 32px)",
    "max_breite": "1320px",
    "hinweis": "Hero und Zimmerbilder randlos, Text auf 62ch. Zimmer als 2er-Raster mit 3:2-Bildern, Lage und Anreise 6/6."
   },
   "form": {
    "radius_klein": "6px",
    "radius_gross": "6px",
    "pille": true,
    "linie": "1px #D5D1C8 für Linien und Rahmen (nur Deko); Feldrahmen #8f877c",
    "schatten": "keiner; der einzige Material-Effekt ist der Glas-Knopf über dem Hero-Foto (glas-button, Variante frost)",
    "hinweis": "Knöpfe als Pille (Starter --knopf-radius 999px), Karten und Popover 6 px (Starter --radius)."
   },
   "bildsprache": {
    "licht": "Weiches Tageslicht am Morgen oder Abend, warme Töne, Schatten erlaubt; nichts aufgehellt.",
    "ausschnitt": "Haus in der Landschaft, Zimmer mit Blick aus dem Fenster, Details wie Bettwäsche, Frühstück, Material.",
    "personen": "Selten: Gäste von hinten oder klein im Bild, Gastgeber:innen mit Namen; Gästefotos nur mit Einwilligung.",
    "formate": [
     "3:2",
     "4:5",
     "16:9"
    ],
    "nicht": "Keine Weitwinkel-Zimmer, keine Pool- und Spa-Stockfotos, kein Gold, keine Verläufe, keine 3D-Rundgänge im Hero."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Ruhig und gastlich, kurze Sätze mit Ort und Zahl. Preise immer mit „ab“ und Zeitraum.",
    "haltung": "Gastgeber:in, nicht Buchungsportal. Direktbuchungs-Vorteile klar und ohne Druck.",
    "beispiele": [
     "Zwölf Zimmer am See, zehn Minuten zu Fuß zum Wasser.",
     "Direkt bei uns gebucht: Frühstück und späte Abreise inklusive."
    ],
    "nicht": "„Ihre Auszeit vom Alltag“, „Wohlfühloase“, „einzigartiges Erlebnis“, Countdown oder „Nur noch 1 Zimmer“ ohne echte Zahl."
   },
   "hero_aufbau": {
    "raster": "Foto randlos über die volle Breite bis knapp über die Bildschirmunterkante; Text unten links über Spalte 1 bis 6.",
    "bild": "Ein starkes, echtes Foto, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Footage, mobil Standbild.",
    "h1": "clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader 300–400, unten links, Ortsname kursiv.",
    "handlung": "Buchungsleiste (Anreise, Abreise, Gäste, „Verfügbarkeit prüfen“) liegt halb über der Bildunterkante, über 10 Spalten; mobil als feste untere Leiste.",
    "zusatz": "Kein Versal-Label über der H1 (C13), der Ort steht kursiv in der H1. Sprachwahl DE/EN im Kopf. Umsetzung: foto-hero-mit-leiste/leiste."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "gaussian-splats"
     ],
     "grund": "Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser"
    },
    {
     "ids": [
      "3d-karussell-zylinder"
     ],
     "grund": "Zimmerfotos seitlich verzerrt"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames"
    },
    {
     "ids": [
      "logo-aufbau-intro",
      "prozent-zaehler"
     ],
     "grund": "Gäste wollen sofort Verfügbarkeit sehen"
    },
    {
     "ids": [
      "magnetische-elemente"
     ],
     "grund": "Agentur-Geste, passt nicht zum Gastgeber-Ton"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger"
    }
   ],
   "starter": "https://cecodesign.de/lab/fundus/starter/boutique-hotel-gastgeber/index.html",
   "alle_muster": [
    {
     "id": "slideshow-innere-gegenparallaxe",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/meta.json",
     "variante": "hero",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=hero"
    },
    {
     "id": "foto-hero-mit-leiste",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "buchungsleiste-datumsbereich",
     "rolle": "Sektion: Buchungsleiste (Datum, Gäste) direkt unter dem Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=leiste"
    },
    {
     "id": "akkordeon-panels",
     "rolle": "Sektion: Zimmer & Suiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Zimmer & Suiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "karussell-steuerung",
     "rolle": "Sektion: Zimmer & Suiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/meta.json",
     "variante": "zaehler",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Restaurant / Bar / Spa",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "speisekarte-editorial",
     "rolle": "Sektion: Restaurant / Bar / Spa",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json",
     "variante": "menue",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=menue"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Erlebnisse & Umgebung / Was ist los",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "zeitung",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Erlebnisse & Umgebung / Was ist los",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "gutschein-konfigurator",
     "rolle": "Sektion: Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "mehrere",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere"
    },
    {
     "id": "bewertungen-verteilung",
     "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
     "variante": "seitlich",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=seitlich"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "zitat",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
     "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": "kontakt-anfrage-formular",
     "rolle": "Sektion: Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "vollbild-overlay-menue-bildvorschau",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis"
    },
    {
     "id": "clip-path-bild-reveal",
     "rolle": "Scroll",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/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": "gegen",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "gastgeber",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "saison",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "id": "glas-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/glas-button/meta.json",
     "variante": "frost",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=frost"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Recht (nur wenn die Bedingung zutrifft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json"
    },
    {
     "id": "token-luxus-weich",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/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": "serif-grotesk-duotone",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/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": "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"
    }
   ]
  },
  {
   "id": "freelancer-stille-visitenkarte",
   "name": "Freelancer: Stille Visitenkarte",
   "branche": "Freelance-Designer, Interaction-Designer, Einzelberater mit Portfolio",
   "stimmung": [
    "ruhig",
    "präzise",
    "persönlich",
    "handwerklich"
   ],
   "kurz": "Eine schmale Lesespalte, ein einleitender Satz statt Hero und Bewegung im 100-ms-Bereich. Die Qualität zeigt sich in Details wie Laufweite, Ziffern, Fokus und Kopier-Feedback, nicht in Effekten. Gebaut wie die Seiten von Paco Coursey, Emil Kowalski und Rauno Freiberg: Grotesk für alles, eine Serif-Kursive als Stimme, Mono für Metadaten.",
   "referenzen": [
    {
     "seite": "Paco Coursey",
     "url": "https://paco.me/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_next/static/chunks/6f8cd1f2e1c78e16.css, 043ac70fdbeb5d40.css, 1902af4af6f089fe.css",
     "beobachtung": "Next.js. @font-face: Sohne, Inter und Newsreader, jeweils als Subset (sohne-subset-0.woff2, newsreader-subset-0.woff2). Tokens: --content-width 640px, --page-width 1072px; --text 16px, --text-s 14px, --text-xs 12px; --leading-s 20px, --leading-l 32px. Dauer-Tokens --transition-fastest 80ms, -fast .1s, -med .16s, -xx .24s, -xxl .32s, -long .48s, -slow 1.2s; dazu ein kompletter Satz Penner-Kurven als CSS-Variablen (z. B. --ease-out-quart cubic-bezier(.165,.84,.44,1)). Zwei Werte für --text-color (#3a3a3a/#e5e5e5), also ein Dark Mode. Abschnitte als h2: Building → Projects → Writing → Now → Connect."
    },
    {
     "seite": "Emil Kowalski",
     "url": "https://emilkowal.ski/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_next/static/css/d54e455ee7d8468f.css (@font-face), /_next/static/css/747876a3d8c444e8.css (Kurven)",
     "beobachtung": "Next.js mit next/font: Sans, Serif, Mono und eine eigene „serifInline“ für kursive Wörter im Fließtext. --font-variations \"opsz\" auto, --font-settings \"cv01\",\"ss03\". Bewegung: cubic-bezier(.4,0,.2,1) 12×, Dauer .15s 12×; transform .2s cubic-bezier(.165,.84,.44,1); Hintergrund .12s. Palette fast nur Grau: #0b0b09, #252525, #989898, #d6d6d6, #f8f8f8. Header als Spalte (mb-32 flex flex-col)."
    },
    {
     "seite": "Rauno Freiberg",
     "url": "https://rauno.me/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_next/static/css/e621362aa87785a2.css, /_next/static/css/647af292b7760dc7.css",
     "beobachtung": "Next.js. @font-face: eigene Sans „X“ und JetBrains Mono, Serif per System (--fonts-serif: Georgia). --transitions-snappy cubic-bezier(.2,.8,.2,1); Zeilen blenden gestaffelt ein (data-transition-lines, --line-fade-duration, --line-fade-delay, ease-in-out). h1 ist ein ganzer Satz: „Rauno Freiberg is an Estonian interaction designer working with Vercel …“. prefers-reduced-motion berücksichtigt."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "",
    "headline": "host-grotesk",
    "text": "host-grotesk",
    "akzent": "newsreader",
    "techniken": [
     "eine-familie-wenig-gewichte",
     "gemischte-schnitte-zeile",
     "lesesatz-text-wrap",
     "text-box-trim",
     "tabellenziffern"
    ],
    "groessen": "Kein Riesen-Hero: h1 als Satz clamp(1.25rem, 2vw, 1.5rem), wght 500, line-height 1.4. h2 1rem, wght 500, Farbe Sekundärgrau. Fließtext 1rem/1.6 (Paco 16px, Leading 20–32px), Klein 0.875rem. Spalte max-width 640px (Paco --content-width), Seite 1072px. Newsreader Italic nur für einzelne Wörter im Satz, 1.05em, opsz auto. Laufweite 0 bis -0.01em. Host Grotesk nur in 400 und 500.",
    "alternative_eigenprojekt": "Switzer oder Satoshi statt Host Grotesk (ITF-FFL); näher an Söhne/Paco ist Switzer"
   },
   "farbe": {
    "prinzip": "Fast nur Graustufen in 8–10 Stufen (Paco #fcfcfc bis #646464, Emil #0b0b09 bis #f8f8f8), Kontrast über Grauwert statt über Farbe. Höchstens eine Farbe für Fokus- und Link-Zustände. Dark Mode als gleichwertige Variante.",
    "beispiel": [
     "#fcfcfc Grund",
     "#0b0b09 Text",
     "#646464 Sekundärtext, h2",
     "#e8e8e8 Linien, Trenner",
     "#f0f0f0 Hover-Fläche",
     "#2f5bea Fokus-Ring und Link-Hover (einzige Farbe)"
    ]
   },
   "animationsstil": "token-tech-praezise",
   "bewegung": {
    "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9)",
    "beobachtet": "Dauer-Tokens 80–480 ms (Paco); cubic-bezier(.4,0,.2,1) .15s und easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1) .2s (Emil); „snappy“ cubic-bezier(.2,.8,.2,1) (Rauno)",
    "dauer_ms": "Hover/Farbe 80–160, Transform 200–240, Einblendungen 320–480, nie über 500 außer Theme-Wechsel",
    "regel": "Kurze Dauern aus den Tokens, nichts federt, nichts dreht sich. Exits schneller als Entrances (Austrittskurve). Einziges Inszenierungsmoment ist das gestaffelte Einblenden der Intro-Zeilen beim ersten Laden."
   },
   "hero_beschreibung": "Kein Hero-Muster: ein Intro-Satz in Textgröße (Name, Rolle, Kunden, Ort, 1–2 Wörter kursiv in Newsreader), der beim ersten Laden zeilenweise gestaffelt erscheint (Sektion „Intro-Satz“).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "theme-umschalter-view-transition"
    ],
    "hero": [],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Intro-Satz (ersetzt den Hero)",
      "muster": [
       "gestaffelte-einblendung"
      ]
     },
     {
      "zweck": "Projekte / Arbeiten",
      "muster": [
       "projektindex-hover-vorschau"
      ]
     },
     {
      "zweck": "Angebot / Leistungen (was ich mache, für wen, wie man anfragt)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "basis"
      }
     },
     {
      "zweck": "Schreiben / Notizen",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Über mich / Jetzt",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Stimmen von Kunden",
      "muster": [
       "testimonials-neu-gedacht"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "zitat"
      }
     },
     {
      "zweck": "Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)",
      "muster": [
       "kopieren-feedback",
       "kontakt-anfrage-formular"
      ],
      "varianten": {
       "kontakt-anfrage-formular": "satz"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "listen-hover-bildvorschau",
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "kopieren-feedback",
     "gestaffelte-einblendung",
     "einblenden-starting-style",
     "druck-feedback"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "pfeil-icon-button",
     "kopieren-feedback"
    ]
   },
   "signatur": [
    "gestaffelte-einblendung"
   ],
   "varianten_demo": {
    "galerie-shared-element-vollbild": "basis",
    "studio-visitenkarte-footer": "basis",
    "theme-umschalter-view-transition": "tokens",
    "pfeil-icon-button": "seitenwechsel"
   },
   "nicht_verwenden": [
    "smooth-scroll-lenis – die Seite wird gelesen; Trägheit stört beim Lesen und ist bei keiner der drei Seiten im Einsatz",
    "schrift-hero-viewportbreit – widerspricht der leisen Haltung; die Referenzen beginnen mit Namen oder Satz in Textgröße",
    "kontextueller-cursor, cursor-follower-lerp, magnetische-elemente – Inszenierung statt Präzision",
    "prozent-zaehler und jede Art Preloader – die Seite ist klein und soll sofort stehen",
    "marquee-laufband – laut und repetitiv, bricht die Lesespalte",
    "Inter als Hauptschrift – Paco nutzt sie, sie steht aber auf der Verbotsliste (KI-Standardlook); Host Grotesk stattdessen"
   ],
   "regeln": [
    "Eine Spalte, max. 640px breit, linksbündig; Seite max. 1072px.",
    "Hero ist ein Satz in Textgröße: Name, Rolle, Arbeitgeber/Kunden, Ort, mit 1–2 kursiv gesetzten Wörtern in Newsreader.",
    "Nur zwei Gewichte (400/500); Hierarchie über Grauwert und Abstand, nicht über Größe.",
    "Jede Interaktion bekommt einen Zustand: Hover 80–160 ms, Fokus-Ring sichtbar, E-Mail-Adresse mit Kopier-Feedback.",
    "Jahreszahlen und Daten in Tabellenziffern, rechtsbündig in Listen.",
    "Dark Mode gleichwertig mitgestalten (Paco: zwei Textfarben-Token), Umschalten per View Transition.",
    "Bilder nur in Projektseiten oder als Hover-Vorschau; Startseite funktioniert als reiner Text.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum auch als Freelancer (geschäftsmäßiges Angebot) und Datenschutzerklärung; Kundenprojekte und Logos nur mit Freigabe; Arbeiten aus Anstellung nur mit Erlaubnis des Arbeitgebers – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Ideal für statische Auslieferung: zwei Schriftdateien als Subset (Paco lädt nur Subsets), kein JS-Framework für Animationen nötig, alles mit CSS-Transitions, @starting-style und View Transitions. Sehr gute Lighthouse-Werte erreichbar. Mobil identisch, weil schon einspaltig.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "ruhig",
    "präzise"
   ],
   "raum": {
    "basis_px": 4,
    "skala_px": [
     4,
     8,
     12,
     16,
     20,
     24,
     32,
     48,
     64,
     96
    ],
    "sektion": "clamp(48px, 6vw, 80px)",
    "dichte": "dicht",
    "hinweis": "Dichter Rhythmus in einer schmalen Spalte: Zeilen 20 bis 32 px (Paco), Listeneinträge 12 px, Abschnitte 48 bis 80 px. Ruhe entsteht durch den breiten Rand, nicht durch große Sprünge."
   },
   "raster": {
    "spalten": 1,
    "rand": "clamp(20px, 5vw, 48px)",
    "spalt": "24px",
    "max_breite": "640px (Spalte), Seite 1072px",
    "hinweis": "Eine Spalte, linksbündig. Jahreszahlen in Listen rechtsbündig in Tabellenziffern. Projektseiten dürfen Bilder bis 1072px zeigen."
   },
   "form": {
    "radius_klein": "6px",
    "radius_gross": "8px",
    "pille": true,
    "linie": "1px #e8e8e8 als Trenner",
    "schatten": "keiner; Hover nur über Fläche #f0f0f0",
    "hinweis": "Konturpille für den Kontakt (pfeil-icon-button, Variante seitenwechsel), 6 px für Hover-Flächen und Kopier-Feedback, 8 px für Vorschaubilder."
   },
   "bildsprache": {
    "licht": "Neutral, Screenshots und Prototyp-Videos scharf auf neutralem Grund; Dark Mode mitgedacht.",
    "ausschnitt": "Ausschnitt einer echten Oberfläche, auf die Interaktion gezoomt.",
    "personen": "Höchstens ein Porträt auf der Info-Seite.",
    "formate": [
     "16:10",
     "4:3",
     "1:1"
    ],
    "nicht": "Keine Bilder auf der Startseite außer als Hover-Vorschau, keine Device-Mockups, keine Stock-Arbeitsplätze."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Ich-Form, ganze Sätze in Textgröße, ein bis zwei kursive Wörter als Stimme. Listen knapp mit Jahr.",
    "haltung": "Leise und genau. Die Leser:in wird selten angesprochen; bei Beratung für Firmen Sie verwenden.",
    "beispiele": [
     "Ich gestalte Oberflächen für Werkzeuge, die man jeden Tag benutzt.",
     "Schreib mir, wenn du an etwas Ähnlichem arbeitest."
    ],
    "nicht": "„Passionate Designer“, Skill-Balken in Prozent, „Ich brenne für …“, Logo-Wände ohne Kontext."
   },
   "hero_aufbau": {
    "raster": "Eine Spalte, 640px, linksbündig; kein eigener Hero-Block.",
    "bild": "Kein Bild.",
    "h1": "clamp(1.25rem, 2vw, 1.5rem), Host Grotesk 500, Zeilenhöhe 1.4, als ganzer Satz oben links.",
    "handlung": "Kein CTA-Paar: E-Mail-Adresse mit Kopier-Feedback (kopieren-feedback) und ein Textlink zu den Arbeiten.",
    "zusatz": "Der Satz erscheint zeilenweise gestaffelt (gestaffelte-einblendung); 1 bis 2 Wörter in Newsreader Italic; Ort und Rolle in #646464."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/freelancer-stille-visitenkarte/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/freelancer-stille-visitenkarte/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/freelancer-stille-visitenkarte/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/freelancer-stille-visitenkarte/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "die Seite wird gelesen; Trägheit stört beim Lesen und ist bei keiner der drei Seiten im Einsatz"
    },
    {
     "ids": [
      "schrift-hero-viewportbreit"
     ],
     "grund": "widerspricht der leisen Haltung; die Referenzen beginnen mit Namen oder Satz in Textgröße"
    },
    {
     "ids": [
      "kontextueller-cursor"
     ],
     "grund": ", cursor-follower-lerp, magnetische-elemente – Inszenierung statt Präzision"
    },
    {
     "ids": [
      "prozent-zaehler"
     ],
     "grund": "und jede Art Preloader – die Seite ist klein und soll sofort stehen"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "laut und repetitiv, bricht die Lesespalte"
    },
    {
     "ids": [],
     "grund": "Inter als Hauptschrift – Paco nutzt sie, sie steht aber auf der Verbotsliste (KI-Standardlook); Host Grotesk stattdessen"
    }
   ],
   "alle_muster": [
    {
     "id": "gestaffelte-einblendung",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/gestaffelte-einblendung/meta.json"
    },
    {
     "id": "projektindex-hover-vorschau",
     "rolle": "Sektion: Projekte / Arbeiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Angebot / Leistungen (was ich mache, für wen, wie man anfragt)",
     "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": "editorial-magazin-layout",
     "rolle": "Sektion: Schreiben / Notizen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "magazin",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Über mich / Jetzt",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Stimmen von Kunden",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "zitat",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Sektion: Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json",
     "variante": "satz",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=satz"
    },
    {
     "id": "theme-umschalter-view-transition",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/meta.json",
     "variante": "tokens",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=tokens"
    },
    {
     "id": "listen-hover-bildvorschau",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/meta.json"
    },
    {
     "id": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "seitenwechsel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=seitenwechsel"
    },
    {
     "id": "token-tech-praezise",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json"
    },
    {
     "id": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
    },
    {
     "id": "gemischte-schnitte-zeile",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "text-box-trim",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    }
   ]
  },
  {
   "id": "fotograf-film-bild-zuerst",
   "name": "Fotografie und Film: Bild zuerst",
   "branche": "Fotografie, Bewegtbild, Regie, Produktionsfirma",
   "stimmung": [
    "zurückhaltend",
    "filmisch",
    "kuratiert",
    "ruhig"
   ],
   "kurz": "Die Oberfläche tritt fast vollständig zurück: kleine Typo, neutrale Fläche, Bildwechsel per Crossfade, Zähler und Bildunterschrift. Fotografen wie Nadav Kander und Tim Walker animieren praktisch nur die Opazität. Produktionsfirmen wie Partizan setzen auf Video-Vorschau beim Hover und ein 24-Spalten-Raster. Bewegung gibt es nur beim Wechsel zwischen Bildern, nie auf dem Bild selbst.",
   "referenzen": [
    {
     "seite": "Nadav Kander",
     "url": "https://www.nadavkander.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/assets/css/style.css?v=1.46, /assets/js/main.min.js",
     "beobachtung": "@font-face: Univers Next W01, sonst nichts. Startseite ist eine kuratierte Vollbild-Slideshow (Swiper: .swiper-curated mit __caption, __count, __info; 44 Bilder als .swiper-lazy). Übergänge fast nur Opazität: opacity 200ms (12×), 500ms, opacity 350ms cubic-bezier(0.455,0.03,0.515,0.955) (5×, easeInOutQuad). Fläche #e6e6e6 (36×) als Platzhalter-Grau. Header mit Fade (site-header--fade), schlichte site-nav."
    },
    {
     "seite": "Tim Walker",
     "url": "https://www.timwalkerphotography.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "HTML-Inline-CSS (Nuxt-SSR), /_nuxt/*.js",
     "beobachtung": "Nuxt. Inline-@font-face: cardinal (Cardinal Classic Mid Regular und Italic) und Fann Grotesque Light Pro. Header in Serif (header type--serif), Navigation in Abschnitten (header__nav__section, --current-title zeigt den aktuellen Titel). Übergänge nur Opazität: .5s, .75s mit .5s Verzögerung, 1s; Farbe .5s. Laufweite -.025em bis .1em. Startseite: Bio (landing__bio) und portfolio--selectedwork."
    },
    {
     "seite": "Partizan",
     "url": "https://partizan.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "https://partizan.com/wp-content/themes/beaucoup/public/css/app.a215b9.css, /public/js/app.6a6f75.js",
     "beobachtung": "WordPress-Theme „beaucoup“ mit Taxi.js-Seitenübergängen (data-taxi, data-taxi-view), GSAP und Lenis (data-lenis-prevent). @font-face: GT America Standard und Teodor (Serif). Raster grid-template-columns repeat(24,minmax(0,1fr)). Arbeitskarten: video.card-work-video data-src mit 800px-MP4, Klassen opacity-0 scale-105, sichtbar bei Hover; .duration-smooth = 0,6 s, .ease-out = cubic-bezier(.23,1,.32,1); Titel blendet bei group-hover ein. Im Bundle: ease \"expo.out\" 34×, eigene Kurve \"beaucoup.alpha\" 67×, Dauern .3/.4/.8 s. Regionswahl im Header (header-regions)."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "instrument-serif hat im Katalog die Rolle „Akzent“; hier bewusst als Headline gesetzt – aber nur für Namen und Projekttitel, nie für längere Überschriften.",
    "headline": "instrument-serif",
    "text": "instrument-sans",
    "akzent": "fragment-mono",
    "techniken": [
     "mono-labels-versal",
     "tabellenziffern",
     "text-box-trim",
     "eine-familie-wenig-gewichte"
    ],
    "groessen": "Typo bleibt klein und dient dem Bild. Name/Logo 1.25–1.5rem Instrument Serif, Projekttitel clamp(1.5rem, 3vw, 2.75rem) Instrument Serif 400, line-height 1.1, -0.01em. UI und Text Instrument Sans 0.875–1rem/1.5, wdth 90–100. Bildunterschrift und Zähler („12 / 44“) Fragment Mono 0.75rem, tabular-nums, +0.02em. Kein Text über dem Bild außer im Film-Hero.",
    "alternative_eigenprojekt": "editorial-boska (Boska + Satoshi); für Film-Produktionen Switzer als GT-America-Ersatz"
   },
   "farbe": {
    "prinzip": "Neutrale Fläche, die keine Farbe ins Bild wirft. Hell für Fotografie (warmes Hellgrau wie Nadav #e6e6e6 als Platzhalter), dunkel für Film. Text in einem Ton, Akzentfarbe nur, wenn die Marke sie verlangt.",
    "beispiel": [
     "#f4f4f2 Grund Fotografie",
     "#141414 Text",
     "#e6e6e6 Bild-Platzhalter vor dem Laden",
     "#8a8a8a Bildunterschrift, Zähler",
     "#0e0e0e Grund Film-Variante",
     "#f2f2f2 Text auf Film-Grund",
     "#6D6D6D Meta-Text barrierefrei (4.7 : 1 auf #f4f4f2; #8a8a8a nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-kinetisch-inout",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "Nur die weiche Kurve des Stils (--ease-cinematic-soft, cubic-bezier(0.76, 0, 0.24, 1)) und die Dauern 350–800 ms übernehmen (gemessen: symmetrisches inOut, Nadav Kander easeInOutQuad 350 ms); keine Mehr-Ebenen-Bewegung auf Werkbildern, bewegt wird nur die Opazität.",
   "bewegung": {
    "easing": "cubic-bezier(0.76, 0, 0.24, 1) (token-kinetisch-inout, weiche Kurve --ease-cinematic-soft) für Bild- und Seitenwechsel; UI über animationsstil_ui",
    "beobachtet": "easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955) 350 ms (Nadav Kander); nur Opazität .5–1 s (Tim Walker); Film-Karten scale 1.05 → 1 in 0,6 s cubic-bezier(.23,1,.32,1) (Partizan scale-105)",
    "dauer_ms": "Bildwechsel 350–800, Hover-Video-Einblendung 600, UI 200, Seitenwechsel 500–800",
    "regel": "Weiche inOut-Kurve des Stils für Bildwechsel (Crossfade). Bewegt wird die Opazität, nie Position oder Maßstab des Werks. Ausnahme Film-Karten: Video skaliert beim Einblenden einmal von 1.05 auf 1 (0,6 s). Menü, Anfrage und Pakete über animationsstil_ui token-toggle-asymmetrisch."
   },
   "hero_beschreibung": "Bild zuerst: ein Werk randlos (Foto oder Standbild), Name und Disziplin in den Ecken (seitenrand-und-ecken-navigation). cinematic-video-hero nur bei Bewegtbild mit eigenem Showreel (stumm, Poster, Pause-Knopf); Fotograf:innen starten mit einem Foto bzw. der kuratierten Auswahl.",
   "muster": {
    "seitenuebergang": [
     "vt-shared-element-morph"
    ],
    "preloader": [
     "intro-ohne-wartezeit"
    ],
    "navigation": [
     "seitenrand-und-ecken-navigation",
     "hide-on-scroll-header"
    ],
    "hero": [
     "cinematic-video-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Kuratierte Auswahl (Startseite Fotograf)",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "variable-breiten"
      }
     },
     {
      "zweck": "Arbeiten / Regie-Roster (Film)",
      "muster": [
       "video-vorschau-hover-viewport",
       "projektindex-hover-vorschau",
       "eigener-videoplayer"
      ],
      "varianten": {
       "eigener-videoplayer": "showreel"
      }
     },
     {
      "zweck": "Serien / Projekte",
      "muster": [
       "masonry-grid-lanes-galerie",
       "galerie-shared-element-vollbild",
       "skeleton-shimmer"
      ],
      "varianten": {
       "galerie-shared-element-vollbild": "serie",
       "skeleton-shimmer": "bild-platzhalter"
      }
     },
     {
      "zweck": "Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar)",
      "muster": [
       "endlos-scroll-galerie"
      ]
     },
     {
      "zweck": "Bio",
      "muster": [
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild"
      }
     },
     {
      "zweck": "Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
      "muster": [
       "kontakt-anfrage-formular",
       "akkordeon-hoehe-auto",
       "vergleichstabelle-sticky",
       "karte-zwei-klick"
      ],
      "varianten": {
       "vergleichstabelle-sticky": "pakete",
       "akkordeon-hoehe-auto": "basis",
       "karte-zwei-klick": "bild"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske",
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild",
     "video-vorschau-hover-viewport",
     "masonry-grid-lanes-galerie"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "kolophon-footer"
    ],
    "button": [
     "kontur-button-zeichnen",
     "pfeil-icon-button"
    ]
   },
   "signatur": [
    "endlos-scroll-galerie",
    "seitenrand-und-ecken-navigation"
   ],
   "varianten_demo": {
    "studio-visitenkarte-footer": "buehne",
    "kontur-button-zeichnen": "zeichnen",
    "pfeil-icon-button": "linie",
    "bild-zoom-in-maske": "basis",
    "css-native-karussell": "buehne",
    "galerie-shared-element-vollbild": "serie"
   },
   "nicht_verwenden": [
    "graustufen-zu-farbe – Farbe ist Teil des Werks; Bilder nie entsättigen",
    "webgl-bildverzerrung und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft",
    "bild-trail-cursor – macht Werke zu Konfetti",
    "grain-noise-overlay und halbton-raster – legen eine fremde Textur über fertige Bilder",
    "split-mask-reveal, scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab",
    "mehrschicht-parallax und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat"
   ],
   "regeln": [
    "Das Bild bekommt die größte Fläche; Interface-Elemente an den Rand oder in die Ecken.",
    "Bildwechsel als Crossfade 350–800 ms; das Werk selbst wird nie verschoben, verzerrt oder getönt.",
    "Jede Slideshow zeigt Zähler und Bildunterschrift in Mono (Nadav: __count, __caption).",
    "Film: Vorschau-Videos stumm, max. 800px breit, erst bei Hover oder im Viewport laden (Partizan: data-src).",
    "Platzhalter-Grau in Bildgröße (aspect-ratio) reserviert den Raum, damit nichts springt.",
    "Höchstens zwei Schriften; die Serif nur für Namen und Projekttitel.",
    "Tastatur: Pfeiltasten blättern, Esc schließt das Vollbild.",
    "Endlose Scroll-Galerie nur auf der Archivseite; Footer mit Impressum und Kontakt bleibt fest erreichbar, jede Serie hat eine eigene indexierbare Seite.",
    "Pflichtangaben und Recht (Leitfaden 8a): Personenfotos nur mit Einwilligung der Abgebildeten (KUG, DSGVO), Hochzeits- und Kinderbilder nur mit Freigabe; Paketpreise inkl. MwSt.; Musik in Filmen lizenziert; Impressum und Kontakt bleiben auch neben der endlosen Galerie erreichbar – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Bilder als AVIF/WebP mit srcset und sizes, das erste Slide mit fetchpriority=high, alle weiteren lazy (Nadav: .swiper-lazy). Vorschau-Videos 800px, unter 2 MB, preload=none, Laden erst bei Hover/Intersection. Auf Touch statt Hover-Video ein Poster mit Play-Symbol. Natives Scroll-Snap-Karussell statt Slider-Bibliothek spart rund 40 KB JS.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt: eine/n deutsche/n Hochzeits- oder Businessfotograf:in (die Referenzen sind Starfotografen) (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "filmisch",
    "ruhig"
   ],
   "raum": {
    "basis_px": 4,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     128
    ],
    "sektion": "clamp(48px, 8vw, 128px)",
    "dichte": "dicht",
    "hinweis": "Die Oberfläche ist dicht und klein, das Bild bekommt alles andere. Abstände zwischen Bildern einer Serie klein (8 bis 16 px), zwischen Serien groß."
   },
   "raster": {
    "spalten": 24,
    "rand": "clamp(12px, 2vw, 24px)",
    "spalt": "clamp(8px, 1vw, 16px)",
    "max_breite": "none",
    "hinweis": "24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "keine; Platzhalter-Grau #e6e6e6 statt Rahmen",
    "schatten": "keiner",
    "hinweis": "Nichts konkurriert mit dem Bild. Knöpfe als gezeichnete Kontur (kontur-button-zeichnen, Variante zeichnen) oder Textlink (pfeil-icon-button, Variante linie)."
   },
   "bildsprache": {
    "licht": "Wie im Werk, nie korrigiert oder getönt.",
    "ausschnitt": "Das Werk unbeschnitten im Original-Seitenverhältnis; nie für Kacheln gecroppt.",
    "personen": "Wie im Werk; keine Making-of-Selfies auf der Startseite.",
    "formate": [
     "3:2",
     "2:3",
     "16:9",
     "Original"
    ],
    "nicht": "Kein Zoom, keine Parallaxe, kein Tönen, kein Verschieben des Werks, kein Text über dem Bild außer im Film-Hero."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Fast keine Sätze: Titel, Kunde, Jahr. Bio in drei Sätzen, Kontakt als Zeile.",
    "haltung": "Kuratiert und zurückhaltend; das Werk spricht.",
    "beispiele": [
     "Küste im Winter, 2025. 24 Bilder.",
     "Anfragen für Aufträge und Lizenzen per E-Mail."
    ],
    "nicht": "„Momente für die Ewigkeit“, „Emotionen einfangen“, „Leidenschaft für Fotografie“, Preispakete auf der Startseite."
   },
   "hero_aufbau": {
    "raster": "Bild randlos über die volle Fläche (100svh), UI in den vier Ecken.",
    "bild": "Ein Werk oder Standbild; Foto im Originalformat auf neutraler Fläche, Film-Standbild 16:9 formatfüllend. cinematic-video-hero nur mit eigenem Showreel.",
    "h1": "Name 1.25–1.5rem Instrument Serif oben links; Projekttitel clamp(1.5rem, 3vw, 2.75rem) unten links.",
    "handlung": "Kein CTA-Paar; Ecken: Index oben rechts, Info und Kontakt unten rechts; Pfeiltasten blättern.",
    "zusatz": "Zähler „12 / 44“ und Bildunterschrift in Fragment Mono 0.75rem in der unteren Ecke."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "graustufen-zu-farbe"
     ],
     "grund": "Farbe ist Teil des Werks; Bilder nie entsättigen"
    },
    {
     "ids": [
      "webgl-bildverzerrung"
     ],
     "grund": "und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft"
    },
    {
     "ids": [
      "bild-trail-cursor"
     ],
     "grund": "macht Werke zu Konfetti"
    },
    {
     "ids": [
      "grain-noise-overlay"
     ],
     "grund": "und halbton-raster – legen eine fremde Textur über fertige Bilder"
    },
    {
     "ids": [
      "split-mask-reveal"
     ],
     "grund": ", scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab"
    },
    {
     "ids": [
      "mehrschicht-parallax"
     ],
     "grund": "und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat"
    }
   ],
   "alle_muster": [
    {
     "id": "endlos-scroll-galerie",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/meta.json"
    },
    {
     "id": "seitenrand-und-ecken-navigation",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/meta.json"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Kuratierte Auswahl (Startseite Fotograf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "video-vorschau-hover-viewport",
     "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/meta.json"
    },
    {
     "id": "projektindex-hover-vorschau",
     "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json"
    },
    {
     "id": "eigener-videoplayer",
     "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
     "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": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Serien / Projekte",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Serien / Projekte",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "serie",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=serie"
    },
    {
     "id": "skeleton-shimmer",
     "rolle": "Sektion: Serien / Projekte",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json",
     "variante": "bild-platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo?v=bild-platzhalter"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Bio",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; 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": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
     "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": "vergleichstabelle-sticky",
     "rolle": "Sektion: Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; 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": "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": "hide-on-scroll-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/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": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/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": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "zeichnen",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "token-kinetisch-inout",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/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": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "text-box-trim",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
    },
    {
     "id": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
    }
   ]
  },
  {
   "id": "mode-beauty-kollektion",
   "name": "Mode und Beauty: Kollektion und Ritual",
   "branche": "Mode-Label, Concept Store, Kosmetik und Hautpflege",
   "stimmung": [
    "kuratiert",
    "ruhig",
    "warm",
    "modisch"
   ],
   "kurz": "Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung. Toteme und Lemaire verkaufen mit Weißraum und Fotografie. Typology zeigt bei Beauty die Formel direkt in der Überschrift (Wirkstoff + Prozent + Preis) und setzt dafür eine Mono-Schrift. Der Shop muss schnell bedienbar bleiben, deshalb wird die UI knapp animiert.",
   "referenzen": [
    {
     "seite": "Toteme",
     "url": "https://toteme.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "https://toteme.com/cdn/shop/t/430/assets/theme.css",
     "beobachtung": "Shopify. @font-face: nur „Toteme Sans“ (Light, Regular, Bold je mit Italic), für Headlines und Text (--Font_Family-headings = --Font_Family-body). Bewegung: opacity .3s ease (17×), transform .3s ease; Karussell opacity 1s var(--Carousel_Ease) = cubic-bezier(.25,1,.5,1); Akkordeon über grid-template-rows .3s ease. Warme Off-Whites #f6f5f3, #ebeae8. Sektionen: sec-Banner-fullbleed, sec-Banner_Cards-carousel, sec-ClientHelp."
    },
    {
     "seite": "Lemaire",
     "url": "https://www.lemaire.fr/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "https://www.lemaire.fr/cdn/shop/t/133/assets/base.css und weitere Theme-CSS",
     "beobachtung": "Shopify. @font-face: BrownStd (Light, Regular) und GaramondPremrPro. Dauer-Tokens --duration-short 100ms, -default 200ms, -medium 300ms, -long 500ms, -extended 3s; Unterstreichung animiert über text-decoration-thickness var(--duration-short). Labels mit letter-spacing .06–.1rem. Farben #fdfbf9 und #100a0d. Folge: hero → dispatch → editorial_block → custom_liquid → footer_services → Footer mit Klasse h-screen (volle Viewporthöhe)."
    },
    {
     "seite": "Typology",
     "url": "https://www.typology.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_nuxt/entry.0OZWaTfA.css",
     "beobachtung": "Nuxt-Shop. @font-face: Lettera (Mono, Klasse .font-mono) und Post Grotesk (Light, Book, Medium). Produktüberschriften nennen Formel und Preis: „Sérum Éclat L32 — Complexe vitamine C 15% + Vitamine E 1% — à partir de 17,90 €“. 78 uppercase-Klassen im HTML; Laufweite .02em (9×). cubic-bezier(.4,0,.2,1) und (0,0,.2,1), Dauern .15–.7s. Farben #f3efe9 und #cecdc6 (warm), #141414."
    }
   ],
   "schrift": {
    "paarung_basis": "zalando-mode",
    "abweichung": "",
    "headline": "zalando-sans",
    "text": "zalando-sans",
    "akzent": "fragment-mono",
    "techniken": [
     "eine-familie-wenig-gewichte",
     "mono-labels-versal",
     "tabellenziffern",
     "lesesatz-text-wrap"
    ],
    "groessen": "Kampagnen-Headline clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, wght 400–500 (nicht fett), -0.01em, line-height 1.05. Produktname 0.9375rem wght 500, Preis tabular-nums. Fließtext 0.9375–1rem/1.5. Rubriken und Wirkstoffe in Fragment Mono 0.75rem Versal, +0.06em (Lemaire .06–.1rem). Editorial-Zitat optional EB Garamond Italic 1.5rem (Lemaire nutzt Garamond als zweite Stimme).",
    "alternative_eigenprojekt": "luxus-didone (Bodoni Moda + Switzer) für Beauty-Luxus oder Satoshi als Hausschrift-Ersatz (ITF-FFL)"
   },
   "farbe": {
    "prinzip": "Warmes Off-White statt Reinweiß (Toteme #f6f5f3, Lemaire #fdfbf9, Typology #f3efe9), Fast-Schwarz mit Rotstich für Text. Farbe kommt aus Produkt und Kampagnenbild; die UI bleibt zweifarbig. Sale und Fehler sind die einzigen Signalfarben.",
    "beispiel": [
     "#f6f3ee Grund",
     "#121010 Text",
     "#ebe7e0 Kartenfläche, Produkt-Hintergrund",
     "#cecdc6 Linien",
     "#8c857b Meta, Wirkstoff-Labels",
     "#a3402a Sale/Fehler (sparsam)",
     "#726D63 Meta-Text barrierefrei (4.6 : 1 auf #f6f3ee; #8c857b nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-luxus-weich",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder und Hero-Wechsel); Shop-UI über animationsstil_ui",
    "beobachtet": "--Carousel_Ease cubic-bezier(.25,1,.5,1) 1 s für Bildwechsel, Shop-UI 0,3 s ease (Toteme); Tokens 100/200/300/500 ms (Lemaire)",
    "dauer_ms": "Kampagnen-Bildwechsel 1000, UI (Menü, Akkordeon, Hover) 200–300, Unterstreichung 100",
    "regel": "Zwei Tempi: Bilder überblenden langsam mit Opazität (1 s, Kurve des Stils), Shop-UI (Menü, Filter, Drawer, Kaufbox) reagiert über animationsstil_ui token-toggle-asymmetrisch in 200–300 ms. Keine Bewegung auf Produktbildern beim Scrollen, kein Überschwingen."
   },
   "hero_beschreibung": "Foto-Hero als Standard: ein Kampagnenbild in voller Breite, Text klein in einer Ecke. Video nur als Variante mit eigenem Kampagnenmaterial (Poster, mobil Hochformat oder Standbild).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "gestapelte-drawer-navigation",
     "hide-on-scroll-header"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Kampagne / Editorial",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "kunstbuch"
      }
     },
     {
      "zweck": "Lookbook (Kapitel scrollen ins nächste)",
      "muster": [
       "scroll-naechstes-projekt",
       "bild-hotspots"
      ],
      "varianten": {
       "bild-hotspots": "shop"
      }
     },
     {
      "zweck": "Produktreihe / Neuheiten",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "produktreihe"
      }
     },
     {
      "zweck": "Kategorie mit Filter",
      "muster": [
       "facettenfilter-ergebnisliste"
      ],
      "varianten": {
       "facettenfilter-ergebnisliste": "schublade"
      }
     },
     {
      "zweck": "Produktdetail (Bilder links, Kaufbox rechts sticky)",
      "muster": [
       "produkt-kaufbox-varianten",
       "galerie-shared-element-vollbild",
       "akkordeon-hoehe-auto",
       "warenkorb-drawer",
       "eu-gewaehrleistungshinweis"
      ],
      "varianten": {
       "produkt-kaufbox-varianten": "seite",
       "galerie-shared-element-vollbild": "zoom",
       "warenkorb-drawer": "hinweis",
       "akkordeon-hoehe-auto": "basis",
       "eu-gewaehrleistungshinweis": "kaufbox"
      }
     },
     {
      "zweck": "Anwendung / Ritual (Beauty)",
      "muster": [
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild"
      }
     },
     {
      "zweck": "Welche Pflege passt? (Finder in wenigen Fragen)",
      "muster": [
       "produktfinder-quiz"
      ],
      "varianten": {
       "produktfinder-quiz": "schritte"
      }
     },
     {
      "zweck": "Wirkstoffe, Pflege, Service",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Bewertungen",
      "muster": [
       "bewertungen-verteilung"
      ],
      "varianten": {
       "bewertungen-verteilung": "band"
      }
     },
     {
      "zweck": "Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "animiertes-select",
     "toast-stapel"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "mega-footer-sitemap",
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "glas-button",
     "text-roll-hover"
    ],
    "hero_varianten": {
     "foto-hero": "randlos-unten-links"
    }
   },
   "signatur": [
    "scroll-naechstes-projekt"
   ],
   "varianten_demo": {
    "footer-newsletter-mit-persoenlichkeit": "basis",
    "bild-zoom-in-maske": "gegen",
    "glas-button": "getoent",
    "css-native-karussell": "produktreihe",
    "galerie-shared-element-vollbild": "produkt"
   },
   "nicht_verwenden": [
    "in-den-warenkorb-flug und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig",
    "kippen-3d-karten und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware",
    "smooth-scroll-lenis – Shop mit Filtern, Drawer und verschachtelten Scrollbereichen",
    "graustufen-zu-farbe – die Farbe des Produkts ist die Kaufinformation",
    "Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular",
    "Playfair Display als „Eleganz“-Reflex – Verbotsliste"
   ],
   "regeln": [
    "Erster Bildschirm: ein Kampagnenbild in voller Breite, Text klein in einer Ecke; Video nur mit eigenem Kampagnenmaterial.",
    "Eine Grotesk für Headline und Text (Toteme: nur Toteme Sans); Mono nur für Rubriken, Größen und Wirkstoffe.",
    "Beauty: Formel in die Produktzeile (Wirkstoff + Konzentration + Preis), wie bei Typology.",
    "Produktbilder auf einheitlicher Off-White-Fläche, alle im selben Seitenverhältnis (3:4 oder 4:5).",
    "Bilder überblenden langsam (1 s), UI reagiert schnell (≤ 300 ms).",
    "Größen, Preise und Mengen in Tabellenziffern. Gefilterte Produkte ordnen sich per FLIP in höchstens 250 ms um (nur Position, kein Einblend-Effekt); bei reduced motion springen sie.",
    "Footer großzügig: Service, Newsletter, Sitemap; darf die volle Bildschirmhöhe einnehmen (Lemaire h-screen).",
    "Lookbook-Kapitel gehen per Scroll ins nächste über; am Ende der Lookbook-Seite bleiben Footer, Service und rechtliche Links erreichbar.",
    "hide-on-scroll-header nur auf Kampagne, Lookbook und Kategorie; auf Produktdetail, Warenkorb und Checkout bleibt der Header fest, damit der Warenkorb immer erreichbar ist (wann_nicht des Musters).",
    "Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Zahlungsarten; Kosmetik mit Grundpreis je 100 ml und Inhaltsstoffen vor dem Kauf; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse) als Akkordeon „Hersteller und Sicherheit“; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Standard ist das Kampagnenfoto (AVIF, fetchpriority=high); in der Video-Variante MP4 mit Poster, auf Mobil Hochformat-Version oder Standbild. Produktbilder mit srcset, Karussell nativ per Scroll-Snap statt Swiper. Zalando Sans als Variable-Datei mit wdth-Achse (eine Datei für Headline und Text). Shop-Skripte (Consent, Tracking) nach der Interaktion laden; Toteme lädt über 60 Skripte, das ist nicht nachahmenswert.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "editorial",
    "ruhig",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     160
    ],
    "sektion": "clamp(64px, 8vw, 128px)",
    "dichte": "luftig",
    "hinweis": "Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(12px, 2vw, 32px)",
    "spalt": "clamp(8px, 1vw, 16px)",
    "max_breite": "none",
    "hinweis": "Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen."
   },
   "form": {
    "radius_klein": "2px",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #cecdc6",
    "schatten": "keiner",
    "hinweis": "Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo."
   },
   "bildsprache": {
    "licht": "Weiches Studio- oder Tageslicht, warme Hauttöne, Produkt in echter Farbe.",
    "ausschnitt": "Kampagne: Ganzkörper oder Anschnitt; Produkt: Freisteller auf #ebe7e0 mit gleichem Rand.",
    "personen": "Ja in der Kampagne (Models mit Rechten); Produktbilder ohne Person.",
    "formate": [
     "3:4",
     "4:5",
     "16:9"
    ],
    "nicht": "Keine wechselnden Seitenverhältnisse im Produktraster, keine Stock-Models, kein Rot außer für Sale und Fehler, kein Glanz-Filter auf Haut."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Knapp und sachlich: Material, Schnitt, Wirkstoff mit Prozent, Preis.",
    "haltung": "Kuratiert, ruhig, selbstverständlich. Beauty nennt die Formel statt eines Versprechens.",
    "beispiele": [
     "Mantel aus Wolle, gerader Schnitt. Ab 389 €.",
     "Serum mit 15 % Vitamin C. Für jeden Hauttyp."
    ],
    "nicht": "„Must-have“, „Gönn dir“, „Shop the look!“ ohne Look, Wirkversprechen ohne Beleg, Emojis."
   },
   "hero_aufbau": {
    "raster": "Kampagnenbild randlos, volle Bildschirmhöhe; Text klein in der unteren linken Ecke über 4 Spalten.",
    "bild": "Ein Kampagnenbild, 16:9 Desktop, 3:4 oder 4:5 mobil; Video nur als hero_variante mit eigenem Material.",
    "h1": "clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, 400–500, unten links.",
    "handlung": "Ein Weg: „Kollektion ansehen“ als Textlink oder getönter Glas-Knopf; kein zweiter CTA im Bild.",
    "zusatz": "Rubrik in Fragment Mono 0.75rem Versal (Saison, „Neu“) über der Headline."
   },
   "optional": [
    "karten-faecher-container"
   ],
   "url": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "in-den-warenkorb-flug"
     ],
     "grund": "und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig"
    },
    {
     "ids": [
      "kippen-3d-karten"
     ],
     "grund": "und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Shop mit Filtern, Drawer und verschachtelten Scrollbereichen"
    },
    {
     "ids": [
      "graustufen-zu-farbe"
     ],
     "grund": "die Farbe des Produkts ist die Kaufinformation"
    },
    {
     "ids": [],
     "grund": "Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular"
    },
    {
     "ids": [],
     "grund": "Playfair Display als „Eleganz“-Reflex – Verbotsliste"
    }
   ],
   "alle_muster": [
    {
     "id": "scroll-naechstes-projekt",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "randlos-unten-links",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Kampagne / Editorial",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "kunstbuch",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch"
    },
    {
     "id": "bild-hotspots",
     "rolle": "Sektion: Lookbook (Kapitel scrollen ins nächste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json",
     "variante": "shop",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Produktreihe / Neuheiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Kategorie mit Filter",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "schublade",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=schublade"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "seite",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
       "variante": "basis",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
      },
      {
       "rolle": "Sektion: Wirkstoffe, Pflege, Service",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "warenkorb-drawer",
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
     "variante": "hinweis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=hinweis"
    },
    {
     "id": "eu-gewaehrleistungshinweis",
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Anwendung / Ritual (Beauty)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "produktfinder-quiz",
     "rolle": "Sektion: Welche Pflege passt? (Finder in wenigen Fragen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json",
     "variante": "schritte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte"
    },
    {
     "id": "bewertungen-verteilung",
     "rolle": "Sektion: Bewertungen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
     "variante": "band",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
     "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": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "gestapelte-drawer-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/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": "bild-zoom-in-maske",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
     "variante": "gegen",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "toast-stapel",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "glas-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/glas-button/meta.json",
     "variante": "getoent",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=getoent"
    },
    {
     "id": "text-roll-hover",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/meta.json"
    },
    {
     "id": "token-luxus-weich",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/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": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
    },
    {
     "id": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "karten-faecher-container",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/meta.json"
    }
   ]
  },
  {
   "id": "kultur-programm-haltung",
   "name": "Kultur: Programm und Haltung",
   "branche": "Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus",
   "stimmung": [
    "sachlich",
    "grafisch",
    "zugänglich",
    "selbstbewusst"
   ],
   "kurz": "Eine starke Hausschrift, Schwarz auf Off-White und ein Farbsystem für Sparten oder Blöcke. Im Mittelpunkt stehen Programm, Termine und Tickets. Bewegung ist kurz und sachlich, Barrierefreiheit gehört fest dazu: Stedelijk respektiert reduzierte Bewegung an zehn Stellen und bietet Vorlesen an. Für Festivals kann die Headline lauter werden, die Struktur bleibt gleich.",
   "referenzen": [
    {
     "seite": "Stedelijk Museum Amsterdam",
     "url": "https://www.stedelijk.nl/en",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/themes/stedelijk/assets/dist/styles/base-54833fdd3a.css",
     "beobachtung": "@font-face: Union Regular, Union Regular Italic, Union SMA Ribbon (Hausschrift). Farben #0a0a0a (94×), #ebeae8 (43×), #9e9e9d, Akzent #d62348. Schriftgrößen vorwiegend 1.8–2.2rem bei 10px-Basis (≈18–22px), Headlines 4.4rem. Bewegung kurz: transform .2s, .2s ease-out, .35s cubic-bezier(.42,0,.58,1). prefers-reduced-motion 10× (z. B. scroll-behavior smooth nur bei no-preference). ReadSpeaker-Vorlesefunktion und Enviso-Ticket-Widget eingebunden."
    },
    {
     "seite": "Barbican",
     "url": "https://www.barbican.org.uk/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/sites/default/files/css/css_roBKlp9PURu9RQGpI-HmZvkqKu19KctuuMoOvOY-vPg.css (delta=1)",
     "beobachtung": "Drupal. @font-face: Supreme LL (Light bis Black Italic, Lineto) und KTF Rublena Black. letter-spacing -0.01em 177×, line-height 1.3 164×. Eigene Übergänge .1–.3s, opacity 300ms; die Überschwing-Kurven (.175,.885,.32,1.15 / .23,.635,.495,2.4) stammen aus der Tooltip-Bibliothek Tooltipster, nicht aus dem eigenen Design. Spartenfarben als System: #d14900 (309×), #5778a2, #946f2e, #402f79, #e60077, #017e9d, #20882a. Startseite aus sieben Splide-Karussells je Rubrik, Merkliste „Saved events“, Ticketing über Spektrix, GSAP ScrollTo."
    },
    {
     "seite": "Haus der Kulturen der Welt",
     "url": "https://www.hkw.de/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_nuxt/entry.Cc_7ph1w.css",
     "beobachtung": "Nuxt. @font-face: NewEdgeHkw (Display), IBMPlexSans, Space Mono. Sticky-Navigation .sticky-nav mit height 78px, border-bottom 1px solid #000, Schrift NewEdgeHkw. Teaser-Blöcke mit .color-switch, bei :nth-of-type(3n) wechseln Fläche und Schrift über var(--color-surface)/var(--color-on-surface), Buttons invertieren beim Hover. Übergänge all .35s ease-in-out (14×), .2s ease, opacity .32s linear. Folge: project-teaser-block ×2 → online-magazin-teaser-block → teaser-block → super-footer."
    }
   ],
   "schrift": {
    "paarung_basis": "barrierearm",
    "abweichung": "Gegenüber der Paarung: akzent ibm-plex-mono ergänzt.",
    "headline": "schibsted-grotesk",
    "text": "atkinson-hyperlegible-next",
    "akzent": "ibm-plex-mono",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "tabellenziffern",
     "mono-labels-versal",
     "lesesatz-text-wrap",
     "headline-laufweite-zeilenabstand"
    ],
    "groessen": "Ausstellungs-/Festival-Titel clamp(2.75rem, 7vw, 7rem), Schibsted 800–900 (Festival auch Italic), -0.02em, line-height 1.0. Teaser-Titel clamp(1.375rem, 2.2vw, 2rem), 700. Fließtext Atkinson 1.125rem/1.6, max. 68ch (Stedelijk liegt bei ≈18–22px). Daten, Uhrzeiten, Räume in IBM Plex Mono 0.8125rem, tabular-nums. Für Festivals statt Schibsted die Paarung plakat-condensed (Big Shoulders 900).",
    "alternative_eigenprojekt": "Cabinet Grotesk oder Supreme (Fontshare, ITF-FFL) für den Barbican-nahen Black-Italic-Look; Supreme LL von Lineto ist eine andere, kommerzielle Schrift"
   },
   "farbe": {
    "prinzip": "Schwarz auf warmem Off-White als Grund (Stedelijk #0a0a0a/#ebeae8). Dazu ein Farbsystem mit 4–6 Tönen, je einer pro Sparte oder Programmreihe (Barbican), oder Blöcke, die im Rhythmus Fläche und Schrift tauschen (HKW .color-switch). Jede Spartenfarbe muss auf Off-White und als Fläche mit weißer Schrift WCAG AA erfüllen.",
    "beispiel": [
     "#0b0b0b Text, Linien",
     "#efede9 Grund",
     "#c4421a Sparte Musik",
     "#3d5f9a Sparte Theater/Tanz",
     "#2f7d4a Sparte Kunst",
     "#b0186b Sparte Film"
    ]
   },
   "animationsstil": "token-swiss-knackig",
   "bewegung": {
    "easing": "cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig, Eintritt); Austritt cubic-bezier(0.5, 0, 0.75, 0)",
    "beobachtet": "easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1); Stedelijk .2s/.35s, Barbican .1–.3s, HKW .2–.35s",
    "dauer_ms": "UI und Hover 150–250, Filter/Ansichtswechsel 300–350, Bild-Reveal höchstens 500",
    "regel": "Kurze, klare Out-Kurve des Stils ohne Überschwingen, Abgang mit der Austrittskurve. Bewegung entlang des Rasters (nur x oder y). prefers-reduced-motion ist Pflicht: Smooth-Scroll, Reveals und Karussell-Autoplay entfallen dann ganz (Stedelijk koppelt scroll-behavior an no-preference)."
   },
   "hero_beschreibung": "Programm vor Image: aktuelle Ausstellung oder Saisontitel als Plakat-Satz (schrift-hero-viewportbreit, Variante textfit) über bzw. neben einem echten Motiv (editorial-magazin-layout, Variante cover), darunter sofort Öffnungsstatus heute, nächste Termine und Tickets. Kein Video, keine Slideshow, aus der Demo kein Lenis.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "sticky-shrink-header",
     "mega-menue-morphing-viewport",
     "scrollspy-kapitelnavigation"
    ],
    "hero": [
     "schrift-hero-viewportbreit",
     "editorial-magazin-layout"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Aktuelle Ausstellungen / Highlights",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "zeitung"
      }
     },
     {
      "zweck": "Programm-Kalender mit Filtern",
      "muster": [
       "programm-kalender",
       "facettenfilter-ergebnisliste"
      ],
      "varianten": {
       "programm-kalender": "programm",
       "facettenfilter-ergebnisliste": "leiste"
      }
     },
     {
      "zweck": "Rubriken-Reihen (Musik, Film, Kunst …)",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "akkordeon-hoehe-auto",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung",
       "oeffnungszeiten-status": "karte",
       "karte-zwei-klick": "bild",
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Magazin / Hintergrund",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse)",
      "muster": [
       "kontakt-anfrage-formular"
      ]
     },
     {
      "zweck": "Newsletter",
      "muster": [
       "footer-newsletter-mit-persoenlichkeit"
      ],
      "varianten": {
       "footer-newsletter-mit-persoenlichkeit": "kultur"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "toast-stapel",
     "druck-feedback"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "flip-zustandswechsel"
    ],
    "footer": [
     "mega-footer-sitemap",
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "fuellung-vom-eintrittspunkt",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "schrift-hero-viewportbreit": "textfit",
     "editorial-magazin-layout": "cover"
    }
   },
   "signatur": [
    "scrollspy-kapitelnavigation"
   ],
   "optional": [
    "text-um-form"
   ],
   "varianten_demo": {
    "text-um-form": "css",
    "schrift-hero-viewportbreit": "textfit",
    "bild-zoom-in-maske": "richtung",
    "fuellung-vom-eintrittspunkt": "pixel",
    "kontur-button-zeichnen": "ecken",
    "css-native-karussell": "peek",
    "flip-zustandswechsel": "nativ",
    "footer-newsletter-mit-persoenlichkeit": "kultur"
   },
   "nicht_verwenden": [
    "smooth-scroll-lenis – Programmlisten, Ticket-Widgets und iframes (Spektrix, Enviso) vertragen keine Scroll-Übernahme",
    "Jede Art von Cursor-Effekt – öffentliche Häuser haben ein breites Publikum, auch mit Screenreader und Tastatur",
    "prozent-zaehler und webgl-ladeszene-fortschritt – Besucher wollen Öffnungszeiten, keine Ladeshow",
    "fullpage-snap-slides – blockiert das schnelle Überfliegen des Programms",
    "Überschwing-Kurven im eigenen Design – bei Barbican stammen sie nur aus einer Tooltip-Bibliothek",
    "Farbe als einzige Unterscheidung der Sparten – immer zusätzlich ein Text-Label"
   ],
   "regeln": [
    "Programm vor Image: Termine, Ort, Uhrzeit und Ticket-Button auf jeder Teaser-Karte, Datum in Mono-Tabellenziffern.",
    "Spartenfarben als System, nicht als Deko; jede Farbe besteht den AA-Kontrast und trägt zusätzlich ein Label.",
    "Sticky-Navigation mit klarer Unterkante (HKW: 78px, 1px Linie); Ticket und Suche immer erreichbar.",
    "Teaser-Blöcke dürfen im Rhythmus Fläche und Schrift tauschen (HKW: jeder dritte Block).",
    "prefers-reduced-motion respektieren; Vorlesen bzw. Leichte Sprache und Barrierefreiheits-Infos fest in der Navigation.",
    "Fließtext mindestens 18px, max. 68ch; Headlines dürfen laut sein, Text bleibt ruhig.",
    "Filter wechseln die Ansicht per FLIP in ≤ 350 ms, ohne Seiten-Neuladen.",
    "text-um-form nur als Zusatz (optional, Priorität F): auf Kundenseiten Variante css (Umfluss ohne Bibliothek und ohne Bewegung) in einem einzelnen Magazin-Beitrag; Variante pretext nur für Eigenprojekte und Festival-Seiten.",
    "Pflichtangaben und Recht (Leitfaden 8a): Ticketpreise als Gesamtpreis inkl. Gebühren; für termingebundene Tickets gilt meist kein Widerrufsrecht, das klar sagen; öffentliche Häuser: BITV 2.0 mit Erklärung zur Barrierefreiheit und Feedback-Weg, ggf. Leichte Sprache und Gebärdensprache; Online-Ticketverkauf privater Häuser: Variante bfsg prüfen; Werkabbildungen nur mit Bildrechten (z. B. VG Bild-Kunst); Besucherfotos nur mit Einwilligung – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Viele Bilder pro Seite: lazy loading, feste aspect-ratio, AVIF. Fremd-Widgets (Ticketing, Vorlesen) per Klick oder idle laden. Karussells nativ per Scroll-Snap statt sieben Instanzen einer Slider-Bibliothek. Atkinson Hyperlegible Next und Schibsted als Variable-Dateien mit Subset.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "editorial",
    "präzise",
    "laut"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     128
    ],
    "sektion": "clamp(56px, 7vw, 112px)",
    "dichte": "dicht",
    "hinweis": "Programm geht vor: Teaser dicht, Datum, Ort und Ticket mit 8 px Abstand. Laut werden darf nur der Titel, nicht der Weißraum."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 3vw, 40px)",
    "spalt": "clamp(16px, 2vw, 24px)",
    "max_breite": "1600px",
    "hinweis": "Teaser 3 bis 4 Spalten, jeder dritte Block tauscht Fläche und Schrift (HKW). Sticky Navigation mit 1px Unterkante."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #0b0b0b als Unterkante der Navigation und zwischen Programmzeilen",
    "schatten": "keiner",
    "hinweis": "Grafisch und eckig. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Tickets füllen sich in Pixeln (fuellung-vom-eintrittspunkt, Variante pixel)."
   },
   "bildsprache": {
    "licht": "Dokumentarisch: Ausstellungsansichten in neutralem Licht, Künstlerfotos wie geliefert.",
    "ausschnitt": "Werk oder Raumansicht, Plakatmotiv; Bühnenfotos im Moment der Handlung.",
    "personen": "Künstler:innen und Publikum, nur mit Rechten und Bildnachweis.",
    "formate": [
     "4:5",
     "3:2",
     "1:1"
    ],
    "nicht": "Keine Stock-Konzertmengen, keine Bilder ohne Bildnachweis, keine Duotone oder Filter über Kunstwerken, keine Slideshow im Hero."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz und klar; Leichte Sprache als eigene Fassung. Termine immer als Datum · Uhrzeit · Ort.",
    "haltung": "Einladend und selbstbewusst, ohne Kunstjargon. Ein Festival darf duzen, dann auf der ganzen Seite.",
    "beispiele": [
     "Heute geöffnet bis 18 Uhr. Unter 18 Jahren frei.",
     "Die Ausstellung zeigt 40 Arbeiten aus fünf Jahrzehnten."
    ],
    "nicht": "„Spannungsfeld“, „verhandelt“, „Diskurs“ als Füllwörter, „Ein Muss für jeden Kunstliebhaber“."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Plakat-Satz über die volle Breite (schrift-hero-viewportbreit, Variante textfit), echtes Motiv über 7 Spalten daneben oder darunter (editorial-magazin-layout, Variante cover).",
    "bild": "Echtes Ausstellungs- oder Saisonmotiv, 4:5 oder 3:2; kein Video, keine Slideshow.",
    "h1": "clamp(2.75rem, 7vw, 7rem), Schibsted 800–900, oben links, per textfit auf Breite.",
    "handlung": "„Tickets“ (gefüllt, Pixel-Füllung) und „Programm“ (Kontur mit Ecken) direkt unter dem Titel.",
    "zusatz": "Öffnungsstatus heute und die nächsten drei Termine in IBM Plex Mono 0.8125rem; Spartenlabel mit Farbe und Wort."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/kultur-programm-haltung/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/kultur-programm-haltung/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/kultur-programm-haltung/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/kultur-programm-haltung/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Programmlisten, Ticket-Widgets und iframes (Spektrix, Enviso) vertragen keine Scroll-Übernahme"
    },
    {
     "ids": [],
     "grund": "Jede Art von Cursor-Effekt – öffentliche Häuser haben ein breites Publikum, auch mit Screenreader und Tastatur"
    },
    {
     "ids": [
      "prozent-zaehler"
     ],
     "grund": "und webgl-ladeszene-fortschritt – Besucher wollen Öffnungszeiten, keine Ladeshow"
    },
    {
     "ids": [
      "fullpage-snap-slides"
     ],
     "grund": "blockiert das schnelle Überfliegen des Programms"
    },
    {
     "ids": [],
     "grund": "Überschwing-Kurven im eigenen Design – bei Barbican stammen sie nur aus einer Tooltip-Bibliothek"
    },
    {
     "ids": [],
     "grund": "Farbe als einzige Unterscheidung der Sparten – immer zusätzlich ein Text-Label"
    }
   ],
   "alle_muster": [
    {
     "id": "scrollspy-kapitelnavigation",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/meta.json"
    },
    {
     "id": "schrift-hero-viewportbreit",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/meta.json",
     "variante": "textfit",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=textfit"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "cover",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover",
     "varianten_je_rolle": [
      {
       "rolle": "Hero",
       "variante": "cover",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover"
      },
      {
       "rolle": "Sektion: Aktuelle Ausstellungen / Highlights",
       "variante": "zeitung",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
      },
      {
       "rolle": "Sektion: Magazin / Hintergrund",
       "variante": "magazin",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
      }
     ]
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Programm-Kalender mit Filtern",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Programm-Kalender mit Filtern",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Rubriken-Reihen (Musik, Film, Kunst …)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)",
     "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": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "faq",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Sektion: Newsletter",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "kultur",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/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": "richtung",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "toast-stapel",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "flip-zustandswechsel",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/meta.json",
     "variante": "nativ",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "pixel",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=pixel"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "ecken",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken"
    },
    {
     "id": "token-swiss-knackig",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/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": "text-um-form",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/meta.json",
     "variante": "css",
     "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo?v=css"
    }
   ]
  },
  {
   "id": "luxus-manufaktur-stille",
   "name": "Luxus und Manufaktur: Stille",
   "branche": "Uhren, Schmuck, Juwelier, Luxus-Manufaktur",
   "stimmung": [
    "luxuriös",
    "präzise",
    "ruhig",
    "seriös"
   ],
   "kurz": "Viel Weißraum, Anthrazit und Weiß im Wechsel, eine feine Kontrast-Serif für Titel und gesperrte Versalien für Labels. Überraschend ist die Messung: A. Lange & Söhne und NOMOS animieren nicht langsam und schwebend, sondern kurz (0,15–0,5 s) und asymmetrisch. Menüs öffnen langsamer, als sie schließen. Ruhe entsteht durch Raum und Bildqualität, nicht durch Zeitlupe.",
   "referenzen": [
    {
     "seite": "A. Lange & Söhne",
     "url": "https://www.alange-soehne.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "https://www.alange-soehne.com/als/dist/assets/main-CruBKj1g.css",
     "beobachtung": "@font-face: ALangeUndSoehne-Headline (Hausschrift) und UniversforALS (Light, Medium). Tokens: --duration-shorter .15s, -short .25s, -standard .3s, -long .4s, -longer .5s; --ease-in-out cubic-bezier(.4,0,.2,1); Slide-Übergänge transform var(--duration-long) cubic-bezier(.17,.67,.24,1) (9×). Laufweite als Tokens .2px/.8px/1.25px/1.5px/2px, 18× uppercase; line-height-base 1.4706. Anthrazit #23282f (49×). Sektionen wechseln phxsg-theme-black/-white; intro-block--media als Hero („OUR CURRENT NOVELTY“), phoenix-mixed-grid, Mega-Menü mit Suchpanel."
    },
    {
     "seite": "NOMOS Glashütte",
     "url": "https://nomos-glashuette.com/de",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "https://nomos-glashuette.com/dist/assets/main-huckeevj.css",
     "beobachtung": "Shopware. Schriften: Gotham, Gotham Narrow, Gotham Narrow Tabular und Gotham Narrow Engraving (cloud.typography.com), @font-face interstate_gravur. Bewegungs-Tokens: --trans-time-xs .125s, -sm .25s, -md .5s, -lg 1s, -xl 2s, -xxl 3.5s; --trans-func-default cubic-bezier(.1,.6,.4,1), -ease-out (.1,.9,.3,1). Asymmetrisch: menu-in .3s mit ease-out, menu-out .2s mit default; Modal-Abdunklung ein .8s, aus .6s. Native Parallax mit animation-timeline: view() hinter @supports, --parallax-range 4vh, animation-range entry 0% bis exit-crossing 100%. prefers-reduced-motion 15×, letter-spacing .03em (49×) und .08em (31×)."
    },
    {
     "seite": "Messika",
     "url": "https://www.messika.com/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-10-31",
     "quelle": "/_astro/base.CxZUJzdM.css, HTML",
     "beobachtung": "Astro. @font-face: Futura PT (Light, Book, Medium) als Textschrift, KunstlerScript als Script-Akzent, dazu Noto- und Arabic-Schnitte für Märkte. cubic-bezier(.4,0,.2,1) 7×, Übergänge .15s (6×), Unterstreichung über background-size .4s. 12× data-aos=\"fade-up\" für Scroll-Einblendungen. Banner-Blöcke mit data-color und data-textposition; Kategorien Earrings, Necklaces, Bracelets, Rings als eigene Abschnitte."
    }
   ],
   "schrift": {
    "paarung_basis": "luxus-didone-frei",
    "abweichung": "",
    "headline": "bodoni-moda",
    "text": "instrument-sans",
    "akzent": "",
    "techniken": [
     "optische-groessen-opsz",
     "tabellenziffern",
     "text-box-trim",
     "lesesatz-text-wrap"
    ],
    "groessen": "Titel clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, opsz an Größe gekoppelt (font-optical-sizing auto), -0.01em, line-height 1.05. Labels und Navigation Instrument Sans 0.75rem Versal, letter-spacing +0.08em (NOMOS .08em, Lange bis 2px). Fließtext 0.9375rem/1.47 (Lange line-height-base 1.4706), wght 400. Kaliber- und Preisangaben tabular-nums. Script (imperial-script) höchstens für ein Monogramm, wie Messikas KunstlerScript.",
    "alternative_eigenprojekt": "luxus-didone (Bodoni Moda + Switzer) oder hairline-hero (Zodiak Thin + Instrument Sans), beide mit ITF-FFL-Schrift"
   },
   "farbe": {
    "prinzip": "Anthrazit statt Schwarz (Lange #23282f) und Weiß, sektionsweise im Wechsel. Edelmetall nur als feine Linie oder Detailfarbe, nie als Fläche oder Verlauf. Produktfotos auf neutralem Hellgrau.",
    "beispiel": [
     "#23282f Anthrazit, dunkle Sektionen und Text",
     "#ffffff Grund",
     "#f4f4f2 Produktfläche",
     "#8b9097 Meta, Referenznummern",
     "#d9dadb Linien",
     "#a88a5a Messing, nur Linien und Fokus",
     "#71757B Meta-Text barrierefrei (4.6 : 1 auf #ffffff; #8b9097 nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-toggle-asymmetrisch, Öffnen); Schließen cubic-bezier(0.7, 0, 0.84, 0) in etwa 65 % der Dauer",
    "beobachtet": "Öffnen mit Ausklang-Kurve cubic-bezier(.1,.9,.3,1) 0,3 s, Schließen mit Standardkurve cubic-bezier(0.1, 0.6, 0.4, 1) 0,2 s, Abdunklung 0,8/0,6 s (NOMOS); Lange mit allen Tokens bei 0,15–0,5 s",
    "dauer_ms": "UI 125–250, Menü auf 300 / zu 200, Bildwechsel 400–500, Abdunklung auf 800 / zu 600",
    "regel": "Öffnen mit der Ausklang-Kurve des Stils (0,3 s), Schließen schneller mit der Anlauf-Kurve (0,2 s); Abdunklung 0,8/0,6 s. Alles andere bleibt bei 0,15–0,5 s. Langsam ist nur die native Parallaxe (scroll-gekoppelt, 4vh Weg). Kein Überschwingen, kein Schimmer."
   },
   "hero_beschreibung": "Produkt zuerst: ein Freisteller oder Kampagnenfoto der Neuheit in ruhigem Licht, Name und ein Satz, „Termin in der Boutique“ als CTA. cinematic-video-hero nur mit eigenem Manufaktur- oder Kampagnenfilm (stumm, Poster, Pause-Knopf, mobil Standbild); kleine Juweliere bleiben beim Foto.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "native-popover-dropdowns",
     "hide-on-scroll-header"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Neuheit / Kampagne",
      "muster": [
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild"
      }
     },
     {
      "zweck": "Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)",
      "muster": [
       "broken-grid-asymmetrisch",
       "css-native-karussell",
       "produkt-kaufbox-varianten",
       "finanzierung-pflichtangaben",
       "eu-gewaehrleistungshinweis"
      ],
      "varianten": {
       "produkt-kaufbox-varianten": "kompakt",
       "css-native-karussell": "buehne",
       "finanzierung-pflichtangaben": "kaufbox",
       "eu-gewaehrleistungshinweis": "kaufbox"
      }
     },
     {
      "zweck": "Manufaktur / Handwerk",
      "muster": [
       "mehrschicht-parallax",
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "kunstbuch"
      }
     },
     {
      "zweck": "Technik / Kaliber",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "tabelle"
      }
     },
     {
      "zweck": "Service, Pflege, Garantie",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "basis"
      }
     },
     {
      "zweck": "Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)",
      "muster": [
       "oeffnungszeiten-status",
       "standortfinder-liste",
       "karte-zwei-klick",
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "standortfinder-liste": "kompakt",
       "karte-zwei-klick": "bild",
       "termin-buchung-zwei-klick": "platzhalter"
      }
     },
     {
      "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [
     "mehrschicht-parallax"
    ],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "animiertes-select"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "mega-footer-sitemap",
     "studio-visitenkarte-footer"
    ],
    "button": [
     "kontur-button-zeichnen",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "broken-grid-asymmetrisch"
   ],
   "nicht_verwenden": [
    "shimmer-gradient-text und fluessigmetall-chrom – Gold-Schimmer ist das Klischee schlechthin; keine der Referenzen nutzt ihn",
    "interaktives-3d-hero und glas-transmission-3d für Uhren oder Steine – kostet LCP, wirkt schnell wie ein Spielzeug gegenüber echter Fotografie",
    "token-luxus-weich als Gesamtsprache (1,2–2,4 s) – die gemessenen Manufaktur-Seiten bleiben bei 0,15–0,5 s",
    "cursor-follower-lerp, magnetische-elemente – verspielt",
    "Playfair Display und Cinzel – Verbotsliste, Claude-Reflex für „Luxus“",
    "Script-Schrift für Überschriften – Messika nutzt die Script nur als Akzent"
   ],
   "regeln": [
    "Sektionen wechseln zwischen Anthrazit und Weiß (Lange: phxsg-theme-black/-white), nie mehr als zwei Flächenfarben.",
    "Labels, Navigation und Referenznummern in gesperrten Versalien (+0.08em), Titel in Serif gemischt.",
    "Produktbild ist Hauptdarsteller: Freisteller auf Hellgrau, alle Ansichten im gleichen Licht und Maßstab.",
    "Öffnen langsamer als Schließen (300/200 ms), Abdunklung ruhig (800/600 ms).",
    "Parallaxe nur nativ (animation-timeline: view()) mit max. 4vh Weg, hinter @supports, entfällt bei reduzierter Bewegung.",
    "Technische Angaben (Kaliber, Gangreserve, Durchmesser) als Zahlen-Sektion mit Tabellenziffern.",
    "Kein Preis-Countdown, keine Rabatt-Badges; Termin in der Boutique als primärer CTA.",
    "bild-zoom-in-maske nie auf Bildern mit mehrschicht-parallax (wann_nicht: die Transforms kollidieren).",
    "Pflichtangaben und Recht (Leitfaden 8a): mit Shop: Gesamtpreis inkl. MwSt., Versand, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), Produktsicherheit (GPSR); Angaben zu Feingehalt, Steinen und Echtheit nur belegt; Erklärung zur Barrierefreiheit (bfsg) bei Online-Kauf oder -Termin; Termin-Tool erst nach Klick – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Hero-Video nur mit Poster und auf Desktop; mobil Standbild. Produktbilder als AVIF in 2–3 Breiten, Zoom erst bei Interaktion nachladen. Native Scroll-Animationen statt GSAP sparen JS; NOMOS zeigt, wie man das mit @supports absichert. Bodoni Moda als Variable-Datei mit opsz-Achse, Subset Latin.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten_demo": {
    "kontur-button-zeichnen": "doppel",
    "pfeil-icon-button": "tausch",
    "bild-zoom-in-maske": "basis",
    "css-native-karussell": "buehne",
    "galerie-shared-element-vollbild": "produkt",
    "studio-visitenkarte-footer": "praxis"
   },
   "stimmung_tags": [
    "luxuriös",
    "präzise",
    "ruhig"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     16,
     24,
     40,
     64,
     96,
     144,
     200,
     240
    ],
    "sektion": "clamp(112px, 14vw, 240px)",
    "dichte": "luftig",
    "hinweis": "Ruhe durch Raum (kurz): die größten Sektionsabstände aller Rezepte. Technische Daten dagegen eng in Tabellenziffern."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(24px, 6vw, 96px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "1440px",
    "hinweis": "Asymmetrisch (broken-grid-asymmetrisch): Bild 7 Spalten, Text 4 Spalten versetzt. Freisteller zentriert mit viel Rand. Sektionen wechseln Anthrazit und Weiß."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": true,
    "linie": "1px #d9dadb; Messing #a88a5a nur als feine Linie und Fokus",
    "schatten": "keiner",
    "hinweis": "Bilder und Flächen eckig. Einzige runde Form ist die dunkle Pille der Haupthandlung (pfeil-icon-button, Variante tausch); Nebenweg mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel)."
   },
   "bildsprache": {
    "licht": "Ruhiges, gerichtetes Studiolicht, für alle Ansichten derselbe Lichtwinkel und Maßstab.",
    "ausschnitt": "Freisteller auf #f4f4f2, Makro auf Zifferblatt, Fassung oder Gravur, Uhr am Handgelenk.",
    "personen": "Selten: Uhrmacher:in am Werktisch oder ein Handgelenk; keine Gesichter in Kampagnenpose.",
    "formate": [
     "4:5",
     "1:1",
     "3:2"
    ],
    "nicht": "Keine Glitzer-Spiegelungen, keine Gold-Verläufe, keine Rabatt-Badges, keine Stock-Paare, keine Parallaxe über 4vh."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz, mit Pausen; Zahlen technisch exakt (Kaliber, Gangreserve, Durchmesser).",
    "haltung": "Leise und präzise. Qualität wird gezeigt, nicht behauptet.",
    "beispiele": [
     "Handaufzug, 72 Stunden Gangreserve.",
     "Wir zeigen Ihnen die Uhr gern in der Boutique."
    ],
    "nicht": "„Luxus pur“, „zeitlose Eleganz“ als Floskel, „exklusiv für Sie“, Countdowns, Ausrufezeichen."
   },
   "hero_aufbau": {
    "raster": "12 Spalten asymmetrisch: Bild über Spalte 6 bis 12, Text über 1 bis 4 unten, 1 Spalte Luft dazwischen.",
    "bild": "Freisteller oder Kampagnenfoto der Neuheit, 4:5; Film nur als hero_variante mit eigenem Material, mobil Standbild.",
    "h1": "clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, links unten.",
    "handlung": "„Termin in der Boutique“ (dunkle Pille) und „Kollektion“ (Messing-Doppelkontur) untereinander.",
    "zusatz": "Referenznummer und Kaliber in Instrument Sans 0.75rem Versal +0.08em über der H1."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/luxus-manufaktur-stille/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/luxus-manufaktur-stille/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/luxus-manufaktur-stille/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/luxus-manufaktur-stille/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "shimmer-gradient-text"
     ],
     "grund": "und fluessigmetall-chrom – Gold-Schimmer ist das Klischee schlechthin; keine der Referenzen nutzt ihn"
    },
    {
     "ids": [
      "interaktives-3d-hero"
     ],
     "grund": "und glas-transmission-3d für Uhren oder Steine – kostet LCP, wirkt schnell wie ein Spielzeug gegenüber echter Fotografie"
    },
    {
     "ids": [
      "token-luxus-weich"
     ],
     "grund": "als Gesamtsprache (1,2–2,4 s) – die gemessenen Manufaktur-Seiten bleiben bei 0,15–0,5 s"
    },
    {
     "ids": [
      "cursor-follower-lerp"
     ],
     "grund": ", magnetische-elemente – verspielt"
    },
    {
     "ids": [],
     "grund": "Playfair Display und Cinzel – Verbotsliste, Claude-Reflex für „Luxus“"
    },
    {
     "ids": [],
     "grund": "Script-Schrift für Überschriften – Messika nutzt die Script nur als Akzent"
    }
   ],
   "alle_muster": [
    {
     "id": "broken-grid-asymmetrisch",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Neuheit / Kampagne",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt"
    },
    {
     "id": "finanzierung-pflichtangaben",
     "rolle": "Sektion: Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=kaufbox"
    },
    {
     "id": "eu-gewaehrleistungshinweis",
     "rolle": "Sektion: Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
    },
    {
     "id": "mehrschicht-parallax",
     "rolle": "Sektion: Manufaktur / Handwerk",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Manufaktur / Handwerk",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "kunstbuch",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Technik / Kaliber",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "tabelle",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Service, Pflege, Garantie",
     "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": "oeffnungszeiten-status",
     "rolle": "Sektion: Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "standortfinder-liste",
     "rolle": "Sektion: Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)",
     "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": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/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": "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": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "doppel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "id": "token-toggle-asymmetrisch",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "text-box-trim",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    }
   ]
  },
  {
   "id": "saas-produkt-praezise",
   "name": "SaaS & KI: das Produkt zeigt sich selbst",
   "branche": "Tech-Startup / SaaS / KI-Produkt / Software-Tool",
   "stimmung": [
    "präzise",
    "technisch",
    "ruhig",
    "kompetent"
   ],
   "kurz": "Das echte Produkt-Interface ist der Hero, nicht ein Stockbild oder ein Glow-Verlauf. Eine Groteskfamilie in wenigen Gewichten, Mono nur für Labels und Daten, Graustufen plus genau ein Markenton. Bewegung ist schnell wie in der App selbst (100–200 ms), Inhalte gliedern sich in Funktions-Kapitel, Preise und eine große Sitemap im Footer.",
   "referenzen": [
    {
     "seite": "Linear",
     "url": "https://linear.app/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Inter Variable' (100–900) und 'Berkeley Mono'; Gewichte als Tokens --font-weight-medium 510 / semibold 590 / bold 680. Titel-Skala --title-1-size 1.0625rem bis --title-9-size 4.5rem, Laufweite -.012em (klein) bis -.022em (4.5rem) bei Zeilenhöhe 1. Komplette Easing-Bibliothek als CSS-Variablen; tatsächlich benutzt vor allem var(--ease-out-quad) = cubic-bezier(.25,.46,.45,.94) (74×), daneben cubic-bezier(.32,.72,0,1) (7×, Drawer). Dauern überwiegend .16s (27×), .12s, .18s, .1s; --duration .18s. 16 prefers-reduced-motion-Regeln. Farben dunkel: --color-bg-primary #08090a, Panel #161718, Text #f7f8f8 / #d0d6e0 / #8a8f98, Akzent #7170ff, Marke #5e6ad2. Seitenbreite --page-max-width 1024px, Header 57–72px. Hero zeigt die App als echtes HTML-UI (aria-label 'A screenshot of the Linear app…'); Sektionen: Intake and integrations / Planning and monitoring / AI and automations / Build, review, and ship / Changelog; Footer mit 6 Spalten (Product, Features, Company, Resources, Connect, Legal).",
     "herkunft": "beobachtet",
     "quelle": "https://static.linear.app/web/_next/static/css/2AMbo6gs.css"
    },
    {
     "seite": "n8n",
     "url": "https://n8n.io/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Nuxt + Tailwind v4. @font-face 'n8n Baumer Uniwidth' (--font-sans), 'n8n Baumer Mono', 'EK Baumer Grotesk'. Bewegung nur Tailwind-Defaults: --default-transition-duration .15s, --default-transition-timing-function cubic-bezier(.4,0,.2,1), dazu --ease-out cubic-bezier(0,0,.2,1) und --ease-in cubic-bezier(.4,0,1,1); Dauern .15s (11×), .3s, .5s. Flächen per Token --color-surface-backgrounds-primary = grey-50 (#fafafa) bzw. dunkel grey-900 (#212121), Text grey-950 #161616. H1 'Build the agent. Understand its workflow.' (letztes Wort buchstabenweise gesetzt), danach Use-Case-Karten ('How Mark automated…'), drei Vorteils-Tabs (Full visibility / Put rules around AI actions / Self-host) und 'Documentation, built in'.",
     "herkunft": "beobachtet",
     "quelle": "https://n8n.io/_nuxt/entry.Cz9s5tap.css"
    },
    {
     "seite": "Raycast",
     "url": "https://www.raycast.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Inter' (7 Schnitte), 'GeistMono', 'jetBrainsMono', 'Instrument Serif', 'VT323'. Kurven: cubic-bezier(.23,1,.32,1) easeOutQuint (15×), (.4,0,.2,1) (9×), (.215,.61,.355,1) (9×), (.16,1,.3,1) (7×); Überschwinger (.34,1.56,.64,1) nur 2×. Dauern .3s (104×), .2s (52×), .15s (29×). Dunkle Palette als Tokens: --color-bg-100 #101111, -200 #18191a, --color-fg #f4f4f6, -200 #c2c7ca, -300 #78787c, --color-border #242728; Statusfarben gelb #ffc533, rot #ff6161, blau #57c1ff, grün #59d499 jeweils mit 15 %-Transparenz-Variante. Sektionen: H1 'Your shortcut to everything.', Extensions ('There's an extension for that'), AI Chat / Quick AI / AI Extensions, 'Built for professionals like you', Abschluss 'Take the short way.'",
     "herkunft": "beobachtet",
     "quelle": "https://www.raycast.com/_next/static/immutable/chunks/0lrccwf1ua-z0.css"
    }
   ],
   "schrift": {
    "paarung_basis": "tech-terminal",
    "abweichung": "",
    "headline": "geist",
    "text": "geist",
    "akzent": "geist-mono",
    "groessen": "Stufen wie Linear: 1.0625 / 1.25 / 1.5 / 2 / 2.5 / 3 / 3.5 / 4 / 4.5rem. h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 560–600, Laufweite -0.022em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.4rem + 2vw, 3rem), -0.018em, 1.1; Fließtext 1rem–1.0625rem, wght 400, -0.006em, Zeilenhöhe 1.6; Geist Mono 0.75–0.8125rem für Labels, Code, Kennzahlen. Gewichte maximal 400 / 500 / 600 (Linear arbeitet mit 510 / 590).",
    "techniken": [
     "eine-familie-wenig-gewichte",
     "headline-laufweite-zeilenabstand",
     "mono-labels-versal",
     "tabellenziffern"
    ],
    "alternative_eigenprojekt": "Paarung sanft-kontrast (satoshi + rowan als Serif-Akzent + geist-mono, ITF) für ein freundlicheres KI-Produkt – nicht für IONOS-Templates."
   },
   "farbe": {
    "prinzip": "Graustufen tragen alles, ein einziger Markenton für Primär-Button, Fokus und aktive Zustände. Dark Mode ist bei Dev-Tools Standard (Linear, Raycast), für KMU-Software eher heller Grund wie n8n (#fafafa) mit dunkler Variante. Statusfarben nur in UI-Ausschnitten, nie als Deko-Verlauf.",
    "beispiel": [
     "#08090A Grund dunkel (Linear bg-primary) bzw. #FAFAFA hell (n8n grey-50)",
     "#161718 Panel/Karte (Linear)",
     "#F7F8F8 Text auf dunkel",
     "#8A8F98 Sekundärtext/Meta (Linear tertiary)",
     "#242728 Linien/Ränder (Raycast border)",
     "#7170FF Markenton für Aktion/Fokus (Linear accent; im Template austauschbar)"
    ]
   },
   "animationsstil": "token-tech-praezise",
   "bewegung": {
    "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9); Drawer/Modal expressive cubic-bezier(0.4, 0.14, 0.3, 1)",
    "beobachtet": "easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94) 74×, .16s 27× (Linear); Drawer/Sheets cubic-bezier(0.32, 0.72, 0, 1); cubic-bezier(.4,0,.2,1) .15s (n8n Tailwind); easeOutQuint .2–.3s (Raycast)",
    "dauer_ms": "100–160 (Hover, Farbe, Buttons), 180–200 (Menüs, Tabs), 300–400 (Drawer/Modal), 500–600 (Einblendung von Sektionen)",
    "regel": "UI reagiert so schnell wie die App: die productive-Kurve des Stils für fast alles, Drawer und Sheets mit der expressive-Kurve. Einblendungen nur Deckkraft + 4–8 px y, ohne Federn. Überschwinger höchstens für einen einzelnen Bestätigungs-Moment. Alle Animationen hinter prefers-reduced-motion.",
    "herkunft": "beobachtet (Linear ease-out-quad 74×, .16s 27×; n8n Tailwind .15s cubic-bezier(.4,0,.2,1); Raycast easeOutQuint 15×, .2–.3s)"
   },
   "hero_beschreibung": "Ein Satz Nutzen (höchstens 8 Wörter), Unterzeile, zwei CTAs (Kostenlos testen, Demo) und das echte Produkt-UI als HTML oder scharfer Screenshot (produkt-ui-hero-perspektiv-tilt), kein Mockup-Laptop. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Funktion des Produkts läuft; KI-Funktionen direkt am Feld kennzeichnen (Art. 50 KI-VO).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "command-palette-und-ki-suche",
     "theme-umschalter-view-transition"
    ],
    "hero": [
     "produkt-ui-hero-perspektiv-tilt"
    ],
    "hero_variante": [
     "prompt-hero-eingabefeld"
    ],
    "sektionen": [
     {
      "zweck": "Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
      "muster": [
       "lokale-produktnavigation",
       "split-screen-sticky-seiten",
       "gleitender-indikator",
       "tabs-pfeiltasten-focusgroup"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "titel",
       "tabs-pfeiltasten-focusgroup": "auto",
       "lokale-produktnavigation": "unterseiten"
      }
     },
     {
      "zweck": "Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
      "muster": [
       "bento-grid-interaktiv",
       "karten-spotlight-glow"
      ]
     },
     {
      "zweck": "Kunden / Integrationen",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "laufband"
      }
     },
     {
      "zweck": "Use Cases / Kundenstimmen",
      "muster": [
       "testimonials-neu-gedacht",
       "css-native-karussell"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "liste",
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Preise",
      "muster": [
       "vergleichstabelle-sticky",
       "preis-section-editorial",
       "gleitender-indikator"
      ],
      "varianten": {
       "vergleichstabelle-sticky": "pakete"
      }
     },
     {
      "zweck": "Was spart ihr? (Rechner mit Live-Ergebnis)",
      "muster": [
       "kostenrechner-konfigurator"
      ],
      "varianten": {
       "kostenrechner-konfigurator": "bad"
      }
     },
     {
      "zweck": "FAQ / Sicherheit / DSGVO",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Demo / Kontakt (Demo-Anfrage, Enterprise, Support)",
      "muster": [
       "kontakt-anfrage-formular"
      ]
     },
     {
      "zweck": "Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [
     "zahlen-odometer"
    ],
    "hover": [
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "kopieren-feedback",
     "ki-streaming-text-denkindikator",
     "toast-stapel",
     "skeleton-shimmer",
     "toggle-switch"
    ],
    "material": [
     "verlaufs-rahmen"
    ],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "mega-footer-sitemap"
    ],
    "button": [
     "button-gruppe-expressiv",
     "kopieren-feedback"
    ]
   },
   "signatur": [
    "command-palette-und-ki-suche",
    "produkt-ui-hero-perspektiv-tilt"
   ],
   "optional": [
    "rive-datenbindung"
   ],
   "varianten_demo": {
    "verlaufs-rahmen": "saas",
    "theme-umschalter-view-transition": "light-dark",
    "button-gruppe-expressiv": "split",
    "ki-streaming-text-denkindikator": "archiv",
    "css-native-karussell": "peek"
   },
   "nicht_verwenden": [
    "mesh-gradient-shader – der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn",
    "shimmer-gradient-text – glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand",
    "smooth-scroll-lenis – Produktseiten müssen sich wie die App anfühlen, nicht schwimmen",
    "cursor-follower-lerp / magnetische-elemente – Agentur-Gesten ohne Nutzen für Software-Käufer",
    "interaktives-3d-hero – lenkt vom echten Interface ab und kostet Ladezeit",
    "prozent-zaehler – künstliche Wartezeit vor einem Produkt, das schnell wirken soll",
    "scramble-decode – Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee"
   ],
   "regeln": [
    "Hero = ein Satz Nutzen (max. 8 Wörter) + Unterzeile + zwei CTAs (Kostenlos testen, Demo) + echtes Produkt-UI als HTML oder scharfer Screenshot; kein Mockup-Laptop.",
    "Prompt-Feld im Hero nur, wenn dahinter eine echte Funktion läuft; sonst produkt-ui-hero-perspektiv-tilt.",
    "Eine Groteskfamilie in maximal drei Gewichten, Mono ausschließlich für Labels, Code, Zahlen; Headline-Laufweite negativ und mit der Größe zunehmend (-0.012em bis -0.022em).",
    "Funktionen als Kapitel in der Reihenfolge des Arbeitsablaufs (Linear: Intake → Planung → KI → Ausliefern), jedes mit einem echten UI-Ausschnitt.",
    "Inhaltsbreite um 1024–1200px halten; lange Zeilen in Feature-Texten auf 60ch begrenzen.",
    "Ein Markenton, sonst Graustufen. Höchstens ein Material-Effekt pro Ansicht: verlaufs-rahmen nur am Prompt-Feld im Fokus; karten-spotlight-glow nur in der Dark-Variante und nur im Bento; kein Linien- oder Punktraster als Hintergrund.",
    "Preise offen zeigen mit Monat/Jahr-Umschalter (gleitender Indikator, Zahl per Odometer); bei Enterprise 'Kontakt' statt Fantasiepreis.",
    "Footer als vollständige Sitemap inkl. Status, Changelog, Sicherheit/DSGVO, Impressum.",
    "rive-datenbindung nur als Zusatz (optional, Priorität F) am Rechner: Das Ergebnis steht immer auch als Text im HTML.",
    "Pflichtangaben und Recht (Leitfaden 8a): bei Verbraucher-Abos Kündigungs-Button (§ 312k BGB; BGH 16.07.2026: keine Halteangebote auf der Bestätigungsseite) und Widerrufs-Button (§ 356a BGB), Preise inkl. MwSt., B2B-Angebote klar als solche kennzeichnen; Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO); Sicherheitsseite mit Auftragsverarbeitung, Unterauftragnehmern und Serverstandort; Kundenlogos nur mit Erlaubnis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Schnell halten: Geist als variable WOFF2 (eine Datei je Familie), Produkt-UI als HTML/SVG statt Video, Screenshots als AVIF. Spotlight-Glow per CSS-Variable und pointermove, nur auf Geräten mit hover:hover. Auf Mobil Kapitel-Sticky auflösen zu gestapelten Abschnitten, Tabs statt Split-Screen.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "präzise",
    "ruhig"
   ],
   "raum": {
    "basis_px": 4,
    "skala_px": [
     4,
     8,
     12,
     16,
     20,
     24,
     32,
     48,
     64,
     96
    ],
    "sektion": "clamp(64px, 8vw, 128px)",
    "dichte": "dicht",
    "hinweis": "App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 32px)",
    "spalt": "clamp(16px, 2vw, 24px)",
    "max_breite": "1200px",
    "hinweis": "Inhalt 1024 bis 1200px (Regel). Kapitel in der Reihenfolge des Arbeitsablaufs, jedes mit einem UI-Ausschnitt; Bento nur in der Dark-Variante."
   },
   "form": {
    "radius_klein": "6px",
    "radius_gross": "10px",
    "pille": false,
    "linie": "1px #242728 auf Dunkel; auf Hell dieselbe Linie aus Graustufen",
    "schatten": "nur das Produkt-UI im Hero bekommt einen tiefen, farblosen Schatten; sonst keiner",
    "hinweis": "Radien aus der App: 6 px für Knöpfe, Felder und Tags, 10 px für Panels. Kein Linien- oder Punktraster als Hintergrund; verlaufs-rahmen nur am Prompt-Feld im Fokus."
   },
   "bildsprache": {
    "licht": "Keine Fotos; echte UI-Ausschnitte als HTML oder scharfer Screenshot in doppelter Auflösung.",
    "ausschnitt": "Ausschnitt einer echten Ansicht, auf die Funktion gezoomt, mit echten Beispieldaten.",
    "personen": "Nein; höchstens Kundenporträts bei Stimmen.",
    "formate": [
     "16:10",
     "4:3",
     "1:1"
    ],
    "nicht": "Keine Mockup-Laptops, keine Stock-Teams am Whiteboard, kein Glow- oder Aurora-Hintergrund, keine 3D-Icons."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz, Verb vorn, Nutzen in höchstens 8 Wörtern. Funktionen als Ergebnis, nicht als Feature-Name.",
    "haltung": "Präzise und ruhig, wie gute Software. Bei Software für KMU und Behörden Sie verwenden, dann durchgehend.",
    "beispiele": [
     "Rechnungen in zwei Minuten verschickt.",
     "Verbinde dein Postfach und starte mit einer Vorlage."
    ],
    "nicht": "„revolutionär“, „KI-gestützt“ als Selbstzweck, „Die All-in-One-Lösung für Ihr Business“, Fantasiepreise."
   },
   "hero_aufbau": {
    "raster": "Text über 8 Spalten linksbündig oder zentriert, darunter das Produkt-UI über alle 12 Spalten bis 1200px.",
    "bild": "Echtes Produkt-UI 16:10 als HTML oder scharfer Screenshot, perspektivisch geneigt (produkt-ui-hero-perspektiv-tilt); kein Mockup-Laptop.",
    "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Geist 560–600, über dem UI.",
    "handlung": "„Kostenlos testen“ (Markenton gefüllt) und „Demo ansehen“ (Kontur), nebeneinander unter der Unterzeile. Prompt-Feld nur als hero_variante mit echter Funktion.",
    "zusatz": "Zeile in Geist Mono über der H1 (Version oder Changelog), Kundenlogos als ruhige Reihe unter dem UI."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "mesh-gradient-shader"
     ],
     "grund": "der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn"
    },
    {
     "ids": [
      "shimmer-gradient-text"
     ],
     "grund": "glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Produktseiten müssen sich wie die App anfühlen, nicht schwimmen"
    },
    {
     "ids": [
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "Agentur-Gesten ohne Nutzen für Software-Käufer"
    },
    {
     "ids": [
      "interaktives-3d-hero"
     ],
     "grund": "lenkt vom echten Interface ab und kostet Ladezeit"
    },
    {
     "ids": [
      "prozent-zaehler"
     ],
     "grund": "künstliche Wartezeit vor einem Produkt, das schnell wirken soll"
    },
    {
     "ids": [
      "scramble-decode"
     ],
     "grund": "Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee"
    }
   ],
   "alle_muster": [
    {
     "id": "command-palette-und-ki-suche",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/meta.json"
    },
    {
     "id": "produkt-ui-hero-perspektiv-tilt",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/meta.json"
    },
    {
     "id": "prompt-hero-eingabefeld",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/meta.json"
    },
    {
     "id": "lokale-produktnavigation",
     "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/meta.json",
     "variante": "unterseiten",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=unterseiten"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "titel",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel"
    },
    {
     "id": "gleitender-indikator",
     "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/meta.json"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "bento-grid-interaktiv",
     "rolle": "Sektion: Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
    },
    {
     "id": "karten-spotlight-glow",
     "rolle": "Sektion: Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/meta.json"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Kunden / Integrationen",
     "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": "testimonials-neu-gedacht",
     "rolle": "Sektion: Use Cases / Kundenstimmen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Use Cases / Kundenstimmen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Preise",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "preis-section-editorial",
     "rolle": "Sektion: Preise",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json"
    },
    {
     "id": "kostenrechner-konfigurator",
     "rolle": "Sektion: Was spart ihr? (Rechner mit Live-Ergebnis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/meta.json",
     "variante": "bad",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: FAQ / Sicherheit / DSGVO",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "faq",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Demo / Kontakt (Demo-Anfrage, Enterprise, Support)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "theme-umschalter-view-transition",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/meta.json",
     "variante": "light-dark",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=light-dark"
    },
    {
     "id": "zahlen-odometer",
     "rolle": "Schrift",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/meta.json"
    },
    {
     "id": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "ki-streaming-text-denkindikator",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/meta.json",
     "variante": "archiv",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=archiv"
    },
    {
     "id": "toast-stapel",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
    },
    {
     "id": "skeleton-shimmer",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json"
    },
    {
     "id": "toggle-switch",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/meta.json"
    },
    {
     "id": "verlaufs-rahmen",
     "rolle": "Material",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/meta.json",
     "variante": "saas",
     "demo_url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=saas"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "button-gruppe-expressiv",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/meta.json",
     "variante": "split",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split"
    },
    {
     "id": "token-tech-praezise",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json"
    },
    {
     "id": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/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": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "rive-datenbindung",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/meta.json"
    }
   ]
  },
  {
   "id": "kanzlei-beratung-souveraen",
   "name": "Kanzlei & Beratung: Haltung und Klarheit",
   "branche": "Kanzlei / Steuerberatung / Wirtschaftsprüfung / Unternehmensberatung",
   "stimmung": [
    "seriös",
    "souverän",
    "klar",
    "zurückhaltend"
   ],
   "kurz": "Eine ruhige Text-Serif für Überschriften, eine sachliche Grotesk für alles andere, ein tiefer Markenton (Nachtblau oder Aubergine) auf warmen Grautönen. Inhalte statt Bildwelten: Rechtsgebiete, Köpfe, Mandate, Insights. Bewegung bleibt kurz und funktional (125–330 ms), nichts zählt hoch, nichts schwebt.",
   "referenzen": [
    {
     "seite": "Oppenhoff",
     "url": "https://www.oppenhoff.eu/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): TYPO3. @font-face 'Graphik Web' (400, 500) für Text/UI und 'Berlingske Serif' für Überschriften. h1 wächst in Stufen 2rem → 2.5 → 3 → 3.25 → 3.5rem über die Breakpoints. Kurve cubic-bezier(.4,0,.22,1) (5×), daneben (0,.2,.8,1); Dauern .125s (26×), .15s, .25s, 333ms. Farben: Marke #1e1e50 (Nachtblau, 79×), Akzent #00bee6 (Cyan, 49×), warme Graus #efebeb (109×), #f9f8f8, #d2cdc7, #8e7c6d, Text #212529, Signal #ff5f5f. Startseite: News als h1-Slider, Kanzlei-Claim, Rechtsgebiete als h3-Liste (Arbeitsrecht, Außenhandel, Bank- und Kapitalmarktrecht …), 'Köpfe'.",
     "herkunft": "beobachtet",
     "quelle": "https://www.oppenhoff.eu/typo3temp/assets/compressed/A.merged-39554e518bc1aa2a755d1ba5f60450d1-min.css,q1793401250.pagespeed.cf.zrfzC7gOwe.css"
    },
    {
     "seite": "Slaughter and May",
     "url": "https://www.slaughterandmay.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Feature Deck' (Serif, 4 Schnitte, als var(--hero-serif)) plus 'Open Sans' für Text. Eine einzige Kurve: cubic-bezier(.645,.045,.355,1) easeInOutCubic (30×) mit .3s (32×), .4s, .5s, .7s. Farben Aubergine #2e1a47 / #50316d, Violett #4f32c9, Lavendel #9594d1 / #dbd9e7, Grau #dbdbdb, Text #2f2f2f. Sektionen: 'Advice that stands out' / Insights / People / Careers / Recent work; Themen-Hubs (z. B. 'Autumn Budget 2026 hub').",
     "herkunft": "beobachtet",
     "quelle": "https://www.slaughterandmay.com/dist/css/master.min.css?v=2.0.1"
    },
    {
     "seite": "Noerr",
     "url": "https://www.noerr.com/de",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Next.js. Eine Hausschrift 'ES Allianz' (74 font-family-Deklarationen) für alles. Material-Standardkurve cubic-bezier(0.4,0,0.2,1) (136×) und cubic-bezier(0.33,0,0.2,1) (52×); Dauern 0.33s (26×), 0.12s (24×), 200ms, 150ms, 250ms. Farben: #FFFFFF / #000000, Violett #5642E8, Koralle #F45252, #212121, Hellgrau #DADADB. Sektionen: Studien als h1-Karten ('Public M&A Report 01/2026'), Themen, Studien & Briefings, News, Pressemitteilungen, Events, Karriere, Newsletter 'Bestens informiert'.",
     "herkunft": "beobachtet",
     "quelle": "https://www.noerr.com/_next/static/css/9841a8c498de8577.css"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Keine Katalog-Paarung; Rollen umgekehrt zu nachrichten-nord (dort schibsted-grotesk Headline, newsreader Text). Text schibsted-grotesk 400/500, nachrichtlich-sachlich.",
    "headline": "newsreader",
    "text": "schibsted-grotesk",
    "akzent": "",
    "groessen": "Wie Oppenhoff: Serif nur für Überschriften und Zitate, Grotesk für Text, Navigation, Labels. h1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader wght 400 (opsz automatisch), Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); Fließtext Schibsted Grotesk 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Navigation/Labels wght 500 (Graphik-Prinzip 400/500), Meta 0.8125rem. Kein Bold über 600.",
    "techniken": [
     "serif-grotesk-duotone",
     "optische-groessen-opsz",
     "lesesatz-text-wrap",
     "tabellenziffern",
     "initial-letter-initialen"
    ],
    "alternative_eigenprojekt": "Headline zodiak oder sentient, Text switzer (ITF) – kommt Berlingske Serif + Graphik am nächsten, aber nicht für IONOS-Templates. Für kleine Steuerkanzleien als Template-Variante auch source-serif-4 statt Newsreader."
   },
   "farbe": {
    "prinzip": "Ein tiefer, gesättigter Markenton (Nachtblau, Aubergine) für Überschriften, Header und dunkle Sektionen; warme Grautöne statt reinem Weiß für Flächen; ein heller Akzent nur für Links, Fokus und aktive Filter. Keine Verläufe, keine Stockfoto-Blautöne.",
    "beispiel": [
     "#F9F8F8 Grund (Oppenhoff)",
     "#EFEBEB Flächenwechsel/Karten (Oppenhoff; Linien #D2CDC7)",
     "#1E1E50 Marke, Überschriften, dunkle Sektion (Oppenhoff; Alternative Aubergine #2E1A47 wie Slaughter and May)",
     "#212529 Fließtext",
     "#8E7C6D Meta/Datum",
     "#00BEE6 Akzent für Links/Fokus (sparsam, Oppenhoff)",
     "#7C6C5E Meta-Text barrierefrei (4.8 : 1 auf #F9F8F8; #8E7C6D nur für Linien oder Schrift ab 24 px)"
    ]
   },
   "animationsstil": "token-swiss-knackig",
   "bewegung": {
    "easing": "cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig, Eintritt); Austritt cubic-bezier(0.5, 0, 0.75, 0)",
    "beobachtet": "cubic-bezier(0.4, 0, 0.22, 1) mit .125s 26× (Oppenhoff); cubic-bezier(.4,0,.2,1) 136×, .33s/.12s (Noerr); easeInOutCubic .3s (Slaughter and May)",
    "dauer_ms": "125 (Farbe, Unterstreichung), 250 (Dropdown, Akkordeon), 330 (Mega-Menü, Drawer), 500 (Bild-Einblendung)",
    "regel": "Eine Ausklang-Kurve für alles, kurze Dauern wie Oppenhoff und Noerr. Bewegung nur entlang des Rasters (y oder x), keine Masken-Reveals an Text, kein Hochzählen von Zahlen. Schließen etwas schneller als Öffnen. View Transitions zwischen Seiten als ruhiger Crossfade.",
    "herkunft": "beobachtet (Oppenhoff .125s 26× + cubic-bezier(.4,0,.22,1); Noerr cubic-bezier(.4,0,.2,1) 136×, .33s/.12s; Slaughter and May easeInOutCubic .3s)"
   },
   "hero_beschreibung": "Ohne Stockfoto: ein Satz Positionierung in der Serif und als Einstieg die aktuelle Insight oder Studie (editorial-magazin-layout, Variante cover, ohne den Lenis-Teil der Demo), alternativ ein echtes Teamfoto. Kein Video, keine Skyline, kein Handschlag. Kleine Kanzlei: Satz + Teamfoto + „Erstgespräch“ und Telefon.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "sticky-shrink-header",
     "gestapelte-drawer-navigation"
    ],
    "hero": [
     "editorial-magazin-layout"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst)",
      "muster": [
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Köpfe / Team (filterbar nach Fachgebiet, Standort)",
      "muster": [
       "team-ueber-mich-layout",
       "facettenfilter-ergebnisliste"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster",
       "facettenfilter-ergebnisliste": "leiste"
      }
     },
     {
      "zweck": "Ausgewählte Mandate / Recent work",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "zeitung"
      }
     },
     {
      "zweck": "Insights / News / Studien (Long-Reads mit einer echten Initiale)",
      "muster": [
       "editorial-magazin-layout",
       "initial-letter-initialen"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Zahlen & Fakten (Standorte, Berufsträger, Gründung)",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "tabelle"
      }
     },
     {
      "zweck": "Auszeichnungen / Rankings",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "auszeichnungen"
      }
     },
     {
      "zweck": "Karriere",
      "muster": [
       "stellen-karriere"
      ],
      "varianten": {
       "stellen-karriere": "liste"
      }
     },
     {
      "zweck": "Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)",
      "muster": [
       "kontakt-anfrage-formular",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "formular-fehlerzusammenfassung": "kompakt"
      }
     },
     {
      "zweck": "Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)",
      "muster": [
       "karte-zwei-klick",
       "oeffnungszeiten-status"
      ],
      "varianten": {
       "oeffnungszeiten-status": "termin",
       "karte-zwei-klick": "bild"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "akkordeon-hoehe-auto",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "mega-footer-sitemap",
     "studio-visitenkarte-footer"
    ],
    "button": [
     "pfeil-icon-button",
     "button-zustaende"
    ],
    "hero_varianten": {
     "editorial-magazin-layout": "cover"
    }
   },
   "signatur": [
    "initial-letter-initialen"
   ],
   "varianten_demo": {
    "css-native-karussell": "buehne",
    "pfeil-icon-button": "linie",
    "akkordeon-hoehe-auto": "faq",
    "studio-visitenkarte-footer": "basis"
   },
   "nicht_verwenden": [
    "zahlen-odometer – hochzählende Kennzahlen wirken verkäuferisch; Zahlen stehen einfach da",
    "highlight-marker-underline – laut Katalog nicht für sehr formale Marken",
    "marquee-laufband – Mandanten- oder Ranking-Logos im Laufband wirken nach Startup",
    "cinematic-video-hero – Handschlag- und Skyline-Stockvideos sind das Kanzlei-Klischee",
    "smooth-scroll-lenis / magnetische-elemente / jeder Custom-Cursor – Show statt Seriosität",
    "kreistext-siegel-rotierend – 'Seit 1950'-Siegel wirken wie Werbung",
    "mesh-gradient-shader – kein Bezug zur Branche"
   ],
   "regeln": [
    "Hero ohne Stockfoto: ein Satz Positionierung in der Serif + aktuelle Insights/Studie als Einstieg (Noerr, Oppenhoff), alternativ ein echtes Teamfoto.",
    "Navigation nach Mandantenfrage: Leistungen/Rechtsgebiete, Branchen, Köpfe, Insights, Karriere, Kontakt; Mega-Menü ab 3 Bereichen mit je 5+ Einträgen.",
    "Serif ausschließlich für Überschriften und Zitate; alles Funktionale in der Grotesk mit 400/500.",
    "Jede Person mit Foto im einheitlichen Licht, Funktion, Fachgebiet, Sprachen, direktem Kontakt (Telefon/E-Mail als Link).",
    "Mandate und Insights mit Datum und Rubrik (Tabellenziffern), nicht als anonyme Kacheln.",
    "Ein Markenton + warme Graus; der helle Akzent nur für Links, Fokus und aktive Filter.",
    "Bei Steuerberatung zusätzlich: Mandantenportal/Upload-Link im Header, Fristen-Hinweise als Akkordeon.",
    "Footer mit allen Standorten (Adresse, Telefon), Impressum mit Kammer- und Berufsrechtsangaben.",
    "Erstgespräch als eigene Sektion vor dem Footer: kurzes Formular (Anliegen, Rechtsgebiet, Rückruf-Zeitfenster), Telefon, Mandantenportal-Link; Validierung erst nach Interaktion.",
    "Initiale (initial-letter) höchstens einmal pro Insight-Artikel, nie in Teasern oder Listen.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Kammer, gesetzlicher Berufsbezeichnung und Staat der Verleihung, berufsrechtlichen Regelungen und Berufshaftpflichtversicherung; Mandate nur mit Einwilligung der Mandanten (Verschwiegenheit); keine Erfolgsversprechen; Rankings mit Jahr und Quelle; Kontaktformular mit Hinweis, dass noch kein Mandat entsteht – vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Kleine Kanzlei / Steuerberatung (3–10 Personen) – Standard für Templates",
     "sektionen": [
      "Leistungen (z. B. Steuererklärung, Lohn, Jahresabschluss, Gründung) als Akkordeon",
      "Team mit Foto, Funktion, Sprachen",
      "Fristen-Hinweise (Akkordeon, mit Datum in Tabellenziffern)",
      "Erstgespräch / Kontakt",
      "Mandantenportal- bzw. Upload-Link im Header",
      "Anfahrt (karte-zwei-klick)"
     ],
     "weglassen": [
      "Ausgewählte Mandate",
      "Auszeichnungen / Rankings",
      "Studien",
      "Karriere-Sektion (höchstens eine Stellenanzeige)",
      "Mega-Menü (einfache Navigation reicht)"
     ],
     "muster_zusatz": [
      "leistungsseite-antwort-zuerst"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Sehr leicht: zwei Variable Fonts (Newsreader mit opsz, Schibsted Grotesk), kaum JS. Mega-Menü per Popover/Details mit Tastaturbedienung. Teamfilter per CSS/kleinem Script, Teamfotos als AVIF mit festen Seitenverhältnissen gegen Layout-Sprünge.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt: eine deutsche Steuerberatungs-Website (3–10 Personen) (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "ruhig",
    "präzise",
    "editorial"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     128
    ],
    "sektion": "clamp(72px, 9vw, 136px)",
    "dichte": "mittel",
    "hinweis": "Geordnet und ruhig: Insights und Köpfe in festen Rastern mit 32 px Abstand, Fließtext auf 65ch."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 4vw, 56px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "1280px",
    "hinweis": "Hero 7/5 (Satz links, Insight rechts). Köpfe als 4er-Raster mit einheitlichem Porträt 4:5, Insights als Liste mit Datum und Rubrik."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #D2CDC7 zwischen Listeneinträgen und um Felder",
    "schatten": "keiner",
    "hinweis": "Keine Rundung, keine Schatten, kein Glas. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Formularknöpfe eckig im Markenton."
   },
   "bildsprache": {
    "licht": "Porträts in einheitlichem, weichem Licht vor demselben Hintergrund.",
    "ausschnitt": "Brustbild auf Augenhöhe; Räume der Kanzlei nur als ruhige Totale.",
    "personen": "Ja: nur echte Partner:innen und Team, mit Funktion und Sprachen.",
    "formate": [
     "4:5",
     "3:2"
    ],
    "nicht": "Keine Skyline, kein Handschlag, keine Justitia, keine Paragraphen- oder Waagen-Symbole, keine Stock-Meetings."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Präzise und vollständig, Fachbegriff erklärt, keine Floskeln. Insights mit Datum und Rubrik.",
    "haltung": "Souverän und sachlich, auf Augenhöhe mit der Mandantin.",
    "beispiele": [
     "Wir beraten Familienunternehmen bei Nachfolge und Verkauf.",
     "Neue Regeln zur Grundsteuer: was Eigentümer jetzt prüfen sollten."
    ],
    "nicht": "„Ihr kompetenter Partner in allen Rechtsfragen“, „maßgeschneiderte Lösungen“, „Wir kämpfen für Ihr Recht!“."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Positionierungssatz in der Serif über Spalte 1 bis 7, aktuelle Insight als Cover über 8 bis 12 (editorial-magazin-layout, Variante cover).",
    "bild": "Kein Stockfoto; Cover der aktuellen Insight 4:5 oder echtes Teamfoto 3:2.",
    "h1": "clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader 400, oben links.",
    "handlung": "„Erstgespräch vereinbaren“ (Markenton, eckig) und Telefon als Textlink.",
    "zusatz": "Rubrik und Datum der Insight in Tabellenziffern über dem Cover; bei Steuerberatung Mandantenportal im Kopf."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochzählende Kennzahlen wirken verkäuferisch; Zahlen stehen einfach da"
    },
    {
     "ids": [
      "highlight-marker-underline"
     ],
     "grund": "laut Katalog nicht für sehr formale Marken"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "Mandanten- oder Ranking-Logos im Laufband wirken nach Startup"
    },
    {
     "ids": [
      "cinematic-video-hero"
     ],
     "grund": "Handschlag- und Skyline-Stockvideos sind das Kanzlei-Klischee"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "magnetische-elemente"
     ],
     "grund": "smooth-scroll-lenis / magnetische-elemente / jeder Custom-Cursor – Show statt Seriosität"
    },
    {
     "ids": [
      "kreistext-siegel-rotierend"
     ],
     "grund": "'Seit 1950'-Siegel wirken wie Werbung"
    },
    {
     "ids": [
      "mesh-gradient-shader"
     ],
     "grund": "kein Bezug zur Branche"
    }
   ],
   "alle_muster": [
    {
     "id": "initial-letter-initialen",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "cover",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover",
     "varianten_je_rolle": [
      {
       "rolle": "Hero",
       "variante": "cover",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover"
      },
      {
       "rolle": "Sektion: Ausgewählte Mandate / Recent work",
       "variante": "zeitung",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
      },
      {
       "rolle": "Sektion: Insights / News / Studien (Long-Reads mit einer echten Initiale)",
       "variante": "magazin",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
      }
     ]
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "faq",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Köpfe / Team (filterbar nach Fachgebiet, Standort)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Köpfe / Team (filterbar nach Fachgebiet, Standort)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Zahlen & Fakten (Standorte, Berufsträger, Gründung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "tabelle",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Auszeichnungen / Rankings",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "auszeichnungen",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=auszeichnungen"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Karriere",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)",
     "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": "oeffnungszeiten-status",
     "rolle": "Sektion: Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
    },
    {
     "id": "gestapelte-drawer-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/meta.json"
    },
    {
     "id": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "token-swiss-knackig",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/meta.json"
    },
    {
     "id": "serif-grotesk-duotone",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    }
   ]
  },
  {
   "id": "praxis-gesundheit-ruhig",
   "name": "Praxis & Therapie: ruhig und zugewandt",
   "branche": "Arztpraxis / Zahnarzt / Psychotherapie / Physiotherapie / Gesundheitsangebot",
   "stimmung": [
    "ruhig",
    "vertrauensvoll",
    "warm",
    "zugänglich"
   ],
   "kurz": "Kein klinisches Weiß-Blau: gedecktes Grün oder Petrol, warme Off-Whites und eine weiche Serif für Überschriften. Der Weg zum Termin ist auf jeder Seite einen Klick entfernt, Behandlungen und Ablauf sind in einfacher Sprache erklärt. Bewegung ist kurz, ruhig und selten; nur Bilder dürfen langsam überblenden.",
   "referenzen": [
    {
     "seite": "HelloBetter",
     "url": "https://hellobetter.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Astro mit View Transitions (data-astro-transition-persist; Reduced-Motion-Regel schaltet ::view-transition-group(*) ab). @font-face 'Corda' (Serif, 400) für Überschriften und 'DM Sans' (4 Schnitte) für Text. Kurven cubic-bezier(.4,0,.2,1) (11×) und easeInOutSine (.37,0,.63,1) (6×); Dauern .15s (19×), .25s, .3s, .6s, 1s. Größen 1 / 1.125 / 1.25 / 1.5 / 1.75 / 2rem, Zeilenhöhen 2–2.5rem bzw. 140 %. Farben: Grund #F5F7F7, Text #363B3B, Sekundär #596666, Petrol #037D6B, Mint #26BDA6 / #9EE3D9, warme Akzente #F2B54F / #ED994F, Lila-Fläche #E6EAFD. Sektionen: H1 'Dein Online-Therapieprogramm auf Rezept.', Soforthilfe, Indikationen als Kacheln (Stress und Burnout, Schlafen, Panik, Chronische Schmerzen …), Einblicke ins Programm (Übersicht, Psychologische Begleitung, Kurseinheiten, Tagebuch).",
     "herkunft": "beobachtet",
     "quelle": "https://hellobetter.de/_astro/page.3zUCQ0la.css"
    },
    {
     "seite": "One Medical",
     "url": "https://www.onemedical.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'GT Super Display' (h1: wght 600, 4.8rem bei 62,5 %-Root = 48px, Zeilenhöhe 1.071; größer 6 → 8.8rem) und 'Ginto' für Text. Eigene Kurve cubic-bezier(.28,0,.12,1) (17×); Dauern .25s (134×), .6s (40×), 1.4s (22×). Größen 1.6rem (16px, 188×), 2.4, 3.6, 4.8, 7.2rem; Zeilenhöhen 1 / 1.25 / 1.5 / 1.75. Farben: Waldgrün #005450 / #004D49 / #068466, Hellgrün #ABCC76 / #BCDE85, warmes Grau #E2E0DE / #F4F4F4, Akzent #FFC776, Text-Grau #736F6C. Sektionen: 'Primary care designed for you', 'Get care today for depression anxiety sleep issues …' (wechselnde Begriffe in einer Zeile), 'Fall in love with your doctor's office' (6 Vorteile als h3), Mitgliedspreis offen ('$99/year'), 'Become a One Medical patient'.",
     "herkunft": "beobachtet",
     "quelle": "https://www.onemedical.com/static/css/app.6a19bfc9a6f44a1f2fc8.css"
    },
    {
     "seite": "Tend Dental",
     "url": "https://www.hellotend.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Founders Grotesk' (5 Schnitte) und 'Nantes' (Serif, 4 Schnitte). Übergänge fast nur 0.2s (46×), daneben 0.3s, 0.5s, 1s; Reduced-Motion-Regel setzt 0.01ms. Laufweite .01em (25×), Text 1rem / .875rem / .9375rem. Farben Mint #EAF4EB, Dunkelgrün #36514C, Limette #E7FB7E, Rosé #FFCCCB / #FFB6A8, Rot #B00909. Sektionen: H1 'Look forward to going to the dentist', Leistungen, 'The Tend Dental difference', 'Why people love Tend' (Bewertungen), 'Dental studios across the US' mit Standortliste als h3 (Hell's Kitchen, Park Slope …); Splide-Slider.",
     "herkunft": "beobachtet",
     "quelle": "https://www.hellotend.com/images/3658/css/custom-style-v32.css"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Ausgang war soft-serif-warm (fraunces + hanken-grotesk). Headline hedvig-letters-serif (ruhige Antiqua mit opsz), Text google-sans-flex mit ROND 30–50 – damit unterscheidet sich die Praxis typografisch von gastro und von der Fahrschul-Referenz tofudriving.com.",
    "headline": "hedvig-letters-serif",
    "text": "google-sans-flex",
    "akzent": "",
    "groessen": "Alle drei Referenzen kombinieren eine weiche Serif-Headline (Corda, GT Super, Nantes) mit einer freundlichen Grotesk. h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, opsz 24, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem), opsz 24; Fließtext Google Sans Flex wght 400, ROND 30–50 (weich, aber klar), opsz automatisch, mindestens 1.0625rem (17px), Zeilenhöhe 1.6, max. 62ch; Buttons/Labels 1rem wght 500. Für maximale Lesbarkeit (ältere Patienten) Text auf atkinson-hyperlegible-next wechseln.",
    "techniken": [
     "optische-groessen-opsz",
     "lesesatz-text-wrap",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Headline gambarino oder erode, Text general-sans (ITF) – näher an GT Super/Corda + Ginto, aber nicht für Templates."
   },
   "farbe": {
    "prinzip": "Gedecktes Grün/Petrol als Vertrauenston (statt Krankenhausblau), warme Off-Whites und Greige als Flächen, dunkles Grüngrau statt Schwarz für Text, ein warmer Akzent (Apricot/Gelb) nur für Hervorhebungen. Kontrast für Text mind. 4.5:1.",
    "beispiel": [
     "#F5F7F7 Grund (HelloBetter)",
     "#E2E0DE warme Fläche/Karten (One Medical)",
     "#005450 Marke, Buttons, Footer (One Medical)",
     "#363B3B Text (HelloBetter)",
     "#596666 Sekundärtext",
     "#FFC776 warmer Akzent für Hinweise/Badges (One Medical)"
    ]
   },
   "animationsstil": "token-tech-praezise",
   "bewegung": {
    "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive) für UI; einmalige Bild-Überblendung mit expressive entrance cubic-bezier(0, 0, 0.3, 1) aus demselben Stil",
    "beobachtet": "cubic-bezier(0.37, 0, 0.63, 1) für Bild-Überblendungen (aus dem früheren Stil token-luxus-weich); HelloBetter .15s 19×; One Medical .25s 134× / .6s 40×; Tend 0.2s 46×",
    "dauer_ms": "150–250 (Buttons, Links, Formular, Akkordeon), 400 (Einblendungen, max. 8 px Weg), 600–800 (Bild-Überblendung, einmalig)",
    "regel": "UI-Feedback schnell und ruhig wie in einem Formular-Werkzeug: kurze Dauern, kein Federn, kein Springen. Langsam darf nur ein Bild überblenden. Keine automatisch bewegten Inhalte (kein Wortwechsel, kein Autoplay-Karussell). Bei prefers-reduced-motion alles sofort.",
    "herkunft": "beobachtet (HelloBetter .15s 19×; One Medical .25s 134× / .6s 40×; Tend 0.2s 46×); Animationsstil nach AD-Prüfung R3 von token-luxus-weich auf token-tech-praezise umgestellt"
   },
   "hero_beschreibung": "Foto + Satz in einfacher Sprache + Button „Termin vereinbaren“ (Online-Termin per termin-buchung-zwei-klick oder Telefon als tel:-Link). Keine Stock-Ärzt:innen, keine wechselnden Wörter.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns",
     "mobile-bottom-navigation"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)",
      "muster": [
       "akkordeon-hoehe-auto",
       "hovercard-interest-invoker",
       "leistungsseite-antwort-zuerst",
       "raster-zu-wischreihe"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "praxis",
       "raster-zu-wischreihe": "einreihig"
      }
     },
     {
      "zweck": "Termin online (Buchungs-Widget erst nach Consent bzw. Klick, sonst Telefon)",
      "muster": [
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter"
      }
     },
     {
      "zweck": "Ihr erster Termin – so läuft es ab",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Team / Therapeut:innen",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster"
      }
     },
     {
      "zweck": "Praxisräume",
      "muster": [
       "css-native-karussell",
       "galerie-shared-element-vollbild"
      ],
      "varianten": {
       "css-native-karussell": "buehne",
       "galerie-shared-element-vollbild": "basis"
      }
     },
     {
      "zweck": "Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis)",
      "muster": [
       "testimonials-neu-gedacht",
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "stimmen-reihe",
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Kurse (Rückenschule, Prävention, Reha-Sport; nur bei regelmäßigen Kursen, sonst Liste)",
      "muster": [
       "wochen-kursplan"
      ],
      "varianten": {
       "wochen-kursplan": "studio"
      }
     },
     {
      "zweck": "Kosten, Kassen, Rezept – FAQ",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)",
      "muster": [
       "kontakt-anfrage-formular",
       "standortfinder-liste",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "standortfinder-liste": "kompakt",
       "oeffnungszeiten-status": "karte",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Erklärung zur Barrierefreiheit (eigene Seite)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "fortschrittsring",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "button-zustaende",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "hovercard-interest-invoker"
   ],
   "varianten_demo": {
    "studio-visitenkarte-footer": "praxis",
    "pfeil-icon-button": "linie",
    "mobile-bottom-navigation": "kontakt",
    "bild-zoom-in-maske": "basis",
    "css-native-karussell": "buehne",
    "galerie-shared-element-vollbild": "basis"
   },
   "nicht_verwenden": [
    "konfetti-erfolg – laut Katalog nicht im Gesundheitskontext; Terminbestätigung ruhig und klar",
    "zahlen-odometer – hochgezählte Patientenzahlen wirken unseriös",
    "marquee-laufband – Unruhe neben Texten, die Sicherheit geben sollen",
    "smooth-scroll-lenis / jeder Custom-Cursor / magnetische-elemente – stört Menschen mit Einschränkungen und wirkt verspielt",
    "cinematic-video-hero – Stock-Ärzt:innen mit Stethoskop sind das Klischee; echte Fotos der Praxis",
    "scramble-decode / typewriter-natural – technisch-kalt, gegen die Stimmung",
    "mesh-gradient-shader / grain-noise-overlay – Effekt statt Ruhe"
   ],
   "regeln": [
    "Hero = echtes Foto (Praxis, Team) + ein Satz in einfacher Sprache + 'Termin vereinbaren' (Online-Buchung oder Telefon als tel:-Link); keine Stock-Ärzt:innen.",
    "Termin-Button und Telefon im Header immer sichtbar, mobil in einer unteren Leiste (Anrufen / Termin / Anfahrt).",
    "Behandlungen in Alltagssprache benennen ('Schlafprobleme' statt Fachbegriff) wie HelloBetters Indikationsliste; Fachbegriff als Unterzeile.",
    "Hero-Zeile fest formuliert; keine wechselnden Wörter (automatisch bewegter Inhalt, WCAG 2.2.2, Patienten sähen womöglich nur das erste Wort).",
    "Kosten und Kassenfragen offen beantworten (One Medical nennt den Preis offen); Selbstzahler-Preise als Ab-Preise.",
    "Team mit einheitlichen, freundlichen Fotos, Qualifikation und Sprachen; bei Therapie zusätzlich Schwerpunkte.",
    "Barrierearm: Schrift ab 17px, Kontrast ≥ 4.5:1, Fokus-Ringe sichtbar, Formulare mit klaren Fehlertexten erst nach Verlassen des Feldes.",
    "Footer mit Sprechzeiten, Notfallhinweis (116 117 / 112), Anfahrt, Barrierefreiheit der Räume.",
    "Fachbegriffe als Glossar: die Erklärung steht im Text bzw. FAQ und per Klick bereit (details oder Popover); hovercard-interest-invoker nur als Verbesserung für Maus und Fokus, nie als einziger Weg (wann_nicht: nicht für Pflichtinformationen, Langdruck auf Touch kollidiert mit dem Systemmenü).",
    "Kontaktformular ohne Gesundheitsdaten als Pflichtfeld, Hinweis „Bitte keine Befunde senden“, verschlüsselt übertragen; Rezept- und Terminanfragen lieber über das Termin-Tool oder Telefon.",
    "Pflichtangaben und Recht (Leitfaden 8a): Heilmittelwerbegesetz und Berufsordnung: Patientenstimmen nur echt, sachlich, mit schriftlicher Einwilligung und vom Kunden freigegeben; keine Heilversprechen, keine Erfolgsquoten, keine Vorher-nachher-Bilder bei operativen Eingriffen (§ 11 HWG); Impressum mit Kammer, Berufsbezeichnung, Staat der Verleihung und ggf. KV-Zulassung; Notfallhinweis 116 117 / 112; bei eigener Online-Terminbuchung Variante bfsg der Erklärung zur Barrierefreiheit prüfen – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "niedrig",
   "leistung": "Leicht: zwei Variable Fonts, CSS-Reveals, kein Smooth Scroll. Größter Posten sind Fotos (AVIF, lazy ab der zweiten Reihe). Buchungs-Widgets externer Anbieter erst nach Klick oder Consent laden; untere Mobilleiste darf Consent-Banner und Widget nicht verdecken.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt: eine deutsche Arzt- oder Physiopraxis (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Zahnarztpraxis",
     "hinweis": "Notfall zuerst: Wer mit Schmerzen sucht, braucht sofort die eine Zeile im Kopf und mobil in der unteren Leiste (mobile-bottom-navigation: Anrufen / Notfall / Termin): Notfallzeit der Praxis heute, außerhalb der zahnärztliche Notdienst der Region mit Link zur Notdienstsuche der Landeszahnärztekammer bzw. KZV (vom Kunden eintragen), bei Lebensgefahr 112. firmendaten-strukturiert in der Variante zahnarzt (Dentist; Sprechzeiten mit Mittagspause, Urlaub, Notdienst-Hinweis, neue Patient:innen). Sprechzeiten als oeffnungszeiten-status, Variante karte. Für Angstpatient:innen ein ruhiger Ablauf als prozess-timeline-wachsende-linie (Kennenlerngespräch ohne Behandlung, Handzeichen für Pausen, Betäubung, Sedierung oder Narkose nur, wenn die Praxis sie anbietet, mit Kosten), ohne Versprechen wie „schmerzfrei“ und ohne Angstmache über Folgen. Kosten als FAQ: Kassenleistung, Eigenanteil, Festzuschuss, Heil- und Kostenplan vorab, private Leistungen nach GOZ als Spanne. Recht: Heilmittelwerbegesetz und Berufsordnung der Zahnärzt:innen: keine Heilversprechen und keine irreführenden Erfolgsaussagen (§ 3 HWG), keine Vorher-nachher-Bilder bei plastisch-chirurgischen Eingriffen (§ 11 Abs. 1 Satz 3 HWG), Patientenstimmen nur echt, sachlich und freigegeben; Impressum mit Zahnärztekammer, KZV, Berufsbezeichnung und Link zur Berufsordnung; Notfallhinweis im Footer – vom Kunden prüfen lassen.",
     "sektionen": [
      "Schmerzen? Notfall heute (Notfallzeit der Praxis, sonst regionaler zahnärztlicher Notdienst)",
      "Behandlungen (Prophylaxe, Füllungen, Wurzelbehandlung, Zahnersatz, Implantate, Kinder, Aligner; je Behandlung eine Unterseite, Antwort zuerst)",
      "Angst vor dem Zahnarzt? So läuft Ihr Termin ab",
      "Termin online (Widget erst nach Klick, sonst Telefon)",
      "Kosten: Kasse, Eigenanteil, Heil- und Kostenplan, GOZ (FAQ)",
      "Team (Zahnärzt:innen mit Schwerpunkten, Prophylaxe, Sprachen)",
      "Praxisräume und Barrierefreiheit (stufenlos, Aufzug, Parken)",
      "Sprechzeiten, Anfahrt, Kontakt"
     ],
     "weglassen": [
      "Kurse (Rückenschule, Prävention, Reha-Sport)"
     ],
     "muster_zusatz": [
      "mobile-bottom-navigation",
      "firmendaten-strukturiert"
     ]
    },
    {
     "name": "Tierarztpraxis",
     "hinweis": "Wer anruft, hat meist ein krankes Tier: Notdienst-Zeile im Kopf und mobil in der unteren Leiste (Anrufen / Notdienst / Termin), mit eigenen Notdienstzeiten oder dem Verweis auf den tierärztlichen Notdienst der Region. Tierarten als Reiter (tabs-pfeiltasten-focusgroup, Variante auto: Hund und Katze, Heimtiere, Vögel und Reptilien, Pferd), je Reiter der ehrliche Satz, was die Praxis nicht behandelt. Der erste Besuch als prozess-timeline-wachsende-linie (Impfpass und Vorbefunde mitbringen, Transportbox, getrennter Wartebereich nur, wenn es ihn gibt). Kosten als FAQ nach GOT, mit dem Notdienst-Hinweis vorab. firmendaten-strukturiert ohne Dentist-Typ, als VeterinaryCare. Stimmen sachlich über Praxis und Umgang, nie über Heilerfolge; Fotos von Tieren der Kundschaft nur mit Einwilligung der Halter:innen. Recht: GOT: im Notdienst (nachts, am Wochenende, an Feiertagen) mindestens der zweifache Satz und 50 € Notdienstgebühr (§ 4 GOT), das vor dem Besuch sagen; HWG gilt auch für Behandlungen am Tier, also keine Heilversprechen; keine Werbung für verschreibungspflichtige Tierarzneimittel gegenüber Tierhalter:innen (§ 10 HWG, EU-Tierarzneimittelverordnung 2019/6); Impressum mit Tierärztekammer, Berufsbezeichnung und Berufsordnung – vom Kunden prüfen lassen.",
     "sektionen": [
      "Notfall? (eigene Notdienstzeiten, sonst regionaler tierärztlicher Notdienst; Hinweis auf Notdienstgebühren)",
      "Tierarten (was wir behandeln, was nicht)",
      "Leistungen (Vorsorge und Impfung, Chirurgie, Zahnbehandlung, Röntgen und Ultraschall, Labor; je Leistung eine Unterseite, Antwort zuerst)",
      "Termin online oder offene Sprechstunde",
      "Der erste Besuch (was mitbringen, Ablauf)",
      "Kosten nach GOT (FAQ: Gebührenrahmen, Notdienst, Kostenvoranschlag, Tierkrankenversicherung)",
      "Team",
      "Praxis, Sprechzeiten, Anfahrt (Parken vor der Tür, Hausbesuche, Einzugsgebiet bei Pferden)"
     ],
     "weglassen": [
      "Kurse (höchstens ein Welpenkurs als Liste)",
      "Stimmen über Heilerfolge"
     ],
     "muster_zusatz": [
      "tabs-pfeiltasten-focusgroup",
      "mobile-bottom-navigation",
      "firmendaten-strukturiert"
     ]
    }
   ],
   "stimmung_tags": [
    "ruhig",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     88,
     128
    ],
    "sektion": "clamp(64px, 8vw, 120px)",
    "dichte": "mittel",
    "hinweis": "Ruhig und übersichtlich: Behandlungen als Liste mit 24 px Abstand, Formulare mit 20 px zwischen Feldern, Fließtext auf 62ch."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(16px, 2.4vw, 32px)",
    "max_breite": "1200px",
    "hinweis": "Hero 6/6 (Text links, Foto rechts). Team als 3er-Raster, Behandlungen in einer Spalte mit Unterzeile."
   },
   "form": {
    "radius_klein": "12px",
    "radius_gross": "16px",
    "pille": true,
    "linie": "1px #E2E0DE",
    "schatten": "nur Hovercard und Popover: weich und flach in Grüngrau, sonst keiner",
    "hinweis": "Weich, aber klar: Pillen für Termin und Telefon, 16 px für Fotos und Karten (Demo hovercard-interest-invoker zeigt 12 und 16 px)."
   },
   "bildsprache": {
    "licht": "Helles, weiches Tageslicht, warme Töne statt Kaltweiß.",
    "ausschnitt": "Praxisräume, Empfang, Team im Gespräch mit Blickkontakt.",
    "personen": "Ja: das echte Team, freundlich; keine Patient:innen in Behandlung.",
    "formate": [
     "4:5",
     "3:2",
     "1:1"
    ],
    "nicht": "Keine Stock-Ärzt:innen mit Stethoskop, kein Klinikblau, keine Zahnlächeln-Nahaufnahmen, keine Spritzen oder Instrumente."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Einfache Sprache, höchstens 15 Wörter je Satz, Alltagswort zuerst, Fachwort in Klammern.",
    "haltung": "Ruhig und beruhigend, offen zu Kosten und Kassenfragen.",
    "beispiele": [
     "Sie haben Schmerzen? Rufen Sie an, wir suchen mit Ihnen einen Termin.",
     "Schlafprobleme (Insomnie): So läuft die Behandlung."
    ],
    "nicht": "„Ihre Gesundheit liegt uns am Herzen“, „schmerzfrei“, Angstmache über Folgen, wechselnde Wörter in der Headline."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Foto unter der H1.",
    "bild": "Echtes Praxis- oder Teamfoto, 4:5, mit 16 px Radius.",
    "h1": "clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, links.",
    "handlung": "„Termin vereinbaren“ (#005450 gefüllt, Pille) und Telefon als tel:-Link mit sichtbarer Nummer.",
    "zusatz": "Sprechzeiten heute als Zeile; mobil untere Leiste Anrufen / Termin / Anfahrt."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/praxis-gesundheit-ruhig/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/praxis-gesundheit-ruhig/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/praxis-gesundheit-ruhig/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/praxis-gesundheit-ruhig/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "laut Katalog nicht im Gesundheitskontext; Terminbestätigung ruhig und klar"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochgezählte Patientenzahlen wirken unseriös"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "Unruhe neben Texten, die Sicherheit geben sollen"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "magnetische-elemente"
     ],
     "grund": "smooth-scroll-lenis / jeder Custom-Cursor / magnetische-elemente – stört Menschen mit Einschränkungen und wirkt verspielt"
    },
    {
     "ids": [
      "cinematic-video-hero"
     ],
     "grund": "Stock-Ärzt:innen mit Stethoskop sind das Klischee; echte Fotos der Praxis"
    },
    {
     "ids": [
      "scramble-decode",
      "typewriter-natural"
     ],
     "grund": "technisch-kalt, gegen die Stimmung"
    },
    {
     "ids": [
      "mesh-gradient-shader",
      "grain-noise-overlay"
     ],
     "grund": "Effekt statt Ruhe"
    }
   ],
   "starter": "https://cecodesign.de/lab/fundus/starter/praxis-gesundheit-ruhig/index.html",
   "alle_muster": [
    {
     "id": "hovercard-interest-invoker",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: Kosten, Kassen, Rezept – FAQ",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "raster-zu-wischreihe",
     "rolle": "Sektion: Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/meta.json",
     "variante": "einreihig",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=einreihig"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Termin online (Buchungs-Widget erst nach Consent bzw. Klick, sonst Telefon)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: Ihr erster Termin – so läuft es ab",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Team / Therapeut:innen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Praxisräume",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Praxisräume",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "stimmen-reihe",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "wochen-kursplan",
     "rolle": "Sektion: Kurse (Rückenschule, Prävention, Reha-Sport; nur bei regelmäßigen Kursen, sonst Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/meta.json",
     "variante": "studio",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "standortfinder-liste",
     "rolle": "Sektion: Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)",
     "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": "barrierefreiheit-seite",
     "rolle": "Sektion: Erklärung zur Barrierefreiheit (eigene Seite)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "kontakt",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt"
    },
    {
     "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": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "fortschrittsring",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "token-tech-praezise",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/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": "kurs-coaching-lernweg",
   "name": "Online-Kurs & Coaching: klarer Lernweg",
   "branche": "Online-Kurs / Coaching / Akademie / Weiterbildung / Bildungsangebot",
   "stimmung": [
    "klar",
    "ermutigend",
    "persönlich",
    "strukturiert"
   ],
   "kurz": "Die Seite verkauft ein Ergebnis und einen Weg dorthin: Für wen, was man danach kann, Module, wer unterrichtet, was es kostet. Freundliche, gut lesbare Typo, ein heller Grund, ein Markenton und eine Erfolgsfarbe für Fortschritt. Bewegung ist schnell und ermutigend – kleine Federn nur dort, wo etwas geschafft ist.",
   "referenzen": [
    {
     "seite": "Maven",
     "url": "https://maven.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Next.js. @font-face 'fontGraphik' (7 Schnitte), 'fontBureauSans', 'fontBureauSerif', 'fontSentient', 'fontDomaine', 'fontTickerbit'. Kurven cubic-bezier(.32,.72,0,1) (4×, Drawer), Material (0,0,.2,1)/(.4,0,.2,1), Überschwinger (.68,-.55,.265,1.55) und (.04,.615,.26,1.19) je 2× als Akzent, (.165,.84,.44,1) easeOutQuart; Dauern 1s (12×), .5s, .2s, .1s. Grund #F4F6FA (46×), Tinte #080C28, bunte Kategorie-Akzente (#FF6255, #F8A740, #69C662, #EDA6FB). Startseite: 'Learn from the best in the industry', 'Browse Maven by category', danach Kurskarten mit konkreten Titeln ('AI Evals For Engineers & PMs', 'Advanced Product Taste').",
     "herkunft": "beobachtet",
     "quelle": "https://maven.com/_next/static/immutable/chunks/197evdsa0m1a9.css"
    },
    {
     "seite": "Brilliant",
     "url": "https://brilliant.org/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Next.js (Panda CSS). @font-face 'CoFo Brilliant' (6), 'Soleil', 'CoFo Semi Mono', 'Source Code Pro', KaTeX für Formeln. Kurven cubic-bezier(.22,1,.36,1) easeOutQuint (9×), (.4,0,.2,1) (9×), (.16,1,.3,1) (8×), (0,0,.2,1) (7×); Dauern .15s (46×), .2s (45×), .1s (28×), .3s (26×). Farben Tinte #141414, Grau #F2F2F2 / warm #F5F3F1, Blau #7491FF, Gelb #F7C325, Pink #FF90E0. Sektionen: H1 'Your personal tutor for math and coding', 'Meet Koji', 'Start at the right level, with a plan that adapts', 'Track your progress and know what to practice next', 'From grade 5 to college and beyond' mit Themenlisten je Kurs ('Algebra: Covered topics').",
     "herkunft": "beobachtet",
     "quelle": "https://brilliant.org/_next/static/chunks/12ueqtafnc84e.css"
    },
    {
     "seite": "Ness Labs",
     "url": "https://nesslabs.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): WordPress; Schriften per Google Fonts: Lato (Text) + Lora (Serif). Übergänge 300ms (17×), .2s, .3s, .4s; eine Kurve cubic-bezier(.16,.68,.43,.99). Farben Weiß, Hellgrau #E3E3E3, Grün #10BF7A, Petrol #3A606E, Rosé-Fläche #FDE8E2, Text #4D4D4D. Aufbau eines Einzel-Coaching-/Lernangebots: H1 als Nutzenversprechen ('Want to achieve more without sacrificing your mental health? …'), 'Build a laboratory for your mind' mit vier Wegen (Educational Articles / Learning Community / Online Courses / Order the Book), Abschluss 'Don't work more. Work mindfully.' mit Newsletter.",
     "herkunft": "beobachtet",
     "quelle": "https://nesslabs.com/"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Keine Katalog-Paarung. Text onest statt atkinson-hyperlegible-next und Akzent shantell-sans statt dm-mono, damit sich kurs von fahrschule unterscheidet.",
    "headline": "bricolage-grotesque",
    "text": "onest",
    "akzent": "shantell-sans",
    "groessen": "h1 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage wght 700, opsz 72–96, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wght 650; Fließtext Onest 1.0625–1.125rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Shantell Sans (INFM 30–60, BNCE 0) sparsam für Randnotizen und Modul-Labels („Modul 03 · 45 min“), 0.875–0.9375rem, nie für Fließtext, Buttons oder Preise. Für Kurse mit viel Lesetext reicht Bricolage im Text nicht – deshalb eine eigene Textschrift. Barrierearme Variante: Text atkinson-hyperlegible-next.",
    "techniken": [
     "optische-groessen-opsz",
     "fluide-typo-clamp-cqi",
     "lesesatz-text-wrap",
     "tabellenziffern"
    ],
    "alternative_eigenprojekt": "Für persönliches Coaching mit Buch-Anmutung Paarung warmer-text (young-serif + sentient, ITF) – nah an Maven (Sentient) und Ness Labs (Lora), aber nicht für Templates."
   },
   "farbe": {
    "prinzip": "Heller, leicht kühler oder warmer Grund, fast schwarze Tinte, ein Markenton für Aktionen und ein eigener Erfolgston für Fortschritt/Häkchen. Kategorie-Farben nur bei echten Kurskatalogen (Maven, Brilliant), sonst eine Akzentfarbe für Hervorhebungen.",
    "beispiel": [
     "#F4F6FA Grund (Maven)",
     "#FFFFFF Karten",
     "#141414 Text (Brilliant)",
     "#7491FF Markenton/Buttons (Brilliant; austauschbar)",
     "#10BF7A Erfolg/Fortschritt (Ness Labs)",
     "#F7C325 Hervorhebung/Badge 'Nächster Start' (Brilliant)"
    ]
   },
   "animationsstil": "token-federnd-verspielt",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.34, 1.56, 0.64, 1) (token-federnd-verspielt, nur Transform kleiner Elemente) – nur Erfolgsmomente; alles andere über animationsstil_ui",
    "beobachtet": "easeOutQuint cubic-bezier(0.22, 1, 0.36, 1) 9× mit .15s/.2s je 45× (Brilliant); Überschwinger nur je 2× als Akzent (Maven); 300 ms (Ness Labs)",
    "dauer_ms": "100–200 (Buttons, Tabs, Antworten), 300 (Akkordeon, Karten), 500–600 (Einblendungen); Federn 400–600 nur für Erfolgsmomente",
    "regel": "Basis für Navigation, Formulare, Akkordeon und Einblendungen ist animationsstil_ui token-toggle-asymmetrisch (steile Expo-Ausklang-Kurve) mit kurzen Dauern. Federnd (Kurve des Stils) nur, wenn etwas geschafft ist: Modul abgehakt, Quiz richtig, Kurs gebucht. Nie an Navigation oder Fließtext.",
    "herkunft": "beobachtet (Brilliant easeOutQuint 9× + .15s/.2s je 45×; Maven Überschwinger nur je 2× als Akzent; Ness Labs 300ms)"
   },
   "hero_beschreibung": "Standard (Einzelkurs): Ergebnis-Satz + Zielgruppe + Startdatum/Format + Preis bzw. ab-Preis + ein CTA, ohne Muster oder als split-screen-sticky-seiten mit Foto der Trainerin. prompt-hero-eingabefeld nur bei einem Kurskatalog mit funktionierender Suche (sonst laut Katalog „Fake-Input“).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "sticky-shrink-header",
     "native-popover-dropdowns"
    ],
    "hero": [],
    "hero_variante": [
     "prompt-hero-eingabefeld",
     "split-screen-sticky-seiten"
    ],
    "sektionen": [
     {
      "zweck": "Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste)",
      "muster": [
       "bento-grid-interaktiv"
      ]
     },
     {
      "zweck": "Lernweg / Module / Kurswochen",
      "muster": [
       "prozess-timeline-wachsende-linie",
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen"
      }
     },
     {
      "zweck": "Über die Trainerin / den Coach",
      "muster": [
       "team-ueber-mich-layout",
       "eigener-videoplayer"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement",
       "eigener-videoplayer": "kapitel"
      }
     },
     {
      "zweck": "Ergebnisse / Teilnehmerstimmen",
      "muster": [
       "testimonials-neu-gedacht"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "wand"
      }
     },
     {
      "zweck": "Kurskatalog (bei mehreren Kursen)",
      "muster": [
       "facettenfilter-ergebnisliste",
       "produktfinder-quiz"
      ],
      "varianten": {
       "produktfinder-quiz": "schritte",
       "facettenfilter-ergebnisliste": "leiste"
      }
     },
     {
      "zweck": "Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen)",
      "muster": [
       "wochen-kursplan"
      ],
      "varianten": {
       "wochen-kursplan": "studio"
      }
     },
     {
      "zweck": "Preise / Pakete / Ratenzahlung",
      "muster": [
       "vergleichstabelle-sticky",
       "kostenrechner-konfigurator"
      ],
      "varianten": {
       "vergleichstabelle-sticky": "pakete",
       "kostenrechner-konfigurator": "bad"
      }
     },
     {
      "zweck": "Anmeldung (mehrere Schritte, Fehlerliste)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung"
      ],
      "varianten": {
       "mehrschritt-anfrage": "leiste",
       "formular-fehlerzusammenfassung": "liste"
      }
     },
     {
      "zweck": "FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)",
      "muster": [
       "kontakt-anfrage-formular",
       "termin-buchung-zwei-klick",
       "karte-zwei-klick"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [
     "scroll-fortschritt"
    ],
    "schrift_animation": [
     "highlight-marker-underline"
    ],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "fortschrittsring",
     "checkbox-radio-animiert",
     "druck-feedback",
     "konfetti-erfolg"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "tiefen-taste-3d",
     "verlaufs-rahmen"
    ],
    "hero_varianten": {
     "split-screen-sticky-seiten": "bild"
    }
   },
   "signatur": [
    "scroll-fortschritt"
   ],
   "varianten_demo": {
    "css-native-karussell": "peek",
    "verlaufs-rahmen": "button",
    "tiefen-taste-3d": "stapel",
    "bild-zoom-in-maske": "richtung",
    "footer-newsletter-mit-persoenlichkeit": "basis"
   },
   "nicht_verwenden": [
    "zahlen-odometer als Countdown – künstliche Verknappung ('Nur noch 02:59:13') zerstört Vertrauen",
    "marquee-laufband mit 'Bekannt aus'-Logos – nur echte Erwähnungen, dann als ruhige logo-wand-social-proof",
    "typewriter-natural / ki-streaming-text-denkindikator – wirkt nach generiertem Inhalt, solange kein echter KI-Tutor existiert",
    "smooth-scroll-lenis / Custom-Cursor – stört auf langen Verkaufsseiten das Lesen",
    "interaktives-3d-hero / mesh-gradient-shader – Effekt statt Lernversprechen",
    "einmal-intro-session / Preloader aller Art – Interessenten wollen sofort Titel, Termin, Preis sehen"
   ],
   "regeln": [
    "Hero = Ergebnis in einem Satz ('In 6 Wochen zur eigenen Website'), Zielgruppe, Startdatum/Format, Preis oder 'ab'-Preis, ein Haupt-CTA; Prompt-/Suchfeld nur bei echtem Kurskatalog mit funktionierender Suche.",
    "Lernweg sichtbar machen: Module nummeriert (Modul-Label in Shantell Sans, sparsam), mit Dauer und konkretem Ergebnis je Modul; aufklappbar für Details.",
    "Die Person hinter dem Kurs zeigen: Foto, warum sie das kann, echte Zahlen (Teilnehmende, Jahre) ohne Hochzählen.",
    "Stimmen mit Name, Kontext und Ergebnis ('Hat danach … erreicht'), keine anonymen Fünf-Sterne-Sätze.",
    "Preis offen mit Paketvergleich (max. 3), Ratenzahlung per Umschalter; Widerrufsrecht und Förderfähigkeit (z. B. Bildungsgutschein, nur mit Zulassung) nennen.",
    "Erfolgsfarbe nur für Fortschritt und Häkchen; Konfetti genau einmal: nach Buchung oder Kursabschluss.",
    "Markierung (highlight-marker-underline) höchstens ein Kernbegriff pro Abschnitt.",
    "Freebie/Newsletter am Ende mit persönlicher Ansprache statt Pop-up beim Seitenaufruf.",
    "Pflichtangaben und Recht (Leitfaden 8a): Online-Kurse mit Lernerfolgskontrolle können nach dem Fernunterrichtsschutzgesetz zulassungspflichtig sein (ZFU); Widerrufs-Button (§ 356a BGB, seit 19.06.2026) und bei Abos oder Mitgliedschaften Kündigungs-Button (§ 312k BGB); Preise inkl. MwSt.; Teilnehmerstimmen echt und mit Einwilligung; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Lange Verkaufsseiten: Videos (Kurs-Trailer) als Klick-to-Play mit Poster laden, nicht im Hero autoplayen. Fonts als Variable WOFF2 mit Subset Latin. Konfetti-Script erst beim Ereignis nachladen. Akkordeons nativ (details/summary + interpolate-size) für schnelle Mobilseiten.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Musikschule / Nachhilfe",
     "hinweis": "Abgrenzung: fahrschule-freundlich-buchbar nennt Nachhilfe ebenfalls. Wer vor allem feste Termine online buchen lässt und wenig erklären muss, nimmt fahrschule; diese Variante passt, wenn Lehrkräfte, Probestunde und laufende Monatsverträge im Mittelpunkt stehen. Schrift, Farbe, Stil und Signatur bleiben (scroll-fortschritt auf langen Fächer- und Vertragsseiten). Lehrkräfte mit team-ueber-mich-layout: ab etwa sechs Personen Variante raster mit Filter nach Fach, darunter statement. Unterrichtszeiten als wochen-kursplan (Variante studio) nur für feste Gruppenkurse wie Früherziehung, Ensembles oder Lerngruppen; bei weniger als etwa acht Wochenterminen eine Tabelle, Einzelunterricht „nach Vereinbarung“. Probestunde als mehrschritt-anfrage (Variante leiste: Fach und Alter → Wunschzeit → Kontakt der Erziehungsberechtigten). Preise als vergleichstabelle-sticky (Variante pakete: 30, 45, 60 Minuten) mit Anmeldegebühr, Laufzeit, Kündigungsfrist und Ferienregel in derselben Tabelle. Vorspiele und Konzerte als programm-kalender nur ab etwa acht Terminen im Monat, sonst Liste. Recht: Monats- bzw. Dauerverträge, die online geschlossen werden, brauchen Kündigungs-Button (§ 312k BGB) und Widerrufs-Button (§ 356a BGB); Verträge für Minderjährige schließen die Erziehungsberechtigten; Fotos und Videos von Kindern (Vorspiele) nur mit Einwilligung der Eltern; Förderungen wie Bildung und Teilhabe oder Zertifikate nur, wenn wirklich vorhanden; Preise inkl. MwSt. oder Hinweis auf eine Umsatzsteuerbefreiung nur nach Prüfung – vom Kunden prüfen lassen.",
     "sektionen": [
      "Fächer und Angebote (Instrumente und Gesang bzw. Fächer und Klassenstufen; Alter, Einzel oder Gruppe, Dauer)",
      "Probestunde (Ablauf, was mitbringen, kostenlos oder Preis; Anfrage in wenigen Schritten)",
      "Lehrkräfte (Foto, Fächer, Ausbildung, Sprachen, freie Plätze)",
      "Unterrichtszeiten und Kursplan (Wochenplan nur bei festen Gruppenkursen)",
      "Preise und Vertrag (Monatsbeitrag je Dauer, Anmeldegebühr, Laufzeit, Kündigungsfrist, Ferien, Geschwisterrabatt)",
      "Anmeldung (Schüler:in, Erziehungsberechtigte, Fach, Wunschzeit; Fehlerliste)",
      "Vorspiele und Konzerte bzw. Prüfungsvorbereitung (Einzeltermine)",
      "FAQ (Instrument mieten, Fehlstunden, Ferien, Online-Unterricht, Bildung und Teilhabe)",
      "Kontakt und Unterrichtsorte (Karte per 2-Klick)",
      "Verträge kündigen und widerrufen (Footer, ohne Login, bei Online-Anmeldung)"
     ],
     "weglassen": [
      "Lernweg in Modulen (höchstens bei Kursreihen)",
      "Ratenzahlung und Paketvergleich im Coaching-Stil",
      "Kurskatalog mit Produktfinder"
     ],
     "muster_zusatz": [
      "programm-kalender"
     ]
    }
   ],
   "stimmung_tags": [
    "warm",
    "verspielt",
    "präzise"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     40,
     56,
     80,
     120
    ],
    "sektion": "clamp(64px, 8vw, 112px)",
    "dichte": "mittel",
    "hinweis": "Strukturiert: Module mit 16 px zwischen Label, Titel und Ergebnis, 24 px zwischen Modulen. Preisvergleich mit gleich hohen Karten."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(16px, 2vw, 28px)",
    "max_breite": "1200px",
    "hinweis": "Hero 7/5 (Text/Foto) oder split-screen-sticky-seiten. Module in einer Spalte, Pakete als 3er-Raster."
   },
   "form": {
    "radius_klein": "10px",
    "radius_gross": "20px",
    "pille": true,
    "linie": "1px #141414 mit 12 % Deckkraft",
    "schatten": "nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten flach in #FFFFFF auf #F4F6FA",
    "hinweis": "Freundlich rund: Pillen für Knöpfe und Badges, 20 px für Karten. verlaufs-rahmen nur am Button (Variante button)."
   },
   "bildsprache": {
    "licht": "Helles, offenes Tageslicht.",
    "ausschnitt": "Trainer:in im Gespräch oder beim Erklären, Bildschirm mit echtem Kursinhalt, Notizen.",
    "personen": "Ja: die Person hinter dem Kurs; Teilnehmende nur mit Einwilligung.",
    "formate": [
     "4:5",
     "16:9",
     "1:1"
    ],
    "nicht": "Keine Stock-Laptops mit Kaffee, keine Erfolgsbilder mit Sportwagen, keine Diplomhut-Icons."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz, das Ergebnis vorn, konkrete Zeitangaben (Wochen, Minuten).",
    "haltung": "Ermutigend und ehrlich zum Aufwand.",
    "beispiele": [
     "In acht Wochen sicher präsentieren.",
     "Modul 02 · 40 min: Du baust deine erste Folie."
    ],
    "nicht": "„Dein Weg zur finanziellen Freiheit“, Countdown-Druck, „Nur heute!“, anonyme Fünf-Sterne-Sätze."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Text über Spalte 1 bis 7, Foto der Trainerin über 8 bis 12; alternativ split-screen-sticky-seiten.",
    "bild": "Porträt 4:5. Prompt-Feld nur bei einem Kurskatalog mit funktionierender Suche.",
    "h1": "clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage 700, links.",
    "handlung": "Ein Haupt-CTA „Platz sichern“ als Tiefen-Taste, dazu der Textlink „Module ansehen“.",
    "zusatz": "Zeile mit Zielgruppe, Startdatum, Format und ab-Preis; Badge „Nächster Start“ in #F7C325."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/kurs-coaching-lernweg/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/kurs-coaching-lernweg/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/kurs-coaching-lernweg/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/kurs-coaching-lernweg/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "als Countdown – künstliche Verknappung ('Nur noch 02:59:13') zerstört Vertrauen"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "mit 'Bekannt aus'-Logos – nur echte Erwähnungen, dann als ruhige logo-wand-social-proof"
    },
    {
     "ids": [
      "typewriter-natural",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "wirkt nach generiertem Inhalt, solange kein echter KI-Tutor existiert"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "/ Custom-Cursor – stört auf langen Verkaufsseiten das Lesen"
    },
    {
     "ids": [
      "interaktives-3d-hero",
      "mesh-gradient-shader"
     ],
     "grund": "Effekt statt Lernversprechen"
    },
    {
     "ids": [
      "einmal-intro-session"
     ],
     "grund": "/ Preloader aller Art – Interessenten wollen sofort Titel, Termin, Preis sehen"
    }
   ],
   "alle_muster": [
    {
     "id": "scroll-fortschritt",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/meta.json"
    },
    {
     "id": "prompt-hero-eingabefeld",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/meta.json"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "bento-grid-interaktiv",
     "rolle": "Sektion: Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: Lernweg / Module / Kurswochen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Lernweg / Module / Kurswochen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Lernweg / Module / Kurswochen",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Über die Trainerin / den Coach",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "eigener-videoplayer",
     "rolle": "Sektion: Über die Trainerin / den Coach",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json",
     "variante": "kapitel",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Ergebnisse / Teilnehmerstimmen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "wand",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Kurskatalog (bei mehreren Kursen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "produktfinder-quiz",
     "rolle": "Sektion: Kurskatalog (bei mehreren Kursen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json",
     "variante": "schritte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte"
    },
    {
     "id": "wochen-kursplan",
     "rolle": "Sektion: Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/meta.json",
     "variante": "studio",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Preise / Pakete / Ratenzahlung",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "kostenrechner-konfigurator",
     "rolle": "Sektion: Preise / Pakete / Ratenzahlung",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/meta.json",
     "variante": "bad",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Anmeldung (mehrere Schritte, Fehlerliste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Anmeldung (mehrere Schritte, Fehlerliste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)",
     "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": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "highlight-marker-underline",
     "rolle": "Schrift",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/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": "richtung",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung"
    },
    {
     "id": "fortschrittsring",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "konfetti-erfolg",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "tiefen-taste-3d",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
     "variante": "stapel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=stapel"
    },
    {
     "id": "verlaufs-rahmen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/meta.json",
     "variante": "button",
     "demo_url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=button"
    },
    {
     "id": "token-federnd-verspielt",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/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": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    }
   ]
  },
  {
   "id": "d2c-produkt-zuerst",
   "name": "Onlineshop & Produktmarke: Produkt zuerst",
   "branche": "Onlineshop / D2C-Produktmarke / Manufaktur mit Shop",
   "stimmung": [
    "sympathisch",
    "direkt",
    "hochwertig",
    "zugänglich"
   ],
   "kurz": "Produktfotos auf warmen Neutraltönen, eine klare Grotesk für Navigation, Preise und Produktnamen und eine charaktervolle Serif nur für Marken-Claims – so arbeiten Allbirds, ooia und KoRo. Kategorien, Bestseller und Vertrauen (Bewertungen, Versand, Rückgabe) kommen vor jeder Inszenierung. Bewegung ist schnell und dient Warenkorb, Filtern und Drawern.",
   "referenzen": [
    {
     "seite": "Allbirds",
     "url": "https://www.allbirds.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Shopify-Theme. @font-face 'Geograph' (8 Schnitte) für UI, 'Self Modern' (Serif) für Marken-Headlines, 'Akkurat Mono' für Labels. Farb-Tokens: --color-natural-white #e0dacf, --color-natural-white-60 #ece9e2, --color-natural-white-25 #f5f4f1, --color-black #212121, --color-green #10714e, --color-midnight #03143b, --color-khaki #443828, --color-red #9c0f0f. Übergänge meist .2s (16×), Kurven (.4,0,.2,1), (0,0,.2,1), (.2,0,0,1). Navigation Men's / Women's mit Mega-Menü-Spalten ('Men's Shoes', 'Customer Favorites', 'Apparel & Accessories'); Warenkorb-Drawer 'Added to Cart'; Sektionen: H1 'Wildly Comfortable. Super Natural.', New Arrivals, Best Sellers, Kollektion, 'Follow The Flock' (Community-Bilder).",
     "herkunft": "beobachtet",
     "quelle": "https://www.allbirds.com/cdn/shop/t/4159/assets/theme.css"
    },
    {
     "seite": "ooia",
     "url": "https://www.ooia.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Shopify. @font-face 'Instrument Sans' (6 Schnitte) für Text/UI, 'Feijoa' (Serif) und 'Neue Haas Grotesk Display Pro' für Headlines. Kurven easeInOutCirc cubic-bezier(.785,.135,.15,.86) (6×), (.4,0,.22,1), (.45,0,.55,1); Übergänge .2s (47×), .15s, .25s, .3s. Tinte #1D1D1B (380×), Akzente Pink #EB5C9D, Limette #CDDC20, Blau #4C6894, Orange #FF7913, Creme #F3EAC3; Produktfarben als Tokens --fabric-color-* (beige #dec9a0, berry #d33776, blaubeere #4c6894 …). Sektionen: H1 'Periodenunterwäsche und mehr', drei Vertrauens-Argumente als h3 (hautfreundlich & schadstoffgeprüft, nachhaltig & fair), Produktvergleich, Kategorien, 'Jetzt die passende … finden' (Finder).",
     "herkunft": "beobachtet",
     "quelle": "https://ooia.de/cdn/shop/t/1098/assets/theme.css?v=103695471756654088871777270913"
    },
    {
     "seite": "KoRo",
     "url": "https://www.korodrogerie.de/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Nuxt + Tailwind. @font-face 'Outfit' (24 Deklarationen) für UI und 'KoRo Serif' für Headlines. Kurven (.4,0,.2,1) (13×), (.167,0,.36,1) und Ease-in (.65,0,1,1) (je 3×); Dauern .15s (12×), .3s, .5s. Key-Visual-Token --kv-bg #F9F5F0, --kv-card-bg #ffffff, Grau #F1F1F1, Tinte #141414. Sektionen: Aktions-H1, Unsere Bestseller, Probiersets, Neu bei KoRo, App-Hinweis, Im Trend, Protein-Themenwelt, Rezepte (Content-Teaser mit h3-Titeln).",
     "herkunft": "beobachtet",
     "quelle": "https://www.korodrogerie.de/_nuxt/style.DqjsjeES.css"
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "",
    "headline": "young-serif",
    "text": "instrument-sans",
    "akzent": "",
    "groessen": "Prinzip aller drei Referenzen: Grotesk für UI/Preise/Produktnamen, eigene Serif nur für Marken-Claims. h1 (Claim) clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, Laufweite -0.01em, Zeilenhöhe 1.05; Sektions-Titel Instrument Sans 600, clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem), -0.015em; Produktname 1rem–1.125rem wght 500–600; Preis gleiche Größe mit tabellarischen Ziffern; Fließtext/Beschreibung 1rem, Zeilenhöhe 1.55; Labels/Badges 0.75rem Versal +0.06em.",
    "techniken": [
     "serif-grotesk-duotone",
     "tabellenziffern",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Claims in gambarino (weiche Serif wie Feijoa/Self Modern), UI in general-sans oder satoshi (ITF) – nicht für Templates. Ruhigere Marke (Kosmetik): fraunces mit SOFT 100 statt young-serif."
   },
   "farbe": {
    "prinzip": "Warme Neutraltöne als Bühne für Produktfotos, fast schwarze Tinte und ein schwarzer (oder sehr dunkler) Primär-Button für 'In den Warenkorb'. Markenfarben als Akzent für Badges, Sale, Themenwelten; Produktfarben kommen aus den Varianten (Farb-Swatches als Tokens).",
    "beispiel": [
     "#F5F4F1 Grund (Allbirds natural-white-25)",
     "#ECE9E2 Produktkachel-Hintergrund (Allbirds natural-white-60)",
     "#212121 Text und Primär-Button (Allbirds black)",
     "#6B6B6B Sekundärtext/Grundpreis",
     "#10714E Nachhaltigkeit/Verfügbar (Allbirds green)",
     "#EB5C9D Marken-Akzent/Sale-Badge (ooia; austauschbar)"
    ]
   },
   "animationsstil": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-toggle-asymmetrisch, Öffnen); Schließen cubic-bezier(0.7, 0, 0.84, 0) in etwa 65 % der Dauer",
    "beobachtet": "Öffnen cubic-bezier(0, 0, 0.2, 1), Schließen cubic-bezier(0.4, 0, 1, 1) (Allbirds .2s 16×); cubic-bezier(.4,0,.2,1) 13× und Ease-in cubic-bezier(.65,0,1,1) (KoRo); .2s 47× (ooia)",
    "dauer_ms": "150–200 (Hover, Swatches, Buttons), 250–300 Öffnen / 200 Schließen (Warenkorb-Drawer, Filter, Mega-Menü), 400 (Produktbild-Wechsel)",
    "regel": "Öffnen mit der Ausklang-Kurve des Stils, Schließen schneller mit dessen Anlauf-Kurve (das Prinzip steht so bei Allbirds und KoRo im CSS, Werte unter beobachtet). Keine Scroll-Inszenierung zwischen Kunde und Produkt; Bewegung bestätigt Handlungen (hinzugefügt, gefiltert, gemerkt).",
    "herkunft": "beobachtet (Allbirds .2s 16×, (0,0,.2,1)/(.4,0,.2,1); KoRo (.4,0,.2,1) 13× + Ease-in (.65,0,1,1); ooia .2s 47×)"
   },
   "hero_beschreibung": "Claim plus 2–4 Kategorie-Einstiege mit echten Produktfotos; bento-grid-interaktiv nur mit echten, ungleich gewichteten Inhalten (eine große Kachel für Bestseller oder Neuheit, kleinere für Kategorien), sonst 2–4 große Kacheln. Darunter sofort Bestseller mit Preis. Kein Slider, kein Video.",
   "muster": {
    "seitenuebergang": [
     "vt-shared-element-morph"
    ],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "gestapelte-drawer-navigation",
     "sticky-shrink-header"
    ],
    "hero": [
     "bento-grid-interaktiv"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Bestseller / Neuheiten",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "produktreihe"
      }
     },
     {
      "zweck": "Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento)",
      "muster": [
       "bento-grid-interaktiv",
       "bild-hotspots"
      ],
      "varianten": {
       "bild-hotspots": "shop"
      }
     },
     {
      "zweck": "Kategorie mit Filter",
      "muster": [
       "facettenfilter-ergebnisliste"
      ],
      "varianten": {
       "facettenfilter-ergebnisliste": "leiste"
      }
     },
     {
      "zweck": "Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe)",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "typo"
      }
     },
     {
      "zweck": "Produktdetailseite",
      "muster": [
       "produkt-kaufbox-varianten",
       "galerie-shared-element-vollbild",
       "akkordeon-hoehe-auto",
       "warenkorb-drawer",
       "eu-gewaehrleistungshinweis"
      ],
      "varianten": {
       "produkt-kaufbox-varianten": "seite",
       "galerie-shared-element-vollbild": "zoom",
       "warenkorb-drawer": "drawer",
       "akkordeon-hoehe-auto": "basis",
       "eu-gewaehrleistungshinweis": "kaufbox"
      }
     },
     {
      "zweck": "Produktvergleich / Finder",
      "muster": [
       "produktfinder-quiz",
       "vergleichstabelle-sticky"
      ],
      "varianten": {
       "produktfinder-quiz": "schritte",
       "vergleichstabelle-sticky": "pakete"
      }
     },
     {
      "zweck": "Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)",
      "muster": [
       "bewertungen-verteilung",
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungen-verteilung": "band",
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Community / Rezepte / Journal",
      "muster": [
       "masonry-grid-lanes-galerie",
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg",
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske",
     "hover-absicht-timing"
    ],
    "cursor": [],
    "mikro": [
     "in-den-warenkorb-flug",
     "toast-stapel",
     "skeleton-shimmer",
     "animiertes-select",
     "checkbox-radio-animiert",
     "like-herz-burst",
     "druck-feedback"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild",
     "masonry-grid-lanes-galerie"
    ],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit",
     "mega-footer-sitemap"
    ],
    "button": [
     "button-gruppe-expressiv",
     "grain-noise-overlay"
    ]
   },
   "signatur": [
    "in-den-warenkorb-flug",
    "like-herz-burst"
   ],
   "varianten_demo": {
    "footer-newsletter-mit-persoenlichkeit": "basis",
    "bild-zoom-in-maske": "basis",
    "grain-noise-overlay": "button",
    "button-gruppe-expressiv": "split",
    "css-native-karussell": "produktreihe",
    "galerie-shared-element-vollbild": "produkt"
   },
   "nicht_verwenden": [
    "smooth-scroll-lenis – verlangsamt Scrollen durch Produktlisten und kostet auf Mobilgeräten Leistung",
    "horizontal-scroll-section / pinned-scrub-scrollytelling – versteckt Produkte hinter Scroll-Inszenierung",
    "fullpage-snap-slides – Kunden wollen frei durch Listen scrollen",
    "jeder Preloader – jede Sekunde vor dem ersten Produkt kostet Umsatz",
    "cursor-follower-lerp / kontextueller-cursor – Agentur-Geste, im Shop ohne Nutzen",
    "webgl-bildverzerrung / interaktives-3d-hero – schwer, und Produktfotos sollen unverfälscht aussehen (3D nur als echter Produkt-Konfigurator)"
   ],
   "regeln": [
    "Startseite: Claim + Kategorie-Einstiege (Bento oder 2–4 große Kacheln) statt Slider; darunter sofort Bestseller mit Preis, Bewertung und Farb-Swatches.",
    "Produktkacheln einheitlich: gleiches Seitenverhältnis, gleicher Hintergrundton (#ECE9E2), zweites Bild beim Hover, Preis mit Tabellenziffern, Grundpreis wo Pflicht.",
    "Produktseite: Galerie links, Kaufbox rechts sticky (Varianten, Größe, Preis, Lieferzeit, Button); darunter Akkordeons für Material, Pflege, Versand & Rückgabe.",
    "Serif nur für Claims und Themenwelten, nie für Preise, Buttons oder Formulare.",
    "Warenkorb als Drawer mit Bestätigung (Flug-Animation nur, wenn das Warenkorb-Icon sichtbar ist) und Hinweis auf Gratisversand-Schwelle.",
    "Vertrauen sichtbar: Prüfsiegel, Bewertungen, Versand/Rückgabe direkt unter dem CTA (ooia-Prinzip: drei konkrete Argumente).",
    "Laufband (marquee) höchstens als schmale Ankündigungsleiste oben, nie für Produktreihen.",
    "Footer mit Newsletter (Vorteil konkret nennen), Zahlungsarten, Hilfe/FAQ, Impressum, Widerruf (Widerrufs-Button), AGB, Erklärung zur Barrierefreiheit.",
    "Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Grundpreis wo Pflicht, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), bei Abos Kündigungs-Button (§ 312k BGB), AGB, Zahlungsarten; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse, Warnhinweise) in der Kaufbox; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; bei Lebensmitteln LMIV-Angaben vor dem Kauf – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Core Web Vitals sind Umsatz: LCP-Bild der ersten Produktreihe/des Heros mit fetchpriority=high, Rest lazy; responsive srcset in AVIF/WebP. Bewertungs-/Chat-Widgets verzögert laden. Varianten-Wechsel ohne Layout-Sprung (feste Bildverhältnisse). Shared-Element-Morph nur, wenn Kachel und Hero dasselbe Motiv zeigen.",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "stimmung_tags": [
    "warm",
    "verspielt"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     20,
     24,
     32,
     48,
     72,
     112
    ],
    "sektion": "clamp(56px, 7vw, 104px)",
    "dichte": "mittel",
    "hinweis": "Shop-Rhythmus: Produktkacheln dicht (8 bis 16 px Spalt), Kaufbox mit 16 px zwischen Variante, Preis und Knopf. Inszenierung kommt nach Kategorien und Bestsellern."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 3vw, 40px)",
    "spalt": "clamp(8px, 1.2vw, 16px)",
    "max_breite": "1440px",
    "hinweis": "Startseite: Bento oder 2 bis 4 große Kacheln, darunter Bestseller in 4 Spalten (2 mobil). Produktseite 7/5: Galerie links, Kaufbox rechts sticky."
   },
   "form": {
    "radius_klein": "8px",
    "radius_gross": "12px",
    "pille": true,
    "linie": "1px #212121 mit 10 % Deckkraft",
    "schatten": "keiner auf Kacheln; der Warenkorb-Drawer dunkelt den Grund ab",
    "hinweis": "Kacheln 12 px auf #ECE9E2, Knöpfe als Pille, Swatches rund. grain-noise-overlay nur am Button (Variante button)."
   },
   "bildsprache": {
    "licht": "Helles, gleichmäßiges Studiolicht auf #ECE9E2; Themenwelten in Tageslicht.",
    "ausschnitt": "Produkt mittig mit gleichem Rand; das zweite Bild zeigt den Gebrauch.",
    "personen": "Im zweiten Bild und in Themenwelten; nie im Produktraster.",
    "formate": [
     "1:1",
     "4:5",
     "3:2"
    ],
    "nicht": "Keine wechselnden Hintergründe im Raster, keine Freisteller mit künstlichem Schlagschatten, keine Stock-Lifestyle-Bilder."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz und freundlich, konkret zu Material, Menge, Preis und Lieferzeit.",
    "haltung": "Sympathisch und direkt; Vertrauen über Fakten (Versand, Rückgabe, Bewertungen mit Quelle).",
    "beispiele": [
     "Leicht, weich, waschbar. Ab 89 €.",
     "Bis 14 Uhr bestellt, am selben Tag verschickt."
    ],
    "nicht": "„nachhaltig“ ohne Nachweis, „Bestseller“ ohne Grundlage, Fake-Countdown, „Nur noch 2 Stück!“ ohne echte Zahl."
   },
   "hero_aufbau": {
    "raster": "Claim über 8 Spalten oben, darunter Bento: eine große Kachel über 6 Spalten und 2 Reihen, 2 bis 3 kleinere daneben (bento-grid-interaktiv).",
    "bild": "Echte Produkt- und Kategoriefotos, 4:5 und 1:1; kein Slider, kein Video.",
    "h1": "clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, oben links.",
    "handlung": "„Bestseller ansehen“ (#212121 gefüllt); die Kategorie-Kacheln sind selbst die Wege, kein zweiter Knopf.",
    "zusatz": "Schmale Ankündigungsleiste oben (Gratisversand ab …), Vertrauenszeile Versand / Rückgabe / Bewertungen unter dem Bento."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/d2c-produkt-zuerst/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/d2c-produkt-zuerst/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/d2c-produkt-zuerst/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/d2c-produkt-zuerst/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "verlangsamt Scrollen durch Produktlisten und kostet auf Mobilgeräten Leistung"
    },
    {
     "ids": [
      "horizontal-scroll-section",
      "pinned-scrub-scrollytelling"
     ],
     "grund": "versteckt Produkte hinter Scroll-Inszenierung"
    },
    {
     "ids": [
      "fullpage-snap-slides"
     ],
     "grund": "Kunden wollen frei durch Listen scrollen"
    },
    {
     "ids": [],
     "grund": "jeder Preloader – jede Sekunde vor dem ersten Produkt kostet Umsatz"
    },
    {
     "ids": [
      "cursor-follower-lerp",
      "kontextueller-cursor"
     ],
     "grund": "Agentur-Geste, im Shop ohne Nutzen"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "interaktives-3d-hero"
     ],
     "grund": "schwer, und Produktfotos sollen unverfälscht aussehen (3D nur als echter Produkt-Konfigurator)"
    }
   ],
   "alle_muster": [
    {
     "id": "in-den-warenkorb-flug",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/meta.json"
    },
    {
     "id": "like-herz-burst",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/meta.json"
    },
    {
     "id": "bento-grid-interaktiv",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Bestseller / Neuheiten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
    },
    {
     "id": "bild-hotspots",
     "rolle": "Sektion: Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json",
     "variante": "shop",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Kategorie mit Filter",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "typo",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=typo"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Produktdetailseite",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "seite",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Produktdetailseite",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Produktdetailseite",
     "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": "warenkorb-drawer",
     "rolle": "Sektion: Produktdetailseite",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
     "variante": "drawer",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer"
    },
    {
     "id": "eu-gewaehrleistungshinweis",
     "rolle": "Sektion: Produktdetailseite",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
    },
    {
     "id": "produktfinder-quiz",
     "rolle": "Sektion: Produktvergleich / Finder",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json",
     "variante": "schritte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Produktvergleich / Finder",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "bewertungen-verteilung",
     "rolle": "Sektion: Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
     "variante": "band",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Community / Rezepte / Journal",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Community / Rezepte / Journal",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "magazin",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)",
     "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": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "vt-shared-element-morph",
     "rolle": "Seitenwechsel",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/meta.json"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "gestapelte-drawer-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/meta.json"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/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": "hover-absicht-timing",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
    },
    {
     "id": "toast-stapel",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
    },
    {
     "id": "skeleton-shimmer",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "button-gruppe-expressiv",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/meta.json",
     "variante": "split",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split"
    },
    {
     "id": "grain-noise-overlay",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/meta.json",
     "variante": "button",
     "demo_url": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo?v=button"
    },
    {
     "id": "token-toggle-asymmetrisch",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
    },
    {
     "id": "serif-grotesk-duotone",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "verein-nonprofit-wirkung",
   "name": "Verein & Non-Profit: Wirkung zeigen",
   "branche": "Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative",
   "stimmung": [
    "engagiert",
    "glaubwürdig",
    "nahbar",
    "kraftvoll"
   ],
   "kurz": "Ein Satz Mission in einer kräftigen, schmalen Display-Schrift, echte Fotos aus den Projekten und große Wirkungszahlen – alle drei Referenzen arbeiten so. Ein tiefer Markenton trägt die Seite, ein Signal (Gelb) gehört nur dem Spenden-Button. Viele Wege zum Mitmachen statt nur 'Spenden'; Transparenz, wohin das Geld geht.",
   "referenzen": [
    {
     "seite": "charity: water",
     "url": "https://www.charitywater.org/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Vite. @font-face 'Gabriel Sans' (12 Schnitte, Thin bis Black) für Headlines, 'Proxima Nova' für Text, 'Kazimir Text' (Serif), 'Founders Grotesk', 'Anonymous Pro'. Kurven cubic-bezier(.5,.01,.51,1) (6×, symmetrisch) und (.37,.01,0,.98) (4×); Dauern .15s (42×), .2s, 1.5s, 1s. Spenden-Button .button--cw-yellow: Höhe 48px, Hintergrund #ffca0a, transition background-color .15s linear. Farben warmes Grau #DFDFD7 / #C1C1BA / #9B9B94, Tinte #222520, Blau #003366, Gelb #FFCA0A. Sektionen: H1 'Bring clean and safe water to every person on the planet', 'Other Ways to Give', 'Because clean water changes everything', 'Know that your donation is making a difference', drei große Zahlen als eigene h1 (209,241 / 29 / 21,641,908), 'Ready to take action?'.",
     "herkunft": "beobachtet",
     "quelle": "https://www.charitywater.org/vite/assets/builder-styles-Brb_ClVc.css"
    },
    {
     "seite": "The Ocean Cleanup",
     "url": "https://theoceancleanup.com/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): WordPress-Theme 'toc'. @font-face 'Proxima Nova' und 'Roboto Mono'. Kurve easeInOutCubic cubic-bezier(.645,.045,.355,1) (24×), Überschwinger (.68,-.55,.265,1.55) und (.34,1.56,.64,1) je 4× als Akzent; Dauern .2s (83×), .1s (32×), .3s, 1s (27×). Farben Navy #003755 (335×) / #01283C, Cyan #01CBE1 (219×), Hellgrau #F2F5F6 / #EAEAEA, Blaugrau #B3C3CB, Rot #D0001B. Sektionen: H1 'Join the largest cleanup in history', Kennzahlen als h3 (65M+ / 2-5% / 100+), 'We develop and scale solutions…', 'A planet-sized problem', Ziel '90% … by 2040', '30 cities program', 'Addressing ocean gyres', Newsletter 'Stay in the loop', 'Other ways to help'.",
     "herkunft": "beobachtet",
     "quelle": "https://theoceancleanup.com/app/themes/toc/assets/build/styles/base-6ecaa69b6f.css"
    },
    {
     "seite": "Viva con Agua de Sankt Pauli e.V.",
     "url": "https://www.vivaconagua.org/",
     "art": "website",
     "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Framer-Seite. Fonts per @font-face im HTML: 'Veneer Regular' (92 font-family-Verwendungen; kräftige Holzletter-Display-Schrift für Headlines), 'Inter' (66), 'Museo Sans' 500/700/900, 'Source Sans 3', 'Fragment Mono', 'Finlek'. Häufigste Größen 16 / 32 / 40 / 24 / 45px. Farben Navy #002E6D (104×) / #003D6B, Blau #008FC3 / #00A3CC, helle Blauflächen #DBEBF5 / #B8D8EA / #EDF5FA. Sektionen: H1 'All in for Water.', Kampagnen-Teaser ('ALL4WASH Viva con Agua in Uganda'), Zahlen als h1 (696 Mio. / 2006 / 6 Länder / 400+), Aktuelle Kampagnen, Unsere Vision, 'SPENDE JETZT FÜR SAUBERES TRINKWASSER' (Versal), Verschenke Wirkung, Spendenaktion starten, Werde selbst aktiv, Crews in deiner Stadt.",
     "herkunft": "beobachtet",
     "quelle": "https://www.vivaconagua.org/"
    }
   ],
   "schrift": {
    "paarung_basis": "plakat-condensed",
    "abweichung": "",
    "headline": "big-shoulders",
    "text": "archivo",
    "akzent": "",
    "groessen": "Kräftige, schmale Display-Headline wie Veneer/Gabriel Sans, ruhiger Text. h1 clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders wght 800, Versal, Laufweite +0.005em, Zeilenhöhe 0.95; Wirkungszahlen clamp(3rem, 2rem + 4vw, 5.5rem) wght 800 mit Tabellenziffern; h2 clamp(1.75rem, 1.2rem + 2vw, 3rem) wght 700; Fließtext Archivo 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Buttons Archivo 600, 1rem. Bei Klima-/Umweltvereinen ist climate-crisis als Akzent für genau eine Jahreszahl oder ein Wort möglich.",
    "techniken": [
     "versal-kondensiert-fit-to-width",
     "tabellenziffern",
     "lesesatz-text-wrap"
    ],
    "alternative_eigenprojekt": "Headline tanker (ITF, schwere Display-Schrift nah an Veneer), Text satoshi – nicht für Templates."
   },
   "farbe": {
    "prinzip": "Ein tiefer Markenton (Navy/Petrol – Wasser, Natur) für Headlines, Header und dunkle Sektionen, helle Töne derselben Farbe als Flächen, warmes Grau für Ruhe. Ein Signalton ausschließlich für 'Spenden' – mit dunkler Schrift für ausreichenden Kontrast (Weiß auf Gelb wie bei charity: water ist zu schwach).",
    "beispiel": [
     "#FFFFFF Grund",
     "#EDF5FA helle Fläche (Viva con Agua)",
     "#002E6D Marke, Headlines, dunkle Sektion (Viva con Agua; Ocean Cleanup #003755)",
     "#222520 Fließtext (charity: water)",
     "#DFDFD7 warme Grau-Fläche (charity: water)",
     "#FFCA0A Spenden-Button, Text #222520 (charity: water)"
    ]
   },
   "animationsstil": "token-kinetisch-inout",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "bewegung": {
    "easing": "cubic-bezier(0.83, 0, 0.17, 1) (token-kinetisch-inout, nur große Zustandswechsel); Buttons und Spendenformular über animationsstil_ui",
    "beobachtet": "easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1) 24×, .2s 83× / 1s 27× (Ocean Cleanup); .15s 42× und cubic-bezier(.5,.01,.51,1) (charity: water)",
    "dauer_ms": "150–200 (Buttons, Links, Formular), 600–1000 (Kampagnen-Slider, Bild-Übergänge, Medien-Expansion), Zahlen-Odometer 1200–1500 einmalig",
    "regel": "Symmetrische InOut-Kurve des Stils nur für große Zustandswechsel: Kampagnen-Slides, Foto-Übergänge, Wirkungszahlen. Alles Interaktive (Buttons, Menü, Spendenformular) läuft über animationsstil_ui token-toggle-asymmetrisch in 150–200 ms. Überschwinger höchstens beim Dank nach der Spende. Zahlen zählen nur einmal und nur, wenn sie im Bild sind; unter prefers-reduced-motion sofort Endwert.",
    "herkunft": "beobachtet (Ocean Cleanup easeInOutCubic 24×, .2s 83× / 1s 27×; charity: water .15s 42× + cubic-bezier(.5,.01,.51,1))"
   },
   "hero_beschreibung": "Mission in einem Satz (Big Shoulders, Versal) + echtes Projektfoto + Spenden-Button. Typo-Maske nur für ein kurzes, fettes Schlüsselwort (z. B. „WASSER“) über echtem Projektmaterial, einmalig, kein Dauereffekt. Template-Standard ohne Effekt: schlichter Foto-Hero mit Mission.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "sticky-shrink-header",
     "native-popover-dropdowns"
    ],
    "hero": [
     "typo-maske-medien"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
      "muster": [
       "zahlen-fakten-section",
       "zahlen-odometer"
      ],
      "varianten": {
       "zahlen-fakten-section": "diagramm"
      }
     },
     {
      "zweck": "Aktuelle Projekte / Kampagnen",
      "muster": [
       "css-native-karussell",
       "editorial-magazin-layout"
      ],
      "varianten": {
       "css-native-karussell": "peek",
       "editorial-magazin-layout": "zeitung"
      }
     },
     {
      "zweck": "Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
      "muster": [
       "spendenmodul-wirkung",
       "formular-fehlerzusammenfassung"
      ],
      "varianten": {
       "spendenmodul-wirkung": "formular",
       "formular-fehlerzusammenfassung": "liste"
      }
     },
     {
      "zweck": "So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht)",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "diagramm"
      }
     },
     {
      "zweck": "Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)",
      "muster": [
       "bento-grid-interaktiv"
      ]
     },
     {
      "zweck": "Geschichten aus den Projekten",
      "muster": [
       "editorial-magazin-layout",
       "testimonials-neu-gedacht"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin",
       "testimonials-neu-gedacht": "wand"
      }
     },
     {
      "zweck": "Termine & Aktionen vor Ort",
      "muster": [
       "programm-kalender"
      ],
      "varianten": {
       "programm-kalender": "programm"
      }
     },
     {
      "zweck": "Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
      "muster": [
       "kontakt-anfrage-formular",
       "karte-zwei-klick"
      ],
      "varianten": {
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Partner / Förderer",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "raster"
      }
     },
     {
      "zweck": "Jahresbericht / FAQ / Spendenquittung",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     }
    ],
    "scroll": [
     "medien-expansion-scroll"
    ],
    "schrift_animation": [
     "zahlen-odometer",
     "highlight-marker-underline"
    ],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "fortschrittsring",
     "konfetti-erfolg"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "masonry-grid-lanes-galerie"
    ],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit",
     "mega-footer-sitemap"
    ],
    "button": [
     "button-zustaende",
     "fuellung-vom-eintrittspunkt"
    ]
   },
   "signatur": [
    "typo-maske-medien"
   ],
   "optional": [
    "daten-scrollytelling",
    "css-diagramm-attr"
   ],
   "varianten_demo": {
    "daten-scrollytelling": "mittel",
    "fuellung-vom-eintrittspunkt": "basis",
    "bild-zoom-in-maske": "basis",
    "css-native-karussell": "peek",
    "footer-newsletter-mit-persoenlichkeit": "basis"
   },
   "nicht_verwenden": [
    "mesh-gradient-shader / holo-irisierende-folie – Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld",
    "interaktives-3d-hero / partikel-punktwolke – teuer, langsam auf älteren Handys, kein Bezug zur Wirkung",
    "fullpage-snap-slides / pinned-scrub-scrollytelling als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können",
    "jeder Preloader – Spendenwillige brechen ab",
    "mehrschicht-parallax – wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation",
    "Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten"
   ],
   "regeln": [
    "Hero = Mission in einem Satz (Versal, Display-Schrift) + echtes Projektfoto/-video + Spenden-Button; wenn Video, dann eigenes Material, stumm, mit Pause-Knopf.",
    "Spenden-Button in Signalfarbe im Header immer sichtbar; Signalfarbe sonst nirgends.",
    "Wirkungszahlen nur mit Quelle/Stand (z. B. 'Stand: Jahresbericht 2025'); höchstens 3–4 Zahlen in einer Reihe.",
    "Spendenformular: einmalig/monatlich als Segment-Umschalter (wie in spendenmodul-wirkung), 3 Betragsvorschläge mit konkreter Wirkung ('30 € = …'), freies Feld; Spendenziel als ehrlicher Fortschrittsbalken.",
    "Mehrere Wege zum Mitmachen gleichwertig zeigen (Spendenaktion starten, Ehrenamt, Gruppe vor Ort, Fördermitglied) wie Viva con Agua und charity: water.",
    "Transparenz: Mittelverwendung, Jahresbericht, Gemeinnützigkeit/Spendensiegel, Ansprechperson mit Foto.",
    "Konfetti höchstens einmal als Dank nach abgeschlossener Spende, sonst nie.",
    "Footer mit Newsletter, Bankverbindung für Überweisung, Vereinsregister, Impressum, Satzung.",
    "daten-scrollytelling nur als Zusatz (optional, Priorität F) auf der Unterseite Transparenz bzw. Jahresbericht (Variante mittel), nie auf der Startseite vor dem Spendenknopf (wann_nicht des Musters); auf der Startseite zahlen-fakten-section Variante diagramm.",
    "mega-footer-sitemap nur bei mehreren Seiten; kleine Vereine und Onepager bekommen einen einfachen Footer.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Vereinsregister (Registergericht, Nummer) und vertretungsberechtigtem Vorstand; Gemeinnützigkeit und Zuwendungsbestätigung nur mit gültigem Freistellungsbescheid; Fotos von Mitgliedern und besonders von Kindern und Jugendlichen nur mit Einwilligung (bei Minderjährigen der Eltern), widerrufbar; Mitgliedsantrag mit Satzung, Beitragsordnung, SEPA-Mandat und Einwilligungen; Spendensiegel nur echt; Förderer-Logos nur mit Erlaubnis; keine pauschalen Umweltaussagen ohne Nachweis – vom Kunden prüfen lassen."
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Vereine haben oft schwaches Hosting und mobile Zielgruppen: Hero-Video max. ~2 MB mit Poster und preload=none auf Mobil (oder nur Foto), Medien-Expansion per CSS Scroll-Driven Animations mit statischem Fallback. Spenden-Widgets externer Anbieter erst bei Interaktion laden. Display-Font als Subset (nur Versalien + Ziffern).",
   "offen": [
    "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
   ],
   "varianten": [
    {
     "name": "Sportverein (Mitgliedschaft statt Spende)",
     "sektionen": [
      "Hero: Foto aus dem Training oder Spiel, ein Satz zum Verein, „Probetraining“ und „Mitglied werden“ (kein Spenden-Button)",
      "Abteilungen / Sportarten mit Ansprechperson",
      "Trainingszeiten als Wochenplan (wochen-kursplan)",
      "Spielplan, Ergebnisse und Termine (programm-kalender)",
      "Beiträge (vergleichstabelle-sticky)",
      "Mitglied werden (mehrschritt-anfrage Variante leiste, formular-fehlerzusammenfassung Variante liste; Satzung, Beitragsordnung, SEPA-Mandat)",
      "Ansprechpersonen / Vorstand (team-ueber-mich-layout)",
      "Sponsoren (logo-wand-social-proof Variante raster)",
      "Sportstätten / Anfahrt (karte-zwei-klick)"
     ],
     "weglassen": [
      "Spenden als Hauptziel (höchstens Link zum Förderverein)",
      "So wirkt deine Spende",
      "konfetti-erfolg"
     ],
     "muster_zusatz": [
      "wochen-kursplan",
      "vergleichstabelle-sticky",
      "mehrschritt-anfrage",
      "team-ueber-mich-layout"
     ],
     "hinweis": "Signalfarbe für „Mitglied werden“ statt für Spenden; Schrift, Farbe, Stil und Signatur bleiben. Kündigung der Mitgliedschaft online nur, wenn sie online abgeschlossen wird: dann widerruf-und-kuendigung-schaltflaeche – vom Kunden prüfen lassen. Für Vereine mit festem Kursbetrieb passt auch fitness-studio-rhythmus, Variante „Sportverein mit Kursbetrieb“."
    }
   ],
   "stimmung_tags": [
    "laut",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     144
    ],
    "sektion": "clamp(64px, 9vw, 136px)",
    "dichte": "mittel",
    "hinweis": "Kräftig und klar: Wirkungszahlen mit viel Luft (höchstens 3 bis 4 in einer Reihe), Wege zum Mitmachen gleich groß mit 24 px Abstand."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "1320px",
    "hinweis": "Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6."
   },
   "form": {
    "radius_klein": "4px",
    "radius_gross": "4px",
    "pille": false,
    "linie": "1px #DFDFD7",
    "schatten": "keiner",
    "hinweis": "Leicht gerundet und robust (button-zustaende und typo-maske-medien zeigen 4 px). Gelb #FFCA0A nur als Spenden-Fläche mit dunkler Schrift."
   },
   "bildsprache": {
    "licht": "Dokumentarisch, natürliches Licht vor Ort.",
    "ausschnitt": "Menschen bei der Arbeit im Projekt, Nahaufnahme mit Umgebung; Bildunterschrift mit Ort und Jahr.",
    "personen": "Ja, mit Einwilligung und in würdiger Lage; Namen in der Bildunterschrift.",
    "formate": [
     "3:2",
     "4:5",
     "16:9"
    ],
    "nicht": "Keine Mitleidsbilder, keine weinenden Kinder als Spendenhebel, keine Stockfotos, keine Hände um einen Globus."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz und aktiv, Wirkung mit Zahl und Quelle.",
    "haltung": "Glaubwürdig und nahbar: Wirkung statt Mitleid, viele Wege zum Mitmachen. Stiftungen mit älterer Zielgruppe siezen, dann durchgehend.",
    "beispiele": [
     "30 € = [Wirkung laut Jahresbericht].",
     "Mach mit: Starte deine eigene Spendenaktion."
    ],
    "nicht": "„Gemeinsam können wir die Welt verändern“, Schuldgefühle, Zahlen ohne Quelle, „klimaneutral“ ohne Nachweis."
   },
   "hero_aufbau": {
    "raster": "Foto randlos über die volle Breite, Mission unten links über Spalte 1 bis 8.",
    "bild": "Echtes Projektfoto, 16:9 Desktop, 4:5 mobil; Typo-Maske (typo-maske-medien) nur für ein kurzes Schlüsselwort, einmalig.",
    "h1": "clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 Versal, unten links.",
    "handlung": "„Jetzt spenden“ (#FFCA0A, Text #222520) und „Mitmachen“ (Kontur), nebeneinander unter der Mission.",
    "zusatz": "Spenden-Knopf zusätzlich im Kopf; Wirkungszahlen mit „Stand: …“ als eigene Leiste direkt darunter."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "mesh-gradient-shader",
      "holo-irisierende-folie"
     ],
     "grund": "Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld"
    },
    {
     "ids": [
      "interaktives-3d-hero",
      "partikel-punktwolke"
     ],
     "grund": "teuer, langsam auf älteren Handys, kein Bezug zur Wirkung"
    },
    {
     "ids": [
      "fullpage-snap-slides",
      "pinned-scrub-scrollytelling"
     ],
     "grund": "als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können"
    },
    {
     "ids": [],
     "grund": "jeder Preloader – Spendenwillige brechen ab"
    },
    {
     "ids": [
      "mehrschicht-parallax"
     ],
     "grund": "wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation"
    },
    {
     "ids": [
      "cursor-follower-lerp",
      "blend-difference-cursor"
     ],
     "grund": "Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten"
    }
   ],
   "alle_muster": [
    {
     "id": "typo-maske-medien",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/meta.json"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "diagramm",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm"
    },
    {
     "id": "zahlen-odometer",
     "rolle": "Sektion: Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
       "variante": "zeitung",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
      },
      {
       "rolle": "Sektion: Geschichten aus den Projekten",
       "variante": "magazin",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
      }
     ]
    },
    {
     "id": "spendenmodul-wirkung",
     "rolle": "Sektion: Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/meta.json",
     "variante": "formular",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo?v=formular"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "bento-grid-interaktiv",
     "rolle": "Sektion: Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Geschichten aus den Projekten",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "wand",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand"
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Termine & Aktionen vor Ort",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
     "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": "logo-wand-social-proof",
     "rolle": "Sektion: Partner / Förderer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Jahresbericht / FAQ / Spendenquittung",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "faq",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "medien-expansion-scroll",
     "rolle": "Scroll",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/meta.json"
    },
    {
     "id": "highlight-marker-underline",
     "rolle": "Schrift",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/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": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "fortschrittsring",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json"
    },
    {
     "id": "konfetti-erfolg",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/meta.json"
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
    },
    {
     "id": "token-kinetisch-inout",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/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": "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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "daten-scrollytelling",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/meta.json",
     "variante": "mittel",
     "demo_url": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo?v=mittel"
    },
    {
     "id": "css-diagramm-attr",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/meta.json"
    }
   ]
  },
  {
   "id": "friseur-salon-handschrift",
   "name": "Salon: Handschrift und Termin",
   "branche": "Friseur / Barbershop / Kosmetikstudio / Nagelstudio",
   "stimmung": [
    "stilbewusst",
    "persönlich",
    "warm",
    "selbstbewusst"
   ],
   "kurz": "Ein Salon verkauft Termine bei bestimmten Menschen. Deshalb steht die Handschrift der Stylist:innen im Mittelpunkt: ihre Looks zum Durchwischen, ihr Name als Unterschrift, ihre Preisstufe offen in einer echten HTML-Preisliste. Puder statt Weiß, Espresso statt Schwarz, ein Lackrot nur für „Termin buchen“, dazu eine breitenvariable Kontrast-Antiqua mit Haltung. Alle Bewegung läuft auf einer einzigen Hauskurve: zögernder Anlauf, langer weicher Auslauf, wie ein Kammstrich.",
   "referenzen": [
    {
     "seite": "Hair by SPECHT (Friseur, Ronneburg bei Hanau)",
     "url": "https://www.hairbyspecht.de/damen/friseur-preise-damen/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.hairbyspecht.de/damen/friseur-preise-damen/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Deutscher KMU-Salon mit Preisliste als HTML-Tabelle statt PDF. Haarschnitte nach fünf Stufen (Master Stylist, Premium Stylist, Expert Stylist, Stylist, Junior Team) und nach Dauer-Paketen von 15 bis 75 Minuten, z. B. „Klassik Cut’nFinish - 30 Min.“ 53,- | 50,- | 47,- | 39,- | 28,-. Farbe als ab-Preise („Balayage, Ombré usw.“ ab 78,-), Längenzuschläge ab Schulterlänge. 15-Minuten-Beratung kostenlos, wenn direkt eine Behandlung folgt; Reservierungsgebühr für Neukunden (2-Stunden-Termin 90,-), wird am Termin verrechnet. Wege zum Termin: „Terminbuchung“ und „Chat on WhatsApp“."
    },
    {
     "seite": "Josh Wood Atelier (Colour-Salon, London)",
     "url": "https://joshwoodcolour.com/pages/hair-salon-price-list",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://joshwoodcolour.com/pages/hair-salon-price-list und https://joshwoodcolour.com/pages/meet-the-experts/jamie-gould",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Preisliste in fünf Stufen („Varderer“, „Advocate“, „Principal“, „Master“, „Creative Master“) mit ab-Preisen („From £230“). Farbwechsel und Virgin Bleach nur „By consultation only“, Extensions mit Beratung 48 Stunden vorher zum Farbabgleich; „Book A Free Video Consultation“ als zweiter Weg neben „Book appointment“. Je Person eine eigene Seite, z. B. Jamie Gould („Creative Master Colourist“) mit Spezialgebieten (Balayage, Highlights, Full Head Colour, Colour Correction) und dem Knopf „Book Jamie“. Nicht übernehmen: Das Kundenzitat dort ist als Platzhalter „[Client Quote]“ markiert."
    },
    {
     "seite": "Fellow Barber (Barbershop, New York / Los Angeles / San Francisco)",
     "url": "https://www.fellowbarber.com/pages/services",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.fellowbarber.com/pages/services",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Leistungen mit ehrlicher Dauer-Spanne statt Einheitszeit („Haircut – (30 min – 45 min)“, „Straight Razor Shave – (30 - 45 min)“). Die günstige „Classic Cut“ schneidet ein Junior Barber, ohne Skin Fades; für diese Schnitte steht dort „book with a Fellow or Senior Barber“. Die Stufe erklärt also den Unterschied, statt nur Preise zu nennen. Buchung je Stadt über Boulevard."
    },
    {
     "seite": "Pall Mall Barbers (Barbershop, London)",
     "url": "https://www.pallmallbarbers.com/services/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.pallmallbarbers.com/services/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): „Barber Price List“ als Tabelle mit Rubriken (Styling Services, Shaving, Beard Styling, Wellbeing, Combinations & Packages) und je Zeile Leistung, Dauer, Preis: „Quality Haircut | 30 mins | £37.97“, „Consultation | 15 mins | £15.00“. Ein Geschenk-Paket steht direkt in der Preisliste („The Gift Package for Any Occasion | 90 mins | £100.00“), „Gifts Vouchers“ im Footer."
    },
    {
     "seite": "Heyday (Gesichtsbehandlungen, USA)",
     "url": "https://www.heydayskincare.com/pages/the-essential-facial",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.heydayskincare.com/pages/the-essential-facial",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Eine Behandlung, eine Seite: Dauer und Inhalt im ersten Satz („Each 50-minute treatment starts with a skin analysis …“), Ablauf in vier Schritten (In-depth skin analysis, Custom facial treatment, Personal skincare plan, Guidance for in between facials), Preis offen nach Mitgliedschaft (Monthly $125, Bimonthly $130, Non-member $155, „Prices may vary by studio.“), Zusatzleistungen als Preisgruppen. Die Haupthandlung „BOOK A FACIAL“ wiederholt sich, sonst gibt es kaum Knöpfe."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Keine Katalog-Paarung. Kalnia (Didone-artig, wdth 100–125, wght 100–700) trägt beide Salon-Charaktere in einer Datei: schmal und leicht für Damen-, Kosmetik- und Nagelstudio, breit und fett für den Barbershop. Familjen Grotesk ist kompakt genug für lange Preiszeilen. Mrs Saint Delafield nur als Unterschrift unter dem Porträt. Damit unterscheidet sich friseur von mode (Zalando Sans), luxus (Bodoni Moda) und praxis (Hedvig Letters Serif).",
    "headline": "kalnia",
    "text": "familjen-grotesk",
    "akzent": "mrs-saint-delafield",
    "groessen": "Salonname und h1 Kalnia clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), wdth 112, wght 500, Laufweite -0.02em, Zeilenhöhe 0.95 (Barbershop: wdth 125, wght 700, Versal, Laufweite +0.01em); h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wdth 100, wght 500. Fließtext Familjen Grotesk 1.0625rem/1.55, wght 400, max. 62ch; Preiszeilen 1rem wght 500, Preise rechtsbündig in Tabellenziffern; Rubriken und Stufen 0.8125rem Versal, +0.06em in Familjen (keine Mono). Mrs Saint Delafield nur für den Namen unter dem Porträt, 2.25–3rem, um -4° gedreht, höchstens einmal pro Ansicht; der Name steht darunter noch einmal in Familjen, damit ihn jeder lesen kann.",
    "techniken": [
     "headline-laufweite-zeilenabstand",
     "fluide-typo-clamp-cqi",
     "tabellenziffern",
     "lesesatz-text-wrap"
    ],
    "alternative_eigenprojekt": "Headline melodrama oder gambarino, Text general-sans (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Puder statt Reinweiß, Espresso statt Schwarz und ein Lackrot, das nur „Termin buchen“ und aktive Zustände trägt. Große Flächen aus Puder und Espresso (Preisliste, Gutschein, Fußzeile). Die Farbe kommt aus den Fotos der Arbeiten, deshalb bleiben die UI-Flächen neutral warm und färben keine Haarfarbe um. Barbershop: Espresso als Grund, Puder als Schrift.",
    "beispiel": [
     "#F4E9E4 Grund (Puder)",
     "#1E1412 Text, dunkle Sektionen, Barbershop-Grund (15 : 1 auf Puder)",
     "#9B1D2E Signal Lackrot: Termin buchen, aktiver Reiter (6,8 : 1 auf Puder; Weiß darauf 8 : 1; auf Espresso nur mit 2 px Puder-Rand)",
     "#E9DBD4 Kartenfläche, Preisliste",
     "#6E5A55 Meta: Dauer, Stufe, Bildunterschrift (5,4 : 1 auf Puder)",
     "#D9C8C0 Linien"
    ]
   },
   "animationsstil": "token-studio-signatur",
   "animationsstil_hinweis": "Studio-Signatur als Hauskurve des Salons: eine Kurve für Buttons, Menü, Akkordeon und Kartenstapel, so wie Osmo sie konsequent für alle UI-Übergänge nutzt (Messwert im Stil). Laut wann_nicht nicht für lange Scroll-Einblendungen (entfallen hier, nur der Hero blendet einmal ein) und nicht für Drag-Feedback (beim Ziehen folgen die Karten dem Finger 1:1, erst beim Loslassen greift die Kurve). Der Stil taugt für UI, deshalb kein animationsstil_ui; Interaktives bleibt unter 500 ms.",
   "bewegung": {
    "easing": "cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur, eine Kurve für alles)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "250 (Farbe, Schatten, Hover), 400 (Menü, Drawer, Akkordeon, Unterstreichung, Reiter der Preisliste), 475 (Buttons: Fläche fährt von unten ein), 725 (nur Wurf und Rückkehr der Look-Karten, Hero-Bild einmalig); Schließen 65 % der Öffnungsdauer mit derselben Kurve (Menü 260)",
    "regel": "Eine Kurve, eine Skala, wie im Stil gemessen. Zögernder Anlauf, langer weicher Auslauf: Das wirkt wie ein Kammstrich und gibt dem Salon eine eigene Geste, ohne Federn und ohne Überschwingen. Text, Preise und Formulare stehen sofort. Keine Einblendungen beim Scrollen. Beim Ziehen keine Kurve, nur der Finger. Bei prefers-reduced-motion bleiben Farb- und Opazitätswechsel, Wege und Würfe entfallen.",
    "herkunft": "Kurve und Dauer-Skala aus token-studio-signatur (bau.werte css_token; Osmo, Lando Norris, Studio Dumbar beobachtet). Die Referenzen dieses Rezepts sind nur inhaltlich geprüft, ihre CSS-Kurven nicht gemessen."
   },
   "hero_beschreibung": "Foto einer echten Arbeit aus dem Salon (Person mit Einwilligung, Salonlicht) in voller Breite oder als großes Hochformat neben dem Salonnamen in Kalnia. Darunter ein Satz zu Spezialgebiet und Ort, zwei Knöpfe „Termin buchen“ (Lackrot) und „Preise ansehen“, Telefon und WhatsApp als Links. Direkt unter dem Hero das Bewertungsband. Keine Stock-Models, keine KI-Frisuren, kein Video im Hero; eigenes Salonvideo höchstens weiter unten als Klick-Video.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation",
     "native-popover-dropdowns"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "band"
      }
     },
     {
      "zweck": "Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)",
      "muster": [
       "speisekarte-editorial",
       "tabs-pfeiltasten-focusgroup",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "tabs-pfeiltasten-focusgroup": "auto",
       "speisekarte-editorial": "preisliste",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)",
      "muster": [
       "team-ueber-mich-layout",
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement",
       "termin-buchung-zwei-klick": "vorauswahl"
      }
     },
     {
      "zweck": "Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern",
      "muster": [
       "flick-karten-stapel",
       "masonry-grid-lanes-galerie",
       "galerie-shared-element-vollbild"
      ],
      "varianten": {
       "galerie-shared-element-vollbild": "basis"
      }
     },
     {
      "zweck": "Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter)",
      "muster": [
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter"
      }
     },
     {
      "zweck": "Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)",
      "muster": [
       "gutschein-konfigurator",
       "widerruf-und-kuendigung-schaltflaeche"
      ],
      "varianten": {
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     },
     {
      "zweck": "Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen)",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "produktreihe"
      }
     },
     {
      "zweck": "Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung)",
      "muster": [
       "stellen-karriere"
      ],
      "varianten": {
       "stellen-karriere": "wenige"
      }
     },
     {
      "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "kompakt",
       "firmendaten-strukturiert": "friseur",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "clip-path-form-hover"
    ],
    "cursor": [],
    "mikro": [
     "druck-feedback",
     "kopieren-feedback",
     "checkbox-radio-animiert"
    ],
    "material": [],
    "galerie": [
     "flick-karten-stapel",
     "masonry-grid-lanes-galerie",
     "galerie-shared-element-vollbild",
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "fuellung-vom-eintrittspunkt",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "flick-karten-stapel"
   ],
   "varianten_demo": {
    "studio-visitenkarte-footer": "praxis",
    "fuellung-vom-eintrittspunkt": "basis",
    "mobile-bottom-navigation": "fab",
    "galerie-shared-element-vollbild": "basis",
    "css-native-karussell": "produktreihe",
    "pfeil-icon-button": "tausch",
    "clip-path-form-hover": "basis"
   },
   "nicht_verwenden": [
    "graustufen-zu-farbe – Haarfarbe ist das Ergebnis, das verkauft wird; Touch-Besucher (die meisten, oft vom Instagram-Link) sähen die Farbe nie",
    "webgl-bildverzerrung / svg-filter-verzerrung / halbton-raster – verfälschen Farbe und Schnitt auf den Arbeitsproben",
    "vorher-nachher-vergleichsregler – Signatur von handwerk; bei Kosmetik mit Behandlungen zudem heilmittelwerberechtlich heikel",
    "marquee-laufband / rotating-words – „Schnitt · Farbe · Pflege“ als Band oder Wortwechsel ist Salon-Template-Klischee und automatische Bewegung",
    "prozent-zaehler / einmal-intro-session – Kundinnen kommen vom Instagram-Link und wollen sofort buchen",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – Agentur-Gesten, stören beim Wischen durch die Looks",
    "mesh-gradient-shader / holo-irisierende-folie – Effekt statt Handschrift",
    "Preisliste als PDF oder Bild – nicht lesbar am Telefon, nicht durchsuchbar, nicht barrierefrei",
    "Stockfotos und KI-generierte Frisuren – Arbeitsproben müssen echt sein und aus dem Salon stammen"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto einer Arbeit aus dem Salon, Salonname groß, ein Satz zu Spezialgebiet und Ort, „Termin buchen“ und „Preise ansehen“; das Bewertungsband steht direkt darunter.",
    "Preise als HTML-Liste, nie als PDF oder Bild: Leistung, Dauer und Preis je Zeile, Preise in Tabellenziffern; Stufen (z. B. Junior, Stylist, Master) als Spalten, Haarlänge als Zuschlag; „ab“ nur zusammen mit dem Satz, wovon der Endpreis abhängt (wie Hair by SPECHT und Josh Wood). Gesamtpreise inkl. MwSt.",
    "Jede Person im Team bekommt eine Karte mit Porträt, Name als Unterschrift (Akzentschrift, nur hier), Stufe, Spezialgebiet und eigenem Buchungsknopf („Bei [Name] buchen“); ihre Looks liegen als Kartenstapel (flick-karten-stapel) direkt dabei.",
    "Kartenstapel immer auch per Knopf bedienbar (Weiter, Zurück, Alle zeigen); Wischen ist nur der schnellere Weg. Jede Karte nennt Look, Leistung, Dauer und ab-Preis als Text, nicht nur im Bild.",
    "Buchung per termin-buchung-zwei-klick: Platzhalter in Widget-Höhe mit Leistungen und Anbieter, Kalender erst nach Klick; Telefon und WhatsApp stehen daneben. Ausfall- und Verspätungsregeln formuliert nur der Salon (markierter Platzhalter).",
    "Mobil eine untere Leiste mit Termin, Preise, Anrufen (mobile-bottom-navigation); sie verdeckt weder Consent-Banner noch Buchungs-Widget.",
    "Fotos von Kundinnen und Kunden nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht. Instagram nicht live einbetten, sondern eine selbst gehostete Auswahl mit Link zum Profil.",
    "Bewertungen nur mit Quelle, Anzahl, Stand-Datum und dem Hinweis, ob und wie geprüft wird, direkt neben den Stimmen (bewertungsprofil-mit-echtheitshinweis); keine Bewertungssterne über den eigenen Salon im Markup.",
    "Gutscheine: Gültigkeit und Einlösung legt der Salon fest. Wird online gekauft, braucht es Gesamtpreis inkl. MwSt., Widerrufsbelehrung, AGB und den Widerrufs-Button (widerruf-und-kuendigung-schaltflaeche) – alles als markierte Platzhalter, vom Kunden prüfen lassen.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum und Datenschutz vom Footer und mobil erreichbar; beim Friseurhandwerk Handwerkskammer-Eintrag im Impressum (vom Kunden prüfen lassen). Kosmetik mit apparativen oder medizinnahen Behandlungen: keine Heilversprechen, Werbung nach Heilmittelwerbegesetz prüfen lassen. Claude schreibt keine Rechtstexte.",
    "Lackrot nur für „Termin buchen“ und aktive Zustände; große Flächen aus Puder und Espresso.",
    "Bewegung auf einer Kurve: Buttons füllen sich in 475 ms von unten, Menüs öffnen in 400 ms und schließen in 260 ms, Look-Karten fliegen beim Loslassen in 725 ms aus. Keine Scroll-Einblendungen außer dem Hero.",
    "Team bis etwa fünf Personen: je Person ein Reiter mit Porträt, Unterschrift (Akzentschrift einmal pro Ansicht) und Look-Stapel; ab sechs Personen Raster ohne Unterschrift.",
    "clip-path-form-hover nur für einen einzeln stehenden Knopf (z. B. Gutschein), nie neben „Termin buchen“."
   ],
   "varianten": [
    {
     "name": "Barbershop",
     "hinweis": "Espresso #1E1412 als Grund, Puder #F4E9E4 als Schrift (15 : 1); Lackrot bleibt Signal, auf Espresso mit 2 px Puder-Rand (Lackrot allein hat dort nur 2,2 : 1). Kalnia wdth 125, wght 700, Versal. Preise nach Stufe (Junior, Barber, Senior) wie bei Fellow Barber, Dauer je Leistung wie bei Pall Mall Barbers.",
     "sektionen": [
      "Leistungen & Preise (Schnitt, Bart, Rasur, Kombinationen; Dauer und Preis je Zeile)",
      "Barber mit Stufe und eigenem Buchungsknopf",
      "Looks (Kartenstapel)",
      "Termin buchen, Walk-in-Zeiten (nur wenn es sie wirklich gibt)",
      "Bewertungen",
      "Gutscheine",
      "Öffnungszeiten & Anfahrt"
     ],
     "weglassen": [
      "Produkte im Salon (höchstens als Zeile in der Preisliste)",
      "Kosmetik-Rubriken"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Kosmetik- und Nagelstudio",
     "hinweis": "Behandlungen wie bei Heyday als eigene Leistungsseiten mit Dauer, Ablauf, Inhalt und Preis (leistungsseite-antwort-zuerst); Nageldesigns als Looks im Kartenstapel. Apparative oder medizinnahe Behandlungen (z. B. Microneedling, Laser): keine Vorher-nachher-Bilder, keine Heilversprechen, Heilmittelwerbegesetz vom Kunden prüfen lassen. Pakete oder Abos nur, wenn es sie gibt; bei Abo zusätzlich der Kündigungs-Button.",
     "sektionen": [
      "Behandlungen (Gesicht, Körper, Hände & Füße) mit Dauer und Preis",
      "Nageldesigns / Looks (Kartenstapel)",
      "Pakete oder Mitgliedschaft (Vergleichstabelle, nur bei echten Paketen)"
     ],
     "weglassen": [
      "Haarlängen-Zuschläge",
      "Barbershop-Rubriken"
     ],
     "muster_zusatz": [
      "vergleichstabelle-sticky"
     ]
    },
    {
     "name": "Tattoo- und Piercingstudio",
     "hinweis": "Schrift, Farbe, Stil und Signatur bleiben: flick-karten-stapel trägt die Portfolios, je Artist ein Stapel; jede Karte nennt Motiv, Stil, Körperstelle und Zahl der Sitzungen als Text, verheilte Arbeiten sind als solche gekennzeichnet. Die Unterschrift in Mrs Saint Delafield bleibt für die Artist-Namen. Beratungstermin als mehrschritt-anfrage (Variante senkrecht: Idee → Stelle und Größe → Referenzbilder hochladen → Kontakt und Wunschzeitraum); Gesundheitsangaben nie als Pflichtfeld, das klärt das Gespräch. Feste Termine bei einer Person über termin-buchung-zwei-klick; Anzahlung, Ausfall- und Verschieberegel formuliert nur das Studio (markierter Platzhalter). Pflegehinweise für Tattoo und Piercing als akkordeon-hoehe-auto (Variante faq) und als druckbare Seite. Guest Spots als programm-kalender erst ab etwa acht Terminen im Monat, sonst Liste. Preise als speisekarte-editorial (Variante preisliste): Piercing je Stelle inkl. Erstschmuck und Material, Tattoo als Mindestpreis oder Stundensatz mit dem Satz, wovon der Endpreis abhängt. Recht: Tätowieren und Piercen nur mit Ausweis; Altersregel des Studios (Tattoo in der Regel ab 18, Piercing bei Minderjährigen nur mit schriftlicher Einwilligung der Sorgeberechtigten) als markierter Platzhalter; nur Tätowiermittel nach der EU-REACH-Beschränkung (seit 04.01.2022); Laser-Tattooentfernung ist Ärzt:innen vorbehalten (NiSV, seit 31.12.2022) und wird nicht als Studio-Leistung beworben; Pflegehinweise ohne Heilversprechen; Hygiene nach Landesrecht; Fotos nur mit schriftlicher Einwilligung der Kundschaft; Handwerkskammer bzw. Gewerbeangaben im Impressum – vom Kunden prüfen lassen.",
     "sektionen": [
      "Artists (Porträt, Stil, Schwerpunkte, Buchungsstand, eigener Knopf „Beratung bei [Name]“)",
      "Portfolio je Artist (Kartenstapel; verheilte Arbeiten markiert)",
      "Beratungstermin (Idee, Stelle, Größe, Referenzbilder; Anzahlung und Terminregeln als Platzhalter)",
      "Piercing (Stellen, Schmuck-Material, Preise inkl. Erstschmuck; Walk-in nur, wenn es das gibt)",
      "Vorher wissen (Alter und Ausweis, Vorbereitung, Ablauf einer Sitzung)",
      "Pflege danach (Tattoo und Piercing)",
      "Preise (Mindestpreis oder Stundensatz, wovon der Endpreis abhängt)",
      "Guest Spots",
      "Gutscheine",
      "Öffnungszeiten, Anfahrt, Kontakt"
     ],
     "weglassen": [
      "Bewertungsband direkt unter dem Hero (Bewertungen weiter unten, mit Echtheitshinweis)",
      "Produkte im Salon",
      "Haarlängen-Zuschläge und Salon-Rubriken"
     ],
     "muster_zusatz": [
      "mehrschritt-anfrage",
      "akkordeon-hoehe-auto",
      "programm-kalender"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Fotos sind alles: Looks als AVIF/WebP mit srcset und festem Seitenverhältnis (4:5), lazy ab der zweiten Reihe; Hero-Foto mit fetchpriority=high. Buchungs-Widget, Instagram und Karte erst nach Klick. Kalnia und Familjen als Variable-Dateien (Kalnia mit wdth und wght), nur Latin. Mrs Saint Delafield unverändert einbinden (OFL mit Reserved Font Name, kein Subset unter gleichem Namen) und nur auf Seiten mit Teamkarten laden. Kartenstapel mit Pointer Events und CSS-Übergängen auf der Hauskurve; GSAP aus der Demo nur, wenn der Wurf sonst nicht sauber wird.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen (curl war in dieser Sitzung gesperrt). Bei Gelegenheit per CSS-Abruf nachmessen.",
    "Tabellenziffern von Familjen Grotesk (Feature tnum) prüfen; fehlen sie, Preise rechtsbündig mit fester Spaltenbreite setzen.",
    "Kein Vorbild aus einem deutschen Kosmetik- oder Nagelstudio geprüft."
   ],
   "stimmung_tags": [
    "warm",
    "editorial"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     136
    ],
    "sektion": "clamp(64px, 8vw, 120px)",
    "dichte": "mittel",
    "hinweis": "Preisliste dicht und lesbar (Zeilen 12 px, Rubriken 32 px), Team-Karten mit Luft. Bewertungsband direkt unter dem Hero ohne großen Abstand."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(12px, 2vw, 24px)",
    "max_breite": "1360px",
    "hinweis": "Hero 7/5 (Name/Foto im Hochformat). Preisliste mit Stufen als Spalten, Team als 3er-Raster mit Kartenstapel je Person."
   },
   "form": {
    "radius_klein": "8px",
    "radius_gross": "16px",
    "pille": true,
    "linie": "1px #D9C8C0",
    "schatten": "nur die Look-Karten im Stapel (flick-karten-stapel) heben sich weich in Espresso ab; sonst keiner",
    "hinweis": "Pillen für Knöpfe (fuellung-vom-eintrittspunkt), 16 px für Look-Karten und Porträts (Demo flick-karten-stapel zeigt 12 bis 16 px)."
   },
   "bildsprache": {
    "licht": "Salon- oder Fensterlicht, Haarfarbe farbecht.",
    "ausschnitt": "Hinterkopf, Profil, Bewegung im Haar; Porträt der Stylist:in auf Augenhöhe.",
    "personen": "Ja: Kund:innen nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht; Stylist:innen mit Namen.",
    "formate": [
     "4:5",
     "3:4",
     "1:1"
    ],
    "nicht": "Keine Stock-Models, keine KI-Frisuren, keine Farbfilter, die Haarfarben verfälschen, kein Video im Hero."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz und persönlich, mit Namen. Preiszeile: Leistung, Dauer, Preis; „ab“ nur mit dem Satz, wovon es abhängt.",
    "haltung": "Stilbewusst und warm. Ein Herrensalon oder klassischer Salon mit älterer Kundschaft siezt, dann durchgehend.",
    "beispiele": [
     "Balayage bei Mira. Ab 145 €, je nach Haarlänge.",
     "Buch direkt bei deiner Stylistin."
    ],
    "nicht": "„Ihr Wohlfühlsalon“, „Haare sind unsere Leidenschaft“, Wortspiele wie „Haarmonie“, Bewertungssterne ohne Quelle."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Salonname über Spalte 1 bis 7, echtes Foto im Hochformat über 8 bis 12; alternativ Foto randlos mit Name darauf.",
    "bild": "Eine echte Arbeit aus dem Salon, 4:5 oder 3:4, Radius 16 px.",
    "h1": "clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), Kalnia wdth 112 / 500, links.",
    "handlung": "„Termin buchen“ (Lackrot #9B1D2E gefüllt) und „Preise ansehen“ (Kontur); Telefon und WhatsApp als Links darunter.",
    "zusatz": "Satz zu Spezialgebiet und Ort unter der H1; Bewertungsband mit Quelle und Stand direkt unter dem Hero."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "graustufen-zu-farbe"
     ],
     "grund": "Haarfarbe ist das Ergebnis, das verkauft wird; Touch-Besucher (die meisten, oft vom Instagram-Link) sähen die Farbe nie"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "svg-filter-verzerrung",
      "halbton-raster"
     ],
     "grund": "verfälschen Farbe und Schnitt auf den Arbeitsproben"
    },
    {
     "ids": [
      "vorher-nachher-vergleichsregler"
     ],
     "grund": "Signatur von handwerk; bei Kosmetik mit Behandlungen zudem heilmittelwerberechtlich heikel"
    },
    {
     "ids": [
      "marquee-laufband",
      "rotating-words"
     ],
     "grund": "„Schnitt · Farbe · Pflege“ als Band oder Wortwechsel ist Salon-Template-Klischee und automatische Bewegung"
    },
    {
     "ids": [
      "prozent-zaehler",
      "einmal-intro-session"
     ],
     "grund": "Kundinnen kommen vom Instagram-Link und wollen sofort buchen"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "Agentur-Gesten, stören beim Wischen durch die Looks"
    },
    {
     "ids": [
      "mesh-gradient-shader",
      "holo-irisierende-folie"
     ],
     "grund": "Effekt statt Handschrift"
    },
    {
     "ids": [],
     "grund": "Preisliste als PDF oder Bild – nicht lesbar am Telefon, nicht durchsuchbar, nicht barrierefrei"
    },
    {
     "ids": [],
     "grund": "Stockfotos und KI-generierte Frisuren – Arbeitsproben müssen echt sein und aus dem Salon stammen"
    }
   ],
   "starter": "https://cecodesign.de/lab/fundus/starter/friseur-salon-handschrift/index.html",
   "alle_muster": [
    {
     "id": "flick-karten-stapel",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "band",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band"
    },
    {
     "id": "speisekarte-editorial",
     "rolle": "Sektion: Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json",
     "variante": "preisliste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)",
       "variante": "vorauswahl",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl"
      },
      {
       "rolle": "Sektion: Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter)",
       "variante": "platzhalter",
       "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
      }
     ]
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "gutschein-konfigurator",
     "rolle": "Sektion: Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "wenige",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)",
     "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": "firmendaten-strukturiert",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "friseur",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "fab",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "clip-path-form-hover",
     "rolle": "Hover",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "id": "token-studio-signatur",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    }
   ]
  },
  {
   "id": "fitness-studio-rhythmus",
   "name": "Studio: Rhythmus und Kursplan",
   "branche": "Fitnessstudio / Yoga- und Pilatesstudio / Kampfsportschule / Tanzschule (auch Sportverein mit Kursbetrieb)",
   "stimmung": [
    "energisch",
    "direkt",
    "motivierend",
    "ehrlich"
   ],
   "kurz": "Die Seite ist ein Fahrplan: Was läuft jetzt, wann ist mein Kurs, wie läuft das erste Training, was kostet es wirklich und wie komme ich wieder raus. Kreide als Grund, Hallenschwarz für Text, eine Limette nur für Probetraining und Buchen; eine breitenvariable Grotesk, die im Takt springt, Uhrzeiten in Mono. Bewegung ist Takt statt Kurve: harte Schnitte und Stufen für die Inszenierung, kurze präzise Übergänge für Buchung, Vertrag und Kündigung.",
   "referenzen": [
    {
     "seite": "ELEMENTS (Fitness und Wellness, München / Frankfurt)",
     "url": "https://www.elements.com/kursplan/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.elements.com/kursplan/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Kursplan mit Studio-Auswahl (sieben Studios), 14 Tagen im Voraus und Legende „Frei“ / „Belegt“; eigene Zustände für Anmeldung, Warteliste und Storno („Anmeldung zur Warteliste erfolgreich“, „Kurs bereits ausgebucht“). Probetraining mit Termin und kostenloser Beratungstermin als getrennte Wege. Footer mit „Verträge hier kündigen“ (/kuendigung/), Hausordnung, Gutscheinen und Barrierefreiheitserklärung."
    },
    {
     "seite": "Third Space (Clubs, London)",
     "url": "https://www.thirdspace.london/classes/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.thirdspace.london/classes/ und https://www.thirdspace.london/timetable/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Kurs-Bibliothek mit Kategorie-Reitern (All, Combat, Cycle, Mind & Body, Pilates, Sports & Performance, Strength & Conditioning): Kampfsport, Yoga und Kraft in einer Struktur. Kurstexte nennen die Intensität („high-intensity“, „low-impact“, „Suitable for all levels.“). Im Stundenplan nennt jeder Eintrag Kursname, Uhrzeit von–bis („08:30 – 09:20“), Trainer:in und Dauer („0h 50m“)."
    },
    {
     "seite": "Barry's (Studio FiDi, San Francisco)",
     "url": "https://www.barrys.com/studio/fidi",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.barrys.com/studio/fidi",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Studioseite für Erstbesucher: „What to Expect in Your First Workout“, Stunde in zwei Teilen (Run / Lift, 50 Minuten), Hinweis „Let them know before class if you're brand new, coming back from time off, or working around an injury“. Anfahrt mit Parken und ÖPNV in Gehminuten („BART Montgomery St. Station: 4 min walk“), Öffnungszeiten je Wochentag, Telefon und E-Mail des Studios."
    },
    {
     "seite": "Triyoga (Yoga und Pilates, London)",
     "url": "https://triyoga.co.uk/try-us-now/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://triyoga.co.uk/try-us-now/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Einsteiger-Seite: „Level 1“ und „Open“ als einsteigergeeignete Klassen, Matten und Hilfsmittel werden gestellt, 10 Minuten vorher da sein, beim ersten Besuch 15–20; bei Warteliste spätestens 5 Minuten vor Beginn einchecken; kein Einlass nach Beginn bei Hot-Klassen. Zwei Einstiegsangebote, beide 14 Tage gültig; der Stundenplan hat einen Filter „Beginner-friendly“."
    },
    {
     "seite": "Frame (Studios, London)",
     "url": "https://moveyourframe.com/class-type/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://moveyourframe.com/class-type/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): 29 Kurse mit „Filter by Type“ (Balance, Train, Sculpt, Party, Reformer, Mumhood). Die Kurstexte sagen ehrlich, für wen ein Kurs nicht geeignet ist (Dynamic Reformer Pilates nicht für Einsteiger, Schwangere oder Reha). Je Karte „Find a Class“ (zum Stundenplan) und „More“; Einstiegsangebot mit Preis („Get 3 Classes for £40“)."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Keine Katalog-Paarung. Anybody (wdth 50–150, wght 100–900) statt big-shoulders, damit sich fitness von verein (Big Shoulders + Archivo) unterscheidet und die Breite als Takt animiert werden kann. Funnel Sans als ruhige Textschrift, Azeret Mono als Fahrplan-Schrift für Uhrzeiten, Dauer und Plätze.",
    "headline": "anybody",
    "text": "funnel-sans",
    "akzent": "azeret-mono",
    "groessen": "Hero-Zeile Anybody clamp(3rem, 1.5rem + 8vw, 9rem), wdth 50–100 (Takt), wght 800, Versal, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.3rem + 3vw, 3.5rem), wdth 75, wght 750; Kursnamen im Plan Anybody wdth 75, wght 700, 1.125rem. Fließtext Funnel Sans 1.0625rem/1.55, wght 400, max. 64ch; Knöpfe Funnel Sans 1rem wght 600. Uhrzeiten, Dauer, freie Plätze, Raum und Labels in Azeret Mono 0.8125rem, Labels Versal +0.08em, alle Ziffern tabular-nums.",
    "techniken": [
     "mono-labels-versal",
     "tabellenziffern",
     "fluide-typo-clamp-cqi",
     "headline-laufweite-zeilenabstand"
    ],
    "alternative_eigenprojekt": "Headline tanker oder panchang, Text supreme (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Hallenlicht statt Neon-Nacht: Kreide als Grund, Hallenschwarz für Text und dunkle Bühnen (Kursplan-Kopf, Fußzeile), eine Limette als einziger Signalton für Probetraining, Buchen und Mitglied werden. Limette nie als Textfarbe auf hellem Grund, immer als Fläche mit dunkler Schrift, auf Kreide mit 2 px Rand. Kursarten unterscheiden sich per Text-Label, nicht per Farbe. Rot nur für Ausfall und Fehler.",
    "beispiel": [
     "#F2F1EC Grund (Kreide)",
     "#121412 Text, dunkle Sektionen, Kursplan-Kopf (16 : 1)",
     "#CCFF33 Signal Limette: Probetraining, Buchen (Text #121412, 15,8 : 1; auf Kreide mit 2 px Rand #121412)",
     "#E2E1DA Flächen, Kursplan-Raster",
     "#5E615C Meta: Trainer:in, Raum, Dauer (5,6 : 1 auf Kreide)",
     "#B3261E Ausfall, Fehler (sparsam, 5,8 : 1)"
    ]
   },
   "animationsstil": "token-brutal-hart",
   "animationsstil_ui": "token-tech-praezise",
   "animationsstil_hinweis": "token-brutal-hart nur in den Spielarten „Stufen“ und „harte Bildwechsel“: Takt für die Inszenierung (Hero-Zeile, Bildwechsel, Zeile „läuft gerade“), nie Terminal-Tippen, nie Flackern. Weil der Stil laut wann_nicht nicht zu Inhalten passt, die Vertrauen aufbauen müssen, laufen Tarife, Mitglied werden, Kündigung, Filter und Buchung auf animationsstil_ui token-tech-praezise (productive).",
   "bewegung": {
    "easing": "linear bzw. steps(1, end) und steps(6, jump-none) (token-brutal-hart: Takt statt Kurve)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "0 (Bildwechsel, harter Schnitt), 80 je Stufe (Hero-Zeile in 6 Stufen = 480), 180 (Stufen-Einblendung mit 3 Stufen); UI nach token-tech-praezise: 70 (Hover, Farbe), 110–150 (Reiter, Filter, Tages-Reiter), 240 (Panels, Sheets, Dialog), Austritt 150",
    "regel": "Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, reagiert kurz und präzise. Nichts federt, nichts gleitet nach. Stufen sind Breiten- und Positionssprünge, keine Blitze: großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Wechseln Hero-Bilder ohne Nutzer länger als 5 s, gehört ein sichtbarer Pause-Knopf dazu (WCAG 2.2.2, bewegung-pausieren-schalter). Der Kursplan selbst bewegt sich nicht, nur der Filter wechselt die Ansicht ohne Übergang. Bei prefers-reduced-motion stehen alle Stufen sofort im Endzustand.",
    "herkunft": "Werte aus token-brutal-hart (bau.werte: --dur-step 80ms, steps(6, jump-none), --raster 8px) und token-tech-praezise (dauer_token_ms); die Referenzen sind inhaltlich geprüft (WebFetch), ihre CSS-Kurven nicht gemessen."
   },
   "hero_beschreibung": "Foto aus einem echten Kurs oder von der Trainingsfläche (Mitglieder mit Einwilligung) mit einer kurzen Zeile in Anybody, deren Breite beim Laden einmal in sechs Stufen aufspringt (variable-font-axes). Darunter „Probetraining buchen“ (Limette) und „Kursplan“ sowie eine Zeile aus dem Plan: „Jetzt: Yoga Flow bis 19:15 · Als Nächstes: Boxen 19:30“. Video nur als hero_variante mit eigenem Material aus dem Studio, mit Poster und Pause-Knopf; nie Stockvideo.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation",
     "native-popover-dropdowns"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin)",
      "muster": [
       "wochen-kursplan",
       "tabs-pfeiltasten-focusgroup"
      ],
      "varianten": {
       "tabs-pfeiltasten-focusgroup": "auto",
       "wochen-kursplan": "studio"
      }
     },
     {
      "zweck": "Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)",
      "muster": [
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick)",
      "muster": [
       "prozess-timeline-wachsende-linie",
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter"
      }
     },
     {
      "zweck": "Tarife & Preise (Monatspreis, Mindestlaufzeit, Kündigungsfrist und einmalige Gebühren in einer Tabelle; ab drei Tarifen, bei zwei zwei Karten)",
      "muster": [
       "vergleichstabelle-sticky"
      ],
      "varianten": {
       "vergleichstabelle-sticky": "pakete"
      }
     },
     {
      "zweck": "Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen)",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster"
      }
     },
     {
      "zweck": "Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)",
      "muster": [
       "css-native-karussell",
       "galerie-shared-element-vollbild"
      ],
      "varianten": {
       "css-native-karussell": "buehne",
       "galerie-shared-element-vollbild": "basis"
      }
     },
     {
      "zweck": "Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "band"
      }
     },
     {
      "zweck": "Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "mehrschritt-anfrage": "leiste",
       "formular-fehlerzusammenfassung": "liste"
      }
     },
     {
      "zweck": "Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf)",
      "muster": [
       "gutschein-konfigurator"
      ]
     },
     {
      "zweck": "FAQ (Laufzeit, Kündigung, Pause bei Krankheit oder Schwangerschaft, Gebühren, Kinder, Duschen und Schließfächer)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "kontakt-anfrage-formular",
       "standortfinder-liste",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "auslastung",
       "standortfinder-liste": "kompakt",
       "karte-zwei-klick": "bild",
       "firmendaten-strukturiert": "friseur"
      }
     },
     {
      "zweck": "Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche"
      ],
      "varianten": {
       "widerruf-und-kuendigung-schaltflaeche": "richtig"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden prüfen lassen)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [
     "variable-font-axes"
    ],
    "hover": [],
    "cursor": [],
    "mikro": [
     "druck-feedback",
     "checkbox-radio-animiert",
     "toast-stapel"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "mega-footer-sitemap"
    ],
    "button": [
     "tiefen-taste-3d",
     "fuellung-vom-eintrittspunkt"
    ],
    "hero_varianten": {
     "foto-hero": "randlos-unten-links"
    }
   },
   "signatur": [
    "variable-font-axes"
   ],
   "varianten_demo": {
    "galerie-shared-element-vollbild": "basis",
    "tiefen-taste-3d": "versatz-brutal",
    "fuellung-vom-eintrittspunkt": "pixel",
    "mobile-bottom-navigation": "basis",
    "css-native-karussell": "buehne"
   },
   "nicht_verwenden": [
    "zahlen-odometer / prozent-zaehler – hochgezählte Mitgliederzahlen und Countdown-Rabatte („Nur noch heute“) sind Druck statt Information",
    "vorher-nachher-vergleichsregler – Signatur von handwerk; Körper-Vorher-nachher mit Abnehmversprechen ist unseriös und rechtlich heikel",
    "marquee-laufband – Motivationssprüche als Band; Kurszeiten nie in bewegten Bändern",
    "scramble-decode / typewriter-natural – Terminal-Aufbau wie in token-brutal-hart: Uhrzeiten, Preise und Kursnamen müssen sofort lesbar sein",
    "karten-spotlight-glow / verlaufs-rahmen / mesh-gradient-shader – Neon-Glow ist Gym-Template-Klischee, die Limette reicht",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – stören Kursplan, Filter und Formulare",
    "konfetti-erfolg – ein Vertrag ist kein Spiel; nach dem Abschluss eine ruhige Bestätigung mit den Vertragsdaten",
    "Halte-, Pause- oder Rabattangebote auf der Kündigungsseite – laut BGH vom 16.07.2026 nicht auf die Bestätigungsseite; eine Pause darf in der FAQ stehen",
    "Stockfotos mit Sixpack-Models – echte Mitglieder und Trainer:innen aus dem Studio"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto aus Kurs oder Fläche, eine kurze Zeile in Anybody, „Probetraining buchen“ und „Kursplan“, darunter die Zeile „Jetzt … · Als Nächstes …“ aus dem Plan.",
    "Der Kursplan (wochen-kursplan) ist von jeder Seite mit einem Klick erreichbar, mobil in der unteren Leiste: am Desktop als Wochenraster, mobil als Tages-Reiter (tabs-pfeiltasten-focusgroup). Uhrzeit, Dauer und freie Plätze in Azeret Mono mit Tabellenziffern; Ausfälle und Vertretungen stehen am Termin, nicht in einem Banner.",
    "Liefert die Studio-Software schon einen gepflegten Plan, den Kursplan nur als Teaser mit „läuft gerade“ und Link bauen (wann_nicht von wochen-kursplan), keine doppelte Datenpflege.",
    "Kursarten im Plan per Text-Label und Filter, nie nur per Farbe; die Limette bleibt der einzige Signalton (Probetraining, Buchen, Mitglied werden). Filter „Einsteiger geeignet“ wie bei Triyoga; je Kurs ehrlich, für wen er nicht geeignet ist (wie Frame).",
    "Probetraining erklärt: Ablauf der ersten Stunde, was mitbringen, wann da sein, Verletzungen vorher sagen (wie Barry's und Triyoga).",
    "Tarife offen: Monatspreis, Mindestlaufzeit, Kündigungsfrist, Verlängerung und jede einmalige Gebühr (Startpaket, Karte, Servicepauschale) in derselben Tabelle, der Gesamtpreis direkt dabei, nie nur im Kleingedruckten. Preisangaben vom Kunden prüfen lassen.",
    "Wer online Verträge schließt: „Verträge hier kündigen“ und, wo ein Widerrufsrecht besteht, „Vertrag widerrufen“ dauerhaft in der Fußzeile, ohne Login, auf der Bestätigungsseite nur die erlaubten Felder (widerruf-und-kuendigung-schaltflaeche; ELEMENTS führt den Link im Footer). Ob und welche Pflicht gilt, prüft der Kunde.",
    "Pflichtangaben und Recht (Leitfaden 8a): keine Heil- oder Abnehmversprechen; Präventionskurse mit Krankenkassen-Zuschuss nur nennen, wenn die Zertifizierung echt ist (vom Kunden belegen lassen).",
    "Fotos von Mitgliedern nur mit Einwilligung; Kinder- und Jugendkurse (Kampfsport, Tanz) nur mit Einwilligung der Eltern und möglichst ohne erkennbare Gesichter.",
    "Bewegung im Takt: Die Hero-Zeile springt einmal in sechs Stufen von wdth 50 auf 100 (480 ms, variable-font-axes, nur diese Zeile), Bildwechsel ohne Übergang, die Zeile „läuft gerade“ wechselt hart. Menüs, Filter, Formulare, Buchung und Kündigung laufen auf token-tech-praezise (70–240 ms).",
    "Auslastung nur aus echten Zählwerten mit Zeitstempel, sonst weglassen; Öffnungszeiten mit Feiertagen pflegen (oeffnungszeiten-status, ein Datenblock über firmendaten-strukturiert).",
    "Footer: Adresse, Zeiten, Telefon, Parken und ÖPNV mit Gehminuten (wie Barry's), Impressum, Datenschutz, AGB, Hausordnung, Barrierefreiheit, „Verträge hier kündigen“.",
    "Gesundheitsangaben (Verletzungen, Schwangerschaft) nur freiwillig und nie als Pflichtfeld im Online-Formular; lieber im Gespräch vor der ersten Stunde – vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Verein mit Kursbetrieb (Breitensport, Fitness- und Gesundheitskurse im Verein)",
     "hinweis": "Schrift, Farbe, Stil und Signatur bleiben; die Limette darf durch die Vereinsfarbe ersetzt werden, wenn sie als Fläche mit dunkler Schrift 4,5 : 1 hält. Für Vereine, deren Angebot vor allem aus Kursen besteht; Vereine mit Spielbetrieb und vielen Abteilungen nehmen die Variante „Sportverein“ von verein-nonprofit-wirkung. Recht: Vereinsregister und Vertretungsberechtigte im Impressum, Beitragsordnung und Einwilligungen im Antrag, Fotos von Kindern nur mit Einwilligung der Eltern; ob der Kündigungs-Button für online geschlossene Mitgliedschaften gilt, prüft der Kunde.",
     "sektionen": [
      "Abteilungen und Angebote (Akkordeon mit Bild je Abteilung)",
      "Trainingszeiten (wochen-kursplan mit Filter Abteilung, Alter, Halle)",
      "Probetraining (Anfrage je Gruppe)",
      "Spielplan, Ergebnisse und Termine (programm-kalender, nur Einzeltermine)",
      "Beiträge (vergleichstabelle-sticky mit Aufnahmegebühr und Familienbeitrag)",
      "Mitglied werden (mehrschritt-anfrage mit Beitragsordnung, SEPA-Mandat, Einwilligungen; formular-fehlerzusammenfassung)",
      "Ansprechpersonen je Abteilung (team-ueber-mich-layout)",
      "Sponsoren (logo-wand-social-proof, Variante raster)",
      "Hallen und Anfahrt (karte-zwei-klick; standortfinder-liste bei mehreren Hallen)"
     ],
     "weglassen": [
      "Tarife mit Laufzeit",
      "Gutscheine",
      "Studio & Geräte (Hallenbilder in den Abteilungen)",
      "Bewertungsprofil (nur wenn es ein gepflegtes Profil gibt)"
     ],
     "muster_zusatz": [
      "programm-kalender",
      "logo-wand-social-proof"
     ]
    },
    {
     "name": "Yoga, Pilates, Tanz (ruhige Studios)",
     "hinweis": "Takt gedämpft: Die Hero-Zeile wechselt die Breite einmal in drei Stufen (3 × 160 ms), keine harten Bildwechsel im Hero. Signal statt Limette ein Lehmrot #9C4A2F mit weißer Schrift (6,1 : 1); Kreide und Hallenschwarz bleiben. Einsteiger-Filter und Gegenanzeigen je Kurs sind hier Pflicht (Triyoga, Frame).",
     "sektionen": [
      "Einsteiger: Level 1 und offene Klassen als Filter",
      "Kurse mit Eignung und Gegenanzeigen (z. B. Schwangerschaft, Reha)",
      "Workshops und Ausbildungen mit Einzelterminen (programm-kalender)"
     ],
     "weglassen": [
      "Auslastung",
      "Geräte"
     ],
     "muster_zusatz": [
      "programm-kalender"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "hoch",
   "leistung": "Der Kursplan ist die schwerste Seite: Daten als JSON (oder aus der Studio-Software), serverseitig gerendert, Filter clientseitig ohne Neuladen, „läuft gerade“ aus der Ortszeit ohne weitere Abfrage. Anybody als eine Variable-Datei (wdth, wght), Funnel Sans und Azeret Mono variabel, nur Latin. Video-Variante nur mit Poster und Pause-Knopf, mobil Standbild. Buchungs-Widget und Karte erst nach Klick; die untere Mobilleiste verdeckt weder Consent-Banner noch Widget.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen (curl war in dieser Sitzung gesperrt).",
    "token-brutal-hart: Sein wann_nicht nennt Inhalte, die Vertrauen aufbauen müssen. Aufgefangen über animationsstil_ui token-tech-praezise für Tarif, Vertrag und Kündigung und über die Beschränkung auf „Stufen“ und harte Bildwechsel – AD-Prüfung erwünscht.",
    "Nur eine Signatur (variable-font-axes): wochen-kursplan, von der Lückenanalyse als Fitness-Signatur vorgeschlagen, steht inzwischen in fahrschule, kurs, praxis und in der Sportverein-Variante von verein und ist damit keine Signatur mehr. Eine zweite, ungenutzte und passende Signatur gibt es im Bestand nicht.",
    "Kein Vorbild einer kleinen deutschen Einzelanlage (Kampfsportschule, Tanzschule, Yogastudio) geprüft; ELEMENTS ist eine Kette."
   ],
   "stimmung_tags": [
    "laut"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     40,
     56,
     80,
     112
    ],
    "sektion": "clamp(48px, 6vw, 96px)",
    "dichte": "dicht",
    "hinweis": "Fahrplan statt Bühne: Kursplan-Zellen 8 bis 12 px Innenabstand, Tarife in einer Tabelle, kurze Sektionsabstände."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(12px, 3vw, 32px)",
    "spalt": "clamp(8px, 1.2vw, 16px)",
    "max_breite": "1440px",
    "hinweis": "Kursplan am Desktop als Wochenraster mit 7 Spalten, mobil Tages-Reiter. Tarife als Tabelle über volle Breite."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "2px #121412 um Knöpfe und die Limette auf Kreide; Kursplan-Raster 1px #E2E1DA",
    "schatten": "nur der harte Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal), ohne Weichzeichnung",
    "hinweis": "Harte Kanten überall. Die Demo-Variante versatz-brutal nennt 6 px Radius; hier auf 0 übersetzt, damit Taste, Plan und Bilder eine Form haben."
   },
   "bildsprache": {
    "licht": "Hallenlicht, eher hart, echte Anstrengung statt Studioglanz.",
    "ausschnitt": "Bewegung angeschnitten, Gruppe im Kurs, Trainer:in in Aktion.",
    "personen": "Ja: Mitglieder mit Einwilligung; Kinder- und Jugendkurse ohne erkennbare Gesichter.",
    "formate": [
     "4:5",
     "16:9",
     "1:1"
    ],
    "nicht": "Keine Stock-Sixpacks, keine Vorher-Nachher-Körper, kein Neon-Glow, kein Stockvideo."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Sehr kurz, Uhrzeit und Zahl vorn, Imperativ erlaubt.",
    "haltung": "Motivierend ohne Druck, ehrlich zu Vertrag, Kosten und Kündigung.",
    "beispiele": [
     "Heute 18:30: Boxen für Einsteiger. 6 Plätze frei.",
     "Komm zum Probetraining. Bring Wasser und Hallenschuhe mit."
    ],
    "nicht": "„No pain, no gain“, „Beach Body“, Body-Shaming, „Unschlagbar günstig!“, Preise nur im Kleingedruckten."
   },
   "hero_aufbau": {
    "raster": "Foto randlos über die volle Breite, Hero-Zeile unten links über 10 Spalten, Statuszeile als Band an der Unterkante.",
    "bild": "Echtes Foto aus Kurs oder Fläche, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Material.",
    "h1": "clamp(3rem, 1.5rem + 8vw, 9rem), Anybody 800 Versal, unten links; springt einmal in sechs Stufen von wdth 50 auf 100 (variable-font-axes).",
    "handlung": "„Probetraining buchen“ (Limette, versatz-brutal) und „Kursplan“ (Kontur 2px), nebeneinander unter der Zeile.",
    "zusatz": "Zeile „Jetzt … · Als Nächstes …“ in Azeret Mono 0.8125rem aus dem Plan, wechselt hart."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/fitness-studio-rhythmus/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/fitness-studio-rhythmus/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/fitness-studio-rhythmus/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/fitness-studio-rhythmus/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "zahlen-odometer",
      "prozent-zaehler"
     ],
     "grund": "hochgezählte Mitgliederzahlen und Countdown-Rabatte („Nur noch heute“) sind Druck statt Information"
    },
    {
     "ids": [
      "vorher-nachher-vergleichsregler"
     ],
     "grund": "Signatur von handwerk; Körper-Vorher-nachher mit Abnehmversprechen ist unseriös und rechtlich heikel"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "Motivationssprüche als Band; Kurszeiten nie in bewegten Bändern"
    },
    {
     "ids": [
      "scramble-decode",
      "typewriter-natural"
     ],
     "grund": "Terminal-Aufbau wie in token-brutal-hart: Uhrzeiten, Preise und Kursnamen müssen sofort lesbar sein"
    },
    {
     "ids": [
      "karten-spotlight-glow",
      "verlaufs-rahmen",
      "mesh-gradient-shader"
     ],
     "grund": "Neon-Glow ist Gym-Template-Klischee, die Limette reicht"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "stören Kursplan, Filter und Formulare"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "ein Vertrag ist kein Spiel; nach dem Abschluss eine ruhige Bestätigung mit den Vertragsdaten"
    },
    {
     "ids": [],
     "grund": "Halte-, Pause- oder Rabattangebote auf der Kündigungsseite – laut BGH vom 16.07.2026 nicht auf die Bestätigungsseite; eine Pause darf in der FAQ stehen"
    },
    {
     "ids": [],
     "grund": "Stockfotos mit Sixpack-Models – echte Mitglieder und Trainer:innen aus dem Studio"
    }
   ],
   "alle_muster": [
    {
     "id": "variable-font-axes",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/meta.json"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "randlos-unten-links",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "wochen-kursplan",
     "rolle": "Sektion: Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/meta.json",
     "variante": "studio",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: FAQ (Laufzeit, Kündigung, Pause bei Krankheit oder Schwangerschaft, Gebühren, Kinder, Duschen und Schließfächer)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Tarife & Preise (Monatspreis, Mindestlaufzeit, Kündigungsfrist und einmalige Gebühren in einer Tabelle; ab drei Tarifen, bei zwei zwei Karten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "band",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "gutschein-konfigurator",
     "rolle": "Sektion: Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "auslastung",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=auslastung"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
     "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": "kontakt-anfrage-formular",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "standortfinder-liste",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "friseur",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden prüfen lassen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "toast-stapel",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "tiefen-taste-3d",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
     "variante": "versatz-brutal",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=versatz-brutal"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "pixel",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=pixel"
    },
    {
     "id": "token-brutal-hart",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/meta.json"
    },
    {
     "id": "token-tech-praezise",
     "rolle": "Animationsstil für UI",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json"
    },
    {
     "id": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "headline-laufweite-zeilenabstand",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json"
    }
   ]
  },
  {
   "id": "pflege-dienst-naehe",
   "name": "Pflegedienst: Nähe und Klartext",
   "branche": "Ambulanter Pflegedienst / Tagespflege / Alltagshilfe und Betreuung",
   "stimmung": [
    "nah",
    "verlässlich",
    "klar",
    "warm"
   ],
   "kurz": "Zwei Türen auf einer Seite: Angehörige, die schnell wissen müssen, ob der Dienst zu ihnen kommt und was die Kasse zahlt, und Pflegekräfte, die ihre Bewerbung in einer Minute abschicken wollen. Die größte Schrift und die einfachste Sprache aller Rezepte, echte Gesichter mit Namen und Durchwahl, ein warmes Pflaume statt Klinikblau, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Bewegt wird nur, was jemand selbst öffnet.",
   "referenzen": [
    {
     "seite": "BESSER UMSORGT (ambulanter Pflegedienst, Sinzig)",
     "url": "https://besser-umsorgt.de/karriere.html",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://besser-umsorgt.de/karriere.html und https://besser-umsorgt.de/grundpflege.html",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Deutscher KMU-Pflegedienst mit Karriere als zweiter Startseite: H1 „Vielleicht passt es einfach. Finden wir’s heraus.“, sieben Stellen von Pflegefachkraft bis Ausbildung, je Stelle „Das machst du / Das solltest du mitbringen / Das bieten wir“; Bewerbung in 60 Sekunden mit fünf kurzen Fragen, „Kein Anschreiben“, „Kein Lebenslauf erforderlich“, danach Rückruf, Kennenlernen und auf Wunsch Probetag; drei Ansprechpersonen mit Foto; „Feste Touren und feste Bezugspersonen statt ständig wechselnder Einsätze“. Leistungsseite Grundpflege: H1 mit den drei Orten, Ablauf in vier Schritten (anrufen oder Rückruf, kostenlose Beratung zu Hause, Kostenvoranschlag, Start mit festen Ansprechpartnern), Kostenregel ab Pflegegrad 2 in einem Satz, Pflegedienstleitung mit Name und Rolle."
    },
    {
     "seite": "Careship (Alltagshilfe und Betreuung)",
     "url": "https://www.careship.de/preise",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.careship.de/preise und https://www.careship.de/alltagshelfer/heilbronn",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Kostenseite gegliedert nach „Wer übernimmt die Kosten? Pflegekasse, Krankenkasse oder privat“ und „Ihre Pflegebudgets im Überblick“ mit Beträgen und Bedingungen je Pflegegrad (Entlastungsbetrag bis 131 € im Monat ab Pflegegrad 1, Verhinderungspflege bis 3.539 € im Jahr ab Pflegegrad 2); PLZ-Feld „Alltagshilfe in Ihrer Nähe finden“. Die Ortsseite Heilbronn nennt Stundenpreise in der FAQ (45 € bzw. 38 €), den städtischen Pflegestützpunkt mit Adresse, drei Schritte (Bedarf besprechen, Finanzierung klären, Unterstützung finden) und beantwortet „Kommt immer dieselbe Person?“ sowie, was ausgeschlossen ist (Wundversorgung, Spritzen)."
    },
    {
     "seite": "Home Instead Deutschland (Betreuung zu Hause, Stellenseite Hamburg)",
     "url": "https://jobs.homeinstead.de/job/betreuungskraft-hamburg-flexibel/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://jobs.homeinstead.de/job/betreuungskraft-hamburg-flexibel/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Stellenseite auch für Quereinsteiger: Qualifikation nach § 53b/§ 53c SGB XI „idealerweise“, sonst über den Arbeitgeber; Einsatzgebiet als Liste von rund 80 Hamburger Postleitzahlen; Kurzbewerbung mit Vorname, Name, Telefon, E-Mail, PLZ und Ja/Nein-Fragen (Qualifikation, Führerschein, Auto), Unterlagen dürfen nachgereicht werden; das Video lädt erst nach „Inhalt entsperren“; „Ruf direkt an“ mit Nummer."
    },
    {
     "seite": "Home Instead UK (Kostenratgeber häusliche Pflege)",
     "url": "https://www.homeinstead.co.uk/advice/care-cost/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.homeinstead.co.uk/advice/care-cost/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Kosten mit Rechenbeispielen als Wochensumme statt nur Stundensatz („7 hours of personal care: £231 per week“, „14 hours of specialist dementia care (mid-stage): £490 per week“), Fragen als echte Zwischenüberschriften („Is home care paid hourly or daily?“, „Do I need to pay for my own home care?“), Regionen als eigene Seiten. Nicht übernehmen: Die Telefonnummer steht nur im Footer."
    },
    {
     "seite": "Buurtzorg (Nachbarschaftspflege, Niederlande / international)",
     "url": "https://www.buurtzorg.com/about-us/buurtzorgmodel/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.buurtzorg.com/about-us/buurtzorgmodel/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen, curl war in dieser Sitzung gesperrt): Erklärt Nähe als Organisationsprinzip: „A team of twelve works in a neighborhood“; das Modell beginnt bei der Klientin und geht nach außen (Klient, informelles Netz, Buurtzorg-Team, formelle Netze), Angehörige und Nachbarn sind also Teil der Versorgung. Kurze Sätze, Werte statt Werbesprache („Humanity above bureaucracy“)."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "literata ist im Katalog eine Fließtextschrift; hier steht sie als Headline (opsz bis 72, wght 600), weil sie in großen Graden ruhig und buchnah bleibt und ihre kräftigen Serifen auch bei schwacher Sehkraft gut zu erkennen sind. atkinson-hyperlegible-next wäre erste Wahl für den Text, steht aber schon in drei Rezepten (Schriften-Regel); hanken-grotesk ist damit in drei Rezepten. Unterschied zu praxis (Hedvig Letters Serif + Google Sans Flex) und immobilien (Libre Caslon Display + Hanken): Literata ist eine Text-Antiqua, keine Display-Serif, und der Text steht hier mindestens 20 px groß.",
    "headline": "literata",
    "text": "hanken-grotesk",
    "akzent": "",
    "groessen": "h1 Literata clamp(2.5rem, 1.8rem + 3vw, 4rem), wght 600, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem), wght 600; h3 1.5rem. Fließtext Hanken Grotesk mindestens 1.25rem (20 px), wght 400, Zeilenhöhe 1.6, max. 60ch, Absatzabstand 1em; Knöpfe 1.25rem wght 600, mindestens 56 px hoch; Telefonnummer im Kopf 1.5rem wght 700 in Tabellenziffern; kleinste Schrift 1rem, auch in Fußzeile und Formularhinweisen. Fett nur für Telefonnummer und Beträge.",
    "techniken": [
     "lesesatz-text-wrap",
     "optische-groessen-opsz",
     "tabellenziffern",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Text ranade (ITF, Humanist), Headline sentient (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Warmes Weiß als Grund, sehr dunkles Warmgrau statt Schwarz, Pflaume als Hausfarbe für Überschriften, dunkle Sektionen, den Karriere-Bereich und die Fußzeile, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Sekundärtext dunkler als üblich (9 : 1), weil viele Leser älter sind. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe. Kein Klinikblau, kein Mint, keine Verläufe.",
    "beispiel": [
     "#FAF7F2 Grund",
     "#1F1B16 Text (16 : 1)",
     "#5B2A4A Pflaume: Marke, Überschriften, Karriere-Bereich, Fußzeile (Weiß darauf 11 : 1)",
     "#FFC845 Signal Sonnengelb: Anrufen, Anfragen, Bewerben (Text #1F1B16, 11 : 1; auf hellem Grund mit 2 px Rand #1F1B16)",
     "#FFF1CC Hinweisfläche: Kosten, Erreichbarkeit",
     "#4A443D Sekundärtext (9 : 1)",
     "#D8D0C4 Linien"
    ]
   },
   "animationsstil": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "Bewusst der UI-Stil als Hauptstil: Auf dieser Seite bewegt sich nur, was der Mensch selbst öffnet (Akkordeon, Menü, PLZ-Antwort, Dialog). Dauern auf UI-Maß gekürzt (Spielart „Nur Tempo“ aus dem Steckbrief): öffnen 300 ms mit Ausklang, schließen 200 ms mit Anlauf. Kein eigener animationsstil_ui nötig.",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) beim Öffnen, cubic-bezier(0.7, 0, 0.84, 0) beim Schließen (token-toggle-asymmetrisch)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "150 (Farbe, Hover), 300 (Akkordeon, Menü, PLZ-Antwort, Dialog öffnen), 200 (schließen); Fokusring ohne Übergang",
    "regel": "Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, kein Karussell mit Autoplay. Was sich öffnet, öffnet ruhig und schließt schneller. Kein Weg über 8 px, keine Skalierung. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang.",
    "herkunft": "Kurvenpaar aus token-toggle-asymmetrisch (bau.werte panel: expo.out / expo.in); Dauern nach Leitfaden-Faustregel für UI-Panels (200–350 ms) gekürzt. Referenzen inhaltlich geprüft (WebFetch), CSS nicht gemessen."
   },
   "hero_beschreibung": "Echtes Foto aus dem Team (Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen, mit Einwilligung), daneben ein Satz in einfacher Sprache („Wir pflegen Sie zu Hause – in [Ort], [Ort] und Umgebung.“), die Telefonnummer groß als tel:-Link mit Erreichbarkeit und zwei Wegweiser-Knöpfe „Pflege anfragen“ und „Arbeiten bei uns“. Direkt darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl. Kein Video, keine Stockfotos von Händen.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "mehrschritt-anfrage": "plz",
       "formular-fehlerzusammenfassung": "kompakt"
      }
     },
     {
      "zweck": "Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)",
      "muster": [
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Was kostet das, was zahlt die Kasse? (Leistungen nach Pflegegrad als Tabelle mit Stand-Datum und Quelle, zwei bis drei Rechenbeispiele in Euro, Hilfe beim Antrag)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "So beginnt die Pflege (Anruf oder Rückruf → Besuch zu Hause → Kostenvoranschlag → feste Bezugspersonen)",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Ihre Ansprechpersonen (Pflegedienstleitung und Büro mit Foto, Name, Aufgabe, Durchwahl, Sprachen; bis etwa fünf Personen Variante statement, darüber raster)",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)",
      "muster": [
       "css-native-karussell",
       "oeffnungszeiten-status"
      ],
      "varianten": {
       "css-native-karussell": "buehne",
       "oeffnungszeiten-status": "termin"
      }
     },
     {
      "zweck": "Stimmen und Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis; Stimmen von Angehörigen nur mit Freigabe)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter)",
      "muster": [
       "stellen-karriere",
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung"
      ],
      "varianten": {
       "stellen-karriere": "liste",
       "mehrschritt-anfrage": "ring",
       "formular-fehlerzusammenfassung": "kompakt"
      }
     },
     {
      "zweck": "Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "standortfinder-liste",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "karte",
       "standortfinder-liste": "kompakt",
       "karte-zwei-klick": "bild",
       "firmendaten-strukturiert": "werkstatt"
      }
     },
     {
      "zweck": "Zwei Wegweiser zum Schluss („Pflege anfragen“ / „Arbeiten bei uns“) mit Telefonnummer – dieselben Wegweiser wie im Hero",
      "muster": [
       "corner-shape-eckenformen"
      ],
      "varianten": {
       "corner-shape-eckenformen": "formen"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)",
      "muster": [
       "barrierefreiheit-seite",
       "zoom-und-textabstand-robust",
       "kontrastmodus-forced-colors"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [],
    "cursor": [],
    "mikro": [
     "corner-shape-eckenformen",
     "checkbox-radio-animiert",
     "einblenden-starting-style",
     "druck-feedback"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "button-zustaende",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "corner-shape-eckenformen"
   ],
   "varianten_demo": {
    "studio-visitenkarte-footer": "praxis",
    "mobile-bottom-navigation": "kontakt",
    "corner-shape-eckenformen": "formen",
    "css-native-karussell": "buehne",
    "pfeil-icon-button": "linie"
   },
   "nicht_verwenden": [
    "cinematic-video-hero / interaktives-3d-hero – lange Ladezeit; die Kernbotschaft ist ein Satz und eine Telefonnummer",
    "hide-on-scroll-header – Telefonnummer und „Pflege anfragen“ müssen immer sichtbar bleiben",
    "marquee-laufband / rotating-words / typewriter-natural – bewegter Text ist für ältere Leser und Screenreader eine Hürde",
    "zahlen-odometer – hochgezählte „1.000 zufriedene Kunden“ wirken unseriös; Zahlen stehen still oder gar nicht",
    "hovercard-interest-invoker – Signatur von praxis; Fachbegriffe hier immer direkt im Text erklären",
    "stapelkarten / bento-grid-interaktiv / flick-karten-stapel – verstecken Inhalte oder verlangen Gesten",
    "frosted-glass-erweitert / progressive-blur – senken den Kontrast unter Kopf und Leisten",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – stören Menschen mit Zittern, Sehschwäche oder Bildschirmlupe",
    "konfetti-erfolg – nach der Anfrage eine ruhige Bestätigung mit Namen und Rückrufzeit",
    "prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Telefon",
    "kostenrechner-konfigurator – Kassenleistungen sind gesetzlich und ändern sich, Eigenanteile hängen vom Einzelfall ab (wann_nicht); Tabelle mit Stand-Datum und Rechenbeispiele statt Rechner",
    "Stockfotos von alten Händen, Rollatoren und Models in Kitteln – echte Menschen aus dem Dienst, mit Einwilligung",
    "„Leichte Sprache“ als Behauptung – nur mit geprüftem Text nach den Regeln der Leichten Sprache; hier gilt einfache Sprache"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto, ein Satz mit Leistung und Orten, Telefonnummer groß mit Erreichbarkeit, zwei Wegweiser „Pflege anfragen“ und „Arbeiten bei uns“, darunter „Kommen wir zu Ihnen?“ mit Postleitzahl.",
    "Größte Schrift aller Rezepte: Fließtext mindestens 1.25rem (20 px), Zeilenhöhe 1.6, höchstens 60ch; Knöpfe 1.25rem und mindestens 56 px hoch; keine Schrift unter 1rem.",
    "Einfache Sprache: Sätze mit höchstens 15 Wörtern, Sie-Form, ein Gedanke pro Satz; Alltagswort zuerst, Fachwort in Klammern („Hilfe beim Waschen (Grundpflege)“); keine Abkürzungen wie SGB oder PG ohne Erklärung.",
    "Zwei Zielgruppen, zwei Wege: Angehörige und Pflegebedürftige zuerst; „Arbeiten bei uns“ als zweite Startseite mit eigenem Punkt in der Navigation und als Wegweiser im Hero, nie zwischen Leistungen versteckt. Navigation mit höchstens fünf Punkten, ohne Untermenüs.",
    "Einzugsgebiet zuerst klären: Postleitzahl mit drei Antworten (Ja; Nein, mit Hinweis auf den Pflegestützpunkt; „Bitte anrufen“), die Orte zusätzlich als Liste im Text (Home Instead führt die Postleitzahlen offen).",
    "Kosten offen: was die Pflegekasse je Pflegegrad zahlt, als Tabelle in Tabellenziffern mit „Stand: Monat Jahr“ und Quelle, dazu zwei bis drei Rechenbeispiele in Euro (wie Home Instead UK mit Wochenbeispielen, Careship mit Budgets je Pflegegrad). Beträge kommen vom Kunden und werden bei jeder Reform geprüft.",
    "Menschen statt Marke: Pflegedienstleitung und Büro mit Foto, Name, Aufgabe und Durchwahl. Feste Bezugspersonen und feste Touren nur versprechen, wenn der Dienst so arbeitet (wie BESSER UMSORGT).",
    "Bewerbung in einer Minute: höchstens fünf kurze Fragen (Beruf, Stunden, Führerschein, Ort, Telefon), kein Anschreiben, kein Lebenslauf, Unterlagen später; danach Rückruf und Kennenlernen oder Probetag. Jede Stelle nennt Stunden, Gehalt oder Tarif, Dienstwagen und Tourenzeiten; Stellen mit (m/w/d).",
    "Gesundheitsdaten nicht abfragen: Anfrage ohne Diagnose, Pflegegrad nur als freiwillige Auswahl; Datenschutzhinweis direkt am Formular; Bewerberdaten getrennt behandeln (vom Kunden prüfen lassen).",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Träger und Vertretungsberechtigten, weitere Pflichtangaben (z. B. zur Zulassung durch die Pflegekassen) vom Kunden prüfen lassen; im Footer „Bei Lebensgefahr: 112“ und die Nummer für Notfälle außerhalb der Bürozeiten, falls es sie gibt. Claude schreibt keine Rechtstexte.",
    "Fotos von Pflegebedürftigen nur mit ausdrücklicher Einwilligung und in würdiger Lage; lieber Team, Dienstwagen, Büro und Tagespflege-Räume.",
    "Bewegung nur, wo etwas auf- oder zugeht (Akkordeon, Menü, PLZ-Antwort, Dialog): öffnen 300 ms, schließen 200 ms. Keine Einblendungen beim Scrollen, nichts bewegt sich von selbst.",
    "Wegweiser-Knöpfe (corner-shape-eckenformen, Variante formen) zeigen mit der Spitze in die Richtung ihres Wegs; wo border-shape fehlt, greift der clip-path-Rückfall. Der Fokusring liegt außen auf einem eigenen Rahmen, damit der Zuschnitt ihn nicht abschneidet; die Beschriftung trägt die Aussage, nicht die Form.",
    "Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe (Nicht-Text-Kontrast 3 : 1), auf Pflaume ohne Rand. Die untere Mobilleiste (mobile-bottom-navigation) zeigt Anrufen, Rückruf, Anfahrt und verdeckt das Consent-Banner nicht.",
    "Die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände ohne Abschneiden (zoom-und-textabstand-robust); Kontrastmodus prüfen (kontrastmodus-forced-colors)."
   ],
   "varianten": [
    {
     "name": "Tagespflege",
     "hinweis": "Startseite mit Tagesablauf, Fahrdienst und Probetag. Kosten getrennt nach Pflegekasse und Eigenanteil (Verpflegung, Investitionskosten); Beträge kommen vom Kunden, mit Stand-Datum.",
     "sektionen": [
      "Ein Tag bei uns (prozess-timeline-wachsende-linie von der Abholung bis zur Heimfahrt)",
      "Räume und Garten (css-native-karussell, Variante buehne)",
      "Probetag vereinbaren (kontakt-anfrage-formular)",
      "Fahrdienst und Einzugsgebiet"
     ],
     "weglassen": [
      "Wobei wir helfen – auf drei Lebenslagen kürzen"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Alltagshilfe und Betreuung (ohne Pflege)",
     "hinweis": "Kostenteil auf Entlastungsbetrag und private Zahlung zuschneiden (wie Careship: Stundenpreis offen, Abrechnung mit der Kasse erklärt); was nicht dazugehört (Wundversorgung, Spritzen), ausdrücklich nennen. Bewerbung auch für Quereinsteiger mit Qualifizierung (wie Home Instead).",
     "sektionen": [
      "Wobei wir helfen (Haushalt, Begleitung, Gesellschaft)",
      "Was kostet eine Stunde? (Stundenpreis, Mindestdauer, Abrechnung)",
      "Kommt immer dieselbe Person? (FAQ)"
     ],
     "weglassen": [
      "Behandlungspflege",
      "Tagespflege"
     ],
     "muster_zusatz": []
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Leicht und robust: kein Video, kaum JavaScript, native details/summary, Formulare ohne Bibliothek. Literata (mit opsz) und Hanken Grotesk als Variable-Dateien, nur Latin. Die Seite muss auf alten Tablets und langsamen Leitungen schnell sein: Hero-Foto AVIF mit fetchpriority=high, feste Seitenverhältnisse. Karte und Bewertungs-Widget erst nach Klick. sofort-navigation-vorladen nur für Leistungs-, Kosten- und Karriereseiten, nie für Formular-Ergebnisse.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen (curl war in dieser Sitzung gesperrt).",
    "Signatur corner-shape-eckenformen ist eine leise Signatur (Form der Wegweiser); kein anderes ungenutztes Muster passt zur Branche. AD prüfen, ob sie reicht.",
    "Hausnotruf (in der Lückenanalyse unter R3 genannt) bewusst nicht abgedeckt.",
    "Das Rezept nennt bewusst keine Leistungsbeträge der Pflegekasse; die Zahlen in den Referenzen (Careship) sind Stand des Abrufs."
   ],
   "stimmung_tags": [
    "warm",
    "ruhig"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     8,
     12,
     16,
     24,
     32,
     40,
     56,
     72,
     96,
     128
    ],
    "sektion": "clamp(64px, 8vw, 120px)",
    "dichte": "luftig",
    "hinweis": "Großzügig für große Schrift: kein Abstand unter 8 px, Knöpfe mindestens 56 px hoch, Absatzabstand 1em. Hält 200 % Zoom und erhöhte Textabstände."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 5vw, 56px)",
    "spalt": "clamp(20px, 3vw, 40px)",
    "max_breite": "1200px",
    "hinweis": "Höchstens zwei Spalten nebeneinander, mobil eine. Text auf 60ch. Navigation mit höchstens fünf Punkten ohne Untermenü."
   },
   "form": {
    "radius_klein": "8px",
    "radius_gross": "12px",
    "pille": false,
    "linie": "2px #1F1B16 um gelbe Knöpfe auf hellem Grund; sonst 1px #D8D0C4",
    "schatten": "keiner",
    "hinweis": "Wegweiser-Knöpfe zeigen mit der Spitze in ihre Richtung (corner-shape-eckenformen, Variante formen), mit clip-path-Rückfall; Fokusring außen auf eigenem Rahmen."
   },
   "bildsprache": {
    "licht": "Warmes Tageslicht, ruhig.",
    "ausschnitt": "Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen; Büro und Räume der Tagespflege.",
    "personen": "Ja: Team mit Namen und Durchwahl; Pflegebedürftige nur mit ausdrücklicher Einwilligung und in würdiger Lage.",
    "formate": [
     "3:2",
     "4:5"
    ],
    "nicht": "Keine Stockfotos von Händen, die Hände halten, keine Rollstuhl-Klischees, kein Klinikblau, kein Video."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Höchstens 15 Wörter je Satz, ein Gedanke pro Satz, Alltagswort zuerst und Fachwort in Klammern.",
    "haltung": "Nah und verlässlich. Angehörige zuerst; Bewerber:innen bekommen eine eigene Tür.",
    "beispiele": [
     "Wir helfen beim Waschen und Anziehen (Grundpflege).",
     "Rufen Sie uns an. Frau [Name] berät Sie."
    ],
    "nicht": "„Pflege mit Herz“, „ganzheitlich“, Abkürzungen wie SGB oder PG ohne Erklärung, hochgezählte Kundenzahlen."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Text zuerst, Foto darunter.",
    "bild": "Echtes Teamfoto, 3:2 oder 4:5.",
    "h1": "clamp(2.5rem, 1.8rem + 3vw, 4rem), Literata 600, oben links.",
    "handlung": "Zwei Wegweiser „Pflege anfragen“ (Sonnengelb mit 2px Rand) und „Arbeiten bei uns“ (Pflaume), mindestens 56 px hoch, untereinander auf dem Telefon.",
    "zusatz": "Telefonnummer 1.5rem 700 als tel:-Link mit Erreichbarkeit; darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/pflege-dienst-naehe/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/pflege-dienst-naehe/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/pflege-dienst-naehe/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/pflege-dienst-naehe/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "cinematic-video-hero",
      "interaktives-3d-hero"
     ],
     "grund": "lange Ladezeit; die Kernbotschaft ist ein Satz und eine Telefonnummer"
    },
    {
     "ids": [
      "hide-on-scroll-header"
     ],
     "grund": "Telefonnummer und „Pflege anfragen“ müssen immer sichtbar bleiben"
    },
    {
     "ids": [
      "marquee-laufband",
      "rotating-words",
      "typewriter-natural"
     ],
     "grund": "bewegter Text ist für ältere Leser und Screenreader eine Hürde"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochgezählte „1.000 zufriedene Kunden“ wirken unseriös; Zahlen stehen still oder gar nicht"
    },
    {
     "ids": [
      "hovercard-interest-invoker"
     ],
     "grund": "Signatur von praxis; Fachbegriffe hier immer direkt im Text erklären"
    },
    {
     "ids": [
      "stapelkarten",
      "bento-grid-interaktiv",
      "flick-karten-stapel"
     ],
     "grund": "verstecken Inhalte oder verlangen Gesten"
    },
    {
     "ids": [
      "frosted-glass-erweitert",
      "progressive-blur"
     ],
     "grund": "senken den Kontrast unter Kopf und Leisten"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "stören Menschen mit Zittern, Sehschwäche oder Bildschirmlupe"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Anfrage eine ruhige Bestätigung mit Namen und Rückrufzeit"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "kein KI-Chat statt Telefon"
    },
    {
     "ids": [
      "kostenrechner-konfigurator"
     ],
     "grund": "Kassenleistungen sind gesetzlich und ändern sich, Eigenanteile hängen vom Einzelfall ab (wann_nicht); Tabelle mit Stand-Datum und Rechenbeispiele statt Rechner"
    },
    {
     "ids": [],
     "grund": "Stockfotos von alten Händen, Rollatoren und Models in Kitteln – echte Menschen aus dem Dienst, mit Einwilligung"
    },
    {
     "ids": [],
     "grund": "„Leichte Sprache“ als Behauptung – nur mit geprüftem Text nach den Regeln der Leichten Sprache; hier gilt einfache Sprache"
    }
   ],
   "alle_muster": [
    {
     "id": "corner-shape-eckenformen",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/meta.json",
     "variante": "formen",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=formen"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)",
       "variante": "plz",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz"
      },
      {
       "rolle": "Sektion: Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter)",
       "variante": "ring",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=ring"
      }
     ]
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: Was kostet das, was zahlt die Kasse? (Leistungen nach Pflegegrad als Tabelle mit Stand-Datum und Quelle, zwei bis drei Rechenbeispiele in Euro, Hilfe beim Antrag)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So beginnt die Pflege (Anruf oder Rückruf → Besuch zu Hause → Kostenvoranschlag → feste Bezugspersonen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Ihre Ansprechpersonen (Pflegedienstleitung und Büro mit Foto, Name, Aufgabe, Durchwahl, Sprachen; bis etwa fünf Personen Variante statement, darüber raster)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)",
       "variante": "termin",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
      },
      {
       "rolle": "Sektion: Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
       "variante": "karte",
       "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
      }
     ]
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Stimmen und Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis; Stimmen von Angehörigen nur mit Freigabe)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
     "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": "standortfinder-liste",
     "rolle": "Sektion: Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "werkstatt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "zoom-und-textabstand-robust",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/meta.json"
    },
    {
     "id": "kontrastmodus-forced-colors",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "kontakt",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "druck-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "token-toggle-asymmetrisch",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "musik-kuenstler-buehne",
   "name": "Musik und Kunst: Ära und Bühne",
   "branche": "Band / Musiker:in / DJ / Label / Chor und Ensemble / bildende Künstler:in mit Ausstellungen",
   "stimmung": [
    "laut",
    "experimentell",
    "eigenständig",
    "direkt"
   ],
   "kurz": "Jedes Release ist eine Ära mit eigener Farbe: Ein einziges Token aus dem Cover färbt Signal, Effekt und den Namen, der Rest ist Tinte und Papier. Zuerst kommen Hören und Tickets, dann Videos, Bio und ein Pressebereich, aus dem Veranstalter und Presse alles ohne Nachfrage holen. Bewegung ist Takt statt Kurve: Das Cover baut sich in Pixelstufen auf, Seiten schließen als Verschluss, der Hero-Clip läuft als Zeichenraster. Genau ein experimenteller Effekt pro Ansicht, immer mit Pause-Knopf und Standbild. Abgrenzung: kreativstudio-buehne verkauft Leistungen an Auftraggeber (Leistungen, Cases, Anfrage) und bleibt bei einer weichen Expo-Kurve; kultur-programm-haltung ist ein Haus mit vielen Terminen an einem Ort, Spartenfarben und „Besuch planen“. Hier steht eine Künstlerin, eine Band oder ein Label im Mittelpunkt, das an vielen Orten spielt, Releases veröffentlicht und mit jeder Ära anders aussieht.",
   "referenzen": [
    {
     "seite": "Tocotronic (Band, Hamburg/Berlin)",
     "url": "https://www.tocotronic.de/dates/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.tocotronic.de/dates/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Navigation „Zum Start“, „Aktuelle Releases“, „Live“, „Video“, „Posts“, „Shop“, „Newsletter“. Termine nach Tour bzw. Reihe gruppiert (Tour, Lesung & Konzert, Podcast live), je Zeile Datum TT.MM.JJJJ, Stadt mit Länderkürzel „Hamburg (DE)“ und verlinktem Ort, Status „Ausverkauft“ (nicht verlinkt) oder Link „Tickets“; je Termin „Google Kalender“ und „Download iCal“, aufklappbar mit „+“, lange Listen mit „mehr anzeigen“. Releases mit Streaming-Links je Single, Shop in drei Wege geteilt (Tickets, Downloads über Bandcamp, Merchandise), Newsletter mit Einwilligungstext und Link zum Datenschutz. Kein eigener Pressebereich."
    },
    {
     "seite": "Kraftklub (Band, Chemnitz)",
     "url": "https://www.kraftklub.to/home/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.kraftklub.to/home/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Startseite als Folge Start (Tour mit „Tickets“, aktuelles Album mit „ALBUM“, „Single“, „Tickets“) → Termine → Album (Formate Bundles, Vinyl, CD, Kassette mit Datum und Kaufknopf zum Shop) → Videos (vier Titel, „Mehr auf YouTube“) → Musik (alle Alben) → Shop (vier Artikel, „Zum Shop“). Termine mit „Google Kalender“, „Download iCal“, „Show more details“; ausverkaufte Termine zeigen „Ausverkauft“ und verlinken auf „RESALE“. Tickets laufen über den eigenen Ticketshop (shop.kraftklub.to). Kein Newsletter auf der Startseite."
    },
    {
     "seite": "Ninja Tune (Label, London)",
     "url": "https://ninjatune.net/events",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://ninjatune.net/events und https://ninjatune.net/release/bonobo/fragments",
     "beobachtung": "Live geprüft 02.11.2026 (Seiten per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Events nach Tag gruppiert („2nd Nov“), je Zeile Datum ausgeschrieben, Künstler:in (verlinkt), Ort, Stadt und Land, Link „TICKETS“ zum Ticketanbieter; Filter nach Künstler:in (mit Suchfeld) und nach Stadt. Navigation Search, Artists, Releases, Shop, Events. Release-Seite: Cover-Galerie, „Released 14th January 2022“, Formate nach Physical und Digital mit Katalognummer und Preis, Trackliste als Text mit Preis je Titel, eigener Playlist-Player statt eingebetteter Spotify- oder YouTube-Player, „More by …“ mit „LISTEN“ und „BUY“."
    },
    {
     "seite": "RIAS Kammerchor Berlin (Chor)",
     "url": "https://www.rias-kammerchor.de/en/press/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.rias-kammerchor.de/en/press/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Pressebereich als EPK: Pressemappe je Saison („Press Kit 2025–26“, „Press Kit 2026–27“), Fotosätze nach Anlass (Ensemble in Farbe, in der Philharmonie, an anderen Orten, mit Partnerensemble, Chefdirigent), Biografien kurz und lang, Pressemitteilungen mit Datum, zwei Ansprechpersonen mit Rolle, Telefon und E-Mail für Pressekarten und Verteiler. Fotografen-Credits und Nutzungsrechte stehen nicht sichtbar am Material (nur im Dateinamen) – das macht dieses Rezept anders. Navigation Calendar, Subscriptions, About us, Management, Outreach, Friends, Service, Press."
    },
    {
     "seite": "Alicja Kwade (bildende Künstlerin, Berlin)",
     "url": "https://alicjakwade.com/exhibitions",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://alicjakwade.com/exhibitions",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Navigation Exhibitions, Works, Map, Publications, Press, CV, Contact. Ausstellungen in zwei Teilen „Current Exhibitions“ und „Past Exhibitions (selected)“, je Eintrag Titel, Haus, Stadt, Land und Zeitraum („Waiting Pavillions, Tai Kwun Contemporary, Hong Kong, 2024-2026“). Keine Bildrechte- oder Fotografenangaben sichtbar, keine Galerie-Vertretung genannt."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Keine Katalog-Paarung. Alle drei Schriften stehen in keinem anderen Rezept. Science Gothic (wdth 50–200, Kontrastachse, slnt) gibt den breiten Plakat-Look vieler Musikseiten (Druk Wide, Eurostile) als OFL und unterscheidet sich klar von kreativ (TikTok Sans), fitness (Anybody), verein (Big Shoulders) und kultur (Schibsted Grotesk). Redaction ist eine Antiqua, deren Familie verpixelte Schnitte hat (Redaction 20, Redaction 100): Fließtext bleibt sauber und lesbar, die verpixelten Schnitte tragen nur den Pixel-Moment des Release-Titels und passen zum Dither-Hero. Martian Mono setzt Termine, Status und Labels (Mono-Akzent nach Leitfaden A4). Science Gothic hat keine belegte Produktions-Sichtung (schriften.json); vor dem ersten Kundenprojekt am echten Namen testen.",
    "headline": "science-gothic",
    "text": "redaction",
    "akzent": "martian-mono",
    "groessen": "Name im Hero Science Gothic clamp(3.5rem, 1rem + 11vw, 12rem), wdth 140–200 (je kürzer der Name, desto breiter), wght 800, CTRS 0, Versal, Laufweite -0.02em, Zeilenhöhe 0.86; h2 clamp(2rem, 1.2rem + 3.5vw, 4rem), wdth 120, wght 700, Versal, -0.01em, Zeilenhöhe 0.95. Stadt in der Terminliste Science Gothic 1.25rem, wdth 100, wght 700, Versal. Release- und Werktitel Redaction 400 clamp(1.75rem, 1rem + 2.5vw, 3rem), Werktitel kursiv; im Pixel-Moment einmal Redaction 100 → Redaction 20 → Redaction (3 Stufen à 80 ms). Fließtext (Bio, Presse, Texte) Redaction 1.1875rem/1.6, max. 64ch, nie in den verpixelten Schnitten. Datum, Uhrzeit, Preise und Katalognummern Martian Mono 0.9375rem, wdth 87.5, wght 500, tabular-nums; Status, Format, Credits und Rubriken Martian Mono 0.75rem, Versal, +0.08em; Knöpfe Martian Mono 0.875rem, wght 600, Versal, +0.04em.",
    "techniken": [
     "headline-laufweite-zeilenabstand",
     "mono-labels-versal",
     "tabellenziffern",
     "fluide-typo-clamp-cqi",
     "lesesatz-text-wrap"
    ],
    "alternative_eigenprojekt": "Headline panchang oder tanker, Text zodiak oder erode (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Jede Ära hat eine Farbe. Grund ist Tinte, zum Lesen (Bio, Presse, Shop) Papier. Die Ära-Farbe kommt aus dem Cover des aktuellen Releases und ist der einzige Signalton: Haupthandlung, Echo des Namens, Farbe des Dither- bzw. Marmor-Effekts, Verschluss beim Seitenwechsel. Sie liegt als ein Token (--aera) im :root; mit dem nächsten Release wird nur dieses Token getauscht, kein Redesign. Bedingung: als Fläche mit Papier-Schrift mindestens 4,5 : 1. Auf Tinte nie als Textfarbe, nur als Fläche mit 2 px Papier-Kante bzw. Papier-Versatz. Kein Verlauf, kein Pastell-Lila, Pink oder Cyan als Standard (Leitfaden C2, C10). Ticketstatus immer als Wort, nie nur als Farbe.",
    "beispiel": [
     "#111113 Tinte: Grund für Hero, Termine, Videos, Fußzeile",
     "#EEEBE3 Papier: Text auf Tinte (15,8 : 1), Grund für Bio, Presse, Shop",
     "#2D3BFF Ära-Farbe, Beispiel Ultramarin: Fläche mit Papier-Schrift 5,5 : 1; auf Tinte nur mit Papier-Kante (allein 2,9 : 1)",
     "#C2361F Ära-Farbe, Beispiel für das nächste Release (Zinnober): Fläche mit Papier-Schrift 4,6 : 1",
     "#9A9893 Meta auf Tinte (6,5 : 1): Ort, Support, Format",
     "#5C5A55 Meta auf Papier (5,8 : 1)",
     "#FF6B5E Abgesagt und Fehler auf Tinte (6,8 : 1), immer mit Wort"
    ]
   },
   "animationsstil": "token-brutal-hart",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "token-brutal-hart in den Spielarten Pixel-Render, Verschluss und harter Schnitt; der Stil nennt Musik ausdrücklich und ist an basement (Verschluss in 32 Stufen) und Jean Dawson (Schreibmaschine in Stufen) beobachtet. Abgrenzung zu fitness-studio-rhythmus, das denselben Stil nur mit Breiten-Stufen und Bildwechseln nutzt: Hier baut sich das Cover in Pixelstufen auf (48 → 1 px), der Seitenwechsel schließt als Verschluss in Spalten, der Hero-Clip schneidet hart. Terminal-Tippen höchstens für Credits oder Katalognummern, nie für Termine, Preise oder Ticketstatus. Menü, Player-Platzhalter, Filter, Newsletter, Kaufbox und Warenkorb laufen auf animationsstil_ui token-toggle-asymmetrisch, weil der Stil laut wann_nicht nicht zu Verträgen und Formularen passt; fitness nimmt dafür token-tech-praezise.",
   "bewegung": {
    "easing": "linear bzw. steps(1, end), steps(6, jump-none) und steps(32, end) (token-brutal-hart: Takt statt Kurve)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich geprüft (siehe offen); Takt und Dauern aus dem Animationsstil (dort beobachtet: basement Verschluss 1,4 s in 32 Stufen, Jean Dawson Schreibmaschine 2 s in 30 Stufen)",
    "dauer_ms": "0 (harter Schnitt, Bildwechsel im Clip, Hover), 80 je Stufe (Cover-Pixelaufbau 6 Stufen = 480, Verschluss beim Seitenwechsel 6 Stufen = 480), 240 (Release-Titel in 3 Stufen); UI nach token-toggle-asymmetrisch: Öffnen 250–300 (Menü, Player-Platzhalter, Warenkorb, Filter), Schließen etwa 65 % davon (170–200)",
    "regel": "Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, öffnet mit dem UI-Stil und schließt schneller. Nichts federt, nichts gleitet nach. Termine, Preise und Ticketstatus stehen sofort, ohne Einblendung. Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1), harte Schnitte im Clip nicht zwischen Schwarz und Weiß. Alles, was länger als 5 s läuft (Dither-Clip, Marmor), hat einen sichtbaren Pause-Knopf. Bei prefers-reduced-motion: Standbilder statt Clip und Shader, alle Stufen sofort im Endzustand, Seitenwechsel ohne Verschluss.",
    "herkunft": "Werte aus token-brutal-hart (bau.werte css_token: --dur-step 80ms, --ease-steps steps(6, jump-none), --ease-shutter steps(32, end), --raster 8px; pixel: Rasterstufen 48/32/20/12/6/1 px, Takt 80 ms) und token-toggle-asymmetrisch (Kurvenpaar expo.out / expo.in, als UI-Stil nach Leitfaden-Faustregel gekürzt); Referenzen inhaltlich geprüft (WebFetch), CSS nicht gemessen."
   },
   "hero_beschreibung": "Die aktuelle Ära auf einen Blick: der Name des Acts in Science Gothic, breit und versal, mit Echo in Ära-Farbe und Papier (echo-stacked-type, nur dieses eine Wort). Daneben bzw. darunter das aktuelle Cover als echtes Bild (unverzerrt, LCP) mit „Anhören“ als Haupthandlung und darunter die nächsten drei Termine als Zeilen mit Ticketlink. Hintergrund ist ein eigener kurzer Clip (Musikvideo, Visualizer, Live-Mitschnitt), der stumm durch den Zeichen- bzw. Dither-Pass läuft (ascii-dither-pixel-stil, Variante video); unter dem Zeiger erscheint das Original, auf Touch ruhige Kacheln. Pause-Knopf, Standbild bei reduzierter Bewegung, ohne WebGL und auf schwachen Geräten. Name, Cover und Termine stehen auf eigenen Tinte-Flächen, nie direkt auf dem Effekt. hero_variante fluessig-marmor-hintergrund (Variante tinte, Ära-Farbe als Tinte in Wasser) nur, wenn es keinen eigenen Clip gibt. Nie beide Effekte zugleich, nie Stock- oder KI-Material, das echt wirken soll.",
   "muster": {
    "seitenuebergang": [
     "spalten-shutter-wipe"
    ],
    "preloader": [],
    "navigation": [
     "menue-choreografie-wipe-clip",
     "sound-umschalter"
    ],
    "hero": [
     "ascii-dither-pixel-stil",
     "echo-stacked-type"
    ],
    "hero_variante": [
     "fluessig-marmor-hintergrund"
    ],
    "sektionen": [
     {
      "zweck": "Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)",
      "muster": [
       "tourdaten-liste",
       "facettenfilter-ergebnisliste"
      ],
      "varianten": {
       "facettenfilter-ergebnisliste": "leiste",
       "tourdaten-liste": "tour"
      }
     },
     {
      "zweck": "Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick)",
      "muster": [
       "player-einbettung-zwei-klick"
      ]
     },
     {
      "zweck": "Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite)",
      "muster": [
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "produktreihe"
      }
     },
     {
      "zweck": "Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)",
      "muster": [
       "player-einbettung-zwei-klick",
       "video-vorschau-hover-viewport",
       "eigener-videoplayer"
      ],
      "varianten": {
       "eigener-videoplayer": "ambilight"
      }
     },
     {
      "zweck": "Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument)",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen",
      "muster": [
       "galerie-shared-element-vollbild",
       "tabs-pfeiltasten-focusgroup",
       "kopieren-feedback",
       "testimonials-neu-gedacht"
      ],
      "varianten": {
       "galerie-shared-element-vollbild": "basis",
       "tabs-pfeiltasten-focusgroup": "auto",
       "testimonials-neu-gedacht": "liste"
      }
     },
     {
      "zweck": "Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in)",
      "muster": [
       "footer-newsletter-mit-persoenlichkeit"
      ],
      "varianten": {
       "footer-newsletter-mit-persoenlichkeit": "basis"
      }
     },
     {
      "zweck": "Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)",
      "muster": [
       "produkt-kaufbox-varianten",
       "warenkorb-drawer"
      ],
      "varianten": {
       "produkt-kaufbox-varianten": "kompakt",
       "warenkorb-drawer": "drawer"
      }
     },
     {
      "zweck": "Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist)",
      "muster": [
       "kontakt-anfrage-formular",
       "kopieren-feedback"
      ]
     },
     {
      "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "widerruf-und-kuendigung-schaltflaeche": "richtig",
       "barrierefreiheit-seite": "bfsg"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [
     "echo-stacked-type"
    ],
    "hover": [],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "kopieren-feedback"
    ],
    "material": [
     "fluessig-marmor-hintergrund"
    ],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild",
     "video-vorschau-hover-viewport"
    ],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "tiefen-taste-3d",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "ascii-dither-pixel-stil": "video",
     "fluessig-marmor-hintergrund": "tinte"
    }
   },
   "signatur": [
    "ascii-dither-pixel-stil",
    "echo-stacked-type"
   ],
   "optional": [
    "karussell-karten-verformen",
    "generatives-markenzeichen"
   ],
   "varianten_demo": {
    "ascii-dither-pixel-stil": "video",
    "fluessig-marmor-hintergrund": "tinte",
    "tiefen-taste-3d": "versatz-brutal",
    "kontur-button-zeichnen": "laufend",
    "karussell-karten-verformen": "welle",
    "generatives-markenzeichen": "team",
    "css-native-karussell": "produktreihe",
    "galerie-shared-element-vollbild": "basis",
    "footer-newsletter-mit-persoenlichkeit": "basis"
   },
   "nicht_verwenden": [
    "cursor-follower-lerp / blend-difference-cursor – Award-Geste ohne Nutzen; im Dither-Hero ist der Zeiger schon das Werkzeug, das das Original freilegt",
    "prozent-zaehler / kinetische-typo-intro – Fans wollen Player und Termine, keine Ladeshow; der Name steht ab dem ersten Bild",
    "mesh-gradient-shader – Aurora-Klischee (C2); Farbe kommt aus dem Cover der Ära",
    "atmosphaere-partikel – Hotel-Stimmung (Staub, Glut); neben Dither-Clip oder Marmor wäre es der zweite bewegte Effekt in einer Ansicht (C4, C10)",
    "kinetic-3d-shader-type – zweite Wort-Inszenierung neben dem Echo-Namen und eine weitere WebGL-Szene; der Name bleibt echter Text",
    "webgl-bildverzerrung / velocity-skew-verzerrung – verzerren Cover, Pressefotos und Werke, die unverfälscht bleiben müssen",
    "glas-button / verlaufs-rahmen – Glas und Lichtkante neben Dither oder Marmor sind zwei Material-Effekte; die harte Taste reicht",
    "smooth-scroll-lenis – Terminlisten, Player-iframes und Shop vertragen keine Scroll-Übernahme",
    "marquee-laufband – „Neues Album“-Bänder sind Template-Deko; Termine und Titel nie in bewegten Bändern",
    "zahlen-odometer – hochgezählte Streams, Follower oder Countdowns sind Druck statt Information; echte Zahlen nur mit Quelle und Stand",
    "Termin-Widgets von Bandsintown oder Songkick als iframe – laden Dritte vor der Einwilligung und brechen die Gestaltung; Daten importieren und selbst als Liste setzen",
    "Spotify-, YouTube-, Bandcamp- oder SoundCloud-Player ohne Klick – übertragen Daten vor der Einwilligung (§ 25 TDDDG)",
    "Autoplay mit Ton – nie; Ton startet nur nach Klick (WCAG 1.4.2)"
   ],
   "regeln": [
    "Erster Bildschirm: Name des Acts, aktuelles Cover mit „Anhören“ und die nächsten drei Termine mit Ticketlink. Der Hero-Clip ist eigenes Material (Musikvideo, Visualizer, Live-Mitschnitt), nie Stock.",
    "Ära-Token: Eine CSS-Variable --aera, aus dem Cover gewählt, färbt Haupthandlung, Echo, Effekt und Verschluss. Sie hält als Fläche mit Papier-Schrift mindestens 4,5 : 1. Mit dem nächsten Release wird nur dieses Token getauscht.",
    "Experimentelle Effekte nach Leitfaden C10: genau ein bewegter Hintergrund pro Ansicht (ascii-dither-pixel-stil mit eigenem Clip oder fluessig-marmor-hintergrund ohne Clip), nie hinter Fließtext, nie neben einem zweiten Material-Effekt. Farben nur aus Tinte, Papier und Ära-Farbe. Sichtbarer Pause-Knopf „Bewegung anhalten“ (läuft länger als 5 s); Standbild als AVIF bei prefers-reduced-motion, ohne WebGL, auf schwachen Geräten (≤ 4 Kerne, Datensparen) und solange der Shader lädt.",
    "Dither-Hero: Zellen groß genug, dass nichts flimmert (mobil größer), die Canvas ist aria-hidden, Texte bleiben echtes HTML. Der Clip läuft stumm; Ton nur über sound-umschalter nach Klick, Zustand gemerkt, bei Tab-Wechsel aus. Den Ton-Schalter nur bauen, wenn der Clip wirklich Ton hat.",
    "echo-stacked-type nur auf dem Namen (bis etwa 12 Zeichen; bei längeren Namen auf dem kürzesten Wort), höchstens drei Kopien in Ära-Farbe, Papier und Meta-Grau, Telefon zwei; Platz für die volle Spreizung reservieren, Kopien aria-hidden. Im Footer darf der Name noch einmal als Echo stehen, sonst nirgends.",
    "Termine (tourdaten-liste): jede Zeile Datum in Martian Mono mit Tabellenziffern, Stadt und Land, Ort, Support, Status als Wort. „Ausverkauft“ nie nur grau oder durchgestrichen; Resale- oder Wartelisten-Link nur, wenn der Veranstalter ihn anbietet. „Verlegt“ zeigt altes und neues Datum. Ticketlink als normaler Link mit Anbietername, öffnet beim Anbieter. Daten aus einer Quelle (JSON oder Import), dazu .ics je Termin und strukturierte Daten nur für sichtbare Termine.",
    "Hören: Plattform-Links (Spotify, Apple Music, Bandcamp, YouTube Music, Deezer …) stehen immer als normale Links da; ein eingebetteter Player lädt erst nach Klick (player-einbettung-zwei-klick) mit Anbietername und Hinweis auf den Datenfluss. Trackliste als Text.",
    "Cover und Werke unverfälscht: Der Pixelaufbau (6 Stufen à 80 ms) liegt als Ebene über dem schon gemalten Bild und läuft einmal beim Eintritt; kein Dither, keine Verformung auf Cover, Pressefotos und Werkabbildungen.",
    "Buttons: tiefen-taste-3d (Variante versatz-brutal) nur für die eine Haupthandlung einer Ansicht („Anhören“, „Tickets“ im Hero, „In den Warenkorb“); in Terminlisten, Downloads und Nebenaktionen kontur-button-zeichnen (Variante laufend, Striche laufen nur bei Hover und Fokus). Ticketlinks in Zeilen mindestens 44 px hoch.",
    "Pressebereich ohne Login: Fotos mit Fotograf:in, Jahr, Auflösung und Nutzungsregel direkt am Bild („frei für redaktionelle Berichte über [Act] mit Nennung“), Bio in drei Längen mit Wortzahl und Stand zum Kopieren (kopieren-feedback), Rider und Stageplot mit Datum. Pressestimmen nur echt, mit Medium und Datum.",
    "Seitenwechsel: spalten-shutter-wipe in Ära-Farbe, 6 Stufen à 80 ms, nur zwischen Hauptseiten, nicht im Shop, nicht nach Formularen, nicht bei reduzierter Bewegung. Menü als Overlay mit menue-choreografie-wipe-clip über animationsstil_ui (öffnen 300 ms, schließen 200 ms).",
    "karussell-karten-verformen nur als Zusatz (optional, Priorität F) in der Diskografie auf Desktop mit Feinzeiger, Variante welle; die Grundlage bleibt css-native-karussell. generatives-markenzeichen (optional, Variante team) nur für Teilen-Bilder je Tourstadt, Saat ist die Stadt; die Termin-Liste bleibt Text.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG (Band als GbR mit allen Vertretungsberechtigten, Chor als e. V. mit Vereinsregister). Eigener Ticketverkauf: Gesamtpreis inkl. aller Gebühren; für termingebundene Konzerttickets gilt meist kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB, BGH 13.07.2022, VIII ZR 317/21), das klar sagen. Eigener Merch-Shop: Preise inkl. MwSt., Versand, Lieferzeit, Widerrufsbelehrung, Widerrufs-Button (§ 356a BGB), Herstellerangaben nach GPSR; BFSG prüfen. Eigene Songs auf der eigenen Seite: Als GEMA-Mitglied Lizenz für Eigenpräsentation (kostenlos, ein Jahr, ohne Werbung Dritter, Rechtehinweis sichtbar) oder Tarif. Eingebettete Player und Videos erst nach Klick (§ 25 TDDDG). Newsletter mit Double-Opt-in. Fotos von Publikum nur mit Einwilligung, Werkabbildungen mit Bildrecht (ggf. VG Bild-Kunst), KI-erzeugte Bilder oder Visuals, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO) – vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Chor, Ensemble, Orchester (zeitgenössisches Profil)",
     "hinweis": "Für Chöre, Vokal- und Instrumentalensembles mit eigenem, zeitgenössischem oder experimentellem Profil (Neue Musik, Projektchöre). Klassische Kirchen- und Laienchöre passen besser zu verein-nonprofit-wirkung oder kultur-programm-haltung. Die Ära-Farbe ist die Farbe der Saison oder des Projekts. Der Dither-Hero bleibt Signatur, aber ruhiger: größere Zellen, nur mit eigenem Konzert- oder Probenclip, sonst Marmor in Tinte. Konzerte als tourdaten-liste mit Programm (Werke, Leitung, Solist:innen); bei vielen Terminen an wenigen Orten programm-kalender, Variante programm. Pressebereich nach dem Vorbild RIAS Kammerchor (Pressemappe je Saison, Fotos nach Anlass, Bio kurz und lang, Ansprechpersonen), aber mit Fotografen-Credit und Nutzungsregel sichtbar am Bild. Mitsingen bzw. Vorsingen als mehrschritt-anfrage (Variante leiste: Stimmlage, Erfahrung, Kontakt). Förderer als logo-wand-social-proof, Variante raster, nur mit Erlaubnis. Recht: e. V. mit Vereinsregister und Vertretungsberechtigten im Impressum; Kinder- und Jugendchöre: Fotos nur mit Einwilligung der Eltern; Abos oder Mitgliedschaften online mit Kündigungs-Button – vom Kunden prüfen lassen.",
     "sektionen": [
      "Konzerte (Datum, Ort, Programm, Leitung, Tickets)",
      "Aktuelles Projekt (Werke, Hörbeispiele per 2-Klick)",
      "Ensemble (Stimmgruppen bzw. Instrumente)",
      "Mitsingen / Vorsingen",
      "Aufnahmen (Diskografie)",
      "Presse (EPK je Saison)",
      "Förderer und Partner",
      "Newsletter",
      "Kontakt und Probenort (Karte per 2-Klick)"
     ],
     "weglassen": [
      "Merch",
      "Videos als eigene Sektion (Mitschnitte beim Projekt)"
     ],
     "muster_zusatz": [
      "programm-kalender",
      "mehrschritt-anfrage",
      "logo-wand-social-proof",
      "karte-zwei-klick"
     ]
    },
    {
     "name": "DJ, Producer, Label",
     "hinweis": "Label-Seiten nach dem Vorbild Ninja Tune: Events mit Filter nach Künstler:in und Stadt, Release-Seite mit Formaten, Katalognummer, Preis und Trackliste als Text. Roster als listen-hover-bildvorschau (ab fünf Acts; auf Touch feste Daumenbilder). Mixes über player-einbettung-zwei-klick mit Tracklist und Zeitmarken als Text. Ohne eigenen Clip darf webgl-fluid-cursor (Variante verzerrung über dem Namen, auf Touch autonom, mit Pause-Knopf und Standbild) statt fluessig-marmor-hintergrund die Hero-Fassung sein; nie beide und nie zusammen mit dem Dither-Clip. facettenfilter-ergebnisliste im Katalog erst ab etwa 15 Releases. Recht: Label mit Shop als Händler (PAngV, GPSR-Herstellerangaben je Tonträger, Widerruf und Widerrufs-Button); Mixes mit fremden Titeln nicht als eigene Datei hosten, nur über Plattformen einbinden, die das lizenzieren – vom Kunden prüfen lassen.",
     "sektionen": [
      "Gigs (Label: Filter nach Künstler:in und Stadt)",
      "Mixes und Releases (Player nach Klick, Tracklist mit Zeitmarken)",
      "Roster (Label)",
      "Katalog mit Katalognummer und Format (Label)",
      "Shop (Vinyl, Digital)",
      "Booking und Presse (EPK)"
     ],
     "weglassen": [
      "Besetzung als Band (bei Solo-Acts ein Statement-Satz)",
      "Videos als eigene Sektion, wenn es nur Mixes gibt"
     ],
     "muster_zusatz": [
      "listen-hover-bildvorschau",
      "webgl-fluid-cursor"
     ]
    },
    {
     "name": "Bildende Künstler:in",
     "hinweis": "Vorbild Alicja Kwade: Navigation Ausstellungen, Werke, Publikationen, Presse, CV, Kontakt; Ausstellungen getrennt nach aktuell bzw. kommend und Auswahl vergangen, je Eintrag Titel, Haus, Stadt und Zeitraum (tourdaten-liste in der Fassung für Ausstellungen). Werke immer unverfälscht: kein Dither, kein Echo, keine Verformung auf Werkabbildungen; ascii-dither-pixel-stil nur auf einem eigenen Atelier- oder Aufbau-Clip im Hero. Werkschau als tiefenflug-galerie höchstens einmal pro Seite (Variante achse für Hochformate, flug für Ausstellungsansichten) mit Umschalter auf ein ruhiges Raster. Werkverzeichnis als projektindex-hover-vorschau (Titel, Jahr, Technik; auf Touch feste Daumenbilder). Recht: Werkabbildungen mit Fotograf:in und Bildrecht; bei Mitgliedschaft in der VG Bild-Kunst deren Copyright-Vermerk; Preise nur, wenn wirklich direkt verkauft wird; Galerie-Vertretung nur mit Absprache nennen – vom Kunden prüfen lassen.",
     "sektionen": [
      "Aktuell (laufende und kommende Ausstellungen)",
      "Werke (Werkgruppen; Titel, Jahr, Technik, Maße, Foto-Credit)",
      "Werkschau als ein Kapitel",
      "Ausstellungen (Auswahl vergangen, Einzel und Gruppe)",
      "Texte und Publikationen",
      "CV",
      "Presse (Bilder mit Credit und Nutzungsregel)",
      "Galerien und Kontakt"
     ],
     "weglassen": [
      "Release, Player und Diskografie",
      "Merch (außer Editionen mit eigenem Shop)",
      "Videos (nur bei Videoarbeiten)"
     ],
     "muster_zusatz": [
      "tiefenflug-galerie",
      "projektindex-hover-vorschau"
     ]
    }
   ],
   "template_tauglich": false,
   "template_variante": "Template-Variante (dann template-tauglich, Aufwand mittel): ohne WebGL; Hero mit Cover, Echo-Namen und einem vorab gerenderten Dither-Standbild des eigenen Clips (ascii-dither-pixel-stil als Bild, Original beim Antippen bzw. Hover per CSS-Überblendung); ohne fluessig-marmor-hintergrund, sound-umschalter, spalten-shutter-wipe und die optionalen Muster. Bleiben: Schriften (alle template_ok), Ära-Token, Terminliste, Player per 2-Klick, Pressebereich, harte Taste, Pixelaufbau des Covers in CSS-Stufen.",
   "aufwand": "hoch",
   "leistung": "Der Hero wartet nie auf WebGL: Cover als img mit fetchpriority=high (LCP), Dither-Standbild als AVIF darunter; three.js und Shader erst nach dem ersten Bild (requestIdleCallback) und nur mit genug Leistung, Renderfaktor 0,5–0,75, Deckel 30 fps, Rendern nur, solange sichtbar und nicht pausiert. Clip als MP4/WebM unter 3 MB, stumm, preload=metadata. fluessig-marmor-hintergrund in rohem WebGL 1 ohne three.js. Player-iframes erst nach Klick mit vorab reservierter Höhe (CLS). Termine als HTML aus einer JSON-Datei, kein Widget. Schriften: Science Gothic als Variable-Datei nur mit wdth und wght, Subset Latin; Redaction regular und italic; Redaction 20 und 100 nur, wenn der Pixel-Moment gebaut wird, gesubsettet auf die Zeichen des Titels (OFL erlaubt Subsetting); Martian Mono als Variable-Datei.",
   "offen": [
    "Fehlende Bausteine tourdaten-liste und player-einbettung-zwei-klick (siehe musik-kuenstler-buehne-fehlend.md); bis zu ihren Demos stehen sie als unbekannte ids im Rezept.",
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen. Keine der fünf Referenzen ist visuell experimentell; die experimentellen Muster stützen sich auf ihre eigenen Belege (gesehen_bei). jeandawson.com (Beleg von token-brutal-hart) war heute nur über Shop-Unterseiten auffindbar, bilderbuch-musik.at hat Platzhalter und tote Links und wurde deshalb nicht aufgenommen. AD prüfen, ob eine visuell laute Musikseite ergänzt werden soll.",
    "Schriftdateien fehlen unter assets/fonts: Science Gothic, Redaction (dazu Redaction 20 und Redaction 100 für den Pixel-Moment), Martian Mono.",
    "Science Gothic hat keine belegte Produktions-Sichtung (schriften.json); Kleinbuchstaben und Umlaute in wdth 200 vor dem ersten Einsatz prüfen.",
    "Leitfaden von Hand ergänzen: A4 (Mono-Rezepte: musik mit Martian Mono), Abschnitt 9 (Tabelle) und Abschnitt 10 (token-brutal-hart nun in zwei Rezepten).",
    "Kein eigenes Muster für einen Pre-Save- bzw. Smartlink-Hub vor dem Release; die Plattform-Links stehen im Platzhalter von player-einbettung-zwei-klick.",
    "Ticket-Widerruf und GEMA-Eigenpräsentation aus Sekundärquellen (Kanzleiartikel zum BGH-Urteil, GEMA-Merkblatt); das Urteil selbst und die AGB-EP der GEMA nicht gelesen."
   ],
   "stimmung_tags": [
    "laut",
    "experimentell"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     80,
     128,
     192
    ],
    "sektion": "clamp(64px, 10vw, 160px)",
    "dichte": "mittel",
    "hinweis": "Laute Sprünge zwischen Kapiteln, Terminliste dicht (Zeilen mindestens 44 px, 8 px Innenabstand). Platz für die volle Spreizung des Echos reservieren."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(12px, 2.4vw, 32px)",
    "spalt": "clamp(12px, 1.6vw, 24px)",
    "max_breite": "none",
    "hinweis": "Volle Breite. Termine als Zeilen über alle 12 Spalten (Datum, Stadt, Ort, Status, Ticket), Diskografie 4 Spalten, Pressefotos 3."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "2px #EEEBE3 als Papier-Kante um Ära-Flächen auf Tinte",
    "schatten": "nur der harte Papier-Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal)",
    "hinweis": "Eckig wie Plattenhülle und Plakat. Nebenaktionen als laufende Kontur (kontur-button-zeichnen, Variante laufend). Farbe nur aus Tinte, Papier und --aera."
   },
   "bildsprache": {
    "licht": "Wie vom Act geliefert; Live-Fotos mit Bühnenlicht, Pressefotos unverändert.",
    "ausschnitt": "Cover quadratisch und unverzerrt, Live-Bilder angeschnitten, Pressefotos in voller Auflösung zum Download.",
    "personen": "Ja: der Act; Publikum nur unscharf oder als Menge.",
    "formate": [
     "1:1",
     "16:9",
     "4:5"
    ],
    "nicht": "Kein Dither oder Pixel auf Cover, Pressefotos und Werkabbildungen; keine Stock- oder KI-Konzertbilder; keine Pastell-Verläufe."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Knapp, Fakten zuerst: Datum, Stadt, Status als Wort. Bio in drei Längen mit Wortzahl.",
    "haltung": "Eigenständig und direkt. Ein Chor, ein Ensemble oder eine Künstlerin mit Galerie-Publikum siezt, dann durchgehend.",
    "beispiele": [
     "Neues Album am 14. März. Jetzt anhören.",
     "[Stadt], [Ort]: ausverkauft. Warteliste beim Veranstalter."
    ],
    "nicht": "„Die Band, auf die alle gewartet haben“, Hype-Wörter, „Stay tuned!“, Status nur als Farbe oder durchgestrichen."
   },
   "hero_aufbau": {
    "raster": "Tinte als Grund. Name oben über die volle Breite, darunter 12 Spalten: Cover über Spalte 1 bis 5, Termine über 6 bis 12; Name, Cover und Termine auf eigenen Tinte-Flächen über dem Clip.",
    "bild": "Cover 1:1 als echtes Bild (LCP); Hintergrund ein eigener Clip im Zeichen- bzw. Dither-Pass (ascii-dither-pixel-stil, Variante video), Standbild bei reduzierter Bewegung.",
    "h1": "clamp(3.5rem, 1rem + 11vw, 12rem), Science Gothic 800 Versal, wdth 140–200, oben randbündig, mit Echo (echo-stacked-type).",
    "handlung": "„Anhören“ (versatz-brutal in Ära-Farbe) unter dem Cover, „Tickets“ als laufende Kontur in der Terminliste.",
    "zusatz": "Die nächsten drei Termine in Martian Mono mit Status als Wort; Pause-Knopf „Bewegung anhalten“."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/musik-kuenstler-buehne/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/musik-kuenstler-buehne/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/musik-kuenstler-buehne/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/musik-kuenstler-buehne/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "cursor-follower-lerp",
      "blend-difference-cursor"
     ],
     "grund": "Award-Geste ohne Nutzen; im Dither-Hero ist der Zeiger schon das Werkzeug, das das Original freilegt"
    },
    {
     "ids": [
      "prozent-zaehler",
      "kinetische-typo-intro"
     ],
     "grund": "Fans wollen Player und Termine, keine Ladeshow; der Name steht ab dem ersten Bild"
    },
    {
     "ids": [
      "mesh-gradient-shader"
     ],
     "grund": "Aurora-Klischee (C2); Farbe kommt aus dem Cover der Ära"
    },
    {
     "ids": [
      "atmosphaere-partikel"
     ],
     "grund": "Hotel-Stimmung (Staub, Glut); neben Dither-Clip oder Marmor wäre es der zweite bewegte Effekt in einer Ansicht (C4, C10)"
    },
    {
     "ids": [
      "kinetic-3d-shader-type"
     ],
     "grund": "zweite Wort-Inszenierung neben dem Echo-Namen und eine weitere WebGL-Szene; der Name bleibt echter Text"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "velocity-skew-verzerrung"
     ],
     "grund": "verzerren Cover, Pressefotos und Werke, die unverfälscht bleiben müssen"
    },
    {
     "ids": [
      "glas-button",
      "verlaufs-rahmen"
     ],
     "grund": "Glas und Lichtkante neben Dither oder Marmor sind zwei Material-Effekte; die harte Taste reicht"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Terminlisten, Player-iframes und Shop vertragen keine Scroll-Übernahme"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "„Neues Album“-Bänder sind Template-Deko; Termine und Titel nie in bewegten Bändern"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochgezählte Streams, Follower oder Countdowns sind Druck statt Information; echte Zahlen nur mit Quelle und Stand"
    },
    {
     "ids": [],
     "grund": "Termin-Widgets von Bandsintown oder Songkick als iframe – laden Dritte vor der Einwilligung und brechen die Gestaltung; Daten importieren und selbst als Liste setzen"
    },
    {
     "ids": [],
     "grund": "Spotify-, YouTube-, Bandcamp- oder SoundCloud-Player ohne Klick – übertragen Daten vor der Einwilligung (§ 25 TDDDG)"
    },
    {
     "ids": [],
     "grund": "Autoplay mit Ton – nie; Ton startet nur nach Klick (WCAG 1.4.2)"
    }
   ],
   "alle_muster": [
    {
     "id": "ascii-dither-pixel-stil",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/meta.json",
     "variante": "video",
     "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo?v=video"
    },
    {
     "id": "echo-stacked-type",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/meta.json"
    },
    {
     "id": "fluessig-marmor-hintergrund",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/meta.json",
     "variante": "tinte",
     "demo_url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=tinte"
    },
    {
     "id": "tourdaten-liste",
     "rolle": "Sektion: Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/meta.json",
     "variante": "tour",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo?v=tour"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "player-einbettung-zwei-klick",
     "rolle": "Sektion: Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
    },
    {
     "id": "video-vorschau-hover-viewport",
     "rolle": "Sektion: Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/meta.json"
    },
    {
     "id": "eigener-videoplayer",
     "rolle": "Sektion: Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json",
     "variante": "ambilight",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=ambilight"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Sektion: Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Sektion: Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt"
    },
    {
     "id": "warenkorb-drawer",
     "rolle": "Sektion: Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
     "variante": "drawer",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "spalten-shutter-wipe",
     "rolle": "Seitenwechsel",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/meta.json"
    },
    {
     "id": "menue-choreografie-wipe-clip",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/menue-choreografie-wipe-clip/meta.json"
    },
    {
     "id": "sound-umschalter",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "tiefen-taste-3d",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
     "variante": "versatz-brutal",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=versatz-brutal"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "laufend",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=laufend"
    },
    {
     "id": "token-brutal-hart",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/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": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "karussell-karten-verformen",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/meta.json",
     "variante": "welle",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo?v=welle"
    },
    {
     "id": "generatives-markenzeichen",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/meta.json",
     "variante": "team",
     "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo?v=team"
    }
   ]
  },
  {
   "id": "industrie-b2b-mittelstand",
   "name": "Industrie-Mittelstand: Datenblatt und Fachperson",
   "branche": "Maschinen- und Anlagenbau / Zulieferer und Lohnfertiger / Hidden Champions / technische Dienstleister (B2B)",
   "stimmung": [
    "präzise",
    "sachlich",
    "belastbar",
    "international"
   ],
   "kurz": "Eine Seite, die sich liest wie ein gutes Datenblatt: Jede Angabe hat Einheit, Stand und Quelle, jede Anwendung hat eine Fachperson mit Namen und Durchwahl. Das sichtbare Konstruktionsraster ist die Signatur, die Beschriftung folgt der Normschrift technischer Zeichnungen statt einer Mono. Breite, ruhige Headlines in Strichpunkt Sans, Archivo mit Breitenachse für Text und Tabellen, kühles Blechgrau und Verkehrsblau nur für die Anfrage. Bewegt wird wie an einer Linearachse: nur waagerecht oder senkrecht, harte Masken, nichts glänzt. Anders als saas: keine Dashboards, kein Dunkelmodus, kein Glow, keine Mono-Labels.",
   "referenzen": [
    {
     "seite": "J. Schmalz GmbH (Vakuumtechnik, Glatten; Produktseite eines Flächengreifers)",
     "url": "https://www.schmalz.com/en-us/products/automation-743270/vacuum-grippers-746238/gripping-systems-and-end-of-arm-tooling-eoat-746240/10.01.38.10028",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.schmalz.com/en-us/products/automation-743270/vacuum-grippers-746238/gripping-systems-and-end-of-arm-tooling-eoat-746240/10.01.38.10028",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Produktseite je Artikelnummer (10.01.38.10028) mit Tabellen „Attribute | Value“, getrennt in Übersicht, „Design Data“ mit Maßzeichnung und „Technical Data“ (550 N, 350 l/min, -700 mbar, 75 dB(A)); Datenblatt als PDF je Artikel und Sprache, „Live CAD-Model“ zum Download in mehreren Formaten, Zubehör und Ersatzteile mit eigenen Artikelnummern, Preise erst nach Login, „Find contact person“ und Telefon direkt auf der Produktseite; Land und Sprache getrennt wählbar. Nicht übernehmen: Einheiten mal in Klammern, mal angehängt, Komma und Punkt als Dezimaltrenner gemischt, leere Überschriften „E-Plan Macro“ und „Documentation“."
    },
    {
     "seite": "Herrenknecht AG (Tunnelbohrmaschinen, Schwanau)",
     "url": "https://herrenknecht.com/en",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://herrenknecht.com/en",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text; CSS nicht gemessen): Navigation mit nur fünf Punkten („Products“, „Application“, „Services“, „References“, „Careers“) plus Kontakt und Sprachen DE, EN, ES, 中文, RU; Maschinenkarten mit Bodenart und Durchmesser-Spanne („EPB Shield 1,7–16m“, „Mixshield 4,8–19m“, „Direct Pipe 0,8–1,5m (30–60\")“); Referenzen als Projekte mit Ort und belegter Leistung („Doha Metro: 111 kilometer of new metro tunnels in only 26 months“); Karriere mit vier Einstiegen („School leavers“, „Career Starters“, „Students“, „Professionals“) und eigenem Stellenportal; Newsroom mit Datum."
    },
    {
     "seite": "ifm (Sensorik, Familienunternehmen; Messetermine)",
     "url": "https://www.ifm.com/at/de/shared/unternehmen/messetermine",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.ifm.com/at/de/shared/unternehmen/messetermine",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Messen als echte Tabelle mit Spalten Datum, Veranstaltung, Ort („LogiMAT, 16.03.2027 bis 18.03.2027, Stuttgart - Deutschland“), Monatszeilen als Zwischenköpfe und Sprunglinks je Monat, Jahre 2027/2028 schon gelistet, Ticket per E-Mail, Besuchstermin vereinbar. Nicht übernehmen: keine Halle und kein Stand, kein Kalender-Download."
    },
    {
     "seite": "Festo (Automatisierung, Esslingen; Messen und Veranstaltungen)",
     "url": "https://www.festo.com/de/de/e/ueber-festo/messen-und-veranstaltungen/messen-id_820561/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.festo.com/de/de/e/ueber-festo/messen-und-veranstaltungen/messen-id_820561/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Messe-Einträge mit Messe, Ort und Datum in einer Zeile („HYDROGEN Technology EXPO | Hamburg | 20.10. - 22.10.2026“), bei der SPS „Halle 9, Stand 305“ und „Kostenloses Ticket sichern“. Nicht übernehmen: Halle und Stand nur bei einem Eintrag, kein Kalender, keine Terminanfrage am Stand."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Neue Paarung, beide Schriften template_ok. strichpunkt-sans (René Bieder, Google Fonts seit Mai 2026) steht in keinem anderen Rezept; ihre Breitenachse geht nur nach außen (wdth 100–200), bei wdth 112–118 wirkt sie breit und ruhig wie Typenschilder und Katalogköpfe, ohne laut zu werden. archivo steht damit in bis zu drei Rezepten (verein als Text neben Big Shoulders, das parallel entstandene eventlocation-hochzeit ebenfalls als Text); die Grenze ist erreicht. Tabellenziffern von Archivo im Font geprüft. Bewusst ohne Mono-Akzent, obwohl blueprint-raster-sichtbar Mono-Beschriftungen vorschlägt: Technische Zeichnungen beschriften in schmaler Normschrift (ISO 3098), nicht in Schreibmaschinenschrift; eine Mono würde die Seite in Richtung saas schieben. Abschnittscodes, Achsen und Artikelnummern stehen deshalb in Archivo schmal (wdth 75–87), Versal, mit Tabellenziffern (Leitfaden A4). Unterschied zu saas (Geist + Geist Mono, dunkel), handwerk (Special Gothic schmal + Atkinson) und architektur (eine Familie Hanken): breit statt schmal, eine Text-Grotesk mit Breitenachse für Fließtext und Tabellen, keine Mono.",
    "headline": "strichpunkt-sans",
    "text": "archivo",
    "akzent": "",
    "groessen": "h1 Strichpunkt Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 600, wdth 116, Laufweite -0.03em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wght 600, wdth 110, -0.02em; h3 Archivo 1.25rem wght 600 wdth 100. Fließtext Archivo 1.0625rem (17 px), wght 400, wdth 100, Zeilenhöhe 1.55, max. 68ch. Tabellen (technische Daten, Messen, Downloads) Archivo 0.9375rem, wdth 87, Tabellenziffern, Einheit in eigener Spalte rechtsbündig neben dem Wert. Abschnittscodes und Achsbeschriftung des Rasters („01 · Anwendungen“, „A–D“, „1–12“) Archivo 0.75rem, wdth 75, wght 600, Versal, +0.08em. Artikelnummern Archivo wdth 87, Tabellenziffern, kopierbar. Höchstens zwei Gewichte je Familie (400/600).",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "headline-laufweite-zeilenabstand",
     "tabellenziffern",
     "lesesatz-text-wrap",
     "eine-familie-wenig-gewichte"
    ],
    "alternative_eigenprojekt": "Text switzer (ITF), Headline general-sans in 600 (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Kühles Blechgrau als Grund, Graphit statt Schwarz, Rasterlinien in 13 % Graphit, dunkles Stahlblau für Kopf, Messen und Fußzeile. Genau ein Signal: Verkehrsblau (RAL 5017 als Beispiel; im Projekt die echte Hausfarbe, flach, nie als Verlauf) nur für „Projekt anfragen“, aktive Filter und Fokus. Keine Glanzflächen, kein Dunkelmodus als Gestaltungsidee, Farbe in Fotos kommt aus Maschine, Werkstoff und Halle.",
    "beispiel": [
     "#F3F3F0 Grund (Blechgrau, Datenblattpapier)",
     "#111417 Text Graphit (16,6 : 1)",
     "#4E555B Sekundärtext, Einheiten, Meta (6,8 : 1)",
     "#E4E5E1 Tabellenkopf, Zellfläche bei Hover",
     "rgba(17, 20, 23, .13) Rasterlinien und Plus-Marker",
     "#16202A Stahlblau dunkel: Kopf, Messen-Band, Fußzeile (Weiß darauf 16,5 : 1)",
     "#0E518D Signal Verkehrsblau: Projekt anfragen, aktiver Filter, Fokus (Weiß darauf 8,1 : 1; auf Grund 7,3 : 1)"
    ]
   },
   "animationsstil": "token-swiss-knackig",
   "animationsstil_hinweis": "Kein eigener UI-Stil nötig: token-swiss-knackig schließt UI nicht aus und hat ein eigenes Austrittspaar (power3.in, 70 %). Spielart „Maske“ (clip-path inset) für die H1 und Referenzbilder, „Stufen“ (steps) nie für Zahlen in technischen Tabellen: Werte stehen sofort.",
   "bewegung": {
    "easing": "cubic-bezier(0.25, 1, 0.5, 1) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) beim Austritt (token-swiss-knackig, power3.out / power3.in)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "200 (Hover, Filter-Indikator, Reiter), 350 (Mega-Menü, Akkordeon, Listenzeilen nach Filterwechsel), 500 (Bild-Maske bei Referenzen, Schritt der Anfrage), 700 (H1 im Hero, einmal); Austritt 70 % davon, Versatz 40 ms",
    "regel": "Bewegung wie an einer Linearachse: nur x oder y, keine Rotation, keine Skalierung über 1.0, kein Überschwingen. Tabellen, Datenblätter, Downloads und Formulare stehen sofort; Reveals nur für die H1 und die Fotos der Referenzen. Das Raster zeichnet sich nicht ein, es ist einfach da. Bei prefers-reduced-motion 150 ms Deckkraft, Masken sofort offen.",
    "herkunft": "Kurvenpaar und Skala aus token-swiss-knackig (bau.werte: --ease-swiss, --ease-swiss-exit, --dur-1 bis --dur-4, --stagger 40, --exit .7). Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Echtes Foto der eigenen Maschine oder Anlage im Einsatz beim Kunden oder in der eigenen Halle (keine Renderings im Hero, außer das Produkt ist noch nicht gebaut), im sichtbaren 12-Spalten-Raster (blueprint-raster-sichtbar: Linien als Zellkanten, Plus-Marker an den Schnittpunkten, Achsbeschriftung 1–12 im Steg). H1 sagt, was das Unternehmen herstellt und für wen („Vakuum-Greifsysteme für Blech, Holz und Glas“), darunter eine belegte Kennzahl mit Stand (seit, Länder, Anlagen im Feld) und zwei Knöpfe: „Projekt anfragen“ (gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern). Sprache und Land oben rechts als Text. hero_variante bildsequenz-video-scrub nur, wenn 60 bis 120 gerenderte Einzelbilder aus dem CAD vorliegen und der Text daneben alles Wichtige auch ohne Bild sagt; mobil statt Scrub ein Standbild. Kein Video-Hero ohne eigenes, gutes Material.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mega-menue-morphing-viewport",
     "native-popover-dropdowns"
    ],
    "hero": [
     "blueprint-raster-sichtbar"
    ],
    "hero_variante": [
     "bildsequenz-video-scrub"
    ],
    "sektionen": [
     {
      "zweck": "Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)",
      "muster": [
       "team-ueber-mich-layout",
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "team-ueber-mich-layout": "raster",
       "mehrschritt-anfrage": "senkrecht",
       "formular-fehlerzusammenfassung": "liste"
      }
     },
     {
      "zweck": "Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)",
      "muster": [
       "listen-hover-bildvorschau",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "leistungsseite-antwort-zuerst": "handwerk"
      }
     },
     {
      "zweck": "Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)",
      "muster": [
       "lokale-produktnavigation",
       "technische-daten-produktseite",
       "facettenfilter-ergebnisliste",
       "bild-hotspots"
      ],
      "varianten": {
       "facettenfilter-ergebnisliste": "seitenleiste",
       "lokale-produktnavigation": "abschnitte",
       "bild-hotspots": "bauteil"
      }
     },
     {
      "zweck": "Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)",
      "muster": [
       "download-center-dokumente",
       "reparatur-richtpreise"
      ],
      "varianten": {
       "reparatur-richtpreise": "hersteller"
      }
     },
     {
      "zweck": "Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)",
      "muster": [
       "case-study-geruest",
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne)",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)",
      "muster": [
       "zahlen-fakten-section",
       "logo-wand-social-proof"
      ],
      "varianten": {
       "zahlen-fakten-section": "tabelle",
       "logo-wand-social-proof": "raster"
      }
     },
     {
      "zweck": "Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste)",
      "muster": [
       "programm-kalender"
      ],
      "varianten": {
       "programm-kalender": "programm"
      }
     },
     {
      "zweck": "Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick)",
      "muster": [
       "standortfinder-liste"
      ],
      "varianten": {
       "standortfinder-liste": "liste"
      }
     },
     {
      "zweck": "Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere)",
      "muster": [
       "stellen-karriere"
      ],
      "varianten": {
       "stellen-karriere": "liste"
      }
     },
     {
      "zweck": "Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)",
      "muster": [
       "kontakt-anfrage-formular",
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "termin",
       "karte-zwei-klick": "skizze",
       "firmendaten-strukturiert": "werkstatt"
      }
     }
    ],
    "scroll": [
     "clip-path-bild-reveal"
    ],
    "schrift_animation": [],
    "hover": [
     "listen-hover-bildvorschau"
    ],
    "cursor": [],
    "mikro": [
     "tabs-pfeiltasten-focusgroup",
     "kopieren-feedback",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "mega-footer-sitemap"
    ],
    "button": [
     "button-zustaende",
     "kontur-button-zeichnen"
    ]
   },
   "signatur": [
    "blueprint-raster-sichtbar"
   ],
   "optional": [
    "gap-decorations-raster",
    "agentenformular-webmcp"
   ],
   "varianten_demo": {
    "kontur-button-zeichnen": "ecken",
    "galerie-shared-element-vollbild": "basis",
    "tabs-pfeiltasten-focusgroup": "manuell",
    "gap-decorations-raster": "kenndaten",
    "agentenformular-webmcp": "projekt"
   },
   "nicht_verwenden": [
    "produkt-ui-hero-perspektiv-tilt / command-palette-und-ki-suche – Signaturen von saas; hier stehen Maschinen und Datenblätter im Vordergrund, keine Software-Oberflächen",
    "karten-spotlight-glow / verlaufs-rahmen / mesh-gradient-shader / liquid-glass-refraktion – SaaS-Glanz; das Rezept lebt von Linien, Zahlen und echten Fotos",
    "glas-button / frosted-glass-erweitert – Glas über Hallenfotos senkt den Kontrast und wirkt wie Konsumelektronik",
    "zahlen-odometer – hochgezählte Kennzahlen wirken verkäuferisch; Zahlen stehen still, mit Stand und Quelle",
    "smooth-scroll-lenis – Datenblätter, Tabellen und Downloads werden gelesen und verglichen",
    "marquee-laufband – Kundenlogos als Laufband; Referenzen nur mit Freigabe und als ruhiges Raster",
    "interaktives-3d-hero / scroll-3d-kamerafahrt – teuer und langsam; CAD-Modelle als Download oder Viewer erst nach Klick",
    "scramble-decode / typewriter-natural – Hacker- und Chat-Ästhetik statt Messtechnik",
    "mono-labels-versal – die Beschriftung folgt der Normschrift in Archivo schmal, eine Mono wäre die dritte Stimme",
    "prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Fachperson; wenn ein Assistent kommt, nur gekennzeichnet (Art. 50 KI-VO)",
    "magnetische-elemente / cursor-follower-lerp / kontextueller-cursor – Agentur-Gesten ohne Nutzen für Einkäufer und Ingenieure",
    "stapelkarten / bento-grid-interaktiv – verstecken Daten oder verlangen Füllinhalt",
    "vorher-nachher-vergleichsregler – Signatur von handwerk",
    "konfetti-erfolg – nach der Anfrage eine sachliche Bestätigung mit Vorgangsnummer und Name der Fachperson",
    "Renderings und Stockfotos von Handschlägen, Weltkugeln und Zahnrädern – echte Fotos aus Halle, Prüffeld und Kundenanlage"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto der Maschine im Einsatz, H1 mit Produkt und Anwendung, eine belegte Kennzahl mit Stand, „Projekt anfragen“ und „Produkte und Datenblätter“. Sprache und Land oben rechts als Text, keine Flaggen.",
    "Datenblatt-Regel: Jede technische Angabe hat Wert, Einheit und, wo es sie gibt, Norm oder Prüfbedingung („Saugkraft 550 N bei -250 mbar“). Einheiten immer an derselben Stelle (eigene Spalte), Dezimaltrenner je Sprache einheitlich (Schmalz mischt Komma und Punkt), Tabellenziffern. Leere Felder und leere Überschriften fallen weg.",
    "Fachperson statt Formular-Sackgasse: Jede Branche oder Region hat eine Person mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail und Sprachen. Die Anfrage nennt, wann geantwortet wird, und nimmt Zeichnungen an (STEP, DXF, PDF, mit Größengrenze); Hinweis, dass Daten vertraulich behandelt werden und eine Geheimhaltungsvereinbarung auf Wunsch vorab möglich ist (Text vom Kunden).",
    "Konstruktionsraster konsequent: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter; Linien als Zellkanten (blueprint-raster-sichtbar), Plus-Marker nur an Schnittpunkten, Achsbeschriftung und Abschnittscodes in Archivo schmal. Jedes Element sitzt auf einer Linie; was nicht passt, wird umgebaut, nicht verschoben. Ein Material-Effekt pro Ansicht: das Raster.",
    "Mehrsprachigkeit: Sprache und Land getrennt (Schmalz), hreflang je Fassung, keine automatische Umleitung nach IP ohne Rückweg; Maße auf englischen Seiten für Nordamerika zusätzlich in Zoll, wenn der Kunde das liefert (Herrenknecht: „0,8–1,5m (30–60\")“). Jede Sprachfassung erreicht Impressum und Datenschutz.",
    "Produkte: Familie → Baureihe → Variante; die Varianten einer Baureihe stehen als Tabelle nebeneinander, die Artikelnummer ist mit einem Klick kopierbar (kopieren-feedback). Preise nur, wenn der Kunde sie nennen will; „Preis auf Anfrage“ ist erlaubt, ein toter Warenkorb nicht.",
    "Downloads: dauerhafte Adressen, die sich bei neuen Versionen nicht ändern (alte Version bleibt erreichbar und ist als ersetzt markiert), Version, Stand, Sprache, Format und Größe an jeder Datei. CAD-Viewer und Konfiguratoren von Dritten erst nach Klick bzw. Einwilligung.",
    "Referenzen zeigen Aufgabe, Lösung und Ergebnis in Messwerten (Herrenknecht: Strecke und Bauzeit). Kundenname, Logo und Fotos aus Kundenwerken nur mit schriftlicher Freigabe; sonst „Tier-1-Zulieferer, Süddeutschland“.",
    "Zertifikate nur gültig und vollständig: Norm mit Ausgabejahr (ISO 9001:2015), Zertifikatsnummer, Geltungsbereich, Standort, Zertifizierer, gültig bis, PDF. Abgelaufene Zertifikate sofort entfernen; ein Logo ohne Nachweis ist Irreführung (§ 5 UWG) – vom Kunden prüfen lassen.",
    "Messen als Tabelle mit Halle und Stand bei jedem Eintrag (bei ifm fehlen sie, bei Festo nur einmal), Ticket-Code, „Termin am Stand vereinbaren“ und .ics; vergangene Messen fallen automatisch heraus.",
    "Bewegung nach token-swiss-knackig: nur waagerecht oder senkrecht, Masken statt Fade, 200 bis 700 ms, Austritt 70 %. Tabellen, Filterergebnisse und Formulare stehen sofort, Filterwechsel ohne Animation der Werte.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG mit Rechtsform, Vertretungsberechtigten, Registergericht und -nummer, USt-IdNr., in jeder Sprachfassung erreichbar. Richtet sich ein Shop oder eine Preisliste nur an Unternehmen, das klar sagen und technisch durchhalten; sonst gilt die Preisangabenverordnung mit Endpreisen. Umweltaussagen („CO₂-neutral“, „nachhaltig produziert“) nur mit Nachweis. Betriebsanleitungen, die digital bereitgestellt werden: nach der Maschinenverordnung (EU) 2023/1230 ab 20.01.2027 herunterladbar und druckbar, mindestens zehn Jahre online bzw. für die Lebensdauer der Maschine, Papier auf Wunsch beim Kauf. Gibt es ein Hinweisgebersystem (HinSchG), den Zugang im Footer verlinken. Alles vom Kunden prüfen lassen; Claude schreibt keine Rechtstexte.",
    "Barrierefreiheit: Das BFSG zielt auf Leistungen für Verbraucher; reine B2B-Seiten sind meist nicht erfasst (vom Kunden prüfen lassen). Gebaut wird trotzdem nach WCAG 2.2 AA; Tabellen mit echten Kopfzellen, Linien des Rasters nie als einzige Trennung von Bedeutung.",
    "Karriere: Stellen mit Gehaltsspanne oder Tarifgruppe, geschlechtsneutral (AGG), Kurzbewerbung ohne Anschreiben; die Regeln stehen im Rezept arbeitgeber-karriere."
   ],
   "varianten": [
    {
     "name": "Zulieferer und Lohnfertiger (Teile nach Zeichnung)",
     "hinweis": "Statt Produktfamilien die Fertigungsmöglichkeiten als Tabelle: Verfahren, Werkstoffe, größte Abmessungen, erreichbare Toleranzen, Losgrößen, Maschinenpark mit Baujahr. Die Anfrage beginnt mit dem Zeichnungs-Upload. Qualitätsnormen der Abnehmerbranche (z. B. IATF 16949) mit Nummer und Gültigkeit.",
     "sektionen": [
      "Was wir fertigen (Fertigungsmöglichkeiten als Tabelle statt Produkte)",
      "Zeichnung hochladen und anfragen (mehrschritt-anfrage, Variante senkrecht)",
      "Qualität und Messtechnik (Zertifikate, Messraum, Erstmusterprüfung)"
     ],
     "weglassen": [
      "Produkte mit technischen Daten",
      "Downloads – auf Zertifikate und Lieferbedingungen kürzen"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Technischer Dienstleister (Prüflabor, Ingenieurbüro, Instandhaltung, Montage)",
     "hinweis": "Leistungen statt Produkte, je Leistung eine Unterseite mit Antwort zuerst (Umfang, Dauer, Normen, Einsatzgebiet). Akkreditierungen mit Urkundennummer und Geltungsbereich; Rufbereitschaft und Reaktionszeit nur, wenn vertraglich gehalten. Reine Planungsbüros eher mit architektur-ruhiges-raster.",
     "sektionen": [
      "Leistungen nach Anlass (Prüfung, Wartung, Störung, Umbau)",
      "Rufbereitschaft und Service-Hotline (oeffnungszeiten-status, Variante termin)",
      "Akkreditierung und Normen"
     ],
     "weglassen": [
      "Produkte mit technischen Daten",
      "Messen – nur, wenn der Dienstleister ausstellt"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Hersteller mit B2B-Shop oder Ersatzteilportal",
     "hinweis": "Schnellbestellung über Artikelnummer und Menge, Preise nach Login nur, wenn der Kunde das will; ausdrücklich „nur für Unternehmer“ und Prüfung im Bestellprozess. Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen (dessen nicht_verwenden gilt dann zusätzlich, seine Signaturen nicht). Ersatzteile über Seriennummer der Maschine finden.",
     "sektionen": [
      "Ersatzteil finden (Seriennummer oder Baureihe → Explosionszeichnung als Liste)",
      "Schnellbestellung (Artikelnummer, Menge, Kostenstelle)"
     ],
     "weglassen": [],
     "muster_zusatz": [
      "produkt-kaufbox-varianten",
      "warenkorb-drawer"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "hoch",
   "leistung": "Das Raster kostet nichts (CSS-Linien, kein Bild). Teuer sind Produktdaten und Downloads: Tabellen serverseitig rendern, Filter ohne Neuladen nur bis wenige hundert Varianten im Client, darüber serverseitig. Hero-Foto AVIF mit fetchpriority=high und fester aspect-ratio. bildsequenz-video-scrub nur als Variante: Einzelbilder als AVIF-Sprite oder Video, erst nach dem LCP laden, mobil ein Standbild. CAD-Viewer, Karten und Video erst nach Klick. Strichpunkt Sans und Archivo als Variable-WOFF2 mit Latin und Latin Extended (Polnisch, Tschechisch, Türkisch); für Kyrillisch oder Chinesisch eine ausgewiesene Ersatzschrift festlegen. sofort-navigation-vorladen für Produkte, Anwendungen und Kontakt, nie für Downloads und Formular-Ergebnisse.",
   "offen": [
    "Fehlende Bausteine (siehe industrie-b2b-mittelstand-fehlend.md): technische-daten-produktseite und download-center-dokumente. Beide ids stehen schon in den Sektionen und werden von der Prüfung als unbekannt gemeldet.",
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen. Ein kleineres Unternehmen (unter 500 Beschäftigten) als Referenz fehlt noch.",
    "strichpunkt-sans hat im Katalog keine Produktions-Sichtung; Zeichensatz (Latin Extended, Kyrillisch) und Tabellenziffern von Strichpunkt Sans am Font prüfen (Archivo: tnum vorhanden). Schriftdatei strichpunkt-sans liegt noch nicht unter assets/fonts.",
    "Bewusste Abweichung vom Muster blueprint-raster-sichtbar: Beschriftung in Archivo schmal statt Mono. AD prüfen, ob das Raster ohne Mono noch technisch genug wirkt.",
    "Eintrag in werkzeug/fundus/rezept-finder.json fehlt (Vorschlag: ziele anfrage, info; begriffe Maschinenbau, Anlagenbau, Sondermaschinenbau, Zulieferer, Lohnfertigung, Industrie, Hidden Champion, Automatisierung, Antriebstechnik, Messtechnik, Prüflabor, Instandhaltung)."
   ],
   "stimmung_tags": [
    "präzise",
    "ruhig"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     128
    ],
    "sektion": "clamp(64px, 8vw, 128px)",
    "dichte": "dicht",
    "hinweis": "Datenblatt-Dichte: Tabellenzeilen 8 bis 12 px, Zellen mit 16 bis 24 px Innenabstand. Jedes Element sitzt auf einer Rasterlinie."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 3vw, 40px)",
    "spalt": "0",
    "max_breite": "1440px",
    "hinweis": "12 Spalten ab 821 px, 8 bis 820 px, 4 darunter (Regel). Sichtbares Raster mit Plus-Markern nur an Schnittpunkten und Achsbeschriftung im Steg (blueprint-raster-sichtbar). Spaltenabstand 0, Linien sind die Zellkanten; Innenabstand der Zelle clamp(16px, 2vw, 24px)."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px rgba(17, 20, 23, .13) für Raster und Plus-Marker; Tabellenkopf auf #E4E5E1",
    "schatten": "keiner",
    "hinweis": "Keine Rundung, kein Glanz. Nebenweg als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Verkehrsblau flach."
   },
   "bildsprache": {
    "licht": "Hallenlicht oder Licht beim Kunden, technisch scharf.",
    "ausschnitt": "Maschine im Einsatz, Mensch als Maßstab, Detail der Funktion.",
    "personen": "Ja: Fachpersonen mit Namen; Kundenwerke nur mit schriftlicher Freigabe.",
    "formate": [
     "3:2",
     "16:9",
     "4:3"
    ],
    "nicht": "Keine Renderings im Hero (außer das Produkt ist noch nicht gebaut), keine Stock-Ingenieur:innen mit Tablet, kein Globus, kein Glanz."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Wie ein Datenblatt: Wert, Einheit, Bedingung. Verben sachlich, keine Adjektivketten.",
    "haltung": "Belastbar und präzise; jede Anwendung hat eine Person mit Durchwahl.",
    "beispiele": [
     "Spannsysteme für Fräszentren, gefertigt in [Ort].",
     "Ihre Ansprechperson für Holz: [Name], Durchwahl [Nummer]."
    ],
    "nicht": "„Hidden Champion“ als Selbstlob, „innovativ“, „Lösungen“ ohne Gegenstand, „weltweit führend“ ohne Beleg."
   },
   "hero_aufbau": {
    "raster": "Sichtbares 12-Spalten-Raster mit Achsbeschriftung 1–12 im Steg: Text über Spalte 1 bis 6, Foto über 7 bis 12, beide auf Linien.",
    "bild": "Echtes Foto der eigenen Maschine im Einsatz, 3:2. bildsequenz-video-scrub nur als hero_variante mit 60 bis 120 CAD-Bildern, mobil Standbild.",
    "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Strichpunkt Sans 600 wdth 116, links oben auf einer Rasterlinie.",
    "handlung": "„Projekt anfragen“ (Verkehrsblau gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern), nebeneinander.",
    "zusatz": "Belegte Kennzahl mit Stand; Sprache und Land oben rechts als Text; Abschnittscode „01 · …“ in Archivo schmal."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "produkt-ui-hero-perspektiv-tilt",
      "command-palette-und-ki-suche"
     ],
     "grund": "Signaturen von saas; hier stehen Maschinen und Datenblätter im Vordergrund, keine Software-Oberflächen"
    },
    {
     "ids": [
      "karten-spotlight-glow",
      "verlaufs-rahmen",
      "mesh-gradient-shader",
      "liquid-glass-refraktion"
     ],
     "grund": "SaaS-Glanz; das Rezept lebt von Linien, Zahlen und echten Fotos"
    },
    {
     "ids": [
      "glas-button",
      "frosted-glass-erweitert"
     ],
     "grund": "Glas über Hallenfotos senkt den Kontrast und wirkt wie Konsumelektronik"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochgezählte Kennzahlen wirken verkäuferisch; Zahlen stehen still, mit Stand und Quelle"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "Datenblätter, Tabellen und Downloads werden gelesen und verglichen"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "Kundenlogos als Laufband; Referenzen nur mit Freigabe und als ruhiges Raster"
    },
    {
     "ids": [
      "interaktives-3d-hero",
      "scroll-3d-kamerafahrt"
     ],
     "grund": "teuer und langsam; CAD-Modelle als Download oder Viewer erst nach Klick"
    },
    {
     "ids": [
      "scramble-decode",
      "typewriter-natural"
     ],
     "grund": "Hacker- und Chat-Ästhetik statt Messtechnik"
    },
    {
     "ids": [
      "mono-labels-versal"
     ],
     "grund": "die Beschriftung folgt der Normschrift in Archivo schmal, eine Mono wäre die dritte Stimme"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "kein KI-Chat statt Fachperson; wenn ein Assistent kommt, nur gekennzeichnet (Art. 50 KI-VO)"
    },
    {
     "ids": [
      "magnetische-elemente",
      "cursor-follower-lerp",
      "kontextueller-cursor"
     ],
     "grund": "Agentur-Gesten ohne Nutzen für Einkäufer und Ingenieure"
    },
    {
     "ids": [
      "stapelkarten",
      "bento-grid-interaktiv"
     ],
     "grund": "verstecken Daten oder verlangen Füllinhalt"
    },
    {
     "ids": [
      "vorher-nachher-vergleichsregler"
     ],
     "grund": "Signatur von handwerk"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Anfrage eine sachliche Bestätigung mit Vorgangsnummer und Name der Fachperson"
    },
    {
     "ids": [],
     "grund": "Renderings und Stockfotos von Handschlägen, Weltkugeln und Zahnrädern – echte Fotos aus Halle, Prüffeld und Kundenanlage"
    }
   ],
   "alle_muster": [
    {
     "id": "blueprint-raster-sichtbar",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/meta.json"
    },
    {
     "id": "bildsequenz-video-scrub",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/bildsequenz-video-scrub/meta.json"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "senkrecht",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "listen-hover-bildvorschau",
     "rolle": "Sektion: Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/meta.json"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "handwerk",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk"
    },
    {
     "id": "lokale-produktnavigation",
     "rolle": "Sektion: Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/meta.json",
     "variante": "abschnitte",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=abschnitte"
    },
    {
     "id": "technische-daten-produktseite",
     "rolle": "Sektion: Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/meta.json"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "seitenleiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=seitenleiste"
    },
    {
     "id": "bild-hotspots",
     "rolle": "Sektion: Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json",
     "variante": "bauteil",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil"
    },
    {
     "id": "download-center-dokumente",
     "rolle": "Sektion: Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/meta.json"
    },
    {
     "id": "reparatur-richtpreise",
     "rolle": "Sektion: Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/meta.json",
     "variante": "hersteller",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=hersteller"
    },
    {
     "id": "case-study-geruest",
     "rolle": "Sektion: Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "peek",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "tabelle",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster"
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "standortfinder-liste",
     "rolle": "Sektion: Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
     "variante": "skizze",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "werkstatt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt"
    },
    {
     "id": "mega-menue-morphing-viewport",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/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": "tabs-pfeiltasten-focusgroup",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "manuell",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=manuell"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "ecken",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken"
    },
    {
     "id": "token-swiss-knackig",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/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": "headline-laufweite-zeilenabstand",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "eine-familie-wenig-gewichte",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
    },
    {
     "id": "gap-decorations-raster",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/meta.json",
     "variante": "kenndaten",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten"
    },
    {
     "id": "agentenformular-webmcp",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/meta.json",
     "variante": "projekt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt"
    }
   ]
  },
  {
   "id": "kfz-werkstatt-autohaus",
   "name": "Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertig",
   "branche": "Freie Kfz-Werkstatt / Autohaus mit Werkstatt / Reifenservice / Karosserie- und Lackierbetrieb",
   "stimmung": [
    "bodenständig",
    "schnell",
    "klar",
    "verlässlich"
   ],
   "kurz": "Die Seite beantwortet drei Fragen in dieser Reihenfolge: Wann kann ich kommen, was kostet es, wann ist das Auto fertig. Termin in vier Schritten mit Hol- und Bringdienst nach Postleitzahl, Festpreise als echte Tabelle nach Fahrzeugklasse mit Stand-Datum, Fahrzeugbestand mit der Pflichtzeile zu Verbrauch, CO₂ und CO₂-Klasse an jeder Karte. Schmale, kräftige Mona Sans wie auf Werkstatt- und Preisschildern, Asphaltgrau und Verkehrsgelb nur für „Termin buchen“, eine Taste mit echter Tiefe wie ein Werkstatt-Taster. Signatur ist die Reifenflanke: Die Reifengröße steht als Text auf dem Rund und wird daneben erklärt. Anders als handwerk: Preise statt Kostenrechner, Termin statt Anfrage, kein Vorher/Nachher-Regler, andere Bewegung.",
   "referenzen": [
    {
     "seite": "Kfz-Meisterbetrieb Schwabing (freie Werkstatt, München)",
     "url": "https://www.kfz-schwabing.de/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.kfz-schwabing.de/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): H1 mit Leistung und Ort („KFZ-Werkstatt München-Schwabing“), zwei Knöpfe „Jetzt anfragen“ und „Termin vereinbaren“, Telefon mit Rückmeldung „innerhalb eines Werktages“, klare Regel zum Kostenvoranschlag (Sichtprüfung kostenlos, Diagnose nach angefangener Stunde, vorher besprochen), Öffnungszeiten Mo–Fr 8:00–17:30. Nicht übernehmen: keine Festpreise, Google-Schnitt (4,8 bei 146) ohne Echtheitshinweis und ohne Link zum Profil, Meisterbetrieb ohne Handwerkskammer."
    },
    {
     "seite": "Thöne & Schlösser (Kfz-Meisterwerkstatt, Leverkusen-Opladen)",
     "url": "https://thoene-schloesser.de/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://thoene-schloesser.de/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Mehrmarken-Werkstatt mit langer Leistungsliste (Inspektion, HU, Reifen, Klima, Unfall, Hybrid und Elektro, Wohnmobil, UVV), HU-Termin „rund um die Uhr“ online über die KÜS-Prüfstation im Haus, Aktionspreis „Nur 20 €“ für den Räderwechseltag am 07.11.2026, Öffnungszeiten mit Mittagspause, Ersatzwagen bis vor die Tür. Nicht übernehmen: keine Preisliste, sechs Fünf-Sterne-Stimmen ohne Gesamtzahl und ohne Herkunft, „0%-Finanzierung“ ohne Angaben."
    },
    {
     "seite": "Kfz-Service Schwindt (freie Werkstatt, Meckenheim; Ortsseite Swisttal)",
     "url": "https://www.kfz-service-schwindt.de/autowerkstatt/swisttal",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.kfz-service-schwindt.de/autowerkstatt/swisttal",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Ortsseite für den Nachbarort mit ehrlicher Lageangabe („Am nächsten für Swisttal“, Betrieb in Meckenheim), „TÜV im Haus, Mo & Do“, Ersatzwagen „29,95 € pro Tag“, Termin per Telefon, WhatsApp und E-Mail, Büro- und Werkstattzeiten getrennt. Nicht übernehmen: Hol- und Bringdienst nur „für Stammkunden auf Anfrage“ ohne Gebiet und Preis; keine Festpreise."
    },
    {
     "seite": "Autohaus Holst (VW-Partner, Scheeßel; Fahrzeugbestand)",
     "url": "https://autohaus-holst.shop/fahrzeugbestand/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://autohaus-holst.shop/fahrzeugbestand/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Bestandsliste mit Trefferzahl („168 Treffer“), Karten mit Bestandsnummer, Erstzulassung, Kilometerstand, kW (PS), Kraftstoff, Getriebe und „Differenzbesteuert“ bzw. „MwSt ausweisbar“; Filter nach Marke, Modell, Kraftstoff, Leistung, Preis, Sortierung nach Preis, km, EZ. Nicht übernehmen: Verbrauch, CO₂ und CO₂-Klasse fehlen bei einigen Karten; Monatsrate („187,- €“) ohne Laufzeit, Anzahlung, Zins und Gesamtbetrag."
    },
    {
     "seite": "Autohaus König (Berlin; Gebrauchtwagen)",
     "url": "https://www.autohaus-koenig.de/gebrauchtwagen/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.autohaus-koenig.de/gebrauchtwagen/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Pflichtzeile direkt auf der Karte („Kombinierte CO2-Emission: 128 g/km, Kombi. Kraftstoffverbrauch: … l/100 km, CO2-Klasse: D“), Preis als „Gesamtpreis inkl. MwSt.“, Schnellsuchen nach Preisgrenze, wenig km, Familie, Elektro. Nicht übernehmen: „k.A.“ in der Pflichtzeile und „undefined (undefined)“ statt Leistung – Feed-Lücken müssen abgefangen werden."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "mona-sans steht bisher nur als Textschrift im Hotel-Rezept (neben Newsreader); hier als Headline in schmaler Breite (wdth 80, wght 800), wie Werkstatt-, Reifen- und Preisschilder: viel Text auf wenig Breite, gut lesbar aus dem Augenwinkel. Sie hat Tabellenziffern (im Font geprüft), damit stehen auch die großen Preise sauber. google-sans-flex ist damit in zwei Rezepten (praxis nutzt sie als Text neben Hedvig Letters Serif); hier mit ROND 0 und opsz automatisch, weil sie Tabellenziffern hat (geprüft) und auf alten Handys gut lesbar bleibt. Ursprünglich war science-gothic vorgesehen; sie steht inzwischen in musik-kuenstler-buehne und wurde deshalb getauscht. Unterschied zu handwerk (Special Gothic + Atkinson): Grotesk mit Breitenachse statt Gothic, die schmale Breite nur für Headlines und Preise; zu industrie-b2b-mittelstand (Strichpunkt Sans breit): schmal statt breit; zu fitness (Anybody, Breitenanimation): die Breite bleibt fest.",
    "headline": "mona-sans",
    "text": "google-sans-flex",
    "akzent": "",
    "groessen": "h1 Mona Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), wght 800, wdth 80, Laufweite -0.02em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.25rem + 2vw, 2.75rem), wght 750, wdth 85; die drei Preise unter dem Hero Mona Sans 2.5rem wght 800 wdth 75 Tabellenziffern, „€“ und „inkl. MwSt.“ in Google Sans Flex daneben. Preise in der Festpreis-Tabelle Google Sans Flex 1.125rem wght 700 Tabellenziffern, rechtsbündig. Fließtext Google Sans Flex 1.0625rem (17 px), wght 400, ROND 0, opsz automatisch, Zeilenhöhe 1.55, max. 65ch; Labels (Fahrzeugklasse, Stand-Datum) Google Sans Flex 0.8125rem wght 600 Versal +0.06em; Telefonnummer im Kopf 1.25rem wght 700 Tabellenziffern. Pflichtzeile Pkw-EnVKV mindestens so groß und kräftig wie der Angebotstext daneben, nie unter 0.875rem.",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "tabellenziffern",
     "lesesatz-text-wrap",
     "optische-groessen-opsz"
    ],
    "alternative_eigenprojekt": "Headline cabinet-grotesk in 800 (ITF), Text satoshi (ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Helles Betongrau als Grund, Asphalt für Kopf, Festpreis-Tafel und Fußzeile, Verkehrsgelb (RAL 1023 als Beispiel) nur für „Termin buchen“ und den aktiven Schritt der Terminstrecke. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Asphalt (Nicht-Text-Kontrast), auf Asphalt ohne Rand. Grün nur für „Jetzt geöffnet“ und „verfügbar“, Rot nur für Fehler; beides immer mit Text, nie als einzige Aussage. Markenfarben von Herstellern nur im Logo des Autohauses, nie als Flächenfarbe der Seite.",
    "beispiel": [
     "#F2F1ED Grund (Betongrau hell)",
     "#121314 Text (16,5 : 1)",
     "#595E63 Sekundärtext, Stand-Datum, Einheiten (5,8 : 1)",
     "#232629 Asphalt: Kopf, Festpreis-Tafel, Fußzeile (Weiß darauf 15,2 : 1; Sekundärtext darauf #B9BEC4, 8,1 : 1)",
     "#F5B700 Signal Verkehrsgelb: Termin buchen, aktiver Schritt (Text #121314, 10,3 : 1; auf Grund mit 2 px Rand #232629)",
     "#1F7A3E Status geöffnet, verfügbar (Weiß darauf 5,4 : 1, nur mit Text)",
     "#B3261E Fehler, Termin belegt (Weiß darauf 6,5 : 1, sparsam)"
    ]
   },
   "animationsstil": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "Der UI-Stil als Hauptstil, Spielart „Nur Tempo“ auf UI-Maß gekürzt: Auf dieser Seite bewegt sich, was jemand öffnet oder weiterklickt (Menü, Preis-Reiter, Akkordeon, Schritt der Terminstrecke, Dialog). Öffnen 250 ms mit Ausklang, schließen 170 ms mit Anlauf. Kein eigener animationsstil_ui nötig. Unterscheidet sich damit von handwerk (token-tech-praezise).",
   "bewegung": {
    "easing": "cubic-bezier(0.16, 1, 0.3, 1) beim Öffnen, cubic-bezier(0.7, 0, 0.84, 0) beim Schließen (token-toggle-asymmetrisch)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "120 (Hover, Farbe, Druck der Taste), 250 (Menü, Preis-Reiter, Akkordeon, nächster Schritt der Terminstrecke, Dialog öffnen), 170 (schließen); Fokusring ohne Übergang",
    "regel": "Schnell und sachlich: nichts blendet beim Scrollen ein, kein Karussell mit Autoplay, keine Zähler. Die Tiefen-Taste sinkt beim Druck sichtbar ein (Weg höchstens 4 px), sonst kein Weg über 8 px. Preise, Öffnungsstatus und Fahrzeugdaten stehen sofort. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang, die Taste wechselt nur die Farbe.",
    "herkunft": "Kurvenpaar aus token-toggle-asymmetrisch (bau.werte panel: expo.out / expo.in); Dauern nach Leitfaden-Faustregel für UI-Panels (200–350 ms) gekürzt, Schließen etwa 68 %. Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Echtes Foto aus der eigenen Werkstatt (Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich), daneben H1 mit Leistung und Ort („Kfz-Meisterwerkstatt in [Ort] – alle Marken“), der Öffnungsstatus aus echten Zeiten („Heute bis 18 Uhr geöffnet“), „Termin buchen“ als gelbe Tiefen-Taste und die Telefonnummer als tel:-Link. Direkt darunter drei Festpreise als Zeile (z. B. HU/AU, Räderwechsel, Inspektion ab) mit Stand-Datum und Link zur ganzen Tabelle. Kein Video, keine Stockfotos von glänzenden Neuwagen, kein Karussell. Beim Autohaus darf das Foto ein echtes Fahrzeug vom Hof zeigen; Motordaten im Hero lösen die Pkw-EnVKV-Zeile aus.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation",
     "native-popover-dropdowns"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
      "muster": [
       "mehrschritt-anfrage",
       "termin-buchung-zwei-klick",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion",
       "datei-upload-ablage"
      ],
      "varianten": {
       "mehrschritt-anfrage": "plz",
       "termin-buchung-zwei-klick": "vorauswahl",
       "formular-fehlerzusammenfassung": "kompakt",
       "datei-upload-ablage": "foto"
      }
     },
     {
      "zweck": "Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle)",
      "muster": [
       "speisekarte-editorial",
       "tabs-pfeiltasten-focusgroup"
      ],
      "varianten": {
       "speisekarte-editorial": "preisliste",
       "tabs-pfeiltasten-focusgroup": "auto"
      }
     },
     {
      "zweck": "Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein)",
      "muster": [
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "handwerk"
      }
     },
     {
      "zweck": "Reifen: Größe lesen, wechseln, einlagern (Reifenflanke als statische Zeichnung mit der Größe auf dem Rund, daneben dieselbe Angabe als Liste erklärt: Breite, Querschnitt, Bauart, Felgendurchmesser, Tragfähigkeit, Geschwindigkeit, DOT-Alter; Einlagerung mit Profiltiefe-Protokoll; Reifenangebote mit Preis nur mit EU-Reifenlabel daneben)",
      "muster": [
       "text-on-path"
      ],
      "varianten": {
       "text-on-path": "reifen"
      }
     },
     {
      "zweck": "Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme",
      "muster": [
       "fahrzeugbestand-feed-teaser",
       "objekt-steckbrief-expose",
       "facettenfilter-ergebnisliste",
       "finanzierung-pflichtangaben"
      ],
      "varianten": {
       "objekt-steckbrief-expose": "fahrzeug",
       "facettenfilter-ergebnisliste": "leiste",
       "finanzierung-pflichtangaben": "fahrzeugkarte"
      }
     },
     {
      "zweck": "So läuft Ihr Werkstattbesuch (Termin → Annahme mit Kostenrahmen → Anruf vor jeder Mehrarbeit → Fertigmeldung per SMS oder Anruf → Abholung mit Erklärung der Rechnung; nur versprechen, was der Betrieb so macht)",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Bewertungen (Google-Profil mit Schnitt, Anzahl, Stand-Datum und Echtheitshinweis direkt daneben; drei Stimmen mit Antwort des Betriebs; Live-Ansicht nur per Klick)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "pille"
      }
     },
     {
      "zweck": "Team und Meister (Inhaber:in oder Werkstattmeister:in mit Foto, Annahme mit Durchwahl, Qualifikationen wie Meisterbrief und Hochvolt; bis etwa fünf Personen als ein Satz mit kleinen Porträts, darüber Raster)",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Partner und Nachweise (Kfz-Innung, Werkstattsystem, Prüforganisation im Haus mit HU-Tagen, Herstellerzulassungen; nur mit Erlaubnis und aktuell)",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "raster"
      }
     },
     {
      "zweck": "Karriere und Ausbildung (Kfz-Mechatroniker:in, Servicetechniker:in, Ausbildung; Stellen direkt offen mit Gehalt, Initiativbewerbung; eigene Karriere-Microsite nach arbeitgeber-karriere)",
      "muster": [
       "stellen-karriere"
      ],
      "varianten": {
       "stellen-karriere": "wenige"
      }
     },
     {
      "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "kontakt-anfrage-formular",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "karte",
       "karte-zwei-klick": "bild",
       "firmendaten-strukturiert": "werkstatt"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Betrieb kein Kleinstunternehmen ist – vom Kunden prüfen lassen)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "bfsg"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "einblenden-starting-style",
     "icon-squash-stretch"
    ],
    "material": [],
    "galerie": [
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "studio-visitenkarte-footer",
     "widerruf-und-kuendigung-schaltflaeche"
    ],
    "button": [
     "tiefen-taste-3d",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "text-on-path"
   ],
   "optional": [
    "agentenformular-webmcp"
   ],
   "varianten_demo": {
    "tiefen-taste-3d": "stapel",
    "mobile-bottom-navigation": "kontakt",
    "studio-visitenkarte-footer": "praxis",
    "galerie-shared-element-vollbild": "produkt",
    "widerruf-und-kuendigung-schaltflaeche": "richtig",
    "agentenformular-webmcp": "termin",
    "text-on-path": "reifen",
    "pfeil-icon-button": "tausch"
   },
   "nicht_verwenden": [
    "vorher-nachher-vergleichsregler – Signatur von handwerk; Unfallinstandsetzung als zwei feste Fotos nebeneinander mit Datum",
    "kostenrechner-konfigurator – Reparaturkosten hängen vom Befund ab (wann_nicht: jeder Auftrag anders); Festpreise als Tabelle und Kostenvoranschlag",
    "cinematic-video-hero / interaktives-3d-hero – lange Ladezeit; der erste Bildschirm ist Termin, Telefon und Preis",
    "hide-on-scroll-header – Telefon und „Termin buchen“ müssen immer erreichbar sein",
    "zahlen-odometer – hochgezählte „10.000 reparierte Autos“ wirken unseriös",
    "kreistext-siegel-rotierend – „Meisterbetrieb“-Stempel ist Template-Klischee; Schrift auf dem Rund gibt es nur an der Reifenflanke, und sie dreht sich nicht",
    "marquee-laufband – Markenlogos ziehen vorbei, ohne etwas zu sagen; Partner als ruhiges Raster",
    "webgl-bildverzerrung / bild-zoom-in-maske auf Fahrzeugfotos – verfälscht Fotos, die verkaufen; Fahrzeugbilder stehen still",
    "glas-button / frosted-glass-erweitert – Glas über Hallenfotos senkt den Kontrast",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – bremsen, wer schnell einen Preis sucht",
    "konfetti-erfolg – nach der Buchung eine Bestätigung mit Datum, Uhrzeit, Leistung und Telefonnummer",
    "prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Annahme; wenn ein Assistent kommt, beim Start gekennzeichnet (Art. 50 KI-VO)",
    "Stockfotos von Mechanikern mit sauberen Händen und Neuwagen im Studio – echte Werkstatt, echte Fahrzeuge vom Hof"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Werkstattfoto, H1 mit Leistung und Ort, Öffnungsstatus aus echten Zeiten, „Termin buchen“ und Telefon; darunter drei Festpreise mit Stand-Datum.",
    "Festpreise als echte HTML-Tabelle (speisekarte-editorial, Variante preisliste): Endpreis inkl. MwSt. (Preisangabenverordnung), Fahrzeugklasse als Spalte, je Zeile was enthalten ist (Material, Entsorgung, Auswuchten). Bei HU und AU klar sagen, ob die Gebühr der Prüforganisation enthalten ist und was eine Nachprüfung kostet. „ab“ nur mit dem Satz, wovon der Endpreis abhängt. Aktionspreise mit Zeitraum.",
    "Termin in höchstens vier Schritten: Leistung, Fahrzeug, Tag und Abgabeart, Kontakt. Kennzeichen und Foto vom Fahrzeugschein nur freiwillig; die Bestätigung nennt Datum, Uhrzeit, Leistung, Preis oder Rahmen und Telefon. Ein Buchungs-Widget eines Anbieters lädt erst nach Klick; Telefon und WhatsApp stehen immer daneben (WhatsApp mit Hinweis auf die Datenübermittlung).",
    "Hol- und Bringdienst und Ersatzwagen: Postleitzahl zuerst (mehrschritt-anfrage, Variante plz) mit drei Antworten, Zonenpreis und Ersatzwagen-Preis pro Tag offen (Schwindt nennt 29,95 €); die Orte zusätzlich als Text.",
    "Kostenrahmen: „Wir rufen vor jeder Mehrarbeit an“ und Regeln zum Kostenvoranschlag (was kostenlos ist, was nach Zeit berechnet wird) nur, wenn der Betrieb so arbeitet.",
    "Reifenflanke (text-on-path): statisch, ohne Scroll-Kopplung; die Größe steht einmal als echter Text in einer Liste daneben, das SVG ist aria-hidden. Reifenangebote mit Preis zeigen das EU-Reifenlabel und das Produktdatenblatt in der Nähe des Preises, ein Link auf das Label reicht (Art. 6 VO (EU) 2020/740).",
    "Fahrzeugbestand: Feed von mobile.de, AutoScout24 oder dem Händlersystem mit „Stand: Datum, Uhrzeit“. Sobald Motordaten (Leistung, Hubraum, Beschleunigung) erscheinen, steht die Pflichtzeile mit kombiniertem Verbrauch, CO₂-Emissionen und CO₂-Klasse gut lesbar daneben, nicht schwächer als der Angebotstext (Pkw-EnVKV § 5, auch im Internet). Bei Neuwagen, Tages- und Kurzzulassungen Pflicht; bei Gebrauchtwagen, sobald WLTP-Werte vorliegen. „k.A.“ oder „undefined“ nie ausgeben: Fehlt ein Pflichtwert, Motordaten weglassen und die Karte prüfen lassen. Plug-in-Hybride zusätzlich gewichtet kombiniert und bei entladener Batterie.",
    "Preise im Bestand: Gesamtpreis inkl. MwSt., bei Neuwagen Überführungskosten im Endpreis statt in der Fußnote; „Differenzbesteuert“ oder „MwSt. ausweisbar“ an der Karte. Monatsraten nur mit repräsentativem Beispiel (Sollzins, effektiver Jahreszins, Laufzeit, Anzahlung, Nettodarlehensbetrag, Gesamtbetrag, Darlehensgeber) direkt bei der Rate.",
    "Bewertungen: Google-Profil mit Schnitt, Anzahl und Stand, der Echtheitshinweis steht direkt daneben (§ 5b Abs. 3 UWG); keine eigenen Fünf-Sterne-Zitate ohne Herkunft.",
    "Tiefen-Taste (tiefen-taste-3d, Variante stapel) nur für „Termin buchen“ und höchstens einmal je Ansicht; alle anderen Knöpfe flach mit Pfeil (pfeil-icon-button, Variante tausch) oder Telefon-Icon; icon-squash-stretch nur als Mikro-Rückmeldung des Icons. Gelb auf hellem Grund mit 2 px Asphalt-Rand.",
    "Die untere Mobilleiste (mobile-bottom-navigation, Variante fab) zeigt Termin, Anrufen, WhatsApp und Anfahrt und verdeckt weder Consent-Banner noch die Bestätigung der Buchung.",
    "Fotos von Kundenfahrzeugen nur mit Einwilligung und mit unkenntlichem Kennzeichen; Fahrzeugschein-Daten und Kennzeichen sind personenbezogen, Datenschutzhinweis direkt am Formular.",
    "Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG mit Handwerkskammer, Eintragung in die Handwerksrolle (Kfz-Techniker-Handwerk) und Meister; beim Autohaus Vermittlerangaben für Finanzierung und Versicherung, falls vermittelt wird. Wird online verbindlich beauftragt oder ein Gutschein verkauft, Widerrufs-Button „Vertrag widerrufen“ ohne Login im Footer (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Keine Umweltaussagen wie „klimaneutrale Werkstatt“ ohne Nachweis. Alles vom Kunden prüfen lassen; Claude schreibt keine Rechtstexte."
   ],
   "varianten": [
    {
     "name": "Autohaus mit Neu- und Gebrauchtwagen",
     "hinweis": "Fahrzeugbestand rückt direkt unter den Hero, die Werkstatt wird zweite Säule mit eigenem Termin-Knopf. Verkaufsberater:innen mit Foto und Durchwahl; Probefahrt und Inzahlungnahme als kurze Anfragen. Die Pflichtzeile nach Pkw-EnVKV gilt auch im Hero und in Social-Teasern, sobald Motordaten erscheinen. Herstellerlogos nur nach den Vorgaben des Herstellervertrags.",
     "sektionen": [
      "Fahrzeugbestand mit Schnellsuche (Preisgrenze, Kraftstoff, Automatik, wenig km)",
      "Probefahrt anfragen und Inzahlungnahme (kontakt-anfrage-formular)",
      "Finanzierung und Leasing (nur mit repräsentativem Beispiel)",
      "Werkstatt und Termin"
     ],
     "weglassen": [
      "Reifen-Sektion auf eine Zeile in den Leistungen kürzen, wenn kein Reifenservice beworben wird – die Signatur bleibt dann auf der Leistungsseite Reifen"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Reifenservice und Reifenhandel",
     "hinweis": "Saison-Termine (Oktober bis Dezember, März bis Mai) mit freien Tagen als Text, Einlagerung mit Protokoll (Profiltiefe, DOT, Schäden) und Abholung; Reifenangebote mit EU-Label am Preis. Die Reifenflanke ist hier die Startseite: Größe eingeben oder vom Reifen ablesen.",
     "sektionen": [
      "Räderwechsel-Termine der Saison",
      "Einlagerung (Preis je Saison, Protokoll, Versicherung)",
      "Reifenangebote mit EU-Reifenlabel und Montagepreis"
     ],
     "weglassen": [
      "Fahrzeugbestand"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Karosserie- und Lackierbetrieb / Unfallinstandsetzung",
     "hinweis": "Erster Weg ist „Unfall gehabt? So geht es weiter“ in vier Schritten (sichern, Fotos, Gutachter, Abrechnung mit der Versicherung) mit Telefon. Vorher und nachher als zwei feste Fotos mit Datum, kein Regler (Signatur von handwerk). Smart Repair und Delle mit ab-Preisen, Lackierung nach Befund.",
     "sektionen": [
      "Unfall gehabt? Erste Schritte (prozess-timeline-wachsende-linie)",
      "Schaden melden mit Fotos (mehrschritt-anfrage, Variante senkrecht)",
      "Versicherung und Gutachter (FAQ)"
     ],
     "weglassen": [
      "Festpreise auf Smart Repair und Glas kürzen",
      "Fahrzeugbestand"
     ],
     "muster_zusatz": []
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Leicht: kaum JavaScript, Preis-Reiter und Akkordeons nativ, Reifenflanke als kleines Inline-SVG. Hero-Foto AVIF mit fetchpriority=high. Der Fahrzeug-Feed wird serverseitig zwischengespeichert (nicht live beim Besuch vom Portal geladen), Bilder in festen Seitenverhältnissen und lazy mit sizes=\"auto\". Buchungs-Widget, Karte und Bewertungs-Live-Ansicht erst nach Klick. Mona Sans und Google Sans Flex als Variable-WOFF2, nur benötigte Achsen (Mona Sans wght und wdth 75–85; Google Sans Flex wght und opsz, ROND fest auf 0), nur Latin. sofort-navigation-vorladen für Festpreise, Termin und Bestand, nie für die Buchungsbestätigung.",
   "offen": [
    "Fehlender Baustein (siehe kfz-werkstatt-autohaus-fehlend.md): fahrzeugbestand-feed-teaser. Die id steht schon in der Sektion Fahrzeugbestand und wird von der Prüfung als unbekannt gemeldet.",
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven nicht gemessen. Eine Referenz mit vorbildlicher Festpreisliste und echtem Hol- und Bringdienst fehlt noch (die geprüften Werkstätten nennen kaum Preise).",
    "Beide Schriftdateien liegen unter assets/fonts (mona-sans-latin-wdth-normal.woff2, google-sans-flex-latin-wght-normal.woff2), nur Latin; Latin Extended bei Bedarf ergänzen.",
    "Eintrag in werkzeug/fundus/rezept-finder.json fehlt (Vorschlag: ziele termin, kauf, anfrage; begriffe Kfz-Werkstatt, Autowerkstatt, Werkstatt, Autohaus, Gebrauchtwagen, Reifenservice, Reifenhandel, Karosserie, Lackiererei, Unfallinstandsetzung, HU, TÜV, Autoservice). Leitfaden Abschnitt 9 nennt Kfz noch als Lücke."
   ],
   "stimmung_tags": [
    "präzise",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     40,
     56,
     80,
     120
    ],
    "sektion": "clamp(56px, 7vw, 104px)",
    "dichte": "dicht",
    "hinweis": "Schnell zu scannen: Festpreis-Tabelle mit 12 px Zeilen, Terminstrecke mit 16 px zwischen Feldern, kurze Sektionsabstände."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 3vw, 40px)",
    "spalt": "clamp(12px, 2vw, 24px)",
    "max_breite": "1280px",
    "hinweis": "Hero 5/7 (Text/Foto), darunter die Festpreis-Zeile über alle 12 Spalten auf Asphalt. Fahrzeugkarten 3 Spalten mit Pflichtzeile."
   },
   "form": {
    "radius_klein": "4px",
    "radius_gross": "8px",
    "pille": false,
    "linie": "2px #232629 um gelbe Knöpfe auf hellem Grund; Tabellen 1px #595E63 mit 25 % Deckkraft",
    "schatten": "nur die Tiefen-Taste (tiefen-taste-3d, Variante stapel) für „Termin buchen“; sonst keiner",
    "hinweis": "Werkstatt-Taster statt Pille: 4 px an Knöpfen und Feldern, 8 px an Karten und Fotos. Alle anderen Knöpfe flach."
   },
   "bildsprache": {
    "licht": "Echtes Werkstattlicht, Röhrenlicht erlaubt, nichts poliert.",
    "ausschnitt": "Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich.",
    "personen": "Ja: das Team in Arbeitskleidung mit Namen.",
    "formate": [
     "3:2",
     "4:3",
     "16:9"
    ],
    "nicht": "Keine glänzenden Neuwagen-Stockfotos, keine Schraubenschlüssel-Clipart, keine Herstellerfarben als Fläche, kein Karussell."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurz: Leistung, Preis, Zeit. Preise mit Stand-Datum, „ab“ nur mit dem Satz, wovon es abhängt.",
    "haltung": "Bodenständig und verlässlich; klare Zusagen nur, wenn der Betrieb so arbeitet.",
    "beispiele": [
     "Räderwechsel ab [Preis] €, inklusive Auswuchten.",
     "Bevor wir mehr machen, rufen wir Sie an."
    ],
    "nicht": "„Ihr Auto ist bei uns in besten Händen“, „Rundum-sorglos“, „0 %-Finanzierung“ ohne Pflichtangaben."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; darunter die Festpreis-Zeile über alle 12.",
    "bild": "Echtes Werkstattfoto, 3:2; beim Autohaus ein echtes Fahrzeug vom Hof (dann Pkw-EnVKV-Zeile).",
    "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), Mona Sans 800 wdth 80, links.",
    "handlung": "„Termin buchen“ (gelbe Tiefen-Taste) und Telefon als tel:-Link mit sichtbarer Nummer.",
    "zusatz": "Öffnungsstatus „Heute bis 18 Uhr geöffnet“ aus echten Zeiten; drei Festpreise mit Stand-Datum direkt darunter."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/kfz-werkstatt-autohaus/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/kfz-werkstatt-autohaus/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/kfz-werkstatt-autohaus/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/kfz-werkstatt-autohaus/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "vorher-nachher-vergleichsregler"
     ],
     "grund": "Signatur von handwerk; Unfallinstandsetzung als zwei feste Fotos nebeneinander mit Datum"
    },
    {
     "ids": [
      "kostenrechner-konfigurator"
     ],
     "grund": "Reparaturkosten hängen vom Befund ab (wann_nicht: jeder Auftrag anders); Festpreise als Tabelle und Kostenvoranschlag"
    },
    {
     "ids": [
      "cinematic-video-hero",
      "interaktives-3d-hero"
     ],
     "grund": "lange Ladezeit; der erste Bildschirm ist Termin, Telefon und Preis"
    },
    {
     "ids": [
      "hide-on-scroll-header"
     ],
     "grund": "Telefon und „Termin buchen“ müssen immer erreichbar sein"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "hochgezählte „10.000 reparierte Autos“ wirken unseriös"
    },
    {
     "ids": [
      "kreistext-siegel-rotierend"
     ],
     "grund": "„Meisterbetrieb“-Stempel ist Template-Klischee; Schrift auf dem Rund gibt es nur an der Reifenflanke, und sie dreht sich nicht"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "Markenlogos ziehen vorbei, ohne etwas zu sagen; Partner als ruhiges Raster"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "bild-zoom-in-maske"
     ],
     "grund": "auf Fahrzeugfotos – verfälscht Fotos, die verkaufen; Fahrzeugbilder stehen still"
    },
    {
     "ids": [
      "glas-button",
      "frosted-glass-erweitert"
     ],
     "grund": "Glas über Hallenfotos senkt den Kontrast"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "bremsen, wer schnell einen Preis sucht"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Buchung eine Bestätigung mit Datum, Uhrzeit, Leistung und Telefonnummer"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "kein KI-Chat statt Annahme; wenn ein Assistent kommt, beim Start gekennzeichnet (Art. 50 KI-VO)"
    },
    {
     "ids": [],
     "grund": "Stockfotos von Mechanikern mit sauberen Händen und Neuwagen im Studio – echte Werkstatt, echte Fahrzeuge vom Hof"
    }
   ],
   "alle_muster": [
    {
     "id": "text-on-path",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/meta.json",
     "variante": "reifen",
     "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo?v=reifen"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "plz",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "vorauswahl",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "datei-upload-ablage",
     "rolle": "Sektion: Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/meta.json",
     "variante": "foto",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=foto"
    },
    {
     "id": "speisekarte-editorial",
     "rolle": "Sektion: Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json",
     "variante": "preisliste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "variante": "leistungen",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "handwerk",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk"
    },
    {
     "id": "fahrzeugbestand-feed-teaser",
     "rolle": "Sektion: Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/meta.json"
    },
    {
     "id": "objekt-steckbrief-expose",
     "rolle": "Sektion: Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/meta.json",
     "variante": "fahrzeug",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=fahrzeug"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "finanzierung-pflichtangaben",
     "rolle": "Sektion: Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/meta.json",
     "variante": "fahrzeugkarte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=fahrzeugkarte"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So läuft Ihr Werkstattbesuch (Termin → Annahme mit Kostenrahmen → Anruf vor jeder Mehrarbeit → Fertigmeldung per SMS oder Anruf → Abholung mit Erklärung der Rechnung; nur versprechen, was der Betrieb so macht)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Bewertungen (Google-Profil mit Schnitt, Anzahl, Stand-Datum und Echtheitshinweis direkt daneben; drei Stimmen mit Antwort des Betriebs; Live-Ansicht nur per Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "pille",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Team und Meister (Inhaber:in oder Werkstattmeister:in mit Foto, Annahme mit Durchwahl, Qualifikationen wie Meisterbrief und Hochvolt; bis etwa fünf Personen als ein Satz mit kleinen Porträts, darüber Raster)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Partner und Nachweise (Kfz-Innung, Werkstattsystem, Prüforganisation im Haus mit HU-Tagen, Herstellerzulassungen; nur mit Erlaubnis und aktuell)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Karriere und Ausbildung (Kfz-Mechatroniker:in, Servicetechniker:in, Ausbildung; Stellen direkt offen mit Gehalt, Initiativbewerbung; eigene Karriere-Microsite nach arbeitgeber-karriere)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "wenige",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)",
     "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": "kontakt-anfrage-formular",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "werkstatt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Betrieb kein Kleinstunternehmen ist – vom Kunden prüfen lassen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "kontakt",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "icon-squash-stretch",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Galerie",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "tiefen-taste-3d",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
     "variante": "stapel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=stapel"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "tausch",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
    },
    {
     "id": "token-toggle-asymmetrisch",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "agentenformular-webmcp",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=termin"
    }
   ]
  },
  {
   "id": "arbeitgeber-karriere",
   "name": "Arbeitgeber: Einblick statt Floskel",
   "branche": "Karriereseite und Recruiting-Microsite eines KMU (Handwerk, Pflege, Industrie, Gastronomie, Handel)",
   "stimmung": [
    "ehrlich",
    "nahbar",
    "konkret",
    "warm"
   ],
   "kurz": "Eine Seite für Menschen, die gerade einen Job suchen, oft am Handy und in der Pause: oben das echte Angebot mit Gehaltsspanne, darunter die offenen Stellen und eine Kurzbewerbung ohne Anschreiben. Danach erst die Einblicke: eine Collage aus echten Handyfotos des Teams, ein Tag im Betrieb als waagerechte Zeitleiste, Stimmen mit Namen und Benefits als Zahlen statt Icons. Funnel Display und Funnel Sans, Kreide und Tannengrün, Klatschmohn nur für „Bewerben“. Fotos und Zettel landen wie Sticker mit einem kleinen Überschwinger, Menüs und Formulare bleiben ruhig. Anders als pflege (zweite Startseite im Dienstleister-Auftritt) ist das hier ein eigener Auftritt nur fürs Recruiting, für jede Branche.",
   "referenzen": [
    {
     "seite": "MFM Elektrotechnik (Elektromeisterbetrieb, Wunstorf / Bad Nenndorf; Stellenseite)",
     "url": "https://karriere.mfm.energy/stelle/elektroniker-energie-gebaeudetechnik-bad-nenndorf/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://karriere.mfm.energy/stelle/elektroniker-energie-gebaeudetechnik-bad-nenndorf/",
     "beobachtung": "Live geprüft 02.11.2026 (Seite per WebFetch als Text abgerufen; CSS, Schriften und Kurven nicht gemessen): Betrieb mit „rund zehn Leuten“, Stelle mit Gehaltsspanne „19,50 bis 25,00 € pro Stunde brutto“, 38 Stunden, 30 Urlaubstage; Probetag „einen Tag mitfahren“ mit Baustellen, Werkzeug und Kollegen; Anschreiben und Zeugnisse optional; Ansprechperson mit Name, E-Mail und Telefon. Nicht übernehmen: Gehaltsvorstellung als Formularfeld, Lebenslauf als Pflicht, keine Team-Stimmen, Ansprechperson ohne Foto."
    },
    {
     "seite": "Kälte-Bast (Kälte- und Klimatechnik, Hamburg; Azubi-Microsite)",
     "url": "https://karriere.kaelte-bast.de/azubi",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://karriere.kaelte-bast.de/azubi",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): eigene Microsite eines Familienbetriebs (75 Jahre), Formular „nicht länger als 30 Sekunden“, kein Anschreiben, kein Lebenslauf; Ablauf Formular → Telefonat → Gespräch vor Ort oder per Video; konkrete Benefits (30 Tage Urlaub, „4 1/2 Tage“-Woche, Jobrad, Arbeitskleidung, Smartphone und Tablet, Betriebsarzt); Geschäftsführung und Personalleitung mit Namen. Nicht übernehmen: „weit über dem Tarif“ ohne Betrag, keine Stimmen, ein Bild dreimal."
    },
    {
     "seite": "Siloanlagen Achberg (Anlagenbau, Achberg; Ausbildungsstelle Mechatroniker)",
     "url": "https://www.achberg.com/karriere/ausbildung/ausbildung-zum-mechatroniker-m-w-d/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.achberg.com/karriere/ausbildung/ausbildung-zum-mechatroniker-m-w-d/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Vergütung je Ausbildungsjahr in Euro (1.300 / 1.400 / 1.500 / 1.600 €), Benefits als Klartext-Liste („30 TAGE URLAUB“, „KEINE SCHICHTARBEIT UND FLEXIBLE ARBEITSZEITEN“, Kinderbetreuungszuschuss, betriebliche Altersvorsorge), Start ohne Unterlagen mit Telefonat oder Rückruf-Formular, Ansprechperson Personal mit Durchwahl, Stimme eines Azubis mit Vornamen und eines Abteilungsleiters. Nicht übernehmen: 3,5 Jahre Ausbildung, aber vier Vergütungsjahre ohne Erklärung."
    },
    {
     "seite": "Autohaus Siemon (Münster; Ausbildungsstelle Kfz-Mechatroniker)",
     "url": "https://autohaus-siemon.de/karriere/azubi-kfz-mechatroniker-m-w-d-in-muenster-08-26/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://autohaus-siemon.de/karriere/azubi-kfz-mechatroniker-m-w-d-in-muenster-08-26/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch als Text): Bewerbung in drei Schritten, wahlweise klassisch oder per Video-Link, Startdatum der Ausbildung genannt. Als Gegenbeispiel aufgenommen: „Ohne Anschreiben und ohne Lebenslauf“ im Intro, aber im klassischen Weg Anschreiben, Lebenslauf und Zeugnisse als Pflicht; Vergütung nur „attraktiv und leistungsgerecht“; keine Stimmen, keine Ansprechperson mit Namen."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "abweichung": "Neue Paarung aus einer Superfamilie, beide template_ok. funnel-display (NORD ID) steht in keinem anderen Rezept; die trichterförmig geschnittenen Strichenden geben großen, kurzen Sätzen („19,50 bis 25 € die Stunde.“) Charakter, ohne verspielt zu werden. funnel-sans ist damit in zwei Rezepten (fitness nutzt sie als Text neben Anybody) und hat Tabellenziffern (im Font geprüft: tnum vorhanden) für Gehälter, Uhrzeiten und Urlaubstage. Bewusst ohne Handschrift-Akzent: Notizen in der Collage sind echte Fotos von Zetteln oder stehen in Funnel Sans kursiv, keine Fake-Handschrift. Unterschied zu pflege (Literata + Hanken, Pflaume), kurs (Bricolage + Onest + Shantell) und fitness (Anybody + Funnel Sans + Mono): kein Serif, keine Mono, Display aus derselben Familie wie der Text.",
    "headline": "funnel-display",
    "text": "funnel-sans",
    "akzent": "",
    "groessen": "h1 Funnel Display clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), wght 700, Laufweite -0.03em, Zeilenhöhe 0.96; h2 clamp(1.75rem, 1.3rem + 2vw, 3rem), wght 600, -0.02em; h3 Funnel Sans 1.25rem wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, max. 62ch. Gehaltsspanne in Stellenkarten Funnel Sans 1.25rem wght 700 Tabellenziffern („3.100–3.600 € brutto im Monat“); Uhrzeiten in der Tageszeitleiste Funnel Display 2rem wght 600 Tabellenziffern; Bildunterschriften (Name, Aufgabe, Datum) Funnel Sans 0.875rem wght 500; Zettel in der Collage Funnel Sans kursiv 1rem. Höchstens zwei Gewichte je Familie im Text (400/700).",
    "techniken": [
     "fluide-typo-clamp-cqi",
     "headline-laufweite-zeilenabstand",
     "tabellenziffern",
     "lesesatz-text-wrap",
     "text-box-trim"
    ],
    "alternative_eigenprojekt": "Headline cabinet-grotesk in 700, Text general-sans (beide ITF) – nur für Eigenprojekte, nicht für Templates."
   },
   "farbe": {
    "prinzip": "Kreide als Grund, Tinte statt Schwarz, Tannengrün als Hausfarbe für die dunklen Sektionen (Ein Tag als …, Stimmen, Fußzeile), Klatschmohn nur für „Bewerben“ und den aktiven Schritt der Kurzbewerbung. Auf Tannengrün steht der Bewerben-Knopf mit 2 px Kreide-Rand (Klatschmohn auf Tannengrün hat nur 1,9 : 1). Die echten Fotos bringen die übrige Farbe; im Projekt ersetzt die Hausfarbe des Arbeitgebers das Tannengrün, der Signalton bleibt ein einziger.",
    "beispiel": [
     "#F6F3EC Grund Kreide",
     "#161616 Text Tinte (16,3 : 1)",
     "#5A5650 Sekundärtext, Bildunterschrift, Stand-Datum (6,6 : 1)",
     "#EFE6D2 Zettel und Hinweisflächen (Tinte darauf 14,6 : 1)",
     "#1D4A3A Tannengrün: dunkle Sektionen, Fußzeile (Kreide darauf 9,1 : 1)",
     "#C8382A Signal Klatschmohn: Bewerben, aktiver Schritt (Weiß darauf 5,2 : 1; auf Kreide 4,7 : 1; auf Tannengrün nur mit 2 px Kreide-Rand)"
    ]
   },
   "animationsstil": "token-federnd-verspielt",
   "animationsstil_hinweis": "Federn nur auf kleinen und mittleren Teilen, die ankommen: die Fotos und Zettel der Collage beim Laden (einmal), der Haken nach dem Absenden der Kurzbewerbung, Druck auf Knöpfe, aktive Filter-Chips. Nie auf Deckkraft (200 ms linear), nie auf Flächen über die halbe Breite, nie auf Text. Menü, Akkordeon, Schritte der Kurzbewerbung und Dialoge laufen über animationsstil_ui token-toggle-asymmetrisch (öffnen 280 ms, schließen 190 ms), weil token-federnd-verspielt große Flächen ausschließt. Die Tageszeitleiste ist scrollgebunden und linear.",
   "bewegung": {
    "easing": "cubic-bezier(0.34, 1.56, 0.64, 1) (token-federnd-verspielt, Spielart Überschwinger, nur Transform kleiner Elemente); UI über token-toggle-asymmetrisch: cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurven und Dauern aus den Animationsstilen",
    "dauer_ms": "150 (Druck, Farbe, Schatten; Farbe linear), 400 (Knopf-Hover, Haken nach dem Absenden), 500 (Ankunft der Collage-Teile, Versatz 50 ms, Weg höchstens 48 px, Drehung auf den Endwinkel); UI: 280 öffnen, 190 schließen (Menü, Akkordeon, Schritt der Kurzbewerbung, Dialog)",
    "regel": "Die Collage kommt einmal an und steht dann still (keine Parallaxe, kein Ziehen). Überschwingen nur auf Transform von Fotos, Zetteln, Haken und Knöpfen, nie auf Deckkraft, nie auf Flächen über die halbe Breite. Stellen, Gehälter und Formular stehen sofort, keine Einblendungen beim Scrollen. Die Tageszeitleiste läuft nur, solange gescrollt wird; auf dem Telefon ist sie eine native Wischleiste ohne Pin. Bei prefers-reduced-motion stehen alle Fotos an ihrem Platz (Rückfall cubic-bezier(0, 0, 0.58, 1), 200 ms), die Zeitleiste ist eine senkrechte Liste.",
    "herkunft": "Kurve, Landen (translate 48 px auf Touch, Rotation auf Endwinkel, Deckkraft 200 ms linear) und Druck (scale 0.95, 150 ms) aus token-federnd-verspielt (bau.werte, Variante ueberschwinger: Karten 500 ms, UI 400 ms); UI-Paar aus token-toggle-asymmetrisch auf UI-Maß gekürzt. Collage-Aufbau aus collage-scrapbook, dessen Kurve (easeInOutCubic) durch die des Stils ersetzt. Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Collage aus fünf bis sieben echten Fotos aus dem Betrieb (Handyfotos reichen: Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit, alle mit Einwilligung), leicht gedreht auf einem verdeckten 12er-Raster, dazu ein Zettel mit einem echten Satz aus dem Team. Links davon die H1 mit dem konkreten Angebot („Elektroniker:in in Wunstorf. 19,50 bis 25 € die Stunde, 38 Stunden, Freitag früher Schluss.“), darunter „Offene Stellen“ und „In zwei Minuten bewerben“ sowie die Ansprechperson mit Foto, Telefon und WhatsApp. Mobil drei bis vier Fotos im Hochformat unter der H1. Ohne eigenes Bildmaterial entfällt die Collage (wann_nicht) und der Hero wird ein einzelnes echtes Teamfoto; das Rezept verlangt aber eigenes Material, also vorher einen halben Tag mit dem Handy fotografieren. Kein Imagefilm im Hero, keine Stockfotos.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "mobile-bottom-navigation"
    ],
    "hero": [
     "collage-scrapbook"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)",
      "muster": [
       "stellen-karriere",
       "stellenseite-mit-jobposting"
      ],
      "varianten": {
       "stellen-karriere": "liste"
      }
     },
     {
      "zweck": "Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion",
       "datei-upload-ablage"
      ],
      "varianten": {
       "mehrschritt-anfrage": "ring",
       "formular-fehlerzusammenfassung": "kompakt",
       "datei-upload-ablage": "dokument"
      }
     },
     {
      "zweck": "So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird)",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Ein Tag als … (je Beruf eine Strecke mit vier bis acht Stationen und Uhrzeit, von Schichtbeginn bis Feierabend: echte Fotos, ein Satz je Station, auch was anstrengend ist; auf dem Telefon als Wischleiste)",
      "muster": [
       "horizontal-scroll-section"
      ]
     },
     {
      "zweck": "Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)",
      "muster": [
       "testimonials-neu-gedacht",
       "eigener-videoplayer"
      ],
      "varianten": {
       "testimonials-neu-gedacht": "zitat",
       "eigener-videoplayer": "kapitel"
      }
     },
     {
      "zweck": "Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft)",
      "muster": [
       "zahlen-fakten-section"
      ],
      "varianten": {
       "zahlen-fakten-section": "tabelle"
      }
     },
     {
      "zweck": "Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen"
      }
     },
     {
      "zweck": "Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung)",
      "muster": [
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)",
      "muster": [
       "team-ueber-mich-layout",
       "oeffnungszeiten-status",
       "karte-zwei-klick"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement",
       "oeffnungszeiten-status": "termin",
       "karte-zwei-klick": "bild"
      }
     },
     {
      "zweck": "Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)",
      "muster": [
       "footer-newsletter-mit-persoenlichkeit",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "footer-newsletter-mit-persoenlichkeit": "basis",
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [
     "horizontal-scroll-section"
    ],
    "schrift_animation": [],
    "hover": [],
    "cursor": [],
    "mikro": [
     "checkbox-radio-animiert",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit",
     "studio-visitenkarte-footer"
    ],
    "button": [
     "fuellung-vom-eintrittspunkt",
     "pfeil-icon-button"
    ]
   },
   "signatur": [
    "collage-scrapbook",
    "horizontal-scroll-section"
   ],
   "optional": [],
   "varianten_demo": {
    "fuellung-vom-eintrittspunkt": "basis",
    "pfeil-icon-button": "linie",
    "mobile-bottom-navigation": "fab",
    "studio-visitenkarte-footer": "basis",
    "footer-newsletter-mit-persoenlichkeit": "basis"
   },
   "nicht_verwenden": [
    "cinematic-video-hero – ein Imagefilm im Hero verdrängt Stellen und Gehalt und lädt lange; Videos gehören zu den Stimmen, mit Untertiteln",
    "zahlen-odometer – „98 % zufriedene Mitarbeitende“ hochgezählt ist die Floskel in Zahlen",
    "rotating-words / typewriter-natural – „Wir suchen dich als … Held:in“ versteckt, welche Stelle es wirklich gibt",
    "bento-grid-interaktiv / stapelkarten – Benefits als Icon-Kacheln sind genau die Floskel, die das Rezept vermeiden will; Benefits als Tabelle mit Zahlen",
    "logo-wand-social-proof – gekaufte Arbeitgebersiegel und Awards ohne Jahr und Quelle; echte Auszeichnungen als Textzeile mit Jahr",
    "graustufen-zu-farbe – die meisten Bewerbenden kommen per Handy und sähen die Farbe nie (wann_nicht)",
    "flick-karten-stapel – Signatur von friseur; außerdem Wischgeste statt lesbarer Liste",
    "corner-shape-eckenformen – Signatur von pflege",
    "konfetti-erfolg – nach der Bewerbung eine ruhige Bestätigung mit Name, Foto und Rückrufzeit der Ansprechperson",
    "prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein Chatbot statt Ansprechperson; wenn doch, beim Start gekennzeichnet (Art. 50 KI-VO)",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – bremsen auf dem Handy und gehören zu Agenturseiten",
    "hide-on-scroll-header – „Bewerben“ und Telefon müssen immer erreichbar sein",
    "Stockfotos von lachenden Teams am Laptop, Daumen hoch und Puzzleteile – nur echte Menschen aus dem Betrieb, mit Einwilligung; KI-Bilder von „Mitarbeitenden“ gar nicht"
   ],
   "regeln": [
    "Erster Bildschirm: Collage aus echten Fotos, H1 mit dem konkreten Angebot (Beruf, Ort, Gehaltsspanne oder Tarif, Stunden), „Offene Stellen“ und „In zwei Minuten bewerben“, Ansprechperson mit Telefon und WhatsApp. Die untere Mobilleiste (mobile-bottom-navigation, Variante fab) zeigt Bewerben, Anrufen und WhatsApp.",
    "Gehalt in jeder Stelle: Spanne in Euro brutto mit Bezug (Stunde, Monat, Jahr) oder Tarifvertrag mit Entgeltgruppe, dazu Zuschläge. Grundlage: Art. 5 der Entgelttransparenzrichtlinie (EU) 2023/970 verlangt Information über Einstiegsentgelt oder Spanne vor dem Vorstellungsgespräch und verbietet die Frage nach dem bisherigen Gehalt; die Frist zur Umsetzung lief am 07.06.2026 ab, ein deutsches Gesetz ist Stand 02.11.2026 nicht in Kraft (Bundesregierung, BT-Drs. 21/7026). Die Spanne trotzdem nennen; Umsetzung in Deutschland vom Kunden prüfen lassen.",
    "AGG: Stellentitel geschlechtsneutral oder mit (m/w/d), Texte ohne Merkmale aus § 1 AGG („junges Team“, „Muttersprache Deutsch“, „bis 35 Jahre“); stattdessen Anforderungen der Aufgabe („Deutsch gut genug für Kundengespräche“). Kein Foto, kein Geburtsdatum, keine Staatsangehörigkeit als Pflichtfeld. Vom Kunden prüfen lassen.",
    "Kurzbewerbung: höchstens fünf Pflichtangaben, kein Anschreiben, Lebenslauf freiwillig, keine Frage nach dem bisherigen Gehalt und keine Gehaltsvorstellung als Pflichtfeld (MFM fragt sie ab). Was im Intro versprochen wird, gilt im Formular (Siemon verspricht „ohne Lebenslauf“ und verlangt ihn dann). Nach dem Absenden: Bestätigung mit Name und Foto der Ansprechperson und der Frist, bis wann sie sich meldet.",
    "Datenschutz bei Bewerbungen: Hinweis nach Art. 13 DSGVO direkt am Formular, Speicherdauer nach Absage (Frist für AGG-Ansprüche: zwei Monate, § 15 Abs. 4 AGG; übliche Löschfrist etwa sechs Monate) und Talent-Pool nur mit eigener Einwilligung; WhatsApp-Weg mit Hinweis auf die Datenübermittlung. Text vom Kunden; Claude schreibt keine Rechtstexte.",
    "Echte Einblicke: Fotos, Namen, Stimmen und Videos nur von echten Mitarbeitenden mit schriftlicher, widerrufbarer Einwilligung; wer geht oder widerruft, verschwindet von der Seite. Keine Stockfotos, keine KI-Bilder von Menschen; wo KI-Bilder doch vorkommen, gekennzeichnet (Art. 50 KI-VO). Die Collage (collage-scrapbook) ist statisch, Teile sind nicht ziehbar, der Inhalt steht zusätzlich als Bildbeschreibung im Text.",
    "Benefits konkret: jede Leistung mit Zahl und Bedingung („30 Tage Urlaub“, „Jobrad, wir zahlen 30 € im Monat dazu“, „1.000 € Weiterbildungsbudget im Jahr“); keine Floskeln wie „Obstkorb“, „flache Hierarchien“, „familiäres Umfeld“ ohne Beleg. Auch sagen, was es nicht gibt (Wochenenddienst, Rufbereitschaft, Schicht).",
    "Ein Tag als … (horizontal-scroll-section): vier bis acht Stationen mit Uhrzeit und echtem Foto; auf dem Telefon und bei reduzierter Bewegung kein Pin, sondern eine Wischleiste mit Pfeilknöpfen bzw. eine senkrechte Liste. Keine Kerninformation nur in der Zeitleiste (Gehalt, Stunden, Ort stehen in der Stelle).",
    "Ausbildung: Vergütung je Ausbildungsjahr in Euro, mindestens nach § 17 BBiG bzw. Tarif, Dauer und Zahl der Jahre stimmen überein (Achberg listet vier Jahre bei 3,5 Jahren Dauer), Übernahme nur versprechen, wenn sie gilt. Für Minderjährige eine kurze Info für Eltern.",
    "Stellenseiten für Google: JobPosting-Daten nur auf der Seite einer einzelnen Stelle, passend zum sichtbaren Text, mit datePosted, Ort und, wo vorhanden, baseSalary und validThrough; abgelaufene Stellen sofort entfernen oder als beendet kennzeichnen (Google erlaubt keine abgelaufenen Stellen). Nicht auf der Übersicht.",
    "Arbeitgeberbewertungen (kununu, Google): wenn gezeigt, mit Quelle, Schnitt, Anzahl, Stand und dem Hinweis, ob und wie geprüft wird; lieber verlinken als einbetten.",
    "Bewegung nach token-federnd-verspielt mit UI-Stil token-toggle-asymmetrisch: Fotos und Zettel der Collage landen einmal mit kleinem Überschwinger (500 ms), der Haken nach dem Absenden federt (400 ms); Menü, Akkordeon und Formularschritte öffnen 280 ms und schließen 190 ms ohne Federn. Der Bewerben-Knopf (fuellung-vom-eintrittspunkt) füllt sich vom Eintrittspunkt, auf Touch nur Druck und Farbe; Links zu Stellen als pfeil-icon-button, Variante linie.",
    "Barrierefreiheit: Bewerbung ohne Upload möglich (Telefon, WhatsApp, Formular), Fehlerliste bei der Kurzbewerbung, 200 % Zoom und Kontrastmodus geprüft. Ein Hinweis, dass Bewerbungen schwerbehinderter Menschen willkommen sind, nur ehrlich und mit Ansprechperson. Pflichtangaben (Impressum, Datenschutz) wie auf jeder Seite; Claude schreibt keine Rechtstexte."
   ],
   "varianten": [
    {
     "name": "Ausbildung und Praktikum (Azubi-Microsite)",
     "hinweis": "Zielgruppe 15 bis 19 Jahre und ihre Eltern. Vergütung je Jahr gleich oben, Praktikum zum Reinschnuppern als eigener kurzer Weg (Wunschwoche, Schule, Telefon der Eltern freiwillig), Schulabschluss nur nennen, wo er wirklich nötig ist. Stimmen von Azubis aus allen Lehrjahren; Fotos von Minderjährigen nur mit Einwilligung der Eltern.",
     "sektionen": [
      "Deine Ausbildung bei uns (Berufe mit Vergütung je Jahr)",
      "Praktikum buchen (mehrschritt-anfrage, Variante ring)",
      "Ein Tag als Azubi (horizontal-scroll-section)",
      "Für Eltern (akkordeon-hoehe-auto, Variante faq)"
     ],
     "weglassen": [
      "Was du bekommst – auf Ausbildungs-Benefits kürzen"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Pflege und Gesundheit",
     "hinweis": "Tarif oder AVR mit Entgeltgruppe und Stufe, Schicht- und Tourenmodell als Tabelle, Dienstwagen, Einspringregel und Frei-Garantie nur, wenn sie gelten; Anerkennung ausländischer Abschlüsse mit Ansprechperson. Ist die Karriereseite Teil eines Pflegedienst-Auftritts, gilt dort pflege-dienst-naehe (zweite Startseite); dieses Rezept nur für eine eigene Recruiting-Microsite, ohne Signatur von pflege. Federn hier gedämpft (wann_nicht von token-federnd-verspielt: Gesundheit): Collage-Teile ohne Überschwinger, nur der Haken nach dem Absenden federt.",
     "sektionen": [
      "Dienste und Touren (Tabelle: Früh, Spät, Wochenende, Touren pro Tag)",
      "Anerkennung und Einstieg für internationale Fachkräfte"
     ],
     "weglassen": [],
     "muster_zusatz": []
    },
    {
     "name": "Gastronomie und Hotel",
     "hinweis": "Stundenlohn und Monatsgehalt nebeneinander, Trinkgeld-Regel (wie verteilt wird), Vorlauf des Dienstplans, Personalessen, Unterkunft für Saisonkräfte mit Preis, Minijob und Aushilfe mit Stundenlohn. Ein Tag als … mit echten Zeiten auch für Spätdienst.",
     "sektionen": [
      "Schichten und Dienstplan (wann er steht, wie getauscht wird)",
      "Saison und Unterkunft"
     ],
     "weglassen": [
      "Ausbildung, wenn nicht ausgebildet wird"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Industrie mit Schichtbetrieb",
     "hinweis": "Schichtmodell als Tabelle mit Zuschlägen in Prozent, Tarif mit Entgeltgruppe (z. B. Metall und Elektro), Werksverkehr und Parken, Probearbeit in der Linie. Passt als Microsite zu industrie-b2b-mittelstand; Schrift, Farbe und Signatur bleiben die dieses Rezepts.",
     "sektionen": [
      "Schichtmodell und Zuschläge",
      "Anfahrt zum Werk (Werksbus, Rad, Parken)"
     ],
     "weglassen": [],
     "muster_zusatz": []
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Die Collage ist der größte Posten: fünf bis sieben Fotos als AVIF mit festen Seitenverhältnissen, das erste mit fetchpriority=high, die übrigen nach dem LCP; mobil nur drei bis vier. Keine Ziehen-Bibliothek nötig (Collage statisch), die Ankunft per CSS. Die Zeitleiste als CSS-Variante (view-timeline, sticky) mit Rückfall auf eine Wischleiste; GSAP und ScrollTrigger nur, wenn die CSS-Fassung nicht reicht. Videos nur nach Klick, mit Untertiteln, Vorschaubild statt Autoplay. Funnel Display und Funnel Sans als Variable-WOFF2, nur Latin, nur wght. Die Seite muss auf einem alten Handy im Mobilfunk schnell sein: Stellen und Kurzbewerbung ohne Bibliothek.",
   "offen": [
    "Fehlender Baustein (siehe arbeitgeber-karriere-fehlend.md): stellenseite-mit-jobposting. Die id steht schon in der Sektion Offene Stellen und wird von der Prüfung als unbekannt gemeldet.",
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven nicht gemessen. Ein Vorbild aus Gastronomie oder Pflege mit Gehaltsangabe auf der eigenen Seite fehlt noch; die Suche lieferte fast nur Jobbörsen.",
    "Signatur collage-scrapbook: wann_nicht nennt „seriöse B2B-Kontexte“. Die Karriereseite eines Industrie-Arbeitgebers richtet sich an Bewerbende, nicht an Einkäufer; AD prüfen, ob die Collage für Industrie-Arbeitgeber ruhig genug ist (sonst weniger Drehung, ±2°).",
    "Die Demo von collage-scrapbook lebt in der Welt von verein (Big Shoulders, Caveat, Riso-SVGs) und nutzt Draggable; beim Nachbau nur Aufbau und Raster übernehmen, Ziehen weglassen.",
    "Deutsche Umsetzung der Entgelttransparenzrichtlinie bei jedem Bau neu prüfen (Stand 02.11.2026: kein Gesetz in Kraft).",
    "Schriftdatei funnel-display liegt noch nicht unter assets/fonts (funnel-sans liegt dort als WOFF).",
    "Eintrag in werkzeug/fundus/rezept-finder.json fehlt (Vorschlag: ziele bewerbung; begriffe Karriereseite, Karriere, Recruiting, Stellenangebote, Jobs, Ausbildung, Azubi, Personalgewinnung, Fachkräfte, Arbeitgebermarke, Employer Branding, Bewerbung)."
   ],
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "stimmung_tags": [
    "warm",
    "verspielt"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     88,
     128
    ],
    "sektion": "clamp(64px, 8vw, 120px)",
    "dichte": "mittel",
    "hinweis": "Mobil zuerst: Stellenkarten mit 16 px Innenabstand und Gehalt oben, Kurzbewerbung mit 20 px zwischen Feldern. Die Collage darf eng überlappen."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 48px)",
    "spalt": "clamp(12px, 2vw, 24px)",
    "max_breite": "1360px",
    "hinweis": "Hero 6/6 (H1 links, Collage rechts auf verdecktem 12er-Raster). Stellen als Liste, Tageszeitleiste waagerecht (horizontal-scroll-section), mobil Wischleiste."
   },
   "form": {
    "radius_klein": "6px",
    "radius_gross": "2px",
    "pille": false,
    "linie": "1px #5A5650 mit 20 % Deckkraft",
    "schatten": "nur Fotos und Zettel der Collage liegen mit kurzem, weichem Schatten wie Papier auf dem Tisch",
    "hinweis": "Fotos fast eckig wie Abzüge, leicht gedreht (Demo collage-scrapbook: 1,5 bis 4°); Knöpfe 6 px. Links zu Stellen als Textlink mit Pfeil (pfeil-icon-button, Variante linie)."
   },
   "bildsprache": {
    "licht": "Echtes Licht im Betrieb, Handyfotos reichen, ungefiltert.",
    "ausschnitt": "Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit.",
    "personen": "Ja: nur echte Mitarbeitende mit schriftlicher, widerrufbarer Einwilligung.",
    "formate": [
     "3:4",
     "4:5",
     "1:1"
    ],
    "nicht": "Keine Stockfotos, keine KI-Bilder von Menschen, kein Imagefilm im Hero, keine Daumen-hoch-Teamfotos."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Kurz und konkret: Beruf, Ort, Gehalt, Stunden. Benefits mit Zahl und Bedingung.",
    "haltung": "Ehrlich und nahbar; sagt auch, was es nicht gibt. Bei Stellen für Führungskräfte oder in sehr förmlichen Betrieben Sie, dann durchgehend.",
    "beispiele": [
     "Elektroniker:in gesucht. 38 Stunden, freitags um 13 Uhr Schluss.",
     "Bewirb dich in zwei Minuten, ohne Anschreiben."
    ],
    "nicht": "„junges, dynamisches Team“, „flache Hierarchien“, „familiäres Umfeld“, „Obstkorb“, Merkmale aus § 1 AGG."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: H1 über Spalte 1 bis 6, Collage über 6 bis 12 auf verdecktem Raster (collage-scrapbook); mobil drei bis vier Fotos im Hochformat unter der H1.",
    "bild": "Fünf bis sieben echte Fotos, 3:4 und 4:5, leicht gedreht, dazu ein Zettel mit einem echten Satz aus dem Team.",
    "h1": "clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), Funnel Display 700, links.",
    "handlung": "„In zwei Minuten bewerben“ (Klatschmohn gefüllt) und „Offene Stellen“ (Textlink mit Pfeil).",
    "zusatz": "Ansprechperson mit Foto, Telefon und WhatsApp unter den Knöpfen; mobil untere Leiste Bewerben / Anrufen / WhatsApp."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/arbeitgeber-karriere/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/arbeitgeber-karriere/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/arbeitgeber-karriere/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/arbeitgeber-karriere/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "cinematic-video-hero"
     ],
     "grund": "ein Imagefilm im Hero verdrängt Stellen und Gehalt und lädt lange; Videos gehören zu den Stimmen, mit Untertiteln"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "„98 % zufriedene Mitarbeitende“ hochgezählt ist die Floskel in Zahlen"
    },
    {
     "ids": [
      "rotating-words",
      "typewriter-natural"
     ],
     "grund": "„Wir suchen dich als … Held:in“ versteckt, welche Stelle es wirklich gibt"
    },
    {
     "ids": [
      "bento-grid-interaktiv",
      "stapelkarten"
     ],
     "grund": "Benefits als Icon-Kacheln sind genau die Floskel, die das Rezept vermeiden will; Benefits als Tabelle mit Zahlen"
    },
    {
     "ids": [
      "logo-wand-social-proof"
     ],
     "grund": "gekaufte Arbeitgebersiegel und Awards ohne Jahr und Quelle; echte Auszeichnungen als Textzeile mit Jahr"
    },
    {
     "ids": [
      "graustufen-zu-farbe"
     ],
     "grund": "die meisten Bewerbenden kommen per Handy und sähen die Farbe nie (wann_nicht)"
    },
    {
     "ids": [
      "flick-karten-stapel"
     ],
     "grund": "Signatur von friseur; außerdem Wischgeste statt lesbarer Liste"
    },
    {
     "ids": [
      "corner-shape-eckenformen"
     ],
     "grund": "Signatur von pflege"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach der Bewerbung eine ruhige Bestätigung mit Name, Foto und Rückrufzeit der Ansprechperson"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "kein Chatbot statt Ansprechperson; wenn doch, beim Start gekennzeichnet (Art. 50 KI-VO)"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "bremsen auf dem Handy und gehören zu Agenturseiten"
    },
    {
     "ids": [
      "hide-on-scroll-header"
     ],
     "grund": "„Bewerben“ und Telefon müssen immer erreichbar sein"
    },
    {
     "ids": [],
     "grund": "Stockfotos von lachenden Teams am Laptop, Daumen hoch und Puzzleteile – nur echte Menschen aus dem Betrieb, mit Einwilligung; KI-Bilder von „Mitarbeitenden“ gar nicht"
    }
   ],
   "alle_muster": [
    {
     "id": "collage-scrapbook",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/meta.json"
    },
    {
     "id": "horizontal-scroll-section",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/meta.json"
    },
    {
     "id": "stellen-karriere",
     "rolle": "Sektion: Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
     "variante": "liste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste"
    },
    {
     "id": "stellenseite-mit-jobposting",
     "rolle": "Sektion: Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/meta.json"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "ring",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=ring"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "datei-upload-ablage",
     "rolle": "Sektion: Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/meta.json",
     "variante": "dokument",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=dokument"
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "testimonials-neu-gedacht",
     "rolle": "Sektion: Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
     "variante": "zitat",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
    },
    {
     "id": "eigener-videoplayer",
     "rolle": "Sektion: Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json",
     "variante": "kapitel",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel"
    },
    {
     "id": "zahlen-fakten-section",
     "rolle": "Sektion: Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
     "variante": "tabelle",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)",
     "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": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Sektion: Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "fab",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "token-federnd-verspielt",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/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": "fluide-typo-clamp-cqi",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
    },
    {
     "id": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "text-box-trim",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
    }
   ]
  },
  {
   "id": "bestattung-wuerdig",
   "name": "Bestattung: würdig und klar",
   "branche": "Bestattungsinstitut / Bestattungshaus / Trauerbegleitung (auch Trauerrede, Baum- und Waldbestattung)",
   "stimmung": [
    "ruhig",
    "würdig",
    "klar",
    "warm"
   ],
   "kurz": "Zwei Türen für zwei sehr verschiedene Lagen: Wer gerade einen Menschen verloren hat, findet ohne Suchen die Nummer, unter der Tag und Nacht jemand abnimmt, und eine Anleitung nach Sterbeort, Schritt für Schritt. Wer vorsorgt, findet Bestattungsarten, offene Kosten mit getrennten Fremdleistungen und eine Vorsorge, deren Geld bei einer Treuhand liegt. Eine Text-Antiqua mit ruhiger Grotesk, Kalk, Sandstein und Schiefer, Moosgrün nur für Anrufen und Anfragen. Kein Kreuz, keine Taube, keine flackernde Kerze. Bilder der Räume blenden langsam über, sonst bewegt sich nur, was jemand öffnet. Signatur: Riffelglas vor den Abschiedsräumen, das erst klar wird, wenn man hineinsehen möchte. Unterschied zu pflege-dienst-naehe (Literata, Pflaume, Sonnengelb, Wegweiser-Ecken) und praxis-gesundheit-ruhig (Hedvig, Petrol, Hovercards): andere Schriften, erdige statt Marken-Farben, weicher Bildstil statt reinem UI-Stil, Diskretion als Material.",
   "referenzen": [
    {
     "seite": "Trostwerk – andere Bestattungen (Hamburg)",
     "url": "https://www.trostwerk.de/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.trostwerk.de/ und https://www.trostwerk.de/bestattung",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text; CSS, Schriften und Kurven nicht gemessen): Navigation in vier Bereichen, darunter Bestattung mit „Was nun zu tun ist“, „Begleitung“, „Danach“ und Leistungen mit „Formalitäten“ und „Vorsorge“. Im Kopf „Tag und Nacht:“ mit Telefonnummer. Die Seite „Was nun zu tun ist“ beruhigt zuerst („Sie haben Zeit“, auch am Sterbebett), dann die Reihenfolge bei erwartetem Tod zu Hause: Hausärztin oder 116 117 für die Todesbescheinigung, danach das Bestattungshaus; Krankenhaus, Hospiz und Heim übernehmen die Bescheinigung selbst; Hinweis, dass Notärzte meist keine ausstellen. Ton warm, Sie-Form, „ein freundlicher und geschützter Ort für alle Menschen“. Zwei Standorte mit Adresse und Zeiten."
    },
    {
     "seite": "Bestattung Wien – Erste Schritte",
     "url": "https://www.bestattungwien.at/erste-schritte",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.bestattungwien.at/erste-schritte",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Erste Schritte gegliedert nach Sterbeort (Zuhause; Krankenhaus, Pflegeheim, Pensionistenheim oder Hospiz; Ausland mit Überführung; öffentlicher Ort; Sternenkinder mit eigenem Leitfaden). Die 24-h-Nummer steht im Kopf („Rund um die Uhr“) und nach jedem Abschnitt noch einmal fett. Unterlagen als Liste (Geburtsurkunde, Meldezettel, Heiratsurkunde, Grabdaten, Vorsorgepolizzen), Ratgeber als PDF. Österreichische Begriffe (Totenbeschau, Parte) beim Übertragen auf Deutschland ersetzen."
    },
    {
     "seite": "mymoria – Beerdigungskosten",
     "url": "https://www.mymoria.de/bestattung/beerdigungskosten/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.mymoria.de/bestattung/beerdigungskosten/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Kosten in Spannen je Bestattungsart (Erdbestattung oft 7.000 bis 12.000 Euro, Feuerbestattung meist 3.000 bis 7.000 Euro, Baum- und Seebestattung darunter) und nach Bestandteilen getrennt: Bestatterleistung, Friedhofsgebühren, Sarg, Urne, Zusatzkosten (Feier, Blumen, Rede, Grabstein, Grabpflege). Kein Rechner, sondern ein kurzes Formular zum Angebot. Telefon im Kopf, „Rund um die Uhr für Sie erreichbar“. Vorbild für die Trennung eigener und fremder Kosten; die Spannen sind bundesweit und gehören nicht auf eine lokale Seite."
    },
    {
     "seite": "trauerhilfe.at – Todesanzeige mit Kondolenzbuch",
     "url": "https://trauerhilfe.at/todesanzeige/125768",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://trauerhilfe.at/todesanzeige/125768",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text; nur der Aufbau übernommen, keine Daten der verstorbenen Person): Gedenkseite mit Name, Ort, Sterbedatum und Alter, Reitern „Parte“, „Kondolenzbuch“, „Gedenkkerzen“ und „Trauerbild“, Zählern an den Reitern. Kerze ohne Registrierung mit Pflichtfeld für Namen oder Wunschtext, „brennt 2 Wochen lang“. Anmeldung vor dem Kondolieren „zum Schutz von Angehörigen gegen unpassende Kommentare“. Block „Bestattung wurde durchgeführt von“ mit Link zum Bestatter."
    },
    {
     "seite": "FriedWald – Kosten",
     "url": "https://www.friedwald.de/kosten",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.friedwald.de/kosten",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Zwei Grabarten mit ab-Preis („Platz im FriedWald ab 590 Euro“, „Baum im FriedWald ab 2.890 Euro“) und was darin steckt (Nutzungsrecht, Eintrag ins Baumregister, Urkunde); getrennt davon die Beisetzungspauschale (450 Euro) und der ausdrückliche Hinweis, mit mindestens 1.800 Euro für das Bestattungshaus zu rechnen; Preise je Standort auf eigenen Seiten. Kostenlose Waldführung als Einstieg. Vorbild für die Rezept-Variante Baum- und Waldbestattung."
    }
   ],
   "schrift": {
    "paarung_basis": "",
    "headline": "source-serif-4",
    "text": "commissioner",
    "akzent": "",
    "groessen": "h1 Source Serif 4 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), wght 400, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.12; h2 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem), wght 400; h3 1.375rem, wght 600. Namen auf Gedenkseiten in Source Serif 4 Italic. Fließtext Commissioner mindestens 1.1875rem (19 px), wght 400, FLAR 0, VOLM 0, Zeilenhöhe 1.65, höchstens 62ch; Navigation und Labels Commissioner 1rem, wght 500; Rubriken in Versal nur kurz und mit +0.06em; Telefonnummer 1.5rem, wght 600, Tabellenziffern; Preise, Daten und Lebensdaten in Tabellenziffern. Nichts fetter als 600.",
    "techniken": [
     "lesesatz-text-wrap",
     "optische-groessen-opsz",
     "tabellenziffern",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Headline zodiak (ITF), Text ranade (ITF) – nur für Eigenprojekte, nicht für Templates.",
    "abweichung": "source-serif-4 ist im Katalog eine Fließtextschrift; hier steht sie als Headline, weil ihr optischer Display-Schnitt (opsz bis 60) in großen Graden fein und ruhig wird, ohne den Luxus-Kontrast von Bodoni oder Gloock. Sie klingt nach gedruckter Trauerkarte, ohne Fraktur- oder Schreibschrift-Klischee. Commissioner ersetzt laut Katalog Optima, die klassische Schrift der Trauerdrucksache; mit FLAR 0 bleibt sie eine sachliche Grotesk und ist auch unter Stress gut lesbar, ohne das Optima-Klischee zu zitieren. Keine der beiden steht in pflege (Literata, Hanken Grotesk) oder praxis (Hedvig Letters Serif, Google Sans Flex). source-serif-4 ist neu in den Rezepten, commissioner steht damit in zwei (gastro als Text). Keine Mono, Labels in der Textschrift (Leitfaden A4)."
   },
   "farbe": {
    "prinzip": "Kalkweiß als Grund, Sandstein für Flächen wie Kosten, Vorsorge und Hinweise, Schiefer (warmes Fast-Schwarz) für die Sofortleiste, dunkle Bänder und den Footer. Moosgrün ist der einzige Signalton: Anrufen, Rückruf, Vorsorge anfragen. Es steht für Ruhe, nicht für Alarm. Auf Schiefer wird der Knopf zu hellem Moos mit Schiefer-Schrift. Kein Schwarzrand, kein Lila oder Violett, kein Gold, keine Verläufe, keine Farbe aus Symbolen. Sekundärtext dunkler als üblich (6,5 : 1), weil viele Leser älter sind oder unter Stress lesen.",
    "beispiel": [
     "#F4F1EB Grund Kalk",
     "#24221F Text (14 : 1)",
     "#E8E1D5 Fläche Sandstein: Kosten, Vorsorge, Hinweise (Text 12 : 1)",
     "#2B2D2C Schiefer: Sofortleiste, dunkle Bänder, Footer (Kalk darauf 12 : 1)",
     "#3F5B48 Signal Moosgrün: Anrufen, Rückruf, Vorsorge anfragen (Weiß darauf 7,5 : 1; als Fläche auf Kalk 6,6 : 1)",
     "#8FB59A helles Moos: derselbe Knopf auf Schiefer (Schiefer-Schrift darauf 6,1 : 1)",
     "#5A554D Sekundärtext, Lebensdaten, Meta (6,5 : 1 auf Kalk, 5,7 : 1 auf Sandstein)",
     "#D3CCC0 Linien"
    ]
   },
   "animationsstil": "token-luxus-weich",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "Der weiche Stil gilt nur für zwei Dinge: den Wechsel der Raumbilder (Überblendung 1,4 s mit sine.inOut, ohne Blur und ohne Zurückskalieren) und das Klarwerden des Riffelglases. Alles andere steht. Menü, Reiter, Akkordeons, Kondolenz-Dialog und Rückruf-Formular laufen über token-toggle-asymmetrisch auf UI-Maß: öffnen 300 ms, schließen 200 ms. token-luxus-weich schließt Formulare aus (wann_nicht), deshalb der UI-Stil.",
   "bewegung": {
    "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Raumbilder und Riffelglas); UI über animationsstil_ui",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "150 (Farbe, Hover), 300 (Menü, Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 1400 (Überblendung der Raumbilder, Riffelglas wird klar), 500 (dasselbe bei reduzierter Bewegung, nur Deckkraft)",
    "regel": "Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, keine Diashow mit Autoplay, keine flackernde Kerze. Bilder wechseln nur auf Klick und blenden dann langsam über. Kein Weg über 8 px, keine Skalierung, kein Überschwingen. Bei prefers-reduced-motion öffnen alle Teile ohne Übergang, Raumbilder wechseln mit 500 ms Deckkraft, das Riffelglas wird ohne Übergang klar.",
    "herkunft": "Kurve aus token-luxus-weich (bau.werte css_token --ease-lux, Spielart Crossfade ohne Blur, Dauer --dur-lux 1,4 s); UI-Kurvenpaar aus token-toggle-asymmetrisch, Dauern nach Leitfaden-Faustregel für UI-Panels gekürzt. Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Ruhiges, echtes Foto ohne Menschen in Trauer: Abschiedsraum im Tageslicht, Garten, Fenster oder Material (Holz, Leinen, Stein). Daneben ein Satz in einfacher Sprache (Platzhalter: „Wir sind da, wenn ein Mensch stirbt. Und wenn Sie vorsorgen möchten.“), die Nummer groß als tel:-Link mit „Tag und Nacht erreichbar“ und zwei gleich gebaute Türen: „Ein Mensch ist gestorben“ (führt zu Was ist jetzt zu tun?) und „Ich möchte vorsorgen“. Die Sofortleiste steht schon über dem Hero. Kein Video, kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)",
      "muster": [
       "trauerfall-sofortleiste",
       "tabs-pfeiltasten-focusgroup",
       "akkordeon-hoehe-auto"
      ],
      "varianten": {
       "tabs-pfeiltasten-focusgroup": "auto",
       "akkordeon-hoehe-auto": "basis",
       "trauerfall-sofortleiste": "seite"
      }
     },
     {
      "zweck": "So begleiten wir Sie (Erstgespräch zu Hause oder bei uns → Abschied nehmen → Trauerfeier → Beisetzung → danach: Formalitäten, Trauergruppe, Grabpflege); die Linie steht fest und füllt sich nicht beim Scrollen",
      "muster": [
       "prozess-timeline-wachsende-linie"
      ]
     },
     {
      "zweck": "Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet)",
      "muster": [
       "akkordeon-hoehe-auto",
       "leistungsseite-antwort-zuerst"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "leistungen",
       "leistungsseite-antwort-zuerst": "praxis"
      }
     },
     {
      "zweck": "Was kostet eine Bestattung? (drei echte Tabellen in Tabellenziffern: eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen wie Friedhof, Krematorium, Standesamt und Anzeige als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage je Zone oder Kilometer; zwei Rechenbeispiele und „Angebot anfordern“)",
      "muster": [
       "preis-section-editorial"
      ]
     },
     {
      "zweck": "Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten)",
      "muster": [
       "akkordeon-hoehe-auto",
       "kontakt-anfrage-formular"
      ],
      "varianten": {
       "akkordeon-hoehe-auto": "faq"
      }
     },
     {
      "zweck": "Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen)",
      "muster": [
       "gedenkseiten-kondolenz",
       "kopieren-feedback"
      ]
     },
     {
      "zweck": "Abschied nehmen: unsere Räume (Abschiedsraum, Feierhalle, Garten, Beratungszimmer; ein Raum zur Zeit, Reiter nennen den Raum; vor dem Foto liegt Riffelglas, das erst auf „Raum ansehen“ klar wird; Größe, Plätze und Zugang ohne Stufen als Text)",
      "muster": [
       "geriffeltes-glas",
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "buehne",
       "geriffeltes-glas": "still"
      }
     },
     {
      "zweck": "Wer Sie begleitet (Inhaberin oder Inhaber, Bestatterinnen und Bestatter, Trauerbegleitung mit Foto, Name, Aufgabe und Durchwahl; bis etwa fünf Personen als Satz mit kleinen Porträts, darüber als Raster)",
      "muster": [
       "team-ueber-mich-layout"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement"
      }
     },
     {
      "zweck": "Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)",
      "muster": [
       "oeffnungszeiten-status",
       "karte-zwei-klick",
       "standortfinder-liste",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "oeffnungszeiten-status": "karte",
       "karte-zwei-klick": "bild",
       "standortfinder-liste": "kompakt",
       "firmendaten-strukturiert": "werkstatt"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)",
      "muster": [
       "barrierefreiheit-seite",
       "zoom-und-textabstand-robust"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "kopieren-feedback"
    ],
    "material": [
     "geriffeltes-glas"
    ],
    "galerie": [
     "css-native-karussell"
    ],
    "footer": [
     "studio-visitenkarte-footer"
    ],
    "button": [
     "button-zustaende",
     "pfeil-icon-button"
    ],
    "hero_varianten": {
     "foto-hero": "split-randabfallend"
    }
   },
   "signatur": [
    "geriffeltes-glas"
   ],
   "varianten_demo": {
    "studio-visitenkarte-footer": "praxis",
    "pfeil-icon-button": "linie",
    "css-native-karussell": "buehne",
    "geriffeltes-glas": "still"
   },
   "nicht_verwenden": [
    "cinematic-video-hero / interaktives-3d-hero – lange Ladezeit; wer anruft, braucht die Nummer, kein Bild in Bewegung",
    "hide-on-scroll-header – die Sofortleiste mit der Nummer muss immer sichtbar bleiben",
    "clip-path-bild-reveal / split-mask-reveal / blur-reveal / scroll-word-highlight – inszenierte Auftritte wirken im Trauerfall wie Effekthascherei; Text und Bilder stehen",
    "marquee-laufband / rotating-words / typewriter-natural – bewegter Text ist für Menschen unter Stress eine Hürde",
    "zahlen-odometer / zahlen-fakten-section – „2.000 Bestattungen im Jahr“ ist keine Botschaft für Trauernde",
    "konfetti-erfolg / like-herz-burst / druck-feedback – Feiern und Überschwingen sind pietätlos; nach dem Absenden eine ruhige Bestätigung mit Rückrufzeit",
    "smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente / kontextueller-cursor – Agentur-Gesten, stören Menschen mit Bildschirmlupe oder zitternder Hand",
    "prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein Chatbot statt eines Menschen am Telefon",
    "kostenrechner-konfigurator – im Trauerfall keine Regler; Kosten als Tabelle, Rechenbeispiele und persönliches Angebot",
    "stapelkarten / flick-karten-stapel / bento-grid-interaktiv – verstecken Inhalte oder verlangen Gesten",
    "atmosphaere-partikel / fluessig-marmor-hintergrund – Glut, Staub und fließende Flächen werden hier sofort zum Kitsch",
    "Kreuz, Taube, Engel, betende Hände, Lilien und Kerzen als Deko-Bilder – Klischee; Glaube und Symbole wählt die Familie für ihre eigene Feier",
    "Schwarzrand, Lila oder Violett als Trauerfarbe, Goldschrift – Klischee der Trauerdrucksache",
    "Flackernde oder animierte Kerzen auf Gedenkseiten – die Kerze ist ein stilles Zeichen mit Zahl"
   ],
   "regeln": [
    "Erster Bildschirm: ruhiges Foto, ein Satz, die Nummer groß mit Erreichbarkeit und zwei gleich gebaute Türen „Ein Mensch ist gestorben“ und „Ich möchte vorsorgen“. Die Sofortleiste (trauerfall-sofortleiste) steht auf jeder Seite, am Desktop oben, mobil unten, und verdeckt weder Consent-Banner noch Fokus.",
    "„Tag und Nacht erreichbar“ nur, wenn nachts wirklich ein Mensch abnimmt (Trostwerk und Bestattung Wien nennen ihre 24-h-Nummer im Kopf); sonst die echten Zeiten der Rufbereitschaft nennen.",
    "Was ist jetzt zu tun? nach Sterbeort, je drei bis fünf Schritte, mit dem Satz „Sie haben Zeit.“ Zu Hause zuerst Hausärztin, Hausarzt oder der ärztliche Bereitschaftsdienst 116 117 für die Todesbescheinigung; in Krankenhaus, Heim und Hospiz übernimmt das Haus. Unterlagen als Checkliste zum Drucken. Der Sterbefall ist spätestens am dritten Werktag nach dem Tod beim Standesamt anzuzeigen (§ 28 PStG), das übernimmt meist das Bestattungshaus. Texte vom Kunden prüfen lassen.",
    "Bestattungsrecht ist Landesrecht: Frist bis zur Bestattung, wie lange Verstorbene zu Hause bleiben dürfen, Sargpflicht, Friedhofszwang und Ausnahmen für die Urne regelt das Bestattungsgesetz des Landes. Diese Angaben nur nach dem Gesetz des eigenen Landes formulieren und vom Kunden prüfen lassen; nichts aus anderen Ländern oder aus Österreich übernehmen.",
    "Kosten offen (Preisangabenverordnung): eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen (Friedhof, Krematorium, Standesamt, Anzeige) getrennt, als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage und Höhe, weil sie bei jeder Bestattung anfällt (BGH, Urteil vom 14.01.2016, I ZR 61/14). Kein Lockpreis „ab …“ ohne Liste, was enthalten ist. Beträge kommen vom Kunden und werden vom Kunden geprüft.",
    "Vorsorge: Vorsorgegeld liegt nie auf dem Geschäftskonto des Hauses, sondern bei einer Treuhand oder in einer Sterbegeldversicherung; die Seite sagt, wo und wie. Wer Versicherungen vermittelt, braucht unter Umständen eine Erlaubnis nach § 34d GewO und nennt sie im Impressum. Aussagen zum Schonvermögen (Sozialhilfe, Pflegeheim) nur allgemein und mit „im Einzelfall“, nie als Zusage. Formular ohne Gesundheitsdaten. Alles vom Kunden prüfen lassen.",
    "Gedenkseiten nur mit Zustimmung der Angehörigen, die die Bestattung beauftragt haben. Kondolenzen werden vor der Freischaltung gelesen, E-Mail-Adressen bleiben intern. Jede Gedenkseite sagt, wie lange sie online bleibt und wie die Familie sie löschen lässt; auf Wunsch nicht in Suchmaschinen (noindex). Fotos nur mit Nutzungsrecht, Datenschutzhinweis direkt am Kondolenz-Formular (vom Kunden prüfen lassen).",
    "Sprache: Sie-Form, kurze Sätze, ein Gedanke pro Satz; „Verstorbene“, „Angehörige“, „Abschied“. Keine Verkaufssprache, keine Floskel-Ketten. Fachwort in Klammern hinter dem Alltagswort („ärztliche Feststellung des Todes (Leichenschau)“).",
    "Weltanschauung offen: keine religiösen Symbole als Gestaltungsmittel. Feiern verschiedener Religionen und die weltliche Feier stehen als Text unter den Bestattungsarten, nur mit Angeboten, die das Haus wirklich hat.",
    "Bilder: Räume, Licht, Garten, Material und das Team (mit Einwilligung). Keine Verstorbenen, keine weinenden Menschen als Stimmung, keine Stockfotos von Händen, Kreuzen und Kerzen.",
    "Riffelglas (geriffeltes-glas) nur vor Raumfotos ohne Menschen, nie vor Text, Karten oder Gesichtern. Stehend, ohne Drift und ohne Kopplung an Zeiger oder Scroll; als SVG- oder CSS-Fassung ohne WebGL, wo das reicht. „Raum ansehen“ ist ein echter Knopf mit aria-pressed, das Glas wird in 1,4 s klar und auf Wunsch wieder trüb; der alt-Text beschreibt den Raum in beiden Zuständen.",
    "Bewegung: nur der Wechsel der Raumbilder und das Riffelglas laufen 1,4 s weich; Menü, Reiter, Akkordeons und Dialoge öffnen in 300 ms und schließen in 200 ms. Nichts bewegt sich von selbst, keine Einblendungen beim Scrollen.",
    "Größe und Kontrast: Fließtext mindestens 19 px, Zeilenhöhe 1.65, höchstens 62ch; Knöpfe mindestens 48 px hoch; Sekundärtext mindestens 6 : 1. Die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände (zoom-und-textabstand-robust).",
    "Keine Werbe-Tracker: kein Remarketing auf Trauerfall- und Gedenkseiten; Statistik nur mit Einwilligung über das gestaltete Consent-Banner.",
    "Empfehlungen und Partner (Steinmetz, Floristik, Trauerrede, Grabpflege): Erhält das Haus eine Provision, steht das sichtbar an der Empfehlung (§ 5a UWG; BGH, Urteil vom 27.04.2017, I ZR 55/16, zu Bestattungsportalen). Vom Kunden prüfen lassen.",
    "Pflichtangaben (Leitfaden 8a): Impressum (§ 5 DDG) mit Inhaberin oder Geschäftsführung, Register und, falls zutreffend, Kammer- oder Erlaubnisangaben; Verbandszeichen und Siegel nur mit Nachweis; Datenschutzerklärung; Erklärung zur Barrierefreiheit. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Trauerrednerin / Trauerredner (freie Rede, ohne Bestattungshaus)",
     "hinweis": "Hauptziel ist das Erstgespräch. Statt der 24-h-Sofortleiste eine Leiste mit Erreichbarkeit und Rückruf. Honorar offen als Pauschale mit Anfahrt, Beispieltexte nur mit Freigabe der Familie. Gibt es keine eigenen Räume, liegt das Riffelglas vor dem Foto eines Feierorts ohne Menschen (Kapelle, Waldplatz, Saal). Schrift, Farbe, Stil und Signatur bleiben.",
     "sektionen": [
      "So entsteht eine Rede (prozess-timeline-wachsende-linie)",
      "Honorar und Anfahrt (preis-section-editorial)",
      "Über mich (team-ueber-mich-layout, Variante statement)",
      "Orte, an denen ich spreche (geriffeltes-glas vor dem Foto, css-native-karussell Variante buehne)",
      "Stimmen von Familien (nur mit Freigabe, als Text)",
      "Erstgespräch vereinbaren (kontakt-anfrage-formular)"
     ],
     "weglassen": [
      "Im Trauerfall mit 24-h-Nummer (ersetzt durch Erreichbarkeit und Rückruf)",
      "Bestattungsarten und Kosten des Bestattungshauses",
      "Vorsorge",
      "Traueranzeigen und Gedenkseiten"
     ],
     "muster_zusatz": []
    },
    {
     "name": "Baum- und Waldbestattung (Bestattungswald, Ruhewald)",
     "hinweis": "Hauptziel ist die Waldführung und die Wahl des Platzes. Grabarten mit ab-Preis und was darin steckt, getrennt davon Beisetzung und Bestattungshaus (wie FriedWald). Führungstermine als Liste, erst ab etwa acht Terminen im Monat als Kalender (programm-kalender, Variante programm). Ruhezeit, Grabschmuck und Wege nach der Satzung des Waldes vom Kunden prüfen lassen. Das Riffelglas liegt vor einem Waldfoto ohne Menschen.",
     "sektionen": [
      "Waldführung kennenlernen (Termine, Treffpunkt, Anmeldung)",
      "Grabarten und Kosten (preis-section-editorial): Platz, Baum, Beisetzung, Bestattungshaus extra",
      "So läuft eine Beisetzung im Wald (prozess-timeline-wachsende-linie)",
      "Lage, Parkplatz, Wege, Zugang mit Rollstuhl (karte-zwei-klick, Variante skizze)",
      "Im Trauerfall (trauerfall-sofortleiste mit der Nummer der Verwaltung und dem Hinweis, zuerst ein Bestattungshaus zu beauftragen)"
     ],
     "weglassen": [
      "Abschiedsräume (Riffelglas dann vor dem Waldfoto)",
      "Bestattungsarten außer Baum- und Waldbestattung",
      "Traueranzeigen, wenn der Wald keine führt"
     ],
     "muster_zusatz": [
      "programm-kalender"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Leicht und ruhig: kein Video, kaum JavaScript, native details und Reiter. Hero-Foto AVIF mit fetchpriority=high, feste Seitenverhältnisse. Riffelglas als SVG-Filter (feDisplacementMap) oder CSS (repeating-linear-gradient mit backdrop-filter) ohne three.js; WebGL nur, wenn die stehende Fassung nicht reicht, und dann erst beim Erreichen der Sektion laden. Source Serif 4 (opsz, wght) und Commissioner (wght, FLAR und VOLM auf 0 fixiert) als Variable-Dateien, nur Latin. Karte erst nach Klick, Spamschutz am Kondolenz-Formular ohne Drittanbieter. sofort-navigation-vorladen nur für Was ist zu tun, Kosten und Vorsorge, nie für Formular-Ergebnisse und Gedenkseiten.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen. Pütz-Roth (Bergisch Gladbach) war per WebFetch nicht abrufbar (Bot-Prüfung) und ist deshalb keine Referenz.",
    "Fehlende Bausteine: trauerfall-sofortleiste und gedenkseiten-kondolenz (beschrieben in bestattung-wuerdig-fehlend.md). Die Prüfung meldet beide ids als unbekannt, bis die Demos gebaut sind.",
    "Die Bestattungsgesetze der 16 Länder sind nicht einzeln ausgewertet; das Rezept nennt nur, was geprüft werden muss.",
    "Ob und bei welcher Kammer das Bestattungsgewerbe im Impressum anzugeben ist, ist nicht geklärt; vom Kunden prüfen lassen.",
    "Animationsstil token-luxus-weich teilt sich das Rezept mit boutique-hotel-gastgeber, mode-beauty-kollektion und weingut-hofladen-herkunft; hier nur für Bildwechsel und Riffelglas."
   ],
   "stimmung_tags": [
    "ruhig",
    "warm"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     72,
     104,
     152
    ],
    "sektion": "clamp(80px, 10vw, 152px)",
    "dichte": "luftig",
    "hinweis": "Viel Ruhe um wenige Elemente: Schritte nach Sterbeort mit 24 px Abstand, Knöpfe mindestens 48 px hoch, nichts gedrängt."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 5vw, 64px)",
    "spalt": "clamp(20px, 3vw, 40px)",
    "max_breite": "1200px",
    "hinweis": "Hero 5/7 (Text/Foto), Abschiedsräume 4/8 (Demo geriffeltes-glas). Zwei Türen gleich breit nebeneinander, mobil untereinander. Text auf 62ch."
   },
   "form": {
    "radius_klein": "2px",
    "radius_gross": "4px",
    "pille": false,
    "linie": "1px #D3CCC0",
    "schatten": "keiner",
    "hinweis": "Fast eckig und still. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie) oder Moosgrün gefüllt; keine Pille."
   },
   "bildsprache": {
    "licht": "Ruhiges Tageslicht, weich, ohne Gegenlicht-Pathos.",
    "ausschnitt": "Abschiedsraum, Fenster, Garten, Material wie Holz, Leinen, Stein.",
    "personen": "Nur das Team mit Einwilligung; keine Trauernden, keine Verstorbenen.",
    "formate": [
     "4:5",
     "3:2"
    ],
    "nicht": "Kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen, keine Sonnenuntergänge als Symbol, kein Video."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Kurze Sätze, ein Gedanke pro Satz; Fachwort in Klammern hinter dem Alltagswort.",
    "haltung": "Würdig, warm, klar. Keine Verkaufssprache.",
    "beispiele": [
     "Ein Mensch ist gestorben. Wir sind jetzt für Sie da.",
     "Was zu tun ist, wenn jemand zu Hause stirbt."
    ],
    "nicht": "„unvergesslicher Abschied“, Floskel-Ketten, Verkaufssprache, „2.000 Bestattungen im Jahr“ als Botschaft."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; die Sofortleiste steht schon über dem Hero über die volle Breite.",
    "bild": "Ruhiges, echtes Foto ohne Menschen in Trauer, 4:5 oder 3:2.",
    "h1": "clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), Source Serif 4 400, links.",
    "handlung": "Zwei gleich gebaute Türen „Ein Mensch ist gestorben“ und „Ich möchte vorsorgen“; die Nummer groß als tel:-Link (Moosgrün).",
    "zusatz": "„Tag und Nacht erreichbar“ nur, wenn nachts ein Mensch abnimmt; Sofortleiste auf Schiefer."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/bestattung-wuerdig/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/bestattung-wuerdig/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/bestattung-wuerdig/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/bestattung-wuerdig/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "cinematic-video-hero",
      "interaktives-3d-hero"
     ],
     "grund": "lange Ladezeit; wer anruft, braucht die Nummer, kein Bild in Bewegung"
    },
    {
     "ids": [
      "hide-on-scroll-header"
     ],
     "grund": "die Sofortleiste mit der Nummer muss immer sichtbar bleiben"
    },
    {
     "ids": [
      "clip-path-bild-reveal",
      "split-mask-reveal",
      "blur-reveal",
      "scroll-word-highlight"
     ],
     "grund": "inszenierte Auftritte wirken im Trauerfall wie Effekthascherei; Text und Bilder stehen"
    },
    {
     "ids": [
      "marquee-laufband",
      "rotating-words",
      "typewriter-natural"
     ],
     "grund": "bewegter Text ist für Menschen unter Stress eine Hürde"
    },
    {
     "ids": [
      "zahlen-odometer",
      "zahlen-fakten-section"
     ],
     "grund": "„2.000 Bestattungen im Jahr“ ist keine Botschaft für Trauernde"
    },
    {
     "ids": [
      "konfetti-erfolg",
      "like-herz-burst",
      "druck-feedback"
     ],
     "grund": "Feiern und Überschwingen sind pietätlos; nach dem Absenden eine ruhige Bestätigung mit Rückrufzeit"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "cursor-follower-lerp",
      "magnetische-elemente",
      "kontextueller-cursor"
     ],
     "grund": "Agentur-Gesten, stören Menschen mit Bildschirmlupe oder zitternder Hand"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld",
      "ki-streaming-text-denkindikator"
     ],
     "grund": "kein Chatbot statt eines Menschen am Telefon"
    },
    {
     "ids": [
      "kostenrechner-konfigurator"
     ],
     "grund": "im Trauerfall keine Regler; Kosten als Tabelle, Rechenbeispiele und persönliches Angebot"
    },
    {
     "ids": [
      "stapelkarten",
      "flick-karten-stapel",
      "bento-grid-interaktiv"
     ],
     "grund": "verstecken Inhalte oder verlangen Gesten"
    },
    {
     "ids": [
      "atmosphaere-partikel",
      "fluessig-marmor-hintergrund"
     ],
     "grund": "Glut, Staub und fließende Flächen werden hier sofort zum Kitsch"
    },
    {
     "ids": [],
     "grund": "Kreuz, Taube, Engel, betende Hände, Lilien und Kerzen als Deko-Bilder – Klischee; Glaube und Symbole wählt die Familie für ihre eigene Feier"
    },
    {
     "ids": [],
     "grund": "Schwarzrand, Lila oder Violett als Trauerfarbe, Goldschrift – Klischee der Trauerdrucksache"
    },
    {
     "ids": [],
     "grund": "Flackernde oder animierte Kerzen auf Gedenkseiten – die Kerze ist ein stilles Zeichen mit Zahl"
    }
   ],
   "alle_muster": [
    {
     "id": "geriffeltes-glas",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/meta.json",
     "variante": "still",
     "demo_url": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=still"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "split-randabfallend",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend"
    },
    {
     "id": "trauerfall-sofortleiste",
     "rolle": "Sektion: Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/meta.json",
     "variante": "seite",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo?v=seite"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "akkordeon-hoehe-auto",
     "rolle": "Sektion: Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)",
       "variante": "basis",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
      },
      {
       "rolle": "Sektion: Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet)",
       "variante": "leistungen",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen"
      },
      {
       "rolle": "Sektion: Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten)",
       "variante": "faq",
       "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
      }
     ]
    },
    {
     "id": "prozess-timeline-wachsende-linie",
     "rolle": "Sektion: So begleiten wir Sie (Erstgespräch zu Hause oder bei uns → Abschied nehmen → Trauerfeier → Beisetzung → danach: Formalitäten, Trauergruppe, Grabpflege); die Linie steht fest und füllt sich nicht beim Scrollen",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json"
    },
    {
     "id": "leistungsseite-antwort-zuerst",
     "rolle": "Sektion: Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis"
    },
    {
     "id": "preis-section-editorial",
     "rolle": "Sektion: Was kostet eine Bestattung? (drei echte Tabellen in Tabellenziffern: eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen wie Friedhof, Krematorium, Standesamt und Anzeige als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage je Zone oder Kilometer; zwei Rechenbeispiele und „Angebot anfordern“)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "gedenkseiten-kondolenz",
     "rolle": "Sektion: Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/meta.json"
    },
    {
     "id": "kopieren-feedback",
     "rolle": "Sektion: Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Abschied nehmen: unsere Räume (Abschiedsraum, Feierhalle, Garten, Beratungszimmer; ein Raum zur Zeit, Reiter nennen den Raum; vor dem Foto liegt Riffelglas, das erst auf „Raum ansehen“ klar wird; Größe, Plätze und Zugang ohne Stufen als Text)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Wer Sie begleitet (Inhaberin oder Inhaber, Bestatterinnen und Bestatter, Trauerbegleitung mit Foto, Name, Aufgabe und Durchwahl; bis etwa fünf Personen als Satz mit kleinen Porträts, darüber als Raster)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)",
     "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": "standortfinder-liste",
     "rolle": "Sektion: Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "werkstatt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "zoom-und-textabstand-robust",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/meta.json"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "studio-visitenkarte-footer",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
     "variante": "praxis",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "pfeil-icon-button",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
     "variante": "linie",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
    },
    {
     "id": "token-luxus-weich",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "eventlocation-hochzeit",
   "name": "Eventlocation: ein Tag, der in die Nacht geht",
   "branche": "Eventlocation / Hochzeitslocation / Gutshof / Tagungsort (auch Eventcatering)",
   "stimmung": [
    "festlich",
    "emotional",
    "großzügig",
    "klar"
   ],
   "kurz": "Verkauft wird ein Tag, nicht eine Nacht: Wunschdatum, Anlass und Gästezahl stehen direkt unter dem Hero, freie Termine sind ehrlich sichtbar, Räume haben Kapazitäten je Bestuhlung, Pakete einen ab-Preis mit Bezug. Festlich über Licht, Raum und Typografie statt über Herzen und Glitzer: eine schmale Art-déco-Didone für große Wörter und Daten, eine breitenvariable Grotesk für Tabellen und Formulare, Mohnrot als einziger Signalton. Signatur: Die Seite färbt sich im Kapitel „Ein Tag bei uns“ vom Kalklicht des Mittags über das Sandsteinlicht des Abends bis in die Nacht. Abgrenzung zu boutique-hotel-gastgeber: kein Zeitraum-Kalender, keine Zimmer zuerst, keine Bild-Diashow als Signatur; Übernachtung ist Beiwerk zum Fest.",
   "referenzen": [
    {
     "seite": "Schloss Hohenkammer – Heiraten (bei München)",
     "url": "https://www.schlosshohenkammer.de/Heiraten",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.schlosshohenkammer.de/Heiraten und https://www.schlosshohenkammer.de/Buchung",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text; CSS, Schriften und Kurven nicht gemessen): Arrangements pauschal pro Person mit Stundenumfang („Fürstlich feiern“ 80 € pro Person, 8 Stunden; „Königlich feiern“ 99 € pro Person, 11 Stunden), ausdrücklich zuzüglich Raummiete und Speisen; Bausteine mit Einzelpreisen (freie Trauung, Bar, Verlängerung, Exklusivität 1.500 € Pauschale); Kinderpreise nach Alter. Räume mit Raummiete nach Saison (Mai–Okt / Nov–Apr) und Mindestgästen. Feste Ansprechperson mit Namen, Hochzeits-Checkliste als Download. Keine Anfrage mit Datum und Gästezahl auf der Seite, nur Telefon und E-Mail; das Rezept macht es besser."
    },
    {
     "seite": "Hedsor House – Pricing & Packages und FAQ (England)",
     "url": "https://www.hedsor.com/weddings/pricing-and-packages",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.hedsor.com/weddings/pricing-and-packages, https://www.hedsor.com/contact-us/frequently-asked-questions und https://www.hedsor.com/explore/rooms",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Pakete mit „Starting From“ und Mindestgästen („70+“, „80+“, „100+“) neben Dry Hire mit Kapazität („Up to 150 (seated meal)“). FAQ: Wunschtermin nach der Besichtigung als „provisional hold“, sieben Tage kostenlos; Pflicht-Dienstleister aus der „preferred supplier list“ für Catering und Technik; 13 Zimmer für 26 Gäste, weitere Gäste in empfohlenen Hotels. Räume als nummerierte Galerie mit einem Satz je Raum, aber nur eine Kapazitätsangabe; das Rezept verlangt Zahlen je Bestuhlung."
    },
    {
     "seite": "Landgut Stober – Tagungsräume (Groß Behnitz bei Berlin)",
     "url": "https://landgut-stober.de/tagungen-landgut-stober/tagungsraeume-uebersicht.html",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://landgut-stober.de/tagungen-landgut-stober/tagungsraeume-uebersicht.html und https://www.landgut-stober.de/hochzeitsfeier-am-see-berlin-umland-havelland.html",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Räume „sortiert nach Größe“, jeder mit Gebäude-Etikett (Rinderstall, Kornspeicher, Brennerei, Gutsverwaltung), Bestuhlungsplan je Raum und isometrischer Übersicht des Guts; Anfrageformular „Unverbindlich anfragen“ mit Verpflegungsbausteinen. Hochzeit und Tagung auf demselben Gelände, 300 Zimmer im Hotel. Vorbild für Gebäude als Ordnung und den Lageplan als Skizze."
    },
    {
     "seite": "Historischer Rathaussaal Nürnberg – Bestuhlung",
     "url": "https://www.nuernberg.de/internet/historischer_rathaussaal/bestuhlung.html",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.nuernberg.de/internet/historischer_rathaussaal/bestuhlung.html",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Kapazität je Bestuhlung mit Tischmaß und Plan als PDF: parlamentarisch 120, Rundtische für zehn Personen 180, Tafelreihen 288, Reihen 355, Stehempfang 355; dazu der ehrliche Satz, dass die größte Reihenbestuhlung derzeit nicht möglich ist. Vorbild für die Kapazitätstabelle; das Rezept zeigt die Pläne als SVG mit Text statt als PDF."
    }
   ],
   "schrift": {
    "paarung_basis": "deco-bar",
    "headline": "imbue",
    "text": "archivo",
    "akzent": "",
    "groessen": "h1 Imbue clamp(3rem, 1.6rem + 6vw, 7.5rem), wght 300, opsz 100, Laufweite -0.01em, Zeilenhöhe 0.95, gemischt gesetzt; Raumnamen, Kapitel und große Daten („Samstag, 12. Juni“) in Imbue ab 2rem, wght 400, opsz an die Größe gekoppelt; nie unter 2rem. Text Archivo wdth 100, wght 400, 1.0625rem (17 px), Zeilenhöhe 1.6, höchstens 64ch; Tabellen und Kalender Archivo wdth 87, Tabellenziffern; Labels und Rubriken Archivo wdth 112, wght 600, 0.8125rem, Versal, +0.08em; Knöpfe Archivo wdth 100, wght 600, 1rem.",
    "techniken": [
     "optische-groessen-opsz",
     "headline-laufweite-zeilenabstand",
     "tabellenziffern",
     "fluide-typo-clamp-cqi",
     "lesesatz-text-wrap"
    ],
    "alternative_eigenprojekt": "Text switzer (ITF) wie in der Paarung deco-bar – nur für Eigenprojekte, nicht für Templates.",
    "abweichung": "Grundlage ist die Paarung deco-bar (Imbue mit Switzer); Switzer ist ITF und für Templates gesperrt, Archivo ersetzt sie (OFL, Breitenachse 62–125 für schmale Tabellen und breite Labels). Imbue ist eine schmale Didone mit opsz und steht in keinem Rezept; sie wirkt wie eine Menü- oder Einladungskarte, ohne in Schreibschrift-Kitsch zu fallen. Unterschied zu friseur-salon-handschrift (Kalnia, breite Didone-Anmutung, mit Unterschrift-Schrift) und boutique-hotel-gastgeber (Newsreader, Mona Sans): schmal statt breit, keine Script-Schrift, Grotesk mit Breitenachse statt Neo-Grotesk. archivo steht damit in zwei Rezepten (verein als Text). Keine Mono, Labels in der Textschrift (Leitfaden A4)."
   },
   "farbe": {
    "prinzip": "Drei Lichtstimmungen statt einer Markenfläche: Kalk für den Tag (Grund der ganzen Seite), Sandstein für den Abend, Nachtblau für die Nacht. Im Kapitel „Ein Tag bei uns“ färbt sich die Seite an den Kapitelgrenzen um; Räume, Preise, Kalender und Anfrage stehen immer auf Kalk. Mohnrot ist der einzige Signalton (Anfragen, Datum wählen, freie Termine) und funktioniert auf allen drei Gründen. Messing nur als Doppelkontur der Nebenknöpfe und als Linie. Kein Rosé, kein Glitzer-Gold, keine Verläufe, keine Bokeh-Flächen.",
    "beispiel": [
     "#F5F0E6 Grund Kalk (Tag)",
     "#1D1A17 Text auf Kalk (15 : 1) und auf Sandstein (12,8 : 1)",
     "#E9DCC8 Sandstein (Abend-Kapitel, Flächen, Tabellenkopf)",
     "#15171F Nachtblau (Nacht-Kapitel, Footer); Text #F2ECE2 (15 : 1)",
     "#C43B2B Signal Mohnrot: Anfragen, Datum wählen, frei (Weiß darauf 5,2 : 1; als Fläche auf Kalk 4,6 : 1, auf Sandstein 3,9 : 1, auf Nachtblau 3,4 : 1)",
     "#8C6A3C Messing: Doppelkontur und Linien auf Kalk (4,4 : 1); auf Nachtblau #C9A66B (7,8 : 1)",
     "#5C574E Sekundärtext, Bildnachweis (6,3 : 1 auf Kalk)",
     "#D8CFC0 Linien auf Kalk"
    ]
   },
   "animationsstil": "token-studio-signatur",
   "animationsstil_hinweis": "Eine eigene Kurve für die ganze Seite, wie eine Hausfarbe: langsamer Anlauf, langer, weicher Ausklang. Sie gilt für Menü, Kalender, Reiter, Galerie und den Farbwechsel (725 ms). Der Stil taugt laut wann_nicht nicht für lange Scroll-Einblendungen; die Seite hat deshalb keine Reveals beim Scrollen, sondern nur Zustandswechsel. Kein eigener animationsstil_ui nötig, weil der Stil als UI-Standard gebaut ist; Fokus ohne Übergang.",
   "bewegung": {
    "easing": "cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur, für alles)",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "250 (Farben, Schatten, Hover), 400 (Deckkraft, Unterstreichung, Kalenderzelle), 475 (Knopf-Füllung), 525 (Akkordeon, Reiter-Inhalt), 725 (Menü, Galerie-Vollbild, Farbwechsel der Kapitel); Fokus ohne Übergang",
    "regel": "Bewegt wird, was den Zustand wechselt: Kapitel färbt sich um, Kalender springt einen Monat weiter, Raum wechselt, Menü öffnet. Keine Einblendungen beim Scrollen, kein Autoplay, keine Diashow. Der Farbwechsel kommt an der Kapitelgrenze in 725 ms, der Text schaltet am Kipppunkt statt mitzumischen. Bei prefers-reduced-motion wechseln Farben in 200 ms, alles andere ohne Weg.",
    "herkunft": "Kurve und Fünf-Stufen-Skala aus token-studio-signatur (bau.werte css_token --ease-signature, Osmo-Skala); Farbwechsel nach theme-farbwechsel-scroll (Schwelle an der Viewport-Mitte), dessen Dauer von 600 auf die Stufe 725 gelegt. Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Foto-Hero als Standard: echtes Foto der Location im späten Licht (Hof, Scheune, Garten, Saal), Gäste nur mit Einwilligung und nicht als Gesicht im Mittelpunkt. Ein Satz mit Ort und Anlass in Imbue, darunter die Anfrage-Leiste mit Wunschdatum (oder Monat und „flexibel“), Anlass und Gästezahl und dem Knopf „Termin anfragen“; daneben Telefon und „Besichtigung vereinbaren“ als Nebenweg. Video nur als hero_variante, wenn eigenes, hochwertiges Material da ist (stumm, Poster, Pause-Knopf).",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "sticky-shrink-header",
     "mobile-bottom-navigation"
    ],
    "hero": [
     "foto-hero-mit-leiste"
    ],
    "hero_variante": [
     "cinematic-video-hero"
    ],
    "sektionen": [
     {
      "zweck": "Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage)",
      "muster": [
       "termin-verfuegbarkeit-anfrage",
       "animiertes-select"
      ]
     },
     {
      "zweck": "Ein Tag bei uns (drei bis vier Kapitel vom Ankommen und der Trauung im Garten über den Empfang im Hof und das Essen in der Scheune bis zur Feier in der Nacht; Bild steht, Text erklärt; die Seite färbt sich an jeder Kapitelgrenze um)",
      "muster": [
       "theme-farbwechsel-scroll",
       "split-screen-sticky-seiten"
      ],
      "varianten": {
       "split-screen-sticky-seiten": "bild",
       "theme-farbwechsel-scroll": "tageslauf"
      }
     },
     {
      "zweck": "Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl)",
      "muster": [
       "raumkapazitaeten-bestuhlung",
       "css-native-karussell"
      ],
      "varianten": {
       "css-native-karussell": "buehne"
      }
     },
     {
      "zweck": "Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr)",
      "muster": [
       "tabs-pfeiltasten-focusgroup",
       "vergleichstabelle-sticky"
      ],
      "varianten": {
       "tabs-pfeiltasten-focusgroup": "auto",
       "vergleichstabelle-sticky": "pakete"
      }
     },
     {
      "zweck": "Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname)",
      "muster": [
       "masonry-grid-lanes-galerie",
       "galerie-shared-element-vollbild"
      ],
      "varianten": {
       "galerie-shared-element-vollbild": "basis"
      }
     },
     {
      "zweck": "Freie Termine (Monatsansicht mit frei, angefragt und vergeben, als Text und Zeichen, nicht nur Farbe; Samstage und Feiertage markiert; ein Klick übernimmt das Datum in die Anfrage; nur mit gepflegtem Kalender)",
      "muster": [
       "termin-verfuegbarkeit-anfrage"
      ]
     },
     {
      "zweck": "Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)",
      "muster": [
       "mehrschritt-anfrage",
       "formular-fehlerzusammenfassung",
       "validierung-nach-interaktion"
      ],
      "varianten": {
       "mehrschritt-anfrage": "leiste",
       "formular-fehlerzusammenfassung": "kompakt"
      }
     },
     {
      "zweck": "Besichtigung und Probeessen vereinbaren (Termin-Tool erst nach Klick, daneben Telefon und E-Mail)",
      "muster": [
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "termin-buchung-zwei-klick": "platzhalter"
      }
     },
     {
      "zweck": "Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)",
      "muster": [
       "karte-zwei-klick",
       "oeffnungszeiten-status",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "karte-zwei-klick": "skizze",
       "oeffnungszeiten-status": "termin",
       "firmendaten-strukturiert": "friseur"
      }
     },
     {
      "zweck": "Dienstleister-Netzwerk (Catering, Floristik, Fotografie, Musik, Trauredner; sichtbar, wer Pflichtpartner ist und ob eine Provision fließt; Logos nur mit Erlaubnis, ab etwa fünf als Raster, sonst Liste)",
      "muster": [
       "logo-wand-social-proof"
      ],
      "varianten": {
       "logo-wand-social-proof": "raster"
      }
     },
     {
      "zweck": "Stimmen (Google und Hochzeitsportal je mit eigenem Schnitt, Anzahl, Stand und Echtheitshinweis; Stimmen von Paaren nur mit Freigabe)",
      "muster": [
       "bewertungsprofil-mit-echtheitshinweis"
      ],
      "varianten": {
       "bewertungsprofil-mit-echtheitshinweis": "mehrere"
      }
     },
     {
      "zweck": "Barrierefreiheit (eigene Seite für die Website; Barrierefreiheit vor Ort steht zusätzlich bei Anfahrt und Räumen)",
      "muster": [
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "barrierefreiheit-seite": "erklaerung"
      }
     }
    ],
    "scroll": [
     "theme-farbwechsel-scroll"
    ],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "animiertes-select",
     "checkbox-radio-animiert",
     "einblenden-starting-style"
    ],
    "material": [],
    "galerie": [
     "masonry-grid-lanes-galerie",
     "galerie-shared-element-vollbild",
     "css-native-karussell"
    ],
    "footer": [
     "mega-footer-sitemap"
    ],
    "button": [
     "fuellung-vom-eintrittspunkt",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "foto-hero-mit-leiste": "leiste"
    }
   },
   "signatur": [
    "theme-farbwechsel-scroll"
   ],
   "varianten_demo": {
    "fuellung-vom-eintrittspunkt": "basis",
    "kontur-button-zeichnen": "doppel",
    "mobile-bottom-navigation": "fab",
    "bild-zoom-in-maske": "basis",
    "agentenformular-webmcp": "projekt",
    "galerie-shared-element-vollbild": "basis",
    "css-native-karussell": "buehne",
    "theme-farbwechsel-scroll": "tageslauf"
   },
   "nicht_verwenden": [
    "buchungsleiste-datumsbereich – Anreise und Abreise passen zu Zimmern, nicht zu einem Festtag; hier Wunschdatum mit Ausweichdatum und Gästezahl",
    "slideshow-innere-gegenparallaxe / glas-button – Signatur und Hauptknopf des Hotel-Rezepts; die Eventlocation erzählt über den Farbwechsel vom Tag zur Nacht",
    "konfetti-erfolg / like-herz-burst – Hochzeitskitsch; nach der Anfrage eine ruhige Bestätigung mit Antwortzeit",
    "kreistext-siegel-rotierend / text-on-path – drehende Siegel und Schriftbögen kippen sofort ins Kitschige",
    "mesh-gradient-shader / atmosphaere-partikel / fluessig-marmor-hintergrund – Bokeh, Glitzer und Schimmer sind das Klischee; Stimmung kommt aus echten Fotos",
    "marquee-laufband / rotating-words – unruhig neben Kalender und Preisen",
    "zahlen-odometer – „über 500 Hochzeiten“ hochgezählt wirkt verkäuferisch; Zahlen stehen still oder gar nicht",
    "smooth-scroll-lenis / fullpage-snap-slides – stören Kalender, Tabellen und schnelles Überfliegen",
    "prozent-zaehler / logo-aufbau-intro – Wartezeit vor dem ersten Bild",
    "cursor-follower-lerp / magnetische-elemente – Agentur-Gesten ohne Nutzen",
    "prompt-hero-eingabefeld – Anfrage über klare Felder, nicht über einen Chat",
    "Herzen, Ringe, Tauben, Rosenblätter, Schnörkel-Script, Pastell-Rosé und Glitzer-Gold – Kitsch; festlich wird es über Licht, Raum und Typografie",
    "Stock-Hochzeitsfotos und Bilder anderer Locations – nur eigene Fotos mit Bildnachweis"
   ],
   "optional": [
    "agentenformular-webmcp"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto, ein Satz mit Ort und Anlass, darunter die Anfrage-Leiste (Wunschdatum oder Monat mit „flexibel“, Anlass, Gästezahl) und „Termin anfragen“; Telefon und „Besichtigung vereinbaren“ als Nebenweg. Hauptziel ist die Anfrage, nicht der Klick in die Galerie.",
    "Freie Termine ehrlich: frei, angefragt (Option mit Haltefrist, wie Hedsor mit sieben Tagen) und vergeben, jeweils als Text und Zeichen, nicht nur als Farbe. Nur mit gepflegtem Kalender und Stand-Datum; sonst kein Kalender, sondern Anfrage mit Ausweichdatum. Keine künstliche Knappheit („nur noch 2 Samstage!“).",
    "Räume mit Zahlen: je Raum Fläche und Plätze je Bestuhlung als echte Tabelle in Tabellenziffern (wie der Historische Rathaussaal Nürnberg), Mindestgäste und Raummiete nach Saison (wie Schloss Hohenkammer), Plan als SVG mit Textbeschreibung. Höchstzahlen ergeben sich aus Genehmigung und Brandschutz; Zahlen kommen vom Kunden und werden vom Kunden geprüft.",
    "Preise (Preisangabenverordnung): ab-Preise nur mit Bezug (pro Person, Stunden, Mindestgäste, Saison oder Wochentag) und mit der Liste, was enthalten ist und was nicht (Raummiete, Speisen, Getränke, Technik). Preise für Verbraucher inkl. MwSt.; Tagungspauschalen dürfen netto stehen, wenn das Angebot erkennbar nur an Unternehmen geht. Vom Kunden prüfen lassen.",
    "Verträge über Veranstaltungen, Bewirtung und Beherbergung mit festem Termin haben im Fernabsatz kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB). Anzahlung, Option und Storno stehen deshalb klar vor dem Vertrag; die Texte kommen vom Kunden. Werden Gutscheine online verkauft, gilt der Widerrufs-Button aus der Grundausstattung (Leitfaden 8a).",
    "Dienstleister-Netzwerk: Pflichtpartner offen benennen („Catering nur über …“). Fließt eine Provision, steht das an der Empfehlung (§ 5a UWG). Logos nur mit Erlaubnis (logo-wand-social-proof), ab etwa fünf als Raster, sonst als Liste.",
    "Menschen auf Fotos: Paare und Gäste nur mit Einwilligung, Bildnachweis der Fotografin oder des Fotografen am Bild. Keine Stockfotos, keine Bilder anderer Häuser.",
    "Übernachtung ehrlich: Zahl der Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parken, letzte Bahn. Ruhezeiten und Musik im Freien so, wie die Genehmigung es sagt (vom Kunden prüfen lassen).",
    "Barrierefreiheit vor Ort als Text bei Räumen und Anfahrt: stufenloser Zugang, WC, Parkplatz, Trauort im Garten mit Rollstuhl erreichbar oder nicht.",
    "Farbwechsel (theme-farbwechsel-scroll) nur im Kapitel „Ein Tag bei uns“, drei bis vier Kapitel, Wechsel an der Viewport-Mitte. Jedes Farbpaar mindestens 4,5 : 1, der Text schaltet am Kipppunkt; meta theme-color zieht mit. Räume, Preise, Kalender und Anfrage stehen immer auf Kalk. Bilder werden nie eingefärbt.",
    "Bewegung: eine Kurve cubic-bezier(0.625, 0.05, 0, 1) mit 250, 400, 475, 525 und 725 ms. Keine Einblendungen beim Scrollen, kein Autoplay; Video nur mit eigenem Material, stumm, mit Poster und Pause-Knopf.",
    "Typografie: Imbue nur für Headlines, Raumnamen, Kapitel und große Daten, nie unter 2rem; Archivo für Text, Tabellen, Kalender und Formulare. Zahlen in Tabellen und im Kalender immer in Tabellenziffern.",
    "Knöpfe: Mohnrot gefüllt mit Füllung vom Eintrittspunkt nur für die Haupthandlung (Anfragen, Datum übernehmen); Nebenwege als Messing-Doppelkontur, die bei Hover aufrückt. Ein Knopfsystem auf der ganzen Seite, Trefferfläche mindestens 44 px.",
    "Bewertungen von Google oder Hochzeitsportalen nur mit Echtheitshinweis direkt daneben (§ 5b Abs. 3 UWG), je Plattform eigener Schnitt und Stand, nichts verrechnen.",
    "Abgrenzung: Ist das Haus vor allem ein Hotel und die Feier ein Zusatz, gilt boutique-hotel-gastgeber mit der Sektion „Tagungen & Feiern“. Dieses Rezept gilt, wenn der Festtag das Produkt ist.",
    "Pflichtangaben (Leitfaden 8a): Impressum, Datenschutzerklärung mit Hinweis direkt an Anfrage und Kalender, Erklärung zur Barrierefreiheit. Zeigt die Seite Menüs, stehen Allergene und Zusatzstoffe dabei. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Eventcatering / Caterer (ohne eigene Location)",
     "hinweis": "Das Produkt ist das Essen an einem Tag an einem fremden Ort. Statt Räumen die Locations, in denen schon gekocht wurde, und die Formen (Menü, Buffet, Flying Dinner, Food-Station). Menüs mit Allergenen und Zusatzstoffen (speisekarte-editorial, Variante menue). Preise pro Person ab, mit Mindestgästen und was dazukommt (Personal, Geschirr, Anfahrt). Die Lieferung von Speisen zu einem festen Termin hat im Fernabsatz kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB); Storno klar nennen. Signatur bleibt: „Ein Abend mit uns“ färbt sich vom Aperitif bis zum Mitternachtssnack.",
     "sektionen": [
      "Wunschtermin, Ort, Gästezahl, Form (termin-verfuegbarkeit-anfrage)",
      "Ein Abend mit uns (theme-farbwechsel-scroll, split-screen-sticky-seiten Variante bild)",
      "Menüs und Formen (speisekarte-editorial, Variante menue; Allergene je Gang)",
      "Pakete und Preise pro Person (vergleichstabelle-sticky, Variante pakete)",
      "Probeessen vereinbaren (termin-buchung-zwei-klick)",
      "Locations, in denen wir kochen (Liste mit Ort und Gästezahl, Fotos nur mit Erlaubnis der Location)",
      "Anfrage (mehrschritt-anfrage, Variante leiste)"
     ],
     "weglassen": [
      "Räume und Kapazitäten",
      "Übernachtung und Lageplan",
      "Freie Termine als Monatskalender, wenn mehrere Feiern am Tag möglich sind"
     ],
     "muster_zusatz": [
      "speisekarte-editorial"
     ]
    }
   ],
   "template_tauglich": true,
   "aufwand": "mittel",
   "leistung": "Foto-Hero AVIF mit fetchpriority=high, feste Seitenverhältnisse, Galerie lazy mit sizes=auto. Farbwechsel ohne Bibliothek über @property-Farben und IntersectionObserver, kein Scroll-Handler. Kalender als HTML-Tabelle aus einer JSON-Datei, die das Haus pflegt; kein Drittanbieter-Widget ohne Klick. Imbue (opsz, wght) und Archivo (wdth, wght) als Variable-Dateien, nur Latin. Video nur in der hero_variante mit Poster und unter 3 MB. sofort-navigation-vorladen für Räume, Pakete und Anfrage, nie für die Danke-Seite.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen. Keine der deutschen Referenzen zeigt freie Termine auf der Seite; der Beleg für die Option mit Haltefrist kommt aus England (Hedsor).",
    "Fehlende Bausteine: termin-verfuegbarkeit-anfrage und raumkapazitaeten-bestuhlung (beschrieben in eventlocation-hochzeit-fehlend.md). Die Prüfung meldet beide ids als unbekannt, bis die Demos gebaut sind.",
    "vergleichstabelle-sticky (Variante pakete) hat einen Abrechnungs-Umschalter Monat/Jahr; hier wird er zum Umschalter Saison oder Wochentag. Das ist eine Umdeutung, keine eigene Demo-Variante.",
    "Gutschein-Verkauf ist nicht vorgesehen; bei Bedarf gutschein-konfigurator mit Widerrufs-Button ergänzen."
   ],
   "stimmung_tags": [
    "warm",
    "filmisch",
    "luxuriös"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     56,
     88,
     136,
     200
    ],
    "sektion": "clamp(88px, 12vw, 192px)",
    "dichte": "luftig",
    "hinweis": "Festlich über Raum: große Sprünge zwischen Kapiteln, Raumtabellen und Kalender dagegen kompakt (Zeilen 12 px)."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(20px, 5vw, 72px)",
    "spalt": "clamp(16px, 2.4vw, 32px)",
    "max_breite": "1440px",
    "hinweis": "Hero randlos, Räume 7/5 (Bild/Tabelle). „Ein Tag bei uns“ in drei bis vier Kapiteln über volle Breite; Räume, Preise, Kalender und Anfrage immer auf Kalk."
   },
   "form": {
    "radius_klein": "2px",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #8C6A3C als Messing-Doppelkontur der Nebenwege; Tabellen 1px #D8CFC0",
    "schatten": "keiner",
    "hinweis": "Art déco statt weich: eckige Bilder, Nebenwege mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel), Mohnrot mit Füllung vom Eintrittspunkt nur für die Haupthandlung."
   },
   "bildsprache": {
    "licht": "Spätes Licht, goldene Stunde; am Abend echtes Kerzen- und Lichterkettenlicht.",
    "ausschnitt": "Raum leer und gedeckt, Hof in der Totale, Details wie Tafel und Blumen.",
    "personen": "Gäste und Paare nur mit Einwilligung, nicht als Gesicht im Mittelpunkt; Fotograf:in am Bild genannt.",
    "formate": [
     "3:2",
     "4:5",
     "16:9"
    ],
    "nicht": "Keine Herzen, kein Glitzer, keine Ringe-Stockfotos, keine Bilder anderer Häuser, kein Video ohne eigenes Material."
   },
   "ton": {
    "anrede": "du",
    "saetze": "Warm und konkret: Plätze, Preise mit Bezug, freie Termine als Wort.",
    "haltung": "Festlich, aber klar. Paare im Plural (ihr, euch); auf der Unterseite für Tagungen und Firmenfeiern Sie.",
    "beispiele": [
     "Euer Fest im Gutshof: bis 120 Gäste, Trauung im Garten.",
     "Freitag, 3. Oktober: angefragt, Option bis [Datum]."
    ],
    "nicht": "„Der schönste Tag eures Lebens“, „Traumhochzeit“, „märchenhaft“, „über 500 Hochzeiten“ hochgezählt."
   },
   "hero_aufbau": {
    "raster": "Foto randlos über die volle Breite; Satz unten links über Spalte 1 bis 7; die Anfrage-Leiste über 10 Spalten an der Unterkante.",
    "bild": "Echtes Foto der Location im späten Licht, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante.",
    "h1": "clamp(3rem, 1.6rem + 6vw, 7.5rem), Imbue 300, gemischt gesetzt, unten links.",
    "handlung": "Anfrage-Leiste (Wunschdatum oder Monat mit „flexibel“, Anlass, Gästezahl) mit „Termin anfragen“ (Mohnrot); daneben „Besichtigung vereinbaren“ und Telefon.",
    "zusatz": "Label in Archivo wdth 112 Versal (Ort, Anlass) über dem Satz."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/eventlocation-hochzeit/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/eventlocation-hochzeit/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/eventlocation-hochzeit/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/eventlocation-hochzeit/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "buchungsleiste-datumsbereich"
     ],
     "grund": "Anreise und Abreise passen zu Zimmern, nicht zu einem Festtag; hier Wunschdatum mit Ausweichdatum und Gästezahl"
    },
    {
     "ids": [
      "slideshow-innere-gegenparallaxe",
      "glas-button"
     ],
     "grund": "Signatur und Hauptknopf des Hotel-Rezepts; die Eventlocation erzählt über den Farbwechsel vom Tag zur Nacht"
    },
    {
     "ids": [
      "konfetti-erfolg",
      "like-herz-burst"
     ],
     "grund": "Hochzeitskitsch; nach der Anfrage eine ruhige Bestätigung mit Antwortzeit"
    },
    {
     "ids": [
      "kreistext-siegel-rotierend",
      "text-on-path"
     ],
     "grund": "drehende Siegel und Schriftbögen kippen sofort ins Kitschige"
    },
    {
     "ids": [
      "mesh-gradient-shader",
      "atmosphaere-partikel",
      "fluessig-marmor-hintergrund"
     ],
     "grund": "Bokeh, Glitzer und Schimmer sind das Klischee; Stimmung kommt aus echten Fotos"
    },
    {
     "ids": [
      "marquee-laufband",
      "rotating-words"
     ],
     "grund": "unruhig neben Kalender und Preisen"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "„über 500 Hochzeiten“ hochgezählt wirkt verkäuferisch; Zahlen stehen still oder gar nicht"
    },
    {
     "ids": [
      "smooth-scroll-lenis",
      "fullpage-snap-slides"
     ],
     "grund": "stören Kalender, Tabellen und schnelles Überfliegen"
    },
    {
     "ids": [
      "prozent-zaehler",
      "logo-aufbau-intro"
     ],
     "grund": "Wartezeit vor dem ersten Bild"
    },
    {
     "ids": [
      "cursor-follower-lerp",
      "magnetische-elemente"
     ],
     "grund": "Agentur-Gesten ohne Nutzen"
    },
    {
     "ids": [
      "prompt-hero-eingabefeld"
     ],
     "grund": "Anfrage über klare Felder, nicht über einen Chat"
    },
    {
     "ids": [],
     "grund": "Herzen, Ringe, Tauben, Rosenblätter, Schnörkel-Script, Pastell-Rosé und Glitzer-Gold – Kitsch; festlich wird es über Licht, Raum und Typografie"
    },
    {
     "ids": [],
     "grund": "Stock-Hochzeitsfotos und Bilder anderer Locations – nur eigene Fotos mit Bildnachweis"
    }
   ],
   "alle_muster": [
    {
     "id": "theme-farbwechsel-scroll",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/meta.json",
     "variante": "tageslauf",
     "demo_url": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=tageslauf"
    },
    {
     "id": "foto-hero-mit-leiste",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste"
    },
    {
     "id": "cinematic-video-hero",
     "rolle": "Hero-Variante",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
    },
    {
     "id": "termin-verfuegbarkeit-anfrage",
     "rolle": "Sektion: Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/meta.json"
    },
    {
     "id": "animiertes-select",
     "rolle": "Sektion: Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "split-screen-sticky-seiten",
     "rolle": "Sektion: Ein Tag bei uns (drei bis vier Kapitel vom Ankommen und der Trauung im Garten über den Empfang im Hof und das Essen in der Scheune bis zur Feier in der Nacht; Bild steht, Text erklärt; die Seite färbt sich an jeder Kapitelgrenze um)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
     "variante": "bild",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
    },
    {
     "id": "raumkapazitaeten-bestuhlung",
     "rolle": "Sektion: Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/meta.json"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "buehne",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
    },
    {
     "id": "tabs-pfeiltasten-focusgroup",
     "rolle": "Sektion: Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
     "variante": "auto",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
    },
    {
     "id": "vergleichstabelle-sticky",
     "rolle": "Sektion: Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
     "variante": "pakete",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
    },
    {
     "id": "masonry-grid-lanes-galerie",
     "rolle": "Sektion: Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis"
    },
    {
     "id": "mehrschritt-anfrage",
     "rolle": "Sektion: Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste"
    },
    {
     "id": "formular-fehlerzusammenfassung",
     "rolle": "Sektion: Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
     "variante": "kompakt",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt"
    },
    {
     "id": "validierung-nach-interaktion",
     "rolle": "Sektion: Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Besichtigung und Probeessen vereinbaren (Termin-Tool erst nach Klick, daneben Telefon und E-Mail)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "platzhalter",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
     "variante": "skizze",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "termin",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin"
    },
    {
     "id": "firmendaten-strukturiert",
     "rolle": "Sektion: Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "friseur",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Dienstleister-Netzwerk (Catering, Floristik, Fotografie, Musik, Trauredner; sichtbar, wer Pflichtpartner ist und ob eine Provision fließt; Logos nur mit Erlaubnis, ab etwa fünf als Raster, sonst Liste)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "raster",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster"
    },
    {
     "id": "bewertungsprofil-mit-echtheitshinweis",
     "rolle": "Sektion: Stimmen (Google und Hochzeitsportal je mit eigenem Schnitt, Anzahl, Stand und Echtheitshinweis; Stimmen von Paaren nur mit Freigabe)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
     "variante": "mehrere",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Barrierefreiheit (eigene Seite für die Website; Barrierefreiheit vor Ort steht zusätzlich bei Anfahrt und Räumen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "erklaerung",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
    },
    {
     "id": "mobile-bottom-navigation",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
     "variante": "fab",
     "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab"
    },
    {
     "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": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "mega-footer-sitemap",
     "rolle": "Footer",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
    },
    {
     "id": "fuellung-vom-eintrittspunkt",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "doppel",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel"
    },
    {
     "id": "token-studio-signatur",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/meta.json"
    },
    {
     "id": "optische-groessen-opsz",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/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": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
    },
    {
     "id": "agentenformular-webmcp",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/meta.json",
     "variante": "projekt",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt"
    }
   ]
  },
  {
   "id": "weingut-hofladen-herkunft",
   "name": "Weingut und Hofladen: Herkunft zuerst",
   "branche": "Weingut / Winzerhof / Hofladen / Manufaktur aus der Landwirtschaft / Brennerei (optional mit Ferienzimmern)",
   "stimmung": [
    "bodenständig",
    "klar",
    "warm",
    "handwerklich"
   ],
   "kurz": "Herkunft ist das Produkt: Jeder Wein hängt an einer Lage, einem Boden und einem Jahrgang, und genau so ist die Seite gebaut. Sortiment mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter in einer Mono wie auf dem Etikett, Pflichtangaben direkt am Wein, Zustellung nur mit Altersprüfung. Weinproben und Hoffeste als Termine, der Hofladen mit echtem Öffnungsstatus, Ferienzimmer optional. Eine klassische Garamond für Lagen und Geschichten, DM Mono für alle Zahlen, Kalkstein und Schiefer als Grund, Buntsandstein-Rot nur für Kaufen. Signatur: ein Foto der Lage, über das man die Sonne ziehen kann, um zu sehen, wann der Hang Licht bekommt. Abgrenzung zu d2c-produkt-zuerst (Produkt-Bento, Warenkorb-Flug) und gastro-warm-appetitlich (Karte, Reservieren, Live-Uhr): Hier führen Lage und Jahrgang, nicht das Produktfoto und nicht die Speisekarte.",
   "referenzen": [
    {
     "seite": "Weingut Wittmann – Lagen (Westhofen, Rheinhessen)",
     "url": "https://www.weingutwittmann.de/en/lagen/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.weingutwittmann.de/en/lagen/ und https://www.weingutwittmann.de/shop/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text; CSS, Schriften und Kurven nicht gemessen): Lagen nach VDP-Stufe gegliedert („VDP.ERSTE LAGE®“, „VDP.GROSSE LAGE®“), eine Übersichtskarte und eine Karte je Lage, ein Foto je Lage mit beschreibendem Alt-Text (Kalksteinböden). Boden, Ausrichtung und Höhe stehen nicht als Daten da; das Rezept verlangt sie. Navigation mit Weingut, Weine, Lagen, Jahrgänge; im Footer Barrierefreiheitserklärung, Widerrufsrecht und „Declare revocation“. Der Shop öffnet mit Altersabfrage „Ich bin über 18 Jahre alt“, die Produktübersicht zeigt Kategorien (Estate, Réserve, Weinpakete, VDP. Ortswein)."
    },
    {
     "seite": "Weingut Bürgerspital zum Hl. Geist – Würzburger Stein und Weinevents",
     "url": "https://www.buergerspital.de/weingut/weinshop/weinlage/wuerzburgerstein/index.html",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.buergerspital.de/weingut/weinshop/weinlage/wuerzburgerstein/index.html und https://www.buergerspital.de/weingut/weinproben/weinevents/m_2041",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Lagenseite im Shop mit Klima und Boden in einem Satz („Verwitterter Muschelkalk prägt den Lagenamen und Wein-Charakter“) und Filtern Jahrgang, Weinlage, Rebsorte, Geschmack, Gebinde, Klassifikation mit Zählern. Weinevents nach Monat: Datum und Uhrzeit, Titel, Dauer, Preis pro Person (Weinprobe 39 €, etwa drei Stunden, sechs Weine), Buchung als Online-Ticket oder Anmeldung; Hoffest mit eigener Seite. Vorbild für Lage als Filter und Termine als Liste."
    },
    {
     "seite": "Gut Wulksfelde – Bio-Hofladen (bei Hamburg)",
     "url": "https://www.gut-wulksfelde.de/das-gut/hofladen/",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://www.gut-wulksfelde.de/das-gut/hofladen/",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Öffnungszeiten mit getrennten Zeiten für Bäckerei-Café und Sonderzeiten, eigene Erzeugnisse (Kartoffeln, Gemüse, Brot, Fleisch) neben Partnerware, Links zu Online-Bestellung und Lieferservice, Verkostungen und Hofführungen. Im Footer die Öko-Kontrollstellen-Nummer „DE-ÖKO-006“ neben den Bio-Zeichen. Vorbild für den Hofladen-Teil und die Rezept-Variante ohne Shop."
    },
    {
     "seite": "Weingut Dr. Loosen – Gästezimmer (Bernkastel-Kues, Mosel)",
     "url": "https://drloosen.de/en/pages/gastezimmer",
     "art": "website",
     "herkunft": "beobachtet",
     "abgerufen": "2026-11-02",
     "quelle": "https://drloosen.de/en/pages/gastezimmer",
     "beobachtung": "Live geprüft 02.11.2026 (WebFetch, nur Text): Sieben Gästezimmer, jedes nach einer Großen Lage des Guts benannt, mit Blick auf Weinberge und Mosel; Preise offen (Einzelzimmer 130 €, Doppelzimmer 150 €, Aufschlag bei nur einer Nacht), Buchung als Anfrage über ein Formular statt Booking-Engine. Shop und VDP-Klassifikation in der Hauptnavigation. Vorbild für Ferienzimmer als Beiwerk, die an den Lagen hängen."
    }
   ],
   "schrift": {
    "paarung_basis": "garamond-wein",
    "headline": "eb-garamond",
    "text": "eb-garamond",
    "akzent": "dm-mono",
    "groessen": "h1 EB Garamond clamp(2.75rem, 1.6rem + 5vw, 6rem), wght 400, Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.5rem + 2vw, 3.25rem), wght 400; Lagennamen und Jahrgangstitel in EB Garamond Italic. Fließtext EB Garamond 1.25rem (20 px, wegen der kleinen x-Höhe), wght 400, Zeilenhöhe 1.55, höchstens 66ch, Mediävalziffern (onum) nur im Fließtext. DM Mono für alle Zahlen und Etiketten: Preis 1rem wght 500, Grundpreis, Füllmenge, % vol, Jahrgang, Analysewerte 0.875rem wght 400; Labels 0.75rem, Versal, +0.1em; Knöpfe DM Mono 500, 0.875rem, Versal, +0.08em.",
    "techniken": [
     "lesesatz-text-wrap",
     "headline-laufweite-zeilenabstand",
     "mono-labels-versal",
     "tabellenziffern",
     "fluide-typo-clamp-cqi"
    ],
    "alternative_eigenprojekt": "Headline gambarino (ITF) oder erode (ITF) für Text – nur für Eigenprojekte, nicht für Templates.",
    "abweichung": "Paarung garamond-wein aus schriften.json unverändert (Einsatz laut Katalog: Wein, Manufaktur, Verlag). EB Garamond steht auf der Beobachtungsliste (A2) und ist hier nie allein: DM Mono trägt alle Zahlen, Preise und Labels wie die Pflichtzeilen eines Etiketts. Weil EB Garamond keine opsz-Achse hat, steht der Text mit 20 px größer als üblich. Unterschied zu gastro (Fraunces, Commissioner), d2c (Young Serif, Instrument Sans), boutique-hotel (Newsreader, Mona Sans) und luxus (Bodoni Moda, Instrument Sans): Garalde statt Display-Serif, Mono statt Grotesk für die Daten. eb-garamond ist neu in den Rezepten, dm-mono steht damit in zwei (kreativstudio). Mono-Labels nach Leitfaden A4, weil das Rezept eine Mono als Akzent nennt."
   },
   "farbe": {
    "prinzip": "Grund und Flächen kommen aus dem Boden der Hauptlage, nicht aus dem Wein. Beispiel hier: Kalkstein hell als Grund, Löss als Fläche für Kaufbox und Steckbrief, Schiefer für dunkle Bänder, das Lagen-Kapitel und den Footer. Signal Buntsandstein-Rot nur für In den Warenkorb, Kaufen und Tickets; auf Schiefer wird der Kauf-Knopf kalkhell mit Schiefer-Schrift. Je nach Lage austauschbar (Schiefer-Blau, Löss-Ocker, Granit-Grau), immer mit 4,5 : 1 geprüft. Weinfarben (Rot, Gold, Rosé) nur aus den Fotos, nie als Fläche. Kein Bordeaux-Verlauf, kein Rebenblatt-Grün als Marke, keine Holzmaserung.",
    "beispiel": [
     "#F1ECE2 Grund Kalkstein",
     "#22211F Text (13,7 : 1)",
     "#E6DCCB Fläche Löss: Kaufbox, Steckbrief, Hofladen-Zeiten (Text 11,9 : 1)",
     "#2F3236 Schiefer: dunkle Bänder, Lagen-Kapitel, Footer (Kalk darauf 10,9 : 1)",
     "#8A3A2B Signal Buntsandstein: In den Warenkorb, Kaufen, Ticket (Weiß darauf 7,7 : 1; als Fläche auf Kalk 6,6 : 1, auf Löss 5,7 : 1); auf Schiefer stattdessen Kalk-Knopf mit Schiefer-Schrift",
     "#5A564F Sekundärtext, Grundpreis, Analysewerte (6,2 : 1 auf Kalk)",
     "#D8CFC0 Linien, Etikett-Rahmen"
    ]
   },
   "animationsstil": "token-luxus-weich",
   "animationsstil_ui": "token-toggle-asymmetrisch",
   "animationsstil_hinweis": "Weich nur für Bilder: Lagenfotos öffnen sich einmal per Maske mit innerem Zurückskalieren, das Hero-Foto skaliert einmal von 1.08 auf 1 (kein Dauerzoom). Shop, Filter, Warenkorb-Drawer, Checkout und Termine laufen über token-toggle-asymmetrisch (öffnen 300 ms, schließen 200 ms), weil token-luxus-weich Formulare und hohe Informationsdichte ausschließt. Das Licht der Signatur folgt dem Zeiger mit dem Lerp-Wert des Musters, ohne eigene Kurve. token-luxus-weich nennt Weingüter ausdrücklich unter wann_einsetzen.",
   "bewegung": {
    "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder); UI über animationsstil_ui",
    "beobachtet": "nicht gemessen: Referenzen nur inhaltlich per WebFetch geprüft (siehe offen); Kurve und Dauern aus dem Animationsstil",
    "dauer_ms": "150 (Farbe, Hover), 300 (Drawer, Filter, Popover öffnen), 200 (schließen), 1600 (Masken-Reveal eines Lagenbilds), 2200 (Zurückskalieren 1.08 → 1, einmalig); Licht der Signatur per Lerp 0.06 je Bild",
    "regel": "Nur Bilder bewegen sich, und nur einmal: Lagenfotos öffnen sich per Maske, das Hero-Foto skaliert einmal zurück. Text, Preise, Steckbriefe und Formulare stehen sofort. Kein Dauerzoom, keine Diashow mit Autoplay. Das Sonnenlicht der Signatur bewegt sich nur mit dem Zeiger oder einem Regler „Tageszeit“, nie von selbst. Bei prefers-reduced-motion sind Bilder sofort da, das Licht steht fest auf Nachmittag, der Regler bleibt ohne Übergang bedienbar.",
    "herkunft": "Kurve und Dauern aus token-luxus-weich (bau.werte maske 1600 ms, zurueckskalieren 2200 ms, buchung_ui 300/200 ms); UI-Paar aus token-toggle-asymmetrisch; Lerp aus tiefenkarten-relighting (bau.werte lerp_licht). Referenzen inhaltlich geprüft, CSS nicht gemessen."
   },
   "hero_beschreibung": "Foto-Hero: die wichtigste Lage oder der Hof in echtem Licht, mit Ort und Lage als Bildunterschrift in DM Mono. Ein Satz in EB Garamond über Herkunft, keine Werbezeile. Zwei Wege: „Weine entdecken“ (Shop) und „Weinprobe & Hoffest“ (Termine); im Kopf der Hofladen-Status aus echten Zeiten. Kein Video ohne eigenes Material, keine Weinglas- oder Trauben-Stockfotos und kein Altersabfrage-Fenster vor dem ersten Bild.",
   "muster": {
    "seitenuebergang": [],
    "preloader": [],
    "navigation": [
     "native-popover-dropdowns",
     "sticky-shrink-header"
    ],
    "hero": [
     "foto-hero"
    ],
    "hero_variante": [],
    "sektionen": [
     {
      "zweck": "Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)",
      "muster": [
       "facettenfilter-ergebnisliste",
       "css-native-karussell",
       "karussell-steuerung"
      ],
      "varianten": {
       "facettenfilter-ergebnisliste": "leiste",
       "css-native-karussell": "produktreihe",
       "karussell-steuerung": "fortschritt"
      }
     },
     {
      "zweck": "Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)",
      "muster": [
       "wein-steckbrief-pflichtangaben",
       "produkt-kaufbox-varianten",
       "galerie-shared-element-vollbild",
       "eu-gewaehrleistungshinweis"
      ],
      "varianten": {
       "produkt-kaufbox-varianten": "seite",
       "galerie-shared-element-vollbild": "produkt",
       "eu-gewaehrleistungshinweis": "kaufbox"
      }
     },
     {
      "zweck": "Warenkorb und Versand (Drawer mit Grundpreis und MwSt.; Versandkosten je Karton, Lieferzeit, Zustellung nur mit Alters- und Identitätsprüfung; Abholung im Hofladen als Versandart)",
      "muster": [
       "warenkorb-drawer"
      ],
      "varianten": {
       "warenkorb-drawer": "drawer"
      }
     },
     {
      "zweck": "Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter)",
      "muster": [
       "tiefenkarten-relighting",
       "lagen-steckbrief-karte",
       "slideshow-innere-gegenparallaxe"
      ],
      "varianten": {
       "tiefenkarten-relighting": "sonne",
       "slideshow-innere-gegenparallaxe": "ueberblenden"
      }
     },
     {
      "zweck": "Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv)",
      "muster": [
       "editorial-magazin-layout"
      ],
      "varianten": {
       "editorial-magazin-layout": "magazin"
      }
     },
     {
      "zweck": "Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage)",
      "muster": [
       "programm-kalender",
       "termin-buchung-zwei-klick"
      ],
      "varianten": {
       "programm-kalender": "programm",
       "termin-buchung-zwei-klick": "linkout"
      }
     },
     {
      "zweck": "Hofladen und Vinothek (Öffnungszeiten mit Status, Sonderzeiten zu Lese, Hoffest und Feiertagen; was es gibt, eigene Erzeugnisse getrennt von Zugekauftem; Probierausschank; Abholung von Online-Bestellungen)",
      "muster": [
       "oeffnungszeiten-status"
      ],
      "varianten": {
       "oeffnungszeiten-status": "karte"
      }
     },
     {
      "zweck": "Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer)",
      "muster": [
       "team-ueber-mich-layout",
       "logo-wand-social-proof"
      ],
      "varianten": {
       "team-ueber-mich-layout": "statement",
       "logo-wand-social-proof": "siegel-nachweis"
      }
     },
     {
      "zweck": "Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine)",
      "muster": [
       "css-native-karussell",
       "kontakt-anfrage-formular"
      ],
      "varianten": {
       "css-native-karussell": "peek"
      }
     },
     {
      "zweck": "Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick)",
      "muster": [
       "karte-zwei-klick",
       "firmendaten-strukturiert"
      ],
      "varianten": {
       "karte-zwei-klick": "bild",
       "firmendaten-strukturiert": "friseur"
      }
     },
     {
      "zweck": "Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten)",
      "muster": [
       "footer-newsletter-mit-persoenlichkeit"
      ],
      "varianten": {
       "footer-newsletter-mit-persoenlichkeit": "saison"
      }
     },
     {
      "zweck": "Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)",
      "muster": [
       "widerruf-und-kuendigung-schaltflaeche",
       "barrierefreiheit-seite"
      ],
      "varianten": {
       "widerruf-und-kuendigung-schaltflaeche": "richtig",
       "barrierefreiheit-seite": "bfsg"
      }
     }
    ],
    "scroll": [],
    "schrift_animation": [],
    "hover": [
     "bild-zoom-in-maske"
    ],
    "cursor": [],
    "mikro": [
     "einblenden-starting-style",
     "animiertes-select",
     "checkbox-radio-animiert"
    ],
    "material": [],
    "galerie": [
     "css-native-karussell",
     "galerie-shared-element-vollbild"
    ],
    "footer": [
     "footer-newsletter-mit-persoenlichkeit"
    ],
    "button": [
     "button-zustaende",
     "kontur-button-zeichnen"
    ],
    "hero_varianten": {
     "foto-hero": "bildunterschrift"
    }
   },
   "signatur": [
    "tiefenkarten-relighting"
   ],
   "varianten_demo": {
    "kontur-button-zeichnen": "ecken",
    "footer-newsletter-mit-persoenlichkeit": "saison",
    "bild-zoom-in-maske": "basis",
    "gap-decorations-raster": "kenndaten",
    "css-native-karussell": "produktreihe",
    "galerie-shared-element-vollbild": "produkt"
   },
   "nicht_verwenden": [
    "in-den-warenkorb-flug / like-herz-burst – Signatur von d2c-produkt-zuerst; hier bestätigt der Drawer ruhig, was im Korb liegt",
    "live-uhr-und-standort – Signatur von gastro-warm-appetitlich; der Hofladen zeigt den Status aus echten Zeiten",
    "bento-grid-interaktiv – das Produkt-Bento gehört zu d2c; Weine stehen als Liste nach Lage und Jahrgang",
    "webgl-bildverzerrung / svg-filter-verzerrung – verfälschen Lagen- und Flaschenfotos",
    "smooth-scroll-lenis – stört Filter, Drawer und Checkout",
    "konfetti-erfolg – nach dem Kauf eine ruhige Bestätigung mit Lieferzeit",
    "zahlen-odometer – „seit 1648“ wird nicht hochgezählt",
    "marquee-laufband – unruhig neben Preisen und Pflichtangaben",
    "Altersabfrage als Sperrbildschirm vor dem ersten Inhalt – vom Jugendschutzgesetz nicht verlangt, schützt nicht wirksam und verzögert den ersten Bildschirm; geprüft wird bei der Übergabe",
    "Weinglas-, Korken- und Trauben-Stockfotos, Holzmaserung, Rebenranken als Ornament – Klischee; eigene Fotos von Lage, Keller, Hof und Menschen",
    "„bekömmlich“, „gesund“, „wohltuend“ – gesundheitsbezogene Angaben sind bei Getränken über 1,2 % vol unzulässig",
    "„nachhaltig“, „naturnah“, „klimaneutral“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)"
   ],
   "optional": [
    "gap-decorations-raster",
    "sektionskante-shape"
   ],
   "regeln": [
    "Erster Bildschirm: echtes Foto der Lage oder des Hofs mit Ort als Bildunterschrift, ein Satz zur Herkunft, zwei Wege „Weine entdecken“ und „Weinprobe & Hoffest“, im Kopf der Hofladen-Status aus echten Zeiten.",
    "Herkunft führt: Jeder Wein nennt Lage, Jahrgang und Rebsorte und verlinkt die Lage; jede Lage nennt Boden, Ausrichtung und ihre Weine (wie Bürgerspital mit der Lage als Filter, Wittmann mit Karte je Lage).",
    "Preise (Preisangabenverordnung): Gesamtpreis inkl. MwSt. und Grundpreis je Liter bei jedem Preis, auch in Liste, Reihe, Kaufbox und Warenkorb; kein Gesamtpreis ohne Grundpreis. Versandkosten und Lieferzeit vor dem Kauf, Pfand getrennt, Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV). Bestellknopf „zahlungspflichtig bestellen“. Vom Kunden prüfen lassen.",
    "Pflichtangaben am Wein (wein-steckbrief-pflichtangaben): Alkoholgehalt in % vol in ganzen oder halben Einheiten, „enthält Sulfite“, Füllmenge, Herkunft („Wein aus Deutschland“, Anbaugebiet), Erzeugerabfüllung oder Abfüller mit vollständiger Anschrift. Bei Weinen, die nach dem 08.12.2023 hergestellt wurden, Zutatenverzeichnis und Nährwerte vollständig auf der Weinseite, nicht nur als Link oder QR-Code. Alle Angaben des Etiketts stehen vor dem Kauf im Shop. Vom Kunden prüfen lassen.",
    "Das E-Label hinter dem QR-Code der Flasche ist nicht die eigene Website: neutral, ohne Werbung, ohne Shop-Link, ohne Cookies und Tracking (LGL Bayern). Die Website verlinkt es nicht als Werbefläche und ersetzt mit ihm nicht die Angaben im Shop.",
    "Jugendschutz (§ 9 JuSchG): Wein, Sekt und Bier nicht an unter 16-Jährige, Spirituosen und spirituosenhaltige Getränke nicht an unter 18-Jährige. Geprüft wird bei der Übergabe: Versand mit Alters- und Identitätsprüfung (etwa DHL Ident-Check), Abholung im Hofladen mit Ausweis. Ein Klick „Ich bin über 18“ reicht nicht. Eine Altersabfrage beim Betreten ist nicht vorgeschrieben; wünscht der Kunde sie, dann als kleiner Dialog, der Inhalte für Suchmaschinen und Screenreader nicht sperrt. Vom Kunden prüfen lassen.",
    "Werbung: keine gesundheitsbezogenen Angaben bei Getränken über 1,2 % vol (Art. 4 Abs. 3 VO (EG) 1924/2006); keine Ansprache von Jugendlichen; Bio und Öko nur mit Zertifikat und Kontrollstellen-Nummer (wie Gut Wulksfelde mit „DE-ÖKO-006“ im Footer); Umweltaussagen nur mit Nachweis.",
    "Verträge: Widerrufs-Button „Vertrag widerrufen“ im Footer und mobilen Menü; Weinabo oder Weinclub als Dauervertrag zusätzlich mit „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Tickets für Weinproben mit festem Termin haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB); für Subskription gilt eine eigene Ausnahme (§ 312g Abs. 2 Nr. 5 BGB), nur nach Prüfung nutzen. Texte vom Kunden.",
    "Hofladen: Öffnungszeiten aus einer Quelle (firmendaten-strukturiert) mit Sonderzeiten für Lese, Hoffest und Feiertage; eigene Erzeugnisse getrennt von Zugekauftem kennzeichnen. Werden andere Lebensmittel online verkauft, gelten dieselben Pflichtangaben vor dem Kauf (Zutaten, Allergene, Hersteller).",
    "Signatur (tiefenkarten-relighting, Variante sonne) im Kapitel Herkunft, nicht im Hero: echtes Lagenfoto mit Tiefenkarte; das Licht folgt dem Zeiger, auf Touch ein Regler „Tageszeit“ statt Gyroskop. Bildunterschrift „Licht interaktiv simuliert“. Standbild als Rückfall ohne WebGL, bei reduzierter Bewegung und auf schwachen Geräten; three.js erst beim Erreichen der Sektion laden. Text liegt als HTML neben dem Bild, nie auf dem Canvas.",
    "Typografie: EB Garamond für Headlines, Lagen und Geschichten, Fließtext mindestens 20 px; DM Mono für jede Zahl (Preis, Grundpreis, Jahrgang, % vol, Füllmenge, Analysewerte) und für Labels in Versal; Mediävalziffern nur im Fließtext.",
    "Bewegung: nur Bilder, nur einmal (Masken-Reveal 1,6 s, Zurückskalieren 2,2 s, sine.inOut); Shop, Filter, Drawer und Formulare in 300 ms auf und 200 ms zu. Nichts bewegt sich von selbst.",
    "Knöpfe: Buntsandstein gefüllt mit allen Zuständen (Laden, Erfolg „Im Warenkorb“) nur für Kaufen und Tickets; Nebenwege als Kontur mit Eckklammern wie die Passermarken eines Etiketts. Ein Knopfsystem, Trefferfläche mindestens 44 px.",
    "Ferienzimmer sind Beiwerk: Preis pro Nacht inkl. MwSt., Hinweis auf Gästebeitrag, wo er erhoben wird; Anfrage statt Buchungsleiste, solange es keine Booking-Engine gibt (wie Dr. Loosen).",
    "Pflichtangaben (Leitfaden 8a): Impressum, Datenschutzerklärung, AGB, Widerrufsbelehrung, Zahlungsarten, Erklärung zur Barrierefreiheit. Für Non-Food im Shop (Gläser, Geschenkkisten) Hersteller und Sicherheitsangaben nach GPSR. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen."
   ],
   "varianten": [
    {
     "name": "Brennerei / Edelbrand-Manufaktur",
     "hinweis": "Spirituosen nicht an unter 18-Jährige: Zustellung mit Ident-Prüfung ab 18, auch bei gemischten Kartons mit Wein. An die Stelle der Lage tritt die Herkunft des Obstes (Streuobstwiese, Sorte, Erntejahr), an die Stelle des Jahrgangsberichts „Ernte und Brand“. Pflichtangaben je Brand: % vol, Füllmenge, Grundpreis je Liter (0,35 l, 0,5 l), Hersteller mit Anschrift; ob Zutaten und Nährwerte nötig sind, regelt anderes Recht als beim Wein, vom Kunden prüfen lassen. Signatur bleibt: das Licht über der Obstwiese.",
     "sektionen": [
      "Brände nach Frucht und Reihe (facettenfilter-ergebnisliste, Variante leiste)",
      "Brand-Seite mit Steckbrief und Kaufbox (wein-steckbrief-pflichtangaben für Spirituosen, produkt-kaufbox-varianten Variante seite)",
      "Obst und Herkunft (tiefenkarten-relighting Variante sonne, lagen-steckbrief-karte für Wiesen und Bäume)",
      "Vom Obst zum Brand (prozess-timeline-wachsende-linie)",
      "Brennereiführung und Tasting (programm-kalender nur ab etwa acht Terminen im Monat, sonst Liste)",
      "Hofladen, Anfahrt, Widerruf und Barrierefreiheit wie im Rezept"
     ],
     "weglassen": [
      "Der Jahrgang (ersetzt durch „Ernte und Brand“)",
      "Ferienzimmer, wenn es keine gibt"
     ],
     "muster_zusatz": [
      "prozess-timeline-wachsende-linie"
     ]
    },
    {
     "name": "Hofladen ohne Onlineshop",
     "hinweis": "Hauptziel ist der Besuch: Öffnungsstatus und „Was es gerade gibt“ stehen ganz oben. Vorbestellen zur Abholung als Anfrage ohne Kauf auf der Seite; ob dabei trotzdem ein Vertrag im Fernabsatz entsteht, vom Kunden prüfen lassen. Werden Preise gezeigt, gilt auch hier der Grundpreis. Wein-Steckbriefe bleiben ohne Kaufbox, Jugendschutz gilt an der Ladenkasse. Signatur bleibt: Licht über Feld, Wiese oder Lage.",
     "sektionen": [
      "Heute geöffnet und Sonderzeiten (oeffnungszeiten-status Variante karte)",
      "Was es gerade gibt (Saisonliste mit eigenen Erzeugnissen und Partnerware getrennt)",
      "Vorbestellen zur Abholung (kontakt-anfrage-formular)",
      "Hof und Herkunft (tiefenkarten-relighting Variante sonne)",
      "Hoffeste, Führungen, Verkostungen (programm-kalender nur ab etwa acht Terminen im Monat, sonst Liste)",
      "Anfahrt (karte-zwei-klick)"
     ],
     "weglassen": [
      "Warenkorb und Versand",
      "Kaufbox auf der Weinseite",
      "Widerrufs- und Kündigungs-Button (nur ohne Online-Verträge; vom Kunden prüfen lassen)"
     ],
     "muster_zusatz": []
    }
   ],
   "template_tauglich": true,
   "aufwand": "hoch",
   "leistung": "Hero-Foto AVIF mit fetchpriority=high, einmaliges Zurückskalieren nur per transform. Weinlisten als HTML aus einer Datenquelle, Filter ohne Neuladen, Drawer als natives dialog. Signatur mit three.js erst beim Erreichen der Herkunft-Sektion laden (Bild und Tiefenkarte in einer Auflösung, Pixelratio höchstens 1.5), sonst Standbild; LCP und INP bleiben davon frei. EB Garamond (wght normal und italic) als Variable-Dateien, DM Mono 400 und 500, nur Latin. Ticketsystem, Karte und Booking-Engine erst nach Klick. sofort-navigation-vorladen für Weine, Lagen und Termine, nie für Warenkorb, Checkout und Danke-Seite.",
   "offen": [
    "Referenzen nur inhaltlich per WebFetch geprüft; Schriften, Farben und Kurven der Vorbilder nicht gemessen. Eine Wein-Produktseite von Wittmann war nicht abrufbar (Fehler der Seite), die Lagenseite des Bürgerspitals zeigt keine Preise; die Pflichtangaben im Shop sind deshalb aus den Rechtsquellen abgeleitet, nicht an einer Referenz beobachtet.",
    "Fehlende Bausteine: wein-steckbrief-pflichtangaben und lagen-steckbrief-karte (beschrieben in weingut-hofladen-herkunft-fehlend.md). Die Prüfung meldet beide ids als unbekannt, bis die Demos gebaut sind.",
    "Signatur tiefenkarten-relighting: Die Demo spielt in der Hotel-Welt (Ansitz am Rosengarten); die Variante sonne nennt Weingüter ausdrücklich. Für die Kundenseite braucht jedes Lagenfoto eine Tiefenkarte (KI-Tiefenschätzung); Leistungskosten laut index.json mittel.",
    "Leitfaden A4 nennt die Rezepte mit Mono-Akzent von Hand; weingut-hofladen-herkunft muss dort ergänzt werden.",
    "Die Brennerei-Variante hat keine eigene Referenz: die Stählemühle war per WebFetch nicht erreichbar.",
    "Animationsstil token-luxus-weich teilt sich das Rezept mit boutique-hotel-gastgeber, mode-beauty-kollektion und bestattung-wuerdig; Unterschied liegt in Schrift, Farbe und Signatur."
   ],
   "stimmung_tags": [
    "warm",
    "ruhig"
   ],
   "raum": {
    "basis_px": 8,
    "skala_px": [
     4,
     8,
     12,
     16,
     24,
     32,
     48,
     64,
     96,
     144
    ],
    "sektion": "clamp(72px, 9vw, 144px)",
    "dichte": "mittel",
    "hinweis": "Wie ein Etikett: Weinzeilen mit Jahrgang, Füllmenge, Preis und Grundpreis eng (4 bis 8 px), Lagen-Kapitel mit viel Luft."
   },
   "raster": {
    "spalten": 12,
    "rand": "clamp(16px, 4vw, 56px)",
    "spalt": "clamp(16px, 2vw, 32px)",
    "max_breite": "1320px",
    "hinweis": "Sortiment als Liste oder 3er-Raster, Lage als Filter. Lagen-Kapitel 7/5 (Foto/Steckbrief), Kaufbox auf Löss."
   },
   "form": {
    "radius_klein": "0",
    "radius_gross": "0",
    "pille": false,
    "linie": "1px #D8CFC0 als Etikett-Rahmen um Kaufbox und Steckbrief",
    "schatten": "keiner",
    "hinweis": "Eckig wie ein Etikett. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Buntsandstein gefüllt nur für Kaufen und Tickets."
   },
   "bildsprache": {
    "licht": "Echtes Licht in der Lage, früher Morgen oder Abend; Hof und Keller im Arbeitslicht.",
    "ausschnitt": "Hang in der Totale, Boden und Rebe im Detail, Flasche als ruhiger Freisteller.",
    "personen": "Ja: Winzer:in und Team bei der Arbeit; Gäste bei Proben nur mit Einwilligung.",
    "formate": [
     "3:2",
     "4:5",
     "1:1"
    ],
    "nicht": "Keine Weinglas- oder Trauben-Stockfotos, keine Gesundheitsversprechen, keine Ansprache Jugendlicher, kein Altersabfrage-Fenster vor dem ersten Bild."
   },
   "ton": {
    "anrede": "Sie",
    "saetze": "Klar und erzählend in der Herkunft, nüchtern in den Zahlen (Jahrgang, % vol, Preis je Liter).",
    "haltung": "Bodenständig und warm. Herkunft führt, nicht Werbung. Ein junges Weingut darf duzen, dann durchgehend.",
    "beispiele": [
     "Riesling von der Lage [Name], Schiefer, Südhang. 2023.",
     "Hoffest am [Datum]: Weinprobe ab 14 Uhr im Hof."
    ],
    "nicht": "„edler Tropfen“, „Genuss pur“, gesundheitsbezogene Angaben, „Bio“ ohne Kontrollstellen-Nummer."
   },
   "hero_aufbau": {
    "raster": "12 Spalten: Foto der Lage randlos oder über 8 Spalten, Satz zur Herkunft über Spalte 1 bis 6 darunter oder daneben.",
    "bild": "Echtes Foto der Hauptlage oder des Hofs, 3:2 Desktop, 4:5 mobil; Ort und Lage als Bildunterschrift in DM Mono.",
    "h1": "clamp(2.75rem, 1.6rem + 5vw, 6rem), EB Garamond 400, links unter dem Bild.",
    "handlung": "„Weine entdecken“ (Buntsandstein gefüllt) und „Weinprobe & Hoffest“ (Kontur mit Eckklammern).",
    "zusatz": "Hofladen-Status aus echten Zeiten im Kopf; Bildunterschrift Ort · Lage in DM Mono 0.75rem Versal."
   },
   "url": "https://cecodesign.de/lab/fundus/rezepte/weingut-hofladen-herkunft/",
   "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/weingut-hofladen-herkunft/tokens.css",
   "bauplan": "https://cecodesign.de/lab/fundus/rezepte/weingut-hofladen-herkunft/bauplan.txt",
   "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/weingut-hofladen-herkunft/rezept.json",
   "nicht_verwenden_ids": [
    {
     "ids": [
      "in-den-warenkorb-flug",
      "like-herz-burst"
     ],
     "grund": "Signatur von d2c-produkt-zuerst; hier bestätigt der Drawer ruhig, was im Korb liegt"
    },
    {
     "ids": [
      "live-uhr-und-standort"
     ],
     "grund": "Signatur von gastro-warm-appetitlich; der Hofladen zeigt den Status aus echten Zeiten"
    },
    {
     "ids": [
      "bento-grid-interaktiv"
     ],
     "grund": "das Produkt-Bento gehört zu d2c; Weine stehen als Liste nach Lage und Jahrgang"
    },
    {
     "ids": [
      "webgl-bildverzerrung",
      "svg-filter-verzerrung"
     ],
     "grund": "verfälschen Lagen- und Flaschenfotos"
    },
    {
     "ids": [
      "smooth-scroll-lenis"
     ],
     "grund": "stört Filter, Drawer und Checkout"
    },
    {
     "ids": [
      "konfetti-erfolg"
     ],
     "grund": "nach dem Kauf eine ruhige Bestätigung mit Lieferzeit"
    },
    {
     "ids": [
      "zahlen-odometer"
     ],
     "grund": "„seit 1648“ wird nicht hochgezählt"
    },
    {
     "ids": [
      "marquee-laufband"
     ],
     "grund": "unruhig neben Preisen und Pflichtangaben"
    },
    {
     "ids": [],
     "grund": "Altersabfrage als Sperrbildschirm vor dem ersten Inhalt – vom Jugendschutzgesetz nicht verlangt, schützt nicht wirksam und verzögert den ersten Bildschirm; geprüft wird bei der Übergabe"
    },
    {
     "ids": [],
     "grund": "Weinglas-, Korken- und Trauben-Stockfotos, Holzmaserung, Rebenranken als Ornament – Klischee; eigene Fotos von Lage, Keller, Hof und Menschen"
    },
    {
     "ids": [],
     "grund": "„bekömmlich“, „gesund“, „wohltuend“ – gesundheitsbezogene Angaben sind bei Getränken über 1,2 % vol unzulässig"
    },
    {
     "ids": [],
     "grund": "„nachhaltig“, „naturnah“, „klimaneutral“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)"
    }
   ],
   "alle_muster": [
    {
     "id": "tiefenkarten-relighting",
     "rolle": "Signatur",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/meta.json",
     "variante": "sonne",
     "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo?v=sonne"
    },
    {
     "id": "foto-hero",
     "rolle": "Hero",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
     "variante": "bildunterschrift",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=bildunterschrift"
    },
    {
     "id": "facettenfilter-ergebnisliste",
     "rolle": "Sektion: Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
     "variante": "leiste",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste"
    },
    {
     "id": "css-native-karussell",
     "rolle": "Sektion: Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
     "variante": "produktreihe",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe",
     "varianten_je_rolle": [
      {
       "rolle": "Sektion: Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)",
       "variante": "produktreihe",
       "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
      },
      {
       "rolle": "Sektion: Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine)",
       "variante": "peek",
       "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
      }
     ]
    },
    {
     "id": "karussell-steuerung",
     "rolle": "Sektion: Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/meta.json",
     "variante": "fortschritt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=fortschritt"
    },
    {
     "id": "wein-steckbrief-pflichtangaben",
     "rolle": "Sektion: Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/meta.json"
    },
    {
     "id": "produkt-kaufbox-varianten",
     "rolle": "Sektion: Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
     "variante": "seite",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite"
    },
    {
     "id": "galerie-shared-element-vollbild",
     "rolle": "Sektion: Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
     "variante": "produkt",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
    },
    {
     "id": "eu-gewaehrleistungshinweis",
     "rolle": "Sektion: Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
     "variante": "kaufbox",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
    },
    {
     "id": "warenkorb-drawer",
     "rolle": "Sektion: Warenkorb und Versand (Drawer mit Grundpreis und MwSt.; Versandkosten je Karton, Lieferzeit, Zustellung nur mit Alters- und Identitätsprüfung; Abholung im Hofladen als Versandart)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
     "variante": "drawer",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer"
    },
    {
     "id": "lagen-steckbrief-karte",
     "rolle": "Sektion: Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/meta.json"
    },
    {
     "id": "slideshow-innere-gegenparallaxe",
     "rolle": "Sektion: Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/meta.json",
     "variante": "ueberblenden",
     "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=ueberblenden"
    },
    {
     "id": "editorial-magazin-layout",
     "rolle": "Sektion: Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
     "variante": "magazin",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
    },
    {
     "id": "programm-kalender",
     "rolle": "Sektion: Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
     "variante": "programm",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
    },
    {
     "id": "termin-buchung-zwei-klick",
     "rolle": "Sektion: Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json",
     "variante": "linkout",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=linkout"
    },
    {
     "id": "oeffnungszeiten-status",
     "rolle": "Sektion: Hofladen und Vinothek (Öffnungszeiten mit Status, Sonderzeiten zu Lese, Hoffest und Feiertagen; was es gibt, eigene Erzeugnisse getrennt von Zugekauftem; Probierausschank; Abholung von Online-Bestellungen)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
     "variante": "karte",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte"
    },
    {
     "id": "team-ueber-mich-layout",
     "rolle": "Sektion: Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
     "variante": "statement",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement"
    },
    {
     "id": "logo-wand-social-proof",
     "rolle": "Sektion: Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
     "variante": "siegel-nachweis",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis"
    },
    {
     "id": "kontakt-anfrage-formular",
     "rolle": "Sektion: Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
    },
    {
     "id": "karte-zwei-klick",
     "rolle": "Sektion: Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick)",
     "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": "firmendaten-strukturiert",
     "rolle": "Sektion: Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json",
     "variante": "friseur",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur"
    },
    {
     "id": "footer-newsletter-mit-persoenlichkeit",
     "rolle": "Sektion: Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
     "variante": "saison",
     "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison"
    },
    {
     "id": "widerruf-und-kuendigung-schaltflaeche",
     "rolle": "Sektion: Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
     "variante": "richtig",
     "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
    },
    {
     "id": "barrierefreiheit-seite",
     "rolle": "Sektion: Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
     "variante": "bfsg",
     "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
    },
    {
     "id": "native-popover-dropdowns",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
    },
    {
     "id": "sticky-shrink-header",
     "rolle": "Navigation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/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": "einblenden-starting-style",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
    },
    {
     "id": "animiertes-select",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
    },
    {
     "id": "checkbox-radio-animiert",
     "rolle": "Mikroanimation",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
    },
    {
     "id": "button-zustaende",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
    },
    {
     "id": "kontur-button-zeichnen",
     "rolle": "Buttons",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
     "variante": "ecken",
     "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken"
    },
    {
     "id": "token-luxus-weich",
     "rolle": "Animationsstil",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/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": "lesesatz-text-wrap",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/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": "mono-labels-versal",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
    },
    {
     "id": "tabellenziffern",
     "rolle": "Schrift-Technik",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/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": "gap-decorations-raster",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/meta.json",
     "variante": "kenndaten",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten"
    },
    {
     "id": "sektionskante-shape",
     "rolle": "Optional",
     "demo": true,
     "meta": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/meta.json"
    }
   ]
  }
 ]
}