Zum Inhalt
← Rezepte
Alle Rezepte

Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertig

Freie Kfz-Werkstatt / Autohaus mit Werkstatt / Reifenservice / Karosserie- und Lackierbetrieb

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.

Bauplan tokens.css Alle Techniken

Schrift

Festpreis, Termin, fertig

Die Seite beantwortet drei Fragen in dieser Reihenfolge: Wann kann ich kommen, was kostet es, wann ist das Auto fertig.

Headline
Mona Sans
Text
Google Sans Flex

Farbe

  • #F2F1ED
  • #121314
  • #595E63
  • #232629
  • #F5B700
  • #1F7A3E
  • #B3261E

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
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

Aufbau der Seite

SignaturText auf Pfad

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

  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 · PLZ zuerstTermin-Buchung per 2-Klick-Einbettung · VorauswahlFehlerzusammenfassung im Formular · Kompakt über dem KnopfValidierung erst nach InteraktionDatei-Ablage mit Vorschau und Prüfung · 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 · Salon-PreiseTabs und Segmente mit Pfeiltasten · 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 · LeistungslisteLeistungsseite: Antwort zuerst · 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 · Reifen
  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, InzahlungnahmeFahrzeugbestand aus dem Börsen-FeedObjekt-Steckbrief im Exposé · FahrzeugFacettenfilter mit Ergebnisliste · FilterleisteFinanzierung mit Pflichtangaben und Warnhinweis · Fahrzeugkarte
  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
  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 · 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 · Statement-Satz
  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 · 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 · 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 · KarteKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildKontakt- und Anfrageformular als eigene SektionFirmendaten aus einer Quelle · Kfz-Werkstatt
  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 · Informationen nach BFSG

OptionalAgentenformular mit WebMCP

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „Ihr Auto ist bei uns in besten Händen“, „Rundum-sorglos“, „0 %-Finanzierung“ ohne Pflichtangaben.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; darunter die Festpreis-Zeile über alle 12.
  • Hero-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.
  • Sektionsabstand: clamp(56px, 7vw, 104px)
  • Dichte: dicht
  • Raum: Schnell zu scannen: Festpreis-Tabelle mit 12 px Zeilen, Terminstrecke mit 16 px zwischen Feldern, kurze Sektionsabstände.
  • Spalten: 12
  • 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
  • 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.
Vorbilder