# Bauplan: Versicherungsmakler und Finanzberatung: nüchtern und nachvollziehbar

Rezept `versicherung-finanzberatung` · Versicherungsmakler / Versicherungsagentur (gebundene Vertretung) / Versicherungsberater / Finanzanlagenvermittler und Honorar-Finanzanlagenberater / Immobiliardarlehensvermittler · Stimmung: nüchtern, nachvollziehbar, persönlich, ruhig · Stand 02.11.2026

Wer einen Makler sucht, will wissen: Wer berät mich, in wessen Auftrag, was kostet das, und was fehlt mir eigentlich? Deshalb stehen Status und Erstinformation nie versteckt, die Lebenslagen (Berufsstart, Familie, selbstständig, Immobilie, Ruhestand) führen zu Seiten mit Antwort zuerst, die Vergütung steht offen in einer Tabelle, und Bestandskund:innen finden „Schaden melden“ in zwei Klicks. Hedvig Letters Serif für Überschriften, Zalando Sans mit Tabellenziffern für alles, was gerechnet wird. Kühles Papier, Nebelgrau und Marine, Petrol nur für „Termin“. Signatur: die Lücke. Eine echte Tabelle wird zur Spur mit Zielmarke (css-diagramm-attr, ziel): Bedarf, was schon da ist, was fehlt, immer als Beispielrechnung mit Annahmen und Stand, nie als Renditeversprechen.

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

## Schrift

