# Bauplan: Bauunternehmen: Projekt, Bauschild, Mannschaft

Rezept `bau-unternehmen-projekt` · Bauunternehmen / Hoch- und Tiefbau / Generalunternehmer / Schlüsselfertigbau / Sanierung (optional Bauträger mit Verkauf) · Stimmung: solide, direkt, stolz, sachlich · Stand 02.11.2026

Ein Bauunternehmen zeigt, was es baut und wer es baut: Projekte im Bau und fertig, mit den Daten vom Bauschild, Leistungsfähigkeit mit echten Zahlen und vor allem Stellen, denn Personal ist der Engpass. Der Hero ist ein Baustellenfoto mit Bauschild-Daten als Bildunterschrift. Auf jeder Projektseite erklärt eine Aufnahme mit nummerierten Punkten die Bauabschnitte und Gewerke. Big Shoulders kondensiert für Überschriften wie auf einem Bauzaunbanner, Google Sans Flex für Text, Geist Mono für Bauschild-Daten. Beton, Sand und ein Signalorange nur für Anfragen und Bewerben. Abgrenzung zu architektur-ruhiges-raster (Entwurf), handwerk-werkstatt-klartext (Gewerk und Privatkunde) und immobilien-diskret-hochwertig (Verkauf).

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

## Schrift

