{
 "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": "saas-produkt-praezise",
 "name": "SaaS & KI: das Produkt zeigt sich selbst",
 "branche": "Tech-Startup / SaaS / KI-Produkt / Software-Tool",
 "stimmung": [
  "präzise",
  "technisch",
  "ruhig",
  "kompetent"
 ],
 "kurz": "Das echte Produkt-Interface ist der Hero, nicht ein Stockbild oder ein Glow-Verlauf. Eine Groteskfamilie in wenigen Gewichten, Mono nur für Labels und Daten, Graustufen plus genau ein Markenton. Bewegung ist schnell wie in der App selbst (100–200 ms), Inhalte gliedern sich in Funktions-Kapitel, Preise und eine große Sitemap im Footer.",
 "referenzen": [
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Inter Variable' (100–900) und 'Berkeley Mono'; Gewichte als Tokens --font-weight-medium 510 / semibold 590 / bold 680. Titel-Skala --title-1-size 1.0625rem bis --title-9-size 4.5rem, Laufweite -.012em (klein) bis -.022em (4.5rem) bei Zeilenhöhe 1. Komplette Easing-Bibliothek als CSS-Variablen; tatsächlich benutzt vor allem var(--ease-out-quad) = cubic-bezier(.25,.46,.45,.94) (74×), daneben cubic-bezier(.32,.72,0,1) (7×, Drawer). Dauern überwiegend .16s (27×), .12s, .18s, .1s; --duration .18s. 16 prefers-reduced-motion-Regeln. Farben dunkel: --color-bg-primary #08090a, Panel #161718, Text #f7f8f8 / #d0d6e0 / #8a8f98, Akzent #7170ff, Marke #5e6ad2. Seitenbreite --page-max-width 1024px, Header 57–72px. Hero zeigt die App als echtes HTML-UI (aria-label 'A screenshot of the Linear app…'); Sektionen: Intake and integrations / Planning and monitoring / AI and automations / Build, review, and ship / Changelog; Footer mit 6 Spalten (Product, Features, Company, Resources, Connect, Legal).",
   "herkunft": "beobachtet",
   "quelle": "https://static.linear.app/web/_next/static/css/2AMbo6gs.css"
  },
  {
   "seite": "n8n",
   "url": "https://n8n.io/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Nuxt + Tailwind v4. @font-face 'n8n Baumer Uniwidth' (--font-sans), 'n8n Baumer Mono', 'EK Baumer Grotesk'. Bewegung nur Tailwind-Defaults: --default-transition-duration .15s, --default-transition-timing-function cubic-bezier(.4,0,.2,1), dazu --ease-out cubic-bezier(0,0,.2,1) und --ease-in cubic-bezier(.4,0,1,1); Dauern .15s (11×), .3s, .5s. Flächen per Token --color-surface-backgrounds-primary = grey-50 (#fafafa) bzw. dunkel grey-900 (#212121), Text grey-950 #161616. H1 'Build the agent. Understand its workflow.' (letztes Wort buchstabenweise gesetzt), danach Use-Case-Karten ('How Mark automated…'), drei Vorteils-Tabs (Full visibility / Put rules around AI actions / Self-host) und 'Documentation, built in'.",
   "herkunft": "beobachtet",
   "quelle": "https://n8n.io/_nuxt/entry.Cz9s5tap.css"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): @font-face 'Inter' (7 Schnitte), 'GeistMono', 'jetBrainsMono', 'Instrument Serif', 'VT323'. Kurven: cubic-bezier(.23,1,.32,1) easeOutQuint (15×), (.4,0,.2,1) (9×), (.215,.61,.355,1) (9×), (.16,1,.3,1) (7×); Überschwinger (.34,1.56,.64,1) nur 2×. Dauern .3s (104×), .2s (52×), .15s (29×). Dunkle Palette als Tokens: --color-bg-100 #101111, -200 #18191a, --color-fg #f4f4f6, -200 #c2c7ca, -300 #78787c, --color-border #242728; Statusfarben gelb #ffc533, rot #ff6161, blau #57c1ff, grün #59d499 jeweils mit 15 %-Transparenz-Variante. Sektionen: H1 'Your shortcut to everything.', Extensions ('There's an extension for that'), AI Chat / Quick AI / AI Extensions, 'Built for professionals like you', Abschluss 'Take the short way.'",
   "herkunft": "beobachtet",
   "quelle": "https://www.raycast.com/_next/static/immutable/chunks/0lrccwf1ua-z0.css"
  }
 ],
 "schrift": {
  "paarung_basis": "tech-terminal",
  "abweichung": "",
  "headline": "geist",
  "text": "geist",
  "akzent": "geist-mono",
  "groessen": "Stufen wie Linear: 1.0625 / 1.25 / 1.5 / 2 / 2.5 / 3 / 3.5 / 4 / 4.5rem. h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 560–600, Laufweite -0.022em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.4rem + 2vw, 3rem), -0.018em, 1.1; Fließtext 1rem–1.0625rem, wght 400, -0.006em, Zeilenhöhe 1.6; Geist Mono 0.75–0.8125rem für Labels, Code, Kennzahlen. Gewichte maximal 400 / 500 / 600 (Linear arbeitet mit 510 / 590).",
  "techniken": [
   "eine-familie-wenig-gewichte",
   "headline-laufweite-zeilenabstand",
   "mono-labels-versal",
   "tabellenziffern"
  ],
  "alternative_eigenprojekt": "Paarung sanft-kontrast (satoshi + rowan als Serif-Akzent + geist-mono, ITF) für ein freundlicheres KI-Produkt – nicht für IONOS-Templates."
 },
 "farbe": {
  "prinzip": "Graustufen tragen alles, ein einziger Markenton für Primär-Button, Fokus und aktive Zustände. Dark Mode ist bei Dev-Tools Standard (Linear, Raycast), für KMU-Software eher heller Grund wie n8n (#fafafa) mit dunkler Variante. Statusfarben nur in UI-Ausschnitten, nie als Deko-Verlauf.",
  "beispiel": [
   "#08090A Grund dunkel (Linear bg-primary) bzw. #FAFAFA hell (n8n grey-50)",
   "#161718 Panel/Karte (Linear)",
   "#F7F8F8 Text auf dunkel",
   "#8A8F98 Sekundärtext/Meta (Linear tertiary)",
   "#242728 Linien/Ränder (Raycast border)",
   "#7170FF Markenton für Aktion/Fokus (Linear accent; im Template austauschbar)"
  ]
 },
 "animationsstil": "token-tech-praezise",
 "bewegung": {
  "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9); Drawer/Modal expressive cubic-bezier(0.4, 0.14, 0.3, 1)",
  "beobachtet": "easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94) 74×, .16s 27× (Linear); Drawer/Sheets cubic-bezier(0.32, 0.72, 0, 1); cubic-bezier(.4,0,.2,1) .15s (n8n Tailwind); easeOutQuint .2–.3s (Raycast)",
  "dauer_ms": "100–160 (Hover, Farbe, Buttons), 180–200 (Menüs, Tabs), 300–400 (Drawer/Modal), 500–600 (Einblendung von Sektionen)",
  "regel": "UI reagiert so schnell wie die App: die productive-Kurve des Stils für fast alles, Drawer und Sheets mit der expressive-Kurve. Einblendungen nur Deckkraft + 4–8 px y, ohne Federn. Überschwinger höchstens für einen einzelnen Bestätigungs-Moment. Alle Animationen hinter prefers-reduced-motion.",
  "herkunft": "beobachtet (Linear ease-out-quad 74×, .16s 27×; n8n Tailwind .15s cubic-bezier(.4,0,.2,1); Raycast easeOutQuint 15×, .2–.3s)"
 },
 "hero_beschreibung": "Ein Satz Nutzen (höchstens 8 Wörter), Unterzeile, zwei CTAs (Kostenlos testen, Demo) und das echte Produkt-UI als HTML oder scharfer Screenshot (produkt-ui-hero-perspektiv-tilt), kein Mockup-Laptop. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Funktion des Produkts läuft; KI-Funktionen direkt am Feld kennzeichnen (Art. 50 KI-VO).",
 "muster": {
  "seitenuebergang": [],
  "preloader": [],
  "navigation": [
   "mega-menue-morphing-viewport",
   "command-palette-und-ki-suche",
   "theme-umschalter-view-transition"
  ],
  "hero": [
   "produkt-ui-hero-perspektiv-tilt"
  ],
  "hero_variante": [
   "prompt-hero-eingabefeld"
  ],
  "sektionen": [
   {
    "zweck": "Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
    "muster": [
     "lokale-produktnavigation",
     "split-screen-sticky-seiten",
     "gleitender-indikator",
     "tabs-pfeiltasten-focusgroup"
    ],
    "varianten": {
     "split-screen-sticky-seiten": "titel",
     "tabs-pfeiltasten-focusgroup": "auto",
     "lokale-produktnavigation": "unterseiten"
    }
   },
   {
    "zweck": "Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
    "muster": [
     "bento-grid-interaktiv",
     "karten-spotlight-glow"
    ]
   },
   {
    "zweck": "Kunden / Integrationen",
    "muster": [
     "logo-wand-social-proof"
    ],
    "varianten": {
     "logo-wand-social-proof": "laufband"
    }
   },
   {
    "zweck": "Use Cases / Kundenstimmen",
    "muster": [
     "testimonials-neu-gedacht",
     "css-native-karussell"
    ],
    "varianten": {
     "testimonials-neu-gedacht": "liste",
     "css-native-karussell": "peek"
    }
   },
   {
    "zweck": "Preise",
    "muster": [
     "vergleichstabelle-sticky",
     "preis-section-editorial",
     "gleitender-indikator"
    ],
    "varianten": {
     "vergleichstabelle-sticky": "pakete"
    }
   },
   {
    "zweck": "Was spart ihr? (Rechner mit Live-Ergebnis)",
    "muster": [
     "kostenrechner-konfigurator"
    ],
    "varianten": {
     "kostenrechner-konfigurator": "bad"
    }
   },
   {
    "zweck": "FAQ / Sicherheit / DSGVO",
    "muster": [
     "akkordeon-hoehe-auto"
    ],
    "varianten": {
     "akkordeon-hoehe-auto": "faq"
    }
   },
   {
    "zweck": "Demo / Kontakt (Demo-Anfrage, Enterprise, Support)",
    "muster": [
     "kontakt-anfrage-formular"
    ]
   },
   {
    "zweck": "Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
    "muster": [
     "widerruf-und-kuendigung-schaltflaeche",
     "barrierefreiheit-seite"
    ],
    "varianten": {
     "barrierefreiheit-seite": "bfsg",
     "widerruf-und-kuendigung-schaltflaeche": "richtig"
    }
   }
  ],
  "scroll": [],
  "schrift_animation": [
   "zahlen-odometer"
  ],
  "hover": [
   "hover-absicht-timing"
  ],
  "cursor": [],
  "mikro": [
   "kopieren-feedback",
   "ki-streaming-text-denkindikator",
   "toast-stapel",
   "skeleton-shimmer",
   "toggle-switch"
  ],
  "material": [
   "verlaufs-rahmen"
  ],
  "galerie": [
   "css-native-karussell"
  ],
  "footer": [
   "mega-footer-sitemap"
  ],
  "button": [
   "button-gruppe-expressiv",
   "kopieren-feedback"
  ]
 },
 "signatur": [
  "command-palette-und-ki-suche",
  "produkt-ui-hero-perspektiv-tilt"
 ],
 "optional": [
  "rive-datenbindung"
 ],
 "varianten_demo": {
  "verlaufs-rahmen": "saas",
  "theme-umschalter-view-transition": "light-dark",
  "button-gruppe-expressiv": "split",
  "ki-streaming-text-denkindikator": "archiv",
  "css-native-karussell": "peek"
 },
 "nicht_verwenden": [
  "mesh-gradient-shader – der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn",
  "shimmer-gradient-text – glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand",
  "smooth-scroll-lenis – Produktseiten müssen sich wie die App anfühlen, nicht schwimmen",
  "cursor-follower-lerp / magnetische-elemente – Agentur-Gesten ohne Nutzen für Software-Käufer",
  "interaktives-3d-hero – lenkt vom echten Interface ab und kostet Ladezeit",
  "prozent-zaehler – künstliche Wartezeit vor einem Produkt, das schnell wirken soll",
  "scramble-decode – Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee"
 ],
 "regeln": [
  "Hero = ein Satz Nutzen (max. 8 Wörter) + Unterzeile + zwei CTAs (Kostenlos testen, Demo) + echtes Produkt-UI als HTML oder scharfer Screenshot; kein Mockup-Laptop.",
  "Prompt-Feld im Hero nur, wenn dahinter eine echte Funktion läuft; sonst produkt-ui-hero-perspektiv-tilt.",
  "Eine Groteskfamilie in maximal drei Gewichten, Mono ausschließlich für Labels, Code, Zahlen; Headline-Laufweite negativ und mit der Größe zunehmend (-0.012em bis -0.022em).",
  "Funktionen als Kapitel in der Reihenfolge des Arbeitsablaufs (Linear: Intake → Planung → KI → Ausliefern), jedes mit einem echten UI-Ausschnitt.",
  "Inhaltsbreite um 1024–1200px halten; lange Zeilen in Feature-Texten auf 60ch begrenzen.",
  "Ein Markenton, sonst Graustufen. Höchstens ein Material-Effekt pro Ansicht: verlaufs-rahmen nur am Prompt-Feld im Fokus; karten-spotlight-glow nur in der Dark-Variante und nur im Bento; kein Linien- oder Punktraster als Hintergrund.",
  "Preise offen zeigen mit Monat/Jahr-Umschalter (gleitender Indikator, Zahl per Odometer); bei Enterprise 'Kontakt' statt Fantasiepreis.",
  "Footer als vollständige Sitemap inkl. Status, Changelog, Sicherheit/DSGVO, Impressum.",
  "rive-datenbindung nur als Zusatz (optional, Priorität F) am Rechner: Das Ergebnis steht immer auch als Text im HTML.",
  "Pflichtangaben und Recht (Leitfaden 8a): bei Verbraucher-Abos Kündigungs-Button (§ 312k BGB; BGH 16.07.2026: keine Halteangebote auf der Bestätigungsseite) und Widerrufs-Button (§ 356a BGB), Preise inkl. MwSt., B2B-Angebote klar als solche kennzeichnen; Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO); Sicherheitsseite mit Auftragsverarbeitung, Unterauftragnehmern und Serverstandort; Kundenlogos nur mit Erlaubnis – vom Kunden prüfen lassen."
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Schnell halten: Geist als variable WOFF2 (eine Datei je Familie), Produkt-UI als HTML/SVG statt Video, Screenshots als AVIF. Spotlight-Glow per CSS-Variable und pointermove, nur auf Geräten mit hover:hover. Auf Mobil Kapitel-Sticky auflösen zu gestapelten Abschnitten, Tabs statt Split-Screen.",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "stimmung_tags": [
  "präzise",
  "ruhig"
 ],
 "raum": {
  "basis_px": 4,
  "skala_px": [
   4,
   8,
   12,
   16,
   20,
   24,
   32,
   48,
   64,
   96
  ],
  "sektion": "clamp(64px, 8vw, 128px)",
  "dichte": "dicht",
  "hinweis": "App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(16px, 4vw, 32px)",
  "spalt": "clamp(16px, 2vw, 24px)",
  "max_breite": "1200px",
  "hinweis": "Inhalt 1024 bis 1200px (Regel). Kapitel in der Reihenfolge des Arbeitsablaufs, jedes mit einem UI-Ausschnitt; Bento nur in der Dark-Variante."
 },
 "form": {
  "radius_klein": "6px",
  "radius_gross": "10px",
  "pille": false,
  "linie": "1px #242728 auf Dunkel; auf Hell dieselbe Linie aus Graustufen",
  "schatten": "nur das Produkt-UI im Hero bekommt einen tiefen, farblosen Schatten; sonst keiner",
  "hinweis": "Radien aus der App: 6 px für Knöpfe, Felder und Tags, 10 px für Panels. Kein Linien- oder Punktraster als Hintergrund; verlaufs-rahmen nur am Prompt-Feld im Fokus."
 },
 "bildsprache": {
  "licht": "Keine Fotos; echte UI-Ausschnitte als HTML oder scharfer Screenshot in doppelter Auflösung.",
  "ausschnitt": "Ausschnitt einer echten Ansicht, auf die Funktion gezoomt, mit echten Beispieldaten.",
  "personen": "Nein; höchstens Kundenporträts bei Stimmen.",
  "formate": [
   "16:10",
   "4:3",
   "1:1"
  ],
  "nicht": "Keine Mockup-Laptops, keine Stock-Teams am Whiteboard, kein Glow- oder Aurora-Hintergrund, keine 3D-Icons."
 },
 "ton": {
  "anrede": "du",
  "saetze": "Kurz, Verb vorn, Nutzen in höchstens 8 Wörtern. Funktionen als Ergebnis, nicht als Feature-Name.",
  "haltung": "Präzise und ruhig, wie gute Software. Bei Software für KMU und Behörden Sie verwenden, dann durchgehend.",
  "beispiele": [
   "Rechnungen in zwei Minuten verschickt.",
   "Verbinde dein Postfach und starte mit einer Vorlage."
  ],
  "nicht": "„revolutionär“, „KI-gestützt“ als Selbstzweck, „Die All-in-One-Lösung für Ihr Business“, Fantasiepreise."
 },
 "hero_aufbau": {
  "raster": "Text über 8 Spalten linksbündig oder zentriert, darunter das Produkt-UI über alle 12 Spalten bis 1200px.",
  "bild": "Echtes Produkt-UI 16:10 als HTML oder scharfer Screenshot, perspektivisch geneigt (produkt-ui-hero-perspektiv-tilt); kein Mockup-Laptop.",
  "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Geist 560–600, über dem UI.",
  "handlung": "„Kostenlos testen“ (Markenton gefüllt) und „Demo ansehen“ (Kontur), nebeneinander unter der Unterzeile. Prompt-Feld nur als hero_variante mit echter Funktion.",
  "zusatz": "Zeile in Geist Mono über der H1 (Version oder Changelog), Kundenlogos als ruhige Reihe unter dem UI."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "mesh-gradient-shader"
   ],
   "grund": "der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn"
  },
  {
   "ids": [
    "shimmer-gradient-text"
   ],
   "grund": "glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand"
  },
  {
   "ids": [
    "smooth-scroll-lenis"
   ],
   "grund": "Produktseiten müssen sich wie die App anfühlen, nicht schwimmen"
  },
  {
   "ids": [
    "cursor-follower-lerp",
    "magnetische-elemente"
   ],
   "grund": "Agentur-Gesten ohne Nutzen für Software-Käufer"
  },
  {
   "ids": [
    "interaktives-3d-hero"
   ],
   "grund": "lenkt vom echten Interface ab und kostet Ladezeit"
  },
  {
   "ids": [
    "prozent-zaehler"
   ],
   "grund": "künstliche Wartezeit vor einem Produkt, das schnell wirken soll"
  },
  {
   "ids": [
    "scramble-decode"
   ],
   "grund": "Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee"
  }
 ],
 "alle_muster": [
  {
   "id": "command-palette-und-ki-suche",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/meta.json"
  },
  {
   "id": "produkt-ui-hero-perspektiv-tilt",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/meta.json"
  },
  {
   "id": "prompt-hero-eingabefeld",
   "rolle": "Hero-Variante",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/meta.json"
  },
  {
   "id": "lokale-produktnavigation",
   "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/meta.json",
   "variante": "unterseiten",
   "demo_url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=unterseiten"
  },
  {
   "id": "split-screen-sticky-seiten",
   "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
   "variante": "titel",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel"
  },
  {
   "id": "gleitender-indikator",
   "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/meta.json"
  },
  {
   "id": "tabs-pfeiltasten-focusgroup",
   "rolle": "Sektion: Funktionen in Kapiteln (Workflow von Anfang bis Ende)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json",
   "variante": "auto",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto"
  },
  {
   "id": "bento-grid-interaktiv",
   "rolle": "Sektion: Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
  },
  {
   "id": "karten-spotlight-glow",
   "rolle": "Sektion: Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/meta.json"
  },
  {
   "id": "logo-wand-social-proof",
   "rolle": "Sektion: Kunden / Integrationen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
   "variante": "laufband",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=laufband"
  },
  {
   "id": "testimonials-neu-gedacht",
   "rolle": "Sektion: Use Cases / Kundenstimmen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
   "variante": "liste",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste"
  },
  {
   "id": "css-native-karussell",
   "rolle": "Sektion: Use Cases / Kundenstimmen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
   "variante": "peek",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
  },
  {
   "id": "vergleichstabelle-sticky",
   "rolle": "Sektion: Preise",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
   "variante": "pakete",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
  },
  {
   "id": "preis-section-editorial",
   "rolle": "Sektion: Preise",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json"
  },
  {
   "id": "kostenrechner-konfigurator",
   "rolle": "Sektion: Was spart ihr? (Rechner mit Live-Ergebnis)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/meta.json",
   "variante": "bad",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad"
  },
  {
   "id": "akkordeon-hoehe-auto",
   "rolle": "Sektion: FAQ / Sicherheit / DSGVO",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
   "variante": "faq",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: Demo / Kontakt (Demo-Anfrage, Enterprise, Support)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "widerruf-und-kuendigung-schaltflaeche",
   "rolle": "Sektion: Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json",
   "variante": "richtig",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig"
  },
  {
   "id": "barrierefreiheit-seite",
   "rolle": "Sektion: Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
   "variante": "bfsg",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
  },
  {
   "id": "mega-menue-morphing-viewport",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json"
  },
  {
   "id": "theme-umschalter-view-transition",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/meta.json",
   "variante": "light-dark",
   "demo_url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=light-dark"
  },
  {
   "id": "zahlen-odometer",
   "rolle": "Schrift",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/meta.json"
  },
  {
   "id": "hover-absicht-timing",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
  },
  {
   "id": "kopieren-feedback",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json"
  },
  {
   "id": "ki-streaming-text-denkindikator",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/meta.json",
   "variante": "archiv",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=archiv"
  },
  {
   "id": "toast-stapel",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json"
  },
  {
   "id": "skeleton-shimmer",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json"
  },
  {
   "id": "toggle-switch",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/meta.json"
  },
  {
   "id": "verlaufs-rahmen",
   "rolle": "Material",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/meta.json",
   "variante": "saas",
   "demo_url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=saas"
  },
  {
   "id": "mega-footer-sitemap",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
  },
  {
   "id": "button-gruppe-expressiv",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/meta.json",
   "variante": "split",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split"
  },
  {
   "id": "token-tech-praezise",
   "rolle": "Animationsstil",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json"
  },
  {
   "id": "eine-familie-wenig-gewichte",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
  },
  {
   "id": "headline-laufweite-zeilenabstand",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json"
  },
  {
   "id": "mono-labels-versal",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
  },
  {
   "id": "tabellenziffern",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
  },
  {
   "id": "rive-datenbindung",
   "rolle": "Optional",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/meta.json"
  }
 ]
}