# Bauplan: Gebäudedienste: sauber, pünktlich, ansprechbar

Rezept `gebaeudedienste-sauber` · Gebäudereinigung / Unterhalts- und Glasreinigung / Hausmeisterservice / Facility Services für Büro, Praxis, Wohnanlage und Gewerbe · Stimmung: verlässlich, klar, bodenständig, nüchtern · Stand 02.11.2026

Verkauft wird kein Werkstück, sondern Verlässlichkeit: welche Objektart, welcher Turnus, wer ist zuständig, was kostet das je Monat. Die Seite fragt zuerst nach der Objektart und führt in vier Schritten zur Besichtigung. Turnus und Leistungsverzeichnis stehen als Tabelle, die Objektleitung mit Foto und Durchwahl. Die zweite Startseite ist die Personalgewinnung (Minijob, Teilzeit, mehrsprachig). Breite Strichpunkt Sans für Überschriften, Commissioner für Text und Tabellen, Kalkweiß und Fliesengrau, ein klares Blau nur für Anfragen und Anrufen. Signatur: Referenzfotos öffnen sich einmal mit einer waagerechten Maske, wie ein Abzieher über eine Glasscheibe. Abgrenzung zu handwerk-werkstatt-klartext (Werkstück, Vorher/Nachher, Kostenrechner) und industrie-b2b-mittelstand (Produktdaten, Fachperson je Branche).

## 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 `gebaeudedienste-sauber`) und https://cecodesign.de/lab/fundus/rezepte/gebaeudedienste-sauber/
- 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/gebaeudedienste-sauber/index.html

## Schrift

- Headline: `strichpunkt-sans` · Text: `commissioner`
- Größen: h1 Strichpunkt Sans clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem), wdth 140, wght 700, Laufweite -0.02em, Zeilenhöhe 1.0; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wdth 120, wght 700. Fließtext Commissioner 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Turnus-Tabelle und Preise Commissioner 1rem mit Tabellenziffern; Tabellenköpfe 0.8125rem Versal, +0.06em, wght 600. Knöpfe Commissioner 600, 1rem.
- 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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`

## Farbe

Hell und sachlich wie ein frisch gereinigter Flur: Kalkweiß als Grund, Fliesengrau als Fläche für Tabellen und Anfrage, Dunkelblau der Arbeitskleidung für Footer und Stellenband. Ein klares Blau nur für Besichtigung anfragen und Anrufen. Kein Wasser- oder Glanzverlauf, keine Seifenblasen, kein Hellblau-Türkis als Branchenklischee. Die eigene Markenfarbe der Firma ersetzt das Blau, wenn sie auf Kalkweiß 4,5 : 1 erreicht.

- `--farbe-grund` #F5F6F4 (Grund Kalkweiß)
- `--farbe-text` #141618 (Text (16,7 : 1 auf Grund))
- `--farbe-flaeche` #E2E7E5 (Fläche Fliese: Turnus-Tabelle, Anfrage, Objektkarten (Text 14,5 : 1))
- `--farbe-dunkel` #1D2A33 (Dunkel Arbeitskleidung: Footer, Stellenband (Weiß darauf 14,7 : 1))
- `--farbe-signal` #1F58B8 (Signal Blau: Besichtigung anfragen, Anrufen (Weiß darauf 6,7 : 1; als Fläche auf Grund 6,2 : 1); auf Dunkel stattdessen Kalkweiß-Knopf mit dunkler Schrift)
- `--farbe-leise` #566067 (Leise: Meta-Angaben, Stand-Daten (5,9 : 1 auf Grund, 5,1 : 1 auf Fläche; auch für Feldränder, 3 : 1))
- `--farbe-linie` #CDD2D0 (Linie: Haarlinien zwischen Tabellenzeilen (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Für UI: [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.25, 1, 0.5, 1) (token-swiss-knackig); Austritt cubic-bezier(0.5, 0, 0.75, 0); UI über animationsstil_ui
- Dauer: 200 (Hover, Farbe), 350 (Akkordeon, Reiter), 230 (schließen), 500 (Bild-Maske eines Referenzfotos, einmal); Anfrage und Dialoge 300 auf, 200 zu
- Regel: Bewegung bestätigt nur Zustände: Akkordeon auf, Schritt erledigt, Anfrage gesendet. Text, Tabellen und Preise stehen sofort. Die Maske der Signatur läuft einmal je Bild, von links nach rechts, nie in einer Schleife. Bei prefers-reduced-motion stehen die Fotos sofort, Akkordeon und Schritte wechseln ohne Weg. Die Kapitelkante zieht mit dem Scroll eine gerade Bahn wie der Abzieher, Text steht.
- Hinweis: Knackig und kurz: Akkordeon, Reiter und Tabellen in 350 ms mit der Out-Kurve des Stils, Schließen mit der Austrittskurve in etwa 65 %. Die Signatur ist der einzige längere Moment (500 ms je Bild, einmal). Anfrage, Dialoge und mobile Leiste laufen über token-toggle-asymmetrisch (öffnen 300 ms, schließen 200 ms), wie von der Recherche vorgeschlagen.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.25, 1, 0.5, 1)` (--ease) für alles: knackig und kurz, Schließen mit der Austrittskurve; Anfrage, Dialoge, mobile Leiste über das UI-Paar; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 200 ms, mittel 350 ms, gross 500 ms, seitenwechsel 650 ms, schliessen 230 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf und mobile Leiste: ab 0 ms, stehen
2. Hero-Foto: ab 0 ms, steht (LCP)
3. H1: ab 0/80/160 ms, 700 ms, Zeilen steigen aus Masken (translate 0 105 % → 0), --ease
4. Satz und Knöpfe: ab 240 ms, 500 ms, Deckkraft und Weg, --ease
5. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 860 ms. Wiederholt: H1-Zeilen wie oben.
- Starter Wörz zieht beim ersten Aufruf die Wortmarke in drei Bahnen ab (je 340 ms, ab 80/380/680 ms), H1 dann ab 900 ms; zusammen etwa 1,8 s. Das Rezept nennt kein Intro; nur mit intro-ohne-wartezeit und Begründung, sonst über ende_max 1.200 ms.