- Headline: `big-shoulders` · Text: `google-sans-flex` · Akzent: `geist-mono`
- Größen: h1 Big Shoulders clamp(2.75rem, 1.6rem + 5vw, 6rem), opsz 72, wght 800, Laufweite -0.01em, Zeilenhöhe 0.9, gemischte Schreibung (kein Versal-Satz für ganze Sätze); h2 clamp(2rem, 1.4rem + 2.4vw, 3.5rem), wght 800. Fließtext Google Sans Flex 1.0625rem (17 px), wght 400, ROND 0, Zeilenhöhe 1.6, höchstens 66ch. Bauschild-Daten (Bauherr, Ort, BGF in m², Bauzeit, Fertigstellung) in Geist Mono 0.875rem, Labels 0.75rem Versal +0.08em. Knöpfe Google Sans Flex 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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [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

Material der Baustelle: Betongrau als Grund, Sand als Fläche für Bauschild-Daten und Anfrage, fast schwarzer Asphalt für Footer und Karriere-Band. Signalorange nur für Anfragen und Bewerben, sparsam wie eine Warnmarkierung. Kein Gelb-Schwarz-Warnstreifen als Deko, keine Baustellen-Icons, keine blauen Hochglanz-Renderings als Stimmung.

- `--farbe-grund` #EDECE8 (Grund Beton)
- `--farbe-text` #1A1A18 (Text (14,7 : 1 auf Grund))
- `--farbe-flaeche` #DCD4C3 (Fläche Sand: Bauschild-Daten, Anfrage, Kenndaten (Text 11,8 : 1))
- `--farbe-dunkel` #262624 (Dunkel Asphalt: Footer, Karriere-Band (Weiß darauf 15,2 : 1))
- `--farbe-signal` #B43C0A (Signal Orange: Anfragen, Bewerben (Weiß darauf 5,8 : 1; als Fläche auf Grund 4,9 : 1, auf Sand 4,0 : 1); auf Asphalt stattdessen Beton-Knopf mit dunkler Schrift)
- `--farbe-leise` #5B5952 (Leise: Meta-Angaben, Stand-Daten (5,9 : 1 auf Grund, 4,8 : 1 auf Sand))
- `--farbe-linie` #CFCBC0 (Linie: Haarlinien in Kenndaten (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Kurve: cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig); Austritt cubic-bezier(0.5, 0, 0.75, 0)
- Dauer: 200 (Hover, Farbe), 350 (Akkordeon, Filter, Hotspot-Karte), 230 (schließen), 500 (Masken-Reveal eines Projektbilds), 700 (Baufortschritt-Linie)
- Regel: Knapp und gerichtet: Bilder öffnen sich einmal per Maske, die Linie des Baufortschritts wächst bis zur aktuellen Etappe und steht. Hotspot-Punkte erscheinen einmal, ohne Dauerpuls. Text und Kenndaten stehen sofort. Bei prefers-reduced-motion stehen Bilder und Linie im Endzustand.

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

- Hauptkurve: `cubic-bezier(0.25, 1, 0.5, 1)` (--ease) für knapp und gerichtet: Bilder öffnen sich einmal per Maske, die Linie des Baufortschritts wächst und steht
- Dauern: klein 200 ms, mittel 350 ms, gross 500 ms, seitenwechsel 500 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 mit Projektanfrage: ab 0 ms, steht
2. H1 und Kenndaten: ab 0 ms, stehen (Rezept)
3. Hero-Foto (bildunterschrift): ab 0 ms, 500 ms, Maske öffnet sich einmal (clip-path von unten), --ease-ein
4. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 500 ms. Wiederholt: Foto steht.

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

- Bild-Maske (`clip-path-bild-reveal`): Projektbilder; 500ms, Versatz 40 ms, clip-path inset, nur y; einmal, wenn 33 % sichtbar (IntersectionObserver)
- Kapitelkante (`kapitel-kante-signatur`): Kapitelgrenzen zwischen Projekten, Leistungen und Karriere; an der obersten Stufe eine Höhenkote oder ein Bauabschnitt aus echten Projektdaten; scrollgekoppelt, Versatz 0 ms, die Kante tritt in sechs Stufen heraus (je clamp(0, --kp × 8 − i, 1)), nur senkrecht; scrollgekoppelt (animation-timeline: view(); animation-range-start cover 5 %, animation-range-end cover 50 %, als Langform nach der Kurzschreibweise animation); ohne Unterstützung Endzustand
- Fortschritt: Baufortschritt-Linie wächst einmal bis zur aktuellen Etappe (700 ms) und steht (prozess-timeline-wachsende-linie)
- 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, Kenndaten (Bauzeit, BGF, Bauherr), Stellen und Kontakt

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

- Link: Unterstreichung wächst von links
- Knopf: fuellung-vom-eintrittspunkt basis; kontur-button-zeichnen ecken
- Karte: Projekt: Bild scale 1.05 im Rahmen (bild-zoom-in-maske basis)
- Bild: wie Karte

**Signatur** `bild-hotspots` (Variante bauteil): Die Punkte erscheinen einmal (scale .6 → 1, 250 ms je Punkt, 60 ms Versatz), ohne Dauerpuls (Rezept); die Karte öffnet in 350 ms und schließt in 230 ms. Auslöser: Scroll (einmal), Klick auf einen Punkt; Wiederholung: Punkte einmal je Seitenaufruf, Karte je Klick.

**Seitenwechsel** `vt-cross-document-mpa` (Variante benannt); dazu `vt-shared-element-morph`. Richtung: keine Typen (richtungsbewusste-uebergaenge schließt das Rezept aus); Projekt → Projektseite morpht das Bild. Geteilt: kopf, held (Projektbild). Dauer 500 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). Hotspots ohne Dauerpuls (Rezept). Text und Kenndaten stehen sofort (Rezept). Kapitelkanten höchstens drei je Seite, nie über Kenndaten.

