From e22a724c5713194d1d6eb76c05476c815080983e Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 23:58:44 +0200
Subject: [PATCH] feat: add onboarding wizard component and integrate into
 index page

---
 src/components/OnboardingWizard.astro | 873 ++++++++++++++++++++++++++
 src/pages/index.astro                 |   6 +-
 2 files changed, 876 insertions(+), 3 deletions(-)
 create mode 100644 src/components/OnboardingWizard.astro

diff --git a/src/components/OnboardingWizard.astro b/src/components/OnboardingWizard.astro
new file mode 100644
index 0000000..6850013
--- /dev/null
+++ b/src/components/OnboardingWizard.astro
@@ -0,0 +1,873 @@
+---
+// src/components/OnboardingWizard.astro
+---
+
+<section id="onboarding-wizard" class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
+  <!-- Soft Background Glow -->
+  <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[60%] bg-sky-500/5 dark:bg-sky-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>
+
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="text-center mb-12">
+      <span class="text-xs uppercase tracking-widest text-sky-600 dark:text-sky-400 font-bold">Website Konfigurator</span>
+      <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white mt-2 uppercase tracking-tight">Onboarding-Wizard</h2>
+      <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
+        Konfigurieren Sie Ihr Wunschprojekt in unter 2 Minuten. Kostenlos und unverbindlich.
+      </p>
+    </div>
+
+    <!-- Wizard Box (Liquid Glass Style) -->
+    <div class="relative rounded-3xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-950/40 backdrop-blur-2xl p-6 sm:p-10 shadow-xl overflow-hidden min-h-[600px] flex flex-col justify-between">
+      <!-- Tactile details -->
+      <span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/20"></span>
+      <span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/20"></span>
+      <span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/20"></span>
+      <span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/20"></span>
+
+      <!-- Step Indicator Bar -->
+      <div class="flex justify-between items-center mb-8 pb-4 border-b border-slate-200/50 dark:border-white/5">
+        <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-widest" id="step-counter">SCHRITT 1 / 5</span>
+        <div class="flex gap-2" id="step-dots">
+          <span class="w-2 h-2 rounded-full bg-sky-500 transition-colors" data-step="1"></span>
+          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="2"></span>
+          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="3"></span>
+          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="4"></span>
+          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="5"></span>
+        </div>
+      </div>
+
+      <!-- Main Columns: Form Left, Live Preview Right -->
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch flex-grow">
+        
+        <!-- Left Column: Form Inputs (7 cols) -->
+        <form id="wizard-form" class="lg:col-span-7 flex flex-col justify-between min-h-[400px]" novalidate>
+          
+          <!-- STEP 1: Branchen-Auswahl -->
+          <div class="wizard-step space-y-4" data-step="1">
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 1: Branche wählen</h3>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Suchen Sie Ihre Branche oder tragen Sie Ihre eigene ein.</p>
+            </div>
+
+            <!-- Search Field -->
+            <div class="relative">
+              <input type="text" id="industry-search" placeholder="Branche suchen (z.B. Schreinerei, Arzt...)" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-3 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all" />
+            </div>
+
+            <!-- Industries List (Scrollable) -->
+            <div class="max-h-48 overflow-y-auto border border-slate-200/60 dark:border-white/5 rounded-xl p-3 grid grid-cols-1 sm:grid-cols-2 gap-2 bg-slate-100/30 dark:bg-white/5" id="industry-list">
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Schreinerei & Innenausbau" checked class="text-sky-600 focus:ring-sky-500" />
+                <span>Schreinerei & Innenausbau</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Dachdeckerei" class="text-sky-600 focus:ring-sky-500" />
+                <span>Dachdeckerei</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Solartechnik & PV" class="text-sky-600 focus:ring-sky-500" />
+                <span>Solartechnik & PV</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Rechtsanwälte & Notare" class="text-sky-600 focus:ring-sky-500" />
+                <span>Rechtsanwälte & Notare</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Bio-Hofladen" class="text-sky-600 focus:ring-sky-500" />
+                <span>Bio-Hofladen</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Sanitär, Heizung & Klima" class="text-sky-600 focus:ring-sky-500" />
+                <span>Sanitär, Heizung & Klima</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="KFZ-Meisterbetrieb" class="text-sky-600 focus:ring-sky-500" />
+                <span>KFZ-Meisterbetrieb</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Steuerberater" class="text-sky-600 focus:ring-sky-500" />
+                <span>Steuerberater</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Garten- & Landschaftsbau" class="text-sky-600 focus:ring-sky-500" />
+                <span>Garten- & Landschaftsbau</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Physiotherapie Praxis" class="text-sky-600 focus:ring-sky-500" />
+                <span>Physiotherapie Praxis</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Maler- & Lackiererbetrieb" class="text-sky-600 focus:ring-sky-500" />
+                <span>Maler- & Lackiererbetrieb</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Zahnarztpraxis" class="text-sky-600 focus:ring-sky-500" />
+                <span>Zahnarztpraxis</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Architekturbüro" class="text-sky-600 focus:ring-sky-500" />
+                <span>Architekturbüro</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Software-Entwicklung" class="text-sky-600 focus:ring-sky-500" />
+                <span>Software-Entwicklung</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Bäckerei & Konditorei" class="text-sky-600 focus:ring-sky-500" />
+                <span>Bäckerei & Konditorei</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Friseursalon" class="text-sky-600 focus:ring-sky-500" />
+                <span>Friseursalon</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Kosmetikstudio" class="text-sky-600 focus:ring-sky-500" />
+                <span>Kosmetikstudio</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Restaurant & Gastronomie" class="text-sky-600 focus:ring-sky-500" />
+                <span>Restaurant & Gastronomie</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Elektro-Technik" class="text-sky-600 focus:ring-sky-500" />
+                <span>Elektro-Technik</span>
+              </label>
+              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
+                <input type="radio" name="industry" value="Gebäudereinigung" class="text-sky-600 focus:ring-sky-500" />
+                <span>Gebäudereinigung</span>
+              </label>
+            </div>
+
+            <!-- Custom / Individual Field -->
+            <div class="pt-2">
+              <label for="industry-custom" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Eigene / Andere Branche</label>
+              <input type="text" id="industry-custom" placeholder="Ihre Branche eintragen..." class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
+            </div>
+          </div>
+
+          <!-- STEP 2: Farbauswahl -->
+          <div class="wizard-step space-y-6 hidden" data-step="2">
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 2: Farben</h3>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Wählen Sie empfohlene branchenspezifische oder klassische Farbkombinationen.</p>
+            </div>
+
+            <div class="space-y-6">
+              <!-- Industry Recommendation Section -->
+              <div class="p-4 rounded-2xl border border-sky-500/20 bg-sky-500/5" id="industry-rec-box">
+                <span class="text-[9px] font-mono text-sky-600 dark:text-sky-400 uppercase tracking-widest font-bold">Empfehlung für Ihre Branche</span>
+                <div class="flex items-center justify-between mt-2">
+                  <span class="text-xs font-bold text-slate-800 dark:text-zinc-200" id="rec-label">Branchen-Kombination</span>
+                  <button type="button" class="px-4 py-2 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-[10px] uppercase tracking-wider rounded-lg transition-all" id="apply-rec-btn">
+                    Anwenden
+                  </button>
+                </div>
+              </div>
+
+              <!-- Standard Harmonious Combos -->
+              <div>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
+                    <span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span>
+                    <span>Klassisch Blau</span>
+                  </button>
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
+                    <span class="w-3 h-3 rounded-full bg-[#10b981]"></span>
+                    <span>Smaragd & Silber</span>
+                  </button>
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
+                    <span class="w-3 h-3 rounded-full bg-[#6366f1]"></span>
+                    <span>Purple & Lilac</span>
+                  </button>
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
+                    <span class="w-3 h-3 rounded-full bg-[#4b5563]"></span>
+                    <span>Coal & Amber</span>
+                  </button>
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
+                    <span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span>
+                    <span>Muted Rose</span>
+                  </button>
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
+                    <span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span>
+                    <span>Ocean Cyan</span>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Manual Color Pickers -->
+              <div class="grid grid-cols-2 gap-4 pt-2 border-t border-slate-200/50 dark:border-white/5">
+                <div class="space-y-2">
+                  <label for="primary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Primärfarbe (Fokus)</label>
+                  <div class="flex items-center gap-3">
+                    <input type="color" id="primary-color" value="#38bdf8" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
+                    <span class="text-xs font-mono font-bold" id="primary-color-hex">#38BDF8</span>
+                  </div>
+                </div>
+                <div class="space-y-2">
+                  <label for="secondary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Sekundärfarbe</label>
+                  <div class="flex items-center gap-3">
+                    <input type="color" id="secondary-color" value="#ffffff" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
+                    <span class="text-xs font-mono font-bold" id="secondary-color-hex">#FFFFFF</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- STEP 3: Layout & Design-Richtung -->
+          <div class="wizard-step space-y-6 hidden" data-step="3">
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 3: Layout & Stil</h3>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Konfigurieren Sie Layout-Struktur und Designrichtung der Website.</p>
+            </div>
+
+            <div class="space-y-4">
+              <!-- Layout type -->
+              <div>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Layout-Art</label>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="layout" value="bento" checked class="sr-only" />
+                    <span>Bento-Grid</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="layout" value="split" class="sr-only" />
+                    <span>Split-Screen</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="layout" value="boxed" class="sr-only" />
+                    <span>Boxed Layout</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="layout" value="asymmetric" class="sr-only" />
+                    <span>Asymmetrisch</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="layout" value="single" class="sr-only" />
+                    <span>Single-Page</span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- Design Style -->
+              <div>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Design-Richtung</label>
+                <div class="grid grid-cols-2 gap-2" id="design-style-group">
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="corporate-dark" checked class="sr-only" />
+                    <span>Corporate Dark (Edler Darkmode)</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="nordic-light" class="sr-only" />
+                    <span>Nordic Light (Skandinavisch Hell)</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="industrial-gold" class="sr-only" />
+                    <span>Industrial Gold (Mittel-Anthrazit)</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="brutalism" class="sr-only" />
+                    <span>Brutalismus (Kräftige Ränder)</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="neomorphism" class="sr-only" />
+                    <span>Neomorphismus (Weiche Tiefen)</span>
+                  </label>
+                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
+                    <input type="radio" name="style" value="saas-minimalism" class="sr-only" />
+                    <span>SaaS-Minimalismus (Clean)</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- STEP 4: Kontaktdaten -->
+          <div class="wizard-step space-y-6 hidden" data-step="4">
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 4: Kontaktdaten</h3>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Teilen Sie uns mit, wie wir Ihr Konzept zustellen können.</p>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label for="wizard-name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name *</label>
+                <input type="text" id="wizard-name" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Name" />
+                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte füllen Sie das Feld aus.</p>
+              </div>
+              <div>
+                <label for="wizard-company" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Firma / Organisation</label>
+                <input type="text" id="wizard-company" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Unternehmen" />
+              </div>
+              <div class="sm:col-span-2">
+                <label for="wizard-email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail-Adresse *</label>
+                <input type="email" id="wizard-email" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="ihre.adresse@firma.de" />
+                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte eine gültige E-Mail-Adresse angeben.</p>
+              </div>
+
+              <!-- GDPR Consent -->
+              <div class="sm:col-span-2 space-y-3 pt-2">
+                <p class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
+                  🛡️ Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden.
+                </p>
+                <label class="flex items-start gap-2 cursor-pointer">
+                  <input type="checkbox" id="wizard-privacy" required class="mt-0.5 w-4 h-4 rounded text-sky-600 focus:ring-sky-500" />
+                  <span class="text-[10px] text-slate-500 dark:text-zinc-400 leading-normal">
+                    Ich stimme der verschlüsselten Datenverarbeitung laut <a href="/privacy" class="text-sky-600 dark:text-sky-400 hover:underline">Datenschutzerklärung</a> zu. *
+                  </span>
+                </label>
+                <p class="wizard-error text-[10px] text-red-500 hidden">Zustimmung erforderlich.</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- STEP 5: Zusammenfassung & Absenden -->
+          <div class="wizard-step space-y-6 hidden" data-step="5">
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 5: Zusammenfassung</h3>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Prüfen Sie Ihre Angaben, bevor wir Ihr Projekt generieren.</p>
+            </div>
+
+            <div class="bg-slate-100/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 rounded-xl p-4 space-y-3">
+              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
+                <span class="text-slate-500">Branche:</span>
+                <span class="font-bold text-slate-900 dark:text-white" id="summary-industry">-</span>
+              </div>
+              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
+                <span class="text-slate-500">Farben (Primär / Sekundär):</span>
+                <span class="font-bold text-slate-900 dark:text-white" id="summary-colors">-</span>
+              </div>
+              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
+                <span class="text-slate-500">Layout & Stil:</span>
+                <span class="font-bold text-slate-900 dark:text-white text-right" id="summary-layout">-</span>
+              </div>
+              <div class="flex justify-between text-xs pt-1">
+                <span class="text-slate-500">Name / E-Mail:</span>
+                <span class="font-bold text-slate-900 dark:text-white" id="summary-contact">-</span>
+              </div>
+            </div>
+
+            <p class="text-[10px] text-slate-500 dark:text-zinc-500 leading-normal text-center">
+              Nach Absenden wird Ihr Anforderungsprofil als strukturierte JSON-Payload an unsere Pipeline übermittelt.
+            </p>
+          </div>
+
+          <!-- Navigation Buttons -->
+          <div class="flex justify-between gap-4 pt-8 border-t border-slate-200/50 dark:border-white/5 mt-8">
+            <button type="button" id="prev-step" class="px-5 py-2.5 bg-slate-200 dark:bg-slate-900 text-slate-800 dark:text-white text-xs font-bold uppercase tracking-wider rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-all">
+              Zurück
+            </button>
+            <button type="button" id="next-step" class="px-5 py-2.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 text-xs font-bold uppercase tracking-wider rounded-lg transition-all">
+              Weiter
+            </button>
+          </div>
+
+        </form>
+
+        <!-- Right Column: Live Bento Preview (5 cols) -->
+        <div class="lg:col-span-5 flex items-center justify-center">
+          <div id="wizard-live-preview" class="w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl bg-[#0B0F19]">
+            <!-- Inner Aurora Glow Element -->
+            <div id="preview-glow" class="absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4 bg-sky-500/20"></div>
+            <div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px]"></div>
+
+            <!-- Top Row (Mini Header Mock) -->
+            <div class="relative z-10 flex justify-between items-center pb-2 border-b border-white/10" id="preview-header">
+              <div class="flex gap-1.5 items-center">
+                <span class="w-2 h-2 rounded-full bg-[#38BDF8]" id="preview-logo-dot"></span>
+                <span class="text-[9px] font-bold tracking-tight uppercase" id="preview-logo-text">Website Mockup</span>
+              </div>
+              <span class="text-[7px] font-mono opacity-50" id="preview-online-status">PREVIEW</span>
+            </div>
+
+            <!-- Middle Content (Dynamic layouts render here) -->
+            <div class="relative z-10 flex-grow py-4 flex flex-col justify-center min-h-[140px]" id="preview-content-area">
+              
+              <!-- Bento Layout Preview Container -->
+              <div id="layout-bento-mock" class="grid grid-cols-3 gap-2 w-full">
+                <div class="col-span-2 p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="bento-box-1">
+                  <span class="text-[10px] font-bold leading-tight" id="preview-h1">Meisterbetrieb</span>
+                  <span class="text-[6px] opacity-60 mt-1" id="preview-desc">Professioneller Service vor Ort.</span>
+                </div>
+                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-center items-center" id="bento-box-2">
+                  <span class="text-[8px] font-mono uppercase tracking-widest text-[#38BDF8]" id="preview-tier-badge">AKTIV</span>
+                  <span class="text-[5px] opacity-40 uppercase">STATUS</span>
+                </div>
+              </div>
+
+              <!-- Split Layout Preview Container (Hidden by default) -->
+              <div id="layout-split-mock" class="grid grid-cols-2 gap-2 w-full hidden">
+                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="split-box-1">
+                  <span class="text-[10px] font-bold leading-tight" id="preview-h1-split">Regionaler Partner</span>
+                  <span class="text-[6px] opacity-60 mt-1" id="preview-desc-split">Echtes Handwerk, beste Qualität.</span>
+                </div>
+                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex items-center justify-center">
+                  <span class="w-6 h-6 rounded-full border border-white/20 flex items-center justify-center text-[7px]" id="split-icon">✓</span>
+                </div>
+              </div>
+
+              <!-- Boxed Layout Preview Container (Hidden) -->
+              <div id="layout-boxed-mock" class="w-full border border-white/10 p-3 rounded-lg bg-white/5 flex flex-col gap-1 hidden" id="boxed-container">
+                <div class="h-2 w-12 bg-white/10 rounded" id="boxed-accent-bar"></div>
+                <span class="text-[9px] font-bold" id="preview-h1-boxed">Kompakter Titel</span>
+                <p class="text-[6px] opacity-60" id="preview-desc-boxed">Zentrierter Text mit reduziertem Rahmen.</p>
+              </div>
+
+            </div>
+
+            <!-- Bottom Row (Footer Mock) -->
+            <div class="relative z-10 flex justify-between items-center pt-2 border-t border-white/10" id="preview-footer">
+              <span class="text-[6px] opacity-40 font-mono" id="preview-bottom-left">ZERO THIRD-PARTY</span>
+              <span class="text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-[#38BDF8] text-zinc-950" id="preview-cta-badge">KONZEPT</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<style>
+  /* Custom checked states for radio buttons */
+  label:has(input[type="radio"]:checked) {
+    @apply border-sky-500 ring-2 ring-sky-500/20 bg-sky-500/5;
+  }
+</style>
+
+<script>
+  (function() {
+    let currentStep = 1;
+    const totalSteps = 5;
+
+    const steps = document.querySelectorAll('.wizard-step');
+    const dots = document.querySelectorAll('#step-dots span');
+    const counter = document.getElementById('step-counter');
+    const prevBtn = document.getElementById('prev-step') as HTMLButtonElement;
+    const nextBtn = document.getElementById('next-step') as HTMLButtonElement;
+    const form = document.getElementById('wizard-form') as HTMLFormElement;
+
+    // Search and filter logic
+    const industrySearch = document.getElementById('industry-search') as HTMLInputElement;
+    const industryList = document.getElementById('industry-list');
+    const industryLabels = industryList?.querySelectorAll('label');
+    const industryCustomInput = document.getElementById('industry-custom') as HTMLInputElement;
+
+    // Recommendation logic elements
+    const recLabel = document.getElementById('rec-label');
+    const applyRecBtn = document.getElementById('apply-rec-btn');
+
+    // Color Inputs
+    const primaryColorInput = document.getElementById('primary-color') as HTMLInputElement;
+    const secondaryColorInput = document.getElementById('secondary-color') as HTMLInputElement;
+    const primaryHex = document.getElementById('primary-color-hex');
+    const secondaryHex = document.getElementById('secondary-color-hex');
+    const colorPresetBtns = document.querySelectorAll('.color-preset-btn');
+
+    // Layout & Style Inputs
+    const layoutInputs = form.querySelectorAll('input[name="layout"]');
+    const styleInputs = form.querySelectorAll('input[name="style"]');
+
+    // Live Preview elements
+    const previewBox = document.getElementById('wizard-live-preview');
+    const previewGlow = document.getElementById('preview-glow');
+    const logoDot = document.getElementById('preview-logo-dot');
+    const logoText = document.getElementById('preview-logo-text');
+    const badge = document.getElementById('preview-cta-badge');
+    const tierBadge = document.getElementById('preview-tier-badge');
+    const header = document.getElementById('preview-header');
+    const footer = document.getElementById('preview-footer');
+    const onlineStatus = document.getElementById('preview-online-status');
+    const b1 = document.getElementById('bento-box-1');
+    const b2 = document.getElementById('bento-box-2');
+    const s1 = document.getElementById('split-box-1');
+    const s2 = document.getElementById('split-icon');
+    const bx = document.getElementById('boxed-container');
+    const bxAccent = document.getElementById('boxed-accent-bar');
+
+    // Preview Text Nodes for Industry updates
+    const previewH1 = document.getElementById('preview-h1');
+    const previewDesc = document.getElementById('preview-desc');
+    const previewH1Split = document.getElementById('preview-h1-split');
+    const previewDescSplit = document.getElementById('preview-desc-split');
+    const previewH1Boxed = document.getElementById('preview-h1-boxed');
+    const previewDescBoxed = document.getElementById('preview-desc-boxed');
+
+    // Preview Layout mock blocks
+    const bentoMock = document.getElementById('layout-bento-mock');
+    const splitMock = document.getElementById('layout-split-mock');
+    const boxedMock = document.getElementById('layout-boxed-mock');
+
+    // Step 4 inputs
+    const nameInput = document.getElementById('wizard-name') as HTMLInputElement;
+    const emailInput = document.getElementById('wizard-email') as HTMLInputElement;
+    const privacyInput = document.getElementById('wizard-privacy') as HTMLInputElement;
+
+    // Summary fields
+    const summaryIndustry = document.getElementById('summary-industry');
+    const summaryColors = document.getElementById('summary-colors');
+    const summaryLayout = document.getElementById('summary-layout');
+    const summaryContact = document.getElementById('summary-contact');
+
+    // Color combination mapping per industry
+    const industryColorConfigs: Record<string, { primary: string, secondary: string, name: string, label: string }> = {
+      'Schreinerei & Innenausbau': { primary: '#9C7A4E', secondary: '#DE6B32', name: 'Möbel-Schreinerei', label: 'Eichenholz & Kupfer' },
+      'Dachdeckerei': { primary: '#f59e0b', secondary: '#475569', name: 'Dachdecker Meister', label: 'Ziegel-Amber & Schiefer' },
+      'Solartechnik & PV': { primary: '#ff5500', secondary: '#3f3f46', name: 'Solar PV Tech', label: 'Sonnen-Orange & Carbon' },
+      'Rechtsanwälte & Notare': { primary: '#047857', secondary: '#f1f5f9', name: 'Kanzlei Expertise', label: 'Tief-Smaragd & Silber' },
+      'Bio-Hofladen': { primary: '#15803d', secondary: '#c2410c', name: 'Bio-Hofladen Natur', label: 'Bio-Grün & Terracotta' },
+      'Sanitär, Heizung & Klima': { primary: '#1d4ed8', secondary: '#06b6d4', name: 'SHK Meisterbetrieb', label: 'Heizungs-Blau & Aqua-Cyan' },
+      'KFZ-Meisterbetrieb': { primary: '#dc2626', secondary: '#94a3b8', name: 'KFZ Schnellservice', label: 'Racing-Rot & Asphalt' },
+      'Steuerberater': { primary: '#d97706', secondary: '#1e3a8a', name: 'Steuerberater Premium', label: 'Kanzlei-Gold & Royal-Blau' },
+      'Garten- & Landschaftsbau': { primary: '#16a34a', secondary: '#e7e5e4', name: 'Gartengestaltung', label: 'Blatt-Grün & Sandstein' },
+      'Physiotherapie Praxis': { primary: '#0d9488', secondary: '#ccfbf1', name: 'Physio Praxis', label: 'Gesundheits-Teal & Mint' },
+      'Maler- & Lackiererbetrieb': { primary: '#4f46e5', secondary: '#db2777', name: 'Malerbetrieb', label: 'Kreativ-Indigo & Magenta' },
+      'Zahnarztpraxis': { primary: '#38bdf8', secondary: '#f8fafc', name: 'Zahnarztpraxis', label: 'Eis-Blau & Praxis-Weiß' },
+      'Architekturbüro': { primary: '#71717a', secondary: '#09090b', name: 'Architektur Struktur', label: 'Konzept-Grau & Matt-Schwarz' },
+      'Software-Entwicklung': { primary: '#8b5cf6', secondary: '#00ffff', name: 'Byte Code', label: 'Electric-Purple & Cyber-Cyan' },
+      'Bäckerei & Konditorei': { primary: '#d97706', secondary: '#451a03', name: 'Bäckerei Ofenfrisch', label: 'Weizen-Gold & Schokolade' },
+      'Friseursalon': { primary: '#db2777', secondary: '#f3f4f6', name: 'Haardesign Salon', label: 'Rose Gold & Seiden-Weiß' },
+      'Kosmetikstudio': { primary: '#a855f7', secondary: '#fafaf9', name: 'Kosmetik Oase', label: 'Lavendel & Perlglanz' },
+      'Restaurant & Gastronomie': { primary: '#991b1b', secondary: '#d97706', name: 'Gourmet Restaurant', label: 'Wein-Rot & Ocker-Gold' },
+      'Elektro-Technik': { primary: '#eab308', secondary: '#1f2937', name: 'Elektrotechnik', label: 'Strom-Gelb & Anthrazit' },
+      'Gebäudereinigung': { primary: '#06b6d4', secondary: '#ffffff', name: 'Gebäudereinigung', label: 'Glanz-Cyan & Reinweiß' }
+    };
+
+    // Filter list by search query
+    if (industrySearch) {
+      industrySearch.addEventListener('input', () => {
+        const query = industrySearch.value.toLowerCase().trim();
+        industryLabels?.forEach(label => {
+          const text = label.textContent?.toLowerCase() || '';
+          if (text.includes(query)) {
+            label.style.display = 'flex';
+          } else {
+            label.style.display = 'none';
+          }
+        });
+      });
+    }
+
+    // Color preset button actions
+    colorPresetBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const primary = btn.getAttribute('data-primary') || '#38bdf8';
+        const secondary = btn.getAttribute('data-secondary') || '#ffffff';
+        applyColorCombo(primary, secondary);
+      });
+    });
+
+    function applyColorCombo(primary: string, secondary: string) {
+      if (primaryColorInput && secondaryColorInput) {
+        primaryColorInput.value = primary;
+        secondaryColorInput.value = secondary;
+        primaryColorInput.dispatchEvent(new Event('input'));
+        secondaryColorInput.dispatchEvent(new Event('input'));
+      }
+    }
+
+    if (primaryColorInput && secondaryColorInput) {
+      primaryColorInput.addEventListener('input', () => {
+        if (primaryHex) primaryHex.textContent = primaryColorInput.value.toUpperCase();
+        updatePreviewStyles();
+      });
+      secondaryColorInput.addEventListener('input', () => {
+        if (secondaryHex) secondaryHex.textContent = secondaryColorInput.value.toUpperCase();
+        updatePreviewStyles();
+      });
+    }
+
+    // Reacting to layout changes
+    layoutInputs.forEach(input => input.addEventListener('change', updatePreviewLayout));
+    styleInputs.forEach(input => input.addEventListener('change', updatePreviewStyles));
+
+    // Dynamic Preview Layout
+    function updatePreviewLayout() {
+      const activeLayout = (form.querySelector('input[name="layout"]:checked') as HTMLInputElement)?.value || 'bento';
+      
+      bentoMock?.classList.add('hidden');
+      splitMock?.classList.add('hidden');
+      boxedMock?.classList.add('hidden');
+
+      if (activeLayout === 'bento') bentoMock?.classList.remove('hidden');
+      if (activeLayout === 'split') splitMock?.classList.remove('hidden');
+      if (activeLayout === 'boxed' || activeLayout === 'asymmetric' || activeLayout === 'single') boxedMock?.classList.remove('hidden');
+    }
+
+    // Update colors based on chosen industry
+    function updateIndustryColorRecommendation() {
+      const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
+      const industryName = selectedEl?.value || 'Schreinerei & Innenausbau';
+      const config = industryColorConfigs[industryName];
+
+      if (config && recLabel && applyRecBtn) {
+        recLabel.textContent = `${config.label} (für ${industryName})`;
+        
+        // Remove old click listeners by cloning
+        const newBtn = applyRecBtn.cloneNode(true) as HTMLButtonElement;
+        applyRecBtn.parentNode?.replaceChild(newBtn, applyRecBtn);
+        
+        newBtn.addEventListener('click', () => {
+          applyColorCombo(config.primary, config.secondary);
+        });
+      }
+
+      // Update text mockup content in preview
+      const previewText = config ? config.name : 'Premium Web';
+      const previewDescText = `Maßgeschneidertes Design für ${industryName}.`;
+      
+      if (previewH1) previewH1.textContent = previewText;
+      if (previewDesc) previewDesc.textContent = previewDescText;
+      if (previewH1Split) previewH1Split.textContent = previewText;
+      if (previewDescSplit) previewDescSplit.textContent = previewDescText;
+      if (previewH1Boxed) previewH1Boxed.textContent = previewText;
+      if (previewDescBoxed) previewDescBoxed.textContent = previewDescText;
+    }
+
+    // Event listener for industry change
+    form.querySelectorAll('input[name="industry"]').forEach(input => {
+      input.addEventListener('change', () => {
+        updateIndustryColorRecommendation();
+        // Automatically pre-apply the recommended combo for the industry
+        const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
+        const config = industryColorConfigs[selectedEl?.value];
+        if (config) {
+          applyColorCombo(config.primary, config.secondary);
+        }
+      });
+    });
+
+    // Custom industry input also resets preset if user types
+    if (industryCustomInput) {
+      industryCustomInput.addEventListener('input', () => {
+        if (industryCustomInput.value.trim() && recLabel) {
+          recLabel.textContent = 'Individuelles Thema';
+        }
+      });
+    }
+
+    // Dynamic Preview Styles (Colors & Themes)
+    function updatePreviewStyles() {
+      if (!previewBox || !previewGlow || !logoDot || !logoText || !badge || !tierBadge) return;
+
+      const primary = primaryColorInput.value;
+      const secondary = secondaryColorInput.value;
+      const activeStyle = (form.querySelector('input[name="style"]:checked') as HTMLInputElement)?.value || 'corporate-dark';
+
+      // Reset style classes
+      previewBox.className = "w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl";
+      logoText.className = "text-[9px] font-bold tracking-tight uppercase";
+      badge.className = "text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded";
+
+      // Color rules for elements
+      logoDot.style.backgroundColor = primary;
+      if (bxAccent) bxAccent.style.backgroundColor = primary;
+      if (s2) {
+        s2.style.borderColor = primary;
+        s2.style.color = primary;
+      }
+      tierBadge.style.color = primary;
+
+      // Style specific themes
+      if (activeStyle === 'corporate-dark') {
+        previewBox.classList.add('bg-[#0B0F19]', 'text-white', 'border-white/10');
+        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
+        previewGlow.style.backgroundColor = `${primary}22`;
+        logoText.classList.add('text-white');
+        badge.style.backgroundColor = primary;
+        badge.style.color = '#0B0F19';
+      } 
+      else if (activeStyle === 'nordic-light') {
+        previewBox.classList.add('bg-[#F3F4F6]', 'text-slate-900', 'border-slate-200');
+        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
+        previewGlow.style.backgroundColor = `${primary}11`;
+        logoText.classList.add('text-slate-800');
+        badge.style.backgroundColor = primary;
+        badge.style.color = '#ffffff';
+      }
+      else if (activeStyle === 'industrial-gold') {
+        previewBox.classList.add('bg-[#1C1D21]', 'text-zinc-100', 'border-zinc-700/50');
+        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
+        previewGlow.style.backgroundColor = `${primary}18`;
+        logoText.classList.add('text-zinc-100');
+        badge.style.backgroundColor = primary;
+        badge.style.color = '#1C1D21';
+      }
+      else if (activeStyle === 'brutalism') {
+        previewBox.classList.add('bg-white', 'text-black', 'border-4', 'border-black');
+        previewGlow.className = "hidden";
+        logoText.classList.add('text-black');
+        badge.style.backgroundColor = '#000000';
+        badge.style.color = '#ffffff';
+        badge.classList.add('border', 'border-black');
+      }
+      else if (activeStyle === 'neomorphism') {
+        previewBox.classList.add('bg-[#E0E0E0]', 'text-slate-800', 'border-transparent', 'shadow-[inset_10px_10px_20px_#bebebe,inset_-10px_-10px_20px_#ffffff]');
+        previewGlow.className = "hidden";
+        logoText.classList.add('text-slate-700');
+        badge.style.backgroundColor = primary;
+        badge.style.color = '#white';
+      }
+      else { // saas-minimalism
+        previewBox.classList.add('bg-white', 'text-slate-900', 'border-slate-100', 'shadow-sm');
+        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
+        previewGlow.style.backgroundColor = `${primary}08`;
+        logoText.classList.add('text-slate-800');
+        badge.style.backgroundColor = primary;
+        badge.style.color = '#ffffff';
+      }
+    }
+
+    // Trigger initial styles
+    updateIndustryColorRecommendation();
+    updatePreviewLayout();
+    updatePreviewStyles();
+
+    // Steps state machine
+    function updateStep() {
+      steps.forEach((step, idx) => {
+        if (idx + 1 === currentStep) {
+          step.classList.remove('hidden');
+        } else {
+          step.classList.add('hidden');
+        }
+      });
+
+      dots.forEach((dot, idx) => {
+        if (idx + 1 <= currentStep) {
+          dot.classList.add('bg-sky-500');
+          dot.classList.remove('bg-slate-300', 'dark:bg-zinc-700');
+        } else {
+          dot.classList.remove('bg-sky-500');
+          dot.classList.add('bg-slate-300', 'dark:bg-zinc-700');
+        }
+      });
+
+      if (counter) {
+        counter.textContent = `SCHRITT ${currentStep} / ${totalSteps}`;
+      }
+
+      if (prevBtn && nextBtn) {
+        prevBtn.disabled = currentStep === 1;
+        if (currentStep === totalSteps) {
+          nextBtn.textContent = 'Projekt generieren';
+        } else {
+          nextBtn.textContent = 'Weiter';
+        }
+      }
+
+      if (currentStep === 5) {
+        buildSummary();
+      }
+    }
+
+    function validateStep(): boolean {
+      if (currentStep === 4) {
+        let valid = true;
+        
+        if (!nameInput.value.trim()) {
+          nameInput.nextElementSibling?.classList.remove('hidden');
+          valid = false;
+        } else {
+          nameInput.nextElementSibling?.classList.add('hidden');
+        }
+
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailPattern.test(emailInput.value)) {
+          emailInput.nextElementSibling?.classList.remove('hidden');
+          valid = false;
+        } else {
+          emailInput.nextElementSibling?.classList.add('hidden');
+        }
+
+        const privacyError = document.getElementById('wizard-privacy')?.closest('label')?.nextElementSibling;
+        if (!privacyInput.checked) {
+          privacyError?.classList.remove('hidden');
+          valid = false;
+        } else {
+          privacyError?.classList.add('hidden');
+        }
+
+        return valid;
+      }
+      return true;
+    }
+
+    function buildSummary() {
+      const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
+      const customIndustry = industryCustomInput.value.trim();
+      const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : '-');
+
+      const primary = primaryColorInput.value;
+      const secondary = secondaryColorInput.value;
+
+      const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
+      const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;
+
+      if (summaryIndustry) summaryIndustry.textContent = industryName;
+      if (summaryColors) summaryColors.textContent = `Primär: ${primary.toUpperCase()}, Sekundär: ${secondary.toUpperCase()}`;
+      if (summaryLayout) summaryLayout.textContent = `${selectedLayoutEl?.value.toUpperCase()} / ${selectedStyleEl?.value.toUpperCase()}`;
+      if (summaryContact) summaryContact.textContent = `${nameInput.value} (${emailInput.value})`;
+    }
+
+    function handleNext() {
+      if (!validateStep()) return;
+
+      if (currentStep < totalSteps) {
+        currentStep++;
+        updateStep();
+      } else {
+        submitWizard();
+      }
+    }
+
+    function submitWizard() {
+      const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
+      const customIndustry = industryCustomInput.value.trim();
+      const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : 'unbekannt');
+
+      const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
+      const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;
+      const companyVal = (document.getElementById('wizard-company') as HTMLInputElement).value;
+
+      const payload = {
+        client_metadata: {
+          agency_id: "nd-it-solutions",
+          timestamp: new Date().toISOString(),
+          domain: companyVal ? `${companyVal.toLowerCase().replace(/[^a-z0-9]/g, '')}.de` : "unbekannt.de"
+        },
+        branding: {
+          industry: industryName,
+          company_name: companyVal || "Mein Unternehmen",
+          branding_style: selectedStyleEl?.value || "corporate-dark",
+          primary_color: primaryColorInput.value,
+          secondary_color: secondaryColorInput.value
+        },
+        structure: {
+          layout_type: selectedLayoutEl?.value || "bento",
+          sections: ["hero", "portfolio", "contact"]
+        },
+        contact: {
+          name: nameInput.value,
+          email: emailInput.value,
+          company: companyVal
+        }
+      };
+
+      console.log('Wizard Payload Output:', JSON.stringify(payload, null, 2));
+      alert('Erfolgreich generiert! JSON Payload wurde in die Konsole geloggt.');
+    }
+
+    if (nextBtn && prevBtn) {
+      nextBtn.addEventListener('click', handleNext);
+      prevBtn.addEventListener('click', () => {
+        if (currentStep > 1) {
+          currentStep--;
+          updateStep();
+        }
+      });
+    }
+  })();
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d69e57c..6626062 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
 import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
-import TemplateMarquee from '../components/TemplateMarquee.astro';
+import OnboardingWizard from '../components/OnboardingWizard.astro';
 ---
 
 <Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
@@ -13,8 +13,8 @@ import TemplateMarquee from '../components/TemplateMarquee.astro';
     {/* Clean, modular Hero and Liquid Glass section */}
     <HeroAndLiquidGlass />
     
-    <!-- Infinite Template Marquee Ticker -->
-    <TemplateMarquee />
+    <!-- Multi-step Onboarding Wizard -->
+    <OnboardingWizard />
     
     <!-- Contact section (separate, clean layout) -->
     <section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">