{
 "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": "mode-beauty-kollektion",
 "name": "Mode und Beauty: Kollektion und Ritual",
 "branche": "Mode-Label, Concept Store, Kosmetik und Hautpflege",
 "stimmung": [
  "kuratiert",
  "ruhig",
  "warm",
  "modisch"
 ],
 "kurz": "Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung. Toteme und Lemaire verkaufen mit Weißraum und Fotografie. Typology zeigt bei Beauty die Formel direkt in der Überschrift (Wirkstoff + Prozent + Preis) und setzt dafür eine Mono-Schrift. Der Shop muss schnell bedienbar bleiben, deshalb wird die UI knapp animiert.",
 "referenzen": [
  {
   "seite": "Toteme",
   "url": "https://toteme.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "https://toteme.com/cdn/shop/t/430/assets/theme.css",
   "beobachtung": "Shopify. @font-face: nur „Toteme Sans“ (Light, Regular, Bold je mit Italic), für Headlines und Text (--Font_Family-headings = --Font_Family-body). Bewegung: opacity .3s ease (17×), transform .3s ease; Karussell opacity 1s var(--Carousel_Ease) = cubic-bezier(.25,1,.5,1); Akkordeon über grid-template-rows .3s ease. Warme Off-Whites #f6f5f3, #ebeae8. Sektionen: sec-Banner-fullbleed, sec-Banner_Cards-carousel, sec-ClientHelp."
  },
  {
   "seite": "Lemaire",
   "url": "https://www.lemaire.fr/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "https://www.lemaire.fr/cdn/shop/t/133/assets/base.css und weitere Theme-CSS",
   "beobachtung": "Shopify. @font-face: BrownStd (Light, Regular) und GaramondPremrPro. Dauer-Tokens --duration-short 100ms, -default 200ms, -medium 300ms, -long 500ms, -extended 3s; Unterstreichung animiert über text-decoration-thickness var(--duration-short). Labels mit letter-spacing .06–.1rem. Farben #fdfbf9 und #100a0d. Folge: hero → dispatch → editorial_block → custom_liquid → footer_services → Footer mit Klasse h-screen (volle Viewporthöhe)."
  },
  {
   "seite": "Typology",
   "url": "https://www.typology.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "/_nuxt/entry.0OZWaTfA.css",
   "beobachtung": "Nuxt-Shop. @font-face: Lettera (Mono, Klasse .font-mono) und Post Grotesk (Light, Book, Medium). Produktüberschriften nennen Formel und Preis: „Sérum Éclat L32 — Complexe vitamine C 15% + Vitamine E 1% — à partir de 17,90 €“. 78 uppercase-Klassen im HTML; Laufweite .02em (9×). cubic-bezier(.4,0,.2,1) und (0,0,.2,1), Dauern .15–.7s. Farben #f3efe9 und #cecdc6 (warm), #141414."
  }
 ],
 "schrift": {
  "paarung_basis": "zalando-mode",
  "abweichung": "",
  "headline": "zalando-sans",
  "text": "zalando-sans",
  "akzent": "fragment-mono",
  "techniken": [
   "eine-familie-wenig-gewichte",
   "mono-labels-versal",
   "tabellenziffern",
   "lesesatz-text-wrap"
  ],
  "groessen": "Kampagnen-Headline clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, wght 400–500 (nicht fett), -0.01em, line-height 1.05. Produktname 0.9375rem wght 500, Preis tabular-nums. Fließtext 0.9375–1rem/1.5. Rubriken und Wirkstoffe in Fragment Mono 0.75rem Versal, +0.06em (Lemaire .06–.1rem). Editorial-Zitat optional EB Garamond Italic 1.5rem (Lemaire nutzt Garamond als zweite Stimme).",
  "alternative_eigenprojekt": "luxus-didone (Bodoni Moda + Switzer) für Beauty-Luxus oder Satoshi als Hausschrift-Ersatz (ITF-FFL)"
 },
 "farbe": {
  "prinzip": "Warmes Off-White statt Reinweiß (Toteme #f6f5f3, Lemaire #fdfbf9, Typology #f3efe9), Fast-Schwarz mit Rotstich für Text. Farbe kommt aus Produkt und Kampagnenbild; die UI bleibt zweifarbig. Sale und Fehler sind die einzigen Signalfarben.",
  "beispiel": [
   "#f6f3ee Grund",
   "#121010 Text",
   "#ebe7e0 Kartenfläche, Produkt-Hintergrund",
   "#cecdc6 Linien",
   "#8c857b Meta, Wirkstoff-Labels",
   "#a3402a Sale/Fehler (sparsam)",
   "#726D63 Meta-Text barrierefrei (4.6 : 1 auf #f6f3ee; #8c857b nur für Linien oder Schrift ab 24 px)"
  ]
 },
 "animationsstil": "token-luxus-weich",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "bewegung": {
  "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder und Hero-Wechsel); Shop-UI über animationsstil_ui",
  "beobachtet": "--Carousel_Ease cubic-bezier(.25,1,.5,1) 1 s für Bildwechsel, Shop-UI 0,3 s ease (Toteme); Tokens 100/200/300/500 ms (Lemaire)",
  "dauer_ms": "Kampagnen-Bildwechsel 1000, UI (Menü, Akkordeon, Hover) 200–300, Unterstreichung 100",
  "regel": "Zwei Tempi: Bilder überblenden langsam mit Opazität (1 s, Kurve des Stils), Shop-UI (Menü, Filter, Drawer, Kaufbox) reagiert über animationsstil_ui token-toggle-asymmetrisch in 200–300 ms. Keine Bewegung auf Produktbildern beim Scrollen, kein Überschwingen."
 },
 "hero_beschreibung": "Foto-Hero als Standard: ein Kampagnenbild in voller Breite, Text klein in einer Ecke. Video nur als Variante mit eigenem Kampagnenmaterial (Poster, mobil Hochformat oder Standbild).",
 "muster": {
  "seitenuebergang": [],
  "preloader": [],
  "navigation": [
   "mega-menue-morphing-viewport",
   "gestapelte-drawer-navigation",
   "hide-on-scroll-header"
  ],
  "hero": [
   "foto-hero"
  ],
  "hero_variante": [
   "cinematic-video-hero"
  ],
  "sektionen": [
   {
    "zweck": "Kampagne / Editorial",
    "muster": [
     "editorial-magazin-layout"
    ],
    "varianten": {
     "editorial-magazin-layout": "kunstbuch"
    }
   },
   {
    "zweck": "Lookbook (Kapitel scrollen ins nächste)",
    "muster": [
     "scroll-naechstes-projekt",
     "bild-hotspots"
    ],
    "varianten": {
     "bild-hotspots": "shop"
    }
   },
   {
    "zweck": "Produktreihe / Neuheiten",
    "muster": [
     "css-native-karussell"
    ],
    "varianten": {
     "css-native-karussell": "produktreihe"
    }
   },
   {
    "zweck": "Kategorie mit Filter",
    "muster": [
     "facettenfilter-ergebnisliste"
    ],
    "varianten": {
     "facettenfilter-ergebnisliste": "schublade"
    }
   },
   {
    "zweck": "Produktdetail (Bilder links, Kaufbox rechts sticky)",
    "muster": [
     "produkt-kaufbox-varianten",
     "galerie-shared-element-vollbild",
     "akkordeon-hoehe-auto",
     "warenkorb-drawer",
     "eu-gewaehrleistungshinweis"
    ],
    "varianten": {
     "produkt-kaufbox-varianten": "seite",
     "galerie-shared-element-vollbild": "zoom",
     "warenkorb-drawer": "hinweis",
     "akkordeon-hoehe-auto": "basis",
     "eu-gewaehrleistungshinweis": "kaufbox"
    }
   },
   {
    "zweck": "Anwendung / Ritual (Beauty)",
    "muster": [
     "split-screen-sticky-seiten"
    ],
    "varianten": {
     "split-screen-sticky-seiten": "bild"
    }
   },
   {
    "zweck": "Welche Pflege passt? (Finder in wenigen Fragen)",
    "muster": [
     "produktfinder-quiz"
    ],
    "varianten": {
     "produktfinder-quiz": "schritte"
    }
   },
   {
    "zweck": "Wirkstoffe, Pflege, Service",
    "muster": [
     "akkordeon-hoehe-auto"
    ],
    "varianten": {
     "akkordeon-hoehe-auto": "faq"
    }
   },
   {
    "zweck": "Bewertungen",
    "muster": [
     "bewertungen-verteilung"
    ],
    "varianten": {
     "bewertungen-verteilung": "band"
    }
   },
   {
    "zweck": "Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
    "muster": [
     "kontakt-anfrage-formular",
     "oeffnungszeiten-status",
     "karte-zwei-klick"
    ],
    "varianten": {
     "oeffnungszeiten-status": "kompakt",
     "karte-zwei-klick": "bild"
    }
   },
   {
    "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
    "muster": [
     "widerruf-und-kuendigung-schaltflaeche",
     "barrierefreiheit-seite"
    ],
    "varianten": {
     "barrierefreiheit-seite": "bfsg",
     "widerruf-und-kuendigung-schaltflaeche": "richtig"
    }
   }
  ],
  "scroll": [],
  "schrift_animation": [],
  "hover": [
   "bild-zoom-in-maske"
  ],
  "cursor": [],
  "mikro": [
   "animiertes-select",
   "toast-stapel"
  ],
  "material": [],
  "galerie": [
   "css-native-karussell",
   "galerie-shared-element-vollbild"
  ],
  "footer": [
   "mega-footer-sitemap",
   "footer-newsletter-mit-persoenlichkeit"
  ],
  "button": [
   "glas-button",
   "text-roll-hover"
  ],
  "hero_varianten": {
   "foto-hero": "randlos-unten-links"
  }
 },
 "signatur": [
  "scroll-naechstes-projekt"
 ],
 "varianten_demo": {
  "footer-newsletter-mit-persoenlichkeit": "basis",
  "bild-zoom-in-maske": "gegen",
  "glas-button": "getoent",
  "css-native-karussell": "produktreihe",
  "galerie-shared-element-vollbild": "produkt"
 },
 "nicht_verwenden": [
  "in-den-warenkorb-flug und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig",
  "kippen-3d-karten und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware",
  "smooth-scroll-lenis – Shop mit Filtern, Drawer und verschachtelten Scrollbereichen",
  "graustufen-zu-farbe – die Farbe des Produkts ist die Kaufinformation",
  "Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular",
  "Playfair Display als „Eleganz“-Reflex – Verbotsliste"
 ],
 "regeln": [
  "Erster Bildschirm: ein Kampagnenbild in voller Breite, Text klein in einer Ecke; Video nur mit eigenem Kampagnenmaterial.",
  "Eine Grotesk für Headline und Text (Toteme: nur Toteme Sans); Mono nur für Rubriken, Größen und Wirkstoffe.",
  "Beauty: Formel in die Produktzeile (Wirkstoff + Konzentration + Preis), wie bei Typology.",
  "Produktbilder auf einheitlicher Off-White-Fläche, alle im selben Seitenverhältnis (3:4 oder 4:5).",
  "Bilder überblenden langsam (1 s), UI reagiert schnell (≤ 300 ms).",
  "Größen, Preise und Mengen in Tabellenziffern. Gefilterte Produkte ordnen sich per FLIP in höchstens 250 ms um (nur Position, kein Einblend-Effekt); bei reduced motion springen sie.",
  "Footer großzügig: Service, Newsletter, Sitemap; darf die volle Bildschirmhöhe einnehmen (Lemaire h-screen).",
  "Lookbook-Kapitel gehen per Scroll ins nächste über; am Ende der Lookbook-Seite bleiben Footer, Service und rechtliche Links erreichbar.",
  "hide-on-scroll-header nur auf Kampagne, Lookbook und Kategorie; auf Produktdetail, Warenkorb und Checkout bleibt der Header fest, damit der Warenkorb immer erreichbar ist (wann_nicht des Musters).",
  "Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Zahlungsarten; Kosmetik mit Grundpreis je 100 ml und Inhaltsstoffen vor dem Kauf; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse) als Akkordeon „Hersteller und Sicherheit“; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen."
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Standard ist das Kampagnenfoto (AVIF, fetchpriority=high); in der Video-Variante MP4 mit Poster, auf Mobil Hochformat-Version oder Standbild. Produktbilder mit srcset, Karussell nativ per Scroll-Snap statt Swiper. Zalando Sans als Variable-Datei mit wdth-Achse (eine Datei für Headline und Text). Shop-Skripte (Consent, Tracking) nach der Interaktion laden; Toteme lädt über 60 Skripte, das ist nicht nachahmenswert.",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "stimmung_tags": [
  "editorial",
  "ruhig",
  "warm"
 ],
 "raum": {
  "basis_px": 8,
  "skala_px": [
   4,
   8,
   12,
   16,
   24,
   32,
   48,
   64,
   96,
   160
  ],
  "sektion": "clamp(64px, 8vw, 128px)",
  "dichte": "luftig",
  "hinweis": "Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(12px, 2vw, 32px)",
  "spalt": "clamp(8px, 1vw, 16px)",
  "max_breite": "none",
  "hinweis": "Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen."
 },
 "form": {
  "radius_klein": "2px",
  "radius_gross": "0",
  "pille": false,
  "linie": "1px #cecdc6",
  "schatten": "keiner",
  "hinweis": "Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo."
 },
 "bildsprache": {
  "licht": "Weiches Studio- oder Tageslicht, warme Hauttöne, Produkt in echter Farbe.",
  "ausschnitt": "Kampagne: Ganzkörper oder Anschnitt; Produkt: Freisteller auf #ebe7e0 mit gleichem Rand.",
  "personen": "Ja in der Kampagne (Models mit Rechten); Produktbilder ohne Person.",
  "formate": [
   "3:4",
   "4:5",
   "16:9"
  ],
  "nicht": "Keine wechselnden Seitenverhältnisse im Produktraster, keine Stock-Models, kein Rot außer für Sale und Fehler, kein Glanz-Filter auf Haut."
 },
 "ton": {
  "anrede": "du",
  "saetze": "Knapp und sachlich: Material, Schnitt, Wirkstoff mit Prozent, Preis.",
  "haltung": "Kuratiert, ruhig, selbstverständlich. Beauty nennt die Formel statt eines Versprechens.",
  "beispiele": [
   "Mantel aus Wolle, gerader Schnitt. Ab 389 €.",
   "Serum mit 15 % Vitamin C. Für jeden Hauttyp."
  ],
  "nicht": "„Must-have“, „Gönn dir“, „Shop the look!“ ohne Look, Wirkversprechen ohne Beleg, Emojis."
 },
 "hero_aufbau": {
  "raster": "Kampagnenbild randlos, volle Bildschirmhöhe; Text klein in der unteren linken Ecke über 4 Spalten.",
  "bild": "Ein Kampagnenbild, 16:9 Desktop, 3:4 oder 4:5 mobil; Video nur als hero_variante mit eigenem Material.",
  "h1": "clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, 400–500, unten links.",
  "handlung": "Ein Weg: „Kollektion ansehen“ als Textlink oder getönter Glas-Knopf; kein zweiter CTA im Bild.",
  "zusatz": "Rubrik in Fragment Mono 0.75rem Versal (Saison, „Neu“) über der Headline."
 },
 "optional": [
  "karten-faecher-container"
 ],
 "url": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/mode-beauty-kollektion/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "in-den-warenkorb-flug"
   ],
   "grund": "und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig"
  },
  {
   "ids": [
    "kippen-3d-karten"
   ],
   "grund": "und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware"
  },
  {
   "ids": [
    "smooth-scroll-lenis"
   ],
   "grund": "Shop mit Filtern, Drawer und verschachtelten Scrollbereichen"
  },
  {
   "ids": [
    "graustufen-zu-farbe"
   ],
   "grund": "die Farbe des Produkts ist die Kaufinformation"
  },
  {
   "ids": [],
   "grund": "Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular"
  },
  {
   "ids": [],
   "grund": "Playfair Display als „Eleganz“-Reflex – Verbotsliste"
  }
 ],
 "alle_muster": [
  {
   "id": "scroll-naechstes-projekt",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/meta.json"
  },
  {
   "id": "foto-hero",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json",
   "variante": "randlos-unten-links",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links"
  },
  {
   "id": "cinematic-video-hero",
   "rolle": "Hero-Variante",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
  },
  {
   "id": "editorial-magazin-layout",
   "rolle": "Sektion: Kampagne / Editorial",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
   "variante": "kunstbuch",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch"
  },
  {
   "id": "bild-hotspots",
   "rolle": "Sektion: Lookbook (Kapitel scrollen ins nächste)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json",
   "variante": "shop",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop"
  },
  {
   "id": "css-native-karussell",
   "rolle": "Sektion: Produktreihe / Neuheiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
   "variante": "produktreihe",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe"
  },
  {
   "id": "facettenfilter-ergebnisliste",
   "rolle": "Sektion: Kategorie mit Filter",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json",
   "variante": "schublade",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=schublade"
  },
  {
   "id": "produkt-kaufbox-varianten",
   "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json",
   "variante": "seite",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite"
  },
  {
   "id": "galerie-shared-element-vollbild",
   "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
   "variante": "produkt",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
  },
  {
   "id": "akkordeon-hoehe-auto",
   "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
   "varianten_je_rolle": [
    {
     "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
     "variante": "basis",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
    },
    {
     "rolle": "Sektion: Wirkstoffe, Pflege, Service",
     "variante": "faq",
     "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
    }
   ]
  },
  {
   "id": "warenkorb-drawer",
   "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json",
   "variante": "hinweis",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=hinweis"
  },
  {
   "id": "eu-gewaehrleistungshinweis",
   "rolle": "Sektion: Produktdetail (Bilder links, Kaufbox rechts sticky)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
   "variante": "kaufbox",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox"
  },
  {
   "id": "split-screen-sticky-seiten",
   "rolle": "Sektion: Anwendung / Ritual (Beauty)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
  },
  {
   "id": "produktfinder-quiz",
   "rolle": "Sektion: Welche Pflege passt? (Finder in wenigen Fragen)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json",
   "variante": "schritte",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte"
  },
  {
   "id": "bewertungen-verteilung",
   "rolle": "Sektion: Bewertungen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
   "variante": "band",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "oeffnungszeiten-status",
   "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json",
   "variante": "kompakt",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt"
  },
  {
   "id": "karte-zwei-klick",
   "rolle": "Sektion: Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild"
  },
  {
   "id": "widerruf-und-kuendigung-schaltflaeche",
   "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
   "variante": "richtig",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
  },
  {
   "id": "barrierefreiheit-seite",
   "rolle": "Sektion: Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
   "variante": "bfsg",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
  },
  {
   "id": "mega-menue-morphing-viewport",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
  },
  {
   "id": "gestapelte-drawer-navigation",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/meta.json"
  },
  {
   "id": "hide-on-scroll-header",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/meta.json"
  },
  {
   "id": "bild-zoom-in-maske",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
   "variante": "gegen",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
  },
  {
   "id": "animiertes-select",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
  },
  {
   "id": "toast-stapel",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
  },
  {
   "id": "mega-footer-sitemap",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
  },
  {
   "id": "footer-newsletter-mit-persoenlichkeit",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
  },
  {
   "id": "glas-button",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/glas-button/meta.json",
   "variante": "getoent",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=getoent"
  },
  {
   "id": "text-roll-hover",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/meta.json"
  },
  {
   "id": "token-luxus-weich",
   "rolle": "Animationsstil",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/meta.json"
  },
  {
   "id": "token-toggle-asymmetrisch",
   "rolle": "Animationsstil für UI",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
  },
  {
   "id": "eine-familie-wenig-gewichte",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
  },
  {
   "id": "mono-labels-versal",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
  },
  {
   "id": "tabellenziffern",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
  },
  {
   "id": "lesesatz-text-wrap",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
  },
  {
   "id": "karten-faecher-container",
   "rolle": "Optional",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/meta.json"
  }
 ]
}