Website VSL Standard (die olaceo-Methode)

Was macht Website VSL Standard (die olaceo-Methode)?

v1.0.0, 25. Oktober 2026. Geschrieben aus dem olaceo.com-Referenzcode und seinen Messprotokollen, nicht aus dem Gedächtnis. Jede Zahl unten ist entweder:

• gemessen: aus dem Referenzcode oder einem Verifikationsprotokoll des Referenz-Builds kopiert, oder
• mit UNVERIFIED markiert: ein Ziel, eine externe Behauptung oder noch nicht gemessen. Nenne diese gegenüber einem Kunden nicht als Tatsachen.

Dateien, die mit diesem Standard ausgeliefert werden (Pfade sind relativ zu dieser Datei):

• reference/tokens.css: der echte Token-Block (Hell- und Dunkelmodus), Basis-Typo, Grid, Buttons, Inputs, Hero, Pill und Übergänge.
• reference/motion.js: der echte Spring-, Gummiband-, Velocity-, Flick-Projektions- und VSL-Nicht-Überspring-Code.
• templates/client-intake.md: das auszufüllende Intake-Formular für Schritt 1.

Die Philosophie auf einen Bildschirm (zuerst lesen)

1. Ein Besucher, ein Job, ein nächster Schritt. Jede Person, die landet, hat ein Ziel. Die Aufgabe der Seite ist es, mit einem Tipp herauszufinden, welche Person sie ist, und dann nur das zu zeigen, was diese Person voranbringt. Reibung ist der Feind.
2. Ruhige Oberfläche, arbeitende Mechanik darunter. Die Oberfläche ist Weißraum, ein Typeface, eine Akzentfarbe und echte Fotos oder ein echtes Video. Die Intelligenz (Routing, No-Skip-Player, Tracking, CRM) ist unsichtbar.
3. Belege, keine Behauptungen. Keine erfundenen Statistiken, Logos, Testimonials, Knappheit oder Countdowns. Wenn es keinen Beleg gibt, bleibt der Slot versteckt oder die FAQ sagt „noch nicht, und wir werden uns nichts ausdenken“. Der Build schlägt bei verbotenen Behauptungen fehl.
4. Jeder verlässt die Seite irgendwo sinnvoll. Keine Sackgassen und keine Ablehnungssprache („nicht passend“, „nicht qualifiziert“). Ein Besucher, der noch nicht bereit ist, bekommt den kostenlosen Pfad.
5. Bewegung ist flüssig, nicht gläsern. Bewegung folgt der Physik (Federn, Geschwindigkeit, Gummiband). Sie schmückt nie aus und respektiert immer reduzierte Bewegung. Denke an Wasser, das sich mit einer Pfütze vereint, nicht an Glas.
6. Gemessen, nicht nach Augenmaß. Zentrierung, Layout-Shift, Frame-Drops und Fold-Positionen werden in px und ms gemessen, bevor jemand sie für erledigt erklärt.

Warum es funktioniert (die psychologische Perspektive):

• Selbstselektion an der Tür. Menschen vertrauen einer Seite, die sie benennt. „Welcher bist du?“ lässt den Besucher die Segmentierung vornehmen, sodass jedes spätere Wort zu einer Person sprechen kann. Es kostet außerdem einen Tipp, kein Formular.
• Wert vor Aufforderung. Die H1 nennt das Ergebnis, das der ICP möchte (Zeit, Geld, die fehlende Fähigkeit), nicht die Dienstleistung. Zwei VSL-Funnel-Praktiker formulierten es so: Haynes: „eine klare und unkomplizierte Aussage darüber, was dein Angebot ist und für wen es gedacht ist“; Iles: „mach es über das Ergebnis, nicht über die Dienstleistung“.
• Weniger Auswahl, mehr Aktion. Ein primärer CTA pro Seite. Sekundäre Pfade sind ruhige Textlinks, niemals ein zweiter Button.
• Ruhe = Glaubwürdigkeit. Zurückhaltung (Weißraum, eine Akzentfarbe, leichte große Schrift) wirkt hochwertig und selbstbewusst. Unordnung wirkt bedürftig. Dies ist ein Design-Urteil aus dem Referenz-Build. UNVERIFIED als gemessener Conversion-Effekt.
• Engagement durch Anschauen. Der VSL kann nicht vorgespult werden, also trifft der CTA auf jemanden, der das gesamte Argument gehört hat. Der Endbildschirm platziert den CTA direkt daneben.

