# Lead-Seiten-Varianten — Phase `edit`

Zwei Varianten der Seite `/it-hardware/verkaufen/`, gebaut nach dem Inject-Pattern:
**kein Neubau.** Ein Build-Skript kopiert die echte, gescrapte Seite und ersetzt
ausschließlich drei markerbegrenzte, in sich geschlossene Blöcke. Hero-Bild,
Navigation, Footer und der gesamte übrige Inhalt bleiben unberührt.

## Bewusst Low-Fidelity

Der Auftrag umfasst „ohne Design-Konzept, ohne technische Umsetzung". Diese
Varianten sind daher **keine Mockups**, sondern Reihenfolge-Nachweise: Sie zeigen
mit den vorhandenen Klassen, Farben und Typografie der echten Seite, was passiert,
wenn Handlungsaufforderung und Preislogik nach oben wandern. Neu ist ausschließlich
ein kleines, scoped CSS mit dem Präfix `afbv-` (rund 90 Zeilen) und ein Sprunglink.
Es wurde keine Preisaussage erfunden — der Inhalt des Konditionen-Teasers ist
wörtlich von derselben Seite übernommen.

Jede Variante trägt unten links eine sichtbare Kennzeichnung „Entwurf · nicht live",
damit sie nicht mit der Live-Seite verwechselt wird.

## Was geändert wurde

| Block | Marker | Änderung |
|---|---|---|
| Hero-Subline | `<p class="…HERO-slide-subline…">` | Acht Zeilen Keyword-Prosa → ein Satz. **Zusätzlich** die Aktionszeile (CTA + Sprunglink) in den Hero gesetzt. |
| Aktionsbereich | `<div class="gb-element-79d398f1">` | Variante A: **unverändert**. Variante B: zusätzlich ein kompakter Konditionen-Teaser darunter. |
| Konditionen-Überschrift | `<h4 class="…gb-text-1617e3d3">` | `id="konditionen"` ergänzt, damit der Sprunglink ein Ziel hat. Sonst unverändert. |

Alle drei Marker müssen genau einmal vorkommen, sonst bricht der Build ab. Ändert
der Kunde die Seite, schlägt der Build fehl statt still das Falsche zu ersetzen.

## Gemessener Effekt (Mobil 390 × 844)

Nicht geschätzt — im Browser gemessen über `getBoundingClientRect()`:

| | Original | Variante A / B |
|---|---:|---:|
| Erste Handlungsaufforderung | **1.033 px** (1,22 Bildschirme) | **542 px** (0,64 Bildschirme) |
| im ersten Bildschirm sichtbar | nein | **ja** |
| Sprunglink zu den Konditionen | – | 553 px |
| Konditionen erreichbar ab | 6.043 px (7,2 Bildschirme) | Teaser in B ab **1.102 px** (1,3 Bildschirme) |
| Seitenhöhe mobil | 15.636 px (18,5 Bildschirme) | unverändert |

Der zweite Befund ist der wichtigere: Die Preisinformation, die laut GA4 das
häufigste Abschlusssignal der Seite ist, war mobil erst nach sieben Bildschirmen
erreichbar. Variante B bringt sie auf einen kurzen Scroll — ohne den bestehenden
Konditionen-Abschnitt anzutasten.

> **Zur Vergleichbarkeit mit dem AT-Review (Stand 2026-08-04).** Die Werte oben sind
> bei **390 × 844** per Device-Emulation gemessen. Der Review nennt für dieselbe Seite
> eine Höhe von 15.161 px und die Konditionen ab 5.909 px — das ist dieselbe Seite bei
> **500 px** Fensterbreite (schmalste real einstellbare Breite ohne Emulation). Beide
> Messreihen sind für ihre Breite korrekt; die Position des ersten CTA ist mit
> 1.033 px in beiden Reihen identisch.
>
> **Und ein korrigierter Begründungsstrang:** Der Eingriff wurde ursprünglich damit
> begründet, die deutsche Seite setze den CTA direkt hinter die Überschrift. Das ist
> widerlegt — DE liegt bei 1.007 px, also ebenfalls unter der Falzkante, und die
> DE-Seite ist sogar länger. Die Varianten kopieren Deutschland also nicht, sondern
> beheben einen Mangel, den **beide Märkte** haben. Was DE wirklich anders macht: drei
> statt acht Zeilen Einleitungstext und ein On-Page-FAQ. Die Reihenfolge-Empfehlung
> gilt damit für DE genauso — dort ist sie nur bisher niemandem aufgefallen, weil der
> Markt trotzdem mehr Anfragen erzielt.

## Wichtige Einschränkung

**Die Varianten sind nicht funktionsfähig.** Der Build entfernt alle 45 Runtime-
Skripte der echten Seite (Theme, Consent, CAPTCHA, Slider, Barrierefreiheits-
Overlay) und behält genau ein eigenes. Konsequenz: Der Hero-Slider rotiert nicht,
das mobile Menü öffnet nicht, Formulare senden nicht. Das ist gewollt — die
Varianten sollen Reihenfolge zeigen, nicht Verhalten simulieren.

## Bauen und prüfen

```bash
python3 scripts/build-lead-variant.py alle   # oder: a | b
python3 scripts/check-lead-mockup.py         # a11y-Smoke-Gate
```

Das Gate trennt zwei Schweregrade: **FEHLER** bricht ab (etwas, das unser Build
beschädigt haben kann), **HINWEIS** meldet vorbestehende Mängel der Originalseite.
Aktuell grün, mit einem Hinweis: fünf Links ohne zugänglichen Namen auf der
Lead-Seite — vorbestehend und identisch mit Finding 5 des AT-Reviews, dort wurden
drei auf der Kontaktseite gezählt.

## Screenshots

`data/_screens/variant-{a,b}-{mobile-390,desktop-1440}.png`