# Bauplan: Yoga und Achtsamkeit: Atem und Stundenplan

Rezept `yoga-studio-achtsamkeit` · Yogastudio / Pilates-Studio / Meditation und Achtsamkeit / Yogalehrer:in mit Kursen, Workshops und Retreats · Stimmung: ruhig, warm, geerdet, klar · Stand 02.11.2026

Ein ruhiges Studio verkauft die erste Stunde und den Stundenplan: Was passt zu mir als Anfänger:in, wann ist die nächste Klasse, was kostet eine Karte, wie läuft es beim ersten Mal. Die Seite ist leise: ein Foto im Passepartout, darunter sofort der Wochenplan mit Einsteigerfilter, dann Neu-hier, Stile mit dem ehrlichen Satz, für wen eine Klasse nicht passt, Preise in einer Tabelle, Workshops und Retreats. Ein einziger Absatz, wie hier unterrichtet wird, füllt sich beim Lesen Wort für Wort. Fraunces weich und leicht, Familjen Grotesk für Text. Leinen, Ton, Abend und ein dunkles Salbei für Buchen. Eigenes Rezept statt der Variante „Yoga, Pilates, Tanz“ in fitness-studio-rhythmus, deren harte Takt-Welt (Anybody, token-brutal-hart) zu ruhigen Studios nicht passt.

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

## Schrift

- Headline: `fraunces` · Text: `familjen-grotesk`
- Größen: h1 Fraunces clamp(2.5rem, 1.5rem + 4vw, 5rem), opsz an die Größe gekoppelt (144 erst ab 4.5rem), wght 300 erst ab 4rem (darunter 400), SOFT 100, WONK 0, Laufweite -0.015em, Zeilenhöhe 1.02; h2 clamp(1.875rem, 1.3rem + 2vw, 3rem), opsz an die Größe gekoppelt, wght 450; Kursive für Stilnamen. Der Statement-Absatz der Signatur Fraunces 1.75rem bis 2.5rem, wght 350, Zeilenhöhe 1.3, höchstens 32ch. Fließtext Familjen Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.65, höchstens 62ch. Stundenplan Familjen Grotesk 500 mit Tabellenziffern. Knöpfe Familjen Grotesk 600, 1rem.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [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

Warm und gedämpft wie ein Raum am Abend: Leinen als Grund, Ton als Fläche für Stundenplan und Preise, Abendbraun für Footer und das Statement. Ein dunkles Salbei nur für Buchen und Probestunde. Keine Lila-, Pink- oder Türkis-Verläufe, keine Chakra-Farben, kein Weiß wie in einer Klinik.

- `--farbe-grund` #F2EEE8 (Grund Leinen)
- `--farbe-text` #2A2622 (Text (13,0 : 1 auf Grund))
- `--farbe-flaeche` #E3D8CA (Fläche Ton: Stundenplan, Preise, Neu-hier (Text 10,7 : 1))
- `--farbe-dunkel` #3A3430 (Dunkel Abend: Statement-Band, Footer (Weiß darauf 12,3 : 1))
- `--farbe-signal` #4C5B47 (Signal Salbei: Klasse buchen, Probestunde (Weiß darauf 7,3 : 1; als Fläche auf Grund 6,3 : 1, auf Ton 5,2 : 1); auf Abend stattdessen Leinen-Knopf mit dunkler Schrift)
- `--farbe-leise` #655E57 (Leise: Meta-Angaben, Lehrer:in und Raum im Plan (5,5 : 1 auf Grund, 4,5 : 1 auf Ton))
- `--farbe-linie` #D7CFC4 (Linie: Haarlinien im Stundenplan (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Luxus weich“](https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo) `token-luxus-weich`
- 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.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 300 (Filter, Dialog öffnen), 200 (schließen), 1400 (Masken-Reveal eines Fotos, einmal), 2200 (Hero-Foto 1.04 → 1, einmal); Statement scrollgekoppelt
- Regel: Langsam und selten: Fotos öffnen sich einmal, der eine Statement-Absatz füllt sich beim Scrollen Wort für Wort von hellem Ton zu voller Textfarbe. Stundenplan, Preise und Formulare stehen sofort. Kein Atem-Kreis, keine Dauerbewegung, keine Hintergrundmusik. Bei prefers-reduced-motion steht der Absatz in voller Farbe, Fotos stehen.
- Hinweis: Weich wie ein Atemzug, aber nur für Bilder: Fotos öffnen sich einmal (1400 ms, sine.inOut), das Hero-Foto skaliert einmal von 1.04 auf 1. Die Signatur ist scrollgekoppelt und hat keine eigene Kurve. Stundenplan-Filter, Buchung, Preise und Dialoge laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), weil token-luxus-weich Formulare ausschließt.

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