**Scrollen** (höchstens drei Reveal-Arten):

- Kapitelkante (`kapitel-kante-signatur`): Kapitelgrenzen zwischen Objektart, Turnus und Referenzen als Abzieher-Bahn; scrollgekoppelt, Versatz 0 ms, ein gerader Strich mit Gummilippe an der Spitze zieht sich scrollgekoppelt über die Breite, Kapitel-Wort am Anfang; scrollgekoppelt (animation-timeline: view(); animation-range-start cover 5 %, animation-range-end cover 50 %, als Langform nach der Kurzschreibweise animation); ohne Unterstützung Endzustand
- Hinweis: Einziger längerer Moment ist die Signatur (Bild-Maske je Referenzfoto); die Kapitelkante zieht nur mit dem Scroll und trägt dieselbe gerade Kante.
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Tabellen, Preise, Leistungsverzeichnis (Rezept), Anfrage

**Hover** (350 ms ein, 230 ms aus, --ease / --ease-aus; nur mit Zeiger):

- Link: Strich wächst in 350 ms, raus in 200 ms
- Knopf: fuellung-vom-eintrittspunkt basis (clip-path, 500 auf / 230 zu wie im Starter); kontur-button-zeichnen zeichnen
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px, Bild steht
- Bild: kein Zoom

**Signatur** `clip-path-bild-reveal`: Referenzfotos öffnen sich einmal je Bild wie unter dem Abzieher: Maske von links nach rechts, 500 ms --ease, nie in einer Schleife (Rezept). Auslöser: Scroll (33 % sichtbar); Wiederholung: einmal je Bild und Seitenaufruf.

**Seitenwechsel** `richtungsbewusste-uebergaenge`, Spielart: Abzieher: neue Seite hinter einer Gummilippe aufgedeckt (clip-path auf ::view-transition-new(root)), alte steht und dunkelt nur leicht ab; dazu `vt-cross-document-mpa` (typen), `vt-shared-element-morph`. Richtung: vor (Lippe von links), rueck (von rechts), tiefer (Übersicht → Leistung, von oben, Bild wächst zum Kopfbild), hoeher (von unten). Geteilt: kopf, unten (mobile Leiste), abzieher (Lippe als eigenes Element), held (Leistungsbild). Dauer 650 ms.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Bewegung bestätigt nur Zustände (Rezept). Signatur einmal je Bild, nie als Schleife (Rezept). Kapitelkanten höchstens drei je Seite, nie über Tabellen und Preisen.

**Reduzierte Bewegung:** Fotos stehen sofort, Akkordeon und Schritte wechseln ohne Weg (Rezept); Seitenwechsel als Überblendung 150 ms ohne Lippe. Kapitelkanten stehen fertig gezogen. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Glanzsterne, Funkeln, Seifenblasen (Rezept: keine Glanz-Klischees); Wisch-Animationen über Text; Vorher-Nachher-Regler (Rezept).