**Reduzierte Bewegung:** Bilder und Linie im Endzustand (Rezept); Punkte und Karten nur per Deckkraft; Seitenwechsel als Überblendung. Kapitelkanten stehen als fertige Stufen. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Kran, Bagger oder Helm als Animation; Warnstreifen in Bewegung; 3D-Kamerafahrt (Rezept); Zahlen hochzählen (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und token-swiss-knackig; Signatur nach bild-hotspots (Punkte 250 ms, 60 ms Versatz; Karte auf Rezept-Werte 350/230). Rest eigene Festlegung. Kapitelkante 05.11.2026 aus kapitel-kante-signatur (stufe, Bau).

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(64px, 9vw, 128px)
- Dichte: mittel
- Hinweis: Plakativ und geordnet: große Überschriften mit wenig Luft darüber, Kenndaten eng (8 px), Projektbilder mit 32 px Abstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 32px)
- Maximale Breite: 1360px
- Raster: Hero-Foto über 12 Spalten mit Bildunterschrift-Zeile; Projektseite 8/4 (Bild und Hotspots links, Bauschild-Daten rechts sticky).
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 2px #1A1A18 unter Überschriften von Kenndaten, sonst 1px #CFCBC0
- Schatten: keiner
- Form: Eckig wie Schalung und Bauschild. Signalorange nur auf Knöpfen.

## Bildsprache

- Licht: Tageslicht auf der Baustelle, auch grau und nass; nicht geschönt.
- Ausschnitt: Baustelle in der Totale, Mannschaft bei der Arbeit, Detail von Bewehrung und Schalung, fertiges Gebäude mit Umgebung.
- Personen: Ja: eigene Mitarbeitende mit Einwilligung und korrekter Schutzausrüstung.
- Formate: 3:2, 16:9, 4:5
- Nicht: Keine Stockfotos mit Helm und Daumen hoch, keine Renderings ohne Beschriftung, keine fremden Firmenlogos.
- 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 (Bauherren), du (Karriere), je Bereich durchgehend
- Sätze: Kurz und konkret: was, wo, wie groß, bis wann.
- Haltung: Stolz auf die Arbeit, ohne Prahlen.
- Tonproben: Bürogebäude in [Ort], 6.400 m² BGF, fertig im Mai 2027., Wir suchen Poliere für Baustellen im Umkreis von 50 km.
- Nicht: „Ihr kompetenter Partner rund um den Bau“, „Bauen mit Leidenschaft“, „Qualität aus einer Hand“.

## Hero

Foto-Hero mit Bildunterschrift: ein echtes Baustellen- oder Projektfoto unbeschnitten, darunter die Bauschild-Daten in Geist Mono (Projekt, Ort, Bauherr nur mit Erlaubnis, Leistung, Fertigstellung). Daneben ein Satz, was und wo gebaut wird, und zwei Wege: „Projekt anfragen“ und „Jobs auf unseren Baustellen“. Keine Renderings als fertige Projekte, kein Helm-Daumen-Stockfoto.

- Raster: Foto über 12 Spalten unbeschnitten, darunter eine Zeile Bauschild-Daten; Satz und Wege über Spalte 1 bis 6 darunter.
- Bild: Echtes Baustellen- oder Projektfoto, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 in gemischter Schreibung; kein Label darüber.
- Handlung: „Projekt anfragen“ (Signalorange gefüllt) und „Jobs auf unseren Baustellen“ (Kontur mit Eckklammern).
- Zusatz: Bauschild-Daten in Geist Mono als Bildunterschrift.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=bildunterschrift) `foto-hero` · Variante „Bildunterschrift als Gestaltung“

## Sektionen in dieser Reihenfolge

