# Bauplan: Freizeit und Erlebnis: Zeitfenster, Gruppe, Geburtstag

Rezept `freizeit-erlebnis-ticket` · Freizeitanlage mit Zeitfenstern (Kletter- und Boulderhalle, Escape Room, Minigolf, Trampolinpark, Lasertag, Kartbahn, Bowling) · Stimmung: laut, fröhlich, klar, sportlich · Stand 02.11.2026

Verkauft werden Zeitfenster, keine Mitgliedschaft: Wann ist frei, was kostet es für Erwachsene, Kinder und Gruppen, wie läuft ein Kindergeburtstag, welche Regeln gelten. Der Hero ist ein Hallenfoto mit Leiste für Datum und Personen, der einzige große Knopf verformt sich beim Darüberfahren. Darunter Zeitfenster mit Auslastung nur aus echten Zahlen, Preise als Liste, Geburtstag und Firmenevent als Pakete, Regeln und Sicherheit lesbar, Gutscheine. Anybody kräftig und schmal für Überschriften, TikTok Sans für Text. Hallengrau, Dunkel und eine kräftige Griff-Farbe. Abgrenzung zu fitness-studio-rhythmus (Mitgliedschaft, Kursplan) und eventlocation-hochzeit (Raummiete).

## 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 `freizeit-erlebnis-ticket`) und https://cecodesign.de/lab/fundus/rezepte/freizeit-erlebnis-ticket/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `anybody` · Text: `tiktok-sans`
- Größen: h1 Anybody clamp(2.75rem, 1.4rem + 6vw, 6.5rem), wdth 70, wght 850, Laufweite -0.02em, Zeilenhöhe 0.9; h2 clamp(2rem, 1.4rem + 2.6vw, 3.5rem), wdth 80, wght 800. Fließtext TikTok Sans 1.0625rem (17 px), wdth 100, wght 400, Zeilenhöhe 1.55, höchstens 64ch. Zeitfenster, Preise und Plätze TikTok Sans 600 mit Tabellenziffern, Uhrzeiten 1.25rem. Knöpfe TikTok Sans 700, 1.0625rem.
- 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`

## Farbe

Hallengrau als Grund, helleres Grau als Fläche für Preise und Pakete, fast schwarzes Hallendunkel für Hero-Leiste und Footer. Eine kräftige Farbe aus Griffen, Bahnen oder Raumdesign, hier Griff-Magenta, nur für Zeitfenster buchen. Je Anlage austauschbar, immer mit 4,5 : 1 geprüft. Keine Neon-Verläufe, keine Comic-Explosionen.

- `--farbe-grund` #F4F3EF (Grund Hallengrau)
- `--farbe-text` #17161A (Text (16,2 : 1 auf Grund))
- `--farbe-flaeche` #E6E3DA (Fläche Matte: Preise, Pakete, Regeln (Text 14,0 : 1))
- `--farbe-dunkel` #19181D (Dunkel Halle: Hero-Leiste, Footer (Weiß darauf 17,7 : 1))
- `--farbe-signal` #AE1650 (Signal Griff-Magenta: Zeitfenster buchen (Weiß darauf 6,9 : 1; als Fläche auf Grund 6,2 : 1, auf Matte 5,4 : 1); auf Dunkel stattdessen heller Knopf mit dunkler Schrift)
- `--farbe-leise` #5B595F (Leise: Meta-Angaben, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Matte))
- `--farbe-linie` #D3D0C7 (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 (Zähler, Häkchen), 500 (Form des Signatur-Knopfs), 300 (Panel, Dialog öffnen), 200 (schließen)
- Regel: Federn nie auf Flächen, Fotos oder Deckkraft. Der Signatur-Knopf verformt sich nur bei Hover und Fokus, nie im Ruhezustand. Freie Plätze ändern sich ohne Animation. Bei prefers-reduced-motion wechseln Formen und Zähler sofort.
- Hinweis: Federn nur auf kleinen Elementen: Personen-Zähler, Häkchen, der Signatur-Knopf. Zeitfenster-Liste, Buchung, Dialoge und Reiter ü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.34, 1.56, 0.64, 1)` (--ease) für nur kleine Elemente (Personen-Zähler, Häkchen, Signatur-Knopf); Zeitfenster, Buchung, Dialoge, Reiter ü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 500 ms, seitenwechsel 450 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 und Ticket-Leiste: ab 0 ms, stehen
2. Hero-Foto: ab 0 ms, steht (LCP)
3. H1: ab 0/40/80 ms, 450 ms, Zeilen aus Masken, --ui-ease-ein
4. Freie Zeitfenster heute: ab 0 ms, stehen (freie Plätze ändern sich ohne Animation, Rezept)
5. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 530 ms. Wiederholt: H1 steht.

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

