# Bauplan: Laden vor Ort: Schaufenster, Beratung, Abholung

Rezept `laden-vor-ort-sortiment` · Fachgeschäft und Einzelhandel vor Ort (Buchhandlung, Fahrradladen mit Werkstatt, Blumenladen, Spielwaren, Unverpackt, Wohnen und Geschenke) · Stimmung: persönlich, kuratiert, warm, nah · Stand 02.11.2026

Der Laden verkauft Besuch und Beratung, nicht Versand: Hat er heute offen, was ist neu und was empfiehlt das Team, kann ich etwas reservieren und abholen, gibt es eine Werkstatt oder eine Lesung. Der Hero ist das Schaufenster im Rahmen, darunter die Abteilungen als Bildstreifen, die sich beim Darüberfahren oder Antippen öffnen. Empfehlungen mit Namen, Reservierung ohne Shop, Werkstatt mit Festpreisen, Veranstaltungen. Libre Caslon Display für Überschriften wie auf einem Buchumschlag, Familjen Grotesk für Text. Papier, Kraftkarton und ein Schaufenstergrün. Abgrenzung zu d2c-produkt-zuerst (Versandmarke mit Bento und Warenkorb-Flug) und mode-beauty-kollektion (Kollektion).

## 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 `laden-vor-ort-sortiment`) und https://cecodesign.de/lab/fundus/rezepte/laden-vor-ort-sortiment/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `libre-caslon-display` · Text: `familjen-grotesk`
- Größen: h1 Libre Caslon Display clamp(2.5rem, 1.5rem + 4vw, 5rem), Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(1.875rem, 1.3rem + 2vw, 3rem) in Familjen Grotesk 600 (Libre Caslon Display hat ein Gewicht und feine Haarlinien: nur H1 und große Abteilungsnamen ab 2.5rem). Fließtext Familjen Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch; Kursive für Titel von Büchern und Produktnamen. Preise und Zeiten Familjen Grotesk 500 mit Tabellenziffern; Abteilungsnamen in den Bildstreifen Libre Caslon Display ab 2.5rem, schmale Streifen in Familjen Grotesk 600. Knöpfe Familjen Grotesk 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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [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`, [Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)](https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/demo) `gemischte-schnitte-zeile`

## Farbe

Je Laden ein Leitmaterial: hier Papier als Grund, Kraftkarton als Fläche für Empfehlungen, Reservierung und Werkstattpreise, fast schwarzes Tintenbraun für Footer. Eine Akzentfarbe aus dem Schaufenster oder der Markise, hier Schaufenstergrün, nur für Reservieren und Termin. Austauschbar je Laden (Markisenrot, Ladenblau), immer mit 4,5 : 1 geprüft. Kein Pastell, keine Holzmaserung, kein Papier-Fake.

- `--farbe-grund` #F5F1E8 (Grund Papier)
- `--farbe-text` #211F1C (Text (14,6 : 1 auf Grund))
- `--farbe-flaeche` #E2D3B8 (Fläche Kraftkarton: Empfehlungen, Reservierung, Werkstattpreise (Text 11,2 : 1))
- `--farbe-dunkel` #2C2A26 (Dunkel Tinte: Footer, Veranstaltungs-Band (Weiß darauf 14,3 : 1))
- `--farbe-signal` #2E5B45 (Signal Schaufenstergrün: Reservieren, Termin (Weiß darauf 7,8 : 1; als Fläche auf Grund 6,9 : 1, auf Kraftkarton 5,3 : 1); auf Tinte stattdessen Papier-Knopf mit dunkler Schrift)
- `--farbe-leise` #615B51 (Leise: Meta-Angaben, Stand-Daten (6,0 : 1 auf Grund, 4,6 : 1 auf Kraftkarton))
- `--farbe-linie` #D9CFBE (Linie: Haarlinien in Preislisten (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- 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.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 1000 (Bildstreifen wächst), 300 (Panel, Dialog öffnen), 200 (schließen), 1200 (Schaufenster-Foto öffnet sich einmal)
- Regel: Bilder bewegen sich ruhig und einmal; Preise, Zeiten und Formulare stehen sofort. Die Bildstreifen öffnen sich auf Hover mit 50 ms Verzögerung und auf Fokus sofort, auf Touch per Tippen. Bei prefers-reduced-motion wechselt die Breite sofort, das Foto steht.
- Hinweis: Langsam nur für Bilder: Die Bildstreifen der Abteilungen wachsen in 1000 ms, das Schaufenster-Foto öffnet sich einmal. Reservierung, Werkstatt-Termin, Filter und Dialoge laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), wie von der Recherche vorgeschlagen.

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

- Hauptkurve: `cubic-bezier(0.16, 1, 0.3, 1)` (--ease) für nur Bilder: Bildstreifen wachsen, das Schaufenster-Foto öffnet sich einmal; Reservierung, Termin, Filter, Dialoge über das UI-Paar; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 150 ms, mittel 300 ms, gross 1200 ms, seitenwechsel 1000 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 Öffnungsstatus: ab 0 ms, steht
2. Schaufenster-Foto (inset-rahmen): ab 0 ms, 1200 ms, öffnet sich einmal (clip-path inset), --ease
3. H1: ab 200/300/400 ms, 1000 ms, Zeilen steigen aus Masken, --ease
4. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 1400 ms. Wiederholt: H1 steht, Foto steht.

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

- Bild-Maske (`clip-path-bild-reveal`): Bilder zu Empfehlungen und Veranstaltungen; 1200ms, Versatz 100 ms, Maske öffnet sich einmal; einmal, wenn 33 % sichtbar (IntersectionObserver)
- 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, Zeiten, Formulare (Rezept), Reservierung und Werkstatt-Termin

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

- Link: Unterstreichung wächst von links
- Knopf: button-zustaende; kontur-button-zeichnen doppel
- Karte: Empfehlung: Bild scale 1.05 im Rahmen (bild-zoom-in-maske basis)
- Bild: Zoom klingt mit --ease aus, der Pfeil antwortet sofort

**Signatur** `akkordeon-panels`: Die Bildstreifen der Abteilungen wachsen auf Hover nach 50 ms (flex-grow 1 → 5, 1000 ms, --ease), auf Fokus sofort, auf Touch per Tippen (Rezept); der Text erscheint gestaffelt. Auslöser: Hover, Fokus, Tippen; Wiederholung: je Eingabe.

**Seitenwechsel** `vt-cross-document-mpa` (Variante benannt); dazu `vt-shared-element-morph`. Richtung: keine Typen; Abteilung → Abteilungsseite morpht das Streifenbild, sonst Überblendung. Geteilt: kopf, held (Streifenbild). Dauer 1000 ms.

**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). Bilder bewegen sich ruhig und einmal (Rezept).

**Reduzierte Bewegung:** Breite wechselt sofort, das Foto steht (Rezept); Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Laufband mit Angeboten; Einkaufswagen- oder Tüten-Animation; Countdown und „nur heute“.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und regel; Signatur nach akkordeon-panels (Rezept 1000 ms statt Demo 700 ms, 50 ms Verzögerung). Rest eigene Festlegung.

## 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, 136
- Sektionsabstand: clamp(64px, 9vw, 136px)
- Dichte: mittel
- Hinweis: Wie ein aufgeräumtes Regal: Empfehlungen mit 24 px Abstand, Preislisten eng (8 px), Bildstreifen mit 6 px Spalt.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 28px)
- Maximale Breite: 1320px
- Raster: Hero 7/5 (Schaufenster links im Rahmen, Text rechts). Bildstreifen über volle Breite, Höhe clamp(360px, 57vh, 600px). Empfehlungen als Reihe.
- Radius klein: 2px
- Radius groß: 6px
- Pillenform für Buttons: False
- Linie: 1px #D9CFBE in Preislisten; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Fast eckig wie Etiketten und Buchrücken; Nebenwege als Doppelkontur.

## Bildsprache

- Licht: Tageslicht durch das Schaufenster, warmes Ladenlicht am Abend.
- Ausschnitt: Schaufenster von außen, Regale und Tische im Anschnitt, Hände bei der Beratung, Produkte auf dem Ladentisch.
- Personen: Ja: Team mit Einwilligung; Kundschaft nur mit Erlaubnis.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Hersteller-Pressebilder als Stimmung, keine Stockfotos von Einkaufstüten, keine fremden Marken ohne Erlaubnis.
- 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, in jungen Läden du (dann durchgehend)
- Sätze: Persönlich und konkret: was, für wen, wer empfiehlt es, wann abholen.
- Haltung: Wie ein gutes Gespräch an der Kasse, kenntnisreich, ohne Verkaufsdruck.
- Tonproben: Bis 18 Uhr reserviert, morgen ab 10 Uhr abholbereit., [Name] empfiehlt: [Titel], weil …
- Nicht: „Shoppingerlebnis“, „Top-Angebote“, „nur noch heute“, Superlative.

## Hero

Foto-Hero im Rahmen (inset-rahmen): das echte Schaufenster oder der Laden von innen, eingefasst in die Ladenfarbe. Daneben der Name, ein Satz, was es hier gibt, Öffnungsstatus aus echten Zeiten und zwei Wege: „Reservieren und abholen“ und „Was gibt es Neues“. Bei Läden mit Werkstatt der zweite Weg „Werkstatt-Termin“.

- Raster: 12 Spalten: Schaufenster-Foto im Rahmen über Spalte 1 bis 7, Name, Satz, Status und Wege über 8 bis 12; mobil Foto oben.
- Bild: Echtes Schaufenster oder Laden innen, 4:5, eingefasst in die Ladenfarbe (inset-rahmen).
- Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5rem), Libre Caslon Display; Name des Ladens oder ein Satz zum Sortiment, kein Label darüber.
- Handlung: „Reservieren und abholen“ (Schaufenstergrün gefüllt) und „Was gibt es Neues“ bzw. „Werkstatt-Termin“ (Doppelkontur).
- Zusatz: Status „Heute geöffnet bis …“ aus echten Zeiten direkt unter den Wegen.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=inset-rahmen) `foto-hero` · Variante „Foto im Rahmen auf der Markenfarbe“

## Sektionen in dieser Reihenfolge

1. **Heute geöffnet (Status im Kopf aus echten Zeiten; Sonderzeiten wie Advent, Inventur, Feiertage nach Bundesland)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
2. **Abteilungen und Themen (drei bis sechs Bildstreifen aus dem eigenen Laden, z. B. Romane, Kinderbuch, Reise oder Stadträder, E-Bikes, Werkstatt; je Streifen ein Satz und der Weg dorthin; mobil senkrechtes Akkordeon)**: [Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie](https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo) `akkordeon-panels`
3. **Neu und empfohlen (Empfehlungen des Teams mit Name und einem Satz, Preis inkl. MwSt.; Reihe mit fünf bis zehn Stücken; kein voller Shop nötig; Aktionen mit Zeitraum nur, wo der Preis frei ist: nicht für Bücher (Buchpreisbindung))**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=fortschritt) `karussell-steuerung` · Variante „Fortschrittsleiste“, [Produktkarte mit Bildwechsel](https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/demo?v=zweitbild) `produktkarte-bildwechsel` · Variante „Zweitbild“, [Aktion mit Preisangabe nach § 11 PAngV](https://cecodesign.de/lab/fundus/sektionen/aktion-mit-preisangabe/demo?v=zeitraum) `aktion-mit-preisangabe` · Variante „Zeitraum“
4. **Reservieren und abholen (Artikel oder Wunsch als Text, Menge, Abholtag; Bestätigung, ab wann es bereitliegt und wie lange es zurückgelegt wird; ohne Online-Zahlung eine Reservierung, kein Kauf)**: [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=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“
5. **Werkstatt und Service (nur Läden mit Werkstatt: Festpreise je Leistung mit Stand-Datum, Termin, freiwillig das Europäische Formular für Reparaturinformationen)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste) `speisekarte-editorial` · Variante „Preisliste Dienstleistung“, [Reparatur-Richtpreise und Reparaturweg](https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=betrieb) `reparatur-richtpreise` · Variante „Betrieb: Europäisches Formular als Angebot“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“, [Zeichnungsfamilie für Produkte, Läden und Leistungen](https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo?v=laden) `zeichnungsfamilie-produkte` · Variante „Filialfassaden“
6. **Veranstaltungen (Lesungen, Workshops, Probefahrten, Kranzbinden; Datum, Preis, freie Plätze; Liste nach Monat, Kalender erst ab etwa acht Terminen im Monat)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“
7. **Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: Lesung, Workshop oder Probefahrt mit Datum, Uhrzeit, Preis, Plätzen und Anmeldung; freie Plätze nur aus echter Quelle, Vergangenes mit Hinweis statt Fehlerseite)**: [Veranstaltung: Detailseite mit Zuständen](https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo?v=anmeldung) `veranstaltung-detailseite` · Variante „Anmeldung“, [Teilen und In den Kalender](https://cecodesign.de/lab/fundus/mikroanimationen/teilen-und-kalender/demo?v=veranstaltung) `teilen-und-kalender` · Variante „Veranstaltung“
8. **Online kaufen (nur mit Shop: Kaufbox mit Gesamtpreis, Versand und Lieferzeit, Gewährleistungshinweis; Raten nur mit allen Pflichtangaben)**: [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [Warenkorb als Seitenpanel](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=hinweis) `warenkorb-drawer` · Variante „Hinweis am Symbol“, [EU-Hinweis zur Gewährleistung und Garantie-Label](https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox) `eu-gewaehrleistungshinweis` · Variante „Label-Leiste in der Kaufbox“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=kaufbox) `finanzierung-pflichtangaben` · Variante „Ratenzeile in der Kaufbox“, [Mehr laden mit Rückkehr an die Stelle](https://cecodesign.de/lab/fundus/sektionen/paginierung-mehr-laden/demo?v=knopf) `paginierung-mehr-laden` · Variante „Knopf“
9. **Wer hier berät (das Team in einem Satz mit kleinen Porträts, Schwerpunkte und Lieblingsstücke)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement) `team-ueber-mich-layout` · Variante „Statement-Satz mit Inline-Bildern“
10. **Aus dem Laden (Auswahl eigener Instagram-Bilder selbst gehostet mit Link zum Profil; Live-Feed erst nach Klick)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=social) `karte-zwei-klick` · Variante „Social Feed“
11. **Laden und Anfahrt (Adresse als Text, Bus und Bahn, Rad- und Lastenradstellplätze, Stufen am Eingang; 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=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
12. **Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Sortiment-Schwerpunkt, Bus und Rad, Stufen am Eingang; nie dieselbe Seite mit getauschtem Ortsnamen)**: [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale) `standort-detailseite` · Variante „Filiale“, [Zeichnungsfamilie für Produkte, Läden und Leistungen](https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo?v=laden) `zeichnungsfamilie-produkte` · Variante „Filialfassaden“
13. **Gutscheine (nur mit Zahlungsdienst und Codeverwaltung; sonst „im Laden oder telefonisch“)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
14. **Vertrag widerrufen, Gewährleistung, Barrierefreiheit (Footer und mobiles Menü, ohne Login; nur bei Online-Verkauf bzw. Online-Termin nach BFSG 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)

- [Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie](https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo) `akkordeon-panels`

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Abteilungen als Bildstreifen über die volle Breite; der Streifen unter dem Zeiger wächst auf das Fünffache, der Name steht groß darin.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und interaktiv: Streifen über 12 Spalten, mindestens 60 vh hoch
- Muster: [Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie](https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo) `akkordeon-panels`
- 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: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel) `kontur-button-zeichnen` · Variante „Doppelkontur rückt auf“

## Weitere Bausteine

- Seitenwechsel: [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“, [Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie](https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo) `akkordeon-panels`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“

## 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?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
- [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

- in-den-warenkorb-flug / like-herz-burst – Signaturen von d2c-produkt-zuerst
- bento-grid-interaktiv – Produkt-Bento gehört zu d2c; der Laden zeigt Abteilungen als Bildstreifen
- live-uhr-und-standort – Signatur von gastro-warm-appetitlich; der Status kommt aus echten Zeiten
- flick-karten-stapel – Signatur von friseur-salon-handschrift
- marquee-laufband – Neuheiten als Laufband sind nicht lesbar
- zahlen-odometer – keine hochgezählten Bestandszahlen
- Countdown, „nur noch 2“ ohne echten Bestand – künstliche Verknappung
- smooth-scroll-lenis – stört Reihe, Filter und Formular
- konfetti-erfolg – nach der Reservierung eine ruhige Bestätigung
- papier-druck-textur – Papier- und Karton-Fake; die Farben reichen
- „nachhaltig“, „plastikfrei“, „regional“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)

## Regeln

- Erster Bildschirm: Schaufenster im Rahmen, Name, ein Satz zum Sortiment, Status aus echten Zeiten, zwei Wege. Ladenbesuch geht vor Online-Kauf.
- Signatur (akkordeon-panels): drei bis sechs Bildstreifen mit echten Fotos aus dem Laden; der aktive Streifen wächst, der Name steht in Libre Caslon Display, ein Satz erscheint. Hover mit 50 ms Verzögerung, Fokus und Tippen sofort; mobil senkrechtes Akkordeon. Kein Text, der vor dem Öffnen gelesen werden muss.
- Reservieren statt Shop: Wer nur reserviert und im Laden bezahlt, schließt online keinen Kaufvertrag; das klar sagen („Wir legen es bis [Tag] zurück“). Ob dennoch Pflichten greifen, vom Kunden prüfen lassen.
- Preise inkl. MwSt.; Streichpreise und Aktionen nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); Bücher unterliegen der Buchpreisbindung, keine Rabatte darauf.
- Online-Verkauf: Gesamtpreis, Versand, Lieferzeit, „zahlungspflichtig bestellen“, Widerrufs-Button, EU-Gewährleistungshinweis (eu-gewaehrleistungshinweis), Hersteller- und Sicherheitsangaben nach GPSR; Ratenwerbung mit allen Pflichtangaben direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).
- Werkstatt: Festpreise mit Stand-Datum und dem Satz, was nicht enthalten ist; das Europäische Formular für Reparaturinformationen ist freiwillig (reparatur-richtpreise, Variante betrieb).
- Typografie: Libre Caslon Display nur ab 1.5rem; Kursives in Familjen Grotesk Italic; Preise mit Tabellenziffern.
- Knöpfe: Schaufenstergrün gefüllt mit allen Zuständen (button-zustaende) für Reservieren und Termin; Nebenwege als versetzte Doppelkontur wie ein Stempel (kontur-button-zeichnen, Variante doppel).
- Pflichtangaben (Leitfaden 8a): Impressum, Datenschutz; Instagram und Karten erst nach Klick; bei Fahrrad, E-Bike und Elektrogeräten die Hinweise zur Rücknahme von Altgeräten und Batterien nach Elektro- und Batterierecht, vom Kunden prüfen lassen.
- Filialen als Fassaden-Zeichnungen aus einer Familie (zeichnungsfamilie-produkte, Variante laden): jede Filiale an ihrer Dachform erkennbar, darunter Adresse und Status; Service-Icons und Leerzustände aus derselben Hand. Die Bildstreifen der Signatur bleiben echte Fotos aus dem Laden.

## Rezept-Varianten

- **Fahrradladen mit Werkstatt**: Schrift, Farbe, Stil und Signatur bleiben; die Bildstreifen zeigen Stadt, Trekking, E-Bike, Lastenrad und Werkstatt. Werkstatt mit Festpreisen und Termin wie Mount7, Probefahrt und Größenberatung als Termin, Dienstrad-Leasing als Ablauf in Schritten. E-Bike-Daten (Motor, Akku in Wh, Reichweite nur als Spanne nach Herstellerangabe) in einer Tabelle. Raten- und Leasingwerbung mit den Pflichtangaben, ob sie beim Dienstrad greifen, vom Kunden prüfen lassen. S-Pedelecs mit Hinweis auf Versicherungskennzeichen und Führerschein.
- **Blumenladen und Floristik**: Bildstreifen für Strauß der Woche, Hochzeit, Trauer, Blumenabo und Workshops; Trauer mit ruhigem Bild und eigener Seite, nie neben Aktionen. Bestellung mit Liefertag, Zeitfenster und Bestellschluss, Liefergebiet per Postleitzahl, Kartengruß mit Zeichenzahl. Schnittblumen sind schnell verderblich und nach Wunsch gefertigt, das Widerrufsrecht entfällt meist (§ 312g Abs. 2 Nr. 1 und 2 BGB); ein Blumenabo ist ein Dauervertrag mit Kündigungsbutton. Vom Kunden prüfen lassen.
- **Buchhandlung**: Bestellung bis zum nächsten Tag zur Abholung ist der wichtigste Weg; Buchpreisbindung beachten (keine Rabatte, Preise wie verlegt). Empfehlungen mit Name der Buchhändlerin, Lesungen als Veranstaltungen mit Ticket oder Eintritt frei.

## Vor der Abgabe

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