Layout Startseite — Wireframe und Inhalts-Briefing

Stand: 2026-05-04. Konsolidiertes Briefing für die Umsetzung der Startseite. Strategische Querverweise: ../marketing/strategie/STRATEGY.md, ./BRAND.md.

Sektionsreihenfolge

1. Header
2. Hero (typografisches Statement) 2.5 Meta-Story (Phänomen Familienschweigen, fünf Cluster-Fragen, Pointe)
3. Hook (anonymisierte Einzelfälle)
4. Cluster-Übersicht (5 Karten mit Frage-Subline)
5. Team
6. Vertrauen / Social Proof
7. Lead-Magnet (Familien-Notfallordner)
8. So läuft ein Erstgespräch ab
9. Kontakt
10. Footer

1) Header

┌──────────────────────────────────────────────────────────────┐
│ [Logo]    Einkommen  Familie  Kinder  Pflege  Zukunft   ☰   │
└──────────────────────────────────────────────────────────────┘

Logo links, fünf Cluster als Hauptmenü, Burger (☰) für „Mehr” (Notfallordner, Magazin, Über uns, Kontakt). Bleibt beim Scrollen oben kleben.

Header-Labels bleiben schlank — die Cluster-Karten in Sektion 4 ergänzen sie mit Verb und Frage.

2) Hero — typografisches Statement

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│                                                              │
│   Reden wir über das,                                        │
│   worüber sonst keiner spricht.                              │
│                                                              │
│   Familienthemen. Klar besprochen. Seit 1973.                │
│                                                              │
│   [ Reden wir. ]    Mehr erfahren ↓                          │
│                                                              │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Wirkung: Die Worte sind das Bild. Kein Brand-Element, kein Foto — die Aussage ist so wichtig, dass sie keine Dekoration braucht.

Typografie: Headline in Display-Schrift Fraunces 600 (variable Serif, SOFT-Achse leicht erhöht für Wärme), 54–108 px fluid skaliert, tieferes Brand-Blau (--cg-blue-deep), eng gesetzt (Line-Height 1.05). Linksbündig auf voller Container-Breite, max-width auf den Text begrenzt, damit die zwei Zeilen als Block stehen.

Subline in PT Sans, klein und gedeckt. CTA-Button gelb-grün („Reden wir.” als Klammer-Element der Seite — wiederholt sich in Sektion 8 und Sektion 9), sekundärer Pfeil-Link springt zum Hook-Anker.

Hinweis für später: Wenn nach Live-Test echtes Bildmaterial gewünscht wird, dann kein Stockfoto mit Menschen, sondern Symboldetails (Hand mit Kinderschuh, Türschlüssel, leerer Stuhl im Gegenlicht). Erst nach Live-Erfahrung mit dem reduzierten Hero entscheiden.

2.5) Meta-Story — Tonalitäts-Anker mit Hierarchie

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│                                                              │
│   Es gibt eine Liste, die in jedem Familienleben fehlt.      │
│                                                              │
│   Sie steht nicht am Kühlschrank, nicht im Kalender,         │
│   nicht im Notizbuch.                                        │
│                                                              │
│   Auf dieser Liste stehen die Fragen,                        │
│   die du dir nicht stellst:                                  │
│                                                              │
│                                                              │
│      Was, wenn ich morgen nicht mehr arbeiten kann?          │
│                                                              │
│      Was bleibt von uns, wenn einer nicht mehr da ist?       │
│                                                              │
│      Was hinterlassen wir unseren Kindern —                  │
│      außer guten Wünschen?                                   │
│                                                              │
│      Wer kümmert sich um Mama und Papa?                      │
│                                                              │
│      Was wird aus uns, wenn das Arbeiten aufhört?            │
│                                                              │
│                                                              │
│   Wir haben diese Liste.                                     │
│   Und wir reden darüber.                                     │
│                                                              │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Wirkung: Atempause zwischen Hero und Hook. Benennt das Phänomen des Familienschweigens, bevor in Sektion 3 die konkreten Einzelfälle folgen. Kein CTA — bewusst.

Echo-Architektur: Die fünf Fragen entsprechen den fünf Cluster-Sublines aus Sektion 4. Was hier abstrakt benannt wird, wird dort konkret. Dramaturgisch laut → leise → laut → leise → laut.

Drei Hierarchie-Stufen:

