# Klartext v5 — Umsetzungs-Script

Stand: 2026-08-01 · Experiment in `findandsolve-website` · **v4 bleibt unangetastet**

Inspiration (Pattern stehlen, nicht kopieren): [hexclave.com](https://www.hexclave.com/) — cinematic Intro → Agent-/Modul-Mesh → **live klickbares Produkt ohne Login** → „Done.“-Checkliste.

Datei-Ziel: `core/klartext-v5.html`  
Dieses Dokument = Drehbuch + Bauplan. **Eine Phase nach der anderen. Nicht alles auf einmal.**

---

## 0. Nordstern

**Killer-Feature:** Besucher klicken sofort in ein echtes wirkendes Makler-Dashboard (Demo-Daten) — ohne Anmeldung, ohne Warteliste.

**Hero-Claim (verbindlich für v5):**

> Erlebe das erste vollautomatisierte Versicherungsmaklerbüro in Deutschland.

**Nicht:** Hexclave-Logo, Hex-Grid 1:1, „Claude“ als Marke, Space-YC-Ästhetik als Default.  
**Ja:** Erzählmaschine (Intro → Mesh → Live-UI → Done), Mucke, Agents als Cast, FS-Klartext-Ton.

---

## 1. Cast — Agenten (Intro + Mesh)

| ID | Anzeigename | Was der Besucher „fühlt“ | Demo-Beweis (Dashboard) |
|----|-------------|--------------------------|-------------------------|
| `mail` | Mail-Agent | Posteingang sortiert, Antwort-Entwurf | Postfach-Liste + Detail |
| `bipro` | BiPRO-Agent | Nachts Dokumente zuordnen | „23 Dokumente über Nacht“-Zeile / Feed |
| `pool` | Pool-Agent | Bestands-/Pool-Daten laden | Kundenkarte / Vertragskontext |
| `compare` | Vergleichs-Agent | Angebote vergleichen | Vergleichs-Ergebnis-Karte |
| `whatsapp` | WhatsApp-Agent | Chat + Foto → Vorgang | Chat-Bubble + Fahrzeugschein-Stub |
| `refer` | Empfehlungs-Agent | ReferLink / Weiterempfehlung | Landing-/Link-Karte |
| `kfz` | KFZ-Agent | Automatische Berechnung | Tarif-/Ergebnis-Zeile |

Nur Agents zeigen, die ihr **ehrlich** demonstrieren könnt. Lieber 5 stark als 12 Fake.

---

## 2. Storyboard (Zeiten grob)

Gesamtlänge Intro: **28–40 s** (Skip jederzeit). Mute-Button Pflicht. `prefers-reduced-motion` → Intro überspringen, Mesh + Dashboard sofort.

### Szene A — Prompt (0–6 s)
Schwarzer Screen. Monospace. Tippen:

```
Bau mir ein Maklerbüro, das nachts arbeitet.
```

Highlight-Wörter nacheinander (blaues Glow-Rechteck, Hexclave-Style):  
`E-Mail` → `BiPRO` → `Pool` → `WhatsApp` → `KFZ`

### Szene B — Dialog (6–16 s)
Zwei Stimmen (Labels **DU** / **FINDANDSOLVE** — nicht „Claude“):

| Wer | Text |
|-----|------|
| DU | und die Post? |
| FS | Mail-Agent liest. Antwort liegt bereit. |
| DU | und BiPRO nachts? |
| FS | 23 Dokumente. Zugeordnet. Du entscheidest morgens. |
| DU | und der Schein vom Sohn — kopfüber? |
| FS | WhatsApp + KFZ-Agent. Beide Varianten gerechnet. |

Optional: kurze „Live.“-Zeile mit cyan/lila Highlights (wie Hexclave-Paywall-Beat), aber **Makler-Inhalt**.

### Szene C — Done-Checkliste (16–24 s)
Großes grünes **Done.** Dann Checks nacheinander:

1. Vergleiche Angebote  
2. Landingpage  
3. WhatsApp Empfehlungsmarketing  
4. Automatische KFZ-Berechnung  
5. BiPRO-Nachtlauf  
6. Mail-Agent mit Freigabe  

(Liste final kürzen auf das, was Dashboard wirklich zeigt.)

### Szene D — Übergang (24–28 s)
Fade zu Hero. Mucke leiser / Outro-Hit. Text erscheint: Hero-Claim.

### Szene E — Seite lebt
Mesh + CTA „Dashboard anfassen“ + Skip-Rest.

---

## 3. Seite nach dem Intro

### 3.1 Hero
- Eyebrow: `Fleet of Agents · Rockenhausen`
- H1: Claim (oben)
- Lead: 1 Satz — vom Makler für Makler, ohne Login ausprobieren
- CTAs: `Dashboard anfassen` (scroll/focus Live-UI) · `Demo-Zugang` / Warteliste (bestehende Links)

### 3.2 Agent-Mesh (Header-Animation)
Statt Laptop: Netz aus Agent-Nodes.
- Klick Node → kurzer Spotlight (Name + 1 Satz) **und** Dashboard springt auf passende View
- Hover: Linie/Glow, kein Hit-Testing-Chaos (3D nur dekorativ oder `pointer-events` sauber wie v4-Fix)

### 3.3 Live-Dashboard (Killer)
Vollbreite App-Shell, Annotation „Hier rumklicken“:

| Nav | Inhalt (Demo) |
|-----|----------------|
| Posteingang | Sandra Müller / Familie Berger (aus v4 übernehmen) |
| Aufgaben | 2–3 Tasks, eine „von Agent erledigt“ |
| Kunde | Mini-Kundenkontext |
| Agenten | Liste der 7 Agents mit Status „läuft / wartet auf dich“ |

Regeln:
- Keine echte API, keine Auth  
- Alle Daten hardcodiert / `content/` JSON ok  
- Jeder Klick fühlt sich an wie Produkt (Hover, Selection, Detail)  
- Optional: ein Agentenlauf wie v4, aber **im Dashboard**, nicht im Laptop  

### 3.4 Rest der Story (kurz)
Nicht die ganze v4-Page 1:1. Nach Dashboard: 1 Pull-Quote + CTA. Long-Scroll kann Phase 6 werden.

---

## 4. Bau-Phasen (Step by Step)

Jede Phase = eigener Agent-Lauf / Commit. Definition of Done = lokal unter `npx serve` klickbar.

### Phase 1 — Skelett 🟢
- [x] `klartext-v5.html` Shell: **eigene Tokens** (neutrales Schwarz `#08080b`, Mono als Leitschrift,
      elektrisches Blau `#2b7fff`) — bewusst *nicht* die v4-Welt, siehe Direction-Contract im HTML
- [x] Skip-Intro-State, Hero mit Claim + Platzhalter „Dashboard“
- [x] `data-fs-page="marketing-klartext-v5"` + Nav/Hub-Link
- [x] Fonts: Satoshi 900 (Display) + JetBrains Mono (Leitschrift)

### Phase 2 — Intro-Drehbuch als Code 🟢
- [x] Overlay `#intro`, Szenen A–D als eine Timeline (Cue-Tabelle, Zustand pro Frame aus `t` abgeleitet)
- [x] Szene A: Composer-Karte, Prompt tippt sich, **zeichenweise** Highlight-Kästchen
      E-Mail → BiPRO → Pool → WhatsApp → KFZ
- [x] Szene B: DU/FINDANDSOLVE als Transcript (blaue Verlaufs-Bubble ↔ grüner Haken), scrollt mit
- [x] Szene C: grünes `Done.` + 6er-Checkliste + `Live.`-Beat
- [x] Szene D: Auflösung in den Hero auf dem Outro-Hit (28,15 s)
- [x] Skip (Button + ESC/Enter/Space) · Ton stumm per Default, an nur per Geste
- [x] Audio `assets/audio/v5-intro.mp3` — bei Ton an ist `audio.currentTime` die Uhr (Beat-Sync)
- [x] `reduced-motion` → Intro wird gar nicht erst gestartet
- [x] Uhr pausiert bei verstecktem Tab (sonst friert `rAF` ein und die Sequenz verpufft)

### Phase 3 — Agent-Mesh 🟢 (bis auf die Dashboard-Kopplung)
- [x] SVG-Hex-Knoten (statt `clip-path`) + Labels aus der Cast-Tabelle — alle 7 Agenten
- [x] Verbindungsbögen **erst bei Hover/Fokus** — sie zeichnen sich einmal aus dem berührten
      Knoten heraus und bleiben stehen. Keine Dauerschleife, kein Puls: Bewegung nur beim Drüberfahren
- [x] Zeiger-Wirbel im Nebel: das Sample-Feld wird um den Zeiger rotiert (gaussischer Abfall),
      die Wolke verwirbelt also wirklich, statt nur aufzuhellen
- [x] Zielkreuz-Klammern + „Anklicken →" wie in der Vorlage
- [x] Klick → Spotlight (Name + Satz); `window.fsSelectAgent(id)` liegt für Phase 4 bereit
- [x] Nebel als WebGL-Shader (domain-warped FBM), CSS-Nebel bleibt Fallback
- [ ] Klick schaltet die Dashboard-View um → Phase 4

### Phase 4 — Live-Dashboard ⬜
- [ ] Shell: Sidebar + Main + optional Right-Dock
- [ ] Views: mail / tasks / customer / agents
- [ ] Demo-Daten (v4-Mails wiederverwenden)
- [ ] Mesh-Klick wechselt View
- [ ] Annotation „poke around“ / „Hier rumklicken“

### Phase 5 — Mucke + Polish ⬜
- [ ] Audio: lizenzklar (eigen / Epidemic / ähnlich) in `assets/audio/`
- [ ] Intro sync leicht an Beats (nicht frameperfekt nötig)
- [ ] Skills: `improve-animations` + `review-animations`
- [ ] Mobile: Intro kürzer oder Auto-Skip; Dashboard horizontal scrollbar ok

### Phase 6 — Anbindung Rest-Page (optional) ⬜
- [ ] Done-Checkliste nochmal als Footer-Section
- [ ] CTA Warteliste / Demo
- [ ] Content-Loader Keys in `sites.json`

---

## 5. Claude-Prompt (pro Phase kopieren)

**Phase 1:**
> Lies `core/klartext-v5-SCRIPT.md`. Baue nur Phase 1 in `core/klartext-v5.html`. Keine Intro-Animation. v4 nicht anfassen.

**Phase 2:**
> Lies das Script §2 Szenen A–C. Implementiere nur das Intro-Overlay mit Skip und reduced-motion. Noch kein Dashboard.

**Phase 4:**
> Lies Script §3.3. Baue das live klickbare Demo-Dashboard (Mock-Daten). Mesh darf Views umschalten. Keine Backend-Calls. Nutze impeccable craft-floor + design-taste-frontend.

---

## 6. Verbote / Fallen

| Falle | Stattdessen |
|-------|-------------|
| Hexclave 1:1 clonen | Pattern + eigene Copy |
| Laptop aus v4 behalten als Hero | Mesh + Live-Dashboard |
| Alle Features versprechen | Nur Cast-Tabelle |
| 3D-Hit-Testing-Flackern | `pointer-events` wie v4-Fix |
| Autoplay-Sound ohne Mute | Mute default an oder User-Gesture |
| v4 überschreiben | Neue Datei v5 |

---

## 7. Abnahme (Andy)

1. Skip Intro → sofort Hero + Dashboard nutzbar  
2. Intro einmal durch: Agents erkennbar, Done-Liste trifft eure Claims  
3. Dashboard: mind. Posteingang öffnen + Task sehen ohne Login  
4. Mesh-Klick wechselt etwas Sichtbares  
5. Mobile: nicht kaputt; Motion reduzierbar  

---

## 8. Referenz-Assets (lokal sammeln)

Hexclave-Screenshots liegen im Cursor-Workspace unter  
`…/workspaceStorage/…/images/image-*.png` (Intro, Mesh, Done, Dashboard, Prompt).  
Bei Umsetzung: **nicht** in Repo committen ohne Prüfung; nur als Moodboard nutzen.

Mucke: `assets/audio/v5-intro.mp3` (30 s, procedural Dark/Cinematic-Hip-Hop-Placeholder, generiert mit `scripts/make_v5_intro_audio.py`). Später durch ElevenLabs/Lizenz-Track ersetzbar.

---

## Status

| Phase | Status |
|-------|--------|
| Script | 🟢 dieses Dokument |
| Phase 1 — Skelett | 🟢 fertig |
| Phase 2 — Intro | 🟢 fertig (Intro + Hero spielbar) |
| Phase 3 — Mesh | 🟢 Knoten, Verbindungen, Hover, Spotlight — nur die Dashboard-Kopplung fehlt |
| Phase 4–6 | 🔴 offen |

**Designentscheidung (2026-08-01):** v5 übernimmt die hexclave.com-Bildsprache bewusst deutlich —
neutrales Schwarz statt v4-Blauschwarz, Mono als Leitschrift, blaue Verlaufs-Bubbles, zeichenweise
Highlight-Kästchen, Hex-Knoten im Nebel. Kein Hexclave-Logo, keine fremde Marke, eigene Copy.
Der Direction-Contract steht als Kommentar oben in `klartext-v5.html`.