Herkunft: Starter gebaeudedienste-sauber (tokens.css --dauer-wisch 650, --dauer-rezept-1..5 200/230/300/350/500; style.css steigen --dauer-l mit 80 ms Versatz, taucht --dauer-m ab +240, Hover 350/200 und Knopf 500/230). Ablauf ohne Bahnen-Intro eigene Festlegung. Kapitelkante 05.11.2026 aus kapitel-kante-signatur (linie: Bleistift, Kreide, Abzieher).

## 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, 112
- Sektionsabstand: clamp(64px, 8vw, 112px)
- Dichte: mittel
- Hinweis: Klar und luftig wie ein leerer Flur: Tabellen dicht (12 px Zeilenabstand), Sektionen mit viel Abstand, Objektarten als Liste mit 24 px zwischen den Punkten.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(16px, 2.4vw, 32px)
- Maximale Breite: 1280px
- Raster: Hero 5/7 (Text links, Foto randabfallend rechts). Objektarten als zweispaltige Liste, Turnus-Tabelle über 12 Spalten, mobil waagerecht scrollbar mit fester erster Spalte.
- Radius klein: 2px
- Radius groß: 4px
- Pillenform für Buttons: False
- Linie: 1px #CDD2D0 zwischen Tabellenzeilen; Formularfelder 1px in Leise #566067 (3:1)
- Schatten: keiner
- Form: Kanten fast eckig wie Fliesenfugen. Flächen trennen sich über Fliesengrau, nicht über Schatten.

## Bildsprache

- Licht: Frühes Tageslicht oder Arbeitslicht im echten Objekt, kühl-neutral, nicht nachgeschärft.
- Ausschnitt: Mitarbeitende bei der Arbeit in der Halbtotale, Glasflächen und Böden im Streiflicht, Objekt in der Totale.
- Personen: Ja: eigenes Team mit Einwilligung, Arbeitskleidung mit Firmenlogo; keine Kundinnen und Kunden ohne Erlaubnis.
- Formate: 3:2, 4:5, 16:9
- Nicht: Keine Stockfotos mit Gummihandschuh und Sprühflasche, keine Glanzsterne und Seifenblasen, keine fremden Firmenlogos im Bild.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

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

- Anrede: Sie
- Sätze: Kurz und sachlich: Objekt, Turnus, Uhrzeit, Preis, Ansprechperson.
- Haltung: Verlässlich wie ein Dienstplan, freundlich, ohne Werbesprech.
- Tonproben: Büros in [Ort], täglich vor 7 Uhr gereinigt., Ihre Objektleiterin ist [Name]. Sie erreichen sie unter [Durchwahl].
- Nicht: „blitzblank“, „strahlend sauber“, „Ihr kompetenter Partner“, „grüne Reinigung“ ohne Nachweis.

## Hero

Foto-Hero (split-randabfallend): echte Mitarbeitende bei der Arbeit in einem erkennbaren Objekt (Treppenhaus, Glasfront, Büro am frühen Morgen), mit Einwilligung. Daneben ein Satz, was gereinigt wird und wo, darunter die Objektart als erste Frage („Was sollen wir reinigen?“ mit vier bis sechs Knöpfen) und Telefon. Kein Stockfoto mit Gummihandschuh und Sprühflasche, kein Glanzstern.