1. Einleitung (zentriert, PT Sans, --cg-warmwhite): drei Absätze, normale Größe, leicht cremiges Warmweiß auf dunklem Grund. „Es gibt eine Liste…”, „Sie steht nicht am Kühlschrank…”, „Auf dieser Liste stehen die Fragen, die du dir nicht stellst:”.
2. Fünf Fragen (linksbündig, PT Sans, --cg-teal): jede Frage als eigener Absatz mit Atemraum dazwischen, ~ 1.4× Einleitungsgröße, leicht eingerückt. Türkis leuchtet auf Dunkelblau besonders schön und behält Akzent-Charakter. Bewusst NICHT in der Display-Schrift — Hierarchie wäre sonst zu hart.
3. Pointe (zentriert, Fraunces 700, --cg-lime): zwei Sätze als zwei Zeilen — „Wir haben diese Liste.” / „Und wir reden darüber.” — deutlich abgesetzt durch zusätzlichen vertikalen Raum. Brand-Gelb als visueller Höhepunkt, schließt die Klammer zum „Reden wir.”-CTA im Hero, der dasselbe Gelb hat.

Hintergrund — Bühnenraum: sattes Brand-Dunkelblau (--cg-blue), vollflächig ohne Verlauf, ohne Textur. Übergang vom hellen Hero zum dunklen Block als harte Kante (kein Verlauf) — der visuelle Bruch ist gewollt und markiert den Wechsel von Behauptung zu Phänomen.

Wirkungsziel: Beim Scrollen vom Hero in die Meta-Story soll der Leser fühlen „jetzt geht es ernst” — ohne Bedrohung. Der dunkle Hintergrund ist nicht düster, sondern konzentriert. Wie ein Lesesaal, eine Theaterbühne, ein abendlicher Küchentisch nach einem langen Tag. Türkis und Gelb auf Dunkelblau machen die Sektion visuell distinkt — die Sektion, an die der Leser sich erinnert.

Dramaturgie der oberen Seitenhälfte: Hero hell → Meta-Story dunkel → Cluster-Übersicht hell. Heller → dunkler → heller, das ist der Rhythmus.

Du-Anrede. „die du dir nicht stellst:” — STRATEGY-Konsistenz, statt Briefing-„ihr”.

Variantenpool für späteren A/B-Test: Live ist Variante B_revised. Drei weitere Varianten (D „Anruf”, A „Küchentisch”, C „Statistik”) liegen im Code als auskommentierte Reserve. Variante C-Statistiken sind Platzhalter — vor Aktivierung durch belastbare Quellen belegen (GDV, BaFin, Statistisches Bundesamt).

3) Hook — Tab-basierte Story-Wand

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   Fünf Geschichten aus unserer Beratung.                     │
│   Anonymisiert — so oder ähnlich erleben wir sie.            │
│                                                              │
│   ┌──────────────────────────────────────────────────────┐   │
│   │ [Einkommen] [Pflege] [Familie] [Kinder] [Zukunft]    │   │
│   │                                                      │   │
│   │ "Story-Text mit Cliffhanger-Punkten am Ende…"        │   │
│   │                                                      │   │
│   │ Typische Situation, wie wir sie regelmäßig erleben.  │   │
│   │                                                      │   │
│   │              [ Weiterlesen: Einkommen sichern → ]    │   │
│   └──────────────────────────────────────────────────────┘   │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Wirkung: statt einer einzelnen Story (die wirkt wie ein Beleg) fünf Stories als Repertoire — eine pro Cluster. Jeder Besucher findet seinen Cluster wieder, die Bandbreite der Beratung wird sichtbar, und es entstehen fünf direkte Pfade in die Pillar Pages statt einem.

Tab-Reihenfolge ist eine eigene dramaturgische Spannungskurve und folgt NICHT der Cluster-Reihenfolge aus #4: Einkommen (mildest, breitest) → Pflege (Generation Sandwich, sehr aktuell) → Familie (härtester Punkt, mittig versteckt) → Kinder (positiver gerahmt, Erholung) → Zukunft (langfristigster, Abschluss).

Default-Tab beim Laden ist „Einkommen” — mildester Einstieg, am wenigsten emotional aufgeladen. Tod als Default wäre zu hart.

Cliffhanger-Disziplin in jedem Tab: Jede Story endet mit drei Auslassungspunkten (…) — keine Auflösung auf der Startseite. Die Auflösung gehört auf die jeweilige Pillar Page als Belohnung für den Klick. Drei Punkte sind das typografische Kernstück, nicht durch andere Satzzeichen ersetzen.

Authentizität: Stories sind aktuell konstruierte typische Situationen. Der Hinweis lautet entsprechend „Typische Situation, wie wir sie regelmäßig erleben.” Sobald echte anonymisierte Fälle freigegeben sind, pro Story art: 'echt' in src/data/hook-stories.json setzen — der Hinweis-Text schaltet automatisch um auf „Echter Fall aus unserer Beratung. Name und Details anonymisiert.” Headline-Zeile 2 wandert dann zurück auf „Anonymisiert. Aber alle echt.” (siehe TODO im Daten-File).

