# Bauplan: Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertig

Rezept `kfz-werkstatt-autohaus` · Freie Kfz-Werkstatt / Autohaus mit Werkstatt / Reifenservice / Karosserie- und Lackierbetrieb · Stimmung: bodenständig, schnell, klar, verlässlich · Stand 02.11.2026

Die Seite beantwortet drei Fragen in dieser Reihenfolge: Wann kann ich kommen, was kostet es, wann ist das Auto fertig. Termin in vier Schritten mit Hol- und Bringdienst nach Postleitzahl, Festpreise als echte Tabelle nach Fahrzeugklasse mit Stand-Datum, Fahrzeugbestand mit der Pflichtzeile zu Verbrauch, CO₂ und CO₂-Klasse an jeder Karte. Schmale, kräftige Mona Sans wie auf Werkstatt- und Preisschildern, Asphaltgrau und Verkehrsgelb nur für „Termin buchen“, eine Taste mit echter Tiefe wie ein Werkstatt-Taster. Signatur ist die Reifenflanke: Die Reifengröße steht als Text auf dem Rund und wird daneben erklärt. Anders als handwerk: Preise statt Kostenrechner, Termin statt Anfrage, kein Vorher/Nachher-Regler, andere Bewegung.

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

## Schrift

- Headline: `mona-sans` · Text: `google-sans-flex`
- Größen: h1 Mona Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), wght 800, wdth 80, Laufweite -0.02em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.25rem + 2vw, 2.75rem), wght 750, wdth 85; die drei Preise unter dem Hero Mona Sans 2.5rem wght 800 wdth 75 Tabellenziffern, „€“ und „inkl. MwSt.“ in Google Sans Flex daneben. Preise in der Festpreis-Tabelle Google Sans Flex 1.125rem wght 700 Tabellenziffern, rechtsbündig. Fließtext Google Sans Flex 1.0625rem (17 px), wght 400, ROND 0, opsz automatisch, Zeilenhöhe 1.55, max. 65ch; Labels (Fahrzeugklasse, Stand-Datum) Google Sans Flex 0.8125rem wght 600 Versal +0.06em; Telefonnummer im Kopf 1.25rem wght 700 Tabellenziffern. Pflichtzeile Pkw-EnVKV mindestens so groß und kräftig wie der Angebotstext daneben, nie unter 0.875rem.
- 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`, [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`, [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`

## Farbe

Helles Betongrau als Grund, Asphalt für Kopf, Festpreis-Tafel und Fußzeile, Verkehrsgelb (RAL 1023 als Beispiel) nur für „Termin buchen“ und den aktiven Schritt der Terminstrecke. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Asphalt (Nicht-Text-Kontrast), auf Asphalt ohne Rand. Grün nur für „Jetzt geöffnet“ und „verfügbar“, Rot nur für Fehler; beides immer mit Text, nie als einzige Aussage. Markenfarben von Herstellern nur im Logo des Autohauses, nie als Flächenfarbe der Seite.

- `--farbe-grund` #F2F1ED (Grund (Betongrau hell))
- `--farbe-text` #121314 (Text (16,5 : 1))
- `--farbe-text-2` #595E63 (Sekundärtext, Stand-Datum, Einheiten (5,8 : 1))
- `--farbe-asphalt` #232629 (Asphalt: Kopf, Festpreis-Tafel, Fußzeile (Weiß darauf 15,2 : 1; Sekundärtext darauf #B9BEC4, 8,1 : 1))
- `--farbe-signal` #F5B700 (Signal Verkehrsgelb: Termin buchen, aktiver Schritt (Text #121314, 10,3 : 1; auf Grund mit 2 px Rand #232629))
- `--farbe-status` #1F7A3E (Status geöffnet, verfügbar (Weiß darauf 5,4 : 1, nur mit Text))
- `--farbe-fehler` #B3261E (Fehler, Termin belegt (Weiß darauf 6,5 : 1, sparsam))

## Bewegung

- Animationsstil: [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.16, 1, 0.3, 1) beim Öffnen, cubic-bezier(0.7, 0, 0.84, 0) beim Schließen (token-toggle-asymmetrisch)
- Dauer: 120 (Hover, Farbe, Druck der Taste), 250 (Menü, Preis-Reiter, Akkordeon, nächster Schritt der Terminstrecke, Dialog öffnen), 170 (schließen); Fokusring ohne Übergang
- Regel: Schnell und sachlich: nichts blendet beim Scrollen ein, kein Karussell mit Autoplay, keine Zähler. Die Tiefen-Taste sinkt beim Druck sichtbar ein (Weg höchstens 4 px), sonst kein Weg über 8 px. Preise, Öffnungsstatus und Fahrzeugdaten stehen sofort. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang, die Taste wechselt nur die Farbe.
- Hinweis: Der UI-Stil als Hauptstil, Spielart „Nur Tempo“ auf UI-Maß gekürzt: Auf dieser Seite bewegt sich, was jemand öffnet oder weiterklickt (Menü, Preis-Reiter, Akkordeon, Schritt der Terminstrecke, Dialog). Öffnen 250 ms mit Ausklang, schließen 170 ms mit Anlauf. Kein eigener animationsstil_ui nötig. Unterscheidet sich damit von handwerk (token-tech-praezise).

## 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(56px, 7vw, 104px)
- Dichte: dicht
- Hinweis: Schnell zu scannen: Festpreis-Tabelle mit 12 px Zeilen, Terminstrecke mit 16 px zwischen Feldern, kurze Sektionsabstände.
- Spalten: 12
- Seitenrand: clamp(16px, 3vw, 40px)
- Spaltenabstand: clamp(12px, 2vw, 24px)
- Maximale Breite: 1280px
- Raster: Hero 5/7 (Text/Foto), darunter die Festpreis-Zeile über alle 12 Spalten auf Asphalt. Fahrzeugkarten 3 Spalten mit Pflichtzeile.
- Radius klein: 4px
- Radius groß: 8px
- Pillenform für Buttons: False
- Linie: 2px #232629 um gelbe Knöpfe auf hellem Grund; Tabellen 1px #595E63 mit 25 % Deckkraft
- Schatten: nur die Tiefen-Taste (tiefen-taste-3d, Variante stapel) für „Termin buchen“; sonst keiner
- Form: Werkstatt-Taster statt Pille: 4 px an Knöpfen und Feldern, 8 px an Karten und Fotos. Alle anderen Knöpfe flach.

## Bildsprache

- Licht: Echtes Werkstattlicht, Röhrenlicht erlaubt, nichts poliert.
- Ausschnitt: Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich.
- Personen: Ja: das Team in Arbeitskleidung mit Namen.
- Formate: 3:2, 4:3, 16:9
- Nicht: Keine glänzenden Neuwagen-Stockfotos, keine Schraubenschlüssel-Clipart, keine Herstellerfarben als Fläche, kein Karussell.

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

- Anrede: Sie
- Sätze: Kurz: Leistung, Preis, Zeit. Preise mit Stand-Datum, „ab“ nur mit dem Satz, wovon es abhängt.
- Haltung: Bodenständig und verlässlich; klare Zusagen nur, wenn der Betrieb so arbeitet.
- Tonproben: Räderwechsel ab [Preis] €, inklusive Auswuchten., Bevor wir mehr machen, rufen wir Sie an.
- Nicht: „Ihr Auto ist bei uns in besten Händen“, „Rundum-sorglos“, „0 %-Finanzierung“ ohne Pflichtangaben.

## Hero

Echtes Foto aus der eigenen Werkstatt (Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich), daneben H1 mit Leistung und Ort („Kfz-Meisterwerkstatt in [Ort] – alle Marken“), der Öffnungsstatus aus echten Zeiten („Heute bis 18 Uhr geöffnet“), „Termin buchen“ als gelbe Tiefen-Taste und die Telefonnummer als tel:-Link. Direkt darunter drei Festpreise als Zeile (z. B. HU/AU, Räderwechsel, Inspektion ab) mit Stand-Datum und Link zur ganzen Tabelle. Kein Video, keine Stockfotos von glänzenden Neuwagen, kein Karussell. Beim Autohaus darf das Foto ein echtes Fahrzeug vom Hof zeigen; Motordaten im Hero lösen die Pkw-EnVKV-Zeile aus.

- Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; darunter die Festpreis-Zeile über alle 12.
- Bild: Echtes Werkstattfoto, 3:2; beim Autohaus ein echtes Fahrzeug vom Hof (dann Pkw-EnVKV-Zeile).
- Überschrift: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), Mona Sans 800 wdth 80, links.
- Handlung: „Termin buchen“ (gelbe Tiefen-Taste) und Telefon als tel:-Link mit sichtbarer Nummer.
- Zusatz: Öffnungsstatus „Heute bis 18 Uhr geöffnet“ aus echten Zeiten; drei Festpreise mit Stand-Datum direkt darunter.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend) `foto-hero` · Variante „Split, Foto bis an den Rand“

## Sektionen in dieser Reihenfolge

1. **Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz) `mehrschritt-anfrage` · Variante „PLZ zuerst“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=foto) `datei-upload-ablage` · Variante „Schadensfoto zur Anfrage“
2. **Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste) `speisekarte-editorial` · Variante „Preisliste Dienstleistung“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
3. **Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein)**: [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“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“
4. **Reifen: Größe lesen, wechseln, einlagern (Reifenflanke als statische Zeichnung mit der Größe auf dem Rund, daneben dieselbe Angabe als Liste erklärt: Breite, Querschnitt, Bauart, Felgendurchmesser, Tragfähigkeit, Geschwindigkeit, DOT-Alter; Einlagerung mit Profiltiefe-Protokoll; Reifenangebote mit Preis nur mit EU-Reifenlabel daneben)**: [Text auf Pfad](https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo?v=reifen) `text-on-path` · Variante „Reifenflanke: Größe auf dem Bogen, Teil für Teil erklärt“
5. **Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme**: [Fahrzeugbestand aus dem Börsen-Feed](https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/demo) `fahrzeugbestand-feed-teaser`, [Objekt-Steckbrief im Exposé](https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=fahrzeug) `objekt-steckbrief-expose` · Variante „Fahrzeugangebot mit Pkw-EnVKV-Angaben“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=fahrzeugkarte) `finanzierung-pflichtangaben` · Variante „Fahrzeugkarte mit Detailansicht“
6. **So läuft Ihr Werkstattbesuch (Termin → Annahme mit Kostenrahmen → Anruf vor jeder Mehrarbeit → Fertigmeldung per SMS oder Anruf → Abholung mit Erklärung der Rechnung; nur versprechen, was der Betrieb so macht)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
7. **Bewertungen (Google-Profil mit Schnitt, Anzahl, Stand-Datum und Echtheitshinweis direkt daneben; drei Stimmen mit Antwort des Betriebs; Live-Ansicht nur per Klick)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
8. **Team und Meister (Inhaber:in oder Werkstattmeister:in mit Foto, Annahme mit Durchwahl, Qualifikationen wie Meisterbrief und Hochvolt; bis etwa fünf Personen als ein Satz mit kleinen Porträts, darüber Raster)**: [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“
9. **Partner und Nachweise (Kfz-Innung, Werkstattsystem, Prüforganisation im Haus mit HU-Tagen, Herstellerzulassungen; nur mit Erlaubnis und aktuell)**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster) `logo-wand-social-proof` · Variante „Ruhiges Raster“
10. **Karriere und Ausbildung (Kfz-Mechatroniker:in, Servicetechniker:in, Ausbildung; Stellen direkt offen mit Gehalt, Initiativbewerbung; eigene Karriere-Microsite nach arbeitgeber-karriere)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“
11. **Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [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“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
12. **Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Betrieb kein Kleinstunternehmen ist – vom Kunden prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Text auf Pfad](https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo?v=reifen) `text-on-path` · Variante „Reifenflanke: Größe auf dem Bogen, Teil für Teil erklärt“

## 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: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“

## Weitere Bausteine

- Navigation: [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Icon-Squash-and-Stretch (Pfeil dehnt sich)](https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo) `icon-squash-stretch`
- Galerie: [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“
- 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“, [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“

## 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?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Optional (nur als Zusatz)

- [Agentenformular mit WebMCP](https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=termin) `agentenformular-webmcp` · Variante „Wartungstermin“

## Nicht verwenden

- vorher-nachher-vergleichsregler – Signatur von handwerk; Unfallinstandsetzung als zwei feste Fotos nebeneinander mit Datum
- kostenrechner-konfigurator – Reparaturkosten hängen vom Befund ab (wann_nicht: jeder Auftrag anders); Festpreise als Tabelle und Kostenvoranschlag
- cinematic-video-hero / interaktives-3d-hero – lange Ladezeit; der erste Bildschirm ist Termin, Telefon und Preis
- hide-on-scroll-header – Telefon und „Termin buchen“ müssen immer erreichbar sein
- zahlen-odometer – hochgezählte „10.000 reparierte Autos“ wirken unseriös
- kreistext-siegel-rotierend – „Meisterbetrieb“-Stempel ist Template-Klischee; Schrift auf dem Rund gibt es nur an der Reifenflanke, und sie dreht sich nicht
- marquee-laufband – Markenlogos ziehen vorbei, ohne etwas zu sagen; Partner als ruhiges Raster
- webgl-bildverzerrung / bild-zoom-in-maske auf Fahrzeugfotos – verfälscht Fotos, die verkaufen; Fahrzeugbilder stehen still
- glas-button / frosted-glass-erweitert – Glas über Hallenfotos senkt den Kontrast
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – bremsen, wer schnell einen Preis sucht
- konfetti-erfolg – nach der Buchung eine Bestätigung mit Datum, Uhrzeit, Leistung und Telefonnummer
- prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Annahme; wenn ein Assistent kommt, beim Start gekennzeichnet (Art. 50 KI-VO)
- Stockfotos von Mechanikern mit sauberen Händen und Neuwagen im Studio – echte Werkstatt, echte Fahrzeuge vom Hof

## Regeln

- Erster Bildschirm: echtes Werkstattfoto, H1 mit Leistung und Ort, Öffnungsstatus aus echten Zeiten, „Termin buchen“ und Telefon; darunter drei Festpreise mit Stand-Datum.
- Festpreise als echte HTML-Tabelle (speisekarte-editorial, Variante preisliste): Endpreis inkl. MwSt. (Preisangabenverordnung), Fahrzeugklasse als Spalte, je Zeile was enthalten ist (Material, Entsorgung, Auswuchten). Bei HU und AU klar sagen, ob die Gebühr der Prüforganisation enthalten ist und was eine Nachprüfung kostet. „ab“ nur mit dem Satz, wovon der Endpreis abhängt. Aktionspreise mit Zeitraum.
- Termin in höchstens vier Schritten: Leistung, Fahrzeug, Tag und Abgabeart, Kontakt. Kennzeichen und Foto vom Fahrzeugschein nur freiwillig; die Bestätigung nennt Datum, Uhrzeit, Leistung, Preis oder Rahmen und Telefon. Ein Buchungs-Widget eines Anbieters lädt erst nach Klick; Telefon und WhatsApp stehen immer daneben (WhatsApp mit Hinweis auf die Datenübermittlung).
- Hol- und Bringdienst und Ersatzwagen: Postleitzahl zuerst (mehrschritt-anfrage, Variante plz) mit drei Antworten, Zonenpreis und Ersatzwagen-Preis pro Tag offen (Schwindt nennt 29,95 €); die Orte zusätzlich als Text.
- Kostenrahmen: „Wir rufen vor jeder Mehrarbeit an“ und Regeln zum Kostenvoranschlag (was kostenlos ist, was nach Zeit berechnet wird) nur, wenn der Betrieb so arbeitet.
- Reifenflanke (text-on-path): statisch, ohne Scroll-Kopplung; die Größe steht einmal als echter Text in einer Liste daneben, das SVG ist aria-hidden. Reifenangebote mit Preis zeigen das EU-Reifenlabel und das Produktdatenblatt in der Nähe des Preises, ein Link auf das Label reicht (Art. 6 VO (EU) 2020/740).
- Fahrzeugbestand: Feed von mobile.de, AutoScout24 oder dem Händlersystem mit „Stand: Datum, Uhrzeit“. Sobald Motordaten (Leistung, Hubraum, Beschleunigung) erscheinen, steht die Pflichtzeile mit kombiniertem Verbrauch, CO₂-Emissionen und CO₂-Klasse gut lesbar daneben, nicht schwächer als der Angebotstext (Pkw-EnVKV § 5, auch im Internet). Bei Neuwagen, Tages- und Kurzzulassungen Pflicht; bei Gebrauchtwagen, sobald WLTP-Werte vorliegen. „k.A.“ oder „undefined“ nie ausgeben: Fehlt ein Pflichtwert, Motordaten weglassen und die Karte prüfen lassen. Plug-in-Hybride zusätzlich gewichtet kombiniert und bei entladener Batterie.
- Preise im Bestand: Gesamtpreis inkl. MwSt., bei Neuwagen Überführungskosten im Endpreis statt in der Fußnote; „Differenzbesteuert“ oder „MwSt. ausweisbar“ an der Karte. Monatsraten nur mit repräsentativem Beispiel (Sollzins, effektiver Jahreszins, Laufzeit, Anzahlung, Nettodarlehensbetrag, Gesamtbetrag, Darlehensgeber) direkt bei der Rate.
- Bewertungen: Google-Profil mit Schnitt, Anzahl und Stand, der Echtheitshinweis steht direkt daneben (§ 5b Abs. 3 UWG); keine eigenen Fünf-Sterne-Zitate ohne Herkunft.
- Tiefen-Taste (tiefen-taste-3d, Variante stapel) nur für „Termin buchen“ und höchstens einmal je Ansicht; alle anderen Knöpfe flach mit Pfeil (pfeil-icon-button, Variante tausch) oder Telefon-Icon; icon-squash-stretch nur als Mikro-Rückmeldung des Icons. Gelb auf hellem Grund mit 2 px Asphalt-Rand.
- Die untere Mobilleiste (mobile-bottom-navigation, Variante fab) zeigt Termin, Anrufen, WhatsApp und Anfahrt und verdeckt weder Consent-Banner noch die Bestätigung der Buchung.
- Fotos von Kundenfahrzeugen nur mit Einwilligung und mit unkenntlichem Kennzeichen; Fahrzeugschein-Daten und Kennzeichen sind personenbezogen, Datenschutzhinweis direkt am Formular.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG mit Handwerkskammer, Eintragung in die Handwerksrolle (Kfz-Techniker-Handwerk) und Meister; beim Autohaus Vermittlerangaben für Finanzierung und Versicherung, falls vermittelt wird. Wird online verbindlich beauftragt oder ein Gutschein verkauft, Widerrufs-Button „Vertrag widerrufen“ ohne Login im Footer (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Keine Umweltaussagen wie „klimaneutrale Werkstatt“ ohne Nachweis. Alles vom Kunden prüfen lassen; Claude schreibt keine Rechtstexte.

## Rezept-Varianten

- **Autohaus mit Neu- und Gebrauchtwagen**: Fahrzeugbestand rückt direkt unter den Hero, die Werkstatt wird zweite Säule mit eigenem Termin-Knopf. Verkaufsberater:innen mit Foto und Durchwahl; Probefahrt und Inzahlungnahme als kurze Anfragen. Die Pflichtzeile nach Pkw-EnVKV gilt auch im Hero und in Social-Teasern, sobald Motordaten erscheinen. Herstellerlogos nur nach den Vorgaben des Herstellervertrags.
- **Reifenservice und Reifenhandel**: Saison-Termine (Oktober bis Dezember, März bis Mai) mit freien Tagen als Text, Einlagerung mit Protokoll (Profiltiefe, DOT, Schäden) und Abholung; Reifenangebote mit EU-Label am Preis. Die Reifenflanke ist hier die Startseite: Größe eingeben oder vom Reifen ablesen.
- **Karosserie- und Lackierbetrieb / Unfallinstandsetzung**: Erster Weg ist „Unfall gehabt? So geht es weiter“ in vier Schritten (sichern, Fotos, Gutachter, Abrechnung mit der Versicherung) mit Telefon. Vorher und nachher als zwei feste Fotos mit Datum, kein Regler (Signatur von handwerk). Smart Repair und Delle mit ab-Preisen, Lackierung nach Befund.

## Vor der Abgabe

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