- 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 aus einem betreuten Objekt mit Mitarbeitenden, 3:2 Desktop, 4:5 mobil.
- Überschrift: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem), Strichpunkt Sans wdth 140, wght 700, oben im Textblock, kein Label darüber.
- Handlung: Objektart als vier bis sechs Knöpfe (führen in die Anfrage mit Vorauswahl), daneben „Anrufen“ als tel:-Link mit sichtbarer Nummer.
- Zusatz: Region als Zeile unter der H1; mobil untere Leiste Anrufen / Besichtigung / 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. **Ihre feste Ansprechperson direkt unter dem Hero (Objektleitung mit Foto, Name, Region oder Objektart, Durchwahl, Rückrufzeit und Vertretung; Foto nur mit Einwilligung)**: [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=handwerk) `ansprechperson-band` · Variante „Handwerk“
2. **Was sollen wir reinigen? (Objektart zuerst: Büro und Verwaltung, Praxis, Treppenhaus und Wohnanlage, Glas und Fassade, Bau-Endreinigung, Gewerbe; je Objektart eine Unterseite, Antwort zuerst: was gemacht wird, in welchem Turnus, ab-Preis je m² oder Stunde und wovon er abhängt)**: [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“, [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=handwerk) `ansprechperson-band` · Variante „Handwerk“
3. **Turnus und Leistungsverzeichnis (Tabelle: täglich, wöchentlich, monatlich je Leistung; drei Pakete nur, wenn der Betrieb sie wirklich anbietet, sonst Beispiel-Leistungsverzeichnis; Zeitfenster wie vor 7 Uhr oder nach Büroschluss; Preise für Privatkunden inkl. MwSt.)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=mitgliedschaft) `preisseite-geruest` · Variante „Mitgliedschaft“
4. **Besichtigung anfragen (Objektart → Fläche in m² und Etagen → Turnus und Zeitfenster → Postleitzahl und Kontakt; Grundriss oder Fotos freiwillig; Antwortzeit nennen; Telefon und WhatsApp daneben)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht) `mehrschritt-anfrage` · Variante „Senkrechter Stepper“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=dokument) `datei-upload-ablage` · Variante „Lebenslauf als PDF“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“
5. **So starten wir (Besichtigung → Leistungsverzeichnis und Angebot → Einweisung und Schlüsselübergabe mit Protokoll → feste Reinigungskraft und Objektleitung → erste Qualitätskontrolle mit Termin)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
6. **Referenzen nach Objektart (Branche, Fläche, Turnus, seit wann betreut; Kundenname und Logo nur mit Erlaubnis; Fotos öffnen sich einmal mit waagerechter Maske; eigene Stimmen nüchtern mit Funktion und Datum)**: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`, [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe) `testimonials-neu-gedacht` · Variante „Stimmen-Reihe mit Höhe der aktiven Stimme“
7. **Zertifikate und Mitgliedschaften (Innung, Gütegemeinschaft, ISO-Zertifikate nur mit Nummer, Gültigkeit und Link; Umweltzeichen nur mit Lizenznummer)**: [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“
8. **Ihre Objektleitung (Foto, Name, Zuständigkeit nach Region oder Objektart, Durchwahl, Sprachen; bei kleinen Betrieben die Inhaberin oder der Inhaber selbst)**: [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“
9. **Arbeiten bei uns (Minijob, Teilzeit, Vollzeit; Stundenlohn nach Tarif mit Lohngruppe und Stand-Datum, Einsatzzeiten, Einsatzorte, Fahrtkosten; Kurzbewerbung in mehreren Sprachen; jede Stelle mit eigener Seite)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“, [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=handwerk) `stellenseite-mit-jobposting` · Variante „Handwerk mit Stundenlohn“
10. **Kontakt, Niederlassungen, Einzugsgebiet (Adresse als Text, Bürozeiten, Einzugsgebiet als Orte; Standortliste erst ab zwei Niederlassungen; Karte per 2-Klick)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [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“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“, [Anruf-Knopf mit Erreichbarkeit](https://cecodesign.de/lab/fundus/buttons/erreichbarkeits-button/demo?v=bereitschaft) `erreichbarkeits-button` · Variante „Rufbereitschaft außerhalb der Bürozeit“
11. **Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung für Privathaushalte nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Bahn: große Referenzfotos öffnen sich einmal wie unter dem Abzieher, von links nach rechts.
- Wo: Startseite, erster und zweiter Bildschirm
- Gewicht: groß: Foto mindestens 8 Spalten, Maske über die ganze Bildbreite
- Muster: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`, [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=linie) `kapitel-kante-signatur` · Variante „Linie (Tischlerei, Bleistift)“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## 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=zeichnen) `kontur-button-zeichnen` · Variante „Linie zeichnet sich“

## Weitere Bausteine

- Seitenwechsel: [Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)](https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/demo) `richtungsbewusste-uebergaenge`, [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- 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)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`, [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=linie) `kapitel-kante-signatur` · Variante „Linie (Tischlerei, Bleistift)“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- 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 <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`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Optional (nur als Zusatz)

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

## Nicht verwenden

- vorher-nachher-vergleichsregler – Signatur von handwerk-werkstatt-klartext; dazu wirken Schmutz-Vorher-Bilder schnell inszeniert
- blueprint-raster-sichtbar – Signatur von industrie-b2b-mittelstand
- liquid-glass-refraktion / glas-button – Glas als Effekt ist hier das Klischee der Branche
- atmosphaere-partikel / mesh-gradient-shader – Seifenblasen und Glanzlichter sind Deko ohne Inhalt
- zahlen-odometer – „10.000 m² täglich“ wird nicht hochgezählt
- marquee-laufband – Kundenlogos als Laufband ohne Erlaubnis und unruhig
- smooth-scroll-lenis – verzögert Tabelle und Formular
- konfetti-erfolg – nach der Anfrage eine ruhige Bestätigung mit Rückmeldezeit
- Stockfotos mit Gummihandschuh, Sprühflasche und Glanzstern – echte Mitarbeitende im echten Objekt
- „grün“, „umweltfreundlich“, „keimfrei“, „99,9 %“ ohne Nachweis – Umwelt- und Wirkaussagen nur mit Beleg (Leitfaden 8a)