Implementierung. CSS-only-Tabs mit <input type="radio"> + <label>. Kein JavaScript, Tastatur-Navigation gratis (Pfeiltasten zwischen Radios), alle fünf Stories im DOM (SEO-indexierbar), sichtbar nur das aktive Panel via CSS Sibling-Selektoren. Mobile: horizontal scrollbare Tab-Leiste.

Sektions-Headline in Fraunces 600 (zwei Zeilen, zentriert). Tab-Labels in PT Sans Bold; aktiver Tab in --cg-teal mit Unter- strich, inaktive in --cg-blue-60. Story-Zitat in PT Sans Italic mit dezenter linker Linie in --cg-teal (analog vorheriger Hook-Variante). Anonymisierungs-Hinweis darunter klein und kursiv in --cg-blue-60. Sekundär-CTA rechtsbündig.

4) Cluster-Übersicht

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   Eine Zeitreise durch das Familienleben                     │
│                                                              │
│   ┌──────────────────┐  ┌──────────────────┐                 │
│   │ Einkommen        │  │ Familie          │                 │
│   │ sichern          │  │ schützen         │                 │
│   │                  │  │                  │                 │
│   │ Was, wenn ich    │  │ Was bleibt von   │                 │
│   │ morgen nicht     │  │ uns, wenn einer  │                 │
│   │ mehr arbeiten    │  │ nicht mehr da    │                 │
│   │ kann?            │  │ ist?             │                 │
│   │            →     │  │            →     │                 │
│   └──────────────────┘  └──────────────────┘                 │
│                                                              │
│   ┌──────────────────┐  ┌──────────────────┐                 │
│   │ Kinder           │  │ Pflege & Alter   │                 │
│   │ absichern        │  │                  │                 │
│   │                  │  │                  │                 │
│   │ Was hinterlas-   │  │ Wer kümmert sich │                 │
│   │ sen wir unseren  │  │ um Mama und      │                 │
│   │ Kindern — außer  │  │ Papa?            │                 │
│   │ guten Wünschen?  │  │                  │                 │
│   │            →     │  │            →     │                 │
│   └──────────────────┘  └──────────────────┘                 │
│                                                              │
│   ┌──────────────────┐                                       │
│   │ Zukunft          │                                       │
│   │ gestalten        │                                       │
│   │                  │                                       │
│   │ Was wird aus     │                                       │
│   │ uns, wenn das    │                                       │
│   │ Arbeiten         │                                       │
│   │ aufhört?         │                                       │
│   │            →     │                                       │
│   └──────────────────┘                                       │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Wirkung: Karten in Brand-Element-Form (asymmetrische Eckradien, vgl. BRAND.md). Frage-Mikrocopy unter dem Label macht aus einem Etikett ein Versprechen und führt die Tonalität der Hero-Headline konsequent weiter.

Layout: Desktop 3+2, Mobile untereinander. Jede Karte führt auf die zugehörige Pillar Page.

Frage-Sublines können später als Pillar-Page-Headlines weiterverwendet werden.

Designentscheid Spiegelpaar Cluster 1 ↔ Cluster 5. Cluster 1 fragt nach dem unfreiwilligen Stopp der Arbeit (Berufsunfähigkeit, Krankheit), Cluster 5 nach dem freiwilligen (Ruhestand). Diese dramaturgische Klammer war bei der Schärfung der Cluster-5-Subline ausschlaggebend und sollte bei späteren Textänderungen erhalten bleiben.

Designentscheid Cluster 3. Frage bewusst zugespitzt auf die Lücke zwischen Wollen und Können — “außer guten Wünschen?” konfrontiert, ohne zu drohen, und führt thematisch direkt in Ausbildungssparen, Vermögensaufbau und Kindervorsorge.

Echo-Architektur zur Meta-Story #2.5. Die fünf Frage-Sublines sind wortwörtlich identisch mit der Aufzählung in der Meta-Story. Die Meta-Story benennt das Phänomen abstrakt („die Fragen, die du dir nicht stellst:”), die Cluster-Karten beantworten es konkret. Bei Textänderungen IMMER beide Stellen synchron halten — MetaStory.astro und ClusterSection.astro.

Implementierung. Karten in Brand-Element-Form (Eckradien-Tokens --cg-radius-tl/tr/br/bl, TL + BR rund, TR + BL eckig — wie das Logo), Karten-Hauptlabel in Fraunces 500, Frage-Subline in PT Sans, Pfeil rechtsbündig in --cg-teal. Hover: Karte hebt sich um 4 px, Box-Shadow erscheint, Pfeil rückt 4 px nach rechts. Sektions-Headline in Fraunces 600 (--cg-blue-deep). Hintergrund weiß — Dramaturgie hell (Hero) → dunkel (Meta-Story) → hell (Cluster). Layout via 6-Spalten-Grid, jede Karte über 2 Spalten: Reihe 1 alle drei Karten nebeneinander, Reihe 2 zwei Karten zentriert (Spalten 2–3 und 4–5). Mobile (< 800 px) gestapelt einspaltig.

