Fahrschule: freundlich und buchbar

Fahrschule / lokaler Dienstleister mit Online-Buchung (auch Nachhilfe, Kurse)

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.

Bauplan tokens.css Alle Techniken

Schrift

Freundlich und buchbar

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.

Headline: Bricolage Grotesque
Text: Atkinson Hyperlegible Next

Farbe

#F8F8EC
#EEF0D8
#142B50
#3FBADF
#FFD60A
#566175

Bewegung

cubic-bezier(0.34, 1.56, 0.64, 1)

Stil: Animationsstil „Federnd verspielt“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: 350–450 (Buttons, Karten-Hover), 800 (Einblendungen mit cubic-bezier(0.16, 1, 0.3, 1))

Aufbau der Seite

SignaturSVG-Pfad zeichnet sich beim Scrollen

HeroAnimiertes Auswahlmenü (anpassbares select)

Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)Vergleichstabelle mit fester Kopfzeile · Paketvergleich Preis-Sektion mit Haltung Leistungsseite: Antwort zuerst · Praxis
Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)Mehrschritt-Anfrage mit Zusammenfassung · Schrittleiste Fehlerzusammenfassung im Formular · Liste Validierung erst nach Interaktion
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 SVG-Pfad zeichnet sich beim Scrollen · Straße
Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · Masonry-Wand Plattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
Fahrlehrer:innen & FahrzeugeTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)Wochen-Kursplan mit Live-Status · Yoga- und Fitnessstudio Programm-Kalender mit Liste und Monat · Liste und Monat Akkordeon mit Höhenanimation auf auto · FAQ Fahrschule
FAQ (Kosten, Dauer, Sprachen, Intensivkurs)Akkordeon mit Höhenanimation auf auto · FAQ
Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)Kontakt- und Anfrageformular als eigene Sektion Öffnungszeiten mit Live-Status · Kopfzeile Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)Widerrufs- und Kündigungs-Button · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Mobile Bottom-Navigation und Bottom-Sheet-Menü · Daumen-Knopf
Scroll: SVG-Pfad zeichnet sich beim Scrollen · Straße
Schrift: Gezeichnete Markierung und Unterstreichung Marquee-Laufband (optional scroll-gekoppelt)
Mikroanimation: Fortschrittsring Animiertes Auswahlmenü (anpassbares select)
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Praxis
Buttons: Tiefen-Taste (3D-Button) · Stapel aus Schatten Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)

Nicht verwenden

Interaktives 3D-Objekt im Hero ein 3D-Auto ist Deko ohne Nutzen und teuer auf Handys der Zielgruppe
Smooth Scroll mit Lenis Abschnittsweises Einrasten (Fullpage-Snap) Jugendliche und Eltern scannen Preise, Scroll-Kapern nervt
Kinetisches Typo-Intro (Wortwiederholung, Kreistext)Logo-Aufbau-Intro (Linien zeichnen, Teile fügen sich, Logo fliegt in die Navigation) Anmeldung geht vor
Gedrückt halten zum Bestätigen Hürde bei der Anmeldung
Konfetti / Erfolgs-Feier 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.

Bild und Ton

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.
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 schreiben: „Mit uns sicher ans Ziel!“, Jugendsprache, Emojis, Angstmache vor der Prüfung, Fake-Eingabefeld.

Hero, Raum und Form

Hero-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.
Hero-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.
Sektionsabstand: clamp(72px, 9vw, 136px)
Dichte: mittel
Raum: 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
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
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.

Vorbilder