# Fundus · Leitfaden für den Bau von Websites

Stand: 02.11.2026 · Katalog: 02.11.2026 · 308 Muster, 308 Live-Demos, 28 Rezepte, 81 Schriften
Adresse: https://cecodesign.de/lab/fundus/leitfaden.txt

Diese Datei liest Claude vor jedem Website-Bau für Francesco (CecoDesign). Sie sagt, wie der Fundus aufgebaut ist, in welcher Reihenfolge entschieden wird und welche Regeln gegen generische KI-Websites gelten. Alle Zahlen stammen aus dem Fundus-Katalog und aus einer Browser-Messung von 23 Award- und Studio-Seiten (31.10.2026).

## 0. Kurzfassung

1. Rezept wählen: zuerst die kleine rezepte-uebersicht.json (Branche, Suchbegriffe, Ziele, Varianten), dann rezepte/<id>/bauplan.txt und rezepte/<id>/rezept.json des gewählten Rezepts. Die große rezepte.json enthält alle Rezepte zusammen und ist nur zum Filtern mit Code gedacht. Nie ohne Rezept starten. Passt eine Rezept-Variante (Feld varianten, z. B. Sportverein oder Rösterei mit Shop), deren Sektionsfolge nehmen.
2. tokens.css des Rezepts übernehmen (rezepte.json → tokens_css) und bauplan.txt lesen. Das ist der Animationsstil als CSS-Variablen: eine Kurve, eine Dauer-Skala für die ganze Seite. Details stehen in meta.json des Stils (bau.werte). rezept.bewegung.easing nennt dieselbe Kurve; bewegung.beobachtet sind nur Werte der Referenzen, keine zweite Kurve. Für Menüs, Formulare, Warenkorb und Buchung gilt animationsstil_ui. Fehlt er und taugt der Stil laut wann_nicht nicht für UI, token-toggle-asymmetrisch nehmen (Abschnitt 10).
3. Schriften des Rezepts setzen (schriften.json). Nichts aus der Verbotsliste. Bei Templates nur template_ok.
4. Sektionen in der Reihenfolge des Rezepts bauen, mit den genannten Mustern. Für jedes Muster meta.json lesen, vor allem "wann_nicht": Trifft es auf den Auftrag zu (z. B. nur ein Standort), das Muster weglassen oder ersetzen und das nennen. Liegt eine Demo vor, ist sie die Vorlage, aber ihre Werte werden in die Tokens der Seite übersetzt (Abschnitt 4, Schritt 5). Hat sie Varianten (index.json → varianten_demo, aufrufbar mit demo?v=<id>), gilt die Variante, die das Rezept für die Sektion nennt (sektionen[].varianten; alle_muster → variante und demo_url). Nennt es keine, die Variante wählen, deren „wann“ (meta.json → bau.varianten[].wann) zur Branche passt, nicht einfach die erste. Für Sektionen wie Speisekarte, Buchungsleiste, Filter, Kaufbox, Kalender, Kursplan, Spenden, Rechner, Gutschein, Karriere oder Standorte gibt es eigene Bausteine (Kategorie sektionen, Priorität D). Barrierefreiheit (Kategorie zugang, Priorität E) gehört auf jede Seite. Priorität F (Experimente, im Rezept unter optional) nur als Zusatz, nie als einziger Weg.
5. Signatur-Muster des Rezepts sind Pflicht. Steht ein Signatur-Muster in keiner Sektion, gehört es in den Hero (hero_aufbau) oder in die erste Inhaltssektion. Die Liste "nicht_verwenden" ist verbindlich und schlägt kombinierbar_mit und Demo-Abhängigkeiten.
6. Grundausstattung (rezepte.json → basis.muster und basis.regeln) einbauen, dazu Pflichtangaben und Rechtliches (Abschnitt 8a) als markierte Platzhalter.
7. Lokal zusätzlich 6 bis 12 echte Vorbilder im Fundus · Bilder ansehen (falls verfügbar).
8. Leistung prüfen (Abschnitt 8) und Checkliste (Abschnitt 12) vor der Abgabe abarbeiten.

## 1. Zweck

- Der Fundus ist eine geprüfte Bibliothek aus Gestaltungs- und Bewegungsmustern, Schriften, Branchen-Rezepten und gemessenen Werten. Er ersetzt das Bauchgefühl ("modern, clean, mit Fade-in") durch belegte Entscheidungen.
- Ziel jeder Website: Sie sieht nach der Branche und dem Kunden aus, nicht nach Template oder KI-Standard. Jede sichtbare Entscheidung (Schrift, Kurve, Dauer, Hero, Sektion) lässt sich auf einen Eintrag im Fundus oder eine Messung zurückführen.
- Zwei Einsatzfälle mit unterschiedlichen Regeln: IONOS-Templates und Specimens (nur Schriften mit template_ok = true) und Eigenprojekte wie cecodesign.de (auch ITF-Schriften, mehr Effekt erlaubt).

## 2. Dateien

Öffentlich unter https://cecodesign.de/lab/fundus/

| Datei | Inhalt |
|---|---|
| index.json | Alle Muster kompakt: id, Kategorie, Priorität (A–C Wichtigkeit; D Bausteine für Kundenseiten, E Barrierefreiheit, F Plattform-Experimente), Trend, Stimmung, Technik, Kurve, Dauer, Rezepte, Grundausstattung, Varianten der Demo, Adressen von meta.json, Detailseite und Demo |
| <kategorie>/<id>/meta.json | Steckbrief eines Musters: Beschreibung, wann einsetzen, wann nicht, Umsetzung, Messwerte mit Herkunft, Belege, Bau-Werte der Demo |
| <kategorie>/<id>/demo | Live-Demo als eine Datei (Vorlage zum Nachbauen; die Detailseite zeigt den bereinigten Code mit CDN-Adressen). Lokal heißt die Datei demo.html; dort zeigen Skripte auf ../../../../assets/vendor/, die CDN-Adresse steht im Attribut data-cdn. Varianten: demo?v=<id> |
| rezepte-uebersicht.json | Klein: alle 28 Rezepte mit Branche, Suchbegriffen, Zielen, Varianten und Adressen. Hier anfangen |
| rezepte/<rezept-id>/rezept.json | Ein Rezept vollständig, mit Grundausstattung (basis) und alle_muster |
| rezepte.json | Alle Rezepte zusammen (groß, nur mit Code filtern) |
| rezepte/ | Die Rezepte als Seite für Menschen |
| rezepte/<rezept-id>/bauplan.txt | Das Rezept als lesbarer Bauplan: Sektionen in Reihenfolge mit Demo-Links (samt Variante), Buttons, Signatur, Grundausstattung, Verbote, Regeln |
| rezepte/<rezept-id>/tokens.css | Startpunkt jeder Seite: @font-face, Schrift-, Farb-, Kurven- und Dauer-Variablen des Rezepts (Animationsstil und UI-Stil), Button-Grundwerte, reduzierte Bewegung |
| starter/<rezept-id>/ | Wo vorhanden: fertige Beispielseite nach dem Rezept (rezepte.json → starter). Aufbau und Umsetzung ansehen, Inhalte nie übernehmen |
| schriften.json | 81 Schriften, Paarungen, Verbotsliste, Lizenzklärung |
| feiertage.json | Gesetzliche Feiertage je Bundesland (2026–2030) für Öffnungszeiten, Terminbuchung und Kursplan; teilregionale Feiertage getrennt |
| messungen.json | Browser-Messung von 23 Award-Seiten: Kurven, Dauern, Schriften, Techniken |
| schema.json | Schema einer meta.json |
| leitfaden.txt | Dieser Leitfaden |

Nur lokal in Francescos Ordner (fremde Werke, nie veröffentlicht): Portfolio-Website/fundus-bilder/ mit inspiration.json (rund 1.470 Referenzen: Websites mit gemessener Typo, Farben und Technik, dazu Plakate, Marken, Editorial, 3D), LIESMICH-CLAUDE.md und suche.py.

Quelle aller Daten ist werkzeug/fundus-quelle/katalog.json (lokal). Die öffentlichen Dateien erzeugt werkzeug/fundus.py.

## 3. Wichtige Felder

**index.json → muster[]:** id, name, kategorie_slug, prioritaet (A = Kern, B = gezielt, C = Nische, D = Baustein für Kundenseiten, E = Barrierefreiheit, F = Plattform-Experiment), trendstatus, belegstatus, leistungskosten, stimmung (festes Vokabular: ruhig, editorial, präzise, luxuriös, filmisch, verspielt, laut, warm, experimentell), technik_gruppen, kurz, kurve, dauer_ms, kombinierbar_mit, in_rezepten (alle Rezepte, die das Muster nennen, auch als Animationsstil, UI-Stil oder Schrift-Technik), in_basis (true, wenn das Muster zur Grundausstattung gehört), demo, status, varianten_demo[] (id, name, url mit ?v=), meta, detail, demo_url. kurve und dauer_ms sind ein Einzelwert aus den Messwerten; bei Animationsstilen ist das nicht die Dauer-Skala, die steht in meta.json → bau.werte.

**meta.json:**
- steckbrief: beschreibung, warum_es_wirkt, wann_einsetzen, **wann_nicht** (immer lesen), varianten (Textliste möglicher Spielarten, nicht die umschaltbaren Demo-Varianten), umsetzung, mobil, reduzierte_bewegung, barrierefreiheit.
- messwerte: easing, dauer_ms, stagger_ms, distanz, sonstiges, herkunft (beobachtet = an echter Seite abgelesen, typisch = Erfahrungswert), quelle. kurve: gleiche Werte als CSS.
- gesehen_bei[]: Belege mit url, art und beobachtung. belegstatus (berechnet aus gesehen_bei): belegt (mindestens 2 verschiedene Websites), teilbelegt (1), quellenbelegt (keine Website, aber Norm, Hersteller-Doku, Fachartikel oder Tutorial, typisch bei Barrierefreiheit und Plattform-Neuheiten), unbelegt (nichts).
- bau: werte (die Werte der Demo), varianten[] (nur bei Demos mit Umschalter: id, name, **wann**, werte), ausloeser, touch, reduziert, abhaengigkeiten, notiz (die erfundene Welt der Demo; Namen und Texte daraus nie übernehmen).
- bau.werte richtig lesen: Schlüssel wie vorfuehrung, vorfuehr_zeiger oder „Runde 9,9 s“ steuern nur die Selbstvorführung der Demo und gehören nicht auf die Kundenseite. GSAP-Namen (power3.out, expo.out …) und Kurven der Demo werden durch die Kurve des Animationsstils der Seite ersetzt; übernommen werden Aufbau, Wege, Verhältnisse und Dauern, soweit sie in die Dauer-Skala passen.

**rezepte.json → rezepte[]:** id, name, branche, stimmung (freie Wörter), stimmung_tags (1–3 Wörter aus dem festen Vokabular, passend zu index.json → stimmung), kurz, raum (Abstands-Skala, Sektionsabstand, Dichte), raster (Spalten, Rand, Spalt, maximale Breite), form (Radien, Pille, Linie, Schatten), bildsprache (Licht, Ausschnitt, Personen, Formate, nicht), ton (Anrede, Sätze, Haltung, Tonproben, nicht), hero_aufbau (Raster, Bild, h1, Handlung, Zusatz), referenzen[] (live geprüft), schrift (headline, text, akzent, groessen, techniken, alternative_eigenprojekt, abweichung), farbe (prinzip, beispiel), animationsstil (plus animationsstil_ui, animationsstil_hinweis, wo vorhanden), bewegung (easing = Kurve des Animationsstils; beobachtet = Werte der Referenzen, nur zur Einordnung; dazu dauer_ms, regel, herkunft), hero_beschreibung (Hero und Bedingungen für hero_variante), muster (hero_varianten {muster-id: varianten-id} für die Hero-Muster, Listen je Bereich, darunter button mit ein bis zwei Button-Mustern: das erste für die Haupthandlung, das zweite für Nebenhandlungen oder als Fläche; hero_variante, sektionen[] mit zweck, muster und varianten {muster-id: varianten-id}, wo das Muster Demo-Varianten hat), **signatur**, **nicht_verwenden** (Freitext; in rezept.json zusätzlich nicht_verwenden_ids mit ids und Grund zum Filtern), optional (Muster der Priorität F, nur als Zusatz), regeln, template_tauglich (template_variante, wo nur eine abgespeckte Fassung taugt), varianten (Rezept-Varianten für Nachbarbranchen, z. B. Sportverein oder kleine Kanzlei: name, sektionen, weglassen, muster_zusatz, hinweis), aufwand, leistung, offen (bekannte Lücken), url, alle_muster[] (jedes Muster mit Rolle, demo und meta-Adresse; wo festgelegt auch variante und demo_url mit ?v=). Dazu basis: muster und regeln, die für jedes Rezept gelten, ohne dort genannt zu sein.