5) Team

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   Wer hier mit dir spricht                                   │
│                                                              │
│   ┌────┐  ┌────┐  ┌────┐  ┌────┐                             │
│   │Foto│  │Foto│  │Foto│  │Foto│                             │
│   └────┘  └────┘  └────┘  └────┘                             │
│   Marcus  Alina   Maria   Elion                              │
│   Inhaber Halbtag Halbtag Azubi                              │
│                                                              │
│                              [ Mehr über uns → ]             │
└──────────────────────────────────────────────────────────────┘

Wirkung: Gesichter statt Logos. Drei der vier sind selbst junge Eltern — das passt zur Positionierung und sollte in den Kurzbiografien aufgegriffen werden.

Bewusst vor Social Proof platziert: erst Gesicht zeigen, dann Bestätigung durch andere.

Personen-Stand (Stand 2026-05-04 abend, aus marketing/strategie/quellen-altseite/historie.md, alter Webseite und Sitzungs-Notizen):

• Marcus Chantraine — Inhaber. Vater von zwei.
• Alina Laumen-Wirtz — Beraterin. Mutter von zwei.
• Maria Hoven — Beraterin. Mutter von zwei.
• Elion Kastrati — Auszubildender. (Vor- und Nachname, eine Person.)
• Achim Basse strategisch raus
• Dieter Ganser freier Mitarbeiter (in Geschichte erwähnen, NICHT im Team-Block der Startseite)

Rollen-Wortlaut bewusst familien-warm — drei der vier sind selbst Eltern von zwei kleinen Kindern, das wird in der Rolle direkt sichtbar gemacht statt in einer langen Sub-Bio versteckt. „Beraterin” ist ein warmer Default; der genaue IHK-Berufstitel kann später ergänzt werden, falls präziser gewünscht.

Implementierung. Foto-Container quadratisch (1 : 1) mit Brand-Element-Eckradien (50 px TL + BR rund, TR + BL eckig — analog Cluster-Karten für visuelle Konsistenz). Bilder mit object-fit: cover. Aktuelle Fotos sind temporär aus der alten Webseite übernommen (quadratisches Format). Vor Go-Live gegen neue Aufnahmen vom Fotograf-Termin austauschen — entweder im selben Quadrat-Format aufnehmen oder die Component auf neues Format umstellen. Name in Fraunces 500 (--cg-blue-deep), Rolle in PT Sans (--cg-blue-60). Sektions- Headline in Fraunces 600. Layout: Mobile 1 Spalte, Tablet (≥ 600 px) 2 × 2, Desktop (≥ 900 px) 4 nebeneinander. „Mehr über uns →“-Link sekundär rechtsbündig unter dem Grid. Hintergrund weiß — Dramaturgie hell bleibt.

6) Vertrauen / Social Proof

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   Über 500 Bewertungen. Drei Generationen. Ein Ort.          │
│                                                              │
│   ★★★★★ eKomi   ★★★★★ ProvenExpert   ★★★★★ Google           │
│                                                              │
│   "Zitat eines Kunden — kurz, konkret, dankbar."             │
│                                                              │
│                                          [ Mehr Stimmen → ]  │
└──────────────────────────────────────────────────────────────┘

Wirkung: harte Zahlen plus Plattform-Sterne als externe Validierung. Eine Stimme als persönliche Note.

7) Lead-Magnet — Familien-Notfallordner

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   [ Brand-Element mit Verlauf als Hintergrund ]              │
│                                                              │
│   Der Familien-Notfallordner. Kostenlos.                     │
│                                                              │
│   • Persönliche Verfügungen (Patient, Vorsorge, Sorgerecht)  │
│   • Wichtige Dokumente — Übersicht zum Eintragen             │
│   • Versicherungsübersicht                                   │
│   • Im Notfall — Sofort-Anleitung                            │
│                                                              │
│                       [ Jetzt anfordern → /notfallordner ]   │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Wirkung: echter Werkzeug-Nutzen, nicht nur Werbe-PDF. Wichtigster Lead-Hebel der Seite.

Qualität muss zur Marke passen (gepflegtes editierbares PDF oder physisch). Billig wirkende Umsetzung würde die ganze Markenhaltung untergraben.

