<div class="not-prose relative my-12 overflow-hidden rounded-3xl border border-line bg-surface-1 shadow-sm p-6 md:p-10 reveal">
<div aria-hidden="true" class="absolute inset-0 opacity-70" style="background: radial-gradient(closest-side at 50% 50%, rgba(232,149,74,0.16), transparent 70%);"></div>
<div class="relative mb-6 flex items-center justify-between">
<div>
<p class="text-xs uppercase tracking-eyebrow text-copper-400">Anfragen pro Monat</p>
<h3 class="mt-1 font-display text-lg text-default">Vom stillen Postfach zur gebuchten Woche</h3>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" class="text-copper-400/60" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="6" width="28" height="23" rx="3"/>
<line x1="2" y1="13" x2="30" y2="13"/>
<line x1="9" y1="2" x2="9" y2="10" stroke-linecap="round"/>
<line x1="23" y1="2" x2="23" y2="10" stroke-linecap="round"/>
<rect x="6" y="17" width="4" height="4" rx="1" fill="currentColor" opacity="0.25" stroke="none"/>
<rect x="14" y="17" width="4" height="4" rx="1" fill="rgba(232,149,74,0.9)" stroke="none"/>
<rect x="22" y="17" width="4" height="4" rx="1" fill="rgba(232,149,74,0.85)" stroke="none"/>
<rect x="6" y="23" width="4" height="4" rx="1" fill="rgba(232,149,74,0.7)" stroke="none"/>
<rect x="14" y="23" width="4" height="4" rx="1" fill="currentColor" opacity="0.25" stroke="none"/>
<rect x="22" y="23" width="4" height="4" rx="1" fill="rgba(232,149,74,0.8)" stroke="none"/>
</svg>
</div>
<div class="relative grid grid-cols-2 gap-4 md:gap-8">
<div>
<p class="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-muted">Vorher</p>
<div class="mb-2 grid grid-cols-5 gap-1 text-center">
<span class="text-[9px] uppercase text-muted">Mo</span>
<span class="text-[9px] uppercase text-muted">Di</span>
<span class="text-[9px] uppercase text-muted">Mi</span>
<span class="text-[9px] uppercase text-muted">Do</span>
<span class="text-[9px] uppercase text-muted">Fr</span>
</div>
<div class="space-y-1">
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/20 ring-1 ring-copper-500/25"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
</div>
<p class="mt-4 text-center font-display text-3xl text-muted">1</p>
<p class="text-center text-[10px] uppercase tracking-[0.18em] text-muted">pro Monat</p>
</div>
<div>
<p class="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Nachher</p>
<div class="mb-2 grid grid-cols-5 gap-1 text-center">
<span class="text-[9px] uppercase text-muted">Mo</span>
<span class="text-[9px] uppercase text-muted">Di</span>
<span class="text-[9px] uppercase text-muted">Mi</span>
<span class="text-[9px] uppercase text-muted">Do</span>
<span class="text-[9px] uppercase text-muted">Fr</span>
</div>
<div class="space-y-1">
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/80"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/60"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/90"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-copper-500/60"></span><span class="h-4 rounded bg-copper-500/80"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-copper-500/60"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-copper-500/90"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/80"></span>
</div>
</div>
<p class="mt-4 text-center font-display text-3xl text-gradient-copper">9</p>
<p class="text-center text-[10px] uppercase tracking-[0.18em] text-copper-400">pro Monat</p>
</div>
</div>
<div class="relative mt-8 grid grid-cols-3 gap-6 border-t border-line pt-6 text-center">
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">9×</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">Mehr Anfragen</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">Tag 11</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">Erste Klientin gebucht</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">6 Tage</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">Von Briefing bis live</p>
</div>
</div>
</div>
Die Ausgangslage
Die Beraterin hatte vor zwei Jahren in eine professionelle Squarespace-Site investiert. Die sah gut aus. Der Traffic war solide — etwa 800 Sessions pro Monat aus Instagram und einer kleinen E-Mail-Liste. Aber das Kontaktformular lieferte eine Anfrage pro Monat, wenn überhaupt — davon die Hälfte Spam.
Die Ausgangszahlen:
- 800 Sessions / Monat — die Zielgruppe war da. Sie gingen einfach wieder.
- 1 Anfrage / Monat — 0,1% Conversion auf einer Seite, deren einzige Aufgabe Anfragen ist.
- Keine Buchungsseite. Interessierte Besucherinnen landeten auf einem Kontaktformular und warteten.
- Das Angebot drei Scrolls weiter unten, formuliert für Kolleginnen, die die Methodik schon kennen — nicht für die Klientin, die sich noch fragt, ob ein Klick lohnt.
„Ich weiß, dass etwas nicht stimmt," sagte sie im ersten Gespräch. „Die Site sieht gut aus. Aber sie funktioniert nicht."
Die Diagnose kam schnell: Die Site war gebaut, um zu beeindrucken, nicht um zu konvertieren. Jeder Abschnitt beschrieb die Beraterin. Keiner nannte das Problem der Klientin.
Unser Wochenplan
<div class="not-prose relative my-12">
<div aria-hidden="true" class="pointer-events-none absolute left-6 right-6 top-[3.5rem] hidden h-px bg-gradient-to-r from-transparent via-copper-500/30 to-transparent md:block"></div>
<div class="relative grid gap-5 md:grid-cols-3">
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 0ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">01</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 01</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Tag 1–2</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Strategie & Copy</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">Einziges Angebot definiert, vollständige Seitentexte auf Deutsch und Englisch geschrieben, Lead-Magnet-PDF erstellt — in zwei Arbeitstagen.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 120ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">02</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 02</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Tag 3–4</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Build</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">Neue Astro-Site von Grund auf gebaut — kein Template. Cal.com-Buchungseinbindung konfiguriert. Lead-Magnet-Formular mit der eigenen Subscriber-Liste verknüpft.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 240ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">03</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 03</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Tag 5–6</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Launch & Funnel</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">DNS-Umstellung, Plausible-Analytics live, zwei Copy-Anpassungen auf Basis der ersten Scroll-Daten, Übergabe-Leitfaden ausgehändigt.</p>
</article>
</div>
</div>
Wie wir gebaut haben
Tag 1–2 — Ein Angebot, klar formuliert
Bevor ein Design-Tool geöffnet wurde, stand eine Frage: Warum kommt eine Klientin zu ihr — und was ist in ihrem Leben sechs Monate später anders?
Die Antwort wurde zur Headline. Keine Methodik. Kein Zertifikat. Ein Satz, den die richtige Person liest und denkt: „Das bin ich."
Den vollständigen Seitentext — Hero, Pain-Abschnitt, Angebot, Social Proof, FAQ — haben wir zuerst auf Deutsch geschrieben, dann auf Englisch. Der Lead-Magnet entstand in derselben Session: zehn Fragen, die die Beraterin sowieso in jedem Erstgespräch stellt, neu verpackt als Selbsttest-PDF, den eine Besucherin allein ausfüllen kann.
Eine Seite. Ein Angebot. Ein nächster Schritt.
Tag 3–4 — Eine Site, die der Beraterin gehört
Die neue Site ist mit Astro gebaut — statisch, sub-second-schnell ohne CDN-Overhead, keine Datenbank, kein Wartungsaufwand. Die Texte aus Tag eins gingen direkt hinein. Cal.com übernimmt die Buchungen: ein Kennenlern-Termin-Typ, eine 50-Minuten-Session, kalender-synchronisiert, ohne monatliche Gebühr.
Der Lead-Magnet-Bereich ist ein einziger Inline-Abschnitt — Name, E-Mail, ein Klick, PDF im Postfach. Kein externer Form-Builder, kein Cookie-Banner. Die Beraterin hat ihre Subscriber-Liste als einfache CSV, die sie mitnehmen kann, wohin sie will.
Alles liegt in einem GitHub-Repository, das der Beraterin von Tag eins gehört. Kein Plattform-Abo. Keine „Dein Theme braucht ein Update"-Mail in drei Monaten.
Tag 5–6 — Launch und beobachten
DNS-Umstellung an Tag fünf. Plausible-Analytics gleichzeitig live — Seitenaufrufe, Traffic-Quellen und Conversion-Events auf einen Blick, vollständig DSGVO-konform ohne Cookie-Hinweis.
Die Buchungs- und Lead-Magnet-Flows haben wir die ersten 48 Stunden beobachtet und zwei kleine Textanpassungen auf Basis von Scroll-Daten vorgenommen. An Tag sechs haben wir einen einseitigen Pflege-Leitfaden übergeben. Die Frühjahrs-Intake öffnete pünktlich.
Was wir gebaut haben
Ein lesbarer Stack, den die Beraterin selbst versteht — und den jede Entwicklerin in fünf Minuten übernehmen kann.
- Site: Astro, deployed auf Cloudflare Pages — Lighthouse 100 auf Mobil und Desktop ab der ersten Version.
- Buchungen: Cal.com-Embed — Kennenlern- und Session-Termine, kalender-synchronisiert, keine monatlichen Kosten.
- Lead-Magnet: Inline-Formular → PDF-Lieferung → Subscriber-Liste gehört der Beraterin direkt.
- Analytics: Plausible — Traffic und Conversions auf einen Blick, kein Cookie-Banner notwendig.
- Texte: Deutsch primär, Englisch sekundär, in einem gemeinsamen Pass geschrieben und abgestimmt.
Kein CMS-Abo. Keine Plugin-Gebühren. Kein Lock-in. Das gesamte Projekt steckt in einem Ordner, den sie mitnehmen kann.
Die Ergebnisse
Gemessen über die 60 Tage nach Launch, gleiche Traffic-Quellen, gleiche Instagram-Kadenz:
- Anfragen von 1 auf 9 pro Monat — acht der neun kamen direkt über die Buchungsseite oder das Lead-Magnet-Formular, nicht mehr über das allgemeine Kontaktformular.
- Erste Klientin an Tag 11 gebucht — diese eine Buchung hat das gesamte Projekthonorar gedeckt.
- Lead-Magnet: 23 Downloads im ersten Monat, sechs davon wurden zu einem Kennenlern-Gespräch.
- Lighthouse Performance: 100 auf Mobil und Desktop.
- Live in 6 Tagen — der Frühjahrs-Intake öffnete pünktlich.
Die Beraterin brachte es auf den Punkt: „Zwei Jahre dachte ich, das Problem sei mein Instagram. Es war nie Instagram."
Wie es weitergeht
Eine zweite Service-Seite für das neue Gruppen-Programm ist in Arbeit — auf derselben Komponenten-Bibliothek. Diese Seite dauert einen Tag, keine Woche. Das ist der Compounding-Effekt einer sauberen Codebase gegenüber einem gemieteten Theme.
Wenn deine Website schön aussieht, aber dein Kontaktformular vor allem Stille sammelt — das Problem liegt fast immer vor dem Design. Reden wir. Wir lesen deine Site ehrlich durch, sagen dir, was nicht landet, und haben die neue Version live, bevor dein nächster Intake öffnet.