# Bauplan: Fahrschule: freundlich und buchbar

Rezept `fahrschule-freundlich-buchbar` · Fahrschule / lokaler Dienstleister mit Online-Buchung (auch Nachhilfe, Kurse) · Stimmung: freundlich, ermutigend, klar, lokal · Stand 02.11.2026

Nimmt die Angst und führt direkt zur Anmeldung: große, freundliche Headline, eine Klassen- oder Kurswahl als Einstieg, transparente Preise und ein klarer Ablauf in Schritten. Etwas Federung bei Buttons und eine gezeichnete Straße bringen Leben rein, Formulare bleiben aber nüchtern und zugänglich.

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

## Schrift

- Headline: `bricolage-grotesque` · Text: `atkinson-hyperlegible-next`
- Größen: h1 clamp(2.5rem, 1rem + 6.5vw, 6rem), wght 700, opsz 96, Laufweite -0.02em, Zeilenhöhe 0.98, hyphens:auto (deutsche Komposita wie 'Führerscheinausbildung' sind länger als TOFUs englische Zeilen, deshalb Obergrenze 6rem statt 8.5rem); h2 clamp(2rem, 1rem + 4vw, 4rem); Fließtext 1.125rem, Zeilenhöhe 1.6; Preise mit tabellarischen Ziffern.
- Techniken: [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`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`

## Farbe

Helle, warme Grundfläche, dunkles Navy für Vertrauen und Text, ein Himmelblau als Sekundärton und Kennzeichen-Gelb als Fläche für Hervorhebungen (nie Gelb als Textfarbe auf Hell).

- `--farbe-grund` #F8F8EC (Grund (TOFU cream))
- `--farbe-sektionswechsel` #EEF0D8 (Sektionswechsel)
- `--farbe-text` #142B50 (Text/Navy, Footer)
- `--farbe-dunkel` #3FBADF (Sekundär, Links auf Dunkel)
- `--farbe-flaeche` #FFD60A (Hervorhebung als Fläche (Kennzeichen-Gelb))
- `--farbe-text-2` #566175 (gedämpfter Text)

## 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)
- Dauer: 350–450 (Buttons, Karten-Hover), 800 (Einblendungen mit cubic-bezier(0.16, 1, 0.3, 1))
- Regel: Federung nur für Transform kleiner Elemente (Buttons, Karten, Badges), nie auf Deckkraft oder großen Flächen. Einblendungen mit der Expo-Out-Kurve des UI-Stils ohne Überschwingen. Formulare und Buchungsschritte ohne Federung (150–200 ms, animationsstil_ui token-toggle-asymmetrisch).

## 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, 64, 96, 128
- Sektionsabstand: clamp(72px, 9vw, 136px)
- Dichte: mittel
- Hinweis: Großzügig um die Headline, kompakt in Preisen und Formular: Tabellenzeilen 12 px, Formularfelder 16 px Abstand, Schritte des Ablaufs 48 px.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1240px
- Raster: Headline über 10 Spalten, Auswahl darunter über 6. Preise als Tabs über volle Breite, Ablauf als nummerierte Schritte, die gezeichnete Straße läuft durch den Rand.
- Radius klein: 12px
- Radius groß: 20px
- Pillenform für Buttons: True
- Linie: 1px #566175 um Felder, Karten ohne Linie auf #EEF0D8
- Schatten: nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten und Felder ohne Schatten
- Form: Freundlich rund, aber nicht weich: Pillen für Knöpfe und Klassen-Chips, 20 px für Preis- und Stimmenkarten. Gelb #FFD60A nur als Fläche hinter dunklem Text.

## Bildsprache

- Licht: Helles Tageslicht draußen, freundlich, eher Vormittag.
- Ausschnitt: Fahrlehrer:in und Fahrschüler:in im oder am Auto, Halbtotale, Blick nach vorn.
- Personen: Ja: echte Fahrlehrer:innen mit Namen und Sprachen; Fahrschüler:innen nur mit Einwilligung, bei Minderjährigen der Eltern.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Stock-Teenager mit Schlüssel in der Hand, kein 3D-Auto, keine Verkehrszeichen-Clipart, kein Konfetti.

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

- Anrede: du
- Sätze: Kurz, ermutigend, ein Schritt pro Satz. Preise und Fristen als Zahl, nicht als Umschreibung.
- Haltung: Nimmt die Angst, erklärt den Weg. Abschnitte für Eltern (Kosten, Anmeldung Minderjähriger) im gleichen Ton, ohne Jugendsprache.
- Tonproben: Dein Führerschein in [Ort]. Starte mit Klasse B., Theorie beginnt jeden Montag. Du kannst jederzeit einsteigen.
- Nicht: „Mit uns sicher ans Ziel!“, Jugendsprache, Emojis, Angstmache vor der Prüfung, Fake-Eingabefeld.

## Hero

Klassenwahl statt Prompt: ein Satz Ort + Angebot + nächster Schritt, darunter eine echte Auswahl (Klasse B/B197/A/BE + Standort, animiertes-select), die zu Preis und freien Terminen führt. Kein Fake-Eingabefeld.

- Raster: 12 Spalten: H1 oben über Spalte 1 bis 10, darunter die Auswahl über 1 bis 6; rechts 4 bis 5 Spalten Foto oder der Anfang der gezeichneten Straße.
- Bild: Optional ein Foto 4:5 rechts; die Straße (svg-pfad-zeichnen-scroll) beginnt im Hero und zeichnet sich beim Scrollen.
- Überschrift: clamp(2.5rem, 1rem + 6.5vw, 6rem), Bricolage 700, oben links, hyphens: auto.
- Handlung: Auswahl Klasse + Standort (animiertes-select) mit Knopf „Preise und Termine“ als Tiefen-Taste; daneben „Anrufen“ als Textlink.
- Zusatz: Zeile „Nächster Theoriestart: [Datum]“ unter der Auswahl; mobil feste untere Leiste Anmelden / Anrufen / WhatsApp.

- Hero: [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`

## Sektionen in dieser Reihenfolge

1. **Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Preis-Sektion mit Haltung](https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/demo) `preis-section-editorial`, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
2. **Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)**: [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`
3. **In 5 Schritten zum Führerschein (die Straße zeichnet sich als einzige Linie; prozess-timeline-wachsende-linie liefert nur das Raster, ohne eigene Linie)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`, [SVG-Pfad zeichnet sich beim Scrollen](https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=strasse) `svg-pfad-zeichnen-scroll` · Variante „Straße mit Etappen“
4. **Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand) `testimonials-neu-gedacht` · Variante „Masonry-Wand“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
5. **Fahrlehrer:innen & Fahrzeuge**: [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“, [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“
6. **Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)**: [Wochen-Kursplan mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio) `wochen-kursplan` · Variante „Yoga- und Fitnessstudio“, [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [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“
7. **FAQ (Kosten, Dauer, Sprachen, Intensivkurs)**: [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“
8. **Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [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“
9. **Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)**: [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)

- [SVG-Pfad zeichnet sich beim Scrollen](https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=strasse) `svg-pfad-zeichnen-scroll` · Variante „Straße mit Etappen“

## 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: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`

## 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)“
- Scroll: [SVG-Pfad zeichnet sich beim Scrollen](https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=strasse) `svg-pfad-zeichnen-scroll` · Variante „Straße mit Etappen“
- Schrift: [Gezeichnete Markierung und Unterstreichung](https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/demo) `highlight-marker-underline`, [Marquee-Laufband (optional scroll-gekoppelt)](https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/demo) `marquee-laufband`
- Mikroanimation: [Fortschrittsring](https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/demo) `fortschrittsring`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
- 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: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

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

- interaktives-3d-hero – ein 3D-Auto ist Deko ohne Nutzen und teuer auf Handys der Zielgruppe
- smooth-scroll-lenis / fullpage-snap-slides – Jugendliche und Eltern scannen Preise, Scroll-Kapern nervt
- kinetische-typo-intro / logo-aufbau-intro – Anmeldung geht vor
- hold-to-confirm – Hürde bei der Anmeldung
- konfetti-erfolg – nach der Anmeldung reicht eine klare Bestätigung mit nächsten Schritten
- Federkurven auf Formularfeldern oder Deckkraft – flackert

## Regeln

- Hero beantwortet in einem Satz Ort + Angebot + nächsten Schritt; Einstieg ist eine echte Auswahl (Klasse B/B197/A/BE + Standort), die zu Preis und freien Terminen führt – kein Fake-Eingabefeld.
- Preise transparent je Klasse (Grundbetrag, Fahrstunde, Sonderfahrten, Prüfungsgebühren) mit Tabs; tabellarische Ziffern.
- Ablauf als nummerierte Schritte (Anmeldung, Sehtest/Erste Hilfe, Theorie, Praxis, Prüfung); nur eine wachsende Linie: die Straße (svg-pfad-zeichnen-scroll) zeichnet sich, prozess-timeline-wachsende-linie bleibt ohne eigene Linie. Der Text muss ohne Animation verständlich sein.
- Anmeldung als eigene Sektion in höchstens 3 Schritten mit Fortschrittsring; Pflichtfelder minimal, Validierung erst nach Interaktion, Bestätigungsseite mit nächsten Schritten plus E-Mail.
- Zugänglich: Kontrast mind. 4.5:1, Gelb nur als Fläche hinter dunklem Text, Sprachen der Fahrlehrer:innen sichtbar (TOFU: 'In your language').
- Mobil unten feste Leiste 'Anmelden' / 'Anrufen' / 'WhatsApp'.
- Bestanden-Stimmen als statische Karten mit Vorname, Klasse und Monat – echt oder gar nicht. Ein Laufband (marquee-laufband) höchstens einmal als schmale Leiste mit echten Inhalten (Klassen, nächster Theoriestart), mit Pause-Knopf, nie mit Stimmen oder wichtigen Infos; im Template weglassen.
- Pflichtangaben und Recht (Leitfaden 8a): Preise vollständig und wie im Preisaushang nach Fahrlehrergesetz (Grundbetrag, Fahrstunde, Sonderfahrten, Prüfungsentgelte), inkl. MwSt.; bei Online-Anmeldung Widerrufs-Button (§ 356a BGB, seit 19.06.2026) und Erklärung zur Barrierefreiheit (Variante bfsg); Fotos von Fahrschüler:innen nur mit Einwilligung, bei Minderjährigen der Eltern; Google-Bewertungen nur mit Echtheitshinweis – 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“.