# Bauplan: Umzug und Transport: Volumen, Termin, Versicherung

Rezept `umzug-transport-logistik` · Umzugsunternehmen / Möbelspedition / Spedition und Logistik / Kurier- und Lieferdienst / Einlagerung · Stimmung: zupackend, verlässlich, klar, direkt · Stand 02.11.2026

Ein Umzug ist ein Ablauf mit Unsicherheit: Was kostet es ungefähr, wer kommt zur Besichtigung, wer kümmert sich um die Halteverbotszone, was passiert bei Schäden. Die Seite beginnt mit dem Fahrzeug im Foto und direkt darunter einem Rechner, der eine Spanne mit Annahmen liefert. Der Ablauf steht als Stapel aus Karten, die sich beim Scrollen wie Kartons aufeinanderlegen. Danach Leistungen, Besichtigung vor Ort oder per Video, Haftung und Versicherung im Klartext, Bewertungen mit Echtheitshinweis, Fahrer:innen gesucht. Special Gothic schmal wie die Beschriftung auf dem Lkw, Schibsted Grotesk für Text. Asphalt, Weiß und die Farbe der Flotte. Abgrenzung zu handwerk-werkstatt-klartext (Gewerk) und kfz-werkstatt-autohaus (Fahrzeugservice).

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

## Schrift