1. **Projekte im Bau und fertig (je Projekt Bauschild-Daten: Art, Ort, BGF oder Volumen, Bauzeit, Fertigstellung, Leistung; Bauherr nur mit Erlaubnis; Filter nach Art und Region erst ab etwa 12 Projekten)**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=variable-breiten) `css-native-karussell` · Variante „Variable Breiten“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler) `karussell-steuerung` · Variante „Zähler“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
2. **Projektseite (Bildfolge, Bauschild-Daten als Kenndaten, Baufortschritt als Etappen mit Datum, beteiligte Gewerke; eine Baustellenaufnahme mit höchstens sechs nummerierten Bauabschnitten, Liste darunter als Hauptweg; Visualisierungen als solche beschriftet)**: [Bild mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil) `bild-hotspots` · Variante „Bauteile mit Nummern“, [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=baufortschritt) `prozess-timeline-wachsende-linie` · Variante „Baufortschritt mit Bauchronik“, [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“
3. **Leistungen (Hochbau, Tiefbau, Schlüsselfertigbau, Sanierung und Umbau, Ingenieurbau; je Leistung eine Unterseite, Antwort zuerst: Projektgröße, Region, typische Bauzeit, eine Referenz)**: [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“
4. **Leistungsfähigkeit (Mitarbeitende, Kolonnen, Geräte, Eigenleistungsanteil, Präqualifikation mit Nummer, Zertifikate mit Gültigkeit; nur echte Zahlen mit Stand)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“, [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“
5. **Karriere als zweite Startseite (Maurer:in, Beton- und Stahlbetonbauer:in, Polier:in, Bauleiter:in, Azubis und duales Studium; Lohn nach Tarif mit Stand, Baustellen der Region, Fahrzeug, Auslöse bei Montage; Kurzbewerbung mit Anruf und WhatsApp; Menschen von echten Baustellen)**: [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“, [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“
6. **Für Bauherren: Ihre Ansprechperson (Projektleitung mit Foto und Durchwahl; Anfrage mit Vorhaben, Grundstück oder Bestand, Zeitraum, Plänen als Upload)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=basis) `kontakt-anfrage-formular` · Variante „Anfrage-Sektion mit drei Formularen“, [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“
7. **Wohnungen und Häuser vom Bauträger (nur bei eigenem Verkauf: Exposé mit Kaufpreis, Fertigstellung, Pflichtangaben zum Energieausweis; Visualisierungen beschriftet)**: [Objekt-Steckbrief im Exposé](https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=kauf) `objekt-steckbrief-expose` · Variante „Kauf-Exposé mit Geschossen“
8. **Aktuelles und Baustelleninfo für Anwohnende (Sperrungen, Arbeitszeiten, Ansprechperson vor Ort; Meldungen mit Datum)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“, [News-Übersicht mit Kategorien und Jahr-Archiv](https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo?v=mehr) `news-uebersicht-archiv` · Variante „Weitere laden“
9. **Artikel-Detailseite (je Beitrag eine Seite: Meldung zu Baustart, Richtfest, Sperrung oder Übergabe mit Datum, Ort und Ansprechperson vor Ort; mit Datum, Autorin oder Autor und Stand)**: [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=meldung) `artikel-seite` · Variante „Meldung“
10. **Niederlassungen und Bauhof (Adresse als Text, Zeiten, Einzugsgebiet; Liste ab zwei Standorten; 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=standorte) `karte-zwei-klick` · Variante „Mehrere Standorte“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
11. **Erklärung zur Barrierefreiheit (freiwillig als Aufbau; beim Online-Verkauf an Verbraucher 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 mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil) `bild-hotspots` · Variante „Bauteile mit Nummern“

## Moment (Pflicht: woran man sich erinnert)

- Was: Das Projektfoto als Schnitt: Punkte auf den Bauteilen (Bodenplatte, Fassade, Dach) erscheinen einmal, jeder öffnet eine Karte mit Leistung und Maß.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Foto mindestens 8 Spalten und 70 vh, Punkte 44 px
- Muster: [Bild mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil) `bild-hotspots` · Variante „Bauteile mit Nummern“
- 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=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“

## Weitere Bausteine

- Seitenwechsel: [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`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [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=stufe) `kapitel-kante-signatur` · Variante „Stufe (Bau, Höhenkote)“
- 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`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=variable-breiten) `css-native-karussell` · Variante „Variable Breiten“, [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: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## 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)

- [Trennlinien im Raster (Gap Decorations)](https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten) `gap-decorations-raster` · Variante „Kenndaten-Raster“

## Nicht verwenden

- blueprint-raster-sichtbar – Signatur von industrie-b2b-mittelstand
- vorher-nachher-vergleichsregler – Signatur von handwerk-werkstatt-klartext; der Baufortschritt erzählt in Etappen
- richtungsbewusste-uebergaenge – Signatur von immobilien-diskret-hochwertig
- interaktives-3d-hero / scroll-3d-kamerafahrt – BIM-Modelle als Hero sind teuer und zeigen keine echte Baustelle
- zahlen-odometer – Mitarbeiterzahlen und Kubikmeter werden nicht hochgezählt
- marquee-laufband – Bauherren-Logos als Laufband ohne Erlaubnis
- smooth-scroll-lenis – stört Filter und Formulare
- Gelb-Schwarz-Warnstreifen, Helm-Icons, Daumen-hoch-Stockfotos – Klischee
- Renderings als fertige Projekte – Visualisierungen immer als solche beschriften
- „klimaneutral bauen“, „nachhaltig“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)

## Regeln

- Erster Bildschirm: echtes Baustellen- oder Projektfoto mit Bauschild-Daten als Bildunterschrift, ein Satz zu Leistung und Region, zwei Wege „Projekt anfragen“ und „Jobs auf unseren Baustellen“.
- Signatur (bild-hotspots, Variante bauteil): Auf der Projektseite eine große Baustellenaufnahme mit höchstens sechs nummerierten Punkten (Bauabschnitt, Gewerk, Material, Termin); die gleiche Information als Liste darunter. Punkte ohne Dauerpuls, Karte als Popover, mobil als Liste unter dem Bild. Höchstens ein Hotspot-Bild pro Ansicht.
- Bauschild-Daten in Geist Mono mit Einheit (m² BGF, m³ BRI, Monate); Bauherr und Architekt nur mit Erlaubnis.
- Karriere hat die gleiche Tiefe wie die Projekte: Stellen mit Lohn nach Tarif oder Spanne, Einsatzorten und Arbeitszeiten, Kurzbewerbung in zwei Minuten, jede Stelle mit JobPosting (stellenseite-mit-jobposting).
- Visualisierungen und KI-Bilder sind als solche beschriftet; fertige Projekte nur mit echten Fotos.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Eintrag in die Handwerksrolle (Maurer und Betonbauer sind zulassungspflichtig); Präqualifikation und Zertifikate nur mit Nummer und Gültigkeit (logo-wand-social-proof, Variante siegel-nachweis); beim Bauträger-Verkauf Erlaubnis nach § 34c GewO im Impressum und die Pflichtangaben zum Energieausweis in jeder Anzeige (objekt-steckbrief-expose); Fotos von Mitarbeitenden auf Baustellen nur mit Einwilligung. Vom Kunden prüfen lassen.
- Knöpfe: Signalorange gefüllt (fuellung-vom-eintrittspunkt, Variante basis) für Anfragen und Bewerben; Nebenwege als Kontur mit Eckklammern wie Vermessungsmarken (kontur-button-zeichnen, Variante ecken).
- gap-decorations-raster nur als Zusatz (Priorität F) für die Kenndaten-Tabelle; ohne Unterstützung stehen normale Linien.
- Kapitelkanten als Stufen mit Höhenkote (kapitel-kante-signatur, Variante stufe) zwischen Projekten, Leistungen und Karriere; nur senkrecht, Koten und Abschnitte nur aus echten Projektdaten.

## Rezept-Varianten

- **Tiefbau und Straßenbau (öffentliche Auftraggeber)**: Schrift, Farbe, Stil und Signatur bleiben; bild-hotspots erklärt Bauabschnitte einer Straße oder Leitungstrasse. Zielgruppen sind Kommunen und Personal; Anwohnerinformation bekommt eine eigene Seite je Baustelle mit Sperrzeiten und Ansprechperson. Präqualifikation und Eignungsnachweise vorne.

## Vor der Abgabe

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