# Bauplan: Lebensmittelhandwerk: Theke, Ofen, Filiale

Rezept `lebensmittelhandwerk-theke` · Bäckerei / Konditorei / Café-Konditorei / Metzgerei und Fleischerei / Feinkost mit Theke (auch mit mehreren Filialen) · Stimmung: warm, handwerklich, nahbar, appetitlich · Stand 02.11.2026

Die Theke verkauft Ware des Tages: Welche Filiale hat jetzt offen, was gibt es heute, kann ich vorbestellen und wann liegt es bereit. Der Name des Hauses trägt die Seite als große Wortmarke über einem Fotoband aus der Backstube. Darunter sofort die Filialen mit Status, dann Sortiment mit Allergenen, Vorbestellung mit Abholfenster, Torten und Platten auf Anfrage, Mittagstisch und die Suche nach Azubis. Shrikhand nur für Name und Überschriften, Onest für alles, was man lesen und vergleichen muss. Mehl, Kruste und Ofenschwarz als Farben, ein Krustenrot nur für Vorbestellen. Abgrenzung zu gastro-warm-appetitlich (Restaurant mit Reservierung und Karte) und d2c-produkt-zuerst (Versandmarke).

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `lebensmittelhandwerk-theke`) und https://cecodesign.de/lab/fundus/rezepte/lebensmittelhandwerk-theke/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/lebensmittelhandwerk-theke/index.html

## Schrift

