Zum Inhalt
← Rezepte
Alle Rezepte

Versicherungsmakler und Finanzberatung: nüchtern und nachvollziehbar

Versicherungsmakler / Versicherungsagentur (gebundene Vertretung) / Versicherungsberater / Finanzanlagenvermittler und Honorar-Finanzanlagenberater / Immobiliardarlehensvermittler

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.

Bauplan tokens.css Alle Techniken

Schrift

Nüchtern und nachvollziehbar

Wer einen Makler sucht, will wissen: Wer berät mich, in wessen Auftrag, was kostet das, und was fehlt mir eigentlich?

Headline
Hedvig Letters Serif
Text
Zalando Sans

Farbe

  • #F4F4EF
  • #16202B
  • #E2E7EA
  • #18304A
  • #0E5A61
  • #A8432A
  • #55606A

Bewegung

cubic-bezier(0.25, 1, 0.5, 1)
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)

Aufbau der Seite

SignaturBalkendiagramm aus Datenattributen

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

  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 · AutomatischLeistungsseite: Antwort zuerst · PraxisGanze Karte klickbar
  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 · Versorgungslücke
  3. So arbeiten wir (Erstgespräch → Bestandsaufnahme → Marktvergleich → Empfehlung mit Beratungsdokumentation → Betreuung und Schadenfall; Dauer je Schritt ehrlich)Prozess-/Timeline-Sektion mit wachsender Linie · 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 · Vergleich
  5. Erstinformation und Status (eigene Seite und Kurzfassung im Fuß: Status, Erlaubnis, Registernummer, Behörde, Beteiligungen, Vergütung, Schlichtungsstellen, Stand)Rechtstexte lesbar setzen · ImpressumAnsprechperson-Band · 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 · SenkrechtDatei-Ablage mit Vorschau und Prüfung · Schadensfoto zur AnfrageFehlerzusammenfassung im Formular · Liste
  7. Team (Berater:innen mit Schwerpunkt, Erlaubnis, Sprachen; Foto nur echt und mit Einwilligung)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
  8. Person-Detailseite (je Person eine Seite: Rolle, Schwerpunkte, Qualifikation mit Nachweis, Registernummer, Durchwahl und Termin)Personen-Detailseite · Ä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 · Weitere ladenArtikelseite mit Autorin, Stand und Strukturdaten · Ratgeber
  10. Stimmen (sachlich über Erreichbarkeit, Erklärung und Schadenfall, nie über Renditen; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · ReihePlattform-Bewertungen mit Echtheitshinweis · 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 · VorauswahlKontakt- und Anfrageformular als eigene Sektion · Anfrage-Sektion
  12. Büro und Erreichbarkeit (Telefonzeiten mit Status, Besprechung nach Termin, Adresse als Text, Karte per 2-Klick)Öffnungszeiten mit Live-Status · TerminKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  13. Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Terminbuchung oder Online-Abschluss nach BFSG prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „Rundum sorglos“, „bestens abgesichert“, „kostenlos“ ohne Erklärung, Angstbilder.
Hero, Raum und Form
  • Hero-Raster: H1, Satz und Wege über Spalte 1 bis 6; Foto randabfallend über Spalte 7 bis 12; mobil Foto unter der H1.
  • Hero-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.
  • Sektionsabstand: clamp(64px, 8vw, 128px)
  • Dichte: mittel
  • Raum: Ruhig und tabellarisch: Tabellen dicht mit 12 px Zeilenabstand, Kapitel mit viel Luft, die Beispielrechnung mit 48 px Rand.
  • Spalten: 12
  • 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
  • Schatten: keiner
  • Form: Gerade und knapp gerundet; Tabellen mit Haarlinien statt Kästen.
Vorbilder