Zum Inhalt
← Rezepte
Alle Rezepte

Studio: Rhythmus und Kursplan

Fitnessstudio / Yoga- und Pilatesstudio / Kampfsportschule / Tanzschule (auch Sportverein mit Kursbetrieb)

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.

Bauplan tokens.css Alle Techniken

Schrift

Rhythmus und Kursplan

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.

Fitnessstudio

Headline
Anybody
Text
Funnel Sans
Akzent
Azeret Mono

Farbe

  • #F2F1EC
  • #121412
  • #CCFF33
  • #E2E1DA
  • #5E615C
  • #B3261E

Bewegung

cubic-bezier(0, 0, 1, 1)
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

Aufbau der Seite

SignaturAnimierte Variable-Font-Achsen

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · VollbildoderKinoreifer Vollbild-Video-Hero

  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 · Yoga- und FitnessstudioTabs und Segmente mit Pfeiltasten · 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 · LeistungslisteLeistungsseite: Antwort zuerst · 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 LinieTermin-Buchung per 2-Klick-Einbettung · Platzhalter
  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 · Paketvergleich
  5. Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen)Team-/Über-mich-Layout mit Porträt-Interaktion · Raster
  6. Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-BühneRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
  7. Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis)Plattform-Bewertungen mit Echtheitshinweis · Band unter dem Hero
  8. Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)Mehrschritt-Anfrage mit Zusammenfassung · SchrittleisteFehlerzusammenfassung im Formular · ListeValidierung erst nach Interaktion
  9. Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf)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 · FAQ
  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 · AuslastungKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildKontakt- und Anfrageformular als eigene SektionStandortfinder als Liste · Nur ListeFirmendaten aus einer Quelle · Friseursalon
  12. Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile)Widerrufs- und Kündigungs-Button · Richtig
  13. Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „No pain, no gain“, „Beach Body“, Body-Shaming, „Unschlagbar günstig!“, Preise nur im Kleingedruckten.
Hero, Raum und Form
  • Hero-Raster: Foto randlos über die volle Breite, Hero-Zeile unten links über 10 Spalten, Statuszeile als Band an der Unterkante.
  • Hero-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.
  • Sektionsabstand: clamp(48px, 6vw, 96px)
  • Dichte: dicht
  • Raum: Fahrplan statt Bühne: Kursplan-Zellen 8 bis 12 px Innenabstand, Tarife in einer Tabelle, kurze Sektionsabstände.
  • Spalten: 12
  • 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
  • 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.
Vorbilder