# Bauplan: Studio: Rhythmus und Kursplan

Rezept `fitness-studio-rhythmus` · Fitnessstudio / Yoga- und Pilatesstudio / Kampfsportschule / Tanzschule (auch Sportverein mit Kursbetrieb) · Stimmung: energisch, direkt, motivierend, ehrlich · Stand 02.11.2026

Die Seite ist ein Fahrplan: Was läuft jetzt, wann ist mein Kurs, wie läuft das erste Training, was kostet es wirklich und wie komme ich wieder raus. Kreide als Grund, Hallenschwarz für Text, eine Limette nur für Probetraining und Buchen; eine breitenvariable Grotesk, die im Takt springt, Uhrzeiten in Mono. Bewegung ist Takt statt Kurve: harte Schnitte und Stufen für die Inszenierung, kurze präzise Übergänge für Buchung, Vertrag und Kündigung.

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

## Schrift

- Headline: `anybody` · Text: `funnel-sans` · Akzent: `azeret-mono`
- Größen: Hero-Zeile Anybody clamp(3rem, 1.5rem + 8vw, 9rem), wdth 50–100 (Takt), wght 800, Versal, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.3rem + 3vw, 3.5rem), wdth 75, wght 750; Kursnamen im Plan Anybody wdth 75, wght 700, 1.125rem. Fließtext Funnel Sans 1.0625rem/1.55, wght 400, max. 64ch; Knöpfe Funnel Sans 1rem wght 600. Uhrzeiten, Dauer, freie Plätze, Raum und Labels in Azeret Mono 0.8125rem, Labels Versal +0.08em, alle Ziffern tabular-nums.
- Techniken: [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [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`

## Farbe

Hallenlicht statt Neon-Nacht: Kreide als Grund, Hallenschwarz für Text und dunkle Bühnen (Kursplan-Kopf, Fußzeile), eine Limette als einziger Signalton für Probetraining, Buchen und Mitglied werden. Limette nie als Textfarbe auf hellem Grund, immer als Fläche mit dunkler Schrift, auf Kreide mit 2 px Rand. Kursarten unterscheiden sich per Text-Label, nicht per Farbe. Rot nur für Ausfall und Fehler.

- `--farbe-grund` #F2F1EC (Grund (Kreide))
- `--farbe-text` #121412 (Text, dunkle Sektionen, Kursplan-Kopf (16 : 1))
- `--farbe-signal` #CCFF33 (Signal Limette: Probetraining, Buchen (Text #121412, 15,8 : 1; auf Kreide mit 2 px Rand #121412))
- `--farbe-flaeche` #E2E1DA (Flächen, Kursplan-Raster)
- `--farbe-leise` #5E615C (Meta: Trainer:in, Raum, Dauer (5,6 : 1 auf Kreide))
- `--farbe-fehler` #B3261E (Ausfall, Fehler (sparsam, 5,8 : 1))

## Bewegung

- Animationsstil: [Animationsstil „Brutal hart“](https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/demo) `token-brutal-hart`
- Für UI: [Animationsstil „Tech präzise“ (Produkt-UI)](https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo) `token-tech-praezise`
- Kurve: linear bzw. steps(1, end) und steps(6, jump-none) (token-brutal-hart: Takt statt Kurve)
- Dauer: 0 (Bildwechsel, harter Schnitt), 80 je Stufe (Hero-Zeile in 6 Stufen = 480), 180 (Stufen-Einblendung mit 3 Stufen); UI nach token-tech-praezise: 70 (Hover, Farbe), 110–150 (Reiter, Filter, Tages-Reiter), 240 (Panels, Sheets, Dialog), Austritt 150
- Regel: Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, reagiert kurz und präzise. Nichts federt, nichts gleitet nach. Stufen sind Breiten- und Positionssprünge, keine Blitze: großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Wechseln Hero-Bilder ohne Nutzer länger als 5 s, gehört ein sichtbarer Pause-Knopf dazu (WCAG 2.2.2, bewegung-pausieren-schalter). Der Kursplan selbst bewegt sich nicht, nur der Filter wechselt die Ansicht ohne Übergang. Bei prefers-reduced-motion stehen alle Stufen sofort im Endzustand.
- Hinweis: token-brutal-hart nur in den Spielarten „Stufen“ und „harte Bildwechsel“: Takt für die Inszenierung (Hero-Zeile, Bildwechsel, Zeile „läuft gerade“), nie Terminal-Tippen, nie Flackern. Weil der Stil laut wann_nicht nicht zu Inhalten passt, die Vertrauen aufbauen müssen, laufen Tarife, Mitglied werden, Kündigung, Filter und Buchung auf animationsstil_ui token-tech-praezise (productive).

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

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 40, 56, 80, 112
- Sektionsabstand: clamp(48px, 6vw, 96px)
- Dichte: dicht
- Hinweis: Fahrplan statt Bühne: Kursplan-Zellen 8 bis 12 px Innenabstand, Tarife in einer Tabelle, kurze Sektionsabstände.
- Spalten: 12
- Seitenrand: clamp(12px, 3vw, 32px)
- Spaltenabstand: clamp(8px, 1.2vw, 16px)
- Maximale Breite: 1440px
- Raster: Kursplan am Desktop als Wochenraster mit 7 Spalten, mobil Tages-Reiter. Tarife als Tabelle über volle Breite.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 2px #121412 um Knöpfe und die Limette auf Kreide; Kursplan-Raster 1px #E2E1DA
- Schatten: nur der harte Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal), ohne Weichzeichnung
- Form: Harte Kanten überall. Die Demo-Variante versatz-brutal nennt 6 px Radius; hier auf 0 übersetzt, damit Taste, Plan und Bilder eine Form haben.

## Bildsprache

- Licht: Hallenlicht, eher hart, echte Anstrengung statt Studioglanz.
- Ausschnitt: Bewegung angeschnitten, Gruppe im Kurs, Trainer:in in Aktion.
- Personen: Ja: Mitglieder mit Einwilligung; Kinder- und Jugendkurse ohne erkennbare Gesichter.
- Formate: 4:5, 16:9, 1:1
- Nicht: Keine Stock-Sixpacks, keine Vorher-Nachher-Körper, kein Neon-Glow, kein Stockvideo.

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

- Anrede: du
- Sätze: Sehr kurz, Uhrzeit und Zahl vorn, Imperativ erlaubt.
- Haltung: Motivierend ohne Druck, ehrlich zu Vertrag, Kosten und Kündigung.
- Tonproben: Heute 18:30: Boxen für Einsteiger. 6 Plätze frei., Komm zum Probetraining. Bring Wasser und Hallenschuhe mit.
- Nicht: „No pain, no gain“, „Beach Body“, Body-Shaming, „Unschlagbar günstig!“, Preise nur im Kleingedruckten.

## Hero

Foto aus einem echten Kurs oder von der Trainingsfläche (Mitglieder mit Einwilligung) mit einer kurzen Zeile in Anybody, deren Breite beim Laden einmal in sechs Stufen aufspringt (variable-font-axes). Darunter „Probetraining buchen“ (Limette) und „Kursplan“ sowie eine Zeile aus dem Plan: „Jetzt: Yoga Flow bis 19:15 · Als Nächstes: Boxen 19:30“. Video nur als hero_variante mit eigenem Material aus dem Studio, mit Poster und Pause-Knopf; nie Stockvideo.

- Raster: Foto randlos über die volle Breite, Hero-Zeile unten links über 10 Spalten, Statuszeile als Band an der Unterkante.
- Bild: Echtes Foto aus Kurs oder Fläche, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Material.
- Überschrift: clamp(3rem, 1.5rem + 8vw, 9rem), Anybody 800 Versal, unten links; springt einmal in sechs Stufen von wdth 50 auf 100 (variable-font-axes).
- Handlung: „Probetraining buchen“ (Limette, versatz-brutal) und „Kursplan“ (Kontur 2px), nebeneinander unter der Zeile.
- Zusatz: Zeile „Jetzt … · Als Nächstes …“ in Azeret Mono 0.8125rem aus dem Plan, wechselt hart.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links) `foto-hero` · Variante „Vollbild, Satz unten links“
- Nur unter der Bedingung oben: [Kinoreifer Vollbild-Video-Hero](https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo) `cinematic-video-hero`

## Sektionen in dieser Reihenfolge

1. **Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin)**: [Wochen-Kursplan mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio) `wochen-kursplan` · Variante „Yoga- und Fitnessstudio“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
2. **Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
3. **Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`, [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“
4. **Tarife & Preise (Monatspreis, Mindestlaufzeit, Kündigungsfrist und einmalige Gebühren in einer Tabelle; ab drei Tarifen, bei zwei zwei Karten)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“
5. **Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
6. **Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“
7. **Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „Band unter dem Hero“
8. **Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste) `mehrschritt-anfrage` · Variante „Schrittleiste“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
9. **Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
10. **FAQ (Laufzeit, Kündigung, Pause bei Krankheit oder Schwangerschaft, Gebühren, Kinder, Duschen und Schließfächer)**: [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“
11. **Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=auslastung) `oeffnungszeiten-status` · Variante „Auslastung jetzt“, [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“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
12. **Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“
13. **Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden 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)

- [Animierte Variable-Font-Achsen](https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/demo) `variable-font-axes`

## Buttons

- Haupthandlung: [Tiefen-Taste (3D-Button)](https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=versatz-brutal) `tiefen-taste-3d` · Variante „Harter Versatz (Brutalismus)“
- Nebenhandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=pixel) `fuellung-vom-eintrittspunkt` · Variante „Pixelraster vom Eintrittspunkt (Festivalprogramm)“

## Weitere Bausteine

- Navigation: [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)“, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Schrift: [Animierte Variable-Font-Achsen](https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/demo) `variable-font-axes`
- Mikroanimation: [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`, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## 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`

## Nicht verwenden

- zahlen-odometer / prozent-zaehler – hochgezählte Mitgliederzahlen und Countdown-Rabatte („Nur noch heute“) sind Druck statt Information
- vorher-nachher-vergleichsregler – Signatur von handwerk; Körper-Vorher-nachher mit Abnehmversprechen ist unseriös und rechtlich heikel
- marquee-laufband – Motivationssprüche als Band; Kurszeiten nie in bewegten Bändern
- scramble-decode / typewriter-natural – Terminal-Aufbau wie in token-brutal-hart: Uhrzeiten, Preise und Kursnamen müssen sofort lesbar sein
- karten-spotlight-glow / verlaufs-rahmen / mesh-gradient-shader – Neon-Glow ist Gym-Template-Klischee, die Limette reicht
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – stören Kursplan, Filter und Formulare
- konfetti-erfolg – ein Vertrag ist kein Spiel; nach dem Abschluss eine ruhige Bestätigung mit den Vertragsdaten
- Halte-, Pause- oder Rabattangebote auf der Kündigungsseite – laut BGH vom 16.07.2026 nicht auf die Bestätigungsseite; eine Pause darf in der FAQ stehen
- Stockfotos mit Sixpack-Models – echte Mitglieder und Trainer:innen aus dem Studio

## Regeln

- Erster Bildschirm: echtes Foto aus Kurs oder Fläche, eine kurze Zeile in Anybody, „Probetraining buchen“ und „Kursplan“, darunter die Zeile „Jetzt … · Als Nächstes …“ aus dem Plan.
- Der Kursplan (wochen-kursplan) ist von jeder Seite mit einem Klick erreichbar, mobil in der unteren Leiste: am Desktop als Wochenraster, mobil als Tages-Reiter (tabs-pfeiltasten-focusgroup). Uhrzeit, Dauer und freie Plätze in Azeret Mono mit Tabellenziffern; Ausfälle und Vertretungen stehen am Termin, nicht in einem Banner.
- Liefert die Studio-Software schon einen gepflegten Plan, den Kursplan nur als Teaser mit „läuft gerade“ und Link bauen (wann_nicht von wochen-kursplan), keine doppelte Datenpflege.
- Kursarten im Plan per Text-Label und Filter, nie nur per Farbe; die Limette bleibt der einzige Signalton (Probetraining, Buchen, Mitglied werden). Filter „Einsteiger geeignet“ wie bei Triyoga; je Kurs ehrlich, für wen er nicht geeignet ist (wie Frame).
- Probetraining erklärt: Ablauf der ersten Stunde, was mitbringen, wann da sein, Verletzungen vorher sagen (wie Barry's und Triyoga).
- Tarife offen: Monatspreis, Mindestlaufzeit, Kündigungsfrist, Verlängerung und jede einmalige Gebühr (Startpaket, Karte, Servicepauschale) in derselben Tabelle, der Gesamtpreis direkt dabei, nie nur im Kleingedruckten. Preisangaben vom Kunden prüfen lassen.
- Wer online Verträge schließt: „Verträge hier kündigen“ und, wo ein Widerrufsrecht besteht, „Vertrag widerrufen“ dauerhaft in der Fußzeile, ohne Login, auf der Bestätigungsseite nur die erlaubten Felder (widerruf-und-kuendigung-schaltflaeche; ELEMENTS führt den Link im Footer). Ob und welche Pflicht gilt, prüft der Kunde.
- Pflichtangaben und Recht (Leitfaden 8a): keine Heil- oder Abnehmversprechen; Präventionskurse mit Krankenkassen-Zuschuss nur nennen, wenn die Zertifizierung echt ist (vom Kunden belegen lassen).
- Fotos von Mitgliedern nur mit Einwilligung; Kinder- und Jugendkurse (Kampfsport, Tanz) nur mit Einwilligung der Eltern und möglichst ohne erkennbare Gesichter.
- Bewegung im Takt: Die Hero-Zeile springt einmal in sechs Stufen von wdth 50 auf 100 (480 ms, variable-font-axes, nur diese Zeile), Bildwechsel ohne Übergang, die Zeile „läuft gerade“ wechselt hart. Menüs, Filter, Formulare, Buchung und Kündigung laufen auf token-tech-praezise (70–240 ms).
- Auslastung nur aus echten Zählwerten mit Zeitstempel, sonst weglassen; Öffnungszeiten mit Feiertagen pflegen (oeffnungszeiten-status, ein Datenblock über firmendaten-strukturiert).
- Footer: Adresse, Zeiten, Telefon, Parken und ÖPNV mit Gehminuten (wie Barry's), Impressum, Datenschutz, AGB, Hausordnung, Barrierefreiheit, „Verträge hier kündigen“.
- Gesundheitsangaben (Verletzungen, Schwangerschaft) nur freiwillig und nie als Pflichtfeld im Online-Formular; lieber im Gespräch vor der ersten Stunde – vom Kunden prüfen lassen.

## Rezept-Varianten

- **Verein mit Kursbetrieb (Breitensport, Fitness- und Gesundheitskurse im Verein)**: Schrift, Farbe, Stil und Signatur bleiben; die Limette darf durch die Vereinsfarbe ersetzt werden, wenn sie als Fläche mit dunkler Schrift 4,5 : 1 hält. Für Vereine, deren Angebot vor allem aus Kursen besteht; Vereine mit Spielbetrieb und vielen Abteilungen nehmen die Variante „Sportverein“ von verein-nonprofit-wirkung. Recht: Vereinsregister und Vertretungsberechtigte im Impressum, Beitragsordnung und Einwilligungen im Antrag, Fotos von Kindern nur mit Einwilligung der Eltern; ob der Kündigungs-Button für online geschlossene Mitgliedschaften gilt, prüft der Kunde.
- **Yoga, Pilates, Tanz (ruhige Studios)**: Takt gedämpft: Die Hero-Zeile wechselt die Breite einmal in drei Stufen (3 × 160 ms), keine harten Bildwechsel im Hero. Signal statt Limette ein Lehmrot #9C4A2F mit weißer Schrift (6,1 : 1); Kreide und Hallenschwarz bleiben. Einsteiger-Filter und Gegenanzeigen je Kurs sind hier Pflicht (Triyoga, Frame).

## Vor der Abgabe

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