**schriften.json:** schriften[] (id, name, lizenz, klassifikation, achsen, rolle, passt_zu_branchen, ersetzt_kommerziell, **template_ok**, datei = Adresse der selbst gehosteten Datei unter /assets/fonts oder null, dann für das Projekt selbst besorgen), paarungen[] (headline, text, akzent, groessen_tipp, template_ok), claude_verbotsliste[] (schrift, warum, statt_dessen), lizenz_klaerung.

## 4. Vorgehen beim Bau einer Website

1. **Auftrag klären:** Branche, Zielgruppe, Hauptziel der Seite (Anfrage, Termin, Kauf, Spende, Mitgliedschaft, Information), Umfang (Onepager oder mehrere Seiten), Zahl der Standorte, vorhandenes Material (eigene Fotos, eigenes Video), Einsatzfall Template oder Eigenprojekt, Pflichtangaben der Branche (Abschnitt 8a). Außerdem: Schließt die Seite Verträge mit Verbrauchern (Shop, Abo, Kurs, Mitgliedschaft)? Zeigt sie Bewertungen von Google oder anderen Plattformen? Gibt es einen Chatbot oder KI-Bilder?
2. **Rezept wählen:** in rezepte-uebersicht.json nach branche, begriffe, ziele und stimmung suchen, dann rezepte/<id>/rezept.json und bauplan.txt laden. Passt keins genau, das nächstliegende nehmen und die Abweichung notieren. kurz, regeln, nicht_verwenden, varianten und offen vollständig lesen.
   - **Rezept-Variante:** Passt eine Variante aus varianten (z. B. „Sportverein“ bei verein-nonprofit-wirkung, „Rösterei / Café mit Online-Shop“ bei gastro-warm-appetitlich), gelten ihre sektionen, weglassen und muster_zusatz. Schrift, Farbe, Animationsstil und Signatur bleiben die des Rezepts. Der hinweis der Variante gilt zusätzlich.
   - **Zwei Rezepte passen halb** und keine Rezept-Variante deckt das ab: Schrift, Farbe, Animationsstil und Signatur kommen aus genau einem Rezept. Einzelne Sektionen samt Mustern dürfen aus dem zweiten geliehen werden, dessen nicht_verwenden gilt dann zusätzlich. Signatur-Muster des zweiten Rezepts nicht übernehmen, sie gehören ihm allein.
   - **Onepager:** Sektionen des Rezepts auf das Hauptziel kürzen, Reihenfolge beibehalten, Unterseiten-Sektionen (Detailseite, Exposé, Produktdetail, Archiv) als kompakte Variante oder Link. vt-cross-document-mpa und sofort-navigation-vorladen entfallen, mega-footer-sitemap ebenso; Navigation als Ankerliste mit aktivem Abschnitt, ohne Smooth-Scroll-Bibliothek. Ein Onepager mit Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit) oder einzelnen Leistungsseiten ist eine kleine Mehrseiten-Website: vt-cross-document-mpa ja, Speculation Rules erst ab mehreren Inhaltsseiten. Leistungsseiten führen per Link mit Vorauswahl (z. B. #anfrage?leistung=bad) zur Anfrage des Onepagers.
3. **Animationsstil festlegen:** tokens.css des Rezepts als erste Datei der Seite übernehmen (Schriftpfade anpassen) und nur ihre Variablen verwenden (--ease, --ease-ein, --ease-aus, --dauer-*, --stagger, --aus-faktor; für UI --ui-*). Sie enthält den animationsstil des Rezepts (ein Muster der Kategorie animationsstile) in einheitlichen Namen; Feinheiten stehen in dessen meta.json (bau.werte, umsetzung, messwerte). rezept.bewegung.easing nennt die Kurve des Stils. bewegung.beobachtet sind Werte der Referenzen und keine zweite Kurve. Aus bewegung gelten dauer_ms und regel als Rahmen. animationsstil_hinweis lesen, wo vorhanden. Gibt es animationsstil_ui, gilt er für Menüs, Formulare und Buchungsstrecken. Fehlt er und schließt der Stil UI in wann_nicht aus (token-editorial-langsam, token-kinetisch-inout, token-luxus-weich; token-federnd-verspielt bei großen Flächen; token-brutal-hart bei Formularen, Verträgen und Buchung), token-toggle-asymmetrisch als UI-Stil nehmen und das nennen.
3a. **Raum, Raster, Form, Bild, Ton:** Abstände, Raster und Radien nur aus tokens.css (--raum-*, --raster-*, --radius-*), nicht aus Framework-Standards. Den Hero nach hero_aufbau bauen. Bilder nach bildsprache auswählen oder beim Kunden anfragen. Texte nach ton schreiben (Anrede, Satzlänge, verbotene Floskeln); die Tonproben zeigen nur den Ton und werden nie übernommen.
4. **Schriften setzen:** schrift.headline, text, akzent und groessen übernehmen. Bei Templates: jede Schrift template_ok = true. alternative_eigenprojekt nur für Eigenprojekte.
5. **Muster je Sektion:** muster.sektionen in der Reihenfolge des Rezepts bauen. Für jedes Muster meta.json lesen (wann_nicht, mobil, reduzierte_bewegung, barrierefreiheit). Ist demo = true, die Demo öffnen und ihre bau.werte übernehmen, übersetzt in die Tokens der Seite (Abschnitt 3: Vorführwerte weglassen, Kurven ersetzen). Farben, Schriften und Namen der Demo sind Beispiele ihrer erfundenen Welt (das Orange #ff5a1f etwa steht in vielen Demos); auf der Seite gelten Marke und Rezept. Hat das Muster Demo-Varianten, gilt die Variante aus sektionen[].varianten (z. B. wochen-kursplan: studio); alle_muster → demo_url öffnet sie direkt. Nennt das Rezept keine, die Variante nach „wann“ wählen. Die gewählte Variante im Ergebnis nennen. Die signatur-Muster sind Pflicht, sie machen das Rezept unterscheidbar. hero_variante nur, wenn die Bedingung in hero_beschreibung erfüllt ist (C5, C6: Video nur mit eigenem Footage, Prompt-Feld nur mit echter Funktion), sonst Foto-Hero.
   - **Foto-Hero:** nach foto-hero bauen, in der Variante aus muster.hero_varianten bzw. passend zu hero_aufbau (randlos-unten-links, split-randabfallend, inset-rahmen, passepartout, bildunterschrift). Bei wenigen oder kleinen Fotos passepartout statt randlos. Trägt der Name des Hauses die Seite, foto-hero-wortmarke (gestapelt, im-bild); gehören Buchung, Öffnungsstatus oder mehrere Standorte in den ersten Blick, foto-hero-mit-leiste (leiste, karte, weiche). Nie: zentrierter Satz mit zwei Knöpfen auf dunklem Verlauf über dem ganzen Bild.
   - **Vorrang:** Onepager-Regeln (oben) und nicht_verwenden des Rezepts > wann_nicht des Musters > Sektionsliste des Rezepts > kombinierbar_mit > Demo. Strengere regeln des Rezepts (z. B. „Einblendungen höchstens 8 px plus Deckkraft“) gehen den allgemeinen Regeln in Abschnitt 5 und den Demo-Werten vor; zeigt eine Demo-Variante mehr Bewegung, als das Rezept erlaubt, die ruhige Fassung bauen. Felder des Rezepts (schrift.groessen, bewegung.dauer_ms, farbe) gehen tokens.css vor; tokens.css ist der Startpunkt, kein Ersatz für das Rezept. kombinierbar_mit nennt teils Muster, die das Rezept ausschließt. Manche Demos bieten Bibliotheken an, die das Rezept verbietet (editorial-magazin-layout hat Lenis als Schalter, standardmäßig aus): dann ausgeschaltet lassen bzw. ohne diesen Teil bauen.
   - **Bedingte Muster:** Manche Sektionen passen nur unter Bedingungen, die im wann_nicht stehen (standortfinder-liste erst ab zwei Standorten, buchungsleiste-datumsbereich nur für Zimmer und Zeiträume, daten-scrollytelling nicht vor dem Spenden- oder Kaufknopf, stapelkarten und bento-grid-interaktiv nur mit echtem, ungleichem Inhalt). Ähnliche Bausteine trennen: wochen-kursplan für wiederkehrende Kurse, programm-kalender für Einzeltermine; bewertungsprofil-mit-echtheitshinweis für Google- und Plattform-Bewertungen, bewertungen-verteilung nur für eigene, geprüfte Bewertungen. Trifft die Bedingung nicht zu, ersetzen und das nennen.
   - **Priorität F** (Plattform-Experimente, im Rezept unter optional, z. B. agentenformular-webmcp, rive-datenbindung, text-um-form, daten-scrollytelling): nur als Zusatz, die Seite muss ohne sie vollständig funktionieren.
   - **Buttons:** muster.button des Rezepts gibt die Button-Gestalt vor. Label-Effekte (text-roll-hover, fuellung-vom-eintrittspunkt) lassen sich mit einer Gestalt kombinieren, sie ersetzen sie nicht. Das erste Muster gilt für die Haupthandlung (Anfrage, Termin, Kauf), das zweite für Nebenhandlungen. Einen Button-Stil pro Seite, keine Mischung aus Glas, 3D-Taste und Kontur. Steht für das Muster eine Variante in varianten_demo (z. B. verlaufs-rahmen: button), gilt sie. Welche Gestalt zu welcher Aufgabe passt, zeigt button-system-uebersicht. Zustände (Hover, Fokus, Druck, gesperrt, Laden, Erfolg) baut button-zustaende, egal welche Gestalt.
   - **Karussells:** die Reihe nach css-native-karussell, Steuerung und Anzeige nach karussell-steuerung (Zähler statt Punkte, Fortschrittsleiste, Vorschaubilder, Sprung-URL, Autoplay nur mit Restzeit und Pause-Knopf). Soll am Desktop ein Raster stehen und nur das Telefon wischen, raster-zu-wischreihe. Höchstens 5 Folien, auf dem Telefon kein Autoplay. Bibliotheken wie Swiper und Embla halten bei Hover und Fokus standardmäßig nicht an: das und einen Pause-Knopf aktiv setzen.
   - **Leistungsseiten:** Jede Leistung, die eine eigene Unterseite bekommt, folgt leistungsseite-antwort-zuerst (Leistung und Ort als H1, darunter die Antwort in wenigen Sätzen).
6. **Basis einbauen:** alle Muster aus rezepte.json → basis.muster (derzeit 15: 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). vt-cross-document-mpa und sofort-navigation-vorladen nur bei mehreren Seiten. firmendaten-strukturiert ist die eine Quelle für Kontaktblock, Öffnungszeiten und JSON-LD. Ohne Build-Schritt (statische Seite) die Daten an allen Stellen von Hand gleich halten und die Stellen im Code markieren. Sieht das Rezept keine eigene Sektion für Kontakt/Anfrage oder Anfahrt vor, obwohl es einen Ort oder eine Anfrage gibt, kontakt-anfrage-formular bzw. karte-zwei-klick ergänzen. Bedingte Regeln aus basis.regeln: Online-Verträge mit Verbrauchern brauchen widerruf-und-kuendigung-schaltflaeche, Bewertungen von Plattformen brauchen bewertungsprofil-mit-echtheitshinweis. Werbung mit Raten, Finanzierung oder „später bezahlen“ braucht finanzierung-pflichtangaben (ab 20.11.2026). Verkauf von Waren an Verbraucher braucht eu-gewaehrleistungshinweis (seit 27.09.2026).
7. **Echte Vorbilder ansehen (lokal):** Ist der Ordner verbunden, mit fundus-bilder/suche.py 6 bis 12 Referenzen zur Branche und Stimmung suchen und die Bilder wirklich ansehen. Daraus Raster, Bildsprache und Proportionen ableiten, nie Inhalte übernehmen. Fehlen suche.py oder inspiration.json, das sagen und den Schritt auslassen.
8. **Regeln prüfen:** Rezept-regeln, basis.regeln, Anti-Generik-Regeln (Abschnitt 5), Barrierefreiheit und Leistung (Abschnitt 8) und Pflichtangaben (Abschnitt 8a).
9. **Belege ansehen:** referenzen[] des Rezepts und gesehen_bei[] der Signatur-Muster öffnen. Messwerte mit herkunft = beobachtet bevorzugen. Unbelegte Muster zurückhaltend einsetzen.
10. **Checkliste** (Abschnitt 12) vor der Abgabe abarbeiten.

## 5. Anti-Generik-Regeln

"Messung" = Browser-Messung von 23 Seiten (messungen.json).

### A. Schrift

**A1 Verbotsliste:** keine der 38 Reflexschriften aus schriften.json → claude_verbotsliste als Haupt- oder Textschrift. Prüfung: font-family im CSS gegen die Liste. Ersatz in der Reihenfolge der Empfehlung. Für Templates die erste id mit template_ok nehmen: satoshi, switzer, general-sans, cabinet-grotesk, panchang, supreme, ranade, boska und sentient sind ITF und scheiden dort aus (Abschnitt 7). geist, onest und schibsted-grotesk stehen zugleich auf der Beobachtungsliste (A2):

| Verboten | Ersatz |
|---|---|
| Inter | hanken-grotesk, switzer, instrument-sans, geist |
| Roboto | hanken-grotesk, tiktok-sans, zalando-sans |
| Open Sans | atkinson-hyperlegible-next, hanken-grotesk, source-serif-4 |
| Lato | ranade, hanken-grotesk |
| Poppins | satoshi, general-sans, google-sans-flex |
| Montserrat | archivo, special-gothic, cabinet-grotesk |
| DM Sans | host-grotesk, bricolage-grotesque, supreme |
| Space Grotesk | familjen-grotesk, funnel-display, host-grotesk |
| Playfair Display | gloock, bodoni-moda, boska |
| Manrope | geist, hanken-grotesk, onest |
| Plus Jakarta Sans | satoshi, schibsted-grotesk |
| Outfit | google-sans-flex, general-sans |
| Syne | panchang, strichpunkt-sans, cabinet-grotesk |
| Clash Display | cabinet-grotesk, funnel-display, strichpunkt-sans |
| Raleway | switzer, instrument-sans |
| Nunito | google-sans-flex, bagel-fat-one |
| Work Sans | hanken-grotesk, schibsted-grotesk |
| Bebas Neue | big-shoulders, six-caps, special-gothic |
| Oswald | big-shoulders, archivo |
| Figtree | host-grotesk, atkinson-hyperlegible-next |
| Cormorant Garamond | eb-garamond, bodoni-moda, newsreader |
| Lora | newsreader, literata, sentient |
| Dancing Script | mrs-saint-delafield, ballet, shantell-sans |
| Pacifico | shrikhand, bagel-fat-one, shantell-sans |
| Lobster | shrikhand, imperial-script |
| Great Vibes | ballet, imperial-script |
| Caveat | shantell-sans, playwrite-de-grund |
| Satisfy | mrs-saint-delafield, ballet |
| Press Start 2P | bitcount, geist-pixel, micro-5 |
| VT323 | geist-pixel, doto, datatype |
| Pixelify Sans | bitcount, jersey-15, geist-pixel |
| Urbanist | google-sans-flex, host-grotesk |
| Sora | funnel-display, host-grotesk |
| Lexend | atkinson-hyperlegible-next, hanken-grotesk |
| Kanit | big-shoulders, archivo |
| Rubik | google-sans-flex, familjen-grotesk |
| DM Serif Display | gloock, young-serif, instrument-serif |
| Cinzel | bodoni-moda, libre-caslon-display |

- **A2 Beobachtungsliste:** geist, eb-garamond, fraunces, onest, schibsted-grotesk und jetbrains-mono sind erlaubt, aber nie als einzige Schrift einer Seite. Die Mono derselben Familie (geist + geist-mono) zählt als zweite Stimme, wenn sie sichtbar eine eigene Rolle hat (Labels, Zahlen, Code).
- **A3 Riesenschrift eng setzen:** Headlines ab etwa 4rem mit negativer Laufweite (−0.02 bis −0.05em) und Zeilenabstand 0.85 bis 1.0, je größer, desto enger. Serifen und Text-Antiquas vertragen weniger: −0.01 bis −0.02em und Zeilenabstand bis 1.05; nennt das Rezept einen Wert, gilt der. In schmalen Hero-Spalten die h1 deckeln, damit lange deutsche Wörter nicht überlaufen: font-size: min(clamp(…), 12cqi) mit container-type auf der Spalte. Messung: Vercel h1 −0,06em, Basement −0,04em, Evervault −0,02em. Muster headline-laufweite-zeilenabstand.
- **A4 Mono als Label-Schrift:** Rubriken, Daten, Zähler und Meta in einer Mono, 0.7 bis 0.8rem, Versal, +0.06 bis +0.14em. Messung: 9 von 23 Seiten kombinieren Grotesk und Mono. Muster mono-labels-versal. Nur wenn das Rezept eine Mono als schrift.akzent nennt (derzeit kreativstudio, fotograf, mode, kultur, saas, fitness, musik, weingut; rezepte.json → schrift.akzent ist maßgeblich); die übrigen Rezepte setzen Labels in der Textschrift (Versal, Laufweite, Tabellenziffern) und bekommen keine zusätzliche Mono.
- **A5 Hierarchie über Größe, nicht über Fett:** höchstens 2 bis 3 Gewichte je Familie (eine-familie-wenig-gewichte).
- **A6 Tabellenziffern** für Preise, Daten, Zähler (font-variant-numeric: tabular-nums).
- **A7 Lesesatz:** Fließtext 17 bis 19px, 55 bis 70ch, Zeilenhöhe 1.5 bis 1.7, text-wrap: balance für Headlines und pretty für Text.

### B. Bewegung

- **B1 Kein ease 0.3s als Standard für sichtbare Bewegung.** Award-Studios nutzen steile Out-Kurven (Expo, Quart, Quint) mit 0,8 bis 1,6 s, Produktseiten Material-Standard mit 0,1 bis 0,2 s. Das ist laut Messung der größte Unterschied zu generischem KI-Code.
- **B2 Eine Kurve, eine Dauer-Skala pro Seite.** Messung: Lando Norris 118-mal dieselbe Kurve bei 0,75 s, Obys 80-mal, 'kin 54-mal bei 1,2 s. Eine zweite Kurve nur als Paar für das Schließen (B5).
- **B3 Kein Fade-up für alles.** Reveals gezielt (Hero, Bilder, Kapitelanfänge). Text, Formulare und Listen stehen sofort.
- **B4 clip-path statt Opacity-Fade** für Bild- und Text-Reveals. Messung: clip-path ist das Reveal-Werkzeug Nr. 1. Muster clip-path-bild-reveal, split-mask-reveal, clip-path-reveal-seite.
- **B5 Schließen schneller als Öffnen** (etwa 65 bis 70 % der Öffnungsdauer, Anlauf-Kurve). Muster token-toggle-asymmetrisch.
- **B6 Überschwingen nur als Akzent** auf kleinen Elementen (Buttons, Badges, Erfolgsmoment), nie auf Opazität, großen Flächen oder Formularen.
- **B7 Keine Preloader ohne Grund.** Kein prozent-zaehler vor normalen Seiten. Viele Rezepte schließen ihn unter nicht_verwenden aus.
- **B8 Kein Smooth-Scroll auf Leseseiten.** Die meisten Rezepte schließen smooth-scroll-lenis unter nicht_verwenden aus. Lenis nur, wenn das Rezept es nennt.
- **B9 Keine eigenen Cursor als Standard.** Messung: 0 von 23 Seiten blenden den Zeiger aus.

### C. Layout, Farbe, Material

- **C1 Kein Schema "Hero + drei Icon-Karten + Testimonials + CTA".** Sektionen kommen aus muster.sektionen des Rezepts, in dessen Reihenfolge und mit dessen Signatur.
- **C2 Kein Lila- oder Aurora-Verlauf.** Er steht unter Anti-Muster. mesh-gradient-shader ist abklingend und in mehreren Rezepten ausgeschlossen. Farbe kommt aus Fotos, Material und einem Markenton.
- **C3 Ein Signalton:** genau eine Akzentfarbe für die Haupthandlung. Alles andere aus Graustufen, Material oder Marke.
- **C4 Höchstens ein Material-Effekt pro Ansicht** (Glow, Verlaufsrahmen, Raster, Textur, Glas). Messung: kein Award-Studio setzt flächig auf Glas.
- **C5 Video-Hero nur mit eigenem Footage.** Bei KMU-Rezepten ist der Foto-Hero Standard.
- **C6 Kein Fake-Eingabefeld:** prompt-hero-eingabefeld nur mit echter Funktion.
- **C7 Warme Neutraltöne statt #FFF und #000,** wo das Rezept sie vorgibt.
- **C8 Echte Inhalte:** keine hochgezählten Fantasiezahlen, keine anonymen Fünf-Sterne-Zitate, keine Deko-Siegel. Fremde Bewertungen nur mit Echtheitshinweis (bewertungsprofil-mit-echtheitshinweis). Keine pauschalen Umweltaussagen ohne Nachweis. Fotorealistische KI-Bilder kennzeichnen (Abschnitt 8a).
- **C9 Buttons als System:** genau eine Primär-Gestalt und eine Sekundär-Gestalt pro Seite, aus muster.button. Trefferfläche mindestens 44 × 44 px, Fokus sichtbar, Text ohne Glas-Unschärfe mindestens 4,5:1. Glas-Button nur über ruhigem Bild- oder Farbgrund und mit Fallback ohne backdrop-filter (prefers-reduced-transparency). Kein Glanz, Lichtlauf oder Puls im Ruhezustand: Effekte erst bei Hover, Fokus oder Druck. Neumorph-Buttons gibt es bewusst nicht (zu wenig Kontrast). Die erste id in muster.button ist eine Gestalt (Form, Fläche); Verhalten wie druck-feedback oder icon-squash-stretch steht unter mikro und gilt für jede Gestalt. Glas nie als einzige Gestalt: auf hellen Flächen und in Formularen gilt die andere. Erreicht die Signalfarbe auf dem Grund keine 3:1, ist der Fokusring in Textfarbe (tokens.css: --fokus-ring).
- **C10 Experimentelle Hintergründe** (fluessig-marmor-hintergrund, atmosphaere-partikel, webgl-fluid-cursor, mesh-gradient-shader): nur in Rezepten mit experimenteller, lauter oder filmischer Stimmung und nur, wenn das Rezept sie nicht ausschließt. Farben aus der Marke, nie Pastell-Lila, Pink und Cyan als Standard (das ist der Aurora-Verlauf aus C2). Nie hinter Fließtext, nie neben einem zweiten Material-Effekt, immer mit Standbild für reduzierte Bewegung und schwache Geräte und mit Pause-Knopf, wenn er länger als 5 s läuft.
- **C11 Keine Framework-Maße:** keine 16/24/32-Standardabstände, kein rounded-2xl, kein shadow-lg, keine Drei-Spalten-Karten mit gleichem Radius. Raum, Raster und Form kommen aus dem Rezept (tokens.css).
- **C12 Kein Werbesprech:** keine Sätze wie „Ihr kompetenter Partner“, „Qualität, die überzeugt“, „Wir sind Ihr Partner für …“. Texte folgen rezept.ton; konkrete Leistung, Ort, Zahl, nächster Schritt.
- **C13 Keine Kicker, keine Sektionsnummern:** kein kleines Versal-Label über einer Überschrift (Eyebrow), keine 01/02/03 vor Sektionen, keine Unterzeile unter jeder Überschrift, keine Intro-Absätze, die die Überschrift wiederholen, keine Erklärtexte („Hier finden Sie …“). Versal-Labels nur für dt, Tabellenköpfe, Datenzeilen und Navigation. Richtwert für einen Onepager: höchstens etwa 1.000 bis 1.200 Wörter sichtbarer Text (`werkzeug/fundus/woerter.py`).

## 6. Bewegungs-Grundwerte (gemessen)

Die Kurve wählt man über den Animationsstil, nicht frei.

| Kurve | Name | Seiten | Einsatz |
|---|---|---:|---|
| cubic-bezier(0.16, 1, 0.3, 1) | easeOutExpo | 6/23 | Reveals, Bildmasken, Editorial |
| cubic-bezier(0.165, 0.84, 0.44, 1) | easeOutQuart | 5/23 | Reveals mit weicherem Start, Immobilien-UI 400 ms |
| cubic-bezier(0.4, 0, 0.2, 1) | Material Standard | 4/23 | Produkt-UI, Formulare, SaaS |
| cubic-bezier(0.23, 1, 0.32, 1) | easeOutQuint | 3/23 | steile Out-Kurve für Lern- und Produktseiten |
| cubic-bezier(0.19, 1, 0.22, 1) | easeOutExpo-Variante | 3/23 | wie Expo, Linien- und Unterstreichungs-Hover |
| cubic-bezier(0.215, 0.61, 0.355, 1) | easeOutCubic | 3/23 | kurze UI-Übergänge |
| cubic-bezier(0.65, 0.05, 0, 1) | Snap | 1 | gemessen; token-studio-signatur nutzt 0.625 (Fünf-Stufen-Fassung), 0.65 ist dessen Ein-Token-Variante |
| cubic-bezier(0.76, 0, 0.24, 1) | easeInOutQuart | 1 | Raumwechsel, Slides (token-kinetisch-inout, Variante „kin3“; Demo-Standard ist power4.inOut = cubic-bezier(0.83, 0, 0.17, 1)) |
| cubic-bezier(0.34, 1.56, 0.64, 1) | back.out | Akzent | nur kleine Elemente (token-federnd-verspielt) |

GSAP-Namen in Demos und Messwerten, als CSS (zum Erkennen; auf der Seite gilt trotzdem die Kurve des Stils): power2.out = cubic-bezier(0.33, 1, 0.68, 1) · power3.out = cubic-bezier(0.25, 1, 0.5, 1) · power4.out = cubic-bezier(0.22, 1, 0.36, 1) · expo.out = cubic-bezier(0.16, 1, 0.3, 1) · power3.in = cubic-bezier(0.5, 0, 0.75, 0) · expo.in ≈ cubic-bezier(0.7, 0, 0.84, 0) · power3.inOut = cubic-bezier(0.76, 0, 0.24, 1) · power4.inOut = cubic-bezier(0.83, 0, 0.17, 1) · sine.inOut ≈ cubic-bezier(0.37, 0, 0.63, 1) · sine.out = cubic-bezier(0.61, 1, 0.88, 1) · back.out(1.7) ≈ cubic-bezier(0.34, 1.56, 0.64, 1).

Token-Block am Seitenanfang (Beispiel token-swiss-knackig; Werte immer aus dem gewählten Stil):

    :root {
      --ease-out: cubic-bezier(0.25, 1, 0.5, 1);   /* Eintritt */
      --ease-in: cubic-bezier(0.5, 0, 0.75, 0);    /* Austritt */
      --dur-1: 200ms; --dur-2: 350ms; --dur-3: 500ms; --dur-4: 700ms;
      --stagger: 40ms;
    }
    .panel { transition: transform calc(var(--dur-3) * .7) var(--ease-in); }
    .panel.is-open { transition: transform var(--dur-3) var(--ease-out); }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
      /* Achtung: transition-duration auf * lässt geerbte Eigenschaften (font-size, color) an allen
         Nachfahren mitlaufen. Elemente, deren Größe per JS gemessen wird (eingepasste Wortmarke),
         mit transition: none ausnehmen, sonst misst das Skript den Zwischenstand. */
    }

Dauer-Faustregeln: Hover und Farbe 80 bis 200 ms · UI-Panels 200 bis 350 ms · große UI-Flächen (Akkordeon-Panels, Galerie-Dialog) bis 600 ms, auch bei langsamen Bildstilen · Einblendungen 400 bis 800 ms · Editorial-Reveals 0,8 bis 1,6 s · Rückmeldung auf eine Eingabe (Hover, Druck, Umschalten) nie über 500 ms; Menü-Overlays dürfen als gestaffelte Folge länger laufen, müssen aber sofort bedienbar und unterbrechbar sein · Austritt etwa 65 bis 70 % des Eintritts.

## 7. Schrift und Lizenz

- **Templates (IONOS-Baukasten, Specimens für Kunden):** nur Schriften mit template_ok = true (66 von 81; 33 von 44 Paarungen). Das sind OFL-Schriften.
- **ITF Free Font License** (Fontshare: satoshi, switzer, general-sans, cabinet-grotesk, panchang, supreme, ranade, tanker, boska, sentient, zodiak, gambarino, erode, rowan, melodrama): frei für eigene Websites, selbst gehostet, aber nicht in Template-Editoren oder Baukästen für Dritte, keine Weitergabe der Dateien an Kunden, kein Subsetting. Quelle: schriften.json → lizenz_klaerung (keine Rechtsberatung).
- **OFL-Schriften** dürfen gesubsettet und als Variable-WOFF2 selbst gehostet werden, font-display: swap, nur benötigte Achsen.
- **Rollen beachten:** rolle (Headline, Fließtext, beides, Akzent). Eine Akzentschrift als Headline nur mit Vermerk in schrift.abweichung.
- **Kommerzielle Trendschriften** (PP Neue Montreal, Suisse Int'l u. a.) sind nur Referenz. Die freie Entsprechung steht in ersetzt_kommerziell.
- **Achsen nutzen:** opsz bei Fraunces, Newsreader, Bodoni Moda, Hedvig Letters Serif; wdth bei Mona Sans, Zalando Sans, Special Gothic.

## 7a. Bilder und Fotos

- **Reihenfolge:** eigene Fotos des Kunden > beauftragte Fotos > Stockfotos von Unsplash als Platzhalter oder für Stimmungsflächen > ruhige Flächen in der richtigen Proportion. Nie KI-Bilder oder Stockfotos als echte Projekte, Teammitglieder, Kundinnen oder Gäste ausgeben (C8).
- **Unsplash:** Lizenz https://unsplash.com/license (frei, auch kommerziell, Nennung nicht Pflicht). Keine Unsplash+-Bilder. Erkennbare Personen nie für Aussagen, Bewertungen oder als Team einsetzen (kein Model-Release garantiert); keine fremden Marken und Logos im Bild. Nachweis je Bild (Fotograf, Foto-Seite) im Projekt ablegen; lokal holt `werkzeug/fundus/fotos.py` Fotos in den richtigen Breiten und schreibt den Nachweis.
- **Auswahl nach rezept.bildsprache:** Licht, Ausschnitt, Personen und Formate aus dem Rezept; ein Bildstil pro Seite (gleiche Farbtemperatur, ähnlicher Kontrast).
- **Technik:** WebP/AVIF mit srcset und sizes (sizes="auto" bei lazy), width und height gegen Layout-Sprünge, LCP-Bild ohne lazy und mit fetchpriority="high", Alternativtext beschreibt den Inhalt für die Seite, dekorative Bilder alt="".

## 7b. Platzhalter (Entwürfe, Starter, fehlendes Material)

- **Bilder:** Fläche im endgültigen Seitenverhältnis (aspect-ratio), ruhig getönt aus der Palette, `role="img"` mit aria-label „Platzhalter: <Motiv>“; nie ein leeres `<img>` oder ein Bild ohne src. Motiv, Format und Suchbegriffe in einer bilder.json festhalten.
- **Daten:** Preise, Bewertungen, Allergene, Kennzahlen, Förderbeträge als sichtbar markierte Platzhalter („Beispiel, vom Kunden prüfen lassen“), nie erfundene Zahlen oder Stimmen als echt.
- **Dienste:** Adressen von Dritten auf `.example`, Telefonnummern nach den Drama Numbers der Bundesnetzagentur (Ziffer 0 nach der Ortsvorwahl). Formulare ohne Server senden nicht und sagen das ehrlich („Noch nicht verbunden: bitte anrufen“).
- **Feiertage:** Öffnungsstatus berücksichtigt feiertage.json des Bundeslands; Heiligabend, Silvester und Betriebsferien als Sonderzeiten.

## 8. Barrierefreiheit und Leistung

### Barrierefreiheit

- **prefers-reduced-motion:** jede Bewegung hat einen Ersatz (Feld reduzierte_bewegung des Musters). Reveals werden zu reiner Opazität unter 200 ms oder entfallen; Parallax, Smooth-Scroll und Autoplay sind aus.
- **Automatisch bewegte Inhalte** (Laufband, Wortwechsel, Autoplay) nie für wichtige Information, immer pausierbar (WCAG 2.2.2). Was sich länger als 5 s bewegt, bekommt einen sichtbaren Pause-Knopf.
- **Inhalt ohne Animation sichtbar:** scroll-getriebene Animationen hinter @supports (animation-timeline: view()). Seit Firefox 159 (27.10.2026) laufen sie in allen drei Engines; der Schutz bleibt für ältere Browser.
- **Touch:** Hover-Effekte nur unter @media (hover: hover) and (pointer: fine), auf Touch sichtbare Alternativen. Touch-Ziele mindestens 44 px.
- **Kontrast** mindestens 4.5:1 für Text, auch für Meta- und Labelgrau auf jedem Grund, auf dem es steht. Farbe nie als einzige Unterscheidung.
- **Kein scroll-behavior: smooth global:** Es verzögert Fokus-Sprünge (Sprunglink, Fehlerzusammenfassung). Weiches Scrollen nur per JS für Anker-Links und nur bei prefers-reduced-motion: no-preference.
- **Fokus:** sichtbare Fokus-Ringe (outline: none bei :focus-visible nie ohne Ersatz), Fokus-Management bei Overlays und Drawern. Eingeklappte oder unsichtbare Bedienelemente bekommen inert bzw. hidden.
- **Muster der Kategorie zugang (Priorität E):** Was in basis.muster steht (index.json → in_basis), gehört auf jede Seite: unter anderem fokus-stil-system, sprunglinks-landmarken, bewegung-pausieren-schalter, dialog-modal-nativ, zoom-und-textabstand-robust (200 % Zoom, 320 px Breite, Textabstände nach WCAG 1.4.12 ohne Abschneiden) und kontrastmodus-forced-colors (Windows-Kontrastmodus). Nach Bedarf: formular-fehlerzusammenfassung ab etwa fünf Feldern; tabs-pfeiltasten-focusgroup für Tabs; reading-flow-reihenfolge, wenn Raster die Lesereihenfolge umstellen; barrierefreiheit-seite als eigene Seite (Variante „bfsg“ für Shop, Buchung und Termin online, „erklaerung“ sonst).
- **Demos:** Alle Demos erfüllen Regel 14 des Demo-Vertrags (werkzeug/fundus/GERUEST.md, nur lokal): Pause-Knopf ab 5 s Bewegung, inert für Verstecktes, kein waagerechtes Scrollen bei 320 px, Textabstände ohne Abschneiden, Kontrast 4,5:1, sichtbarer Fokus, Rahmen im Kontrastmodus. Diese Teile beim Nachbau mit übernehmen.
- **BFSG:** Seit 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz für viele Dienstleistungen im elektronischen Geschäftsverkehr (Shop, Online-Buchung, Termin, Ticket). Kleinstunternehmen sind bei Dienstleistungen ausgenommen. Ob es greift, entscheidet der Kunde (keine Rechtsberatung); gebaut wird ohnehin nach WCAG 2.2 AA.

### Leistung

- **Core Web Vitals als Prüfstufe:** LCP höchstens 2,5 s, INP höchstens 200 ms, CLS höchstens 0,1. Das sind die Werte von Google. Meldungen über strengere Werte (etwa INP 150 ms) oder neue Metriken haben keine Google-Quelle und gelten nicht.
- **LCP:** Hero-Bild mit fetchpriority="high", nie lazy, AVIF oder WebP mit srcset, feste aspect-ratio. Kein Preloader vor dem LCP-Element.
- **Nachgeladene Bilder:** loading="lazy" mit sizes="auto" (Baseline seit September 2026). Breite und Höhe oder aspect-ratio angeben, damit nichts springt (CLS).
- **INP:** Klicks und Eingaben antworten sofort. Risiken im Fundus sind Scroll-Handler, Lenis, große GSAP-Timelines und lange Bewertungs- oder Filterlisten. Schwere Arbeit nach dem Klick aufteilen oder verschieben.
- **Speculation Rules** (sofort-navigation-vorladen, Grundausstattung, nur bei mehreren Seiten): prefetch für interne Links, prerender für 1 bis 3 Hauptwege, beide mit eagerness moderate. Ausschließen: Abmelden, Warenkorb, Danke-Seiten nach Formularen, Bezahlseiten, Consent-Links. Statistik, Autoplay und Chat erst nach prerenderingchange starten. Nur Chromium nutzt die Regeln, andere Browser ignorieren sie folgenlos. Sie ersetzen keine schnelle Seite.
- **Drittanbieter** (Karten, Buchung, Video, Social Feeds) erst nach Einwilligung oder Klick: termin-buchung-zwei-klick, karte-zwei-klick (Variante „social“ für Instagram), consent-banner-gestaltet.
- **JS sparsam:** native Mittel zuerst (View Transitions, Popover, details, Scroll-Snap, @starting-style, Scroll-Driven Animations). GSAP, Lenis und Three.js nur, wenn das Rezept oder das Muster sie nennt und nicht_verwenden sie nicht ausschließt. Die meisten Rezepte schließen Lenis aus; eine Demo, die ihn als Schalter anbietet, ändert daran nichts.
- **Strukturierte Daten:** über firmendaten-strukturiert aus einer Quelle (firma.json): Kontaktblock, Zeiten samt Sonderzeiten und LocalBusiness-JSON-LD. Markup nur für sichtbare Inhalte, keine Bewertungssterne über das eigene Unternehmen, kein FAQPage-Markup für Rich Results (Google zeigt sie seit 07.05.2026 nicht mehr). Markup ist eine Empfehlung, keine Garantie für Rankings.
- **Auffindbarkeit:** Leistungsseiten nach leistungsseite-antwort-zuerst. Eine llms.txt ist optional und hat bei Google keine belegte Wirkung. Für AI Overviews und AI Mode verlangt Google keine neuen Dateien.

## 8a. Pflichtangaben und Recht

Claude schreibt keine Rechtstexte. Es baut die Stellen dafür ein (Footer-Links, Seiten, Hinweise am Formular) und kennzeichnet Inhalte als „vom Kunden bzw. rechtlich zu prüfen“. Keine Rechtsberatung. Stand der Punkte: 03.11.2026.

- **Jede Seite:** Impressum (§ 5 DDG) und Datenschutzerklärung, vom Footer und mobil erreichbar; Formulare mit Hinweis auf die Datenschutzerklärung, nur nötige Pflichtfelder; Fotos von Personen nur mit Einwilligung, Kinder und Jugendliche besonders zurückhaltend; nur Bilder und Logos mit Nutzungsrecht (logo-wand-social-proof: Erlaubnis nötig).
- **Consent:** nur, wo einwilligungspflichtige Dienste laufen (§ 25 TDDDG, consent-banner-gestaltet). Der Digital Omnibus ändert daran vorerst nichts: § 25 TDDDG gilt bis zum Inkrafttreten unverändert. Der Rat hat am 21.10.2026 seine Position festgelegt, in Kraft frühestens 2027. Kategorien deshalb konfigurierbar bauen.
- **Online-Verträge mit Verbrauchern** (Shop, Abo, Kurs, Mitgliedschaft, Online-Anmeldung): Widerrufs-Button „Vertrag widerrufen“ mit dem zweiten Schritt „Widerruf bestätigen“ (§ 356a BGB, seit 19.06.2026). Bei Dauerverträgen getrennt davon der Kündigungs-Button „Verträge hier kündigen“ mit „jetzt kündigen“ (§ 312k BGB). Beide ohne Login dauerhaft im Footer und im mobilen Menü. Auf die Bestätigungsseite gehören keine Halteangebote wie Pause oder Rabatt (BGH 16.07.2026, I ZR 200/25). Muster: widerruf-und-kuendigung-schaltflaeche, Variante „richtig“; die Varianten „halteangebot“ und „versteckt“ zeigen nur Fehler.
- **Bewertungen:** Werden Google- oder Plattform-Bewertungen auf der eigenen Seite gezeigt, steht der Echtheitshinweis direkt an den Bewertungen: ob und wie geprüft wird, auch „keine Prüfung“ (§ 5b Abs. 3 UWG; OLG Frankfurt 19.05.2026, 6 U 305/25). Ein aufklappbarer Hinweis oder der Link zur Plattform reicht nicht. Muster: bewertungsprofil-mit-echtheitshinweis; bewertungen-verteilung nur für eigene, geprüfte Bewertungen.
- **Umweltaussagen** (seit 27.09.2026): keine pauschalen Aussagen wie „umweltfreundlich“ oder „nachhaltig“ ohne Nachweis, keine Klimaneutralität eines Produkts durch Kompensation, keine Eigensiegel ohne Zertifizierung (UWG Anhang Nr. 2a): Siegel nur staatlich oder aus einem Zertifizierungssystem, gezeigt mit Träger, Nummer, Gültigkeit und Link zu den Kriterien (logo-wand-social-proof, Variante „siegel-nachweis“). Auch kreistext-siegel-rotierend und erfundene Auszeichnungen tragen keine Umwelt-, Bio- oder Sozialaussage. Kein CO₂-Wert pro Seitenaufruf im Kolophon (kolophon-footer: Seitengewicht in KiB ja, Umweltbezug nein). Betrifft vor allem Handwerk, Shop, Verein, Gastro und Hotel.
- **KI** (Art. 50 KI-VO, seit 02.08.2026): Chatbots und KI-Funktionen direkt beim Start kennzeichnen, nicht nur in Impressum oder Datenschutz (ki-streaming-text-denkindikator, Variante „fragen“ für ein Frag-uns-Feld; command-palette-und-ki-suche; prompt-hero-eingabefeld). Fotorealistische KI-Bilder, die echt wirken könnten, per Bildunterschrift kennzeichnen. Illustrationen und leichte Bildbearbeitung sind ausgenommen.
- **Shop und Kaufbox** (d2c, mode, gastro-Shop, luxus): Gesamtpreis inkl. MwSt., Versandkosten, Grundpreis je kg/l, wo vorgeschrieben (Kaffee, Kosmetik), Lieferzeit, Bestellknopf „zahlungspflichtig bestellen“, Widerrufsbelehrung, AGB, Zahlungsarten; bei Lebensmitteln im Fernabsatz die Pflichtangaben (Zutaten, Allergene, Hersteller) vor dem Kauf. Produktsicherheit (GPSR Art. 19): Hersteller oder Einführer mit Post- und E-Mail-Adresse, Produktkennung, Abbildung und Warnhinweise schon im Angebot. Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV). Muster: produkt-kaufbox-varianten (Akkordeon „Hersteller und Sicherheit“), warenkorb-drawer (dort stehen Grundpreis und MwSt. als Werte).
- **Kreditwerbung** (ab 20.11.2026, Verbraucherkreditrichtlinie (EU) 2023/2225): Wer mit Rate, Zins, „0 %“, Ratenzahlung, Leasing oder „später bezahlen“ wirbt, zeigt direkt dabei effektiven Jahreszins (mindestens so groß wie die Rate), Sollzins, Nettodarlehensbetrag und Laufzeit, dazu den Warnhinweis „Achtung! Kreditaufnahme kostet Geld.“ als eigene Zeile, nicht im Footer oder hinter einem Link. Das repräsentative Beispiel darf aufklappen. Gilt auch für Banner von Zahlungsdienstleistern. Muster: finanzierung-pflichtangaben (fahrzeugkarte, kaufbox, rechner). Eigene kostenlose Stundung bis 50 Tage ist ausgenommen; Einzelfälle (Fahrschule, Kurse) vom Kunden prüfen lassen.
- **Gewährleistung und Garantie** (seit 27.09.2026, Art. 246 und 246a EGBGB): Der harmonisierte EU-Hinweis zur gesetzlichen Gewährleistung steht bei jedem Warenverkauf an Verbraucher, online mindestens als Footer-Link, sicherer vollständig an Produktseite und Checkout, nicht als Mouse-over oder nur in den AGB. Gibt der Hersteller eine kostenlose Haltbarkeitsgarantie über 2 Jahre, steht das Garantie-Label am Produktbild. Nur die amtlichen Vorlagen der EU-Kommission verwenden, nichts daran ändern. Muster: eu-gewaehrleistungshinweis.
- **Reparatur** (seit 23.07.2026, Recht auf Reparatur): Hersteller bestimmter Gerätegruppen (z. B. Waschmaschinen, Kühlgeräte, Smartphones) nennen Richtpreise typischer Reparaturen auf einer frei zugänglichen Seite. Reparaturbetriebe dürfen freiwillig das Europäische Formular für Reparaturinformationen nutzen (30 Tage bindend). Muster: reparatur-richtpreise. Kfz sind nicht erfasst.
- **Online-Streitbeilegung:** Die OS-Plattform der EU ist seit 20.07.2025 eingestellt. Den alten Link aus Impressum, AGB und Footer entfernen.
- **Fahrzeuge** (Autohaus, Werkstatt mit Neuwagen): Sobald Motordaten erscheinen, stehen Energieverbrauch, CO₂-Emissionen und CO₂-Klasse gut lesbar daneben, nicht schwächer als der Angebotstext (Pkw-EnVKV, gilt auch im Internet). Muster: objekt-steckbrief-expose, Variante „fahrzeug“.
- **Gastronomie:** Allergene und Zusatzstoffe auf der Karte (speisekarte-editorial), Preise inkl. MwSt.
- **Gesundheit** (praxis): Das Heilmittelwerbegesetz und das Berufsrecht beschränken Werbung, etwa mit Patientenstimmen, Vorher-nachher-Bildern und Heilversprechen. Patientenstimmen nur echt, sachlich und vom Kunden freigegeben; keine Erfolgsquoten. Notfallhinweis (116 117 / 112) im Footer.
- **Pflege** (pflege): Träger und Vertretungsberechtigte im Impressum, weitere Angaben (z. B. Zulassung durch die Pflegekassen) vom Kunden prüfen lassen. Keine Gesundheitsdaten im Anfrageformular abfragen. „Bei Lebensgefahr: 112“ im Footer.
- **Fitness, Kosmetik, Salon** (fitness, friseur): keine Heil- oder Abnehmversprechen; Gesundheitsangaben nur freiwillig, nie als Pflichtfeld. Beim Friseurhandwerk der Eintrag bei der Handwerkskammer im Impressum.
- **Kanzlei, Steuerberatung, Makler:** Berufs- und Kammerangaben bzw. Erlaubnis (z. B. § 34c GewO) im Impressum, Pflichtangaben im Exposé (siehe Rezept-regeln).
- **Verein:** Vereinsregister und Vertretungsberechtigte im Impressum; Gemeinnützigkeit und Spendenquittung nur mit echtem Bescheid; Mitgliedsantrag mit Beitragsordnung und Einwilligungen. Wird die Mitgliedschaft online abgeschlossen, gilt der Punkt Online-Verträge.
- **Barrierefreiheit:** Erklärung zur Barrierefreiheit (barrierefreiheit-seite), nie „vollständig barrierefrei“ ohne Prüfung.

## 9. Die Rezepte

Ausführlich: rezepte.json und https://cecodesign.de/lab/fundus/rezepte/

Lesehinweise:
- Die Sektionsliste ist das Gerüst einer vollständigen Website. Einzelne Muster darin sind bedingt (siehe wann_nicht und Abschnitt 4, Schritt 5); „(bei mehreren Häusern)“ und ähnliche Zusätze im zweck sind Bedingungen.
- Rezept-Varianten (Feld varianten) decken Nachbarbranchen ab, etwa „Sportverein“ (verein-nonprofit-wirkung), „Verein mit Kursbetrieb“ (fitness-studio-rhythmus), „Rösterei / Café mit Online-Shop“ (gastro-warm-appetitlich) oder die kleine Kanzlei (kanzlei-beratung-souveraen). Erst die Varianten prüfen, dann zwei Rezepte mischen.
- Neu seit 02.11.2026: industrie-b2b-mittelstand, kfz-werkstatt-autohaus, arbeitgeber-karriere (eigenständige Karriereseite; für eine Karriere-Sektion in einem anderen Rezept bleibt stellen-karriere), bestattung-wuerdig, eventlocation-hochzeit, weingut-hofladen-herkunft, musik-kuenstler-buehne. Dazu Rezept-Varianten Ferienwohnung (Hotel), Zahnarzt und Tierarzt (Praxis), Solar und Wärmepumpe (Handwerk), Tattoo-Studio (Salon), Musikschule und Nachhilfe (Kurs).
- musik-kuenstler-buehne ist das Rezept für experimentelle Effekte (Abschnitt 5, C10); dort sind fluessig-marmor-hintergrund, ascii-dither-pixel-stil und kinetische Schrift vorgesehen, nie zwei in einer Ansicht.
- Weitere Lücken stehen im Feld offen. Manche offen-Einträge nennen Varianten als fehlend, die es inzwischen gibt; maßgeblich ist index.json → varianten_demo.

| Rezept | Branche | Headline / Text / Akzent | Animationsstil | Signatur | Template |
|---|---|---|---|---|:---:|
| architektur-ruhiges-raster | Architekturbüro / Planungsbüro / Innenarchitektur | hanken-grotesk / hanken-grotesk / – | token-swiss-knackig | meta-labels-hud-typografie | ja |
| handwerk-werkstatt-klartext | Handwerksbetrieb (Tischlerei/Schreinerei, Elektro, Sanitär/Heizung, Maler) | special-gothic / atkinson-hyperlegible-next / – | token-tech-praezise | vorher-nachher-vergleichsregler | ja |
| fahrschule-freundlich-buchbar | Fahrschule / lokaler Dienstleister mit Online-Buchung (auch Nachhilfe, Kurse) | bricolage-grotesque / atkinson-hyperlegible-next / – | token-federnd-verspielt (UI: token-toggle-asymmetrisch) | svg-pfad-zeichnen-scroll | ja |
| immobilien-diskret-hochwertig | Immobilienmakler / Projektentwickler / Hausverwaltung mit Verkauf | libre-caslon-display / hanken-grotesk / – | token-editorial-langsam (UI: token-toggle-asymmetrisch) | richtungsbewusste-uebergaenge | ja |
| gastro-warm-appetitlich | Restaurant / Café / Bar / Rösterei mit Café | fraunces / commissioner / – | token-editorial-langsam (UI: token-toggle-asymmetrisch) | live-uhr-und-standort | ja |
| boutique-hotel-gastgeber | Hotel / Boutique-Unterkunft / Pension / Ferienapartments | newsreader / mona-sans / – | token-luxus-weich (UI: token-toggle-asymmetrisch) | slideshow-innere-gegenparallaxe | ja |
| kreativstudio-buehne | Kreativstudio, Digitalagentur, Agentur-Portfolio | tiktok-sans / tiktok-sans / dm-mono | token-editorial-langsam (UI: token-toggle-asymmetrisch) | footer-cta-riesen-wortmarke, text-roll-hover | Variante |
| freelancer-stille-visitenkarte | Freelance-Designer, Interaction-Designer, Einzelberater mit Portfolio | host-grotesk / host-grotesk / newsreader | token-tech-praezise | gestaffelte-einblendung | ja |
| fotograf-film-bild-zuerst | Fotografie, Bewegtbild, Regie, Produktionsfirma | instrument-serif / instrument-sans / fragment-mono | token-kinetisch-inout (UI: token-toggle-asymmetrisch) | endlos-scroll-galerie, seitenrand-und-ecken-navigation | ja |
| mode-beauty-kollektion | Mode-Label, Concept Store, Kosmetik und Hautpflege | zalando-sans / zalando-sans / fragment-mono | token-luxus-weich (UI: token-toggle-asymmetrisch) | scroll-naechstes-projekt | ja |
| kultur-programm-haltung | Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus | schibsted-grotesk / atkinson-hyperlegible-next / ibm-plex-mono | token-swiss-knackig | scrollspy-kapitelnavigation | ja |
| luxus-manufaktur-stille | Uhren, Schmuck, Juwelier, Luxus-Manufaktur | bodoni-moda / instrument-sans / – | token-toggle-asymmetrisch | broken-grid-asymmetrisch | ja |
| saas-produkt-praezise | Tech-Startup / SaaS / KI-Produkt / Software-Tool | geist / geist / geist-mono | token-tech-praezise | command-palette-und-ki-suche, produkt-ui-hero-perspektiv-tilt | ja |
| kanzlei-beratung-souveraen | Kanzlei / Steuerberatung / Wirtschaftsprüfung / Unternehmensberatung | newsreader / schibsted-grotesk / – | token-swiss-knackig | initial-letter-initialen | ja |
| praxis-gesundheit-ruhig | Arztpraxis / Zahnarzt / Psychotherapie / Physiotherapie / Gesundheitsangebot | hedvig-letters-serif / google-sans-flex / – | token-tech-praezise | hovercard-interest-invoker | ja |
| kurs-coaching-lernweg | Online-Kurs / Coaching / Akademie / Weiterbildung / Bildungsangebot | bricolage-grotesque / onest / shantell-sans | token-federnd-verspielt (UI: token-toggle-asymmetrisch) | scroll-fortschritt | ja |
| d2c-produkt-zuerst | Onlineshop / D2C-Produktmarke / Manufaktur mit Shop | young-serif / instrument-sans / – | token-toggle-asymmetrisch | in-den-warenkorb-flug, like-herz-burst | ja |
| verein-nonprofit-wirkung | Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative | big-shoulders / archivo / – | token-kinetisch-inout (UI: token-toggle-asymmetrisch) | typo-maske-medien | ja |
| friseur-salon-handschrift | Friseur / Barbershop / Kosmetikstudio / Nagelstudio | kalnia / familjen-grotesk / mrs-saint-delafield | token-studio-signatur | flick-karten-stapel | ja |
| fitness-studio-rhythmus | Fitnessstudio / Yoga- und Pilatesstudio / Kampfsportschule / Tanzschule (auch Sportverein mit Kursbetrieb) | anybody / funnel-sans / azeret-mono | token-brutal-hart (UI: token-tech-praezise) | variable-font-axes | ja |
| pflege-dienst-naehe | Ambulanter Pflegedienst / Tagespflege / Alltagshilfe und Betreuung | literata / hanken-grotesk / – | token-toggle-asymmetrisch | corner-shape-eckenformen | ja |
| musik-kuenstler-buehne | Band / Musiker:in / DJ / Label / Chor und Ensemble / bildende Künstler:in mit Ausstellungen | science-gothic / redaction / martian-mono | token-brutal-hart (UI: token-toggle-asymmetrisch) | ascii-dither-pixel-stil, echo-stacked-type | Variante |
| industrie-b2b-mittelstand | Maschinen- und Anlagenbau / Zulieferer und Lohnfertiger / Hidden Champions / technische Dienstleister (B2B) | strichpunkt-sans / archivo / – | token-swiss-knackig | blueprint-raster-sichtbar | ja |
| kfz-werkstatt-autohaus | Freie Kfz-Werkstatt / Autohaus mit Werkstatt / Reifenservice / Karosserie- und Lackierbetrieb | mona-sans / google-sans-flex / – | token-toggle-asymmetrisch | text-on-path | ja |
| arbeitgeber-karriere | Karriereseite und Recruiting-Microsite eines KMU (Handwerk, Pflege, Industrie, Gastronomie, Handel) | funnel-display / funnel-sans / – | token-federnd-verspielt (UI: token-toggle-asymmetrisch) | collage-scrapbook, horizontal-scroll-section | ja |
| bestattung-wuerdig | Bestattungsinstitut / Bestattungshaus / Trauerbegleitung (auch Trauerrede, Baum- und Waldbestattung) | source-serif-4 / commissioner / – | token-luxus-weich (UI: token-toggle-asymmetrisch) | geriffeltes-glas | ja |
| eventlocation-hochzeit | Eventlocation / Hochzeitslocation / Gutshof / Tagungsort (auch Eventcatering) | imbue / archivo / – | token-studio-signatur | theme-farbwechsel-scroll | ja |
| weingut-hofladen-herkunft | Weingut / Winzerhof / Hofladen / Manufaktur aus der Landwirtschaft / Brennerei (optional mit Ferienzimmern) | eb-garamond / eb-garamond / dm-mono | token-luxus-weich (UI: token-toggle-asymmetrisch) | tiefenkarten-relighting | ja |

### Sektionen je Rezept

- **architektur-ruhiges-raster**: Hero editorial-magazin-layout, meta-labels-hud-typografie · Projekte / Werkverzeichnis → Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …) → Projekt-Detailseite → Büro / Team → Aktuelles / Auszeichnungen → Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)
- **handwerk-werkstatt-klartext**: Hero foto-hero · Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte) → Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst) → Referenzen / Projekte → So läuft ein Auftrag ab → Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis) → Zertifikate / Innung / Herstellerpartner → Team / Ausbildung / Karriere → Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage) → FAQ (Kosten, Förderung, Termine) → Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload) → Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)
- **fahrschule-freundlich-buchbar**: Hero animiertes-select · Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst) → Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung) → In 5 Schritten zum Führerschein (die Straße zeichnet sich als einzige Linie; prozess-timeline-wachsende-linie liefert nur das Raster, ohne eigene Linie) → Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis) → Fahrlehrer:innen & Fahrzeuge → Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine) → FAQ (Kosten, Dauer, Sprachen, Intensivkurs) → Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen) → Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)
- **immobilien-diskret-hochwertig**: Hero foto-hero · Variante: prompt-hero-eingabefeld · Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis) → Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten) → Marktzahlen der Region → Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang) → Referenzen / verkaufte Objekte → Team / Standort → Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick) → Ratgeber / Magazin → Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)
- **gastro-warm-appetitlich**: Hero foto-hero-mit-leiste · Variante: cinematic-video-hero · Karte (Mittag / Abend / Getränke) → Haltung / Geschichte des Hauses → Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage) → Raum & Speisen (Bilder) → Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis) → Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung) → Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis) → Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten) → Standorte (nur bei mehreren Häusern) → Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)
- **boutique-hotel-gastgeber**: Hero foto-hero-mit-leiste · Variante: cinematic-video-hero · Buchungsleiste (Datum, Gäste) direkt unter dem Hero → Zimmer & Suiten → Restaurant / Bar / Spa → Erlebnisse & Umgebung / Was ist los → Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung) → Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem) → Tagungen & Feiern → Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern) → Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)
- **kreativstudio-buehne**: Hero schrift-hero-viewportbreit, cinematic-video-hero · Showreel direkt nach dem Hero → Leistungen (3–4 Felder) → Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf) → Ausgewählte Arbeiten → Haltung / Warum wir → FAQ → Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)
- **freelancer-stille-visitenkarte**: Hero ohne Muster (siehe hero_beschreibung) · Intro-Satz (ersetzt den Hero) → Projekte / Arbeiten → Angebot / Leistungen (was ich mache, für wen, wie man anfragt) → Schreiben / Notizen → Über mich / Jetzt → Stimmen von Kunden → Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)
- **fotograf-film-bild-zuerst**: Hero cinematic-video-hero · Kuratierte Auswahl (Startseite Fotograf) → Arbeiten / Regie-Roster (Film) → Serien / Projekte → Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar) → Bio → Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)
- **mode-beauty-kollektion**: Hero foto-hero · Variante: cinematic-video-hero · Kampagne / Editorial → Lookbook (Kapitel scrollen ins nächste) → Produktreihe / Neuheiten → Kategorie mit Filter → Produktdetail (Bilder links, Kaufbox rechts sticky) → Anwendung / Ritual (Beauty) → Welche Pflege passt? (Finder in wenigen Fragen) → Wirkstoffe, Pflege, Service → Bewertungen → Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft) → Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)
- **kultur-programm-haltung**: Hero schrift-hero-viewportbreit, editorial-magazin-layout · Aktuelle Ausstellungen / Highlights → Programm-Kalender mit Filtern → Rubriken-Reihen (Musik, Film, Kunst …) → Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit) → Magazin / Hintergrund → Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse) → Newsletter
- **luxus-manufaktur-stille**: Hero foto-hero · Variante: cinematic-video-hero · Neuheit / Kampagne → Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin) → Manufaktur / Handwerk → Technik / Kaliber → Service, Pflege, Garantie → Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative) → Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)
- **saas-produkt-praezise**: Hero produkt-ui-hero-perspektiv-tilt · Variante: prompt-hero-eingabefeld · Funktionen in Kapiteln (Workflow von Anfang bis Ende) → 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) → Kunden / Integrationen → Use Cases / Kundenstimmen → Preise → Was spart ihr? (Rechner mit Live-Ergebnis) → FAQ / Sicherheit / DSGVO → Demo / Kontakt (Demo-Anfrage, Enterprise, Support) → Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)
- **kanzlei-beratung-souveraen**: Hero editorial-magazin-layout · Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst) → Köpfe / Team (filterbar nach Fachgebiet, Standort) → Ausgewählte Mandate / Recent work → Insights / News / Studien (Long-Reads mit einer echten Initiale) → Zahlen & Fakten (Standorte, Berufsträger, Gründung) → Auszeichnungen / Rankings → Karriere → Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link) → Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)
- **praxis-gesundheit-ruhig**: Hero foto-hero · Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung) → Termin online (Buchungs-Widget erst nach Consent bzw. Klick, sonst Telefon) → Ihr erster Termin – so läuft es ab → Team / Therapeut:innen → Praxisräume → Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis) → Kurse (Rückenschule, Prävention, Reha-Sport; nur bei regelmäßigen Kursen, sonst Liste) → Kosten, Kassen, Rezept – FAQ → Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld) → Erklärung zur Barrierefreiheit (eigene Seite)
- **kurs-coaching-lernweg**: Hero ohne Muster (siehe hero_beschreibung) · Variante: prompt-hero-eingabefeld, split-screen-sticky-seiten · Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste) → Lernweg / Module / Kurswochen → Über die Trainerin / den Coach → Ergebnisse / Teilnehmerstimmen → Kurskatalog (bei mehreren Kursen) → Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen) → Preise / Pakete / Ratenzahlung → Anmeldung (mehrere Schritte, Fehlerliste) → FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung) → Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen) → Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)
- **d2c-produkt-zuerst**: Hero bento-grid-interaktiv · Bestseller / Neuheiten → Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento) → Kategorie mit Filter → Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe) → Produktdetailseite → Produktvergleich / Finder → Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis) → Community / Rezepte / Journal → Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt) → Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)
- **verein-nonprofit-wirkung**: Hero typo-maske-medien · Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand) → Aktuelle Projekte / Kampagnen → Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld) → So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht) → Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten) → Geschichten aus den Projekten → Termine & Aktionen vor Ort → Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick) → Partner / Förderer → Jahresbericht / FAQ / Spendenquittung
- **friseur-salon-handschrift**: Hero foto-hero · Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben) → Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst) → Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement) → Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern → Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter) → Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button) → Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen) → Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung) → Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon) → Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)
- **fitness-studio-rhythmus**: Hero foto-hero · Variante: cinematic-video-hero · Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin) → Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst) → Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick) → Tarife & Preise (Monatspreis, Mindestlaufzeit, Kündigungsfrist und einmalige Gebühren in einer Tabelle; ab drei Tarifen, bei zwei zwei Karten) → Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen) → Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume) → Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis) → Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“) → Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf) → FAQ (Laufzeit, Kündigung, Pause bei Krankheit oder Schwangerschaft, Gebühren, Kinder, Duschen und Schließfächer) → Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste) → Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile) → Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden prüfen lassen)
- **pflege-dienst-naehe**: Hero foto-hero · Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf) → Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst) → Was kostet das, was zahlt die Kasse? (Leistungen nach Pflegegrad als Tabelle mit Stand-Datum und Quelle, zwei bis drei Rechenbeispiele in Euro, Hilfe beim Antrag) → So beginnt die Pflege (Anruf oder Rückruf → Besuch zu Hause → Kostenvoranschlag → feste Bezugspersonen) → Ihre Ansprechpersonen (Pflegedienstleitung und Büro mit Foto, Name, Aufgabe, Durchwahl, Sprachen; bis etwa fünf Personen Variante statement, darüber raster) → Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten) → Stimmen und Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis; Stimmen von Angehörigen nur mit Freigabe) → Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter) → Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste) → Zwei Wegweiser zum Schluss („Pflege anfragen“ / „Arbeiten bei uns“) mit Telefonnummer – dieselben Wegweiser wie im Hero → Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)
- **musik-kuenstler-buehne**: Hero ascii-dither-pixel-stil, echo-stacked-type · Variante: fluessig-marmor-hintergrund · Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen) → Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick) → Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite) → Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache) → Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument) → Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen → Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in) → Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp) → Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist) → Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)
- **industrie-b2b-mittelstand**: Hero blueprint-raster-sichtbar · Variante: bildsequenz-video-scrub · Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen) → Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person) → Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten) → Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse) → Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe) → So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne) → Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF) → Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste) → Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick) → Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere) → Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)
- **kfz-werkstatt-autohaus**: Hero foto-hero · Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben) → Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle) → Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein) → Reifen: Größe lesen, wechseln, einlagern (Reifenflanke als statische Zeichnung mit der Größe auf dem Rund, daneben dieselbe Angabe als Liste erklärt: Breite, Querschnitt, Bauart, Felgendurchmesser, Tragfähigkeit, Geschwindigkeit, DOT-Alter; Einlagerung mit Profiltiefe-Protokoll; Reifenangebote mit Preis nur mit EU-Reifenlabel daneben) → Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme → So läuft Ihr Werkstattbesuch (Termin → Annahme mit Kostenrahmen → Anruf vor jeder Mehrarbeit → Fertigmeldung per SMS oder Anruf → Abholung mit Erklärung der Rechnung; nur versprechen, was der Betrieb so macht) → Bewertungen (Google-Profil mit Schnitt, Anzahl, Stand-Datum und Echtheitshinweis direkt daneben; drei Stimmen mit Antwort des Betriebs; Live-Ansicht nur per Klick) → Team und Meister (Inhaber:in oder Werkstattmeister:in mit Foto, Annahme mit Durchwahl, Qualifikationen wie Meisterbrief und Hochvolt; bis etwa fünf Personen als ein Satz mit kleinen Porträts, darüber Raster) → Partner und Nachweise (Kfz-Innung, Werkstattsystem, Prüforganisation im Haus mit HU-Tagen, Herstellerzulassungen; nur mit Erlaubnis und aktuell) → Karriere und Ausbildung (Kfz-Mechatroniker:in, Servicetechniker:in, Ausbildung; Stellen direkt offen mit Gehalt, Initiativbewerbung; eigene Karriere-Microsite nach arbeitgeber-karriere) → Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer) → Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Betrieb kein Kleinstunternehmen ist – vom Kunden prüfen lassen)
- **arbeitgeber-karriere**: Hero collage-scrapbook · Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter) → Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist) → So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird) → Ein Tag als … (je Beruf eine Strecke mit vier bis acht Stationen und Uhrzeit, von Schichtbeginn bis Feierabend: echte Fotos, ein Satz je Station, auch was anstrengend ist; auf dem Telefon als Wischleiste) → Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung) → Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft) → Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern) → Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung) → Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick) → Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)
- **bestattung-wuerdig**: Hero foto-hero · Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern) → So begleiten wir Sie (Erstgespräch zu Hause oder bei uns → Abschied nehmen → Trauerfeier → Beisetzung → danach: Formalitäten, Trauergruppe, Grabpflege); die Linie steht fest und füllt sich nicht beim Scrollen → Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet) → Was kostet eine Bestattung? (drei echte Tabellen in Tabellenziffern: eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen wie Friedhof, Krematorium, Standesamt und Anzeige als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage je Zone oder Kilometer; zwei Rechenbeispiele und „Angebot anfordern“) → Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten) → Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen) → Abschied nehmen: unsere Räume (Abschiedsraum, Feierhalle, Garten, Beratungszimmer; ein Raum zur Zeit, Reiter nennen den Raum; vor dem Foto liegt Riffelglas, das erst auf „Raum ansehen“ klar wird; Größe, Plätze und Zugang ohne Stufen als Text) → Wer Sie begleitet (Inhaberin oder Inhaber, Bestatterinnen und Bestatter, Trauerbegleitung mit Foto, Name, Aufgabe und Durchwahl; bis etwa fünf Personen als Satz mit kleinen Porträts, darüber als Raster) → Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste) → Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)
- **eventlocation-hochzeit**: Hero foto-hero-mit-leiste · Variante: cinematic-video-hero · Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage) → Ein Tag bei uns (drei bis vier Kapitel vom Ankommen und der Trauung im Garten über den Empfang im Hof und das Essen in der Scheune bis zur Feier in der Nacht; Bild steht, Text erklärt; die Seite färbt sich an jeder Kapitelgrenze um) → Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl) → Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr) → Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname) → Freie Termine (Monatsansicht mit frei, angefragt und vergeben, als Text und Zeichen, nicht nur Farbe; Samstage und Feiertage markiert; ein Klick übernimmt das Datum in die Anfrage; nur mit gepflegtem Kalender) → Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen) → Besichtigung und Probeessen vereinbaren (Termin-Tool erst nach Klick, daneben Telefon und E-Mail) → Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text) → Dienstleister-Netzwerk (Catering, Floristik, Fotografie, Musik, Trauredner; sichtbar, wer Pflichtpartner ist und ob eine Provision fließt; Logos nur mit Erlaubnis, ab etwa fünf als Raster, sonst Liste) → Stimmen (Google und Hochzeitsportal je mit eigenem Schnitt, Anzahl, Stand und Echtheitshinweis; Stimmen von Paaren nur mit Freigabe) → Barrierefreiheit (eigene Seite für die Website; Barrierefreiheit vor Ort steht zusätzlich bei Anfahrt und Räumen)
- **weingut-hofladen-herkunft**: Hero foto-hero · Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen) → Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link) → Warenkorb und Versand (Drawer mit Grundpreis und MwSt.; Versandkosten je Karton, Lieferzeit, Zustellung nur mit Alters- und Identitätsprüfung; Abholung im Hofladen als Versandart) → Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter) → Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv) → Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage) → Hofladen und Vinothek (Öffnungszeiten mit Status, Sonderzeiten zu Lese, Hoffest und Feiertagen; was es gibt, eigene Erzeugnisse getrennt von Zugekauftem; Probierausschank; Abholung von Online-Bestellungen) → Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer) → Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine) → Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick) → Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten) → Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)