---

Schritt 1. Intake: Wer eintritt, was sie wollen, was sie aufhält

Mach das vor jedem Pixel. Fülle templates/client-intake.md mit dem Kunden aus.

Notiere für jeden ICP:

• Name in ihren eigenen Worten, wie sie sich selbst auf einer Karte beschreiben würden. olaceo: „Ich besitze ein Unternehmen“ / „Ich baue mit KI“.
• Ziel: das eine Ergebnis, das sie anstreben. Inhaber kaufen Ergebnisse („Geld sparen, Zeit sparen, Geld verdienen“), nicht Werkzeuge.
• Haupt-Einwand: der Grund, warum sie gehen würden. Builder: „Ich kann bauen, aber bei Verkaufsgesprächen erstarre ich“. Inhaber: „Ich weiß nicht, was KI in meinem Geschäft lösen könnte“.
• Benötigter Beleg: nur echte Belege, die du tatsächlich hast.
• Nächster Schritt: die einzelne Aktion für diesen ICP (einen Anruf buchen, einen Walkthrough starten, kaufen, herunterladen).
• Preisregel: anzeigen oder verstecken. Der Business-Funnel von olaceo zeigt KEINE Preise („Wir diagnostizieren, bevor wir ein Angebot machen“), durchgesetzt im Build.

Regeln:

• 2 ICPs sind der Referenzwert. Mehr als 3 Türen auf einem Router verwässert den Split. UNVERIFIED (Urteil, nicht getestet).
• Wenn du für das Ziel eines ICPs keinen Satz schreiben kannst, kannst du ihre Seite noch nicht bauen. Stoppe und frage nach.

Schritt 2. Der Entry-Split (Router bei "/")

Was: Die Startseite ist ein Router. Eine Frage und eine große Karte pro ICP. Keine Hero-Textwand, kein Navigationsmenü.

Referenz-Build (Router-Seite und ihre Styles; live auf olaceo.com seit 24. Oktober 2026):

• H1 = das Wortmarke plus eine Zeile, die beide Zielgruppen benennt („KI, die sich auszahlt, für Geschäftsinhaber und die Entwickler, die sie verkaufen.“). Screenreader erhalten es als echten Text.
• Frage: „which one are you?“ (klein geschrieben, leise). Margin 56px 0 18px.
• Karten: 2 nebeneinander, 340px breit, 16px Abstand, 200px hoch, Radius 22px, Border rgba(18,24,32,.09). Pfeil-Kreis 44px. Hover hebt -2px; aktiver Skalierungsfaktor .985.
• Mobil: 1 Spalte bis 420px Breite, Karten 108px hoch.
• Jede Karte ist ein einfaches <a href>. Es funktioniert ohne JS.
• Gespeicherte Wahl: localStorage ola_path. Ein wiederkehrender Besuch zeigt „willkommen zurück“ und die letzte Karte erhält einen leisen „weiter“-Chip.
• Nie automatisch umleiten. Warum: Das Logo auf jeder Seite verlinkt auf "/", daher würde eine automatische Weiterleitung jemanden einsperren, der die falsche Tür gewählt hat.
• Direktlinks (Anzeigen, E-Mails, PDFs) führen direkt zur ICP-Seite und berühren nie den Router.
• Mitglieder erhalten einen leisen Textlink unter den Karten („Bereits Mitglied? Anmelden“): 13px, #6B7580, 44px Tap-Ziel.
• Ladeanimation: reines CSS auf dem Wortmarke der H1. Sie läuft 1,78s, ein Rückkehrer in derselben Sitzung bekommt 0,4s, und reduzierte Bewegung bekommt eine 0,4s-Einblendung. Keine zusätzlichen Requests, CLS 0.
• Exit: ein Cross-Document View Transition, nur für Router zu Pfad verwendet: out .3s, in .5s cubic-bezier(.22,1,.36,1).
• Footer: eine leise Reihe von sekundären Links (kostenloser Guide, Buchung, Über uns, Datenschutz, AGB).
• JSON-LD: Organization, Person, WebSite, plus ein WebPage mit hasPart für jeden Pfad.