- Bild-Maske (`clip-path-bild-reveal`): Bilder der Attraktionen; 500ms, Versatz 50 ms, clip-path von unten, ohne Federn; 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, Zeitfenster und freie Plätze, Preise und Tarife, Buchung

**Hover** (400 ms ein, 240 ms aus, Knopf --ease / --ease-aus, Karte --ui-ease-ein / --ui-ease-aus; nur mit Zeiger):

- Link: Unterstreichung wächst von links
- Knopf: Signatur-Knopf (clip-path-form-hover); tiefen-taste-3d stapel federt leicht; kontur-button-zeichnen zeichnen
- Karte: karte-ganzflaechig-klickbar raster mit bild-zoom-in-maske (scale 1.05) über das UI-Paar
- Bild: wie Karte

**Signatur** `clip-path-form-hover` (Variante basis): Der Haupt-Knopf morpht bei Hover und Fokus in eine zweite Form (Blob oder Pfeilspitze) in 500 ms mit --ease (federt leicht), Farbe getrennt 200 ms linear; nie im Ruhezustand (Rezept). Auslöser: Hover, Fokus; Wiederholung: je Hover.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vorwaerts (Attraktion → Buchung) von rechts, zurueck gespiegelt. Geteilt: kopf, leiste (Ticket-Leiste). Dauer 450 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). Federn nie auf Flächen, Fotos oder Deckkraft (Rezept). Lebhaft, nie zappelig: höchstens eine federnde Bewegung zugleich.

**Reduzierte Bewegung:** Formen und Zähler wechseln sofort (Rezept); Bilder stehen; Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Konfetti (Rezept); Comic-Explosionen (Rezept); Countdown und „nur noch 2 Plätze“ ohne echte Belegung (Rezept); hüpfende Maskottchen.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach clip-path-form-hover (Blob 500 ms; Demo-Feder auf --ease umgestellt). 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, 128
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: mittel
- Hinweis: Kräftig und klar: große Überschriften, Zeitfenster als Kacheln mit 12 px Spalt, Preise eng.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 24px)
- Maximale Breite: 1320px
- Raster: Hero randlos mit Leiste im unteren Drittel. Zeitfenster als Raster mit 4 bis 6 Spalten, mobil 2. Pakete als Tabelle mit drei Spalten.
- Radius klein: 8px
- Radius groß: 20px
- Pillenform für Buttons: False
- Linie: 1px #D3D0C7 in Preislisten; Felder 1px in Leise (3:1)
- Schatten: nur die Tiefen-Taste (Kante in Dunkel)
- Form: Kräftig gerundet wie Griffe und Matten; die Signatur-Form ist die einzige freie Silhouette.

## Bildsprache

- Licht: Hallenlicht, kräftige Farben der Anlage, Bewegung erlaubt.
- Ausschnitt: Menschen mitten in der Aktion, Gruppen von hinten oder seitlich, Anlage in der Totale.
- Personen: Ja, mit Einwilligung; Kinder nur mit Einwilligung der Sorgeberechtigten.
- Formate: 16:9, 4:5, 1:1
- Nicht: Keine Stockfotos jubelnder Kinder, keine Comic-Grafiken, keine Bilder, die Rätsel verraten.
- 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.

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

- Anrede: du (Familien und Gruppen), Sie für Firmen-Anfragen
- Sätze: Kurz, aktiv, mit Zahl: Alter, Dauer, Preis, Uhrzeit.
- Haltung: Fröhlich und klar, ohne Übertreibung.
- Tonproben: Ab 5 Jahren. 90 Minuten Bouldern, danach Kuchen am Tisch., Samstag, 14:30 Uhr: noch 6 Plätze.
- Nicht: „Mega-Spaß garantiert“, „das ultimative Erlebnis“, „nur heute“.

## Hero

Foto-Hero mit Leiste: ein echtes Hallenfoto mit Menschen in Bewegung (mit Einwilligung), im unteren Bilddrittel eine dunkle Leiste mit Datum und Personen (Erwachsene, Kinder) und dem einen Knopf „Zeitfenster finden“, der sich bei Hover verformt. Daneben ein Satz, was man hier tut und ab welchem Alter. Kein Comic-Hero, keine Stockfotos.

- Raster: Foto randlos über 12 Spalten, Satz über Spalte 1 bis 6 im oberen Drittel, Leiste über 1 bis 12 im unteren Drittel; mobil Foto oben, Leiste als Dialog.
- Bild: Echtes Hallenfoto mit Menschen in Bewegung, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.75rem, 1.4rem + 6vw, 6.5rem), Anybody wdth 70, wght 850; kein Label darüber.
- Handlung: In der Leiste Datum, Erwachsene, Kinder und der eine Knopf „Zeitfenster finden“ (Griff-Magenta, Signatur-Form); daneben Telefon.
- Zusatz: Mindestalter und Öffnungszeit heute als Zeile unter der H1.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste) `foto-hero-mit-leiste` · Variante „Buchungsleiste im Bild“