8) So läuft ein Erstgespräch ab

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   So läuft ein Erstgespräch bei uns ab                       │
│                                                              │
│   ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │
│   │              │  │              │  │              │       │
│   │  Foto:       │  │  Foto:       │  │  Foto:       │       │
│   │  Büro/       │  │  Beratungs-  │  │  Konzept-    │       │
│   │  Empfang     │  │  situation   │  │  Übergabe    │       │
│   │              │  │              │  │              │       │
│   └──────────────┘  └──────────────┘  └──────────────┘       │
│                                                              │
│   1. Du meldest      2. Wir hören      3. Du bekommst        │
│      dich.              zu.               ein Konzept.       │
│                                                              │
│   Kurz per Mail,    60 Minuten bei    Schriftlich, klar      │
│   Telefon oder      uns im Büro oder  und nachvollzieh-      │
│   über das          per Video.        bar — mit Empfeh-      │
│   Formular.         Ergebnisoffen     lungen, nicht mit      │
│   Keine Vorberei-   und unverbind-    Druck.                 │
│   tung nötig.       lich.                                    │
│                                                              │
│                       [ Reden wir. ]                         │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Zweck: Hemmschwelle abbauen, bevor der Kontakt-CTA kommt. Junge Familien zögern vor einem Beratungstermin — drei einfache Schritte mit echten Fotos aus dem Büro nehmen die Unsicherheit raus.

Foto-Hinweis: Bitte echte Aufnahmen (vgl. Bildwelt-Regel in BRAND.md). Stockfotos wären der erste Bruch in der Bildwelt.

9) Kontakt

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   Reden wir.                                                 │
│                                                              │
│   ┌─────────────────────┐    Wilhelm-Pitz-Str. 12            │
│   │                     │    52223 Stolberg                  │
│   │  [ Karte / Foto     │                                    │
│   │    Büro Breinig ]   │    Tel: 02402 / …                  │
│   │                     │    info@chantraine-ganser.de       │
│   └─────────────────────┘                                    │
│                                                              │
│                       [ Reden wir. ]                         │
└──────────────────────────────────────────────────────────────┘

Wirkung: lokale Verankerung sichtbar. Termin-CTA als Wiederholung des Hero-Aufrufs, schließt die “Reden wir.”-Klammer.

10) Footer

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│ [Logo negativ]   Themen          Service       Rechtliches   │
│                  Einkommen       Über uns      Impressum     │
│                  Familie         Magazin       Datenschutz   │
│                  Kinder          Kontakt       Erstinfo      │
│                  Pflege & Alter  Notfallordner Vermittler-   │
│                  Zukunft                       register      │
│                                                              │
│ Auch das übernehmen wir: KFZ · Hausrat · Gebäude · Gewerbe   │
│                                                              │
│ © 2026 Chantraine Ganser Inh. Marcus Chantraine e. K.        │
└──────────────────────────────────────────────────────────────┘

Wirkung: alle Pflichten erfüllt, alle Pages erreichbar, Sach- und Gewerbe-Versicherung als schmaler Hinweis ohne eigenen Bereich.

Globale Hinweise für die Umsetzung

Tonalität. Konsequente Du-Ansprache auf der gesamten Seite. Auch in Mikrocopy, Buttons, Fehlermeldungen, Cookie-Hinweis. Quelle: ../marketing/strategie/STRATEGY.md, Abschnitt Tonalität.

Primary-CTAs. Alle primären Termin-CTAs heißen einheitlich „Reden wir.” (Hero, Erstgesprächs-Sektion, Kontakt). Sekundäre Aktionen dürfen anders heißen („Mehr erfahren”, „Jetzt anfordern”). Quelle: ../marketing/strategie/STRATEGY.md, Abschnitt Primary-CTA.

Bildwelt. Echte Aufnahmen, keine Stockfotos. Leise, ungestellte Momente. Quelle: ./BRAND.md, Abschnitt Bildwelt-Regel.

Hook-Story. Echter, anonymisierter Kundenfall mit Hinweis direkt unter dem Zitat. Optional später als Rotation mehrerer Stories erweiterbar.

Pillar Pages. Werden separat entwickelt, sobald das Startseiten-Grundgerüst steht. Die Frage-Mikrocopy aus den Cluster-Karten kann direkt als Pillar-Page-Headline weitergenutzt werden.

Offene Punkte vor Umsetzung

• Echte Fotos für Hero, Hook, Erstgesprächs-Sektion, Team und Kontakt beauftragen (professioneller Fotograf, halber Tag)
• Anonymisierten Kundenfall für Hook ausformulieren (schriftlich, mit Freigabe vom Original-Kunden, falls erkennbar)
• CI als CSS-Variablen aufsetzen
• Komponenten bauen: Header, Footer, Hero, Cluster-Karten, Team-Karten, Lead-Magnet-Block, Step-Karten, Kontakt-Block

Änderungs-Historie

2026-05-05 (Update 10) — Sektion #7 Lead-Magnet gebaut

