# Bauplan: Online-Kurs & Coaching: klarer Lernweg

Rezept `kurs-coaching-lernweg` · Online-Kurs / Coaching / Akademie / Weiterbildung / Bildungsangebot · Stimmung: klar, ermutigend, persönlich, strukturiert · Stand 02.11.2026

Die Seite verkauft ein Ergebnis und einen Weg dorthin: Für wen, was man danach kann, Module, wer unterrichtet, was es kostet. Freundliche, gut lesbare Typo, ein heller Grund, ein Markenton und eine Erfolgsfarbe für Fortschritt. Bewegung ist schnell und ermutigend – kleine Federn nur dort, wo etwas geschafft ist.

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

## Schrift

- Headline: `bricolage-grotesque` · Text: `onest` · Akzent: `shantell-sans`
- Größen: h1 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage wght 700, opsz 72–96, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wght 650; Fließtext Onest 1.0625–1.125rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Shantell Sans (INFM 30–60, BNCE 0) sparsam für Randnotizen und Modul-Labels („Modul 03 · 45 min“), 0.875–0.9375rem, nie für Fließtext, Buttons oder Preise. Für Kurse mit viel Lesetext reicht Bricolage im Text nicht – deshalb eine eigene Textschrift. Barrierearme Variante: Text atkinson-hyperlegible-next.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [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`, [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`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`

## Farbe

Heller, leicht kühler oder warmer Grund, fast schwarze Tinte, ein Markenton für Aktionen und ein eigener Erfolgston für Fortschritt/Häkchen. Kategorie-Farben nur bei echten Kurskatalogen (Maven, Brilliant), sonst eine Akzentfarbe für Hervorhebungen.

- `--farbe-grund` #F4F6FA (Grund (Maven))
- `--farbe-flaeche` #FFFFFF (Karten)
- `--farbe-text` #141414 (Text (Brilliant))
- `--farbe-marke` #7491FF (Markenton/Buttons (Brilliant; austauschbar))
- `--farbe-erfolg` #10BF7A (Erfolg/Fortschritt (Ness Labs))
- `--farbe-hervorhebung` #F7C325 (Hervorhebung/Badge 'Nächster Start' (Brilliant))

## 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 Transform kleiner Elemente) – nur Erfolgsmomente; alles andere über animationsstil_ui
- Dauer: 100–200 (Buttons, Tabs, Antworten), 300 (Akkordeon, Karten), 500–600 (Einblendungen); Federn 400–600 nur für Erfolgsmomente
- Regel: Basis für Navigation, Formulare, Akkordeon und Einblendungen ist animationsstil_ui token-toggle-asymmetrisch (steile Expo-Ausklang-Kurve) mit kurzen Dauern. Federnd (Kurve des Stils) nur, wenn etwas geschafft ist: Modul abgehakt, Quiz richtig, Kurs gebucht. Nie an Navigation oder Fließtext.

## 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, 120
- Sektionsabstand: clamp(64px, 8vw, 112px)
- Dichte: mittel
- Hinweis: Strukturiert: Module mit 16 px zwischen Label, Titel und Ergebnis, 24 px zwischen Modulen. Preisvergleich mit gleich hohen Karten.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1200px
- Raster: Hero 7/5 (Text/Foto) oder split-screen-sticky-seiten. Module in einer Spalte, Pakete als 3er-Raster.
- Radius klein: 10px
- Radius groß: 20px
- Pillenform für Buttons: True
- Linie: 1px #141414 mit 12 % Deckkraft
- Schatten: nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten flach in #FFFFFF auf #F4F6FA
- Form: Freundlich rund: Pillen für Knöpfe und Badges, 20 px für Karten. verlaufs-rahmen nur am Button (Variante button).

## Bildsprache

- Licht: Helles, offenes Tageslicht.
- Ausschnitt: Trainer:in im Gespräch oder beim Erklären, Bildschirm mit echtem Kursinhalt, Notizen.
- Personen: Ja: die Person hinter dem Kurs; Teilnehmende nur mit Einwilligung.
- Formate: 4:5, 16:9, 1:1
- Nicht: Keine Stock-Laptops mit Kaffee, keine Erfolgsbilder mit Sportwagen, keine Diplomhut-Icons.

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

- Anrede: du
- Sätze: Kurz, das Ergebnis vorn, konkrete Zeitangaben (Wochen, Minuten).
- Haltung: Ermutigend und ehrlich zum Aufwand.
- Tonproben: In acht Wochen sicher präsentieren., Modul 02 · 40 min: Du baust deine erste Folie.
- Nicht: „Dein Weg zur finanziellen Freiheit“, Countdown-Druck, „Nur heute!“, anonyme Fünf-Sterne-Sätze.

## Hero

Standard (Einzelkurs): Ergebnis-Satz + Zielgruppe + Startdatum/Format + Preis bzw. ab-Preis + ein CTA, ohne Muster oder als split-screen-sticky-seiten mit Foto der Trainerin. prompt-hero-eingabefeld nur bei einem Kurskatalog mit funktionierender Suche (sonst laut Katalog „Fake-Input“).

- Raster: 12 Spalten: Text über Spalte 1 bis 7, Foto der Trainerin über 8 bis 12; alternativ split-screen-sticky-seiten.
- Bild: Porträt 4:5. Prompt-Feld nur bei einem Kurskatalog mit funktionierender Suche.
- Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage 700, links.
- Handlung: Ein Haupt-CTA „Platz sichern“ als Tiefen-Taste, dazu der Textlink „Module ansehen“.
- Zusatz: Zeile mit Zielgruppe, Startdatum, Format und ab-Preis; Badge „Nächster Start“ in #F7C325.

- Hero: Foto-Hero ohne eigenes Muster
- Nur unter der Bedingung oben: [Prompt-Hero mit rotierenden Beispiel-Prompts](https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/demo) `prompt-hero-eingabefeld`, [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“

## Sektionen in dieser Reihenfolge

1. **Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste)**: [Bento-Grid mit lebenden Zellen](https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo) `bento-grid-interaktiv`
2. **Lernweg / Module / Kurswochen**: [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=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“
3. **Über die Trainerin / den Coach**: [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“, [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel) `eigener-videoplayer` · Variante „Kursvideo mit Kapiteln“
4. **Ergebnisse / Teilnehmerstimmen**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand) `testimonials-neu-gedacht` · Variante „Masonry-Wand“
5. **Kurskatalog (bei mehreren Kursen)**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [Produktfinder in wenigen Fragen](https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte) `produktfinder-quiz` · Variante „Schritt für Schritt“
6. **Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen)**: [Wochen-Kursplan mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio) `wochen-kursplan` · Variante „Yoga- und Fitnessstudio“
7. **Preise / Pakete / Ratenzahlung**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Kostenrechner mit Spanne](https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad) `kostenrechner-konfigurator` · Variante „Badsanierung“
8. **Anmeldung (mehrere Schritte, Fehlerliste)**: [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“
9. **FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung)**: [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“
10. **Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [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“, [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“
11. **Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)**: [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)

- [Scroll-Fortschrittsbalken und -ring](https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/demo) `scroll-fortschritt`

## 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: [Animierter Verlaufsrahmen](https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=button) `verlaufs-rahmen` · Variante „Lichtlauf um eine Pille (Kurs-Anmeldung)“

## Weitere Bausteine

- Navigation: [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Scroll: [Scroll-Fortschrittsbalken und -ring](https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/demo) `scroll-fortschritt`
- Schrift: [Gezeichnete Markierung und Unterstreichung](https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/demo) `highlight-marker-underline`
- Hover: [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“
- Mikroanimation: [Fortschrittsring](https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/demo) `fortschrittsring`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Konfetti / Erfolgs-Feier](https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/demo) `konfetti-erfolg`
- Galerie: [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“
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“

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

## Nicht verwenden

- zahlen-odometer als Countdown – künstliche Verknappung ('Nur noch 02:59:13') zerstört Vertrauen
- marquee-laufband mit 'Bekannt aus'-Logos – nur echte Erwähnungen, dann als ruhige logo-wand-social-proof
- typewriter-natural / ki-streaming-text-denkindikator – wirkt nach generiertem Inhalt, solange kein echter KI-Tutor existiert
- smooth-scroll-lenis / Custom-Cursor – stört auf langen Verkaufsseiten das Lesen
- interaktives-3d-hero / mesh-gradient-shader – Effekt statt Lernversprechen
- einmal-intro-session / Preloader aller Art – Interessenten wollen sofort Titel, Termin, Preis sehen

## Regeln

- Hero = Ergebnis in einem Satz ('In 6 Wochen zur eigenen Website'), Zielgruppe, Startdatum/Format, Preis oder 'ab'-Preis, ein Haupt-CTA; Prompt-/Suchfeld nur bei echtem Kurskatalog mit funktionierender Suche.
- Lernweg sichtbar machen: Module nummeriert (Modul-Label in Shantell Sans, sparsam), mit Dauer und konkretem Ergebnis je Modul; aufklappbar für Details.
- Die Person hinter dem Kurs zeigen: Foto, warum sie das kann, echte Zahlen (Teilnehmende, Jahre) ohne Hochzählen.
- Stimmen mit Name, Kontext und Ergebnis ('Hat danach … erreicht'), keine anonymen Fünf-Sterne-Sätze.
- Preis offen mit Paketvergleich (max. 3), Ratenzahlung per Umschalter; Widerrufsrecht und Förderfähigkeit (z. B. Bildungsgutschein, nur mit Zulassung) nennen.
- Erfolgsfarbe nur für Fortschritt und Häkchen; Konfetti genau einmal: nach Buchung oder Kursabschluss.
- Markierung (highlight-marker-underline) höchstens ein Kernbegriff pro Abschnitt.
- Freebie/Newsletter am Ende mit persönlicher Ansprache statt Pop-up beim Seitenaufruf.
- Pflichtangaben und Recht (Leitfaden 8a): Online-Kurse mit Lernerfolgskontrolle können nach dem Fernunterrichtsschutzgesetz zulassungspflichtig sein (ZFU); Widerrufs-Button (§ 356a BGB, seit 19.06.2026) und bei Abos oder Mitgliedschaften Kündigungs-Button (§ 312k BGB); Preise inkl. MwSt.; Teilnehmerstimmen echt und mit Einwilligung; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen.

## Rezept-Varianten

- **Musikschule / Nachhilfe**: Abgrenzung: fahrschule-freundlich-buchbar nennt Nachhilfe ebenfalls. Wer vor allem feste Termine online buchen lässt und wenig erklären muss, nimmt fahrschule; diese Variante passt, wenn Lehrkräfte, Probestunde und laufende Monatsverträge im Mittelpunkt stehen. Schrift, Farbe, Stil und Signatur bleiben (scroll-fortschritt auf langen Fächer- und Vertragsseiten). Lehrkräfte mit team-ueber-mich-layout: ab etwa sechs Personen Variante raster mit Filter nach Fach, darunter statement. Unterrichtszeiten als wochen-kursplan (Variante studio) nur für feste Gruppenkurse wie Früherziehung, Ensembles oder Lerngruppen; bei weniger als etwa acht Wochenterminen eine Tabelle, Einzelunterricht „nach Vereinbarung“. Probestunde als mehrschritt-anfrage (Variante leiste: Fach und Alter → Wunschzeit → Kontakt der Erziehungsberechtigten). Preise als vergleichstabelle-sticky (Variante pakete: 30, 45, 60 Minuten) mit Anmeldegebühr, Laufzeit, Kündigungsfrist und Ferienregel in derselben Tabelle. Vorspiele und Konzerte als programm-kalender nur ab etwa acht Terminen im Monat, sonst Liste. Recht: Monats- bzw. Dauerverträge, die online geschlossen werden, brauchen Kündigungs-Button (§ 312k BGB) und Widerrufs-Button (§ 356a BGB); Verträge für Minderjährige schließen die Erziehungsberechtigten; Fotos und Videos von Kindern (Vorspiele) nur mit Einwilligung der Eltern; Förderungen wie Bildung und Teilhabe oder Zertifikate nur, wenn wirklich vorhanden; Preise inkl. MwSt. oder Hinweis auf eine Umsatzsteuerbefreiung nur nach Prüfung – vom Kunden prüfen lassen.

## Vor der Abgabe

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