## 10. Die Animationsstile

Die Stile sind Muster der Kategorie animationsstile; Werte in deren meta.json (bau.werte → css_token). generatives-markenzeichen liegt ebenfalls in dieser Kategorie, ist aber ein Experiment (Priorität F) und kein Animationsstil. Maßgeblich für die Seite ist tokens.css des Rezepts (einheitliche Namen). index.json → kurve ist bei token-filmisch-shader (dort linear plus smoothstep im Shader) und token-physik-traege (dort Lerp) nur die Kurve für einfache Übergänge, nicht der Kern des Stils.

| Stil | Kurve | Dauern | Einsetzen | Nicht |
|---|---|---|---|---|
| token-editorial-langsam | cubic-bezier(0.16, 1, 0.3, 1) | 1,2 s / 1,6 s, Zeilenversatz 0,1 s | Portfolio, Magazin, Architektur, Kultur | UI-Feedback |
| token-federnd-verspielt | cubic-bezier(0.34, 1.56, 0.64, 1) | 300 bis 1000 ms | Buttons, Toggles, Erfolgsmomente; Karriereseiten (mit UI-Stil) | Opazität, große Flächen, Gesundheit, Finanzen |
| token-kinetisch-inout | cubic-bezier(0.83, 0, 0.17, 1) (power4.inOut), weicher cubic-bezier(0.76, 0, 0.24, 1) | 0,9 / 1,2 / 1,5 s | Slideshows, Seitenwechsel, Menü-Overlays | Scroll-Einblendungen, Mikrointeraktionen |
| token-physik-traege | Lerp 0,08 bis 0,12 | fortlaufend | Drag-Slider, Infinite Canvas | Leseseiten |
| token-studio-signatur | cubic-bezier(0.625, 0.05, 0, 1) | 250 / 400 / 525 / 725 ms | UI-Standard für Agentur, Portfolio und Premium-Marken (auch Salon, Eventlocation) | lange Scroll-Reveals, Drag-Feedback |
| token-toggle-asymmetrisch | auf (0.16, 1, 0.3, 1), zu (0.7, 0, 0.84, 0) | Demo auf 800 ms, zu etwa 65 %; als UI-Stil kürzer (auf 200 bis 350 ms, siehe Dauer-Faustregeln) | Menüs, Modals, Drawer, UI-Stil für Rezepte ohne animationsstil_ui; gekürzt als Hauptstil für schnelle Service-Seiten (Kfz) | gescrubbte Animationen |
| token-luxus-weich | cubic-bezier(0.37, 0, 0.63, 1) | 1,4 / 2,2 s | Bild- und Hero-Wechsel bei Mode, Schmuck, Hotel, Weingut; Bestattung nur für Raumbilder | Formulare |
| token-swiss-knackig | (0.25, 1, 0.5, 1), Austritt (0.5, 0, 0.75, 0) | 200 / 350 / 500 / 700 ms | Architektur, Kultur, Industrie, Listen, Filter | warme, verspielte Marken |
| token-tech-praezise | cubic-bezier(0.2, 0, 0.38, 0.9) | 70 bis 150 UI, 240 Panels, 400 Einblendung | SaaS, Formulare, Praxis, Handwerk; UI-Stil zu lauten Stilen | Kampagnen, Mode |
| token-brutal-hart | steps(1, end), linear | 0 / 20 / 80 / 160 ms | Musik, Avantgarde; Fitness nur mit Stufen und harten Bildwechseln, mit UI-Stil | konservative Zielgruppen, Inhalte, die Vertrauen aufbauen (Gesundheit, Finanzen, Beratung, Verträge) |
| token-filmisch-shader | linear, lokal smoothstep | 1,2 bis 2,6 s | WebGL-Übergänge | ohne WebGL-Kompetenz |

