{
 "schema": "fundus-rezept/1",
 "stand": "02.11.2026",
 "basis": {
  "stand": "02.11.2026 (Runde 5: Redaktion nach KI-Audit und Lückenrecherche)",
  "muster": [
   "vt-cross-document-mpa",
   "css-view-reveal-nativ",
   "unterstreichung-varianten",
   "button-zustaende",
   "validierung-nach-interaktion",
   "consent-banner-gestaltet",
   "fokus-stil-system",
   "sprunglinks-landmarken",
   "bewegung-pausieren-schalter",
   "fehlerseite-leerzustand",
   "dialog-modal-nativ",
   "zoom-und-textabstand-robust",
   "kontrastmodus-forced-colors",
   "firmendaten-strukturiert",
   "sofort-navigation-vorladen",
   "danke-seite-naechste-schritte",
   "rechtstext-layout",
   "favicon-teilbild-system",
   "druckansicht-print"
  ],
  "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. Seit 04.11.2026 gehören auch eine Danke-Seite mit nächsten Schritten nach jedem Formular (danke-seite-naechste-schritte) und lesbare Rechtsseiten im Look der Website (rechtstext-layout) dazu. Seit 05.11.2026 gehören dazu ein vollständiger Symbolsatz aus der Marke (favicon-teilbild-system, Variante satz) und ein Druckstil für die Rechtsseiten (druckansicht-print, Variante rechtstext).",
  "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.",
   "Lange deutsche Wörter trennen: hyphens: auto mit lang=\"de\" für Fließtext und schmale Spalten, in Headlines weiche Trennstellen (&shy;) an den Wortfugen, nie bei Marken, Telefonnummern, Preisen und Codes (silbentrennung-komposita).",
   "Zahlen, Daten und Telefonnummern deutsch und einheitlich setzen: geschütztes Leerzeichen vor € und %, Bis-Strich ohne Leerzeichen für Spannen (9–13 Uhr), Telefon gegliedert und als tel:-Link mit +49, eine Satzregel je Seite (zahlen-datum-telefon-satz).",
   "Impressum, Datenschutz, AGB und Erklärung zur Barrierefreiheit als lesbare Seiten im Look der Website (rechtstext-layout): Impressum als kurzes Blatt ohne Inhaltsverzeichnis (Variante impressum), lange Texte mit Inhaltsverzeichnis, Ankern und Stand-Datum (Variante datenschutz); Sprünge aus dem Inhaltsverzeichnis landen sichtbar unter dem Kopf (anker-landung-markieren, Variante inhalt). Dazu ein Druckstil für dieselben Seiten (druckansicht-print, Variante rechtstext): A4 mit Kopf, Fuß, Stand und Seitenzahl, Linkadressen am Ende. Die Texte liefert der Kunde, vom Kunden prüfen lassen.",
   "Jedes Formular, das eine Anfrage, Buchung, Anmeldung oder Bewerbung abschickt, endet auf einer Danke-Seite mit den nächsten Schritten (danke-seite-naechste-schritte): Variante termin nach Buchungen, anfrage nach Angebots- und Kontaktanfragen, bestaetigen bei Newsletter und Erinnerungen mit Double-Opt-in; keine Werbung davor, keine Zeitzusage, die der Betrieb nicht hält.",
   "Formularfelder bekommen passende autocomplete-Werte, inputmode, sichtbare Beschriftung und Fehlertexte, die sagen, was zu tun ist (formular-eingabehilfen-autofill, Spickzettel in der Variante uebersicht).",
   "Jede Seite bekommt aus der Marke einen vollständigen Symbolsatz (favicon-teilbild-system, Variante satz): favicon.ico, icon.svg mit Dunkelmodus, apple-touch-icon, 192 und 512 px, maskierbares Icon und Manifest. Seiten, die geteilt werden (Veranstaltung, Artikel, Stelle, Objekt), bekommen zusätzlich ein Teilbild 1200 × 630 aus Rubrik und Titel (Variante teilbild), wo das Rezept es nennt.",
   "Jede Startseite hat einen Moment, an den man sich erinnert (rezept.moment: was, wo, gewicht, muster, variante): groß bzw. interaktiv, im ersten oder zweiten Bildschirm, abgeleitet aus Signatur und Branche. Auch ruhige Rezepte: dort langsam und groß, nie unsichtbar (Jury-Lehre 05.11.2026).",
   "Display-Schriften mit Haarlinien (Didone wie Bodoni Moda und Imbue, Display-Schnitte wie Libre Caslon Display, Fraunces und Newsreader mit hoher opsz und wght unter 400) zerfallen auf dem Bildschirm unter etwa 40 px. Display-Werte nur für die H1 ab etwa 2.75rem; H2 mit opsz an die Größe gekoppelt oder fest 24 bis 36 und höherem Gewicht (ab wght 500), H3 und kleiner in der Textschrift.",
   "Bilder: wenige, aber groß. Lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; mittelgroße Fotos und dünne Strichzeichnungen wirken wie Vorlage. Zeichnungen kräftig und groß als eigene Bildwelt (Strich ab 2,5 px, Flächen in den Rezeptfarben), nie als dünne Icons (bildsprache.gewicht)."
  ],
  "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). Runde 4 (04.11.2026): danke-seite-naechste-schritte und rechtstext-layout in die Grundausstattung, Grundregeln zu Silbentrennung, Zahlensatz, Rechtsseiten, Danke-Seite und Eingabehilfen. Runde 3 (05.11.2026): favicon-teilbild-system (satz) und druckansicht-print (rechtstext) in die Grundausstattung. Runde 3b (05.11.2026, Jury-Lehren): Feld moment je Rezept, Seitenwechsel mindestens 350–400 ms sichtbar, minimales Intro ruhiger Rezepte, Haarlinien-Regel, Bilder wenige und groß. Runde 3b (05.11.2026, Jury-Lehren): Feld moment je Rezept, Seitenwechsel mindestens 350–400 ms sichtbar, minimales Intro ruhiger Rezepte, Haarlinien-Regel, Bilder wenige und groß.",
  "bewegung_basis": {
   "stand": "05.11.2026",
   "zweck": "Bewegungs-Partitur: legt je Rezept fest, was sich beim Laden, Scrollen, Zeigen und beim Seitenwechsel bewegt, in welcher Reihenfolge, wie lange und mit welcher Kurve. Die gemeinsamen Regeln stehen hier einmal; rezepte[].bewegung nennt nur, was abweicht oder konkret ist. Die älteren Felder easing, dauer_ms, regel und beobachtet bleiben gültig und gehen vor, wo sie strenger sind.",
   "felder": {
    "kurve": "haupt = die eine Hauptkurve (--ease in tokens.css, aus dem Animationsstil); ein/aus = Eintritt und Austritt (--ease-ein, --ease-aus); ui = Öffnen/Schließen für Menüs, Formulare, Dialoge (--ui-ease-ein/--ui-ease-aus), wo das Rezept einen UI-Stil hat; gilt_fuer sagt, wofür die Hauptkurve gilt; ausnahme nennt die eine erlaubte Sonderkurve, falls das Rezept eine nennt.",
    "dauern": "In ms. klein = Hover, Farbe, Druck, Fokus; mittel = UI öffnen (Menü, Akkordeon, Reiter, Dialog); gross = Auftritt von Hero, Bild-Reveal, Signatur; seitenwechsel = Standard-Seitenwechsel gesamt; schliessen = mittel beim Schließen (mittel × aus_faktor, immer kürzer). tokens nennt die Variable aus tokens.css mit genau diesem Wert, sonst „eigener Wert“.",
    "laden": "Startseite beim ersten Aufruf im Tab: schritte in Reihenfolge, je teil, ab_ms (Liste = Zeilen der H1), dauer_ms (0 = steht), art. ende_ms = letzte Bewegung steht (ohne einmaliges Zurückskalieren des Hero-Bilds). wiederholt = jeder weitere Aufruf und Seiten ohne Intro.",
    "scroll": "reveals: höchstens drei Arten je Seite (art, muster, wo, dauer_ms, versatz_ms, weg, ausloeser). fortschritt: höchstens eine Fortschrittsanzeige, zählt nicht als Reveal. nie: zusätzlich zu basis.scroll.nie.",
    "hover": "Ein Satz für Link, Knopf, Karte und Bild mit derselben Kurve und denselben Dauern (ein_ms, aus_ms).",
    "signatur": "Die eine Signatur-Bewegung je Ansicht: muster, variante, bewegung, ausloeser, wiederholung.",
    "seitenwechsel": "muster (Kategorie seitenuebergaenge) mit variante bzw. spielart, zusatz (weitere Muster), richtung (Typen), geteilt (view-transition-name), dauer_ms; onepager = was ohne Seitenwechsel gilt.",
    "budget": "Rezept-eigene Grenzen zusätzlich zu basis.budget.",
    "reduziert": "Was bei prefers-reduced-motion und beim Schalter „Bewegung reduzieren“ bleibt.",
    "verboten": "Was für diese Branche zu viel wäre, zusätzlich zu basis.verboten und nicht_verwenden.",
    "partitur_herkunft": "Woher die Werte stammen: Starter-Seite, Demo (meta.json bau.werte), Rezept-Felder oder eigene Festlegung."
   },
   "kurve": [
    "Eine Hauptkurve und eine Dauer-Skala je Seite (Leitfaden B2). Eine zweite Kurve nur als Paar für das Schließen (B5) und, wo das Rezept einen UI-Stil hat, das UI-Paar.",
    "Kurven aus Demos werden auf die Tokens der Seite umgestellt; die Werte in meta.json sind Vorführwerte ihrer Welt.",
    "Scrollgekoppelte Bewegung läuft linear (der Scroll ist die Zeit), sie braucht keine eigene Kurve.",
    "Kein ease und kein ease-in-out mit 0,3 s für sichtbare Bewegung (B1)."
   ],
   "dauern": {
    "klein_ms": "80 bis 250",
    "mittel_ms": "200 bis 525",
    "gross_ms": "400 bis 1600",
    "seitenwechsel_ms": "400 bis 1500; sichtbare Veränderung mindestens 350 bis 400",
    "aus_faktor": "0,6 bis 0,75 laut Stil; Schließen nie langsamer als Öffnen",
    "rueckmeldung_max_ms": 500,
    "regeln": [
     "Rückmeldung auf eine Eingabe (Hover, Druck, Umschalten) nie über 500 ms (Leitfaden 6).",
     "Schließen = Öffnen × aus_faktor mit der Austrittskurve (B5).",
     "Opazität und Farbe laufen linear oder mit der Hauptkurve, nie mit Überschwingen.",
     "Alle Dauern als Variablen aus tokens.css, keine Zahl im CSS der Seite."
    ]
   },
   "laden": {
    "bedienbar_ab_ms": 0,
    "erster_einsatz_max_ms": 120,
    "letzter_einsatz_max_ms": 700,
    "ende_max_ms": {
     "kurze_stile": 1200,
     "lange_stile": 1800,
     "bild_ausklang": 2200
    },
    "kurze_stile": [
     "token-tech-praezise",
     "token-swiss-knackig",
     "token-toggle-asymmetrisch",
     "token-studio-signatur",
     "token-federnd-verspielt",
     "token-brutal-hart"
    ],
    "lange_stile": [
     "token-editorial-langsam",
     "token-luxus-weich",
     "token-kinetisch-inout"
    ],
    "regeln": [
     "Kopf, Navigation, Telefon und Haupthandlung stehen ab dem ersten Bild und sind bedienbar: keine Einblendung des Kopfs, kein pointer-events: none, kein inert, kein Deckel über Links.",
     "Reihenfolge: Kopf (steht) → H1 Zeile für Zeile → Hero-Bild → Satz und Handlung → alles Weitere erst beim Scrollen.",
     "Erster Einsatz spätestens 120 ms, letzter Einsatz spätestens 700 ms. ende_ms höchstens 1.200 ms bei kurzen Stilen und 1.800 ms bei langen Stilen; ein einmaliges Zurückskalieren des Hero-Bilds (nur scale) darf bis 2.200 ms ausklingen, weil nichts darauf wartet.",
     "Das LCP-Bild ist ab dem ersten Bild gemalt (fetchpriority high, nicht lazy) und wird nie über Deckkraft eingeblendet. Masken (clip-path) öffnen ein schon geladenes Bild; kein Preloader, kein Zähler (B7).",
     "Voll nur beim ersten Aufruf im Tab (sessionStorage), danach kurz: nur die H1-Zeilen mit halbem Versatz. Kommt man per Seitenwechsel, übernimmt der Seitenwechsel, kein zweites Intro. Vorgerenderte Seiten starten erst bei pagereveal.",
     "Klick, Taste, Rad oder Wischen beendet einen laufenden Auftritt sofort im Endzustand.",
     "Unterseiten: nur die H1 des Seitenkopfs (wie wiederholt) und das Kopfbild, wenn kein geteiltes Element es bringt.",
     "Ruhige Rezepte ohne Intro (Apotheke, Pflege, Bestattung, Tierarzt, IT, Hausverwaltung): die Seite ist ab 0 ms bedienbar und steht; nur der Moment des Rezepts (rezept.moment) läuft einmal je Sitzung, langsam und weich, innerhalb von ende_max_ms. Danach steht alles."
    ]
   },
   "scroll": {
    "reveal_arten_max": 3,
    "regeln": [
     "Reveals nur in benannten Sektionen: Hero, Bilder, Kapitelanfänge, die Signatur (B3). Eine Reveal-Art ist eine Art des Erscheinens (Bild-Maske, Zeilen-Maske, Deckkraft mit Weg); dieselbe Art an mehreren Stellen zählt einmal.",
     "Bilder per clip-path statt Opacity-Fade (B4). Text höchstens 8 px Weg plus Deckkraft oder Zeilen aus Masken.",
     "Einmalig ausgelöst: einmal je Seitenaufruf, nie beim Zurückscrollen erneut. Scrollgekoppelt: hinter @supports (animation-timeline: view()), ohne Unterstützung steht der Endzustand.",
     "Versatz für Geschwister höchstens fünfmal (min(sibling-index() - 1, 5) × Versatz).",
     "Fortschrittsanzeigen (Linie wächst, Lesefortschritt, Kapitelspur) zählen nicht als Reveal; höchstens eine je Seite.",
     "Spätestens bei 85 % Viewporthöhe ist alles ganz aufgedeckt, nichts Lesbares bleibt halb verdeckt stehen."
    ],
    "nie": [
     "Fließtext",
     "Formulare und Felder",
     "Preise, Tarife, Kosten",
     "Öffnungszeiten, Telefon, Adresse",
     "Tabellen und Datenblätter",
     "Rechtstexte und Pflichtangaben",
     "Kopf und Navigation",
     "Fehlermeldungen, Hinweise, Notdienst"
    ]
   },
   "hover": {
    "regeln": [
     "Nur mit Zeiger: @media (hover: hover) and (pointer: fine). :focus-visible zeigt dasselbe ohne Verzögerung.",
     "Ein Satz: Link, Knopf, Karte und Bild nutzen dieselbe Kurve und dieselben zwei Dauern (ein_ms, aus_ms); nur Farbe darf kürzer sein (dauern.klein).",
     "Verlassen schneller als Hineingehen, mit der Austrittskurve.",
     "Effekte erst bei Interaktion, nie im Ruhezustand (C9): kein Puls, kein Glanz, kein Lichtlauf.",
     "Bilder in Karten höchstens scale 1.06 bis 1.12 im stehenden Rahmen (bild-zoom-in-maske); die Karte selbst skaliert nie.",
     "Ein langsamer Bild-Zoom im stehenden Rahmen darf als Ausklang länger laufen (bis 1.200 ms, bei langen Stilen bis 2.200 ms), wenn ein schnelles Zeichen derselben Karte (Pfeil, Linie, Farbe) innerhalb von ein_ms antwortet.",
     "Touch: kein Inhalt nur bei Hover; :active zeigt den Druck (scale .97 bis .98 oder höchstens 4 px Weg)."
    ]
   },
   "signatur": {
    "regeln": [
     "Höchstens eine Signatur-Bewegung je Ansicht. Liegen zwei Signatur-Stellen zugleich im Bild, bewegt sich nur die erste.",
     "Läuft sie von selbst, dann einmal je Seitenaufruf und höchstens 5 s; länger nur mit Pause-Knopf (bewegung-pausieren-schalter).",
     "Auf Hover, Klick oder Ziehen beliebig oft, aber nie als Schleife ohne Eingabe.",
     "Steht die Signatur selbst still (Typo, Raster, Form), ist sie keine Bewegung; dann trägt die unter signatur.bewegung genannte Stelle den einen bewegten Moment."
    ]
   },
   "seitenwechsel": {
    "regeln": [
     "Nur bei mehreren Seiten: vt-cross-document-mpa mit @view-transition { navigation: auto } als <style> direkt im Kopf, Typen aus pageswap/pagereveal im blockierenden Kopfskript.",
     "Kopf (view-transition-name: kopf) und die mobile Leiste bleiben stehen; geteilte Elemente nur während des Wechsels benennen.",
     "Nie zwei Textebenen übereinander: Die neue Seite deckt, oder die alte ist weg, bevor neuer Text erscheint.",
     "Gesamtdauer höchstens 1.500 ms; die neue Seite ist bedienbar, sobald sie da ist. Abgebrochene Übergänge abfangen (ready/finished mit catch, skipTransition bei schnellem Klicken).",
     "Zurück (Browser-Zurück oder eine Ebene höher) läuft gespiegelt.",
     "Ohne Unterstützung normale Navigation, nichts fehlt. Vorladen nach sofort-navigation-vorladen.",
     "Mindestens 350–400 ms sichtbare Veränderung mit gemeinsamem Element und Richtung; ruhig heißt weich, nicht kurz. Kopf und Leiste, die nur stehen bleiben, zählen nicht als gemeinsames Element. Ruhige Rezepte nehmen eine weiche Kurve ohne Überschwingen (in-out, z. B. --ease-seite), nie eine Feder. Steile Out-Kurven sind nach einem Fünftel der Zeit fast fertig: die Dauer so wählen, dass mindestens drei Einzelbilder im Abstand von 100 ms sichtbare Bewegung zeigen. Partituren unter 400 ms gibt es nicht mehr (Jury-Lehre 05.11.2026)."
    ],
    "onepager": "Kein Seitenwechsel. Sprunglinks scrollen mit scroll-behavior: smooth nur bei prefers-reduced-motion: no-preference, keine Smooth-Scroll-Bibliothek."
   },
   "budget": [
    "Eine Signatur-Bewegung je Ansicht.",
    "Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen.",
    "Höchstens eine Fortschrittsanzeige je Seite.",
    "Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg.",
    "Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe.",
    "Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins).",
    "Rückmeldung auf Eingaben nie über 500 ms.",
    "Überschwingen nur auf kleinen Elementen (B6).",
    "Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1)."
   ],
   "reduziert": {
    "max_ms": 150,
    "regeln": [
     "Es bleiben nur Überblendungen bis 150 ms (opacity, linear) und Farbwechsel ohne Weg.",
     "Reveals entfallen: Masken stehen offen, Bilder sind ganz da, Zeilen stehen.",
     "Seitenwechsel nur als Überblendung von root (alt 100 ms, neu 150 ms), keine geteilten Elemente, kein Farbpanel.",
     "Scrollgekoppelte Strecken ohne Pin im Endzustand; Autoplay aus, Laufendes pausiert.",
     "Zustände (offen, gewählt, Fehler, gesendet) bleiben sichtbar, nur ohne Weg.",
     "Gilt für prefers-reduced-motion: reduce und den Schalter „Bewegung reduzieren“ im Fuß (bewegung-pausieren-schalter, gespeichert)."
    ]
   },
   "verboten": [
    "ease 0.3s für sichtbare Bewegung (B1)",
    "Fade-up für alles (B3)",
    "Preloader und Prozent-Zähler (B7)",
    "Smooth-Scroll-Bibliothek, wenn das Rezept sie nicht nennt (B8)",
    "eigener Cursor als Standard (B9)",
    "Puls, Glanz oder Lichtlauf im Ruhezustand",
    "Bewegung, die Klicks blockiert oder auf sich warten lässt"
   ],
   "belege": [
    "lab/fundus/messungen.json (31.10.2026): Eine Kurve dominiert je Seite, z. B. landonorris.com cubic-bezier(0.65, 0.05, 0, 1) 118-mal bei 0,75 s, obys.agency cubic-bezier(0.16, 1, 0.3, 1) 80-mal, vercel.com cubic-bezier(0.4, 0, 0.2, 1) 139-mal bei 0,1 bis 0,15 s.",
    "Leitfaden Abschnitt 5 (B1 bis B9) und Abschnitt 6 (Dauer-Faustregeln).",
    "Recherche Runde 4 (04.11.2026), One-Shot-Generator, P3 Bewegungs-Partitur.",
    "Starter-Seiten lab/fundus/starter/<id>/ (style.css, tokens.css, LIESMICH.md) als gelungenste Umsetzungen."
   ],
   "herkunft": "Regeln aus Leitfaden und Recherche P3. Die Grenzwerte (erster und letzter Einsatz, ende_max_ms, zwei gleichzeitige Bewegungen, 10 % Parallax, 85 % Aufdeckung) sind eigene Festlegung, abgeleitet aus den zehn Starter-Seiten (04.11.2026)."
  },
  "varianten": {
   "favicon-teilbild-system": "satz",
   "druckansicht-print": "rechtstext"
  }
 },
 "id": "optik-hoerakustik-sehen-hoeren",
 "name": "Optik und Hörakustik: scharf sehen, gut hören",
 "branche": "Augenoptiker / Optikerfachgeschäft / Kontaktlinsen-Institut / Hörakustiker / Optik und Akustik unter einem Dach (auch mit Filialen)",
 "stimmung": [
  "präzise",
  "kultiviert",
  "zugewandt",
  "klar"
 ],
 "stimmung_tags": [
  "editorial",
  "präzise"
 ],
 "kurz": "Zwischen Mode, Gesundheitshandwerk und Beratung: Verkauft werden der Termin für Sehtest oder Hörtest, Fassungen mit Marken und eine verständliche Rechnung mit Kassenanteil. Die Seite beginnt mit einem ruhigen Porträt im Passepartout, die Überschrift wird beim ersten Laden einmal scharf wie beim Sehtest. Danach Sehen und Hören als zwei Reiter, Termin mit Dauer und Preis je Leistung, Fassungen nach Form und Material, Kosten mit Beispielen, Werkstatt mit freiwilligen Richtpreisen, Team mit Meistertitel. Bodoni Moda für Überschriften, Mona Sans für Text, Fragment Mono für Messwerte (dpt, dB, mm). Papierweiß, Schildpatt und Tinte. Abgrenzung zu mode-beauty-kollektion (Kollektion und Kaufbox), praxis-gesundheit-ruhig (Behandlung) und luxus-manufaktur-stille (Manufaktur).",
 "referenzen": [
  {
   "seite": "Binder Optik – Filiale Nördlingen",
   "url": "https://www.binder-optik.de/en/stores/noerdlingen/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-11-04",
   "quelle": "https://www.binder-optik.de/en/stores/noerdlingen/",
   "beobachtung": "Live geprüft 04.11.2026 (WebFetch, nur Text): Filialseite mit Öffnungszeiten, Online-Termin über einen Terminanbieter und dem Satz „If your desired date is not available, please give us a call!“; Leistungen Optik als Liste („Free eye test“, „Refraction“, „Prism measurement“, „Myopia management for children“, Kontaktlinsen), Hörakustik als eigener Punkt. Kassen und Zuzahlung nicht erklärt; das Rezept verlangt es."
  },
  {
   "seite": "Wutscher Optik und Hörakustik – Terminvereinbarung",
   "url": "https://wutscher.com/terminvereinbarung?service=110_optik",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-11-04",
   "quelle": "https://wutscher.com/terminvereinbarung?service=110_optik",
   "beobachtung": "Live geprüft 04.11.2026 (WebFetch, nur Text): Buchung in vier Schritten „Service wählen“, „Filiale wählen“, „Termin wählen“, „Kontaktdaten“. Je Leistung Dauer und Preis: Profi-Sehtest mit Brillenberatung ca. 60 Min. kostenlos, Kontaktlinsenanpassung ca. 60 Min. 49 €, Schneller Profi-Hörtest ca. 30 Min., Persönliche Hörberatung ca. 90 Min. Hinweis „Kontaktlinsen 12 Stunden vor dem Sehtest ablegen“. Vorbild für Leistungen mit Dauer und Preis. Österreichischer Anbieter, Kassenregeln abweichend."
  }
 ],
 "schrift": {
  "paarung_basis": "",
  "headline": "bodoni-moda",
  "text": "mona-sans",
  "akzent": "fragment-mono",
  "groessen": "h1 Bodoni Moda clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem), opsz an die Größe gekoppelt (font-optical-sizing auto, nie fest 96), wght 500 bis 3.5rem, darüber 400, Laufweite -0.015em, Zeilenhöhe 1.0; Bodoni als Display nur für die H1. h2 Bodoni Moda clamp(1.875rem, 1.3rem + 2vw, 3rem) mit opsz fest 24 bis 36 und wght 600, damit die Haarlinien tragen; h3 und kleiner Mona Sans wdth 112, wght 600; Kursive für Fassungsnamen. Fließtext Mona Sans 1.0625rem (17 px), wdth 100, wght 400, Zeilenhöhe 1.6, höchstens 64ch; Rubriken Mona Sans wdth 112, wght 600, 0.875rem. Fragment Mono für Messwerte und Daten: dpt, Achse, Pupillendistanz in mm, Hörverlust in dB, Dauer und Preis je Termin, 0.875rem; Labels 0.75rem Versal +0.08em. Knöpfe Mona Sans 600, 1rem.",
  "techniken": [
   "optische-groessen-opsz",
   "headline-laufweite-zeilenabstand",
   "mono-labels-versal",
   "tabellenziffern",
   "lesesatz-text-wrap"
  ],
  "alternative_eigenprojekt": "Headline gloock (Vorschlag der Recherche), sobald die Datei selbst gehostet ist; Text bleibt Mona Sans.",
  "abweichung": "Die Recherche schlägt gloock vor; die Schrift liegt nicht unter /assets/fonts. Ersatz bodoni-moda (Didone mit opsz, Mode und Beauty laut schriften.json), steht damit in zwei Rezepten (luxus). Unterschied zu luxus: dort Instrument Sans und Messing, hier Mona Sans mit Breitenachse, Fragment Mono für Messwerte und Termin-UI. mona-sans und fragment-mono stehen damit je in drei Rezepten. Mono-Labels nach Leitfaden A4, weil das Rezept eine Mono als Akzent nennt."
 },
 "farbe": {
  "prinzip": "Viel Papierweiß um Fassungen und Gesichter, Schildpatt hell als Fläche für Termin und Kosten, Tinte für Footer und Hören-Kapitel. Ein Tintenblau nur für Termin buchen. Farben der Fassungen kommen aus den Fotos. Kein Blau-Weiß-Medizin-Look, keine Augen-Icons, keine Linsenreflexe als Effekt.",
  "beispiel": [
   "#F4F5F3 Grund Papierweiß",
   "#121417 Text (16,9 : 1 auf Grund)",
   "#E8DED3 Fläche Schildpatt: Termin, Kosten, Werkstatt (Text 13,9 : 1)",
   "#1C2026 Dunkel Tinte: Footer, Kapitel Hören (Weiß darauf 16,4 : 1)",
   "#2442A8 Signal Tintenblau: Termin buchen (Weiß darauf 8,7 : 1; als Fläche auf Grund 7,9 : 1, auf Schildpatt 6,5 : 1); auf Tinte stattdessen weißer Knopf mit dunkler Schrift",
   "#5A5F67 Leise: Meta-Angaben, Messwert-Einheiten (5,9 : 1 auf Grund, 4,8 : 1 auf Schildpatt)",
   "#D3D6D2 Linie: Haarlinien um Fassungsbilder (nur Dekoration)"
  ]
 },
 "animationsstil": "token-editorial-langsam",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "animationsstil_hinweis": "Langsam nur für zwei Momente: die H1 wird beim ersten Laden einmal scharf (blur-reveal, Wörter, 1000 ms) und Fassungsbilder öffnen sich per Maske. Termin, Reiter Sehen/Hören, Filter und Galerie-Vollbild laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), wie von der Recherche vorgeschlagen.",
 "bewegung": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui",
  "beobachtet": "nicht gemessen; blur-reveal-Messwerte der Demo: Fantasy unmask cubic-bezier(.16,1,.3,1), TRIONN 800 ms, Blur 10 bis 12 px",
  "dauer_ms": "150 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 1000 (H1 wird scharf, Wörter mit 50 Versatz), 1200 (Masken-Reveal eines Fassungsbilds)",
  "regel": "Die Unschärfe ist eine Pointe, keine Dauerbewegung: einmal auf der H1 der Startseite, nie auf Fließtext, Preisen oder Formularen, nie bei jedem Besuch erneut (Session). Fassungsbilder öffnen sich einmal. Bei prefers-reduced-motion steht die H1 sofort scharf, Bilder erscheinen ohne Maske.",
  "herkunft": "Kurve und Dauern aus token-editorial-langsam (1000/1200/1600), UI-Paar aus token-toggle-asymmetrisch; Blur-Werte aus blur-reveal (messwerte, beobachtet).",
  "kurve": {
   "haupt": "cubic-bezier(0.16, 1, 0.3, 1)",
   "token": "--ease",
   "ein": "cubic-bezier(0.16, 1, 0.3, 1)",
   "aus": "cubic-bezier(0.7, 0, 0.84, 0)",
   "stil": "token-editorial-langsam",
   "gilt_fuer": "nur zwei Momente: die H1 wird beim ersten Laden scharf, Fassungsbilder öffnen sich per Maske; Termin, Reiter, Filter, Galerie über das UI-Paar; dazu der Seitenwechsel als Blende (Kreis) mit --ease-form",
   "ui": {
    "ein": "cubic-bezier(0.16, 1, 0.3, 1)",
    "aus": "cubic-bezier(0.7, 0, 0.84, 0)",
    "stil": "token-toggle-asymmetrisch",
    "token": "--ui-ease-ein / --ui-ease-aus"
   },
   "quelle": "bewegung.easing und tokens.css (token-editorial-langsam, UI token-toggle-asymmetrisch)",
   "ausnahme": {
    "kurve": "cubic-bezier(0.76, 0, 0.24, 1)",
    "token": "--ease-form",
    "fuer": "der Kreis beim Seitenwechsel (seitenwechsel-wachsende-form klickpunkt); Expo-out verschluckt die Form"
   }
  },
  "dauern": {
   "klein": 150,
   "mittel": 300,
   "gross": 1200,
   "seitenwechsel": 800,
   "schliessen": 200,
   "aus_faktor": 0.67,
   "tokens": {
    "klein": "--dauer-rezept-2",
    "mittel": "--dauer-rezept-4",
    "gross": "--dauer-rezept-6",
    "seitenwechsel": "eigener Wert",
    "schliessen": "--dauer-rezept-3"
   },
   "hinweis": "Rezept: 150 Hover, 300 Reiter, Filter, Dialog öffnen, 200 schließen, 1000 H1 wird scharf (Wörter mit 50 Versatz), 1200 Masken-Reveal eines Fassungsbilds. Seitenwechsel als Kreis 800 ms hin, 700 ms zurück mit weicherer Kurve (seitenwechsel-wachsende-form, klickpunkt)."
  },
  "laden": {
   "schritte": [
    {
     "teil": "Kopf mit Termin",
     "ab_ms": 0,
     "dauer_ms": 0,
     "art": "steht"
    },
    {
     "teil": "Hero-Foto (passepartout)",
     "ab_ms": 0,
     "dauer_ms": 0,
     "art": "steht (LCP)"
    },
    {
     "teil": "H1",
     "ab_ms": [
      0,
      50,
      100,
      150
     ],
     "dauer_ms": 1000,
     "art": "Wörter tauchen aus der Unschärfe auf (blur 12 px → 0), --ease"
    },
    {
     "teil": "Reiter Sehen / Hören",
     "ab_ms": 0,
     "dauer_ms": 0,
     "art": "stehen"
    },
    {
     "teil": "Rest",
     "ab_ms": null,
     "dauer_ms": 0,
     "art": "erst beim Scrollen (scroll)"
    }
   ],
   "ende_ms": 1150,
   "wiederholt": "H1 steht scharf (einmal je Sitzung, Rezept)."
  },
  "scroll": {
   "reveals": [
    {
     "art": "Bild-Maske",
     "muster": "clip-path-bild-reveal",
     "wo": "Fassungsbilder und Werkstatt",
     "dauer_ms": 1200,
     "versatz_ms": 100,
     "weg": "Maske öffnet sich einmal, Bild innen 1.06 → 1",
     "ausloeser": "einmal, wenn 33 % sichtbar (IntersectionObserver)"
    }
   ],
   "fortschritt": "keine",
   "nie": [
    "Preise, Zuzahlungen, Kassenleistungen",
    "Termin-Formular"
   ]
  },
  "hover": {
   "link": "Unterstreichung wächst von links",
   "knopf": "pfeil-icon-button tausch; kontur-button-zeichnen zeichnen",
   "karte": "Fassung: Bild scale 1.05 im Rahmen (bild-zoom-in-maske basis)",
   "bild": "Zoom klingt mit --ease in 1200 ms aus, der Pfeil antwortet sofort",
   "ein_ms": 300,
   "aus_ms": 200,
   "kurve": "--ui-ease-ein / --ui-ease-aus (Bild --ease)"
  },
  "signatur": {
   "muster": "blur-reveal",
   "variante": null,
   "bewegung": "Die H1 der Startseite wird beim ersten Laden einmal scharf wie beim Fokusziehen (Wörter, 50 ms Versatz, 1000 ms); nie auf Fließtext, Preisen oder Formularen (Rezept).",
   "ausloeser": "Laden",
   "dauer_ms": 1000,
   "wiederholung": "einmal je Sitzung"
  },
  "seitenwechsel": {
   "muster": "seitenwechsel-wachsende-form",
   "variante": "klickpunkt",
   "zusatz": [
    {
     "muster": "vt-cross-document-mpa",
     "variante": "benannt"
    },
    {
     "muster": "vt-shared-element-morph"
    }
   ],
   "richtung": "vorwaerts: ein Kreis öffnet sich am angeklickten Bild bis zur fernsten Ecke (Position per pageswap und pagereveal); zurueck: der Kreis schließt sich in das Bild, von dem man kam; Bild → Detail fliegt das Bild zusätzlich als geteiltes Element über dem Kreis; sonst Überblendung",
   "geteilt": [
    "kopf",
    "held (Fassungsbild)"
   ],
   "dauer_ms": 800,
   "zurueck_ms": 700,
   "kurve": "cubic-bezier(0.76, 0, 0.24, 1) (--ease-form); zurück cubic-bezier(0.45, 0, 0.55, 1), weicher (05.11.2026, Probe Optik: 540 ms mit --ease-form waren nur etwa 180 ms sichtbar, ein Wischer)"
  },
  "budget": [
   "Unschärfe nur einmal und nur auf der H1 (Rezept).",
   "Kein zweiter Blur-Effekt auf der Seite."
  ],
  "reduziert": "H1 steht sofort scharf, Bilder ohne Maske (Rezept); Seitenwechsel als Überblendung. Seitenwechsel als Überblendung 150 ms ohne Kreis.",
  "verboten": [
   "verschwommene Flächen als Gag (Rezept)",
   "Sehtafel oder Augen, die blinzeln",
   "Schallwellen oder Pegel als Dauer-Animation",
   "Bildverzerrung und Glas-Refraktion (Rezept)"
  ],
  "partitur_herkunft": "Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach blur-reveal (Wörter: 800 ms, 50 ms Versatz, blur 12 px; Dauer auf Rezept 1000 ms). Rest eigene Festlegung. Seitenwechsel 05.11.2026 aus seitenwechsel-wachsende-form (klickpunkt: 800/540 ms, cubic-bezier(0.76, 0, 0.24, 1)).",
  "partitur_stand": "05.11.2026"
 },
 "hero_beschreibung": "Foto-Hero im Passepartout: ein ruhiges Porträt mit Brille oder Hörsystem, viel Papierweiß ringsum, daneben die H1, die einmal scharf wird. Darunter zwei gleichwertige Wege „Sehtest buchen“ und „Hörtest buchen“ und die nächste freie Zeit als Text, wenn das Terminsystem sie liefert. Kein Stockfoto mit Sehtafel, keine verschwommene Bildfläche als Gag.",
 "muster": {
  "seitenuebergang": [
   "seitenwechsel-wachsende-form",
   "vt-shared-element-morph"
  ],
  "preloader": [],
  "navigation": [
   "native-popover-dropdowns",
   "sticky-shrink-header",
   "brotkrumen-pfad"
  ],
  "hero": [
   "foto-hero"
  ],
  "hero_variante": [],
  "sektionen": [
   {
    "zweck": "Termin (Sehtest, Brillenberatung, Kontaktlinsenanpassung, Kinder-Sehberatung, Hörtest, Hörberatung; je Leistung Dauer und Preis oder kostenlos; Hinweis „Kontaktlinsen vorher ablegen“; Buchungs-Widget erst nach Klick, Telefon daneben)",
    "muster": [
     "termin-buchung-zwei-klick"
    ],
    "varianten": {
     "termin-buchung-zwei-klick": "vorauswahl"
    }
   },
   {
    "zweck": "Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)",
    "muster": [
     "tabs-pfeiltasten-focusgroup",
     "akkordeon-hoehe-auto",
     "leistungsseite-antwort-zuerst"
    ],
    "varianten": {
     "tabs-pfeiltasten-focusgroup": "auto",
     "akkordeon-hoehe-auto": "leistungen",
     "leistungsseite-antwort-zuerst": "praxis"
    }
   },
   {
    "zweck": "Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)",
    "muster": [
     "facettenfilter-ergebnisliste",
     "galerie-shared-element-vollbild",
     "produktkarte-bildwechsel",
     "aktion-mit-preisangabe"
    ],
    "varianten": {
     "facettenfilter-ergebnisliste": "schublade",
     "galerie-shared-element-vollbild": "zoom",
     "produktkarte-bildwechsel": "zonen",
     "aktion-mit-preisangabe": "zeitraum"
    }
   },
   {
    "zweck": "Was kostet eine Brille, was ein Hörgerät? (Beispielrechnungen mit Fassung, Glasart und Stärke; Hörgeräte mit Festbetrag der Kasse, Eigenanteil und gesetzlicher Zuzahlung; Stand-Datum; Ratenkauf nur mit allen Pflichtangaben)",
    "muster": [
     "vergleichstabelle-sticky",
     "finanzierung-pflichtangaben"
    ],
    "varianten": {
     "vergleichstabelle-sticky": "pakete",
     "finanzierung-pflichtangaben": "kaufbox"
    }
   },
   {
    "zweck": "So läuft die Hörgeräte-Versorgung (Verordnung der HNO-Ärztin → Hörtest → Probetragen im Alltag → Feinanpassung → Nachsorge; Dauer je Schritt nur, wenn sie gehalten wird)",
    "muster": [
     "prozess-timeline-wachsende-linie"
    ]
   },
   {
    "zweck": "Werkstatt und Service (Reparatur, Gläsertausch, Nachjustieren, Reinigung, Batterien und Zubehör; freiwillig Richtpreise typischer Reparaturen oder das Europäische Formular als Angebot)",
    "muster": [
     "reparatur-richtpreise"
    ],
    "varianten": {
     "reparatur-richtpreise": "betrieb"
    }
   },
   {
    "zweck": "Team (Augenoptikermeister:in, Optometrist:in, Hörakustikmeister:in mit Foto, Schwerpunkt wie Kinder, Kontaktlinsen, Tinnitus, Sprachen)",
    "muster": [
     "team-ueber-mich-layout"
    ],
    "varianten": {
     "team-ueber-mich-layout": "raster"
    }
   },
   {
    "zweck": "Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Augenoptikermeisterin, Optometristin oder Hörakustikmeister mit Schwerpunkt wie Kinder, Kontaktlinsen oder Tinnitus, Sprachen und Termin bei dieser Person; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)",
    "muster": [
     "person-detailseite"
    ],
    "varianten": {
     "person-detailseite": "aerztin"
    }
   },
   {
    "zweck": "Stimmen (sachlich über Beratung und Service, nie über Heilwirkung; Google-Bewertungen nur mit Echtheitshinweis)",
    "muster": [
     "testimonials-neu-gedacht",
     "bewertungsprofil-mit-echtheitshinweis"
    ],
    "varianten": {
     "testimonials-neu-gedacht": "stimmen-reihe",
     "bewertungsprofil-mit-echtheitshinweis": "pille"
    }
   },
   {
    "zweck": "Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; Karte per 2-Klick)",
    "muster": [
     "standortfinder-liste",
     "oeffnungszeiten-status",
     "karte-zwei-klick"
    ],
    "varianten": {
     "standortfinder-liste": "kompakt",
     "oeffnungszeiten-status": "kompakt",
     "karte-zwei-klick": "bild"
    }
   },
   {
    "zweck": "Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Optik, Akustik oder beidem, Bus und Rad, Parken und ehrlichen Zugangsangaben; nie dieselbe Seite mit getauschtem Ortsnamen)",
    "muster": [
     "standort-detailseite"
    ],
    "varianten": {
     "standort-detailseite": "filiale"
    }
   },
   {
    "zweck": "Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)",
    "muster": [
     "produkt-kaufbox-varianten",
     "eu-gewaehrleistungshinweis",
     "widerruf-und-kuendigung-schaltflaeche"
    ],
    "varianten": {
     "produkt-kaufbox-varianten": "kompakt",
     "eu-gewaehrleistungshinweis": "footer-seite",
     "widerruf-und-kuendigung-schaltflaeche": "richtig"
    }
   },
   {
    "zweck": "Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Termin oder Shop nach BFSG prüfen lassen; besonders auf Schriftgröße, Kontrast und Untertitel achten)",
    "muster": [
     "barrierefreiheit-seite"
    ],
    "varianten": {
     "barrierefreiheit-seite": "bfsg"
    }
   }
  ],
  "scroll": [
   "clip-path-bild-reveal"
  ],
  "schrift_animation": [
   "blur-reveal"
  ],
  "hover": [
   "bild-zoom-in-maske",
   "karte-ganzflaechig-klickbar"
  ],
  "cursor": [],
  "mikro": [
   "einblenden-starting-style",
   "animiertes-select"
  ],
  "material": [],
  "galerie": [
   "galerie-shared-element-vollbild"
  ],
  "footer": [
   "studio-visitenkarte-footer"
  ],
  "button": [
   "pfeil-icon-button",
   "kontur-button-zeichnen"
  ],
  "hero_varianten": {
   "foto-hero": "passepartout"
  }
 },
 "signatur": [
  "blur-reveal"
 ],
 "moment": {
  "was": "Scharf stellen: die H1 wird beim ersten Laden scharf wie beim Fokusziehen; darunter ein breiter Regler, mit dem man eine Sehprobe bzw. ein Porträt selbst scharf stellt (Akustik: derselbe Regler macht einen Satz von dumpf zu klar), als Brücke zu „Sehtest buchen“.",
  "wo": "Startseite, erster und zweiter Bildschirm",
  "gewicht": "groß und interaktiv: Regler über mindestens 8 Spalten, Sehprobe mindestens 50 vh",
  "muster": [
   "blur-reveal"
  ],
  "variante": null
 },
 "varianten_demo": {
  "pfeil-icon-button": "tausch",
  "kontur-button-zeichnen": "zeichnen",
  "studio-visitenkarte-footer": "praxis",
  "bild-zoom-in-maske": "basis",
  "galerie-shared-element-vollbild": "zoom",
  "karte-ganzflaechig-klickbar": "raster",
  "brotkrumen-pfad": "voll",
  "seitenwechsel-wachsende-form": "klickpunkt"
 },
 "nicht_verwenden": [
  "hovercard-interest-invoker – Signatur von praxis-gesundheit-ruhig; Fachwörter wie Prisma oder Audiogramm per details erklärt",
  "scroll-naechstes-projekt – Signatur von mode-beauty-kollektion",
  "liquid-glass-refraktion / webgl-bildverzerrung – Linsenverzerrung als Effekt verfälscht Fassungen und Gesichter",
  "cursor-masken-reveal – Lupe und Taschenlampe am Zeiger sind Spielerei und auf Touch unsichtbar",
  "marquee-laufband – Markenlogos als Laufband ohne Erlaubnis und unruhig",
  "zahlen-odometer – keine hochgezählten Kundenzahlen",
  "konfetti-erfolg – nach der Buchung eine ruhige Bestätigung",
  "smooth-scroll-lenis – stört Filter und Termin",
  "„Sehtest online“, „Hörtest in 2 Minuten“ ohne Fachperson – irreführend",
  "Augen-Icons, Sehtafel-Stockfotos, verschwommene Flächen als Gag – Klischee"
 ],
 "regeln": [
  "Erster Bildschirm: Porträt im Passepartout, H1, zwei gleichwertige Wege Sehtest und Hörtest, Telefon. Bei reiner Optik oder reiner Akustik nur der eine Weg.",
  "Signatur (blur-reveal): Die H1 der Startseite wird beim ersten Laden einmal scharf (Wörter, Blur 10 px → 0, 1000 ms, 50 ms Versatz). Nur dort, nur einmal je Sitzung, nie auf anderen Überschriften. Bei reduzierter Bewegung steht sie scharf.",
  "Termin: Jede Leistung mit Dauer und Preis oder „kostenlos“; das Buchungs-Widget lädt erst nach Klick, daneben Telefon. Keine Gesundheitsangaben als Pflichtfeld; Refraktionswerte und Audiogramme nie per Formular-Upload.",
  "Kosten ehrlich: Brillenpreis aus Fassung, Gläsern und Stärke als Beispielrechnung mit Stand-Datum; bei Hörgeräten Festbetrag der Krankenkasse, Eigenanteil und gesetzliche Zuzahlung je Gerät mit Stand und Quelle; Kassenleistung für Brillengläser nur mit den aktuellen Voraussetzungen. Festbetrag, Eigenanteil und Zuzahlung bei Hörgeräten sowie die Voraussetzungen für den Zuschuss zu Brillengläsern liefert der Kunde mit Stand und Quelle (Krankenkasse, Innung); bis dahin markierter Platzhalter, auch mit Beispieldaten nie erfundene Beträge. Vom Kunden prüfen lassen.",
  "Heilmittelwerbegesetz: Hörsysteme und Kontaktlinsen sind Medizinprodukte; keine Heilversprechen, keine Aussagen zur Heilung von Tinnitus oder Schwerhörigkeit, Stimmen nur über Beratung und Service. Kostenlose Sehtests und Hörtests sachlich nennen, ohne Druck. Vom Kunden prüfen lassen.",
  "Preise und Aktionen: Gesamtpreis inkl. MwSt.; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); Ratenkauf nur mit effektivem Jahreszins und Warnhinweis direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).",
  "Marken: Hersteller-Logos und Kollektionsfotos nur mit Erlaubnis und Bildrechten.",
  "Werkstatt: Richtpreise und das Europäische Formular für Reparaturinformationen sind freiwillig (reparatur-richtpreise, Variante betrieb); wenn genutzt, 30 Tage bindend.",
  "Typografie: Bodoni Moda als Display nur für die H1 (ab 2.75rem, opsz an die Größe gekoppelt, nie fest 96); H2 in Bodoni Moda nur mit opsz 24 bis 36 und wght 600, darunter Mona Sans. Haarlinien zerfallen auf dem Bildschirm unter etwa 40 px (Jury Optiker-Probe 05.11.2026). Fragment Mono für jede Messgröße und Termindaten; Fließtext Mona Sans mindestens 17 px.",
  "Pflichtangaben (Leitfaden 8a): Impressum mit Handwerkskammer und Meister:in (Augenoptiker und Hörakustiker sind zulassungspflichtige Handwerke); bei Warenverkauf an Verbraucher der EU-Gewährleistungshinweis; beim Online-Shop Widerruf (hygienisch versiegelte Kontaktlinsen nach dem Öffnen ausgenommen, § 312g Abs. 2 Nr. 3 BGB) und GPSR-Angaben. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.",
  "Seitenwechsel als Blende (seitenwechsel-wachsende-form, Variante klickpunkt, 800 ms hin mit cubic-bezier(0.76, 0, 0.24, 1) als --ease-form, 700 ms zurück mit der weicheren cubic-bezier(0.45, 0, 0.55, 1)): der Kreis öffnet sich am angeklickten Fassungsbild und schließt sich beim Zurück wieder dorthin. Kein Blur im Wechsel; die Unschärfe bleibt der einmalige Moment der H1."
 ],
 "varianten": [
  {
   "name": "Hörakustik-Fachgeschäft (ohne Optik)",
   "hinweis": "Schrift, Farbe, Stil und Signatur bleiben; das Kapitel Hören wird die Startseite. Hörtest und Probetragen zuerst, Kosten mit Festbetrag und Zuzahlung, Zubehör und Batterien, Service für Hörsysteme anderer Anbieter. Untertitel für jedes Video, Telefonnummer und Rückruf gleich groß, weil Telefonieren für die Zielgruppe schwer sein kann (E-Mail und Rückruf-Formular gleichwertig).",
   "sektionen": [
    "Hörtest und Beratung (Termin)",
    "So läuft die Versorgung",
    "Was kostet ein Hörgerät?",
    "Service und Zubehör",
    "Team",
    "Filialen und Hausbesuche"
   ],
   "weglassen": [
    "Fassungen und Marken",
    "Kontaktlinsen"
   ],
   "muster_zusatz": []
  }
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Passepartout-Foto als LCP mit fetchpriority=high; blur-reveal nur auf der H1 (filter: blur ist teuer, wenige Elemente). Fassungsraster lazy mit sizes=auto, Vollbild über View Transition. Bodoni Moda nur Latin mit opsz und wght, Mona Sans mit wdth, Fragment Mono 400. Termin-Widget und Karte erst nach Klick.",
 "offen": [
  "Recherche nennt als nötig produktkarte-bildwechsel (Fassung von vorn und seitlich); das Muster fehlt noch. person-detailseite und standort-detailseite sind seit 04.11.2026 eingetragen (Team bzw. Standorte).",
  "gloock liegt nicht als Datei vor; bodoni-moda als Ersatz.",
  "Referenzen nur inhaltlich geprüft; Award-Seiten der Recherche (Cubitts, Mita) nicht selbst geöffnet."
 ],
 "raum": {
  "basis_px": 8,
  "skala_px": [
   4,
   8,
   12,
   16,
   24,
   32,
   48,
   64,
   96,
   144
  ],
  "sektion": "clamp(72px, 9vw, 144px)",
  "dichte": "luftig",
  "hinweis": "Viel Weiß um jedes Produktfoto (mindestens 48 px), Messwert-Tabellen dagegen dicht mit 8 px Zeilenabstand."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(16px, 4vw, 64px)",
  "spalt": "clamp(16px, 2vw, 32px)",
  "max_breite": "1320px",
  "hinweis": "Hero 5/7 (Text links, Passepartout rechts). Fassungen als 4er-Raster mit viel Abstand, mobil 2. Kosten als Tabelle über 8 Spalten."
 },
 "form": {
  "radius_klein": "2px",
  "radius_gross": "2px",
  "pille": true,
  "linie": "1px #D3D6D2 um Fassungsbilder; Felder 1px in Leise (3:1)",
  "schatten": "keiner",
  "hinweis": "Kanten fein wie ein Brillenrand; nur die Haupt-Pille (pfeil-icon-button, Variante tausch) ist rund."
 },
 "bildsprache": {
  "licht": "Weiches Seitenlicht, neutral, Haut natürlich, keine Reflexe auf den Gläsern.",
  "ausschnitt": "Porträt Kopf und Schultern, Fassung als Freisteller von vorn und seitlich, Werkstatt im Detail.",
  "personen": "Ja: Team und Modelle mit Einwilligung; Kundschaft nur mit Erlaubnis.",
  "formate": [
   "4:5",
   "1:1",
   "3:2"
  ],
  "nicht": "Keine Sehtafeln, keine Augen in Großaufnahme, keine Hörgerät-Stockfotos mit Senioren-Klischee.",
  "gewicht": "Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz."
 },
 "ton": {
  "anrede": "Sie",
  "saetze": "Ruhig und genau: Leistung, Dauer, Preis, was danach passiert.",
  "haltung": "Kultiviert und zugewandt, ohne Fachjargon; Fachwort in Klammern.",
  "beispiele": [
   "Sehtest mit Beratung: 45 Minuten, kostenlos.",
   "Probetragen im Alltag, zwei Wochen, danach entscheiden Sie."
  ],
  "nicht": "„Nie wieder schlecht hören“, „perfektes Sehen“, „Tinnitus weg“, „Top-Marken zu Top-Preisen“."
 },
 "hero_aufbau": {
  "raster": "12 Spalten: Text über Spalte 1 bis 5, Passepartout-Foto über 6 bis 12 mit 48 px Weiß ringsum; mobil Foto oben im Passepartout, Text darunter.",
  "bild": "Ruhiges Porträt mit Brille oder Hörsystem, 4:5.",
  "h1": "clamp(2.5rem, 1.5rem + 4vw, 5rem), Bodoni Moda 400 opsz 96, wird einmal scharf; kein Label darüber.",
  "handlung": "„Sehtest buchen“ (Tintenblau, Pfeil-Pille) und „Hörtest buchen“ (Kontur) nebeneinander, darunter Telefon als tel:-Link.",
  "zusatz": "Nächste freie Zeit als Text in Fragment Mono, nur wenn das Terminsystem sie liefert."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "hovercard-interest-invoker"
   ],
   "grund": "Signatur von praxis-gesundheit-ruhig; Fachwörter wie Prisma oder Audiogramm per details erklärt"
  },
  {
   "ids": [
    "scroll-naechstes-projekt"
   ],
   "grund": "Signatur von mode-beauty-kollektion"
  },
  {
   "ids": [
    "liquid-glass-refraktion",
    "webgl-bildverzerrung"
   ],
   "grund": "Linsenverzerrung als Effekt verfälscht Fassungen und Gesichter"
  },
  {
   "ids": [
    "cursor-masken-reveal"
   ],
   "grund": "Lupe und Taschenlampe am Zeiger sind Spielerei und auf Touch unsichtbar"
  },
  {
   "ids": [
    "marquee-laufband"
   ],
   "grund": "Markenlogos als Laufband ohne Erlaubnis und unruhig"
  },
  {
   "ids": [
    "zahlen-odometer"
   ],
   "grund": "keine hochgezählten Kundenzahlen"
  },
  {
   "ids": [
    "konfetti-erfolg"
   ],
   "grund": "nach der Buchung eine ruhige Bestätigung"
  },
  {
   "ids": [
    "smooth-scroll-lenis"
   ],
   "grund": "stört Filter und Termin"
  },
  {
   "ids": [],
   "grund": "„Sehtest online“, „Hörtest in 2 Minuten“ ohne Fachperson – irreführend"
  },
  {
   "ids": [],
   "grund": "Augen-Icons, Sehtafel-Stockfotos, verschwommene Flächen als Gag – Klischee"
  }
 ],
 "alle_muster": [
  {
   "id": "blur-reveal",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/meta.json"
  },
  {
   "id": "foto-hero",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
   "variante": "passepartout",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=passepartout"
  },
  {
   "id": "termin-buchung-zwei-klick",
   "rolle": "Sektion: Termin (Sehtest, Brillenberatung, Kontaktlinsenanpassung, Kinder-Sehberatung, Hörtest, Hörberatung; je Leistung Dauer und Preis oder kostenlos; Hinweis „Kontaktlinsen vorher ablegen“; Buchungs-Widget erst nach Klick, Telefon 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": "tabs-pfeiltasten-focusgroup",
   "rolle": "Sektion: Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)",
   "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: Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)",
   "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: Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)",
   "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": "facettenfilter-ergebnisliste",
   "rolle": "Sektion: Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)",
   "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": "galerie-shared-element-vollbild",
   "rolle": "Sektion: Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
   "variante": "zoom",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=zoom"
  },
  {
   "id": "produktkarte-bildwechsel",
   "rolle": "Sektion: Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/meta.json",
   "variante": "zonen",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/demo?v=zonen"
  },
  {
   "id": "aktion-mit-preisangabe",
   "rolle": "Sektion: Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/aktion-mit-preisangabe/meta.json",
   "variante": "zeitraum",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/aktion-mit-preisangabe/demo?v=zeitraum"
  },
  {
   "id": "vergleichstabelle-sticky",
   "rolle": "Sektion: Was kostet eine Brille, was ein Hörgerät? (Beispielrechnungen mit Fassung, Glasart und Stärke; Hörgeräte mit Festbetrag der Kasse, Eigenanteil und gesetzlicher Zuzahlung; Stand-Datum; Ratenkauf nur mit allen Pflichtangaben)",
   "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": "finanzierung-pflichtangaben",
   "rolle": "Sektion: Was kostet eine Brille, was ein Hörgerät? (Beispielrechnungen mit Fassung, Glasart und Stärke; Hörgeräte mit Festbetrag der Kasse, Eigenanteil und gesetzlicher Zuzahlung; Stand-Datum; Ratenkauf nur mit allen Pflichtangaben)",
   "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": "prozess-timeline-wachsende-linie",
   "rolle": "Sektion: So läuft die Hörgeräte-Versorgung (Verordnung der HNO-Ärztin → Hörtest → Probetragen im Alltag → Feinanpassung → Nachsorge; 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": "reparatur-richtpreise",
   "rolle": "Sektion: Werkstatt und Service (Reparatur, Gläsertausch, Nachjustieren, Reinigung, Batterien und Zubehör; freiwillig Richtpreise typischer Reparaturen oder das Europäische Formular als Angebot)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/meta.json",
   "variante": "betrieb",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=betrieb"
  },
  {
   "id": "team-ueber-mich-layout",
   "rolle": "Sektion: Team (Augenoptikermeister:in, Optometrist:in, Hörakustikmeister:in mit Foto, Schwerpunkt wie Kinder, Kontaktlinsen, Tinnitus, Sprachen)",
   "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": "person-detailseite",
   "rolle": "Sektion: Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Augenoptikermeisterin, Optometristin oder Hörakustikmeister mit Schwerpunkt wie Kinder, Kontaktlinsen oder Tinnitus, Sprachen und Termin bei dieser Person; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/person-detailseite/meta.json",
   "variante": "aerztin",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=aerztin"
  },
  {
   "id": "testimonials-neu-gedacht",
   "rolle": "Sektion: Stimmen (sachlich über Beratung und Service, nie über Heilwirkung; 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: Stimmen (sachlich über Beratung und Service, nie über Heilwirkung; 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": "standortfinder-liste",
   "rolle": "Sektion: Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; Karte per 2-Klick)",
   "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: Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; Karte per 2-Klick)",
   "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: Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; 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": "standort-detailseite",
   "rolle": "Sektion: Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Optik, Akustik oder beidem, Bus und Rad, Parken und ehrlichen Zugangsangaben; nie dieselbe Seite mit getauschtem Ortsnamen)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/meta.json",
   "variante": "filiale",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale"
  },
  {
   "id": "produkt-kaufbox-varianten",
   "rolle": "Sektion: Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)",
   "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": "eu-gewaehrleistungshinweis",
   "rolle": "Sektion: Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
   "variante": "footer-seite",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=footer-seite"
  },
  {
   "id": "widerruf-und-kuendigung-schaltflaeche",
   "rolle": "Sektion: Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)",
   "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: Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Termin oder Shop nach BFSG prüfen lassen; besonders auf Schriftgröße, Kontrast und Untertitel achten)",
   "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": "seitenwechsel-wachsende-form",
   "rolle": "Seitenwechsel",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/meta.json",
   "variante": "klickpunkt",
   "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo?v=klickpunkt"
  },
  {
   "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": "sticky-shrink-header",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
  },
  {
   "id": "brotkrumen-pfad",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/meta.json",
   "variante": "voll",
   "demo_url": "https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll"
  },
  {
   "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": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis"
  },
  {
   "id": "karte-ganzflaechig-klickbar",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/meta.json",
   "variante": "raster",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster"
  },
  {
   "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": "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": "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": "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": "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": "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": "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"
  }
 ]
}