- Headline: `hedvig-letters-serif` · Text: `zalando-sans`
- Größen: h1 Hedvig Letters Serif clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), Laufweite -0.01em, Zeilenhöhe 1.06; Kapitel-H2 clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem) in Hedvig; H3 und Gebrauchsüberschriften Zalando Sans 600, 1.25rem. Fließtext Zalando Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Beträge, Prozente und Registernummern Zalando Sans 500 mit Tabellenziffern, Riesenziffer der Beispielrechnung Hedvig clamp(3rem, 2rem + 4vw, 5.5rem). Knöpfe Zalando Sans 600, 1rem.
- Techniken: [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Deutscher Satz für Zahlen, Datum, Telefon und Preise](https://cecodesign.de/lab/fundus/typo-techniken/zahlen-datum-telefon-satz/demo) `zahlen-datum-telefon-satz`, [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

Kühl und sachlich, ohne Bankblau-Klischee: kühles Papier als Grund, Nebelgrau als Fläche für Tabellen und Rechnungen, Marine für Kapitel und Fuß. Petrol nur für „Termin“ und „Schaden melden“. Ziegel nur als Datenfarbe für die Lücke in der Beispielrechnung, nie als Knopf. Kein Gold, keine Münzen, keine Pfeile nach oben.

- `--farbe-grund` #F4F4EF (Grund kühles Papier)
- `--farbe-text` #16202B (Text (14,9 : 1 auf Grund))
- `--farbe-flaeche` #E2E7EA (Fläche Nebel: Tabellen, Vergütung, Beispielrechnung (Text 13,2 : 1))
- `--farbe-dunkel` #18304A (Dunkel Marine: Kapitel, Footer (Weiß darauf 13,5 : 1))
- `--farbe-signal` #0E5A61 (Signal Petrol: Termin, Schaden melden (Weiß darauf 7,9 : 1; als Schrift auf Grund 7,2 : 1))
- `--farbe-akzent` #A8432A (Akzent Ziegel (nur Datenfarbe für die Lücke in der Beispielrechnung; als Schrift auf Grund 5,4 : 1))
- `--farbe-leise` #55606A (Leise: Stand-Daten, Registernummern, Meta (5,8 : 1 auf Grund, 5,2 : 1 auf Nebel))

## 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); schließen cubic-bezier(0.5, 0, 0.75, 0)
- Dauer: 200 (Hover, Farbe), 350 (Akkordeon, Reiter, Dialog öffnen), 240 (schließen), 500 (H1-Zeilen einmal), 600 (Seitenwechsel, Wortmarke fliegt in den Kopf), 700 (Balken der Beispielrechnung einmal)
- Regel: Beträge, Vergütung, Erstinformation und Telefon stehen sofort. Die H1 steigt einmal zeilenweise aus der Maske. Die Balken der Beispielrechnung wachsen einmal auf ihren Wert, die Zahlen zählen nicht hoch. Akkordeon und Reiter öffnen in 350 ms und schließen in 240 ms. Beim Seitenwechsel fliegt die Wortmarke in den Kopf der Unterseite. Bei prefers-reduced-motion stehen Balken und Überschriften fertig.
- Hinweis: Knapp und gerade: Text in der Zeilenmaske, Pfeile 8 px, keine Rotation. Die Balken der Beispielrechnung wachsen einmal mit der Hauptkurve, wenn die Tabelle in den Blick kommt; Beträge stehen als Text schon vorher da.

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

- Hauptkurve: `cubic-bezier(0.25, 1, 0.5, 1)` (--ease) für H1-Zeilen, Balken der Beispielrechnung, Akkordeon, Reiter, Seitenwechsel
- Dauern: klein 200 ms, mittel 350 ms, gross 700 ms, seitenwechsel 600 ms, schliessen 240 ms (als `--dauer-klein` … in tokens.css)

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

1. Kopf mit Termin, Telefon und Link Erstinformation: ab 0 ms, steht
2. H1 (zwei Zeilen): ab 0/40 ms, 500 ms, Zeilenmaske translateY 100 % → 0, --ease
3. Foto der Beraterin bzw. des Beraters: ab 0 ms, steht (LCP)
4. Lebenslagen: ab 0 ms, steht
- Ende nach 540 ms. Wiederholt: Alles steht (sessionStorage); auf Unterseiten steht die Wortmarke im Kopf.

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

- Beispielrechnung (`css-diagramm-attr`): Was fehlt mir? und Lebenslagen-Seiten; 700ms, Versatz 60 ms, Balken inline-size 0 → Wert, Zielmarken stehen, Zahlen als Text vorher sichtbar; einmal, wenn die Tabelle zu 40 % im Blick ist (IntersectionObserver), ohne Skript Endzustand
- 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, Erstinformation und Status, Vergütung, Schaden melden

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

- Link: Unterstreichung läuft durch (unterstreichung-varianten durchlauf)
- Knopf: fuellung-vom-eintrittspunkt basis: Petrol füllt vom Eintrittspunkt; pfeil-icon-button linie: Pfeil 8 px
- Karte: karte-ganzflaechig-klickbar liste: Zeile färbt sich Nebel, Pfeil 8 px
- Bild: kein Zoom

**Signatur** `css-diagramm-attr` (Variante ziel): Die Lücke: eine echte Tabelle (Bedarf, gesetzliche Leistung, bestehende Vorsorge, Lücke) wird zur Spur mit Zielmarke. Die Riesenziffer nennt die Lücke als Betrag pro Monat; die Füllung wächst einmal bis zum vorhandenen Wert, der Rest bis zur Zielmarke bleibt als Ziegel-Schraffur stehen. Darunter Annahmen und Stand als Text. Auslöser: einmal beim Einscrollen; Wiederholung: einmal je Seitenaufruf.

**Seitenwechsel** `wortmarke-wird-kopfmarke` (Variante seitenwechsel); dazu `vt-cross-document-mpa` (crossfade). Richtung: keine Typen; die Wortmarke fliegt aus dem Fluss der Startseite in den Kopf, der Rest blendet ruhig über. Geteilt: kopf, marke (Wortmarke → Kopfmarke). Dauer 600 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). Höchstens eine Beispielrechnung je Ansicht. Keine hochzählenden Zahlen, keine Pfeile, die nach oben wachsen.

**Reduzierte Bewegung:** H1 steht, Balken stehen auf ihrem Wert, Seitenwechsel als Überblendung 150 ms ohne Flug der Wortmarke. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Münzen, Sparschweine, Wachstumskurven als Deko; Zahlen-Zähler; Countdown für Angebote.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Balken nach css-diagramm-attr (Demo-Variante ziel), Wortmarke nach wortmarke-wird-kopfmarke (Variante seitenwechsel, auf 600 ms gekürzt). Begrenzungen 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: Ruhig und tabellarisch: Tabellen dicht mit 12 px Zeilenabstand, Kapitel mit viel Luft, die Beispielrechnung mit 48 px Rand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1200px
- Raster: Hero 6/6 mit randabfallendem Foto rechts. Beispielrechnung über 8 Spalten mit Annahmen rechts in 4. Tabellen nie breiter als 8 Spalten.
- Radius klein: 4px
- Radius groß: 8px
- Pillenform für Buttons: False
- Linie: 1px #16202B1F in Tabellen; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Gerade und knapp gerundet; Tabellen mit Haarlinien statt Kästen.