## Sektionen in dieser Reihenfolge

1. **Zeitfenster und Auslastung (Datum und Personen aus der Leiste → freie Zeitfenster mit Plätzen als Zahl und Wort; Auslastung nur mit echten Zählwerten; Buchungssystem erst nach Klick, Telefon daneben)**: [Wunschtermin mit freien Terminen und Anfrage-Übergabe](https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo?v=zeitfenster) `termin-verfuegbarkeit-anfrage` · Variante „Zeitfenster statt Uhrzeit“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter) `termin-buchung-zwei-klick` · Variante „Platzhalter mit 2-Klick“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=auslastung) `oeffnungszeiten-status` · Variante „Auslastung jetzt“, [Mengen-Stepper mit Einheit und Summe](https://cecodesign.de/lab/fundus/mikroanimationen/mengen-stepper/demo?v=tickets) `mengen-stepper` · Variante „Tickets“
2. **Preise (Erwachsene, Kinder, Familie, Gruppe, Zehnerkarte, Leihausrüstung; Preise inkl. MwSt.; Ermäßigung mit Nachweis; Stand-Datum)**: [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=kurskarte) `preisseite-geruest` · Variante „Kurskarte“, [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste) `speisekarte-editorial` · Variante „Preisliste Dienstleistung“
3. **Kindergeburtstag, Schulklassen und Firmenevents (je Paket Alter, Dauer, Gruppengröße, Preis, was enthalten ist, Betreuung; Einverständniserklärung als PDF; Anfrage mit Datum, Anzahl, Alter)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=satz) `kontakt-anfrage-formular` · Variante „Satz-Formular (Lückentext)“
4. **Dein erstes Mal (so läuft es ab: ankommen, Einweisung, losgehen; was mitbringen; Mindestalter und Aufsicht; Hallenregeln kurz, die Benutzungsordnung als eigene Seite)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
5. **Was es hier gibt (Bereiche, Räume, Bahnen oder Rätsel als Kacheln mit Foto, Schwierigkeit und Dauer)**: [Raster am Desktop, Wischreihe am Telefon](https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=einreihig) `raster-zu-wischreihe` · Variante „Einreihig“, [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung) `bild-zoom-in-maske` · Variante „Richtungsabhängiger Clip mit farbiger Decke“
6. **Kurse und Events (Technikkurse, Turniere, Nachtöffnung; Einzeltermine mit Datum, Preis, Plätzen)**: [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: Technikkurs, Turnier oder Nachtöffnung mit Datum, Alter, Niveau, Preis, Plätzen und Buchung; 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=ticket) `veranstaltung-detailseite` · Variante „Ticket“, [Teilen und In den Kalender](https://cecodesign.de/lab/fundus/mikroanimationen/teilen-und-kalender/demo?v=veranstaltung) `teilen-und-kalender` · Variante „Veranstaltung“, [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=teilbild) `favicon-teilbild-system` · Variante „Teilbild je Seite“
8. **Gutscheine (Wertgutschein oder Erlebnis; nur mit Zahlungsdienst und Codeverwaltung)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
9. **Bewertungen (Google- oder Plattform-Bewertungen mit Schnitt, Anzahl, Stand und Echtheitshinweis direkt daneben)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „Band unter dem Hero“
10. **Café (nur, wenn es eins gibt: Karte mit Allergenen, Preise inkl. MwSt.)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro) `speisekarte-editorial` · Variante „Bistro-Tafel“
11. **Anfahrt und Öffnungszeiten (Ferien und Feiertage nach Bundesland, Parken, Bus und Bahn; Adresse als Text, Karte per 2-Klick)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [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. **Vertrag kündigen und Barrierefreiheit (Kündigungsbutton nur bei Abos und Mitgliedschaften; Online-Tickets 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)

- [Form-Morph-Buttons (Clip-Path)](https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis) `clip-path-form-hover` · Variante „Clip-Path-Morph: Blob, Pfeil, Wölbung“

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Halle in Bewegung: Hallenfoto randlos, unten die dunkle Leiste mit Datum und Personen; der große Knopf „Zeitfenster finden“ verformt sich bei Zeiger und Fokus, danach springen die freien Zeitfenster als Reihe auf.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Foto 100 svh, Knopf mindestens 64 px hoch
- Muster: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste) `foto-hero-mit-leiste` · Variante „Buchungsleiste im Bild“, [Form-Morph-Buttons (Clip-Path)](https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis) `clip-path-form-hover` · Variante „Clip-Path-Morph: Blob, Pfeil, Wölbung“
- 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: [Tiefen-Taste (3D-Button)](https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=stapel) `tiefen-taste-3d` · Variante „Stapel aus Schatten, Kante und Front“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen) `kontur-button-zeichnen` · Variante „Linie zeichnet sich“

