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 — Tonalitäts-Anker

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   "Vor zwei Wochen hat sich ein Kunde von uns einen          │
│   Bandscheibenvorfall zugezogen. Drei Tage später war        │
│   klar: das wird länger dauern. Sechs Wochen weiter zahlt    │
│   der Arbeitgeber nicht mehr…"                               │
│                                                              │
│   * Echter Fall aus unserer Beratung. Name und Details       │
│     anonymisiert.                                            │
│                                                              │
│                              [ Weiterlesen → Cluster 1 ]     │
└──────────────────────────────────────────────────────────────┘

Wirkung: zeigt die Tonalität sofort — konkret, ohne Druck, mit Pointe. Verlinkt thematisch in den ersten Cluster („Einkommen sichern”).

Anonymisierungs-Hinweis kursiv und in kleinerer Schrift direkt unter dem Zitat. Verhindert Misstrauen am wichtigsten Punkt der Seite.

Optional später: Story-Rotation mit mehreren echten Fällen je nach Cluster.

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-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.