# Brief A — Verkaufsseite „Schluss mit Kieferstress" (Wettbewerbs-Version)

> Drei Personas bauen unabhängig je eine Version. Es gibt keine Absprache und keine
> gemeinsamen Dateien. Danach wird verglichen und eine Master-Version daraus gebaut.

## 1. Ziel

Eine conversion-optimierte, verkaufsfertige Landingpage für den Online-Kurs
**„Schluss mit Kieferstress"** (10-Tage-Programm, 149 € Einmalzahlung) von
Robert Lazik. Zielhandlung: Klick auf den Kauf-Button. Es gibt genau eine
Conversion — kein Newsletter, kein Lead-Magnet, kein zweites Ziel.

Zielgruppe: Erwachsene mit alltäglicher Anspannung in Kiefer, Nacken und Atmung,
die zu Hause und ohne Geräte selbst etwas tun wollen. Der Kurs ist ein Übungs-
und Präventionsangebot, **kein medizinisches Angebot** (siehe §4).

Die bestehende Version ist unter `~/appz/robertlazik-platform/app/page.tsx` +
`components/marketing/` einsehbar. Sie ist **kein Vorbild, an das du dich halten
musst** — sie zeigt nur, was inhaltlich schon steht. Bau deine eigene, bessere Seite.

## 2. Dateien

Du schreibst ausschließlich in **deinen eigenen Ordner**:

| Persona | Ordner |
|---|---|
| Hyperlanding | `clients/robertlazik/wettbewerb/hyperlanding/` |
| Frontend-Builder | `clients/robertlazik/wettbewerb/frontend-builder/` |
| Visual-Studio | `clients/robertlazik/wettbewerb/visual-studio/` |

Erwartete Dateien in deinem Ordner:

- `index.html` — die Verkaufsseite, eigenständig lauffähig per Doppelklick
- optional `styles.css`, `app.js` — wenn du trennen willst
- `NOTIZ.md` — max. 20 Zeilen: deine Conversion-Thesen (warum dieser Aufbau),
  plus was du bewusst anders gemacht hast als die bestehende Seite

**Verboten:** Dateien außerhalb deines Ordners anfassen, insbesondere
`~/appz/robertlazik-platform/**` und die Ordner der anderen Personas. Wenn dir
etwas außerhalb fehlt oder falsch erscheint: in `NOTIZ.md` melden, **nicht** selbst
ändern und **niemals** per `git checkout`/`git restore` etwas zurücksetzen.

## 3. Assets und technische Vorgaben

Bilder liegen unter `../assets/` (relativ zu deinem Ordner):

- `../assets/robert-profil.png` — Roberts echtes Foto (Über-Robert-Sektion, evtl. Hero)
- `../assets/logo/SMK_Logo_transparenter_Hintergrund.png` — Logo für Navbar/Footer
- `../assets/lp/*.jpg` — 12 Premium-Illustrationen: `problem-aufwachen`, `problem-bildschirm`,
  `problem-schwere`, `problem-atem`, `phase-1-verstehen`, `phase-2-loesen`,
  `phase-3-integrieren`, `ansatz-uebung`, `finale-nacht`, `bonus-abendroutine`,
  `bonus-live-kurs`, `danke-ankommen`
- `../assets/tage/tag-01.png` … `tag-10.png` — Anatomie-Thumbnails für die 10 Tage

Du darfst Bilder weglassen, wenn dein Konzept sie nicht braucht — aber keine
neuen Bilder erfinden, generieren oder aus dem Netz laden.

**Technik:**
- Reines HTML/CSS/JS, kein Build-Schritt, kein Framework. Doppelklick auf
  `index.html` muss die fertige Seite zeigen.
- Google-Fonts-`<link>` ist hier ausnahmsweise erlaubt (dies ist ein lokales
  Vergleichsartefakt). Sonst keine externen Ressourcen — kein CDN-Skript,
  kein Tracking, keine Remote-Bilder.
