# Bauplan: Handwerk: Werkstatt und Klartext Rezept `handwerk-werkstatt-klartext` · Handwerksbetrieb (Tischlerei/Schreinerei, Elektro, Sanitär/Heizung, Maler) · Stimmung: bodenständig, vertrauenswürdig, materialnah, direkt · Stand 02.11.2026 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. ## 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 `handwerk-werkstatt-klartext`) und https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/ - Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt - Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/handwerk-werkstatt-klartext/index.html ## Schrift - Headline: `special-gothic` · Text: `atkinson-hyperlegible-next` - Größen: h1 clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic wght 700, wdth 100, Laufweite -0.01em, Zeilenhöhe 1.05 (Holzrausch lg: 3rem / -0.01em / 1); h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); Gewerk-Labels und Zahlenleiste in Special Gothic Condensed One (bzw. wdth 75), 0.8125rem Versal, +0.04em; Fließtext Atkinson Hyperlegible Next mind. 1.0625rem (17px), Zeilenhöhe 1.55; Meta 0.8125rem. - 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` ## Farbe Materialfarben als Flächen (Zement, Holz, Salbei), dunkle Schrift, und genau ein kräftiger Signalton, der nur für Anfrage- und Anruf-Buttons gilt. Kein Firmenblau-Verlauf. - `--farbe-grund` #EFEDEA (Grund (Holzrausch hellblau)) - `--farbe-flaeche` #D3CDC2 (Karten/Flächen (cement)) - `--farbe-flaeche-2` #C3B4A5 (Holzton für Akzentflächen (braun)) - `--farbe-flaeche-3` #BDC1A9 (Sekundärfläche (grün)) - `--farbe-text` #1A1A1A (Text) - `--farbe-signal` #FB6100 (Signal: Anfrage/Anruf (Holzrausch orange; bei SHK z. B. Rot wie thermondo #F60439)) ## Bewegung - Animationsstil: [Animationsstil „Tech präzise“ (Produkt-UI)](https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo) `token-tech-praezise` - Kurve: cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9) - Dauer: 150 (Hover, Farbe), 200–280 (Menüs, Akkordeon), 400 (Bild-Einblendung) - Regel: Bewegung erklärt nur Zustände: Menü auf, Akkordeon auf, Formular gesendet. Einblendungen beim Scrollen höchstens 8 px Versatz plus Deckkraft. Schließen schneller als Öffnen (Austrittskurve des Stils). ## 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(64px, 8vw, 120px) - Dichte: mittel - Hinweis: 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 - Seitenrand: clamp(16px, 4vw, 48px) - Spaltenabstand: clamp(16px, 2.4vw, 32px) - 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 - Pillenform für Buttons: False - Linie: 1px #D3CDC2 (Zement) zwischen Leistungen und um Formularfelder - 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. ## Bildsprache - 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. ## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen) - 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: „Ihr kompetenter Partner rund ums Haus“, „Qualität, die überzeugt“, „Wir sind Ihr Partner für …“, „klimaneutral“ ohne Nachweis. ## Hero Echtes Foto (Team, Werkstatt, fertiges Projekt) + ein Satz Leistung + Region + zwei CTAs (Anfrage, Telefon). Kein Effekt-Muster; die Zahlen stehen in einer eigenen Sektion direkt darunter. - Raster: 12 Spalten, Text über Spalte 1 bis 5, Foto über 6 bis 12 bis an den rechten Rand; mobil Foto oben, Text darunter. - 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. - 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. **Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=typo) `zahlen-fakten-section` · Variante „Typo-Ereignis“ 2. **Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)**: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“, [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“ 3. **Referenzen / Projekte**: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Vorher-Nachher-Vergleichsregler](https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/demo) `vorher-nachher-vergleichsregler` 4. **So läuft ein Auftrag ab**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie` 5. **Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat) `testimonials-neu-gedacht` · Variante „Ein großes Zitat“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“ 6. **Zertifikate / Innung / Herstellerpartner**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis) `logo-wand-social-proof` · Variante „Siegel mit Nachweis“ 7. **Team / Ausbildung / Karriere**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“, [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“ 8. **Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)**: [Kostenrechner mit Spanne](https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad) `kostenrechner-konfigurator` · Variante „Badsanierung“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=rechner) `finanzierung-pflichtangaben` · Variante „Ratenrechner mit Laufzeit-Regler“ 9. **FAQ (Kosten, Förderung, Termine)**: [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“ 10. **Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz) `mehrschritt-anfrage` · Variante „PLZ zuerst“, [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`, [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“ 11. **Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)**: [Ö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“ ## Signatur (Pflicht) - [Vorher-Nachher-Vergleichsregler](https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/demo) `vorher-nachher-vergleichsregler` ## Buttons - Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“ - Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“ ## 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=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“ - Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“ - Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback` - Galerie: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“ - 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 ](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` ## Optional (nur als Zusatz) - [Agentenformular mit WebMCP](https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt) `agentenformular-webmcp` · Variante „Projektanfrage“ ## Nicht verwenden - hide-on-scroll-header – Telefon und Anfrage müssen immer sichtbar bleiben - smooth-scroll-lenis – verzögert, bringt hier nichts - kreistext-siegel-rotierend – 'Meisterbetrieb'-Siegel ist Template-Klischee; Meisterbrief lieber als echtes Foto oder Logo - papier-druck-textur – Holz- oder Papier-Fake-Texturen wirken billig, echte Fotos zeigen das Material - magnetische-elemente / cursor-follower-lerp – Agentur-Gesten, die zu einem Betrieb nicht passen - scramble-decode – 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. ## Rezept-Varianten - **Solar, Wärmepumpe, Energieberatung**: Schrift, Farbe, Stil und Signatur bleiben; vorher-nachher-vergleichsregler zeigt Heizungsraum oder Dach vor und nach der Montage mit deckungsgleichen Fotos. kostenrechner-konfigurator geprüft: Die Demo-Varianten bad und dach passen nicht zu PV oder Wärmepumpe. Aufbau der Variante dach übernehmen (Fläche, Abhängigkeiten, Zähler); Eingaben für PV Dachfläche, Ausrichtung, Neigung und Jahresverbrauch, für die Wärmepumpe Wohnfläche, Baujahr, heutige Heizung und Heizkörper oder Fußbodenheizung. Formeln und Spannen nur aus eigenen Erfahrungswerten des Betriebs, Ergebnis immer als Spanne mit Annahmen und Stand-Datum, Übergabe an die Anfrage ohne Kontaktpflicht vor dem Ergebnis; ohne belastbare Werte nur Ab-Preise und Beispielprojekte (wann_nicht). produktfinder-quiz geprüft: Variante schritte („Welche Lösung passt zu meinem Haus?“) nur mit Fachperson dahinter und nie als Hürde vor der Anfrage; bei weniger als fünf Lösungen (z. B. Luft-Wasser, Sole-Wasser, Hybrid) statt Quiz vergleichstabelle-sticky, Variante alternativen (Textwerte statt Häkchen). Anfrage wie im Rezept mit mehrschritt-anfrage, Variante plz, dazu Foto-Upload von Zählerschrank, Heizung oder Dach. Energieberater:innen mit team-ueber-mich-layout. Recht: Förderprogramme nur mit Stand-Datum, Link zur Quelle und ohne Zusage (z. B. KfW-Heizungsförderung 458: Zuschuss 30 bis 80 %, Antrag vor Vorhabenbeginn und nach Vertrag mit einem Fachunternehmen; BAFA-Förderung der Energieberatung für Wohngebäude); Nullsteuersatz für bestimmte PV-Anlagen (§ 12 Abs. 3 UStG) nur als Hinweis mit Verweis auf die Steuerberatung; keine pauschalen Umweltaussagen wie „klimaneutral heizen“ ohne Nachweis (seit 27.09.2026); Ertrags- und Einsparprognosen als Spanne mit Annahmen, nie als Garantie; Energieberatung für Förderprogramme nur mit nachweisbarer Listung in der Energieeffizienz-Expertenliste; Handwerkskammer und Meistertitel im Impressum – 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“.