Auf dem Referenz-Build gemessen: Auswahl, Wortmarke und Frage innerhalb von 0,02px zentriert; Stapel vertikal bei 0,000px zentriert; Router-Test-Suite 39/39.

Schritt 3. ICP-spezifischer Pfad: Direkt zum Wert

Jede ICP-Seite folgt derselben Struktur: Überschrift, Video, eine Aktion.

1. Eyebrow: Für wen es ist, in einfachen Worten. „Für Geschäftsinhaber“.
2. H1: das Ergebnis. 12 Wörter oder weniger.
3. Lede: ein Satz. Wie du es lieferst.
4. VSL: groß und zentriert (Schritt 3a).
5. Ein CTA direkt unter dem Video, von Anfang an sichtbar, kein verzögerter Reveal. Kleingedrucktes darunter nimmt die Angst: „Kostenlos. 30 Minuten. Kein Pitch-Deck.“
6. Beleg direkt unter dem Hero: nur ehrlich („Was wir ausgeliefert haben“).
7. Dann nur das, was Einwände beantwortet, in dieser Reihenfolge: Probleme (in ihren Worten), was du findest oder tust, wie es funktioniert (3 Schritte), Angebotsleiter, FAQ (mit einer direkten Kostenantwort) und ein randloser Abschluss-CTA, der die eine Aktion wiederholt.

Referenz-Reihenfolgen:

• /business: Hero VSL, Was wir ausgeliefert haben, Probleme (4), Was der Audit findet (6, nummeriert), Wie es funktioniert (Walkthrough, Diagnostic, Build), Leiter, FAQ, Abschluss-CTA (alternativer Textlink zum kostenlosen Site-Check).
• /builders: Hero VSL, #book (Inline-Kalender, „Wähl eine Zeit.“), Für wen es ist, Über den Gründer, FAQ.

Regeln:

• Kein Buchungs-Button im Header. Der Header ist nur das Wortmarke (plus Über uns/FAQ-Textlinks, wo nötig). Warum: Ein zweiter CTA oben konkurriert mit dem Video.
• Schwebende Pill, die den einen CTA der Seite widerspiegelt. Sie erscheint erst, wenn der Hero-CTA aus dem Bild scrollt, und verschwindet über dem Kalender, Formularen, dem Abschluss-CTA und dem Footer ([data-fc-hide]). Sie sitzt unten zentriert bei 20px + Safe Area. Bei reduzierter Bewegung: nur Einblendung.
• Nischenseiten (/for/<slug>) sind eine JSON-Datei, die über ein Standard-JSON gelegt wird, sodass eine Nische nur auflistet, was sich ändert.
• Buche an Ort und Stelle, wo du kannst. Der CTA scrollt zu einem Inline-Kalender, nicht zu einer anderen Seite, sodass der Besucher die Seite nie verlassen muss, um zu buchen. UNVERIFIED als gemessener Lift auf unserem eigenen Traffic.

3a. VSL-Layout und Player-Regeln (live auf olaceo.com /business und /builders)

Layout (Code in reference/tokens.css, „zentrierter VSL-Hero“):

• Eyebrow Tracking .08em, margin-bottom 14px.
• H1: clamp(40px,3.3vw,56px)/1.05, max-width 880px.
• Lede: clamp(17px,1.35vw,19px), max-width 720px, 12px unter der H1.
• Video: width:min(880px,92vw,calc((100svh - 330px)*16/9)), 22px unter dem Lede, Radius 16px, Schatten 0 24px 60px -28px rgba(10,30,50,.35). Der Höhenterm hält den CTA auf kurzen Laptops über dem Fold.
• CTA: min-width 320px, Höhe 56px.
• Gemessen: Bei 1440x900 ist das Video 880x495 und der Button sitzt bei y 744-800 (innerhalb des Folds). Bei 1280x720 ist das Video 693x390. Bei 390x844 ist das 4:5-Video 358x448 und der Button sitzt bei y 712-768.
• Mobil: H1 32px/1.08, Lede 15px. Die 4:5-Datei wird nur auf einem hochkant gehaltenen Telefon verwendet (max-width:699px) and (orientation:portrait). Bei Drehung tauscht es die Dateien in derselben Sekunde. Immer object-fit:contain, sodass Wörter nie beschnitten werden.