## 11. Anti-Muster

Bewusst nicht im Fundus: schwebendes Label (Floating Label), Nach-oben-Button mit Fortschritt, Klick-Ripple, Neumorph-Buttons, Aurora- oder Glow-Hintergrund in Pastell-Lila. fluessig-marmor-hintergrund ist kein Aurora-Ersatz: Es ist Material in Markenfarben, die irisierende Pastell-Fassung (Variante seifenhaut) bleibt ein Experiment.

Von vielen Rezepten ausgeschlossen, grob nach Häufigkeit (genaue Zahl: rezepte.json → nicht_verwenden zählen):

| Muster | Typischer Grund |
|---|---|
| smooth-scroll-lenis | Trägheit stört beim Lesen, Vergleichen, in Shops |
| marquee-laufband | unruhig, Inhalte nicht ganz lesbar |
| magnetische-elemente | Agentur-Geste |
| cursor-follower-lerp | Award-Geste ohne Nutzen |
| prozent-zaehler | künstliche Wartezeit, schlechter LCP |
| interaktives-3d-hero | teuer, lenkt vom Inhalt ab |
| mesh-gradient-shader | Aurora-Klischee |
| webgl-bildverzerrung | verfälscht Fotos, die verkauft werden |
| konfetti-erfolg | billig im Premium- und Gesundheitskontext |
| fullpage-snap-slides | blockiert schnelles Überfliegen |
| zahlen-odometer | hochgezählte Kennzahlen wirken verkäuferisch oder unseriös |