Neue Komponente LeadMagnet.astro plus Daten-Datei src/data/notfallordner.json. Visuelle Bühne fürs Brand-Element: weißer Hintergrund mit einer großen, angeschnittenen Brand-Form rechts — Verlauf bei 8% Transparenz (--cg-gradient-08 aus dem Styleguide-Token), Brand-Element-Eckradien. Die Form ragt aus dem Sichtbereich heraus, sichtbar bleibt nur der Pillen-Bogen oben-links und unten-rechts als visueller Anker. Inhalt zentriert auf weiß, normale Typografie.

Headline mit „Kostenlos.”-Akzent in --cg-teal (Türkis ist auf weißem Hintergrund besser lesbar als Lime), vier Bullets mit Türkis- Häkchen, Primary-CTA in Brand-Lime (Hero-CTA-Klammer „Reden wir.”).

Dramaturgie: Social Proof hellblau → LeadMagnet weiß mit Brand- Element-Anschnitt → Erstgespräch.

Designentscheid: Brand-Element wird bisher kaum auf der Startseite sichtbar, dieser Anschnitt ändert das. Pattern später in weiteren Sektionen (Erstgespräch, Kontakt) wiederverwendbar.

Strategie-Mechanismus (geplant, noch nicht umgesetzt):

1. CTA führt auf Landingpage /notfallordner/ (existiert noch nicht — 404 wie Cluster-Pillar-Pages, konsistent).
2. Landingpage enthält Zoho Forms mit Vorname, Mail, DSGVO- Einwilligung. Submit erzeugt Lead in Zoho CRM automatisch.
3. Double-Opt-In-Mail (DE-Pflicht) zum Bestätigen.
4. Mail-Strecke in Zoho Campaigns: 1) Willkommen + PDF, 2) Folgefrage, 3) Erstgesprächs-Angebot.

Drei Folge-Projekte als TODO (gehen am Tagesende ins jeweilige Repo-TODO):

• PDF-Konzeption „Familien-Notfallordner” — eigenes Projekt in marketing/, mit Marcus inhaltlich erarbeiten.
• Landingpage /notfallordner/ in cg-website — Formular, Datenschutz, Erfolgs-Seite.
• Zoho-Forms- + Campaigns-Setup in cg-zoho-one — Form-Build, CRM-Lead-Mapping, Mail-Strecke, Double-Opt-In, Lead-Status.

Bullets sind aus dem Wireframe übernommen, später mit Marcus inhaltlich erweitern (Briefing-Notiz 2026-05-05).

2026-05-05 (Update 9) — Hook auf Tab-Story-Wand erweitert

Hook-Sektion #3 von einer einzelnen Story auf eine Tab-basierte Story-Wand mit fünf anonymisierten Fällen ausgebaut — einer pro Cluster.

Begründung: Eine einzelne Story spricht nur einen Cluster an und wirkt wie ein Beleg, nicht wie ein Repertoire. Fünf Stories drehen das um — jeder Besucher findet seinen Cluster, die Bandbreite wird sichtbar, fünf Pfade in die Pillar Pages statt einem.

Konkret:

• Sektion #3 in LAYOUT-STARTSEITE.md neu gezeichnet (Tab-Wand statt Einzel-Story).
• Neue Daten-Datei src/data/hook-stories.json mit fünf Stories.
• src/components/Hook.astro komplett umgebaut: CSS-only-Tabs mit Radio-Pattern, kein JavaScript, alle fünf Stories im DOM (SEO-indexierbar), sichtbar nur das aktive Panel.
• Default-Tab „Einkommen” (mildest, breitest, am wenigsten emotional aufgeladen).
• Tab-Reihenfolge eigene Spannungskurve (Einkommen → Pflege → Familie → Kinder → Zukunft), NICHT Cluster-Reihenfolge.
• Mobile: horizontal scrollbare Tab-Leiste.

Authentizitäts-Hinweis: Stories sind aktuell konstruierte typische Situationen — Hinweis pro Tab lautet „Typische Situation, wie wir sie regelmäßig erleben.” Headline-Zeile 2 entsprechend angepasst auf „Anonymisiert — so oder ähnlich erleben wir sie.” statt Wireframe- Wortlaut „Anonymisiert. Aber alle echt.” Sobald echte anonymisierte Fälle vorliegen, pro Story art: 'echt' setzen — der Hinweis-Text schaltet automatisch. Headline-Zeile 2 wandert dann zurück auf den Wireframe-Wortlaut.

Cliffhanger-Disziplin: Jede Story endet mit drei Auslassungspunkten (…), keine Auflösung auf der Startseite — die wandert auf die jeweilige Pillar Page als Belohnung für den Klick.

2026-05-05 (Update 8) — Fraunces-Einsatz reduziert

Display-Schrift Fraunces auf drei Stellen reduziert: Hero-Headline, Sektionsüberschriften, Meta-Story-Pointe. Alle übrigen Stellen zurück auf PT Sans (Bold für Etiketten, Italic für Zitate, Regular sonst).