Player (Code-Auszug in reference/motion.js Teil C):

• Vor dem ersten Tipp: eine stummgeschaltete Vorschauschleife mit einem 18px-Unschärfefilter und 1,1 Skalierung (12px und 1,13 auf Mobil), eine statische Überschrift über einem 112px-Play-Button (92px Innenkreis; 100/80 auf Mobil) und „Wiedergabe mit Ton“ darunter. Der erste Tipp entfernt die Unschärfe über .42s, startet bei 0:00 mit Ton neu, und die Unschärfe kehrt nie zurück.
• Kein Vorwärtsspulen: maxW wächst nur durch natürliche Wiedergabe (jeder Schritt unter 1,5s). Jedes Vorwärtsspulen über maxW + 0,3s hinaus springt zurück. Die Wiedergabegeschwindigkeit ist auf 1 festgelegt. Kein PiP, keine Remote-Playback, kein Download und kein nativer Vollbildmodus; iOS bleibt inline. Zurückspulen und Pause sind immer erlaubt. Tasten: Space/K schaltet um, J -10s, Links -5s, Home; Rechts nur innerhalb des bereits gesehenen Teils.
• Bedienelemente: Die Leiste blendet sich 2s nach Wiedergabestart aus. Buttons 44px (48 auf Mobil). Spur 4px (6px bei Hover), Daumen 14px.
• Endbildschirm: der CTA (fokussiert) plus „Erneut ansehen“.
• Events: VideoPreview, VideoSoundOn, VideoView25/50/75/100, VideoReplay.
• Qualität: 4K wird nur auf großen, hochauflösenden Bildschirmen ausgeliefert, wenn mediaCapabilities eine flüssige Dekodierung meldet. Wenn 4K fehlschlägt, fällt es in derselben Sekunde auf 1080p zurück, wobei der Ton erhalten bleibt. (Bekanntes Bug-Muster: ein Fallback, der stumm schaltet. Fix: nur bei NotAllowedError stummschalten.)
• Play-Button-Zentrierung: der Halo, der Kreis und das SVG teilen sich eine Grid-Zelle (inset 0, margin auto, keine Transforms), und der Flächenschwerpunkt des Dreiecks sitzt +0,5px rechts. Bei DSF 3 mit 0,000px Abweichung von der Mitte gemessen.
• Warum kein Überspringen: Der CTA sollte jemanden treffen, der das gesamte Argument gehört hat. Warum die Unschärfe: Sie sagt „das ist ein Video, tippe darauf“, ohne Ton automatisch abzuspielen.
• Ziel: VSL 5 Minuten oder kürzer. Playrate- und Engagement-Ziele von 50 % oder mehr stammen aus der Haynes-VSL-Methode. UNVERIFIED: Wir haben noch keine gemessene Playrate.

3b. Formulare und Reibung

• Ein Bildschirm, höchstens 3 Felder (Referenz: Vorname, E-Mail, Geschäfts-Website oder -Name). Keine Schritte, kein Fortschrittsbalken. Die Qualifikation erfolgt im Anruf und im CRM.
• Jedes Feld erhält das richtige autocomplete, inputmode, autocapitalize, spellcheck=false wo nötig und enterkeyhint (next, next, go). Enter wechselt zum nächsten Feld.
• Honeypot, Same-Origin-Check, Größenbegrenzung und Rate-Limiting auf dem Server. Funktioniert ohne JS (echter action + method="post").
• Der Button sagt, was passiert: „Buche meinen Walkthrough“. Kleingedrucktes darunter: „Wir verwenden dies nur, um deinen Walkthrough einzurichten. Keine Liste, kein Spam.“
• Telefon nur, wenn es optional ist und nach der Verpflichtung gefragt wird, mit einem separaten, nicht aktivierten SMS-Einwilligungsfeld, dessen Wortlaut der Build prüft.
• Historie (warum): Ein 8-Bildschirm-Tipp-Quiz wurde zuerst gebaut und dann entfernt („keine acht Tipps, unter zwei Minuten“). Baue keine mehrstufigen Quizze.