- Hauptkurve: `cubic-bezier(0.37, 0, 0.63, 1)` (--ease) für nur Bilder, langsam und selten (sine.inOut); Stundenplan-Filter, Buchung, Preise, Dialoge über das UI-Paar; die Signatur ist scrollgekoppelt; 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 1400 ms, seitenwechsel 500 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 Stundenplan: ab 0 ms, steht
2. Hero-Foto (passepartout): ab 0 ms, steht ab dem ersten Bild; skaliert einmal 1.04 → 1 in 2200 ms (Ausklang, zählt nicht zu ende_ms)
3. H1: ab 200/320/440 ms, 1200 ms, Zeilen steigen aus Masken, --ease-ein
4. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 1640 ms. Wiederholt: H1 steht, Foto steht.

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

- Bild-Maske (`clip-path-bild-reveal`): Fotos von Raum und Kursen; 1400ms, Versatz 120 ms, Maske öffnet sich einmal; einmal, wenn 33 % sichtbar (IntersectionObserver)
- Kapitelkante (`kapitel-kante-signatur`): Kapitelgrenzen der Startseite (Stundenplan → Stile und Klassen → Wie wir unterrichten), Kapitel-Wort auf dem Scheitel; scrollgekoppelt, Versatz 0 ms, die Fläche des nächsten Kapitels wölbt sich wie ein Atemzug (0 → 1,12 → 1, cubic-bezier(0.37, 0, 0.63, 1)), nur mit dem Scroll; scrollgekoppelt (animation-timeline: view(); animation-range-start cover 5 %, animation-range-end cover 50 %, als Langform nach der Kurzschreibweise animation); ohne Unterstützung Endzustand
- 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, Stundenplan, Preise, Formulare (Rezept)

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

- Link: Unterstreichung wächst von links
- Knopf: tiefen-taste-3d soft; pfeil-icon-button linie
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px, Bild steht
- Bild: kein Zoom

**Signatur** `scroll-word-highlight`: Der eine Statement-Absatz füllt sich beim Scrollen Wort für Wort von hellem Ton zu voller Textfarbe (scrollgekoppelt, kein Weg). Auslöser: Scroll; Wiederholung: nur mit dem Scroll.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vor: das Bild wandert, der Text blendet nach; zurück gespiegelt. Geteilt: kopf, bild (Kursbild → Kopfbild der Kursseite). Dauer 500 ms. Kurve: `--ease (sine.inOut), keine Federn`.

**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). Langsam und selten (Rezept). Keine Dauerbewegung (Rezept). Kapitelkanten nur mit dem Scroll, nie von selbst.

**Reduzierte Bewegung:** Absatz steht in voller Farbe, Fotos stehen (Rezept); Seitenwechsel als Überblendung. Kapitelkanten stehen gewölbt ohne Bewegung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Atem-Kreis (Rezept); Hintergrundmusik und Klangschalen-Autoplay (Rezept); Räucherrauch, Lotus oder Wellen als Animation; Federn.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach scroll-word-highlight. Rest eigene Festlegung. Kapitelkante 05.11.2026 aus kapitel-kante-signatur (woelbung, Yoga).

## 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, 72, 104, 152
- Sektionsabstand: clamp(72px, 10vw, 152px)
- Dichte: luftig
- Hinweis: Viel Atemraum zwischen Kapiteln; der Stundenplan bleibt kompakt (8 px Zeilenabstand), damit er auf einen Bildschirm passt.
- Spalten: 12
- Seitenrand: clamp(20px, 5vw, 72px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1200px
- Raster: Hero 5/7 (Text links, Passepartout rechts). Statement mittig über 8 Spalten. Stundenplan über 12 Spalten, mobil Tages-Reiter.
- Radius klein: 10px
- Radius groß: 24px
- Pillenform für Buttons: True
- Linie: 1px #D7CFC4 im Stundenplan; Felder 1px in Leise (3:1)
- Schatten: nur die weiche Taste (tiefen-taste-3d, soft)
- Form: Weich und rund wie eine Matte; Knöpfe als Pille.

## Bildsprache

- Licht: Weiches Seitenlicht am Morgen oder Abend, warm, nicht überbelichtet.
- Ausschnitt: Raum mit Matten in der Totale, Hände und Füße im Detail, Klasse von hinten oder seitlich.
- Personen: Ja, mit Einwilligung; echte Teilnehmende, keine perfekten Posen.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Strand-Sonnenuntergänge, keine Lotus- und Chakra-Grafiken, keine Stock-Models in Extremposen.
- 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 (Studio) oder Sie (Präventionskurse), dann durchgehend
- Sätze: Ruhig und konkret: Klasse, Uhrzeit, Niveau, was du mitbringst.
- Haltung: Geerdet und einladend, ohne Esoterik-Floskeln.
- Tonproben: Yin, 75 Minuten, ruhig. Gut nach einem langen Tag., Erste Stunde: Komm zehn Minuten früher, Matten haben wir.
- Nicht: „Finde zu dir selbst“, „heilende Energie“, „Detox“, Heilversprechen.

## Hero

Foto-Hero im Passepartout: ein ruhiges Foto aus dem eigenen Studio (Raum im Abendlicht oder eine Klasse von hinten), viel Leinen ringsum. Daneben ein Satz, was hier unterrichtet wird und für wen, und zwei Wege: „Stundenplan“ und „Erste Stunde buchen“. Direkt darunter die nächsten drei Klassen mit Uhrzeit. Keine Sonnenuntergänge am Strand, keine Lotus-Icons.

- Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto im Passepartout über 6 bis 12 mit 48 px Leinen ringsum; mobil Foto oben.
- Bild: Ruhiges Foto aus dem eigenen Studio, 4:5.
- Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5rem), Fraunces 300 SOFT 100; kein Label darüber.
- Handlung: „Erste Stunde buchen“ (Salbei, weiche Taste) und „Stundenplan“ (Textlink mit Pfeil).
- Zusatz: Die nächsten drei Klassen mit Uhrzeit und freien Plätzen direkt unter dem Hero.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=passepartout) `foto-hero` · Variante „Kleiner Abzug auf Fläche“