## Regeln

- Erster Bildschirm: echtes Foto aus einem Objekt, ein Satz mit Leistung und Region, die Objektart als erste Frage, Telefon als tel:-Link. Mobil eine untere Leiste Anrufen / Besichtigung / WhatsApp.
- Objektart vor Leistung: Jede Objektart hat eine Unterseite nach leistungsseite-antwort-zuerst (Variante handwerk) mit Turnus, ab-Preis und dem Satz, wovon der Preis abhängt (Fläche, Bodenart, Verschmutzung, Zeitfenster).
- Turnus und Leistungsverzeichnis als echte Tabelle mit Tabellenziffern; ein PDF-Leistungsverzeichnis nur als Ergänzung, nie als einzige Quelle.
- Anfrage nach mehrschritt-anfrage (Variante senkrecht): höchstens vier Schritte, Telefon und E-Mail einzeln wählbar, Upload freiwillig mit Datenschutzhinweis. Validierung erst nach dem Verlassen eines Feldes. Die Bestätigung nennt, wer sich bis wann meldet.
- Signatur (clip-path-bild-reveal): Referenzfotos öffnen sich einmal mit waagerechter Maske in 500 ms, Kante gerade wie ein Abzieher. Es ist immer dasselbe echte Foto, kein Vorher-Nachher-Vergleich. Höchstens drei solche Bilder pro Seite, nie zwei gleichzeitig im Bild.
- Ein Signalton nur für Besichtigung anfragen und Anrufen. Auf Dunkel ist der Knopf kalkweiß mit dunkler Schrift.
- Personalgewinnung ist die zweite Startseite: Stellen mit Stundenlohn nach Tarif oder Spanne, Einsatzzeiten und Orten, Kurzbewerbung ohne Anschreiben in mehreren Sprachen, Anruf und WhatsApp als zweiter Weg; jede Stelle mit JobPosting (stellenseite-mit-jobposting).
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Eintrag in das Verzeichnis der zulassungsfreien Handwerke; Löhne und Tarifangaben nur mit Stand-Datum; Zertifikate und Umweltzeichen nur mit Träger, Nummer und Gültigkeit (logo-wand-social-proof, Variante siegel-nachweis); keine Umwelt- oder Desinfektionsaussagen ohne Nachweis; Preise für Privatkunden inkl. MwSt., für Gewerbe klar als netto gekennzeichnet; Verschwiegenheit in Praxen und Kanzleien nur nennen, wenn sie vertraglich geregelt ist; Kundenlogos nur mit Erlaubnis. Vom Kunden prüfen lassen.
- agentenformular-webmcp nur als Zusatz (Priorität F): Die Anfrage funktioniert vollständig als normales Formular.
- Leitidee über die Seite (z. B. „Die Bahn“): Kapitelkanten als Abzieher-Strich (kapitel-kante-signatur, Variante linie) zwischen Objektart, Turnus und Referenzen; Kante gerade wie bei der Signatur, höchstens drei je Seite, nie über Tabellen.

## Rezept-Varianten

- **Hausmeisterservice und Winterdienst (Wohnanlagen, Hausverwaltungen)**: Schrift, Farbe, Stil und Signatur bleiben. Zielgruppe sind Hausverwaltungen und Eigentümergemeinschaften: Leistungen je Einheit oder Objekt, Winterdienst mit Einsatzzeiten, Räum- und Streupflicht nach Satzung der Gemeinde (vom Kunden prüfen lassen) und Dokumentation der Einsätze. Notdienst nur, wenn es eine echte Rufbereitschaft gibt, dann mit Nummer und Zeiten im Kopf.
- **Reinigung für Privathaushalte**: Sie-Anrede bleibt. Festpreis je Stunde inkl. MwSt. und Mindestdauer offen nennen; Hinweis auf die Steuerermäßigung für haushaltsnahe Dienstleistungen (§ 35a EStG) nur als Hinweis mit Verweis auf die Steuerberatung. Wird online gebucht oder ein Dauervertrag online geschlossen, gelten Widerrufs- und Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig). 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“.