## Bildsprache

- Licht: Helles Bürolicht, natürlich, kein Blau-Filter.
- Ausschnitt: Person am Tisch im Gespräch, Unterlagen angeschnitten, Büro in der Halbtotale.
- Personen: Ja: Berater:innen mit Einwilligung; Kund:innen nur mit Einwilligung und nie als Testimonial-Pose.
- Formate: 4:5, 3:2
- Nicht: Kein Händedruck, keine Strandfamilie, keine Münzstapel, keine Pfeile nach oben.
- 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: was gilt, was es kostet, was fehlt, was als Nächstes passiert.
- Haltung: Wie eine gute Beraterin am Tisch: rechnet vor, sagt, was nicht nötig ist.
- Tonproben: Eine Hausratversicherung brauchen Sie meist erst mit eigener Wohnung., Wir werden von den Versicherern bezahlt. Wie viel, steht in der Tabelle.
- Nicht: „Rundum sorglos“, „bestens abgesichert“, „kostenlos“ ohne Erklärung, Angstbilder.

## Hero

Foto-Hero geteilt (foto-hero, Variante split-randabfallend): links H1 und ein Satz, wer berät und für wen (z. B. „Unabhängiger Versicherungsmakler für Familien und Selbstständige in [Ort]“), darunter „Termin“ und Telefon, in der Zeile darunter klein der Status mit Link zur Erstinformation. Rechts randabfallend ein echtes Foto der Person im Büro. Kein Händedruck-Stockfoto, kein Familienfoto am Strand.

- Raster: H1, Satz und Wege über Spalte 1 bis 6; Foto randabfallend über Spalte 7 bis 12; mobil Foto unter der H1.
- Bild: Echtes Foto der Beraterin oder des Beraters im Büro, 4:5.
- Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), Hedvig Letters Serif; wer berät und für wen, kein Label darüber.
- Handlung: „Termin“ (Petrol gefüllt) und Telefon als tel:-Link mit sichtbarer Nummer.
- Zusatz: Darunter in Leise der Status mit Registernummer und Link „Erstinformation“; mobil Knopf Anrufen / Termin.