- Marken-Schrift: geometrischer Sans mit Nunito-/Inter-Charakter.
- Design-Tokens: `DESIGN-TOKENS.md` (Navy #0A1628, CTA-Blau #2563EB,
  Marken-Orange #F97316 sparsam, Fläche #F3F4F6). Du darfst innerhalb dieser
  Marke eigene Abstufungen setzen, aber die Marke nicht wechseln.
- Motion: `MOTION-SPEC.md` ist die Hausschule (Personality „ruhiges Atmen").
  Kernregeln: Hero-Einstieg als selbstlaufende CSS-Animation mit `both` —
  **niemals** Above-the-fold-Text mit gehaltener `opacity:0`, die auf JS wartet.
  Scroll-Reveals nur mit IntersectionObserver und so, dass ohne JS alles sichtbar
  bleibt. Nur `transform`/`opacity` animieren, kein `transition: all`,
  `prefers-reduced-motion` respektieren.

## 4. Inhalt — was fix ist und was frei

**Verbindlich, wortgenau:** `COPY-VERBINDLICH.md` im Elternordner. Die Copy ist
HWG-/UWG-geprüft (Weg A: Krankheitsfreiheit). Das ist eine Rechtsgrenze, keine
Stilfrage.

Fix, ohne Ausnahme:
- Alle Aussagen und Formulierungen stammen aus `COPY-VERBINDLICH.md`. Keine neuen
  Wirkversprechen, keine Zahlen, keine Erfolgsquoten, keine Zeitangaben pro Übung.
- Der **Pflicht-Disclaimer** steht wortgenau, gut lesbar (kein Kleingedrucktes)
  **direkt über** dem Kauf-Button.
- Die Pflicht-Hinweise unter der Problem-Sektion und unter „Über Robert" bleiben.
- Preis: **149 €**, Einmalzahlung inkl. MwSt. Kauf-Button zeigt auf `/checkout`.
- Footer: Impressum · Datenschutz · AGB · Widerruf (Platzhalter-Links) plus
  Kurz-Disclaimer.

**Streng verboten** (Abmahnrisiko, führt zur sofortigen Disqualifikation der Version):
Krankheitsbegriffe (Bruxismus, CMD, Knirschen, Migräne, Schwindel), Testimonials,
Teilnehmerzahlen, Sterne-Bewertungen, Presse-/„Bekannt aus"-Logos, Zertifikats-Siegel,
Streichpreise, Countdown, Verknappung („nur noch X Plätze"), Geld-zurück-Garantie,
„wissenschaftlich erwiesen"/„nachweisbar", erfundene Statistiken.

**Frei — hier gewinnst du den Wettbewerb:**
Reihenfolge und Gewichtung der Sektionen, Layout, Bildeinsatz, Typo-Hierarchie,
Motion, Mikrocopy von Buttons/Labels (sofern kein neuer Claim entsteht), zusätzliche
strukturierende Elemente (z. B. eine Vergleichs-/Einwand-Sektion), Sticky-CTA,
mobile Reihenfolge.

## 5. Conversion — woran deine Version gemessen wird

1. **Above the fold** beantwortet in einem Blick: Was ist das, für wen, was kostet es,
   was ist der nächste Schritt.
2. **CTA-Verfügbarkeit:** Kaufmöglichkeit ist auf jeder Scrollhöhe in Reichweite,
   ohne aufdringlich zu sein. Preis steht am CTA, nicht versteckt.
3. **Einwände** werden dort behandelt, wo sie entstehen (Zeit, Vorkenntnisse,
   Zugang, Widerruf, „ist das seriös") — nicht nur gesammelt im FAQ.
4. **Vertrauen ohne Fake:** Wir haben keine Testimonials und keine Zahlen. Vertrauen
   muss aus Klarheit, Ehrlichkeit, Roberts echtem Foto und der Qualität der
   Darstellung entstehen. Genau das ist die schwierige Übung dieses Briefs.
5. **Mobil zuerst:** Der Großteil der Besucher kommt vom Handy. 390 px ist der
   Ernstfall, nicht der Sonderfall.

## 6. Qualitäts-Gates (Pflicht vor „fertig")

- **Kontrast:** Body-Text ≥ 4,5:1, auf soliden Flächen ≥ 7:1 anstreben. Text über
  Fotos immer mit Scrim/Plakette und voller Deckkraft. Keine grauen Muted-Töne auf
  Fotos oder getönten Flächen. Die zwei schwächsten Paare rechnest du nach und
  nennst die Werte in `NOTIZ.md`.
- **Kein horizontales Scrollen** bei 390 px, 768 px, 1440 px.
- **Ad-Blocker-Sicherheit:** kein Dateiname, Pfad, `id` oder `class` mit
  `ad`/`ads`/`advert`/`banner`/`sponsor`/`popup` (Wortgrenzen prüfen).
- **Ohne JS** bleibt die Seite vollständig lesbar und der Kauf-Button erreichbar.
- **`prefers-reduced-motion: reduce`** schaltet Animationen ab.

## 7. Verifikation (Beweise, nicht Behauptungen)

Bevor du fertig meldest, führe selbst aus und halte das Ergebnis in `NOTIZ.md` fest:

1. Screenshots bei 390 px und 1440 px Breite (Playwright/Chrome headless),
   abgelegt als `screenshot-mobil.png` und `screenshot-desktop.png` in deinem Ordner.
2. Prüfung auf horizontales Scrollen:
   `document.documentElement.scrollWidth <= window.innerWidth` bei 390 px.
3. Grep-Check Ad-Blocker-Tokens über deinen Ordner:
   `grep -rniE '(^|[-_/"])(ad|ads|advert|banner|sponsor|popup)([-_./"]|$)' .`
4. Die zwei gerechneten Kontrastwerte.

„Sollte funktionieren" zählt nicht. Ohne Screenshot und Prüfergebnisse gilt die
Version als nicht abgegeben.