- Headline: `special-gothic` · Text: `schibsted-grotesk`
- Größen: h1 Special Gothic clamp(2.5rem, 1.4rem + 5vw, 6rem), wdth 75 (Condensed), wght 700, Laufweite 0, Zeilenhöhe 0.92, gemischte Schreibung; h2 clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem), wdth 80. Fließtext Schibsted Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Rechner-Ergebnis Schibsted Grotesk 700, 2rem, Tabellenziffern; Labels 0.8125rem Versal +0.06em in Schibsted Grotesk. Knöpfe Schibsted Grotesk 700, 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`, [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

Die Farbe der Flotte ist die Marke: hier Flottengelb, nur für Rechner-Ergebnis übernehmen und Besichtigung anfragen, immer mit dunkler Schrift und dunkler Kontur, weil Gelb auf hellem Grund keine 3 : 1 erreicht. Asphaltgrau hell als Grund, helleres Grau als Fläche für Rechner und Ablauf, Asphalt dunkel für Footer und Karriere. Austauschbar je Firma (Flottenrot, Flottenblau), immer geprüft. Keine Karton-Texturen, keine Weltkugel- und Lkw-Icons als Deko.

- `--farbe-grund` #F2F2EF (Grund Asphalt hell)
- `--farbe-text` #18191B (Text (15,7 : 1 auf Grund))
- `--farbe-flaeche` #DFE0DC (Fläche Planengrau: Rechner, Ablauf-Karten, Haftung (Text 13,3 : 1))
- `--farbe-dunkel` #24272A (Dunkel Asphalt: Footer, Karriere-Band (Weiß darauf 15,0 : 1; Flottengelb darauf 8,3 : 1))
- `--farbe-signal` #F2B705 (Signal Flottengelb: Besichtigung anfragen, Ergebnis übernehmen (dunkle Schrift darauf 9,7 : 1; auf hellem Grund nur 1,6 : 1, deshalb immer mit 2-px-Kontur in Textfarbe))
- `--farbe-leise` #575A5E (Leise: Meta-Angaben, Annahmen im Rechner (6,2 : 1 auf Grund, 5,2 : 1 auf Fläche))
- `--farbe-linie` #CBCCC8 (Linie: Haarlinien in Tabellen (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)](https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo) `token-kinetisch-inout`
- 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.83, 0, 0.17, 1) (token-kinetisch-inout, nur Hero-Auftritt); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 300 (Rechner-Ergebnis, Akkordeon, Dialog öffnen), 200 (schließen), 900 (Hero-Auftritt einmal); Kartenstapel scrollgekoppelt
- Regel: Ein Auftritt im Hero, sonst nur Zustände. Der Kartenstapel bewegt sich nur mit dem Scrollen; jede Karte ist kurz und gleich hoch, Text bleibt lesbar, bevor die nächste kommt. Das Rechner-Ergebnis zählt nicht hoch, es steht. Bei prefers-reduced-motion stehen die Karten untereinander, das Foto steht.
- Hinweis: Kinetisch nur für den Hero-Auftritt (das Fahrzeugfoto schiebt sich einmal mit der In-out-Kurve in den Rahmen, 900 ms). Der Kartenstapel der Signatur ist scrollgekoppelt und hat keine eigene Kurve. Rechner, Formulare, Akkordeon und Dialoge laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), weil token-kinetisch-inout Mikrointeraktionen ausschließt.

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

- Hauptkurve: `cubic-bezier(0.83, 0, 0.17, 1)` (--ease) für nur der Hero-Auftritt (Fahrzeugfoto schiebt sich einmal in den Rahmen); Rechner, Formulare, Akkordeon, Dialoge und Seitenwechsel über das UI-Paar; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 150 ms, mittel 300 ms, gross 900 ms, seitenwechsel 450 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

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

1. Kopf mit Telefon und Angebot: ab 0 ms, steht
2. Fahrzeugfoto: ab 0 ms, 900 ms, schiebt sich einmal im stehenden Rahmen an seinen Platz (translateX 8 % → 0), --ease
3. H1: ab 120/160/200 ms, 450 ms, Zeilen aus Masken, --ui-ease-ein
4. Rechner-Einstieg: ab 0 ms, steht
5. Rest: beim Scrollen, erst beim Scrollen (Signatur)
- Ende nach 900 ms. Wiederholt: Foto steht, H1 steht.

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

- keine Reveals (Ein Auftritt im Hero, sonst nur Zustände (Rezept); der Kartenstapel ist die Signatur.)
- 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, Rechner-Ergebnis (zählt nicht hoch, Rezept), Preise und Leistungen, Anfrage

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

- Link: Unterstreichung wächst von links
- Knopf: button-zustaende; pfeil-icon-button seitenwechsel: Kreis wandert, Label 30 px
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px
- Bild: kein Zoom

**Signatur** `stapelkarten`: Die Schritt-Karten docken beim Scrollen an und legen sich übereinander; die verdeckte wird kleiner und dunkler. Jede Karte ist kurz und gleich hoch, ihr Text ist lesbar, bevor die nächste kommt (Rezept). Auslöser: Scroll; Wiederholung: nur mit dem Scroll.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vorwaerts (Leistung → Angebot) von rechts, zurueck gespiegelt; UI-Kurve. Geteilt: kopf. Dauer 450 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). Ein Auftritt im Hero, sonst nur Zustände (Rezept).

**Reduzierte Bewegung:** Karten stehen untereinander, das Foto steht (Rezept); Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Lkw, der durchs Bild fährt; hüpfende Kartons; Weltkugel- oder Routen-Animation (Rezept: keine Lkw- und Weltkugel-Icons); Straße, die sich zeichnet (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach stapelkarten. Rest eigene Festlegung.

## 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, 8vw, 128px)
- Dichte: mittel
- Hinweis: Rechner und Karten kompakt (16 px Innenabstand), Sektionen kräftig getrennt. Mobil untere Leiste, darüber 80 px Freiraum.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 28px)
- Maximale Breite: 1280px
- Raster: Hero randlos, Rechner direkt darunter über 12 Spalten in einer Zeile (mobil gestapelt). Stapelkarten über 8 Spalten mittig.
- Radius klein: 4px
- Radius groß: 10px
- Pillenform für Buttons: True
- Linie: 2px #18191B um gelbe Knöpfe; 1px #CBCCC8 in Tabellen; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Gerundete Karten wie Kartonecken; gelbe Knöpfe immer mit Kontur in Textfarbe.

## Bildsprache

- Licht: Tageslicht draußen, echtes Licht beim Beladen.
- Ausschnitt: Fahrzeug mit Team in der Halbtotale, Hände beim Packen, Lager in der Totale.
- Personen: Ja: eigenes Team mit Einwilligung; Kundschaft und Wohnungen nur mit Erlaubnis.
- Formate: 16:9, 4:5, 3:2
- Nicht: Keine Stockfotos lachender Paare, keine fremden Fahrzeuge, keine Kennzeichen lesbar ohne Absicht.
- 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: Konkret: was, wann, wie viel, wer haftet.
- Haltung: Zupackend und beruhigend, ohne Werbesprech.
- Tonproben: 3-Zimmer-Wohnung, 2. Stock ohne Aufzug, 12 km: zwischen 1.400 und 1.900 €., Wir beantragen die Halteverbotszone für Sie.
- Nicht: „stressfrei umziehen“, „Rundum-sorglos“, „günstigster Anbieter“.

## Hero

Foto-Hero (randlos-unten-links): eigenes Fahrzeug der Flotte mit Team beim Beladen, ruhige dunkle Zone unten links für Satz und Region. Direkt darunter, ohne Abstand zur Bildkante, der Umzugsrechner mit Von- und Nach-Postleitzahl und Wohnfläche. Kein Stockfoto mit lachendem Paar zwischen Kartons.

- Raster: Foto randlos über 12 Spalten, Satz und Region unten links über Spalte 1 bis 6 auf der dunklen Bildzone; Rechner direkt unter der Bildkante.
- Bild: Eigenes Fahrzeug mit Team beim Beladen, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.5rem, 1.4rem + 5vw, 6rem), Special Gothic Condensed 700 in gemischter Schreibung; kein Label darüber.
- Handlung: Im Rechner „Preis berechnen“ und danach „Besichtigung anfragen“ (Flottengelb mit Kontur); daneben Telefon.
- Zusatz: Region und „Besichtigung auch per Video“ als Zeile unter der H1.

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

## Sektionen in dieser Reihenfolge

1. **Was kostet mein Umzug? (Rechner direkt unter dem Hero: Von- und Nach-Postleitzahl, Wohnfläche oder Zimmer, Etage und Aufzug, Leistungen wie Packen, Montage, Halteverbotszone; Ergebnis als Spanne mit Annahmen und Stand-Datum; Übergabe an die Besichtigung ohne Kontaktpflicht vor dem Ergebnis)**: [Kostenrechner mit Spanne](https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=umzug) `kostenrechner-konfigurator` · Variante „Umzugsrechner“
2. **Besichtigung vor Ort oder per Video (Ablauf und Dauer, was man vorbereitet; bis wann das Angebot kommt; ob Festpreis oder Schätzung, klar gesagt; Terminwerkzeug erst nach Klick)**: [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“, [Eingabehilfen und Autofill](https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/demo?v=abholung) `formular-eingabehilfen-autofill` · Variante „Adresse mit zweiter Rechnungsadresse“, [Anker-Landung markieren](https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/demo?v=anfrage) `anker-landung-markieren` · Variante „Zur Anfrage“
3. **So läuft Ihr Umzug (Besichtigung → Angebot → Halteverbotszone beantragen → Kartons liefern → Packen und Abbau → Transport → Aufbau und Entsorgung; je Schritt eine kurze Karte, die sich beim Scrollen auf die vorige legt)**: [Stapelkarten beim Scrollen (Stacking Cards)](https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo) `stapelkarten`
4. **Leistungen (Privatumzug, Firmenumzug, Seniorenumzug, Fern- und Auslandsumzug, Packservice, Möbelmontage, Einlagerung, Entrümpelung; je Leistung eine Unterseite, Antwort zuerst mit Preisrahmen)**: [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“, [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=kurskarte) `preisseite-geruest` · Variante „Kurskarte“
5. **Haftung und Versicherung (gesetzliche Haftung je Kubikmeter Laderaum in einem Satz, Zusatzversicherung mit Preis, was bei Schäden zu tun ist und bis wann; Schaden melden mit Foto)**: [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“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=kompakt-mobil) `datei-upload-ablage` · Variante „Ein Knopf und Kacheln“, [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“
6. **Umzugsmaterial (Kartons kaufen oder leihen mit Preis und Lieferung; Gewährleistungshinweis bei Verkauf)**: [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [EU-Hinweis zur Gewährleistung und Garantie-Label](https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=footer-seite) `eu-gewaehrleistungshinweis` · Variante „Footer-Link und Seite“
7. **Bewertungen (Google und Bewertungsplattformen mit Schnitt, Anzahl, Stand und Echtheitshinweis)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere) `bewertungsprofil-mit-echtheitshinweis` · Variante „Mehrere Plattformen“
8. **Fuhrpark und Lager (Fahrzeuge mit Laderaum in m³ und Führerscheinklasse, Lager mit Fläche, Zugang und Versicherung)**: [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“, [Tabelle schmal und robust](https://cecodesign.de/lab/fundus/zugang/tabelle-schmal-robust/demo?v=feste) `tabelle-schmal-robust` · Variante „Feste erste Spalte“
9. **Fahrer:innen und Möbelpacker:innen gesucht (Führerscheinklasse, Touren, Übernachtungen, Lohn und Spesen, Kurzbewerbung mit Anruf und WhatsApp; 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 und Standorte (Adresse als Text, Bürozeiten, Liste 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)“
11. **Vertrag widerrufen und Barrierefreiheit (bei online geschlossenen Verträgen; Erklärung nach BFSG prüfen lassen)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Stapelkarten beim Scrollen (Stacking Cards)](https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo) `stapelkarten`

## Moment (Pflicht: woran man sich erinnert)

- Was: So läuft Ihr Umzug: die Schritte docken beim Scrollen als große Karten an und legen sich übereinander, jede lesbar, bevor die nächste kommt.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und scrollgekoppelt: Karten über mindestens 8 Spalten und 60 vh
- Muster: [Stapelkarten beim Scrollen (Stacking Cards)](https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo) `stapelkarten`
- 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: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=seitenwechsel) `pfeil-icon-button` · Variante „Seitenwechsel“

## 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)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Stapelkarten beim Scrollen (Stacking Cards)](https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo) `stapelkarten`
- 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`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
- 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“