## Weitere Bausteine

- 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=basis) `mobile-bottom-navigation` · Variante „Menü-Leiste wird Sheet (Fotografin)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Scroll-Hinweis, der verschwindet](https://cecodesign.de/lab/fundus/scroll/scroll-hinweis/demo?v=geraet) `scroll-hinweis` · Variante „Hinweis passend zum Gerät“
- Hover: [Form-Morph-Buttons (Clip-Path)](https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis) `clip-path-form-hover` · Variante „Clip-Path-Morph: Blob, Pfeil, Wölbung“, [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung) `bild-zoom-in-maske` · Variante „Richtungsabhängiger Clip mit farbiger Decke“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Icon-Squash-and-Stretch (Pfeil dehnt sich)](https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo) `icon-squash-stretch`, [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=partitur) `bewegung-als-css-funktion` · Variante „Partitur als CSS“
- 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?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

- variable-font-axes – Signatur von fitness-studio-rhythmus
- collage-scrapbook / horizontal-scroll-section – Signaturen von arbeitgeber-karriere
- konfetti-erfolg – nach der Buchung eine klare Bestätigung mit Zeitfenster und Hinweisen
- marquee-laufband – Preise und Zeiten als Laufband sind nicht lesbar
- zahlen-odometer – „100.000 Besucher“ wird nicht hochgezählt
- Countdown und „nur noch 2 Plätze“ ohne echte Belegung – künstliche Verknappung
- smooth-scroll-lenis – stört Zeitfenster und Buchung
- fluessig-marmor-hintergrund / mesh-gradient-shader – Neon-Verläufe sind Deko ohne Inhalt
- Comic-Explosionen, Stockfotos jubelnder Kinder – eigene Fotos aus der Halle mit Einwilligung

## Regeln

- Erster Bildschirm: Hallenfoto, Leiste mit Datum und Personen, ein großer Knopf, ein Satz mit Angebot und Mindestalter. Mobil öffnet die Leiste als Dialog.
- Signatur (clip-path-form-hover): nur der eine Knopf „Zeitfenster finden“ im Hero und der Abschluss-Knopf am Seitenende verformen sich bei Hover und Fokus (500 ms); nie in Formularen, nie mehrere nebeneinander. Auf Touch bleibt die Form, der Knopf reagiert mit Druck-Feedback.
- Zeitfenster: freie Plätze als Zahl und Wort („noch 6 Plätze“, „ausgebucht“) aus dem Buchungssystem; Auslastung nur mit echten Zählwerten (oeffnungszeiten-status, Variante auslastung). Ohne Datenquelle keine Live-Anzeige.
- Preise inkl. MwSt. mit Stand-Datum; Gruppen- und Geburtstagspakete mit Gesamtpreis und was enthalten ist; Leihausrüstung getrennt.
- Regeln und Sicherheit lesbar statt versteckt: Mindestalter, Aufsicht, Einweisung, Einverständniserklärung für Minderjährige als PDF zum Ausfüllen; Haftungsregeln in der Benutzungsordnung vom Kunden prüfen lassen (Haftungsausschlüsse für Körperschäden sind in AGB unwirksam, § 309 Nr. 7 BGB).
- Verträge: Tickets für einen festen Termin haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB), Gutscheine schon; Abos und Mitgliedschaften brauchen den Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
- Kinder und Fotos: Fotos von Kindern nur mit Einwilligung der Sorgeberechtigten; Geburtstagsfotos nie ohne Freigabe veröffentlichen. Jugendschutz beim Ausschank im Café beachten.
- Bewertungen von Plattformen nur mit Echtheitshinweis direkt daneben (bewertungsprofil-mit-echtheitshinweis).
- Knöpfe: Griff-Magenta als Tiefen-Taste (tiefen-taste-3d, Variante stapel) für Buchen, Nebenwege als Kontur; nie zwei Tiefen-Tasten nebeneinander.

## Rezept-Varianten

- **Escape Room**: Räume statt Bereiche: je Raum Spieleranzahl, Dauer, Schwierigkeit, Mindestalter, Grusel-Hinweis und Barrierefreiheit (Treppen, Enge). Zeitfenster je Raum; Preis pro Gruppe nach Personenzahl als Tabelle. Keine Spoiler in Bildern.

## Vor der Abgabe

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