- Headline: `shrikhand` · Text: `onest`
- Größen: Wortmarke Shrikhand randlos eingepasst (foto-hero-wortmarke, bei 390 px etwa 80 bis 95 px für sieben Buchstaben), Laufweite -0.01em, Zeilenhöhe 0.9; h1 und h2 Shrikhand clamp(2rem, 1.3rem + 3vw, 3.75rem) bzw. clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem), Zeilenhöhe 1.05, nie in Versal und nie unter 1.5rem. h3, Produktnamen und alles Übrige Onest: Fließtext 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch; Preise, Gewicht und Abholzeiten Onest 500 mit Tabellenziffern; Allergene 0.875rem wght 500. Knöpfe Onest 600, 1rem.
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`

## Farbe

Farben aus Mehl, Kruste und Ofen: helles Mehlweiß als Grund, Krustenbeige als Fläche für Sortiment und Vorbestellung, Ofenschwarz für Footer und Stellenband. Ein Krustenrot nur für Vorbestellen und Bestellung abschicken. Die Fotos bringen die Farbe der Ware; keine Weizenähren, keine Holzmaserung, kein Rot-Weiß-Karo. Eine eigene Markenfarbe (Kirschrot, Senfgelb) ersetzt das Krustenrot, wenn sie mit Weiß 4,5 : 1 erreicht.

- `--farbe-grund` #F7F1E6 (Grund Mehl)
- `--farbe-text` #241B14 (Text (15,0 : 1 auf Grund))
- `--farbe-flaeche` #EBD8BB (Fläche Kruste: Sortiment, Vorbestellung, Abholfenster (Text 12,1 : 1))
- `--farbe-dunkel` #2B211B (Dunkel Ofen: Footer, Stellenband (Weiß darauf 15,7 : 1))
- `--farbe-signal` #8A3C12 (Signal Krustenrot: Vorbestellen, Bestellung abschicken (Weiß darauf 7,7 : 1; als Fläche auf Grund 6,8 : 1, auf Kruste 5,5 : 1); auf Ofen stattdessen Mehl-Knopf mit dunkler Schrift)
- `--farbe-leise` #665746 (Leise: Meta-Angaben, Gewicht, Stand-Daten (6,2 : 1 auf Grund, 5,0 : 1 auf Kruste))
- `--farbe-linie` #DDCDB4 (Linie: Haarlinien in Preislisten (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Federnd verspielt“](https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/demo) `token-federnd-verspielt`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.34, 1.56, 0.64, 1) (token-federnd-verspielt, nur kleine Elemente); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 400 (Mengen-Knopf, Häkchen), 300 (Panel, Reiter öffnen), 200 (schließen), 800 (Buchstaben der Wortmarke einmal beim Laden, 60 je Buchstabe) ; 800 (Seitenwechsel als Laib, zurück 540, cubic-bezier(0.37, 0, 0.63, 1))
- Regel: Federn nur auf Knöpfen und Bestätigungen, nie auf Fotos, Flächen oder Deckkraft. Die Wortmarke läuft einmal beim ersten Laden ein, nicht bei jedem Seitenwechsel. Preise, Allergene und Zeiten stehen sofort. Bei prefers-reduced-motion steht die Wortmarke, Bestätigungen erscheinen ohne Weg. Beim Seitenwechsel fliegt der Name nur als Kopfmarke mit; die neue Seite geht als Laib auf, ohne Überschwingen.
- Hinweis: Federn nur auf kleinen Elementen: Mengen-Knöpfe, Häkchen „liegt bereit“, Abholnummer im Erfolgsmoment. Wortmarke, Fotos, Listen und Formulare laufen ohne Überschwingen. Vorbestellung, Warenkorb-Panel, Reiter und Dialoge über token-toggle-asymmetrisch (öffnen 300 ms, schließen 200 ms), weil token-federnd-verspielt große Flächen ausschließt.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.34, 1.56, 0.64, 1)` (--ease) für nur kleine Elemente (Mengen-Knöpfe, Häkchen „liegt bereit“, Abholnummer); Wortmarke, Fotos, Listen, Formulare, Panels über das UI-Paar ohne Überschwingen; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`; Ausnahme `cubic-bezier(0.37, 0, 0.63, 1)` nur für wachsende Formen beim Seitenwechsel (Laib, seitenwechsel-wachsende-form) und die Kopfmarke im selben Wechsel; Expo-out verschluckt die Form nach etwa 200 ms (Jury Bäckerei-Probe), alle anderen Flächen nehmen --ease-flaeche
- Dauern: klein 150 ms, mittel 300 ms, gross 800 ms, seitenwechsel 800 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Vorbestellen: ab 0 ms, steht
2. Foto: ab 0 ms, steht (LCP)
3. Wortmarke (foto-hero-wortmarke, gestapelt): ab 0/60/120/180/240/300/360 ms, 800 ms, Buchstaben steigen einmal ein, 60 ms Versatz, --ui-ease-ein; bei längeren Namen Versatz so kürzen, dass der letzte Buchstabe spätestens bei 400 ms startet
4. Heute im Laden: ab 0 ms, steht
5. Rest: beim Scrollen, steht
- Ende nach 1160 ms. Wiederholt: Wortmarke steht (Rezept: einmal beim ersten Laden, nicht bei jedem Seitenwechsel). Auf Unterseiten steht der Name als Kopfmarke im Kopf.

**Scrollen** (höchstens drei Reveal-Arten):

- Kapitelkante (`kapitel-kante-signatur`): zwei bis drei Kapitelgrenzen der Startseite (Filialen → Backstube → Sortiment); jede Kante trägt Uhrzeit und Station der Nacht, eine Uhr läuft mit, die Flächen gehen von Ofenschwarz zu Mehl; scrollgekoppelt, Versatz 0 ms, Skala mit 16 Strichen, Uhrzeit aus dem Fortschritt (z. B. 21:30 → 06:15, nur echte Zeiten der Backstube), Flächenfarbe wechselt mit; scrollgekoppelt (animation-timeline: view(); animation-range-start cover 5 %, animation-range-end cover 50 %, als Langform nach der Kurzschreibweise animation); ohne Unterstützung Endzustand
- Hinweis: Die Wortmarke schrumpft scrollgekoppelt zur Kopfmarke (wortmarke-wird-kopfmarke beides, linear, animation-range 0 bis zum Kopfplatz); das zählt nicht als Reveal.
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Preise, Allergene, Zeiten (Rezept), Vorbestellung und Abholung

**Hover** (300 ms ein, 200 ms aus, --ui-ease-ein / --ui-ease-aus (Mengen-Knopf --ease); nur mit Zeiger):

- Link: Unterstreichung wächst von links
- Knopf: pfeil-icon-button seitenwechsel: Kreis wandert, Label 30 px; Mengen-Knopf federt beim Druck (400 ms --ease)
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px, Foto steht ; Zeichnung (backwaren): die versetzte Fläche rückt unter die Kontur (3/2 → 0)
- Bild: kein Zoom

**Signatur** `foto-hero-wortmarke` (Variante gestapelt): Der Name des Hauses steht randlos über der vollen Breite und läuft einmal beim ersten Laden Buchstabe für Buchstabe ein. Danach schrumpft er beim Scrollen in seinen Platz im Kopf (wortmarke-wird-kopfmarke, beides); die Kapitelkanten zählen die Nacht bis zum Morgen weiter (kapitel-kante-signatur, zeitachse). Auslöser: Laden; Wiederholung: einmal je Tab.

**Seitenwechsel** `seitenwechsel-wachsende-form` (Variante laib); dazu `wortmarke-wird-kopfmarke` (beides). Richtung: vorwaerts: die neue Seite geht als Laib von unten auf, die alte tritt zurück (Deckkraft 0,5, -6vh); zurueck (Browser-Zurück, traverse): der Laib sinkt wieder ab; gleiche Seite ohne Übergang. Geteilt: kopf, marke (Wortmarke der Startseite → Kopfmarke, fliegt mit Kurve und Dauer des Laibs), korb (Vorbestell-Leiste). Dauer 800 ms, zurück 540 ms. Kurve: `cubic-bezier(0.37, 0, 0.63, 1) (--ease-form)`.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Federn nie auf Fotos, Flächen oder Deckkraft (Rezept). Abholnummer federt einmal im Erfolgsmoment. Kapitelkanten nur an Kapitelgrenzen (höchstens drei auf der Startseite), nie über Überschriften, Preisen oder Formularen. Der Laib ist eine Fläche: ohne Überschwingen, nie --ease.

**Reduzierte Bewegung:** Wortmarke steht klein im Kopf, im Hero als ruhiger Schriftzug; Bestätigungen ohne Weg (Rezept); Kapitelkanten stehen fertig (--kp 1), die Uhr zeigt die Zeit des Kapitels; Seitenwechsel als Überblendung 150 ms ohne Laib und ohne Flug. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Dampf über Brot, rieselndes Mehl, Krümel-Partikel; Laufband mit Angeboten (Rezept); Warenkorb-Flug und Herz-Burst (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Wortmarke laut Rezept 800 ms mit 60 ms Versatz. Rest eigene Festlegung. Seitenwechsel, Kopfmarke und Kapitelkanten 05.11.2026 aus den Demos seitenwechsel-wachsende-form (laib: 800/540 ms, cubic-bezier(0.37, 0, 0.63, 1)), wortmarke-wird-kopfmarke (beides) und kapitel-kante-signatur (zeitachse); Antwort auf die Jury der Bäckerei-Probe.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: mittel
- Hinweis: Theke dicht, Backstube luftig: Preislisten mit 8 px Zeilenabstand, Kapitel mit viel Raum. Mobil eine untere Leiste Vorbestellen / Anrufen.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 28px)
- Maximale Breite: 1320px
- Raster: Wortmarke über volle Breite, Fotoband 21:9 darunter. Sortiment als Kachelraster 4 Spalten, mobil zweireihige Wischreihe. Backstube 6/6 mit stehendem Bild.
- Radius klein: 6px
- Radius groß: 16px
- Pillenform für Buttons: True
- Linie: 1px #DDCDB4 in Preislisten
- Schatten: keiner
- Form: Weich wie ein Laib: runde Ecken an Kacheln und Panels, Knöpfe als Pille. Krustenrot nur für Vorbestellen.

## Bildsprache

- Licht: Streiflicht in der Backstube am frühen Morgen, warmes Thekenlicht; nicht übersättigt.
- Ausschnitt: Hände am Teig, Kruste im Anschnitt, Theke in der Halbtotale, Filiale von außen.
- Personen: Ja: eigenes Team mit Einwilligung; Kundschaft nur mit Erlaubnis.
- Formate: 21:9, 4:5, 1:1
- Nicht: Keine Stockfotos von Brotkörben, keine Weizenähren-Deko, kein KI-Brot ohne Kennzeichnung. Ohne eigene Fotos: Zeichnungen aus einer Familie (gleiche Linie, ein Akzent) statt Stock.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz. Zeichnungen kräftig und groß als eigene Bildwelt: Strich ab 2,5 px, Flächen in den Rezeptfarben, mindestens 160 px, nie als dünne Strich-Icons.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Kurz und konkret: Produkt, Tag, Uhrzeit, Preis.
- Haltung: Freundlich wie an der Theke, stolz auf das Handwerk, ohne Werbesprech. Ein junges Café darf duzen, dann durchgehend.
- Tonproben: Dinkelkruste, 750 g, gibt es dienstags und freitags., Bis 18 Uhr bestellen, ab 7 Uhr abholen.
- Nicht: „mit Liebe gebacken“, „Genuss pur“, „ofenfrisch“ bei Aufbackware, „Bio“ ohne Kontrollstellen-Nummer.

## Hero

Foto-Hero mit Wortmarke (gestapelt): Satz oben links („Brot und Kuchen aus unserer Backstube in [Ort], seit [Jahr]“), Vorbestellen oben rechts, der Name randlos, darunter ein Fotoband aus Backstube oder Theke im Streiflicht. Direkt darunter die Filialen mit Status. Bei langen Namen oder mehreren Wörtern stattdessen foto-hero-mit-leiste (Variante weiche) mit gleich breiten Wegen je Filiale. Ohne eigene Fotos trägt eine große Zeichnung aus der Zeichnungsfamilie (Variante backwaren) das Band statt eines Stockfotos. Beim Scrollen schrumpft der Name in den Kopf und fliegt beim Seitenwechsel als Kopfmarke mit.

- Raster: Volle Breite: Satz oben links über Spalte 1 bis 5, Vorbestellen oben rechts, Wortmarke randlos darunter, Fotoband 21:9 bis zum Rand.
- Bild: Echtes Foto aus Backstube oder Theke, Streiflicht; mobil Hochformat 4:5 unter der Wortmarke. Ohne eigene Fotos eine große Zeichnung der Familie (zeichnungsfamilie-produkte, backwaren) im selben Format.
- Überschrift: Die Wortmarke ist die H1 (Name des Hauses, Shrikhand, eingepasst); kein Label darüber, der Satz zur Backstube steht als Absatz.
- Handlung: „Vorbestellen“ (Krustenrot gefüllt) oben rechts; „Filialen und Zeiten“ als Pfeil-Pille unter dem Fotoband.
- Zusatz: Direkt unter dem Hero die Filialen mit Status; mobil untere Leiste Vorbestellen / Anrufen.

- Hero: [Foto-Hero mit Wortmarke](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=gestapelt) `foto-hero-wortmarke` · Variante „Wortmarke über dem Foto“
- Nur unter der Bedingung oben: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=weiche) `foto-hero-mit-leiste` · Variante „Weiche zu den Filialen“

## Sektionen in dieser Reihenfolge

1. **Heute geöffnet, Filiale wählen (direkt unter dem Hero: je Filiale Ort, Status aus echten Zeiten, Sonntag und Feiertage nach feiertage.json; bei nur einem Laden der Status allein; ab dem Abend Abverkauf mit Preis und Uhrzeit, nur wenn es ihn gibt)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [Aktion mit Preisangabe nach § 11 PAngV](https://cecodesign.de/lab/fundus/sektionen/aktion-mit-preisangabe/demo?v=abverkauf) `aktion-mit-preisangabe` · Variante „Abverkauf am Abend“
2. **Sortiment (Brot, Brötchen, Kuchen und Torten, Snacks, Saisonales als Reiter; Wochentagsbrote mit Tag; je Produkt Preis, Stück oder Gewicht, Grundpreis bei Ware nach Gewicht; Zutaten und Allergene auf der Produktseite)**: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Raster am Desktop, Wischreihe am Telefon](https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=zweireihig) `raster-zu-wischreihe` · Variante „Zweireihig“, [Zeichnungsfamilie für Produkte, Läden und Leistungen](https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo?v=backwaren) `zeichnungsfamilie-produkte` · Variante „Backwaren in der Theke“
3. **Vorbestellen und abholen (Artikel und Menge → Filiale und Abholtag mit Zeitfenster → Kontakt; Bestellschluss am Vortag nennen; Bestätigung mit Abholnummer und Zeitfenster; Zahlung bei Abholung oder online)**: [Vorbestellung mit Abholtag und Zeitfenster](https://cecodesign.de/lab/fundus/sektionen/vorbestellung-abholung/demo?v=backstube) `vorbestellung-abholung` · Variante „Backstube“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Mengen-Stepper mit Einheit und Summe](https://cecodesign.de/lab/fundus/mikroanimationen/mengen-stepper/demo?v=theke) `mengen-stepper` · Variante „Theke“
4. **Torten und Platten für Anlässe (Fotos eigener Arbeiten, ab-Preis je Stück oder Person, Vorlauf in Tagen; Motivwunsch mit Foto-Upload; Platten für Feiern und Büro)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=fenster) `css-native-karussell` · Variante „Fenster“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=basis) `kontakt-anfrage-formular` · Variante „Anfrage-Sektion mit drei Formularen“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=kompakt-mobil) `datei-upload-ablage` · Variante „Ein Knopf und Kacheln“
5. **Mittagstisch und Café (Wochenkarte mit Datum, Preise inkl. MwSt., Allergene und Zusatzstoffe je Gericht; Frühstück)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=allergene) `speisekarte-editorial` · Variante „Allergene an der Theke“, [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=speisekarte) `druckansicht-print` · Variante „Speisekarte“
6. **Backstube und Herkunft (wann gebacken wird, Teigruhe in Stunden, woher Mehl, Milch oder Fleisch kommen; nur echte Angaben; Bio nur mit Kontrollstellen-Nummer)**: [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“, [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis) `logo-wand-social-proof` · Variante „Siegel mit Nachweis“
7. **Filialen (ab vier Filialen Liste mit Suche; je Filiale Adresse, Zeiten, Café-Plätze, Parken; Karte per 2-Klick)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste) `standortfinder-liste` · Variante „Liste mit Übersicht und Karte per 2-Klick“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=standorte) `karte-zwei-klick` · Variante „Mehrere Standorte“, [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale) `standort-detailseite` · Variante „Filiale“
8. **Ausbildung und Stellen (Bäcker:in, Konditor:in, Fleischer:in, Fachverkäufer:in; Arbeitszeiten ehrlich, früher Beginn, Zuschläge, Ausbildungsvergütung je Jahr; jede Stelle mit eigener Seite)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“, [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=ausbildung) `stellenseite-mit-jobposting` · Variante „Ausbildung mit Vergütung je Jahr“
9. **Gutscheine und Versand (Gutscheine nur mit Zahlungsdienst und Codeverwaltung; Versand von Ware nur mit Haltbarkeit und allen Pflichtangaben vor dem Kauf)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`, [EU-Hinweis zur Gewährleistung und Garantie-Label](https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=footer-seite) `eu-gewaehrleistungshinweis` · Variante „Footer-Link und Seite“, [Eingabehilfen und Autofill](https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/demo?v=abholung) `formular-eingabehilfen-autofill` · Variante „Adresse mit zweiter Rechnungsadresse“
10. **Vertrag widerrufen, Abo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Brot- oder Kaffeeabo mit Kündigungsbutton; Erklärung nach BFSG bei Online-Bestellung prüfen lassen)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Foto-Hero mit Wortmarke](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=gestapelt) `foto-hero-wortmarke` · Variante „Wortmarke über dem Foto“
- [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=zeitachse) `kapitel-kante-signatur` · Variante „Zeitachse (Bäckerei, über Nacht)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Der Name des Hauses randlos über die volle Breite läuft einmal Buchstabe für Buchstabe ein und schrumpft beim Scrollen in seinen Platz im Kopf; darunter das Fotoband aus der Backstube.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß: Name über 100 vw, Fotoband mindestens 40 vh
- Muster: [Foto-Hero mit Wortmarke](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=gestapelt) `foto-hero-wortmarke` · Variante „Wortmarke über dem Foto“, [Wortmarke wird Kopfmarke](https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/demo?v=beides) `wortmarke-wird-kopfmarke` · Variante „Beides (Region)“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=seitenwechsel) `pfeil-icon-button` · Variante „Seitenwechsel“