- 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. **Lebenslagen (Berufsstart, Familie, selbstständig und Gewerbe, Immobilie, Ruhestand als Reiter; je Lebenslage eine Seite mit Antwort zuerst: was wirklich wichtig ist, was warten kann, was es ungefähr kostet)**: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=liste) `karte-ganzflaechig-klickbar` · Variante „Liste: Klick-Weiterleitung“
2. **Was fehlt mir? (Beispielrechnung als Tabelle mit Spur und Zielmarke: Bedarf, gesetzliche Leistung, vorhandene Vorsorge, Lücke; Annahmen und Stand; Übergabe an den Termin, keine Rendite, keine Produktempfehlung)**: [Balkendiagramm aus Datenattributen](https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=versorgungsluecke) `css-diagramm-attr` · Variante „Versorgungslücke (Beispielrechnung mit Schraffur)“
3. **So arbeiten wir (Erstgespräch → Bestandsaufnahme → Marktvergleich → Empfehlung mit Beratungsdokumentation → Betreuung und Schadenfall; Dauer je Schritt ehrlich)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=unterstrich) `prozess-timeline-wachsende-linie` · Variante „Unterstrich je Schritt“
4. **Vergütung offen (Courtage in der Prämie, Honorar oder Servicevertrag als Tabelle mit Textwerten statt Häkchen; was der Kunde zahlt, was der Versicherer zahlt)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=alternativen) `vergleichstabelle-sticky` · Variante „Vergleich mit Alternativen“
5. **Erstinformation und Status (eigene Seite und Kurzfassung im Fuß: Status, Erlaubnis, Registernummer, Behörde, Beteiligungen, Vergütung, Schlichtungsstellen, Stand)**: [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo?v=impressum) `rechtstext-layout` · Variante „Impressum“, [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=kanzlei) `ansprechperson-band` · Variante „Kanzlei“
6. **Schaden melden (für Bestandskund:innen: Notrufnummern der Versicherer als Liste, dann Schadenformular in Schritten mit Fotos; keine Gesundheitsdaten im Formular)**: [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=foto) `datei-upload-ablage` · Variante „Schadensfoto zur Anfrage“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“
7. **Team (Berater:innen mit Schwerpunkt, Erlaubnis, Sprachen; Foto nur echt und mit Einwilligung)**: [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“
8. **Person-Detailseite (je Person eine Seite: Rolle, Schwerpunkte, Qualifikation mit Nachweis, Registernummer, Durchwahl und Termin)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=aerztin) `person-detailseite` · Variante „Ärztin“
9. **Ratgeber (Fachbeiträge mit Stand und Autorin; Steuer- und Rechtsfragen nur mit Verweis auf Steuerberatung bzw. Anwalt)**: [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“, [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=ratgeber) `artikel-seite` · Variante „Ratgeber“
10. **Stimmen (sachlich über Erreichbarkeit, Erklärung und Schadenfall, nie über Renditen; Google-Bewertungen nur mit Echtheitshinweis)**: [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“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
11. **Termin (Anliegen vorauswählen, vor Ort, Telefon oder Video; Buchungs-Widget erst nach Klick, Rückruf als Alternative)**: [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“, [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“
12. **Büro und Erreichbarkeit (Telefonzeiten mit Status, Besprechung nach Termin, Adresse als Text, Karte per 2-Klick)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“, [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“
13. **Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Terminbuchung oder Online-Abschluss nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Balkendiagramm aus Datenattributen](https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=versorgungsluecke) `css-diagramm-attr` · Variante „Versorgungslücke (Beispielrechnung mit Schraffur)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Lücke: eine echte Tabelle wird zur Spur mit Zielmarke, die Riesenziffer nennt die Lücke pro Monat; die Füllung wächst einmal bis zum vorhandenen Wert.
- Wo: Startseite, erster und zweiter Bildschirm
- Gewicht: groß: Riesenziffer mindestens 8rem, Spur über 10 Spalten
- Muster: [Balkendiagramm aus Datenattributen](https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=versorgungsluecke) `css-diagramm-attr` · Variante „Versorgungslücke (Beispielrechnung mit Schraffur)“
- 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: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Seitenwechsel: [Wortmarke wird Kopfmarke](https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/demo) `wortmarke-wird-kopfmarke`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=liste) `karte-ganzflaechig-klickbar` · Variante „Liste: Klick-Weiterleitung“
- Mikroanimation: [Absenden wird Bestätigung](https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/demo?v=karte) `absenden-zu-bestaetigung` · Variante „Karte: Formular wird Bestätigungskarte“, [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=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“

## 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) `firmendaten-strukturiert`
- [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?v=impressum) `rechtstext-layout` · Variante „Impressum“
- [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

- zahlen-odometer – keine hochgezählten Summen, Renditen oder Kundenzahlen
- initial-letter-initialen – Signatur von kanzlei-beratung-souveraen
- daten-scrollytelling – keine inszenierten Renditekurven; die eine Beispielrechnung reicht
- konfetti-erfolg – ein Vertrag ist kein Gewinnspiel
- marquee-laufband – Versicherer-Logos laufen nicht durch
- smooth-scroll-lenis – Tabellen und Erstinformation müssen ruhig lesbar sein
- logo-wand-social-proof – Versicherer-Logos nur mit Erlaubnis und nie als Gütesiegel; Partner als Textliste
- Münzen, Sparschweine, Händedruck- und Strandfamilien-Fotos – Klischee statt Beratung
- Renditeversprechen, „kostenlos“ ohne Erklärung der Courtage, Testsieger-Siegel ohne Lizenz – irreführend

## Regeln

- Erster Bildschirm: H1 mit Wer und Für wen, Foto der Person, „Termin“ und Telefon, darunter der Status (Makler, Vertreter oder Berater) mit Link zur Erstinformation. Mobil Knopf Anrufen / Termin.
- Signatur (css-diagramm-attr, Variante ziel): die Lücke nur als gekennzeichnete Beispielrechnung oder mit den Zahlen aus der Beratung; Annahmen (Einkommen, Alter, Rentenniveau, Inflation) und Stand-Datum stehen darunter als Text. Keine Produktempfehlung und keine Rendite in der Rechnung. Ohne Fallback für typisiertes attr() nicht bauen.
- Erstinformation (§ 15 VersVermV): Name, Anschrift, Status mit Erlaubnis nach § 34d GewO (bzw. § 34f, § 34h, § 34i), Registernummer und Link zum Vermittlerregister, zuständige IHK, Beteiligungen über 10 %, Art der Vergütung, Schlichtungsstellen. Als eigene Seite, im Fuß verlinkt und bei der Terminbuchung in Textform zur Verfügung gestellt. Vom Kunden prüfen lassen.
- Impressum (§ 5 DDG) mit denselben Status- und Registerangaben, Aufsichtsbehörde und Berufshaftpflicht, soweit vorgeschrieben. Den alten Link zur OS-Plattform entfernen. Vom Kunden prüfen lassen.
- Bezeichnungen nur mit Erlaubnis: „Versicherungsberater“, „Honorar-Finanzanlagenberater“ und „unabhängig“ nur, wenn Status und Marktüberblick das tragen; gebundene Vertreter nennen die Gesellschaft. Vom Kunden prüfen lassen.
- Finanzanlagen: keine Renditeversprechen, frühere Wertentwicklung nur mit dem Hinweis, dass sie kein Indikator für die Zukunft ist; Kosten und Zuwendungen nach der Finanzanlagenvermittlungsverordnung offenlegen. Darlehen und Ratenwerbung nur mit allen Pflichtangaben direkt dabei (ab 20.11.2026 neue Verbraucherkreditregeln). Vom Kunden prüfen lassen.
- Formulare ohne Gesundheitsdaten: Fragen zur Gesundheit (BU, PKV, Risikoleben) gehören ins Gespräch oder in ein gesichertes Portal, nicht in das Kontaktformular. Im Schadenformular nur, was zur Meldung nötig ist.
- Versicherer-Logos und Testsieger-Siegel nur mit Erlaubnis bzw. Lizenz; Bewertungen von Google nur mit Echtheitshinweis direkt dabei (bewertungsprofil-mit-echtheitshinweis).
- Knöpfe: Petrol, Füllung vom Eintrittspunkt (fuellung-vom-eintrittspunkt, Variante basis) für Termin und Schaden melden; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Versicherungsagentur (gebundene Vertretung eines Versicherers)**: Schrift, Farbe, Stil und Signatur bleiben. Der Status lautet gebundener Versicherungsvertreter (§ 34d Abs. 7 GewO) bzw. Ausschließlichkeitsvertreter; die Gesellschaft wird im Hero-Status und in der Erstinformation genannt, Marken und Logos des Versicherers nur nach dessen Vorgaben. Kein „Marktvergleich“ und kein „unabhängig“. Die Vergütungstabelle entfällt, stattdessen ein Satz zur Provision. Schaden melden verweist auf den Schadenweg des Versicherers und die Agentur als Hilfe. Vom Kunden prüfen lassen.
- **Honorarberatung und Finanzanlagen (§ 34h GewO, Honorar statt Provision)**: Schrift, Farbe, Stil und Signatur bleiben. Die Vergütung ist das Hauptargument: Honorar je Stunde oder pauschal als preisseite-geruest (Variante kurskarte) mit Rechenweg und Beispiel; Provisionen werden ausgekehrt, das steht als Satz dabei. Die Beispielrechnung zeigt Kosten über die Laufzeit (Gebühren in Euro statt Prozent) nur mit Annahmen und Stand. Ratgeber mit Stand und Quellen. Keine Rendite- und Sicherheitsversprechen; Hinweise zu Risiken und früherer Wertentwicklung nach Finanzanlagenvermittlungsverordnung. 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“.