Muster, die ihr eigenes wann_nicht als Template-Klischee markiert: marquee-laufband (als reine Deko), stapelkarten (als Allzweck-Effekt), bento-grid-interaktiv (mit Füllinhalt), karten-spotlight-glow (auf jeder Fläche). Auch wenn ein Rezept sie nennt: nur mit echtem, ungleichem Inhalt und höchstens einmal pro Seite.

Muster mit trendstatus abklingend (index.json) nur mit Grund einsetzen, etwa marquee-laufband, mesh-gradient-shader, shimmer-gradient-text, prozent-zaehler und cursor-follower-lerp.

## 12. Checkliste vor der Abgabe

1. Rezept (und gegebenenfalls Rezept-Variante) gewählt und genannt; Abweichungen begründet (auch geliehene Sektionen, weggelassene bedingte Muster, Onepager-Kürzung).
2. Keine Schrift aus der Verbotsliste; bei Templates jede Schrift template_ok, keine ITF-Datei im Projekt.
3. Genau ein Animationsstil (plus animationsstil_ui oder ersatzweise token-toggle-asymmetrisch für UI) als CSS-Variablen; Kurven aus Demos auf diese Tokens umgestellt; kein ease 0.3s für sichtbare Bewegung.
4. Schließen schneller als Öffnen; Überschwingen nur auf kleinen Elementen.
5. Reveals gezielt, nicht auf jeder Sektion; Bild-Reveals per clip-path.
6. Signatur-Muster eingebaut; Sektionen in der Rezept-Reihenfolge; kein Hero-plus-drei-Karten-Schema; Demo-Varianten aus sektionen[].varianten übernommen oder nach „wann“ gewählt und genannt; Muster unter optional nur als Zusatz.
7. Hero entspricht hero_beschreibung (Foto-Hero als Standard, Video nur mit eigenem Footage, Prompt-Feld nur mit echter Funktion).
8. Kontakt, Termin und Anfahrt als eigene Sektionen, auch wenn das Rezept sie nicht nennt; Firmendaten aus einer Quelle, JSON-LD deckt sich mit dem sichtbaren Text (firmendaten-strukturiert); Drittanbieter erst nach Klick; Consent-Banner gestaltet, falls einwilligungspflichtige Dienste laufen (sonst keins).
9. Ein Signalton, höchstens ein Material-Effekt pro Ansicht, kein Aurora-Verlauf; experimentelle Hintergründe nur nach C10. Buttons aus muster.button: eine Primär- und eine Sekundär-Gestalt, alle Zustände (button-zustaende), 44 px, Effekte erst bei Interaktion. Abstände, Raster und Radien aus tokens.css (C11), Texte nach rezept.ton (C12).
10. Headlines eng gesetzt, Labels in Mono-Versal nur bei Rezepten mit Mono-Akzent, Preise und Daten in Tabellenziffern.
11. prefers-reduced-motion getestet: alles lesbar, nichts bewegt sich automatisch; alles, was sich länger als 5 s bewegt, hat einen Pause-Knopf (bewegung-pausieren-schalter).
12. Tastatur und Fokus: Sprunglink, Landmarken, alles erreichbar, Fokus sichtbar und nicht verdeckt (fokus-stil-system), Verstecktes inert, Overlays als natives dialog mit Esc.
13. Touch geprüft: keine Hover-only-Inhalte, Touch-Ziele mindestens 44 px; feste Leisten verdecken weder Consent-Banner noch Fokus.
14. Zoom 200 % und 320 px Breite ohne Abschneiden, Kontrastmodus (forced-colors) geprüft.
15. Leistung: LCP höchstens 2,5 s, INP höchstens 200 ms, CLS höchstens 0,1; LCP-Bild priorisiert und nicht lazy, übrige Bilder lazy mit sizes="auto", AVIF/WebP mit srcset; bei mehreren Seiten Speculation Rules mit Ausschlüssen; keine Bibliothek aus der Demo, die das Rezept ausschließt.
16. Pflichtangaben (Abschnitt 8a) als Seiten, Links oder markierte Platzhalter vorhanden: bei Online-Verträgen Widerrufs- und Kündigungs-Button, bei fremden Bewertungen der Echtheitshinweis, bei Ratenwerbung die Pflichtangaben mit Warnhinweis, bei Warenverkauf der EU-Gewährleistungshinweis, KI-Funktionen beim Start gekennzeichnet, Erklärung zur Barrierefreiheit, wo nötig. Alles als „vom Kunden prüfen lassen“ markiert.
17. Alle nicht_verwenden-Einträge eingehalten, Inhalte echt, keine Umweltaussage ohne Nachweis; keine Namen oder Texte aus den erfundenen Demo-Welten.