3c. Copy-Regeln (wo möglich durchgesetzt)

• Markenname klein geschrieben („olaceo“) überall, sogar innerhalb von Großbuchstaben-Eyebrows (<span class="lc">). Für einen Kunden verwende die eigene Schreibregel der Marke.
• Keine Em-Dashes. Der Build schlägt bei U+2014 im Nischen-Copy fehl.
• Keine Preise auf dem Business-Funnel, solange BIZ_SHOW_PRICES false ist. Der Build schlägt bei $<digit> im gerenderten HTML fehl.
• Keine erfundenen Statistiken, %-Behauptungen, Logos, Testimonials oder Namen unveröffentlichter Produkte im Nischen-Copy. Der Build schlägt bei diesen fehl (bannedProof).
• Wert zuerst: das Ergebnis in der H1, der Mechanismus im Lede, der Angst-Nehmer unter dem CTA.
• Einfache Worte, kurze Sätze, Kontraktionen, zweite Person. Auf den olaceo-Builder-Seiten wird die Stimme des Gründers verwendet („Fam, ...“), niemals „Bro“ (der Build schlägt bei diesem Wort in E-Mails fehl).
• Verdeckte Selektivität: nur Spezifisches, niemals „handverlesen“, „ausgewählt“ oder „exklusiv“.
• Niemals „gehackte“ Behauptungen: „könnte“, niemals „ist“.
• Ein Einkommens-Haftungsausschluss auf Coaching- oder Einkommensseiten.

Schritt 4. Tokens: Type, Abstände, Grid, Farbe, Design

Kopiere reference/tokens.css. Behalte jeden Nicht-Farbwert. Tausche die Farben gegen die des Kunden aus.

Typografie (warum: Eine variable Schriftart hält es ruhig und spart einen Request; helle große Überschriften wirken hochwertig):

• Eine Familie, selbst gehostete woff2 variable 300-700, font-display:swap, vorgeladen. Fallback: system-ui, -apple-system, "Segoe UI", sans-serif.
• Body: 400, 1.0625rem/1.6. Klein: .9375rem.
• H1: weight 300, clamp(2.625rem,5.4vw,5rem), line-height 1.04, tracking -.03em.
• H2: weight 400, clamp(2rem,3.4vw,3.125rem), 1.1, -.025em.
• H3: 1.25rem, 600, 1.3, -.01em.
• text-wrap:balance auf Überschriften.
• Zeilenlängen: Lede 34ch, Body 60ch, Kopfzeilen-Absatz 38ch.

Abstände und Grid (warum: Großer fester Rhythmus = Ruhe; clamp() behält ein System von 320 bis 2560 bei):

• Seitenabstand --m clamp(20px,4vw,64px).
• Abschnittsabstand --gap clamp(96px,11vw,168px).
• Container 1360px max.
• 12 Spalten, Abstand clamp(16px,2vw,32px).
• Abschnittsüberschrift unten margin clamp(40px,4.4vw,64px).
• Breakpoints: 900, 700/699 und 560px.
• Radien: Karten 22px, klein 16px, Aktionen und Eingaben rund (999px).
• Tap-Ziele 44px oder breiter. Primäre Buttons 54px (.btn), 56px im Hero und Formular (Daumenreichweite).
• Nav 72px hoch (64px auf Mobil).

Farbe (warum: Eine Akzentfarbe bedeutet „hier handeln“; alles andere ist Tinte auf Weiß mit einer weichen Tonstufe):

• Rollen: Grund (weiß), Tonstufen (mist, mist-2), Text (ink, ink-2), Akzent (sky, hover sky-2, wash), Linie

... (gekürzt für die Übersetzung)