## Weitere Bausteine

- Seitenwechsel: [Seitenwechsel in wachsender Markenform](https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo?v=laib) `seitenwechsel-wachsende-form` · Variante „Laib von unten“, [Wortmarke wird Kopfmarke](https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/demo?v=beides) `wortmarke-wird-kopfmarke` · Variante „Beides (Region)“
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“
- Scroll: [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=zeitachse) `kapitel-kante-signatur` · Variante „Zeitachse (Bäckerei, über Nacht)“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Bewegung als CSS-Funktion](https://cecodesign.de/lab/fundus/animationsstile/bewegung-als-css-funktion/demo?v=federn) `bewegung-als-css-funktion` · Variante „Drei Federn“
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=fenster) `css-native-karussell` · Variante „Fenster“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- live-uhr-und-standort – Signatur von gastro-warm-appetitlich; der Status kommt aus echten Öffnungszeiten
- in-den-warenkorb-flug / like-herz-burst – Signatur von d2c-produkt-zuerst; die Vorbestellung bestätigt ruhig
- bento-grid-interaktiv – Produkt-Bento gehört zu d2c; das Sortiment steht als Reiter und Kacheln
- marquee-laufband – Tagesangebote als Laufband sind nicht ganz lesbar
- zahlen-odometer – „seit 1921“ und „3.000 Brötchen am Tag“ werden nicht hochgezählt
- grain-noise-overlay / papier-druck-textur – Mehlstaub- und Papier-Fake-Texturen; die Fotos zeigen das Material
- smooth-scroll-lenis – stört Vorbestellung und Reiter
- Weizenähren, Rot-Weiß-Karo, Bäckermütze als Ornament und Stockfotos von Brotkörben – Klischee; eigene Fotos aus Backstube und Theke
- „hausgemacht“, „aus eigener Backstube“, „regional“ ohne Beleg – Herkunfts- und Herstellungsangaben müssen stimmen
- „gesund“, „bekömmlich“ – gesundheitsbezogene Angaben nur nach der Health-Claims-Verordnung

