Handwerk: Werkstatt und Klartext

Handwerksbetrieb (Tischlerei/Schreinerei, Elektro, Sanitär/Heizung, Maler)

Echte Fotos aus Werkstatt und Baustelle, erdige Materialfarben und ein einziger Signalton für 'Anfragen' oder 'Anrufen'. Leistungen, Referenzen und Ablauf stehen klar gegliedert, Telefon und Anfrage sind auf jeder Seite zu erreichen. Bewegung ist knapp und funktional wie in einer Produkt-UI, nicht inszeniert.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Werkstatt und Klartext

Echte Fotos aus Werkstatt und Baustelle, erdige Materialfarben und ein einziger Signalton für 'Anfragen' oder 'Anrufen'.

Headline: Special Gothic
Text: Atkinson Hyperlegible Next

Farbe

#EFEDEA
#D3CDC2
#C3B4A5
#BDC1A9
#1A1A1A
#FB6100

Bewegung

cubic-bezier(0.2, 0, 0.38, 0.9)

Stil: Animationsstil „Tech präzise“ (Produkt-UI)
Dauer: 150 (Hover, Farbe), 200–280 (Menüs, Akkordeon), 400 (Bild-Einblendung)

Aufbau der Seite

SignaturVorher-Nachher-Vergleichsregler

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

Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte)Zahlen-/Fakten-Sektion als Typo-Ereignis · Typo-Ereignis
Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)Bild-Zoom in der Maske · Basis Akkordeon mit Höhenanimation auf auto · Leistungsliste Leistungsseite: Antwort zuerst · Handwerk
Referenzen / ProjekteMasonry-Galerie mit nativem display: grid-lanes (plus Fallback)Vorher-Nachher-Vergleichsregler
So läuft ein Auftrag abProzess-/Timeline-Sektion mit wachsender Linie
Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · Ein großes Zitat Plattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
Zertifikate / Innung / HerstellerpartnerLogo-Wand / Social-Proof-Band · Siegel mit Nachweis
Team / Ausbildung / KarriereTeam-/Über-mich-Layout mit Porträt-Interaktion · Raster Stellenliste mit Kurzbewerbung · Wenige Stellen
Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)Kostenrechner mit Spanne · Badsanierung Finanzierung mit Pflichtangaben und Warnhinweis · Ratenrechner
FAQ (Kosten, Förderung, Termine)Akkordeon mit Höhenanimation auf auto · FAQ
Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)Mehrschritt-Anfrage mit Zusammenfassung · PLZ zuerst Fehlerzusammenfassung im Formular · Liste Validierung erst nach Interaktion Datei-Ablage mit Vorschau und Prüfung · Schadensfoto zur Anfrage
Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)Öffnungszeiten mit Live-Status · Karte Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild

Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Mobile Bottom-Navigation und Bottom-Sheet-Menü · Kontaktleiste
Hover: Bild-Zoom in der Maske · Basis
Mikroanimation: Druck-Feedback (Press/Tap)
Galerie: Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Praxis
Buttons: Füllung vom Eintrittspunkt · Clip-Path Kontur-Button, der sich zeichnet · Eckklammern schließen sich

OptionalAgentenformular mit WebMCP

Nicht verwenden

Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück Telefon und Anfrage müssen immer sichtbar bleiben
Smooth Scroll mit Lenis verzögert, bringt hier nichts
Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis) 'Meisterbetrieb'-Siegel ist Template-Klischee; Meisterbrief lieber als echtes Foto oder Logo
Papier- und Drucktextur Holz- oder Papier-Fake-Texturen wirken billig, echte Fotos zeigen das Material
Magnetische Buttons und Elemente Nachzieh-Cursor (Lerp-Follower) Agentur-Gesten, die zu einem Betrieb nicht passen
Scramble/Decode-Text (Zeichen entschlüsseln sich) technisch-kalt, gegen die Branche

Regeln