## Sektionen in dieser Reihenfolge

1. **Stundenplan diese Woche (Stil, Niveau, Lehrer:in, Raum, freie Plätze als Text; Einsteigerfilter zuerst; Ausfälle und Vertretungen am Termin; Buchung im Studio-Tool nach Klick, Warteliste)**: [Wochen-Kursplan mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio) `wochen-kursplan` · Variante „Yoga- und Fitnessstudio“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=linkout) `termin-buchung-zwei-klick` · Variante „Link-out in neuem Tab“
2. **Neu hier? (erste Stunde: was mitbringen, wann da sein, Matten leihen, Einsteigerkurs mit Datum und Preis; Schwangerschaft, Verletzungen und Erkrankungen vorher sagen; ehrlich, wann eine Klasse nicht passt)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“
3. **Stile und Klassen (Hatha, Vinyasa, Yin, Pilates, Meditation; je Klasse Tempo, Niveau, Dauer und für wen nicht; je Stil eine Unterseite, Antwort zuerst)**: [Raster am Desktop, Wischreihe am Telefon](https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=einreihig) `raster-zu-wischreihe` · Variante „Einreihig“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
4. **Wie wir unterrichten (ein Absatz, der sich beim Lesen Wort für Wort füllt; darunter die Lehrer:innen in einem Satz mit kleinen Porträts, Ausbildung und Stile)**: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`, [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“
5. **Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Lehrerin oder Lehrer mit Stilen, Ausbildung, Schwerpunkten, Sprachen und eigenen Stunden im Plan; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=stylistin) `person-detailseite` · Variante „Stylistin“
6. **Preise (Probestunde, Einzelstunde, 10er-Karte mit Gültigkeit, Monatsabo mit Mindestlaufzeit und Kündigungsfrist, Ermäßigung; eine Tabelle; online geschlossene Abos mit Kündigungsbutton)**: [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=kurskarte) `preisseite-geruest` · Variante „Kurskarte“, [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“
7. **Workshops, Ausbildungen, Retreats (Einzeltermine mit Datum, Ort, Preis, enthaltenen Leistungen und Storno; Retreats mit Unterkunft ggf. als Pauschalreise)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
8. **Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: Workshop oder Retreat mit Datum, Ort, Preis, enthaltenen Leistungen, Storno 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=ticket) `veranstaltung-detailseite` · Variante „Ticket“
9. **Online-Klassen (nur, wenn es sie gibt: eigener Player mit Kapiteln und Transkript; Zugang über das Studio-Tool)**: [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel) `eigener-videoplayer` · Variante „Kursvideo mit Kapiteln“
10. **Studio und Räume (Fotos der Räume, Umkleiden, Duschen, Stufen und Aufzug, Anfahrt mit Rad und Bahn; Karte per 2-Klick)**: [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“, [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“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
11. **Frage stellen (höchstens fünf Angaben als ein Satz; Gesundheitsangaben nur freiwillig)**: [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)“
12. **Gutscheine (nur mit Zahlungsdienst und Codeverwaltung)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
13. **Studiobrief (neue Kurse und Workshops, wenige Briefe; Sparte und Takt wählbar)**: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur) `footer-newsletter-mit-persoenlichkeit` · Variante „Wochenzettel mit Programmauswahl“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=bestaetigen) `danke-seite-naechste-schritte` · Variante „E-Mail bestätigen“
14. **Erklärung zur Barrierefreiheit (bei Online-Buchung und Abos nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`

## Moment (Pflicht: woran man sich erinnert)