## Regeln

- Erster Bildschirm: Wortmarke, ein Satz zu Ort und Backstube, Vorbestellen; direkt darunter die Filialen mit Status. Bei langen Namen foto-hero-mit-leiste (Variante weiche) statt Wortmarke.
- Signatur (foto-hero-wortmarke, Variante gestapelt): Der Name steht randlos, gemessen und eingepasst, das Fotoband darunter zeigt Backstube oder Theke. Die Buchstaben laufen nur beim ersten Laden ein (Session), bei reduzierter Bewegung stehen sie. Beim Scrollen und beim Verlassen der Startseite wird der Name zur Kopfmarke (wortmarke-wird-kopfmarke, Variante beides), ohne dass die Buchstaben neu einlaufen.
- Öffnungszeiten aus einer Quelle (firmendaten-strukturiert): Filialen, Sonntagsöffnung, Feiertage nach Bundesland, Betriebsferien als Sonderzeit; ein falsches „Jetzt geöffnet“ ist schlimmer als keine Anzeige.
- Allergene und Zutaten: Bei loser Ware im Laden die Allergeninformation schriftlich oder mit sichtbarem Hinweis, wo man sie bekommt; bei Vorbestellung und Versand online alle Pflichtangaben vor dem Kauf (Bezeichnung, Zutaten, Allergene hervorgehoben, Menge, Hersteller). Mittagstisch mit Allergenen und Zusatzstoffen je Gericht. Vom Kunden prüfen lassen.
- Preise: inkl. MwSt.; bei Ware nach Gewicht Grundpreis je kg; Stückpreis bei Brötchen und Kuchen; Pfand und Versand getrennt.
- Vorbestellung: Bestellschluss und Abholfenster offen nennen, Bestätigung mit Abholnummer. Schnell verderbliche Ware und Torten nach Kundenwunsch haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 1 und 2 BGB); bei Abos und Gutscheinen gelten Widerruf und Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
- Typografie: Shrikhand nur für Wortmarke, h1 und h2; alles mit Zahlen, Allergenen und Formularen in Onest mit Tabellenziffern.
- Knöpfe: Krustenrot gefüllt mit allen Zuständen (button-zustaende) nur für Vorbestellen und Bestellung abschicken; Nebenwege als Pfeil-Pille (pfeil-icon-button, Variante seitenwechsel).
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Meister:in (Bäcker, Konditor und Fleischer sind zulassungspflichtig); Bio und Öko nur mit Kontrollstellen-Nummer; keine Umweltaussagen ohne Nachweis; Fotos von Mitarbeitenden mit Einwilligung; Stellen mit JobPosting. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.
- Leitidee über die ganze Seite (z. B. „Über Nacht“): Kapitelkanten als Zeitachse von der Nacht zum Morgen (kapitel-kante-signatur, Variante zeitachse) zwischen Filialen, Backstube und Sortiment, mit echten Uhrzeiten aus der Backstube; der Seitenwechsel geht als Laib auf (seitenwechsel-wachsende-form, Variante laib, 800 ms hin, 540 ms zurück, cubic-bezier(0.37, 0, 0.63, 1)); die Wortmarke ist das gemeinsame Element. Sortiment, Leerzustand und Hero ohne eigene Fotos als Zeichnungen aus einer Familie (zeichnungsfamilie-produkte, Variante backwaren), nie gemischt mit Stockfotos auf derselben Seite.

## Rezept-Varianten

- **Metzgerei und Fleischerei mit Partyservice**: Schrift, Stil und Signatur bleiben; Fläche statt Kruste ein helles Steingrau, Signal bleibt rot. Herkunft der Tiere nur mit Nachweis (Hof, Ort); Haltungsform-Kennzeichnung nach Tierhaltungskennzeichnungsgesetz, soweit für das Sortiment vorgeschrieben, vom Kunden prüfen lassen. Mittagstisch als Wochenkarte, Partyservice mit Mindestmenge und Vorlauf.
- **Café-Konditorei**: Café-Betrieb mit Tischen: Torten des Tages, Frühstück und Kuchen am Platz. Reservieren über termin-buchung-zwei-klick (Variante platzhalter) oder Telefon; die Wortmarke bleibt Signatur. Keine Live-Uhr (gastro).

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.