Zum Inhalt
← Rezepte
Alle Rezepte

Yoga und Achtsamkeit: Atem und Stundenplan

Yogastudio / Pilates-Studio / Meditation und Achtsamkeit / Yogalehrer:in mit Kursen, Workshops und Retreats

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.

Bauplan tokens.css Alle Techniken

Schrift

Atem und Stundenplan

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.

Headline
Fraunces
Text
Familjen Grotesk

Farbe

  • #F2EEE8
  • #2A2622
  • #E3D8CA
  • #3A3430
  • #4C5B47
  • #655E57
  • #D7CFC4

Bewegung

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

Aufbau der Seite

SignaturWort-für-Wort-Aufhellen beim Scrollen

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Kleiner Abzug auf Fläche

  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 · Yoga- und FitnessstudioTermin-Buchung per 2-Klick-Einbettung · Link-out
  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 · FAQ Fahrschule
  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 · EinreihigLeistungsseite: Antwort zuerst · 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 ScrollenTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
  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 · 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 · KurskarteVergleichstabelle mit fester Kopfzeile · PaketvergleichWiderrufs- und Kündigungs-Button · 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 · Liste und MonatNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
  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 · Ticket
  9. Online-Klassen (nur, wenn es sie gibt: eigener Player mit Kapiteln und Transkript; Zugang über das Studio-Tool)Eigener Videoplayer · Kapitel
  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) · FensterKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildÖffnungszeiten mit Live-Status · Kopfzeile
  11. Frage stellen (höchstens fünf Angaben als ein Satz; Gesundheitsangaben nur freiwillig)Kontakt- und Anfrageformular als eigene Sektion · Satz-Formular
  12. Gutscheine (nur mit Zahlungsdienst und Codeverwaltung)Gutschein-Konfigurator
  13. Studiobrief (neue Kurse und Workshops, wenige Briefe; Sparte und Takt wählbar)Newsletter-Modul mit Persönlichkeit · WochenzettelDanke-Seite: was jetzt passiert · E-Mail bestätigen
  14. Erklärung zur Barrierefreiheit (bei Online-Buchung und Abos nach BFSG prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „Finde zu dir selbst“, „heilende Energie“, „Detox“, Heilversprechen.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto im Passepartout über 6 bis 12 mit 48 px Leinen ringsum; mobil Foto oben.
  • Hero-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.
  • Sektionsabstand: clamp(72px, 10vw, 152px)
  • Dichte: luftig
  • Raum: Viel Atemraum zwischen Kapiteln; der Stundenplan bleibt kompakt (8 px Zeilenabstand), damit er auf einen Bildschirm passt.
  • Spalten: 12
  • 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
  • Schatten: nur die weiche Taste (tiefen-taste-3d, soft)
  • Form: Weich und rund wie eine Matte; Knöpfe als Pille.
Vorbilder