{
 "schema": "fundus-rezept/1",
 "stand": "02.11.2026",
 "basis": {
  "stand": "02.11.2026 (Runde 5: Redaktion nach KI-Audit und Lückenrecherche)",
  "muster": [
   "vt-cross-document-mpa",
   "css-view-reveal-nativ",
   "unterstreichung-varianten",
   "button-zustaende",
   "validierung-nach-interaktion",
   "consent-banner-gestaltet",
   "fokus-stil-system",
   "sprunglinks-landmarken",
   "bewegung-pausieren-schalter",
   "fehlerseite-leerzustand",
   "dialog-modal-nativ",
   "zoom-und-textabstand-robust",
   "kontrastmodus-forced-colors",
   "firmendaten-strukturiert",
   "sofort-navigation-vorladen"
  ],
  "beschreibung": "Grundausstattung, die jedes Rezept ohne Nennung bekommt: native Seitenübergänge zwischen echten Seiten (vt-cross-document-mpa) und Vorladen der Hauptwege (sofort-navigation-vorladen), beides nicht bei Onepagern; native Scroll-Reveals nur wo sinnvoll, Link-Unterstreichung, vollständige Button-Zustände, Validierung erst nach Interaktion, ein gestaltetes Consent-Banner, Fehlerseite und Leerzustand, natives Dialog-Modal und eine einzige Datenquelle für Firmendaten, aus der Kontaktblock, Öffnungszeiten und JSON-LD entstehen (firmendaten-strukturiert). Dazu die Barrierefreiheit der Kategorie zugang: sichtbarer Fokus, Sprunglinks und Landmarken, Pause für Bewegung, 200 % Zoom und Textabstände ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus (kontrastmodus-forced-colors). In Sektionen dürfen Basis-Muster genannt werden, wenn sie dort besonders wichtig sind (z. B. Formular-Validierung); in den Kategorie-Listen der Rezepte stehen sie nicht.",
  "regeln": [
   "Keine Schrift kommt in mehr als 3 Rezepten vor (headline, text und akzent zusammen gezählt, alternative_eigenprojekt ausgenommen).",
   "Ein Rezept darf Headline- und Textschrift nicht 1:1 mit einem anderen Rezept teilen.",
   "Pflichtfeld signatur: 1–2 Muster, die kein anderes Rezept nutzt (Basis ausgenommen); jedes Signatur-Muster steht auch in den Muster-Listen des Rezepts.",
   "cinematic-video-hero nur mit eigenem, hochwertigem Footage. Für typische KMU-Kunden (Gastro, Mode/Concept Store) ist ein Foto-Hero Standard, Video steht unter hero_variante.",
   "Kontakt/Anfrage, Online-Termin und Anfahrt sind eigene Sektionen (kontakt-anfrage-formular bzw. mehrschritt-anfrage, termin-buchung-zwei-klick, karte-zwei-klick, oeffnungszeiten-status), auch wenn ein Rezept sie nicht nennt; die Adresse steht immer auch als Text da; studio-visitenkarte-footer steht nur im Footer.",
   "Drittanbieter-Inhalte (Video, Karte, Buchung, Social Feeds) erst nach Einwilligung bzw. Klick laden.",
   "Höchstens ein Material-Effekt (Glow, Verlaufsrahmen, Raster, Textur) pro Ansicht.",
   "Automatisch bewegte Inhalte (Laufband, Wortwechsel, Autoplay) nie für wichtige Information; immer pausierbar und unter prefers-reduced-motion statisch.",
   "Barrierefreiheit gehört zur Grundausstattung (BFSG seit 28.06.2025): sichtbarer Fokus (fokus-stil-system), Sprunglinks und Landmarken, Pause für alles, was sich länger als 5 s bewegt (bewegung-pausieren-schalter), native Dialoge, 200 % Zoom und 320 px Breite ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus prüfen (kontrastmodus-forced-colors). Rechtliches (Erklärung zur Barrierefreiheit) vom Kunden prüfen lassen.",
   "Firmendaten (Name, Adresse, Telefon, Zeiten samt Sonderzeiten, Leistungen, Profil-Links) aus einer Quelle; JSON-LD nur für sichtbare Inhalte, keine eigenen Bewertungssterne im Markup (firmendaten-strukturiert).",
   "Wer online Verträge mit Verbrauchern schließt (Shop, Kurs, Abo, Mitgliedschaft, Online-Anmeldung), braucht im Footer ohne Login „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, seit 19.06.2026) – vom Kunden prüfen lassen.",
   "Bewertungen von Google oder anderen Plattformen nur mit Echtheitshinweis direkt an den gezeigten Bewertungen (bewertungsprofil-mit-echtheitshinweis); bewertungen-verteilung nur für eigene, geprüfte Bewertungen.",
   "Pflichtangaben (Impressum, Datenschutzerklärung, Branchenpflichten aus Leitfaden 8a und den Rezept-regeln) als Seiten, Links oder markierte Platzhalter; keine Rechtstexte erfinden, alles vom Kunden prüfen lassen. Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO), keine pauschalen Umweltaussagen ohne Nachweis.",
   "consent-banner-gestaltet nur, wenn beim Laden einwilligungspflichtige Dienste laufen. Laden alle Dritten erst per 2-Klick, genügt ein Einstellungs-Dialog im Footer („Datenschutz-Einstellungen“) zum Widerrufen.",
   "Starter- und Beispielseiten ohne echte Daten: Bewertungen, Preise, Allergene und Kennzahlen als markierte Platzhalter, nie erfundene Kundenstimmen als echt.",
   "Werbung mit Rate, Zins, „0 %“, Ratenzahlung, Leasing oder „später bezahlen“ braucht ab 20.11.2026 finanzierung-pflichtangaben: effektiver Jahreszins mindestens so groß wie die Rate, Warnhinweis „Achtung! Kreditaufnahme kostet Geld.“ direkt dabei (vom Kunden prüfen lassen).",
   "Verkauf von Waren an Verbraucher braucht seit 27.09.2026 den EU-Hinweis zur gesetzlichen Gewährleistung (eu-gewaehrleistungshinweis), mindestens als Footer-Link, sicherer an Produktseite und Checkout; nur die amtliche Vorlage der EU-Kommission."
  ],
  "herkunft": "Art-Director-Prüfung der 18 Rezepte, Runde 3 (Basis-Block, Signatur-Pflichtfeld, Schriftverteilung, 2-Klick-Muster). Runde 5 (02.11.2026): zugang-Muster, Firmendaten und Vorladen in die Grundausstattung, Regeln zu Kontakt, Verträgen, Bewertungen und Pflichtangaben (KI-Audit Befund 3, Lückenrecherche N1–N3, N6, K5)."
 },
 "id": "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"
  }
 ]
}