- Was: Der eine Statement-Absatz in großer Schrift füllt sich beim Scrollen Wort für Wort von hellem Ton zu voller Textfarbe. Langsam und groß.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und scrollgekoppelt: Absatz bis 2.5rem, höchstens 32ch, eigene Bildschirmhöhe
- Muster: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`
- 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=soft) `tiefen-taste-3d` · Variante „Soft-Taste mit Kontur“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## 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=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`, [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`, [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=woelbung) `kapitel-kante-signatur` · Variante „Wölbung (Yoga, Atemzug)“
- Hover: [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`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo) `css-native-karussell`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur) `footer-newsletter-mit-persoenlichkeit` · Variante „Wochenzettel mit Programmauswahl“

## 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?v=bestaetigen) `danke-seite-naechste-schritte` · Variante „E-Mail bestätigen“
- [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
- token-brutal-hart – harter Takt passt nicht zu ruhigen Studios
- hovercard-interest-invoker – Signatur von praxis-gesundheit-ruhig
- fluessig-marmor-hintergrund / mesh-gradient-shader – Pastell- und Aurora-Verläufe sind das Spiritualitäts-Klischee
- smooth-scroll-lenis – verzögert Stundenplan und Buchung, auch wenn es „ruhig“ wirkt
- konfetti-erfolg – nach der Buchung eine ruhige Bestätigung
- zahlen-odometer – keine hochgezählten Teilnehmerzahlen
- marquee-laufband – unruhig
- Lotus-, Om- und Chakra-Ornamente, Sonnenuntergänge am Strand, Stockfotos in perfekter Pose – eigene Fotos aus dem Studio
- Heilversprechen („heilt Rückenschmerzen“, „gegen Depression“) und „von der Krankenkasse bezahlt“ ohne Zertifizierung

## Regeln

- Erster Bildschirm: Foto im Passepartout, ein Satz zum Unterricht, zwei Wege „Stundenplan“ und „Erste Stunde buchen“, darunter die nächsten drei Klassen mit Uhrzeit.
- Signatur (scroll-word-highlight): genau ein Absatz pro Seite (Wie wir unterrichten), höchstens etwa 40 Wörter, füllt sich beim Scrollen Wort für Wort von hellem Ton zur Textfarbe; Bereich Oberkante bei 90 % bis Unterkante bei 50 % des Viewports. Nie für Preise, Regeln oder lange Texte; bei reduzierter Bewegung voller Text.
- Stundenplan (wochen-kursplan, Variante studio): Einsteigerfilter zuerst, freie Plätze als Text, Ausfälle am Termin; Buchung im Studio-Tool nach Klick oder in neuem Tab, Telefon daneben.
- Ehrlich über Grenzen: je Klasse für wen sie nicht passt; Schwangerschaft, Verletzungen und Erkrankungen vorher sagen; Gesundheitsangaben nie als Pflichtfeld.
- Keine Heilversprechen und keine Wirkaussagen zu Krankheiten (Heilmittelwerbegesetz, Irreführung); Präventionskurse mit Kassenzuschuss nur mit gültiger Zertifizierung und Kursnummer nennen. Vom Kunden prüfen lassen.
- Verträge: Preise inkl. MwSt.; Monatsabo mit Mindestlaufzeit, Verlängerung und Kündigungsfrist in der Tabelle; online geschlossene Verträge mit Widerrufs- und Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig); Kurse mit festem Termin können vom Widerruf ausgenommen sein. Retreats mit Unterkunft und weiteren Leistungen können Pauschalreisen sein (Formblatt, Insolvenzsicherung). Vom Kunden prüfen lassen.
- Fotos von Teilnehmenden nur mit Einwilligung; Online-Klassen mit Musik nur mit geklärten Rechten.
- Knöpfe: Salbei als weiche Taste mit 1-px-Kontur (tiefen-taste-3d, Variante soft) für Buchen und Probestunde, nie auf dunklem Grund; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie).
- Kapitelkanten als Wölbung wie ein Atemzug (kapitel-kante-signatur, Variante woelbung): nur mit dem Scroll, höchstens drei auf der Startseite, nie über Stundenplan und Preisen; kein Atem-Kreis, der von selbst läuft.

## Rezept-Varianten

- **Pilates-Studio mit Geräten (Reformer)**: Schrift, Farbe, Stil und Signatur bleiben. Kleine Gruppen und Einzeltraining an Geräten: Plätze je Klasse als Zahl, Einführungsstunde Pflicht vor Gruppenklassen, Preise je Gerätestunde. Fotos der Geräte im echten Raum.
- **Yogalehrer:in ohne eigenes Studio**: Kurse in gemieteten Räumen und online: Orte je Kurs mit Anfahrt, Kursblöcke statt Wochenplan (programm-kalender), Retreats als Hauptangebot. Über mich als Statement mit Ausbildung.

## Vor der Abgabe

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