Konkret:

• Cluster-Karten-Hauptlabels (Sektion #4): PT Sans Bold 700 statt Fraunces 500.
• Team-Mitglieder-Namen (Sektion #5): PT Sans Bold 700 statt Fraunces 500.
• Plattform-Namen in Social Proof (Sektion #6): PT Sans Bold 700 statt Fraunces 600.
• Kunden-Zitat in Social Proof (Sektion #6): PT Sans Italic statt Fraunces Italic — analog Hook-Zitat (Sektion #3).

Begründung: An dreizehn aktiven Stellen verlor Fraunces ihre Sondereigenschaft. Verbindliche Einsatzregel ab jetzt: Fraunces NUR für Hero-Headline, Sektionsüberschriften und Pointen. Etiketten und Personennamen in PT Sans Bold, Zitate in PT Sans Italic, alles übrige in PT Sans Regular.

Hinweis für künftige Sektionen (Notfallordner, Erstgespräch, Kontakt): Listen-Items, Schritte, Aufzählungen, Bullet-Points, Hinweise und Buttons sind niemals in Fraunces.

2026-05-05 (Update 7) — Hook auf Cliffhanger zurückgedreht

Story in Hook.astro von der aufgelösten Variante zurück auf den Cliffhanger gesetzt. Zitat endet jetzt mit „Sechs Wochen weiter zahlt der Arbeitgeber nicht mehr…” und drei Auslassungspunkten als typografisches Kernstück. Die Auflösung (Krankentagegeld als Pointe, „Kein Brief vom Amt, keine schlaflosen Nächte. Nur Ruhe zum Gesundwerden.”) wandert auf die spätere Pillar Page /cluster/einkommen/ als Belohnung für den Klick.

Begründung: Hook-Story muss eine offene Wunde hinterlassen, sonst fehlt der Klick-Impuls. Die aufgelöste Variante war eine schöne Mini-Erfolgsstory, hat aber den strategischen Zweck der Sektion (Tonalität beweisen + Klick auf Pillar Page auslösen) untergraben.

CTA-Wortlaut bleibt „Weiterlesen: Einkommen sichern” — konkreter als das Wireframe-Kürzel „Cluster 1”.

2026-05-05 (Update 6) — Sektion #6 Vertrauen / Social Proof gebaut

Neue Komponente SocialProof.astro plus Daten-Datei src/data/social-proof.json als zentrale Pflege-Quelle. Headline „Über 500 Bewertungen. Drei Generationen. Ein Ort.” (Wireframe- Wortlaut), drei Plattform-Karten (eKomi, ProvenExpert, Google) mit proportional gefüllten Sternen, Score und Anzahl, klickbar zum jeweiligen Profil. Zitat von M. S. (ProvenExpert) — „Eine charmante, familiengeführte Agentur — persönliches Engagement, freundliche Ansprechpartner und eine individuelle Lösung.” Sammel-CTA „Mehr Stimmen →” zu ProvenExpert (CD-Match, Aggregator-Charakter).

Dramaturgie hell → dunkel (Meta-Story) → hell (Cluster, Team) → sanftes Hellblau (Social Proof, --cg-blue-20) — kleiner Bruch ohne den Bühnenraum-Effekt zu verschleißen.

LocalBusiness-Schema im <head> von index.astro erweitert um aggregateRating (4,96 / 5 bei 529 Reviews, gewichteter Schnitt über alle drei Plattformen) und sameAs mit allen drei Profile-URLs.

Plattform-Logos sind aktuell typografische Wortmarken (Plattformname in Akzentfarbe). Offizielle Press-Kit-SVGs später nachzuladen — als TODO im Code markiert. Sterne sind aktuell hardcoded in social-proof.json; Build-Zeit-Fetch mit wöchentlichem Cloudflare-Pages-Cron-Rebuild ist als Phase-2-TODO vermerkt (DSGVO-sauber, weil keine Browser-Tracker laden).

2026-05-04 (abend, Update 5) — Team-Sektion #5 gebaut

Zwei neue Komponenten: TeamCard.astro (eine Person, props-basiert, optional photo-Prop für <img>) + TeamSection.astro (Headline + 4-Karten-Grid + sekundärer „Mehr über uns →“-Link).

• Daten finalisiert: Maria Hoven (Nachname geklärt), Berufsbezeichnung „Beraterin” als familien-warmer Default. Rollen-Wortlaut „Vater / Mutter von zwei” trägt die Positionierung direkt sichtbar.
• Vier Mitarbeiter-Fotos temporär von der alten Webseite übernommen (chantraine-ganser.versicherung) und nach public/team/ gelegt (marcus.jpg, alina.jpg, maria.jpg, elion.jpg). Vor Go-Live gegen neue Fotograf-Aufnahmen austauschen — Achim Basse strategisch raus, daher nicht übernommen.
• Layout responsive: 1 → 2 × 2 → 4 nebeneinander (Mobile / Tablet / Desktop).
• „Mehr über uns →” zeigt aktuell auf #, wird auf /ueber-uns/ umgestellt, sobald die Über-uns-Seite gebaut ist.

2026-05-04 (abend, Update 4) — Hero-Subline + lokaler SEO-Anker

• Hero-Subline ersetzt: „Familienvorsorge aus Stolberg-Breinig. Seit 1973.” → „Familienthemen. Klar besprochen. Seit 1973.” Begründung: „Familienthemen” ist offener als „Familienvorsorge” (kein Versicherer-Sprech), „Klar besprochen” trägt das aktive Versprechen, „aus Stolberg-Breinig” wirkte einschränkend.
• Title-Tag gesetzt: „Chantraine Ganser — Familienthemen klar besprochen | Stolberg & Aachen”.
• Meta-Description gesetzt: „Persönliche Versicherungsberatung aus Stolberg-Breinig. Familienthemen klar besprochen — vor Ort und für Familien aus dem Raum Aachen. Seit 1973.”
• LocalBusiness Schema.org (InsuranceAgency) als JSON-LD im <head> von index.astro eingebaut. Adresse, areaServed und foundingDate sind drin; telephone, geo, openingHours und sameAs sind als TODO-Kommentare im Code markiert (siehe HANDOVER.md).
• Lokalität wandert an SEO-wirksamere Stellen: Title-Tag, Meta-Description, Schema.org address + areaServed, Footer-Adresse (bereits geplant), Kontakt-Sektion #9 und Über-uns-Seite (beide noch zu bauen — als TODO erfasst).

2026-05-04 (abend, Update 3) — Cluster-Sektion #4 gebaut

Zwei neue Komponenten: ClusterCard.astro (eine Karte mit Brand-Element-Eckradien, props-basiert) + ClusterSection.astro (Sektions-Headline + Grid + 5 Karten).

• Echo-Architektur zur Meta-Story etabliert: identische Frage-Wortlaute in beiden Sektionen.
• 3 + 2 Layout via 6-Spalten-Grid mit nth-child-Positionen.
• Cluster-Labels in Fraunces 500, Sektions-Headline in Fraunces 600, Pfeil-Akzent in --cg-teal.
• Pillar Pages /cluster/<slug>/ existieren noch nicht — Karten-Links fuehren auf 404 (konsistent mit Header-Cluster-Links).

2026-05-04 (abend, Update 2) — Meta-Story als Bühnenraum

Hintergrund von hellem --cg-blue-20 auf sattes Brand-Dunkelblau --cg-blue umgestellt; Textfarben entsprechend invertiert:

• Einleitung: --cg-warmwhite (#f5f2ec, neuer Token, leicht cremig)
• Fünf Fragen: --cg-teal (unverändert, leuchtet auf Dunkelblau)
• Pointe: --cg-lime (Brand-Gelb, schließt Klammer zum Hero-CTA)

Layout, Typografie, Struktur und Texte unverändert. Wirkung: Bühnenraum statt unentschiedenem Halbblau, Dramaturgie hell → dunkel → hell.

2026-05-04 — Hero typografisch + Meta-Story mit Hierarchie + Display-Schrift Fraunces

Drei zusammenhängende Updates aus mehreren Briefing-Runden:

1. Hero #2: Brand-Element rechts ersatzlos entfernt. Hero wird zum typografischen Statement — Headline (Fraunces 600, 54–108 px, --cg-blue-deep, eng gesetzt) trägt die obere Bildschirmhälfte allein.
2. Meta-Story #2.5: Neu eingeführt zwischen Hero und Hook. Live-Variante B_revised mit drei Hierarchie-Stufen (Einleitung, fünf Cluster-Fragen, Pointe „Wir haben diese Liste. / Und wir reden darüber.”). Drei weitere Varianten (D, A, C) als auskommentierte A/B-Test-Reserve im Code.
3. Display-Schrift Fraunces: Variable Serif (selbst gehostet via @fontsource-variable/fraunces, DSGVO-konform) für Hero-Headline und Meta-Story-Pointe. PT Sans bleibt für Mengentext, Navigation, Buttons, Sublines, Mikrocopy, Cluster-Sublines, Meta-Story- Einleitung und -Fragen. Reckless als kommerzielles Upgrade-Ziel im Token-Fallback eingetragen.

Quelle: drei Briefings aus Claude-Web-Diskussion an diesem Tag — zuerst Meta-Story-Konzept, dann Hero-Reduktion + Meta-Story-Hierarchie, zuletzt Fraunces als zweite CD-Schrift.