## 13. Pflege

- Quelle ist werkzeug/fundus-quelle/katalog.json. Öffentliche Dateien, Galerie, Detailseiten, Rezepte-Seite und diesen Leitfaden erzeugt python3 werkzeug/fundus.py (läuft auch am Ende von seiten.py).
- Dieser Leitfaden liegt als Quelle in werkzeug/fundus/leitfaden.md; Zahlen, Grundausstattung und Rezept-Tabellen setzt das Skript über Platzhalter ein. Feste Zählungen gehören nicht in den Text. Von Hand gepflegt und bei Rezept-Änderungen zu prüfen: die Mono-Rezepte (A4), die Stil-Tabelle (Abschnitt 10), die Reihenfolge und die Beispiele in Abschnitt 11, die Varianten und Lücken in Abschnitt 9 und der Rechtsstand in Abschnitt 8a (Datum).
- Neue Demos nach werkzeug/fundus/GERUEST.md (nur lokal) (Demo-Vertrag, Varianten Regel 13, Barrierefreiheit Regel 14).
- Neue Belege: gesehen_bei ergänzen; belegstatus rechnet fundus.py selbst. Neue Rezepte: Signatur mit 1 bis 2 eigenen Mustern, keine Schrift in mehr als 3 Rezepten, keine toten ids, bewegung.easing gleich der Kurve des Animationsstils, je Sektion varianten für Muster mit Demo-Varianten, Muster der Priorität F unter optional, muster.button mit ein bis zwei Button-Mustern, dazu stimmung_tags, raum, raster, form, bildsprache, ton und hero_aufbau, Eintrag in werkzeug/fundus/rezept-finder.json.