Hero = echtes Foto (Team, Werkstatt, fertiges Projekt) + ein Satz Leistung + Region + zwei CTAs (Anfrage, Telefon). Die Zahlenleiste (seit 19xx, Projekte, Mitarbeitende) ist eine eigene Sektion direkt darunter, nur mit echten Werten.
Telefonnummer als tel:-Link im Header und mobil in einer unteren Leiste (Anrufen / Anfrage / WhatsApp).
Leistungen mit kurzer Beschreibung je Punkt (wie thermondos Mega-Menü), bei mehr als 5 Leistungen eigene Unterseiten.
Wenn möglich Ab-Preise oder Förderhinweise offen nennen (thermondo: 'ab 8.700 € nach Förderung').
Referenzen als Masonry mit Ort und Gewerk, Renovierung als Vorher/Nachher-Regler mit deckungsgleichen Fotos.
Anfrageformular kurz: Leistung (Auswahl), PLZ, Wunschzeitraum, Foto-Upload optional; Validierung erst nach dem Verlassen eines Feldes.
Ein Signalton nur für Handlungen; alle anderen Farben aus dem Material.
Footer mit Öffnungszeiten, Notdienst (falls vorhanden), Einzugsgebiet und Handwerkskammer-Eintrag.
agentenformular-webmcp nur als Zusatz (optional, Priorität F): Die Anfrage funktioniert vollständig als normales Formular.
Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer, Eintragung in die Handwerksrolle und ggf. Meistertitel; Preise und Ab-Preise inkl. MwSt.; Förderhinweise nur aktuell und mit Stand; Google-Bewertungen nur mit Echtheitshinweis direkt daneben (OLG Frankfurt 19.05.2026); keine pauschalen Umweltaussagen wie „klimaneutral“ ohne Nachweis (UWG seit 27.09.2026); Foto-Upload mit Datenschutzhinweis – vom Kunden prüfen lassen.

Bild und Ton

Licht: Echtes Licht in Werkstatt und auf der Baustelle, auch Arbeitslicht; nicht nachgeschärft, nicht gefiltert.
Ausschnitt: Hände am Werkstück, Material im Anschnitt, fertiger Raum in der Totale. Vorher und Nachher deckungsgleich aus derselben Position.
Personen: Ja: das eigene Team bei der Arbeit, mit Einwilligung, Gesicht erlaubt.
Formate: 3:2, 4:5, 1:1
Nicht: Keine Stock-Handwerker mit Helm und Daumen hoch, keine Holz- oder Papier-Fake-Texturen, keine Renderings statt echter Projekte, kein „Meisterbetrieb“-Siegel als Deko.
Anrede: Sie
Sätze: Kurz und konkret: Leistung, Ort, Zahl, nächster Schritt. Ein Satz pro Leistung, Ab-Preise offen.
Haltung: Direkt wie am Telefon, bodenständig, ohne Werbesprech.
Tonproben: Küchen und Einbaumöbel aus eigener Werkstatt in [Ort]., Rufen Sie an. Wir kommen zum Aufmaß.
Nicht schreiben: „Ihr kompetenter Partner rund ums Haus“, „Qualität, die überzeugt“, „Wir sind Ihr Partner für …“, „klimaneutral“ ohne Nachweis.

Hero, Raum und Form

Hero-Raster: 12 Spalten, Text über Spalte 1 bis 5, Foto über 6 bis 12 bis an den rechten Rand; mobil Foto oben, Text darunter.
Hero-Bild: Echtes Foto (Team, Werkstatt oder fertiges Projekt), 3:2 Desktop, 4:5 mobil.
Überschrift: clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic 700, oben im Textblock links.
Handlung: „Anfrage stellen“ (gefüllt, #FB6100) und „Anrufen“ als tel:-Link mit sichtbarer Nummer, nebeneinander unter dem Leistungssatz.
Zusatz: Region als eigene Zeile unter der H1; die Zahlenleiste ist eine eigene Sektion direkt darunter; mobil untere Leiste Anrufen / Anfrage / WhatsApp.
Sektionsabstand: clamp(64px, 8vw, 120px)
Dichte: mittel
Raum: Klar gegliedert, nicht gedrängt: Leistungen als Liste mit 24 px zwischen den Punkten, Zahlenleiste mit 32 px Innenabstand. Mobil eine Leiste unten, darüber 80 px Freiraum am Seitenende.
Spalten: 12
Maximale Breite: 1280px
Raster: Hero asymmetrisch 5/7 (Text links, Foto rechts). Leistungen als Liste mit kurzer Beschreibung, keine Icon-Kacheln. Referenzen als Masonry mit 3 Spalten, mobil 1.
Radius klein: 4px
Radius groß: 8px
Schatten: keiner
Form: Flächen trennen sich über die Materialtöne (Zement, Holz, Salbei), nicht über Schatten. Der Signalton #FB6100 ist nur Fläche der Anfrage- und Anruf-Knöpfe.

Vorbilder