# Master-Version der Verkaufsseite — Bauauftrag

Drei Personas haben unabhängig je eine Version gebaut. Alle drei wurden vom
Architekten selbst nachgeprüft (Playwright, eigener Kontrast-Audit, Screenshots).
Dies ist das Urteil und der Bauauftrag für die Master-Version.

## Ergebnis der Abnahme

Alle drei bestehen die harten Gates: kein horizontales Scrollen bei 390/768/1440 px,
keine defekten Bilder, keine Konsolenfehler, ohne JavaScript vollständig lesbar,
Ad-Blocker-Grep sauber, keine Textstelle unter 4,5:1 (schwächster Wert überall
5,17:1 — Weiß auf CTA-Blau `#2563EB`, tokenbedingt bei allen identisch).

Unterschiede, die entschieden haben:

| | Hyperlanding | Frontend-Builder | Visual-Studio |
|---|---|---|---|
| reduced-motion vollständig sichtbar | **nein — 7 Textblöcke bleiben versteckt** | ja (0) | ja (0) |
| Mobile Navigation | **fest ausgeklappt, frisst Höhe; Logo doppelt** | Burger | Logo + CTA |
| 10-Tage-Programm | 2-spaltige Liste, kleine Bilder | 5er-Raster mit Anatomie-Bildern | 5er-Raster mit Anatomie-Bildern |
| Boni sichtbar | nur Listenpunkte im Angebot | eigene Sektion mit beiden Bildern | „Zusätzlich dabei" mit beiden Bildern |
| Einwände am Entstehungsort | teilweise | ja | ja, als eigene Boxen |
| Seitenlänge Desktop | 9178 px | 8046 px | 7836 px |

**Basis-Version: Frontend-Builder.** Beste Dramaturgie (erst das Warum über das
Netzwerk-Diagramm, dann das Wie über die Phasen, dann was man bekommt, dann der
Preis), sauberstes Netzwerk-Diagramm mit außenliegenden Beschriftungen,
kompakteste Seite bei größter Substanz — und die gründlichste Eigenprüfung
(automatischer Kontrast-Audit über alle Textknoten, drei selbst gefundene Fehler
behoben, Token `#6B7280` bewusst verworfen, weil er auf grauer Fläche nur 4,83:1
erreicht).

## Bauauftrag

Erstelle `master/index.html` (plus `styles.css`/`app.js` wenn sinnvoll) als
**Kopie der Frontend-Builder-Version mit drei Übernahmen**:

### 1. Dunkler Hero aus der Hyperlanding-Version

Der Hero von Frontend-Builder ist hell. Hyperlandings dunkler Hero (Navy-Verlauf
`#0A1628` → `#0D2240`, weiße Headline, dritte Zeile in Marken-Orange, Roberts
Foto rechts in gerundetem Rahmen) wirkt hochwertiger und entspricht dem
hausinternen Erfahrungswert, dass dunkle Werbemittel deutlich besser konvertieren.

Übernimm die **Optik**, nicht den Code: kein doppeltes Logo, keine mobil fest
ausgeklappte Navigation. Die Navigation bleibt die von Frontend-Builder (Burger
auf dem Handy). Der Übergang vom dunklen Hero zur hellen Folgesektion muss sauber
sitzen — keine harte Kante, aber auch kein Verlauf, der den Text schwächt.

### 2. Einwand-Boxen aus der Visual-Studio-Version

Visual-Studio setzt Einwand-Antworten als eigene, ruhige Boxen direkt dorthin, wo
die Frage entsteht: nach den drei Phasen „Brauche ich Vorkenntnisse oder Geräte?",
nach dem 10-Tage-Programm „Wie viel Zeit brauche ich pro Tag?". Übernimm dieses
Muster mit **wortgleicher Copy aus `COPY-VERBINDLICH.md`** (die Antworten stehen
im FAQ-Abschnitt). Die Fragen bleiben zusätzlich im FAQ — dort sind sie
Nachschlagewerk.

### 3. Alles andere bleibt Frontend-Builder

Netzwerk-Diagramm vor der Phasen-Timeline · Inhalte-Sektion mit Tagesaufbau und
beiden Boni als Bild · 5er-Programm-Raster · Disclaimer als sichtbare Plakette
direkt über dem Kauf-Button · mobile Kaufleiste · alle CTAs außer dem Kauf-Button
führen auf `#angebot` · Problem-Karten mobil als kompakte Reihe.

## Unverhandelbar

- Copy wortgenau aus `COPY-VERBINDLICH.md`. Keine neuen Aussagen, keine Zahlen,
  keine Zeitangaben pro Übung.
- Pflicht-Disclaimer wortgenau, gut lesbar, direkt über dem Kauf-Button.
- Verboten: Krankheitsbegriffe (Bruxismus, CMD, Knirschen, Migräne, Schwindel),
  Testimonials, Teilnehmerzahlen, Sterne, Presse-Logos, Siegel, Streichpreise,
  Countdown, Verknappung, Geld-zurück-Garantie, „wissenschaftlich erwiesen".
- Preis 149 €, Kauf-Button auf `/checkout`.
- Keine externen Ressourcen außer einem Google-Fonts-Link. Keine neuen Bilder.
- Bilder relativ als `../assets/…`.

## Gates (werden nachgemessen)

1. Kein horizontales Scrollen bei 390, 768, 1440 px.
2. Bei `prefers-reduced-motion: reduce` sind **alle** Inhalte sofort sichtbar —
   nicht nur die Animationen kürzer. Das ist der Punkt, an dem Hyperlanding
   gescheitert ist.
3. Ohne JavaScript vollständig lesbar, Kauf-Button erreichbar.
4. Keine Textstelle unter 4,5:1; Text über Bildern mit Scrim und voller Deckkraft.
5. Kein Dateiname, `id` oder `class` mit `ad`/`ads`/`banner`/`sponsor`/`popup`.
6. Keine defekten Bilder, keine Konsolenfehler.

Lege `master/NOTIZ.md` an: was aus welcher Version übernommen wurde und die
Ergebnisse der sechs Gates.