## Nicht verwenden

- horizontal-scroll-section – Signatur von arbeitgeber-karriere
- svg-pfad-zeichnen-scroll – Signatur von fahrschule-freundlich-buchbar; die Route ist hier kein Effekt
- text-on-path – Signatur von kfz-werkstatt-autohaus
- scroll-3d-kamerafahrt / interaktives-3d-hero – Lkw in 3D ist teuer und zeigt nichts
- zahlen-odometer – das Rechner-Ergebnis und „seit 1950“ zählen nicht hoch
- fullpage-snap-slides – blockiert schnelles Überfliegen
- marquee-laufband – unruhig neben Preisen
- smooth-scroll-lenis – stört Rechner und Kartenstapel
- konfetti-erfolg – nach der Anfrage eine ruhige Bestätigung mit Rückrufzeit
- Stockfotos mit lachendem Paar zwischen Kartons, Weltkugel- und Lkw-Icons – eigene Fotos von Flotte und Team

## Regeln

- Erster Bildschirm: eigenes Fahrzeug mit Team, Satz mit Leistung und Region, darunter sofort der Rechner. Telefon im Kopf, mobil untere Leiste Anrufen / Besichtigung / WhatsApp.
- Rechner (kostenrechner-konfigurator): Aufbau der Variante dach (Mengen, Abhängigkeiten, Zähler), Eingaben für den Umzug; Formeln nur aus eigenen Erfahrungswerten des Betriebs, Ergebnis als Spanne mit Annahmen und Stand-Datum, kein Kontaktformular vor dem Ergebnis. Ohne belastbare Werte nur Beispielumzüge mit Gesamtpreis.
- Signatur (stapelkarten): fünf bis sieben gleich hohe, kurze Karten für den Ablauf; jede Karte legt sich wie ein Karton auf die vorige. Nicht für Texte mit wechselnder Länge, höchstens einmal pro Seite; bei reduzierter Bewegung stehen die Karten untereinander.
- Festpreis oder Schätzung immer klar benennen; Preise inkl. MwSt. für Privatkunden, Zuschläge (Etage ohne Aufzug, Trageweg, Halteverbot) offen.
- Haftung und Versicherung im Klartext: gesetzliche Haftung beim Umzugsvertrag je Kubikmeter Laderaum (§ 451e HGB), Hinweis auf die Möglichkeit einer weitergehenden Versicherung und die Fristen für Schadensanzeigen (§§ 451f, 451g HGB) vor Vertragsschluss; Beträge und Fristen vom Kunden prüfen lassen.
- Bewertungen von Plattformen nur mit Echtheitshinweis direkt daneben (bewertungsprofil-mit-echtheitshinweis, Variante mehrere).
- Recht: Impressum mit Registereintrag; Erlaubnis für den gewerblichen Güterkraftverkehr, wo nötig; Halteverbotszone als Leistung nur, wenn der Betrieb sie wirklich beantragt; Entrümpelung und Entsorgung nur mit den nötigen Nachweisen; Widerruf bei online geschlossenen Verträgen (widerruf-und-kuendigung-schaltflaeche). Vom Kunden prüfen lassen.
- Knöpfe: Flottengelb mit dunkler Schrift und Kontur, alle Zustände (button-zustaende); Nebenwege als Pfeil-Pille (pfeil-icon-button, Variante seitenwechsel). Fokusring in Textfarbe, weil Gelb auf hellem Grund keine 3 : 1 erreicht.

## Rezept-Varianten

- **Spedition und Logistik (B2B)**: Schrift, Farbe, Stil und Signatur bleiben; die Stapelkarten zeigen den Ablauf einer Sendung. Statt Rechner eine Anfrage mit Sendungsart, Gewicht, Maßen, Relation und Termin (mehrschritt-anfrage, Variante senkrecht). Leistungen nach Ladungsart, Flotte mit Fahrzeugtypen, Zertifikate mit Nummer, Sendungsverfolgung als Link. Fahrergewinnung hat die gleiche Tiefe wie die Leistungen. Preise netto für Gewerbe.

## Vor der Abgabe

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