diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8c6c83..27334aa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,524 +1,534 @@
+/* ─────────────────────────────────────────────────────
+   GSO Gruppencoaching — Verkaufsseite
+   Brunson Online Masterclass Funnel Template
+   CI: Market Compass  ·  Blau #3B82F6  ·  Lila #8B5CF6
+───────────────────────────────────────────────────── */
+
 const CTA_HREF = "#platz-sichern";
 
-function GradientButton({
-  href = CTA_HREF,
-  children,
-  large = false,
-}: {
-  href?: string;
-  children: React.ReactNode;
-  large?: boolean;
-}) {
+/* ── Shared atoms ── */
+
+function Btn({ href = CTA_HREF, children, xl = false }: { href?: string; children: React.ReactNode; xl?: boolean }) {
   return (
     <a
       href={href}
-      className={`inline-block font-bold rounded-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-400 hover:to-purple-500 text-white transition-all shadow-lg hover:shadow-blue-500/25 ${large ? "text-xl px-10 py-5" : "text-base px-7 py-3"}`}
+      className={`inline-block font-extrabold rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-400 hover:to-purple-500 text-white transition-all shadow-xl uppercase tracking-wide ${xl ? "text-xl md:text-2xl px-12 py-5" : "text-sm px-7 py-3"}`}
     >
       {children}
     </a>
   );
 }
 
-function SectionLabel({ children }: { children: React.ReactNode }) {
+function Badge({ children }: { children: React.ReactNode }) {
   return (
-    <span className="inline-block text-xs font-bold uppercase tracking-widest text-blue-400 bg-blue-900/30 border border-blue-800 rounded-full px-4 py-1 mb-4">
+    <span className="inline-block text-xs font-bold uppercase tracking-widest bg-blue-600 text-white rounded px-3 py-1 mb-3">
       {children}
     </span>
   );
 }
 
-function CheckItem({ children }: { children: React.ReactNode }) {
+/* ── Icon tile (used in "Why you'll love" and "Nach 8 Wochen") ── */
+function IconTile({ icon, title, text }: { icon: string; title: string; text?: string }) {
   return (
-    <li className="flex items-start gap-3">
-      <span className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs">
-        ✓
-      </span>
-      <span className="text-slate-300">{children}</span>
-    </li>
-  );
-}
-
-function WeekCard({
-  week,
-  title,
-  expert,
-  body,
-  vorlagen,
-  result,
-}: {
-  week: string;
-  title: string;
-  expert?: string;
-  body: string;
-  vorlagen: string;
-  result: string;
-}) {
-  return (
-    <div className="rounded-2xl border border-slate-700 bg-slate-800/50 p-6 space-y-3">
-      <div className="flex items-center gap-3">
-        <span className="text-xs font-bold uppercase tracking-wider text-blue-400 bg-blue-900/30 border border-blue-800 rounded-full px-3 py-1">
-          {week}
-        </span>
-        {expert && (
-          <span className="text-xs text-purple-400 italic">{expert}</span>
-        )}
+    <div className="flex flex-col items-center text-center gap-3 p-6 rounded-xl bg-slate-800 border border-slate-700">
+      <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-2xl flex-shrink-0">
+        {icon}
       </div>
-      <h4 className="text-lg font-bold text-white">{title}</h4>
-      <p className="text-slate-300 text-sm leading-relaxed">{body}</p>
-      <p className="text-xs text-slate-400 italic border-t border-slate-700 pt-3">
-        {vorlagen}
-      </p>
-      <p className="text-sm font-semibold text-blue-300 border-t border-slate-700 pt-3">
-        ✓ {result}
-      </p>
+      <p className="font-bold text-white text-sm leading-snug">{title}</p>
+      {text && <p className="text-slate-400 text-xs leading-relaxed">{text}</p>}
     </div>
   );
 }
 
+/* ── Module thumbnail card ── */
+function ModuleCard({
+  week, expert, title, body, vorlagen, result,
+}: {
+  week: string; expert?: string; title: string; body: string; vorlagen: string; result: string;
+}) {
+  return (
+    <div className="rounded-xl overflow-hidden border border-slate-700 bg-slate-800 flex flex-col">
+      {/* Thumbnail area */}
+      <div className="relative w-full aspect-video bg-slate-900 flex items-center justify-center border-b border-slate-700">
+        <div className="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-purple-900/30" />
+        <div className="relative flex flex-col items-center gap-2 text-slate-500">
+          <svg className="w-12 h-12 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.069A1 1 0 0121 8.869v6.262a1 1 0 01-1.447.894L15 14M4 8h11a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2z" />
+          </svg>
+          <span className="text-xs uppercase tracking-widest opacity-50">Video</span>
+        </div>
+        <span className="absolute top-3 left-3 text-xs font-bold bg-blue-600 text-white px-2 py-1 rounded uppercase tracking-wide">
+          {week}
+        </span>
+        {expert && (
+          <span className="absolute top-3 right-3 text-xs bg-purple-700 text-white px-2 py-1 rounded">
+            {expert}
+          </span>
+        )}
+      </div>
+      {/* Text */}
+      <div className="p-5 flex flex-col gap-3 flex-1">
+        <h4 className="font-bold text-white text-sm leading-snug">{title}</h4>
+        <p className="text-slate-400 text-xs leading-relaxed">{body}</p>
+        <p className="text-xs text-blue-400 italic border-t border-slate-700 pt-3">{vorlagen}</p>
+        <p className="text-xs font-semibold text-green-400 mt-auto">✓ {result}</p>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════
+   PAGE
+═══════════════════════════════════════════════════ */
 export default function Home() {
   return (
-    <main className="bg-slate-900 text-slate-100">
-      {/* NAV */}
-      <nav className="sticky top-0 z-50 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
-        <div className="max-w-5xl mx-auto px-4 py-4 flex justify-between items-center">
-          <span className="font-bold text-white">
-            <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
-              Market Compass
-            </span>
+    <main className="bg-[#0B0F1A] text-slate-100">
+
+      {/* ── NAV ── */}
+      <nav className="sticky top-0 z-50 bg-[#0B0F1A]/95 backdrop-blur border-b border-slate-800">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
+          <span className="font-extrabold text-lg bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+            Market Compass
           </span>
-          <GradientButton>Meinen Platz sichern →</GradientButton>
+          <Btn>Meinen Platz sichern →</Btn>
         </div>
       </nav>
 
-      {/* ─── S1: HERO ─── */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-slate-950 to-slate-900 py-20 md:py-32">
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent" />
-        <div className="relative max-w-4xl mx-auto px-4 text-center space-y-8">
-          <SectionLabel>Pilotprogramm · Start 1. Juli 2027 · Max. 10 Plätze</SectionLabel>
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight">
+      {/* ══════════════════════════════════════════
+         S1 — HERO
+      ══════════════════════════════════════════ */}
+      <section className="relative overflow-hidden bg-[#0B0F1A] pt-20 pb-16">
+        {/* Radial glow */}
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_0%,rgba(59,130,246,0.15),transparent)]" />
+
+        <div className="relative max-w-4xl mx-auto px-4 text-center space-y-7">
+          <Badge>Online Gruppencoaching · Pilotprogramm · Start 1. Juli 2027</Badge>
+
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] tracking-tight">
             In 8 Wochen zu deinem eigenen{" "}
             <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
               Kundengewinnungs-System
-            </span>{" "}
-            — speziell für Selbstständige
+            </span>
           </h1>
-          <p className="text-xl md:text-2xl text-slate-300 max-w-2xl mx-auto">
+
+          <p className="text-lg md:text-xl text-blue-300 font-semibold max-w-2xl mx-auto">
+            Speziell für Selbstständige — mit Katja Pestereva von Market Compass<br />
+            + 4 Experten aus Vertrieb, Social Media &amp; Video
+          </p>
+
+          <p className="text-slate-300 text-base max-w-xl mx-auto">
             Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
           </p>
-          <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
-            <GradientButton large>Meinen Platz sichern →</GradientButton>
+
+          <div className="flex flex-col items-center gap-3">
+            <Btn xl>Meinen Platz sichern →</Btn>
+            <p className="text-sm text-slate-400">
+              Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.<br />
+              Du entscheidest nach unserem ersten Gespräch.
+            </p>
           </div>
-          <p className="text-sm text-slate-400">
-            Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.
-            <br />
-            Start: 1. Juli 2027. Du entscheidest nach unserem ersten Gespräch.
-          </p>
-          {/* Authority Frame */}
-          <div className="inline-flex flex-col sm:flex-row items-center gap-4 bg-slate-800/60 border border-slate-700 rounded-xl px-6 py-4 text-sm text-slate-300">
-            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
+
+          {/* Authority bar */}
+          <div className="inline-flex items-center gap-3 bg-slate-800/80 border border-blue-800/50 rounded-lg px-5 py-3 text-sm">
+            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center font-bold text-white flex-shrink-0">
               KP
             </div>
-            <div className="text-center sm:text-left">
+            <div className="text-left">
               <p className="font-semibold text-white">Katja Pestereva von Market Compass</p>
-              <p className="text-slate-400">15+ Jahre Erfahrung · + 4 Experten aus Vertrieb, Social Media &amp; Video</p>
+              <p className="text-slate-400 text-xs">15+ Jahre Erfahrung · 4 Experten aus Vertrieb, Social Media &amp; Video</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* ─── S2: FORMAT & RAHMEN ─── */}
-      <section className="py-16 bg-slate-800/40">
-        <div className="max-w-5xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-center text-white mb-12">
-            Was dich erwartet
-          </h2>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
-            {[
-              { num: "8", label: "Wochen — Schritt für Schritt aufgebaut" },
-              { num: "5", label: "Experten an deiner Seite" },
-              { num: "10", label: "Plätze — exklusive Kleingruppe" },
-              { num: "25+", label: "Praxis-Vorlagen die du sofort einsetzt" },
-            ].map(({ num, label }) => (
-              <div
-                key={num}
-                className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-center"
-              >
-                <p className="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
-                  {num}
-                </p>
-                <p className="mt-2 text-sm text-slate-400">{label}</p>
+      {/* ══════════════════════════════════════════
+         VIDEO PLACEHOLDER
+      ══════════════════════════════════════════ */}
+      <section className="py-10 bg-[#0B0F1A]">
+        <div className="max-w-3xl mx-auto px-4">
+          <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-slate-900 border-2 border-blue-800/50 shadow-2xl shadow-blue-900/30">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20" />
+            {/* Silhouette */}
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
+              <div className="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center">
+                <svg className="w-14 h-14 text-slate-500" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
+                </svg>
               </div>
-            ))}
-          </div>
-          <div className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-slate-300 text-sm leading-relaxed space-y-1">
-            <p>
-              <strong className="text-white">Start:</strong> 1. Juli 2027
-            </p>
-            <p>
-              <strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) — Du bist nicht allein: tägliche Begleitung
-              in der Messenger-Community, Fragen stellen wann du willst — Alle Aufzeichnungen bleiben
-              abrufbar solange du im Marketing Klub dabei bist.
-            </p>
+              {/* Play button */}
+              <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center cursor-pointer hover:scale-110 transition-transform shadow-lg">
+                <svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </div>
+              <p className="text-slate-400 text-sm font-medium">Video: Katja erklärt das Programm</p>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* ─── S3: WAS IST DAS GENAU? ─── */}
+      {/* ══════════════════════════════════════════
+         S2 — WHY YOU'LL LOVE THIS
+         4 Icon-Kacheln: Format & Rahmen
+      ══════════════════════════════════════════ */}
+      <section className="py-16 bg-slate-900/60">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <Badge>Das Programm</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was dich erwartet</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
+            <IconTile icon="📅" title="8 Wochen" text="Schritt für Schritt aufgebaut" />
+            <IconTile icon="🎓" title="5 Experten" text="An deiner Seite" />
+            <IconTile icon="👥" title="10 Plätze" text="Exklusive Kleingruppe" />
+            <IconTile icon="📋" title="25+ Vorlagen" text="Sofort einsetzbar" />
+          </div>
+          <div className="mt-8 rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-800/40 p-5 text-sm text-slate-300 text-center">
+            <strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar
+          </div>
+        </div>
+      </section>
+
+      {/* ══════════════════════════════════════════
+         S3 — DAS IST KEIN KURS
+      ══════════════════════════════════════════ */}
       <section className="py-16">
-        <div className="max-w-3xl mx-auto px-4 space-y-6">
-          <h2 className="text-2xl md:text-3xl font-bold text-white">
-            Das ist kein weiterer Kurs.
-          </h2>
+        <div className="max-w-3xl mx-auto px-4 space-y-5">
+          <Badge>Kein Kurs. Ein System.</Badge>
+          <h2 className="text-2xl md:text-3xl font-extrabold text-white">Das ist kein weiterer Kurs.</h2>
           <p className="text-slate-300 leading-relaxed">
-            Die meisten Programme erklären dir entweder Marketing, Vertrieb oder Social Media — getrennt
-            voneinander. Du gehst mit Wissen nach Hause. Und weißt immer noch nicht, wie das alles
-            zusammenhängt.
+            Die meisten Programme erklären dir entweder Marketing, Vertrieb oder Social Media — getrennt voneinander. Du gehst mit Wissen nach Hause. Und weißt immer noch nicht, wie das alles zusammenhängt.
           </p>
           <p className="text-slate-300 leading-relaxed">
-            Das{" "}
-            <strong className="text-white">8-Wochen Kundengewinnungs-System</strong> macht genau das:
-            Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird.
-            Mit Katja Pestereva von Market Compass und Experten aus Vertrieb, Social Media und Video.
+            Das <strong className="text-white">8-Wochen Kundengewinnungs-System</strong> macht genau das: Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird. Mit Katja Pestereva von Market Compass und Experten aus Vertrieb, Social Media und Video.
           </p>
-          <p className="text-slate-300 leading-relaxed">
-            Du baust kein neues Wissen auf. Du nimmst alles was du hast — und bringst es in eine
-            Struktur, die planbar die richtigen Kunden anzieht.
-          </p>
-          <p className="text-sm text-slate-500 italic">
-            Pilotprogramm: 1. Juli 2027 · Exklusive Kleingruppe · Live via Video + tägliche Begleitung
-            im Messenger
+          <p className="text-blue-300 font-semibold">
+            Du baust kein neues Wissen auf. Du nimmst alles was du hast — und bringst es in eine Struktur, die planbar die richtigen Kunden anzieht.
           </p>
         </div>
       </section>
 
-      {/* ─── S3b: ERGEBNISSE NACH 8 WOCHEN ─── */}
-      <section className="py-16 bg-slate-800/40">
-        <div className="max-w-4xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-8">
-            Nach 8 Wochen nimmst du mit:
-          </h2>
-          <ul className="space-y-3">
-            {[
-              "Klare Wunschkunden-Persona + vollständiger Marketing-Audit",
-              "Dein Angebot klar auf den Punkt — und deine Positionierung in einem Satz",
-              "Die vollständige Struktur deiner Verkaufsseite — fertig zum Umsetzen",
-              "90-Tage-Marketingplan + Entscheidung für 2 fokussierte Kanäle",
-              "Content-Plan für 4 Wochen — du weißt was, wann und warum du postest",
-              "Plan wie du dein Angebot aktiv über Social Media verkaufst + professionelles Video-Setup",
-              "Dein persönliches Verkaufsskript für die Direktansprache",
-              "Google Business Profil optimiert + SEO-Grundlagen für deine Website",
-            ].map((item, i) => (
-              <li
-                key={i}
-                className="flex items-start gap-4 rounded-xl bg-slate-800 border border-slate-700 p-4"
-              >
-                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs font-bold">
-                  {i + 1}
-                </span>
-                <span className="text-slate-300">{item}</span>
-              </li>
-            ))}
-          </ul>
+      {/* ══════════════════════════════════════════
+         S3b — NACH 8 WOCHEN NIMMST DU MIT
+         Icon-Kacheln 2×4
+      ══════════════════════════════════════════ */}
+      <section className="py-16 bg-slate-900/60">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <Badge>Deine Ergebnisse</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Nach 8 Wochen nimmst du mit:</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
+            <IconTile icon="🎯" title="Klare Wunschkunden-Persona" text="+ vollständiger Marketing-Audit" />
+            <IconTile icon="💡" title="Dein Angebot auf den Punkt" text="Positionierung in einem Satz" />
+            <IconTile icon="📄" title="Deine Verkaufsseite" text="Vollständige Struktur — fertig zum Umsetzen" />
+            <IconTile icon="🗓️" title="90-Tage-Marketingplan" text="+ 2 fokussierte Kanäle entschieden" />
+            <IconTile icon="📲" title="Content-Plan für 4 Wochen" text="Was, wann und warum du postest" />
+            <IconTile icon="🎬" title="Social Media Verkaufsstrategie" text="+ professionelles Video-Setup" />
+            <IconTile icon="🤝" title="Dein Verkaufsskript" text="Für Direktansprache und Netzwerk" />
+            <IconTile icon="🔍" title="Google Business optimiert" text="+ SEO-Grundlagen für deine Website" />
+          </div>
         </div>
       </section>
 
-      {/* ─── S4: INHALTS-GRID ─── */}
+      {/* ══════════════════════════════════════════
+         S4 — WAS DU IN 8 WOCHEN BAUST (Grid)
+      ══════════════════════════════════════════ */}
       <section className="py-16">
         <div className="max-w-5xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-10 text-center">
-            Was du in 8 Wochen baust — und mit nach Hause nimmst
-          </h2>
+          <div className="text-center mb-10">
+            <Badge>Komplettpaket</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2>
+          </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[
-              "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat",
-              "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst",
-              "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar",
-              "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung",
-              "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen",
-              "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst",
-              "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — für alle Plattformen",
-              "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst",
-              "Video-Setup erklärt — professionelle Videos mit dem Handy",
-              "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk",
-              "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website",
-            ].map((item, i) => (
-              <div
-                key={i}
-                className="rounded-xl bg-slate-800 border border-slate-700 p-4 flex items-start gap-3"
-              >
-                <span className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs">
-                  ✓
-                </span>
-                <p className="text-slate-300 text-sm">{item}</p>
+              { icon: "🎯", text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" },
+              { icon: "💡", text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" },
+              { icon: "📌", text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" },
+              { icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" },
+              { icon: "🗺️", text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" },
+              { icon: "🗓️", text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" },
+              { icon: "📲", text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst" },
+              { icon: "🚀", text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" },
+              { icon: "🎬", text: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
+              { icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
+              { icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
+            ].map(({ icon, text }, i) => (
+              <div key={i} className="flex items-start gap-3 rounded-xl bg-slate-800 border border-slate-700 p-4">
+                <span className="text-xl flex-shrink-0 mt-0.5">{icon}</span>
+                <p className="text-slate-300 text-sm leading-relaxed">{text}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── S5: COACH-VORSTELLUNG ─── */}
-      <section className="py-16 bg-slate-800/40">
-        <div className="max-w-4xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-10 text-center">
-            Deine Begleitung
-          </h2>
-          <div className="rounded-2xl bg-slate-800 border border-slate-700 p-8 space-y-6">
-            <div className="flex flex-col sm:flex-row gap-6 items-start">
-              <div className="w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">
-                KP
+      {/* ══════════════════════════════════════════
+         MEET THE COACH
+         Brunson-Style: Großes Foto + Bio
+      ══════════════════════════════════════════ */}
+      <section className="py-20 bg-slate-900/60">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <Badge>Deine Begleitung</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Meet your Coach</h2>
+          </div>
+          <div className="grid md:grid-cols-2 gap-10 items-center">
+            {/* Foto-Placeholder */}
+            <div className="relative rounded-2xl overflow-hidden aspect-[4/5] bg-slate-900 border-2 border-blue-700/50 shadow-2xl shadow-blue-900/30">
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/30" />
+              <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-slate-500">
+                <svg className="w-28 h-28 opacity-30" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
+                </svg>
+                <p className="text-xs uppercase tracking-widest opacity-40">Foto Katja Pestereva</p>
               </div>
-              <div className="space-y-3">
-                <h3 className="text-xl font-bold text-white">Katja Pestereva von Market Compass</h3>
-                <p className="text-slate-300 leading-relaxed">
-                  Ich baue aus dem was Selbstständige bereits haben — ihrem Wissen, ihren Fähigkeiten,
-                  ihrer Erfahrung — ein System das planbar die richtigen Kunden bringt.
-                </p>
-                <p className="text-slate-300 leading-relaxed">
-                  Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine
-                  Struktur bringen die funktioniert.
-                </p>
-                <p className="text-slate-300 leading-relaxed">
-                  Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die
-                  Selbstständige am meisten brauchen: Vertrieb, Social Media und Video. Damit du nicht
-                  nur weißt was zu tun ist — sondern wie es in deinem Business konkret aussieht.
-                </p>
+              {/* Name badge */}
+              <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-6">
+                <p className="font-extrabold text-white text-xl">Katja Pestereva</p>
+                <p className="text-blue-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p>
               </div>
             </div>
-            <div className="border-t border-slate-700 pt-6">
-              <h4 className="font-bold text-white mb-4">Dein Expertenteam:</h4>
-              <ul className="space-y-3">
+            {/* Bio */}
+            <div className="space-y-5">
+              <h3 className="text-xl font-extrabold text-white leading-snug">
+                Ich baue aus dem was du hast — ein System das planbar die richtigen Kunden bringt.
+              </h3>
+              <p className="text-slate-300 leading-relaxed">
+                Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine Struktur bringen die funktioniert.
+              </p>
+              <p className="text-slate-300 leading-relaxed">
+                Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video.
+              </p>
+              <div className="border-t border-slate-700 pt-5 space-y-3">
+                <p className="text-sm font-bold text-white uppercase tracking-wide">Dein Expertenteam:</p>
                 {[
-                  { name: "Katja Pestereva", role: "Marketing-System, Positionierung, Angebot, Kanal-Strategie, SEO", weeks: "Wochen 1, 2, 3, 4, 8" },
+                  { name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wochen 1, 2, 3, 4, 8" },
                   { name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
-                  { name: "Stefan & Philipp von Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" },
+                  { name: "Stefan & Philipp · Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" },
                   { name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
                 ].map(({ name, role, weeks }) => (
-                  <li key={name} className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">
-                    <span className="font-semibold text-blue-300 flex-shrink-0">{name}</span>
-                    <span className="text-slate-400 text-sm">— {role}</span>
-                    <span className="text-xs text-slate-500 sm:ml-auto flex-shrink-0">({weeks})</span>
-                  </li>
+                  <div key={name} className="flex items-start gap-3">
+                    <div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0 mt-1.5" />
+                    <div>
+                      <span className="font-semibold text-blue-300 text-sm">{name}</span>
+                      <span className="text-slate-400 text-sm"> — {role}</span>
+                      <span className="text-slate-500 text-xs ml-2">({weeks})</span>
+                    </div>
+                  </div>
                 ))}
-              </ul>
+              </div>
             </div>
           </div>
         </div>
       </section>
 
-      {/* ─── S6: MODUL 1 (Wochen 1–2) ─── */}
+      {/* ══════════════════════════════════════════
+         S6–S8 — MODULE (Thumbnail Cards)
+         Modul 1: Wochen 1–2
+      ══════════════════════════════════════════ */}
       <section className="py-16">
-        <div className="max-w-4xl mx-auto px-4 space-y-8">
+        <div className="max-w-5xl mx-auto px-4 space-y-14">
+
+          {/* Modul 1 */}
           <div>
-            <SectionLabel>Modul 1 — Wochen 1 &amp; 2</SectionLabel>
-            <h2 className="text-2xl md:text-3xl font-bold text-white">
-              Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.
-            </h2>
+            <div className="text-center mb-8">
+              <Badge>Modul 1 — Wochen 1 &amp; 2</Badge>
+              <h2 className="text-2xl md:text-3xl font-extrabold text-white">
+                Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.
+              </h2>
+            </div>
+            <div className="grid md:grid-cols-2 gap-6">
+              <ModuleCard
+                week="Woche 1"
+                title="Dein Wunschkunde + dein Markt"
+                body="Du schaust konkret hin: Wer ist dein Wunschkunde wirklich? Welches Problem hat er — und was hat er schon alles versucht? Was kostet ihn dieses Problem jeden Monat? Du machst einen ehrlichen Marketing-Audit: Was läuft, was nicht — und warum."
+                vorlagen="Marketing-Audit-Vorlage · Wunschkunden-Persona-Vorlage"
+                result="Klarheit über deinen Wunschkunden — und deinen Marketing-IST-Zustand schwarz auf weiß."
+              />
+              <ModuleCard
+                week="Woche 2"
+                title="Dein unwiderstehliches Angebot + deine Positionierung"
+                body="Du legst dein Angebot auf den Tisch: Was bietest du genau an? Welches Problem löst du? Dann entwickelst du deine Positionierungsformel — für wen, welches Problem, was macht dich anders. In einem Satz. Du übst ihn live in der Gruppe."
+                vorlagen="Positionierungsformel-Vorlage · Kurztext für Website, Instagram-Profil und LinkedIn"
+                result="Dein Angebot klar auf den Punkt — kannst in einem Satz erklären was du tust."
+              />
+            </div>
           </div>
-          <div className="grid md:grid-cols-2 gap-6">
-            <WeekCard
-              week="Woche 1"
-              title="Dein Wunschkunde + dein Markt"
-              body="Du schaust konkret hin: Wer ist dein Wunschkunde wirklich? Welches Problem hat er — und was hat er schon alles versucht? Was kostet ihn dieses Problem gerade jeden Monat? Du machst einen ehrlichen Marketing-Audit: Was läuft, was nicht — und warum."
-              vorlagen="Du nimmst mit: Marketing-Audit-Vorlage · Wunschkunden-Persona-Vorlage"
-              result="Klarheit über deinen Wunschkunden — konkret, nicht allgemein. Und deinen Marketing-IST-Zustand schwarz auf weiß."
-            />
-            <WeekCard
-              week="Woche 2"
-              title="Dein unwiderstehliches Angebot + deine Positionierung"
-              body="Du legst dein Angebot auf den Tisch: Was bietest du genau an? Welches Problem löst du? Welche Extras erhöhen den Wert? Dann entwickelst du deine Positionierungsformel — für wen, welches Problem, was macht dich anders. In einem Satz. Du übst ihn live in der Gruppe."
-              vorlagen="Du nimmst mit: Positionierungsformel-Vorlage · Kurztext für Website, Instagram-Profil und LinkedIn"
-              result="Dein Angebot klar auf den Punkt — und kannst in einem Satz erklären was du tust, für wen, und warum bei dir."
-            />
+
+          {/* Modul 2 */}
+          <div>
+            <div className="text-center mb-8">
+              <Badge>Modul 2 — Wochen 3 &amp; 4</Badge>
+              <h2 className="text-2xl md:text-3xl font-extrabold text-white">Dein System steht.</h2>
+            </div>
+            <div className="grid md:grid-cols-2 gap-6">
+              <ModuleCard
+                week="Woche 3"
+                title="Deine Verkaufsseite"
+                body="Du lernst wie eine Verkaufsseite aufgebaut sein muss — die 7 Pflicht-Elemente, ihre Reihenfolge, die Psychologie dahinter. Du bekommst die komplette Vorlage. Du setzt es direkt auf deiner Seite um — Katja gibt Feedback."
+                vorlagen="Verkaufsseiten-Vorlage + alle Textelemente · 7-Elemente-Checkliste"
+                result="Die vollständige Struktur für deine Verkaufsseite — fertig zum Umsetzen."
+              />
+              <ModuleCard
+                week="Woche 4"
+                title="Deine Kanal-Strategie + 90-Tage-Marketingplan"
+                body="Welche 2 Kanäle fokussierst du — auf Basis deiner Zielgruppe, nicht dem was gerade alle machen. Du baust deine Marketing-Systemkarte und startest deinen 90-Tage-Plan."
+                vorlagen="Kanal-Entscheidungsmatrix · Marketing-Systemkarte · 90-Tage-Marketingplan"
+                result="Gewusst welche 2 Kanäle du fokussierst — und deinen 90-Tage-Plan begonnen."
+              />
+            </div>
           </div>
+
+          {/* Modul 3 */}
+          <div>
+            <div className="text-center mb-8">
+              <Badge>Modul 3 — Wochen 5–8</Badge>
+              <h2 className="text-2xl md:text-3xl font-extrabold text-white">Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.</h2>
+            </div>
+            <div className="grid md:grid-cols-2 gap-6">
+              <ModuleCard
+                week="Woche 5"
+                expert="Can Turkdogan"
+                title="Dein Content-System"
+                body="Deine 3–4 Content-Themen — die zeigen wofür du stehst. Du erstellst live deinen 4-Wochen-Redaktionsplan. Schreibst deinen ersten Hook. Und weißt genau: was du postest, wann, und warum."
+                vorlagen="Content-Säulen-Template · 4-Wochen-Redaktionsplan · 10 bewährte Hook-Formeln"
+                result="Deinen Content-Plan für 4 Wochen — weißt genau was und wie du postest."
+              />
+              <ModuleCard
+                week="Woche 6"
+                expert="Stefan & Philipp · OWV"
+                title="Social Media Verkauf + Video-Setup"
+                body="Du lernst wie du dein Angebot aktiv über Social Media verkaufst — mit Strategie, nicht mit Druck. Die Video-Experten zeigen live: Professionelle Videos mit dem Handy."
+                vorlagen="Launch-Checkliste · Equipment-Checkliste · Filming-Guide"
+                result="Plan wie du dein Angebot über Social Media verkaufst + professionell auf Video erscheinst."
+              />
+              <ModuleCard
+                week="Woche 7"
+                expert="Manuela Ludewig"
+                title="Verkauf + Direktansprache"
+                body="Dein persönliches Verkaufsskript für die Direktansprache — angepasst auf deine Positionierung. Du übst es live in der Gruppe. Mit Plan für deine nächsten Kontakte."
+                vorlagen="Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
+                result="Dein Verkaufsskript für die Direktansprache — und hast es einmal geübt."
+              />
+              <ModuleCard
+                week="Woche 8"
+                expert="Katja Pestereva"
+                title="Sichtbarkeit auf Google + Abschluss"
+                body="Du optimierst dein Google Business Profil — Schritt für Schritt in der Gruppe. Du bringst deine Website auf die Grundlagen die Google belohnt. In der Abschlussrunde: Was hat sich in 8 Wochen verändert?"
+                vorlagen="SEO-Checkliste · Keyword-Recherche-Vorlage · Website-Leitfaden"
+                result="Google Business vollständig optimiert + Seite für dein Haupt-Keyword vorbereitet."
+              />
+            </div>
+          </div>
+
         </div>
       </section>
 
-      {/* ─── S7: MODUL 2 (Wochen 3–4) ─── */}
-      <section className="py-16 bg-slate-800/40">
-        <div className="max-w-4xl mx-auto px-4 space-y-8">
-          <div>
-            <SectionLabel>Modul 2 — Wochen 3 &amp; 4</SectionLabel>
-            <h2 className="text-2xl md:text-3xl font-bold text-white">Dein System steht.</h2>
-          </div>
-          <div className="grid md:grid-cols-2 gap-6">
-            <WeekCard
-              week="Woche 3"
-              title="Deine Verkaufsseite"
-              body="Du lernst wie eine Verkaufsseite aufgebaut sein muss — die 7 Pflicht-Elemente, ihre Reihenfolge, die Psychologie dahinter. Du bekommst die komplette Vorlage. Du setzt es direkt auf deiner Seite um — Katja gibt Feedback."
-              vorlagen="Du nimmst mit: Verkaufsseiten-Vorlage + alle Textelemente · 7-Elemente-Checkliste · Schritt-für-Schritt-Anleitung"
-              result="Die vollständige Struktur für deine Verkaufsseite — fertig zum Umsetzen, mit konkretem Feedback was gut ist und was nicht."
-            />
-            <WeekCard
-              week="Woche 4"
-              title="Deine Kanal-Strategie + 90-Tage-Marketingplan"
-              body="Welche 2 Kanäle fokussierst du — auf Basis deiner Zielgruppe, nicht dem was gerade alle machen. Du baust deine Marketing-Systemkarte: wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen. Und du startest deinen 90-Tage-Plan."
-              vorlagen="Du nimmst mit: Kanal-Entscheidungsmatrix · Marketing-Systemkarte · 90-Tage-Marketingplan · Weekly Marketing Sprint Vorlage"
-              result="Gewusst welche 2 Kanäle du fokussierst — und deinen 90-Tage-Marketingplan begonnen."
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* ─── S8: MODUL 3 (Wochen 5–8) ─── */}
-      <section className="py-16">
-        <div className="max-w-4xl mx-auto px-4 space-y-8">
-          <div>
-            <SectionLabel>Modul 3 — Wochen 5–8</SectionLabel>
-            <h2 className="text-2xl md:text-3xl font-bold text-white">
-              Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.
-            </h2>
-          </div>
-          <div className="grid md:grid-cols-2 gap-6">
-            <WeekCard
-              week="Woche 5"
-              expert="Can Turkdogan — Social Media"
-              title="Dein Content-System"
-              body="Deine 3–4 Content-Themen — die zeigen wofür du stehst und was du kannst, und die für alle Plattformen funktionieren. Du erstellst live deinen 4-Wochen-Redaktionsplan. Schreibst deinen ersten Hook. Und weißt ab dieser Woche genau: was du postest, wann, und warum."
-              vorlagen="Du nimmst mit: Content-Säulen-Template · 4-Wochen-Redaktionsplan · Plattform-Entscheidungsguide · 10 bewährte Hook-Formeln"
-              result="Deinen Content-Plan für 4 Wochen — und weißt genau was und wie du auf jeder Plattform postest."
-            />
-            <WeekCard
-              week="Woche 6"
-              expert="Stefan & Philipp von Onlinewerbevideo"
-              title="So verkaufst du bei Instagram und Social Media + Video-Setup"
-              body="Du lernst wie du dein Angebot aktiv über Social Media verkaufst — mit Strategie, nicht mit Druck. Die Video-Experten zeigen live: Professionelle Videos mit dem Handy. Equipment-Check. Dein erstes Video-Konzept."
-              vorlagen="Du nimmst mit: Strategie für Verkauf über Social Media · Launch-Checkliste · Equipment-Checkliste · Filming-Guide"
-              result="Deinen Plan wie du dein Angebot über Social Media verkaufst — und weißt wie du professionell auf Video erscheinst."
-            />
-            <WeekCard
-              week="Woche 7"
-              expert="Manuela Ludewig — Vertrieb"
-              title="Verkauf + Direktansprache"
-              body="Dein persönliches Verkaufsskript für die Direktansprache — angepasst auf deine Positionierung. Du übst es live in der Gruppe. Mit konkretem Plan für deine nächsten Kontakte und Netzwerkveranstaltungen."
-              vorlagen="Du nimmst mit: Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
-              result="Dein Verkaufsskript für die Direktansprache — und hast es einmal geübt."
-            />
-            <WeekCard
-              week="Woche 8"
-              expert="Katja Pestereva von Market Compass"
-              title="Sichtbarkeit auf Google + Abschluss"
-              body="Du optimierst dein Google Business Profil — Schritt für Schritt in der Gruppe. Du bringst deine Website auf die Grundlagen die Google belohnt. In der Abschlussrunde: Was hat sich in 8 Wochen verändert?"
-              vorlagen="Du nimmst mit: SEO-Checkliste · Keyword-Recherche-Vorlage · Website-Leitfaden"
-              result="Dein Google Business Profil vollständig optimiert — und deine Seite für dein Haupt-Keyword vorbereitet."
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* ─── S9: VORHER / NACHHER ─── */}
-      <section className="py-16 bg-slate-800/40">
+      {/* ══════════════════════════════════════════
+         S9 — VORHER / NACHHER
+      ══════════════════════════════════════════ */}
+      <section className="py-16 bg-slate-900/60">
         <div className="max-w-4xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
-            Vorher. Nachher.
-          </h2>
-          <div className="overflow-x-auto rounded-2xl border border-slate-700">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="bg-slate-800 border-b border-slate-700">
-                  <th className="text-left p-4 text-slate-400 font-semibold w-1/2">Vorher</th>
-                  <th className="text-left p-4 text-blue-300 font-semibold w-1/2">Nachher</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  [`\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C`, "Positionierung in einem Satz. System das Anfragen bringt."],
-                  [`\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C`, "Content-Plan für alle Plattformen — du weißt was, wann, warum."],
-                  [`\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C`, "Marketing-Systemkarte. Alle Teile greifen ineinander."],
-                  [`\u201EIch warte dass Kunden kommen.\u201C`, "Verkaufsskript. Direktansprache. Ich gehe hin."],
-                  [`\u201EIch werde online nicht gefunden.\u201C`, "Google Business optimiert. Seite für mein Keyword."],
-                  [`\u201ENach jedem Kurs fange ich wieder bei null an.\u201C`, "Ein System aus Marketing, Vertrieb und Social Media — das weiterläuft."],
-                ].map(([before, after], i) => (
-                  <tr
-                    key={i}
-                    className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/40" : "bg-slate-800/40"}`}
-                  >
-                    <td className="p-4 text-slate-400 italic">{before}</td>
-                    <td className="p-4 text-slate-200 font-medium">{after}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+          <div className="text-center mb-10">
+            <Badge>Transformation</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Vorher. Nachher.</h2>
           </div>
-          <p className="mt-6 text-center text-slate-300 text-lg">
+          <div className="grid md:grid-cols-2 gap-4">
+            {[
+              ["\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C", "Positionierung in einem Satz. System das Anfragen bringt."],
+              ["\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C", "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann, warum."],
+              ["\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C", "Marketing-Systemkarte. Alle Teile greifen ineinander."],
+              ["\u201EIch warte dass Kunden kommen.\u201C", "Verkaufsskript. Direktansprache. Ich gehe hin."],
+              ["\u201EIch werde online nicht gefunden.\u201C", "Google Business optimiert. Seite f\xFCr mein Keyword."],
+              ["\u201ENach jedem Kurs fange ich wieder bei null an.\u201C", "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft."],
+            ].map(([before, after], i) => (
+              <div key={i} className="grid grid-cols-2 rounded-xl overflow-hidden border border-slate-700">
+                <div className="bg-slate-800 p-4 text-slate-400 italic text-sm">{before}</div>
+                <div className="bg-gradient-to-r from-blue-900/40 to-purple-900/40 p-4 text-slate-200 text-sm font-medium border-l border-blue-800/50">
+                  {after}
+                </div>
+              </div>
+            ))}
+          </div>
+          <p className="mt-8 text-center text-blue-300 font-semibold text-lg">
             Dein Wissen war schon da. Jetzt hat es eine Struktur die Kunden bringt.
           </p>
         </div>
       </section>
 
-      {/* ─── S10: TESTIMONIALS ─── */}
+      {/* ══════════════════════════════════════════
+         S10 — TESTIMONIALS
+      ══════════════════════════════════════════ */}
       <section className="py-16">
-        <div className="max-w-4xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 text-center">
-            Was Selbstständige über die Zusammenarbeit mit Katja sagen
-          </h2>
-          <p className="text-center text-slate-400 text-sm mb-10 italic">
-            Das Programm startet im Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.
-          </p>
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <Badge>Erfahrungen</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
+            <p className="text-slate-400 text-sm mt-2 italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.</p>
+          </div>
           <div className="grid md:grid-cols-3 gap-6">
             {[1, 2, 3].map((i) => (
-              <div key={i} className="rounded-2xl bg-slate-800 border border-slate-700 p-6 space-y-4">
-                <div className="flex gap-1">
-                  {[...Array(5)].map((_, s) => (
-                    <span key={s} className="text-yellow-400 text-sm">★</span>
-                  ))}
+              <div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-6 space-y-3">
+                <div className="flex gap-1 text-yellow-400">{"★★★★★"}</div>
+                <p className="text-slate-400 italic text-sm">[Google-Bewertung {i} einfügen]</p>
+                <div className="flex items-center gap-3 border-t border-slate-700 pt-3">
+                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" />
+                  <p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p>
                 </div>
-                <p className="text-slate-400 italic text-sm">
-                  [Google-Bewertung {i} einfügen]
-                </p>
-                <p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── S11: BONUS ─── */}
-      <section className="py-16 bg-slate-800/40">
-        <div className="max-w-4xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 text-center">
-            Und du bist während und nach dem Programm nie allein.
-          </h2>
-          <div className="rounded-2xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-800/50 p-6 mb-8">
-            <p className="text-slate-300 leading-relaxed">
-              <strong className="text-white">Die gesamten 8 Wochen:</strong> Du bleibst keine Minute ohne
-              Unterstützung. In der Messenger-Community beantwortet Katja täglich Fragen. Du kannst
-              jederzeit posten — Feedback kommt. Das ist kein Kurs bei dem du alleine vorankommst. Das ist
-              8 Wochen tägliche Begleitung.
+      {/* ══════════════════════════════════════════
+         S11 — BONUS
+      ══════════════════════════════════════════ */}
+      <section className="py-16 bg-slate-900/60">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <Badge>Bonus-Paket</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Und du bist während und nach dem Programm nie allein.</h2>
+          </div>
+          <div className="rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-700/50 p-6 mb-8 text-center">
+            <p className="text-slate-200 leading-relaxed">
+              <strong className="text-white">Die gesamten 8 Wochen:</strong> Täglich Fragen stellen in der Messenger-Community. Katja antwortet. Kein Kurs bei dem du alleine vorankommst — 8 Wochen tägliche Begleitung.
             </p>
           </div>
-          <div className="grid sm:grid-cols-2 gap-4">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[
-              { title: "Sofort loslegen: 7 fertige Vorlagen für dein Marketing", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", value: "497 €" },
-              { title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", value: "297 €" },
-              { title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Trotzdem professionell. Die Grundlagen von den Video-Experten.", value: "197 €" },
-              { title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten mehr — du weißt auf welcher Plattform deine Wunschkunden sind.", value: "147 €" },
-              { title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen. Fragen zur Umsetzung, offener Austausch, Motivation.", value: "97 €" },
-              { title: "Abschluss-Netzwerkevent (geplant — Details folgen)", desc: "Nach der letzten Session kommen alle zusammen. Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", value: "197 €" },
-            ].map(({ title, desc, value }, i) => (
-              <div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-5 space-y-2">
-                <div className="flex justify-between items-start gap-2">
-                  <p className="font-semibold text-white text-sm leading-snug">
-                    Bonus {i + 1}: „{title}"
-                  </p>
-                  <span className="flex-shrink-0 text-xs font-bold text-green-400 bg-green-900/30 border border-green-800 rounded-full px-2 py-0.5 whitespace-nowrap">
-                    Wert: {value}
-                  </span>
+              { n: 1, icon: "📦", title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
+              { n: 2, icon: "📱", title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
+              { n: 3, icon: "🎬", title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Trotzdem professionell. Die Grundlagen von den Video-Experten.", val: "197 €" },
+              { n: 4, icon: "🗺️", title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten mehr — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
+              { n: 5, icon: "💬", title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
+              { n: 6, icon: "🤝", title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
+            ].map(({ n, icon, title, desc, val }) => (
+              <div key={n} className="rounded-xl bg-slate-800 border border-slate-700 p-5 space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-xl">{icon}</span>
+                  <span className="text-xs font-bold text-blue-400 uppercase">Bonus {n}</span>
+                  <span className="ml-auto text-xs font-bold text-green-400 bg-green-900/30 border border-green-800 rounded px-2 py-0.5">Wert: {val}</span>
                 </div>
-                <p className="text-slate-400 text-sm">{desc}</p>
-                <p className="text-xs text-blue-400">Für Pilot-Teilnehmende inklusive</p>
+                <p className="font-semibold text-white text-sm">{title}</p>
+                <p className="text-slate-400 text-xs">{desc}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── S12: VALUE STACK + PREIS ─── */}
-      <section id="platz-sichern" className="py-16">
+      {/* ══════════════════════════════════════════
+         S12 — VALUE STACK + PREIS
+      ══════════════════════════════════════════ */}
+      <section id="platz-sichern" className="py-20">
         <div className="max-w-2xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
-            Was du bekommst — und was es wert ist.
-          </h2>
-          <div className="overflow-hidden rounded-2xl border border-slate-700">
+          <div className="text-center mb-10">
+            <Badge>Dein Investment</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du bekommst — und was es wert ist.</h2>
+          </div>
+          <div className="rounded-2xl overflow-hidden border border-slate-700">
             <table className="w-full text-sm">
               <tbody>
                 {[
@@ -530,143 +540,106 @@ export default function Home() {
                   ["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"],
                   ["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"],
                 ].map(([label, val], i) => (
-                  <tr
-                    key={i}
-                    className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/40" : "bg-slate-800/40"}`}
-                  >
+                  <tr key={i} className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/50" : "bg-slate-800/50"}`}>
                     <td className="p-4 text-slate-300">{label}</td>
-                    <td className="p-4 text-right text-slate-300 font-mono">{val}</td>
+                    <td className="p-4 text-right text-slate-300 font-mono whitespace-nowrap">{val}</td>
                   </tr>
                 ))}
-                <tr className="bg-gradient-to-r from-blue-900/40 to-purple-900/40 border-t-2 border-blue-500">
-                  <td className="p-4 font-bold text-white">Gesamtwert</td>
-                  <td className="p-4 text-right font-bold text-white font-mono">4.432 €</td>
+                <tr className="bg-gradient-to-r from-blue-900/60 to-purple-900/60 border-t-2 border-blue-500">
+                  <td className="p-4 font-extrabold text-white text-base">Gesamtwert</td>
+                  <td className="p-4 text-right font-extrabold text-white font-mono text-base">4.432 €</td>
                 </tr>
               </tbody>
             </table>
           </div>
 
-          <div className="mt-10 text-center space-y-6">
-            <div>
-              <p className="text-slate-400 text-sm mb-2">statt regulär 3.000 €</p>
-              <p className="text-6xl md:text-7xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
-                500 €
-              </p>
-              <p className="text-xl text-slate-300 mt-1">gesamt (2 × 250 € / Monat)</p>
-            </div>
-            <div className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-left space-y-2">
-              <p className="font-semibold text-white">Warum dieser Preis?</p>
-              <p className="text-slate-300 text-sm leading-relaxed">
-                Das ist der erste Durchlauf. Du bekommst das vollständige Programm — mit allen Experten,
-                allen Vorlagen, aller Begleitung. Im Gegenzug gibst du nach jeder Woche direktes Feedback.
-                Das hilft das Programm für alle künftigen Teilnehmenden zu verbessern. Du profitierst
-                vom vollen Programm. Und das Programm profitiert von deiner ehrlichen Rückmeldung.
-              </p>
+          {/* Preis */}
+          <div className="mt-10 text-center space-y-5">
+            <p className="text-slate-400 text-sm line-through">Regulär 3.000 €</p>
+            <p className="text-7xl md:text-8xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent leading-none">
+              500 €
+            </p>
+            <p className="text-xl text-slate-300 font-semibold">gesamt · 2 × 250 € / Monat</p>
+
+            <div className="rounded-xl bg-slate-800 border border-slate-700 p-5 text-left text-sm text-slate-300">
+              <strong className="text-white block mb-1">Warum dieser Preis?</strong>
+              Das ist der erste Durchlauf. Du bekommst das vollständige Programm — mit allen Experten, allen Vorlagen, aller Begleitung. Im Gegenzug gibst du nach jeder Woche direktes Feedback. Das hilft das Programm für alle künftigen Teilnehmenden zu verbessern.
             </div>
 
             {/* Garantie */}
-            <div className="rounded-2xl border border-green-800 bg-green-900/20 p-6 text-left space-y-3">
-              <p className="font-bold text-white text-lg">Mein Versprechen an dich:</p>
-              <ul className="space-y-2">
-                <CheckItem>
-                  <strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.
-                </CheckItem>
-                <CheckItem>
-                  <strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Du verlängerst kostenlos um 4 Wochen.
-                </CheckItem>
-              </ul>
-              <p className="text-xs text-slate-500 italic">
-                * Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.
-              </p>
+            <div className="rounded-xl border border-green-700 bg-green-900/20 p-5 text-left space-y-3 text-sm">
+              <p className="font-extrabold text-white text-base">Mein Versprechen an dich:</p>
+              <div className="flex items-start gap-3">
+                <span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
+                <p className="text-slate-300"><strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.</p>
+              </div>
+              <div className="flex items-start gap-3">
+                <span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
+                <p className="text-slate-300"><strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Kostenlos um 4 Wochen verlängern.</p>
+              </div>
+              <p className="text-xs text-slate-500 italic">* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.</p>
             </div>
 
-            <GradientButton large>Meinen Platz sichern →</GradientButton>
-            <p className="text-sm text-slate-400">Du entscheidest nach unserem ersten Gespräch.</p>
+            <Btn xl>Meinen Platz sichern →</Btn>
+            <p className="text-sm text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027 · Du entscheidest nach unserem ersten Gespräch.</p>
           </div>
         </div>
       </section>
 
-      {/* ─── S13: FAQ ─── */}
-      <section className="py-16 bg-slate-800/40">
+      {/* ══════════════════════════════════════════
+         S13 — FAQ
+      ══════════════════════════════════════════ */}
+      <section className="py-16 bg-slate-900/60">
         <div className="max-w-3xl mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
-            Häufige Fragen
-          </h2>
-          <div className="space-y-4">
+          <div className="text-center mb-10">
+            <Badge>FAQ</Badge>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Häufige Fragen</h2>
+          </div>
+          <div className="space-y-3">
             {[
-              {
-                q: "Für wen ist das Programm?",
-                a: "Für Selbstständige die ihr Fachgebiet kennen — aber noch kein System haben das planbar Wunschkunden bringt. Coaches, Berater, Trainer, Stilisten, Kreative, Therapeuten — egal was du machst. Entscheidend ist: du verkaufst dein Wissen oder deine Fähigkeiten, und willst aufhören zu warten dass Kunden kommen.",
-              },
-              {
-                q: "Was ist hier anders als bei anderen Kursen?",
-                a: "Du bekommst kein neues Wissen. Du bringst alles was du hast in ein System. Live, mit Feedback, in einer kleinen Gruppe. Am Ende steht nicht ein Zertifikat — sondern eine fertige Verkaufsseiten-Struktur, ein Marketingplan, ein Verkaufsskript. Dinge die sofort eingesetzt werden können.",
-              },
-              {
-                q: "Wie viel Zeit brauche ich pro Woche?",
-                a: "Plan 3–4 Stunden ein: 90 Minuten Workshop + die wöchentliche Aufgabe. Alle Aufzeichnungen bleiben abrufbar solange du im Marketing Klub dabei bist — wenn eine Woche stressiger ist, holst du nach.",
-              },
-              {
-                q: "Was wenn ich eine Session verpasse?",
-                a: "Alle Workshops werden aufgezeichnet. Du holst nach wann es passt. Du verpasst nichts.",
-              },
-              {
-                q: "Wann startet das Programm — und wie melde ich mich an?",
-                a: "Start: 1. Juli 2027. Maximal 10 Plätze verfügbar. Schreib dich für ein Gespräch ein — dort schauen wir gemeinsam ob das Programm zu dir und deiner Situation passt.",
-              },
-              {
-                q: "Was wenn es mir nichts bringt?",
-                a: "14-Tage-Ausstiegsrecht nach der ersten Session — voller Betrag zurück, keine Fragen. Und wenn du dein vereinbartes Ziel nach 8 Wochen nicht erreicht hast: kostenlose Verlängerung um 4 Wochen.* (* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.)",
-              },
-              {
-                q: "Ich bin nicht sicher ob ich die Zeit habe.",
-                a: "Das klären wir im Gespräch. Wir schauen zusammen auf deine Situation — und sagen dir ehrlich ob das jetzt der richtige Zeitpunkt ist.",
-              },
-              {
-                q: "Was genau zahle ich?",
-                a: "500 € gesamt — 2 × 250 € / Monat. Das ist der Pilotpreis für den ersten Durchlauf. Der reguläre Preis liegt bei 3.000 €.",
-              },
+              { q: "Für wen ist das Programm?", a: "Für Selbstständige die ihr Fachgebiet kennen — aber noch kein System haben das planbar Wunschkunden bringt. Coaches, Berater, Trainer, Stilisten, Kreative, Therapeuten. Entscheidend ist: du verkaufst dein Wissen oder deine Fähigkeiten, und willst aufhören zu warten dass Kunden kommen." },
+              { q: "Was ist hier anders als bei anderen Kursen?", a: "Du bekommst kein neues Wissen. Du bringst alles was du hast in ein System. Live, mit Feedback, in einer kleinen Gruppe. Am Ende steht nicht ein Zertifikat — sondern eine fertige Verkaufsseiten-Struktur, ein Marketingplan, ein Verkaufsskript." },
+              { q: "Wie viel Zeit brauche ich pro Woche?", a: "Plan 3–4 Stunden ein: 90 Minuten Workshop + die wöchentliche Aufgabe. Alle Aufzeichnungen bleiben abrufbar — wenn eine Woche stressiger ist, holst du nach." },
+              { q: "Was wenn ich eine Session verpasse?", a: "Alle Workshops werden aufgezeichnet. Du holst nach wann es passt. Du verpasst nichts." },
+              { q: "Wann startet das Programm — und wie melde ich mich an?", a: "Start: 1. Juli 2027. Maximal 10 Plätze verfügbar. Schreib dich für ein Gespräch ein — dort schauen wir gemeinsam ob das Programm zu dir passt." },
+              { q: "Was wenn es mir nichts bringt?", a: "14-Tage-Ausstiegsrecht nach der ersten Session — voller Betrag zurück, keine Fragen. Ziel nicht erreicht nach 8 Wochen? Kostenlose Verlängerung um 4 Wochen.* (* Gilt wenn du aktiv teilgenommen und die Aufgaben umgesetzt hast.)" },
+              { q: "Ich bin nicht sicher ob ich die Zeit habe.", a: "Das klären wir im Gespräch. Wir schauen zusammen auf deine Situation — und sagen dir ehrlich ob das jetzt der richtige Zeitpunkt ist." },
+              { q: "Was genau zahle ich?", a: "500 € gesamt — 2 × 250 € / Monat. Das ist der Pilotpreis für den ersten Durchlauf. Der reguläre Preis liegt bei 3.000 €." },
             ].map(({ q, a }, i) => (
-              <details
-                key={i}
-                className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden"
-              >
+              <details key={i} className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">
                 <summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-white list-none">
                   {q}
-                  <span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">
-                    ▼
-                  </span>
+                  <span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">▼</span>
                 </summary>
-                <div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">
-                  {a}
-                </div>
+                <div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">{a}</div>
               </details>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── ABSCHLUSS-CTA ─── */}
-      <section className="py-20 bg-gradient-to-b from-slate-900 to-slate-950">
-        <div className="max-w-2xl mx-auto px-4 text-center space-y-6">
-          <h2 className="text-2xl md:text-4xl font-extrabold text-white">
+      {/* ══════════════════════════════════════════
+         ABSCHLUSS-CTA
+      ══════════════════════════════════════════ */}
+      <section className="py-24 bg-gradient-to-b from-[#0B0F1A] to-slate-950 text-center">
+        <div className="max-w-2xl mx-auto px-4 space-y-6">
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">
             Dein Wissen ist da.{" "}
             <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
               Jetzt bekommt es die Struktur die Kunden bringt.
             </span>
           </h2>
-          <p className="text-slate-400">Maximal 10 Plätze. Start: 1. Juli 2027.</p>
-          <GradientButton large>Meinen Platz sichern →</GradientButton>
+          <p className="text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027</p>
+          <Btn xl>Meinen Platz sichern →</Btn>
           <p className="text-sm text-slate-500">Ein kurzes Gespräch — du entscheidest danach.</p>
         </div>
       </section>
 
       {/* FOOTER */}
-      <footer className="border-t border-slate-800 py-6">
-        <div className="max-w-5xl mx-auto px-4 text-center text-slate-500 text-xs">
-          © 2026 Market Compass · Katja Pestereva
-        </div>
+      <footer className="border-t border-slate-800 py-6 text-center text-xs text-slate-600">
+        © 2026 Market Compass · Katja Pestereva
       </footer>
+
     </main>
   );
 }