diff --git a/src/components/HeroAndBento.astro b/src/components/HeroAndBento.astro
new file mode 100644
index 0000000..7bd3fe0
--- /dev/null
+++ b/src/components/HeroAndBento.astro
@@ -0,0 +1,150 @@
+<!-- src/components/HeroAndBento.astro -->
+<!-- Hero-Sektion: Erfüllt 3-Second-Rule & Conversion-UX -->
+<section class="relative pt-32 pb-20 overflow-hidden bg-[#0B0F19] border-b border-white/5">
+  <!-- Tactile Blueprint-Raster im Hintergrund -->
+  <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-size: 40px 40px; background-image: linear-gradient(to right, #38BDF8 1px, transparent 1px), linear-gradient(to bottom, #38BDF8 1px, transparent 1px);"></div>
+  
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="max-w-3xl">
+      <!-- Utility Badge: Vorfilterung -->
+      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-sky-400/20 bg-sky-400/5 text-sky-400 text-[10px] font-mono font-bold uppercase tracking-wider mb-6">
+        <span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
+        Digitalpartner für den deutschen Mittelstand
+      </div>
+      
+      <!-- Haupt-Überschrift (H1): Klarheit in unter 3 Sekunden -->
+      <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight text-white mb-6 leading-tight">
+        Moderne Websites für Ihren Betrieb.<br/>
+        <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-slate-200 to-white">
+          Komplett betreut. Absolut sorgenfrei.
+        </span>
+      </h1>
+      
+      <!-- Zielgruppen-Ansprache & Einwand-Vorwegnahme -->
+      <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed mb-8">
+        Wir bauen, hosten und pflegen Ihren neuen Internetauftritt. Ohne Zeitaufwand für Sie, rechtssicher nach DSGVO auf deutschen Servern und optimiert für lokale Kunden bei Google.
+      </p>
+
+      <!-- Conversion-Fokus: Direkte CTAs (Optimale Daumenzone mobil) -->
+      <div class="flex flex-wrap gap-4">
+        <a href="#contact" 
+           class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-500 hover:bg-white text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-sky-400 focus:outline-none"
+           aria-label="Kostenloses Erstgespräch anfragen">
+          Erstgespräch buchen
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+        </a>
+        <a href="/templates" 
+           class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-slate-900/60 hover:bg-slate-800 border border-white/10 text-white font-bold text-xs uppercase tracking-wider rounded transition-all focus:ring-2 focus:ring-offset-2 focus:ring-white/20 focus:outline-none"
+           aria-label="Vorlage-Designs ansehen">
+          Templates ansehen
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Haupt-Bento-Grid: Präzision, Wertigkeit & Content-Mix (Asymmetrisches Bento) -->
+<section class="py-20 bg-[#0B0F19] relative">
+  <!-- Subtile CSS-Noise Textur für matte Haptik (tactile-craftsman-ui) -->
+  <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-auto">
+      
+      <!-- KACHEL 1: Visual Anchor (Haupt-Blickfang, 2 Spalten, 2 Zeilen) -->
+      <div class="md:col-span-2 md:row-span-2 bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[380px] relative group overflow-hidden transition-all duration-300">
+        <!-- Blueprint Eckmarkierungen für handwerkliche Präzision -->
+        <span class="absolute top-4 left-4 w-3 h-3 border-t border-l border-sky-400/30"></span>
+        <span class="absolute top-4 right-4 w-3 h-3 border-t border-r border-sky-400/30"></span>
+        <span class="absolute bottom-4 left-4 w-3 h-3 border-b border-l border-sky-400/30"></span>
+        <span class="absolute bottom-4 right-4 w-3 h-3 border-b border-r border-sky-400/30"></span>
+
+        <div>
+          <span class="text-[10px] font-mono font-bold text-sky-400 uppercase tracking-widest">[ DAS KONZEPT ]</span>
+          <h2 class="text-2xl sm:text-3xl font-extrabold text-white mt-4 mb-4">Ihr digitaler Mitarbeiter für Neukunden</h2>
+          <p class="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-lg">
+            Eine gute Website ist kein Statussymbol, sondern Werkzeug. Wir programmieren Ihren Web-Auftritt so, dass er vollautomatisch Anfragen von echten Kunden aus Ihrer Region generiert.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8 pt-6 border-t border-white/5">
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>Keine Baukästen</span>
+          </div>
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>100% DSGVO-sicher</span>
+          </div>
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>Feste Monats-Pauschale</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- KACHEL 2: USP Webdesign (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Webdesign & UI/UX</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ CODESCHREINEREI ]</span>
+      </div>
+
+      <!-- KACHEL 3: USP SEO (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Lokale Sichtbarkeit</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ GOOGLE-DOMINANZ ]</span>
+      </div>
+
+      <!-- KACHEL 4: USP Hosting (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Sicheres Hosting</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Serverstandort Deutschland. Tägliche Backups, SSL-Verschlüsselung und volle Einhaltung aller DSGVO-Vorgaben.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ 100% REGELKONFORM ]</span>
+      </div>
+
+      <!-- KACHEL 5: Rhythmusbrecher (Daten / Metrik, 1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative">
+        <div>
+          <!-- Semantisch korrekt: Keine Headline, da reiner Datenpunkt -->
+          <div class="text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-wider mb-2">Google Lighthouse</div>
+          <div class="flex items-baseline gap-2">
+            <span class="text-4xl font-extrabold text-emerald-400 tracking-tight">100/100</span>
+            <span class="text-[10px] font-mono text-zinc-500">Punkte</span>
+          </div>
+          <p class="text-zinc-400 text-xs mt-3 leading-relaxed">
+            Optimierter Code führt zu maximaler Geschwindigkeit im Mobilnetz. Keine Abbrüche bei schwachem Signal.
+          </p>
+        </div>
+        <div>
+          <div class="w-full bg-zinc-800/80 h-1.5 rounded-full overflow-hidden mt-6" aria-hidden="true">
+            <div class="bg-emerald-400 h-full w-[100%] rounded-full shadow-[0_0_8px_#34d399]"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5a91d26..5ee70b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,262 +2,53 @@
 import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
-import { 
-  FaCheck, 
-  FaLaptopCode, 
-  FaSearchDollar, 
-  FaServer, 
-  FaArrowRight, 
-  FaEnvelope, 
-  FaPhoneAlt 
-} from 'react-icons/fa';
+import HeroAndBento from '../components/HeroAndBento.astro';
 ---
 
 <Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
   <Navbar />
   
-  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 tactile-grid-bg">
-    <!-- Grid System Container (Bento architecture) -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
-      
-      <!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
-      <div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300 tactile-noise">
-        {/* Precision Blueprint Corner Markers */}
-        <span class="absolute top-3 left-3 w-2.5 h-2.5 border-t border-l border-brand-arcticBlue/30"></span>
-        <span class="absolute top-3 right-3 w-2.5 h-2.5 border-t border-r border-brand-arcticBlue/30"></span>
-        <span class="absolute bottom-3 left-3 w-2.5 h-2.5 border-b border-l border-brand-arcticBlue/30"></span>
-        <span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-b border-r border-brand-arcticBlue/30"></span>
-        
-        <div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
-        <div>
-          <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6">
-            <span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
-            Sorglos-Websites für den Mittelstand
-          </div>
-          <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
-            Digitales Sorglos-Paket.<br/>
-            <span class="text-brand-arcticBlue">Für Handwerk & Mittelstand.</span>
-          </h1>
-          <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
-            Wir bauen, pflegen und hosten Ihre neue Website. Absolut zuverlässig. DSGVO-konform auf deutschen Servern. Ohne Aufwand für Sie.
+  <main>
+    {/* Clean, modular Hero and Bento section (0 KB JS, tactile details) */}
+    <HeroAndBento />
+    
+    <!-- Contact section (separate, clean layout) -->
+    <section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
+      <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise">
+          <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
+          <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
+          
+          <h2 class="text-3xl font-extrabold text-white mb-2 uppercase tracking-tight">Bereit für Ihr Projekt?</h2>
+          <p class="text-zinc-400 text-xs mb-8">
+            Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
           </p>
-        </div>
-        <div class="mt-8 flex flex-wrap gap-4 relative z-10">
-          <a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
-            Projekt anfragen
-            <FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" />
-          </a>
-          <a href="/templates" class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-900/50 backdrop-blur border border-white/10 text-white font-semibold text-xs tracking-wider uppercase rounded hover:scale-[1.02] hover:border-brand-arcticBlue/50 hover:shadow-md transition-all duration-300">
-            Template-Katalog entdecken
-            <FaArrowRight class="w-3 h-3 text-brand-arcticBlue" />
-          </a>
-        </div>
-      </div>
-
-      <!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
-      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2>
-          <p class="text-zinc-400 text-xs leading-relaxed">
-            Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt. Keine versteckten Kosten, vollkommen transparent.
-          </p>
-        </div>
-        <div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1">
-          <span>[ ALL-IN-ONE SOLUTION ]</span>
-        </div>
-      </div>
-
-      <!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
-      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
-          <p class="text-zinc-400 text-xs leading-relaxed">
-            Echte, messbare Geschwindigkeit für Ihre Kunden. Optimierter Code, der schnell lädt.
-          </p>
-        </div>
-        <div class="mt-6">
-          <div class="flex items-end justify-between mb-1">
-            <span class="text-[10px] font-mono text-zinc-500">PAGESPEED SCORE</span>
-            <span class="text-emerald-400 font-mono text-sm font-bold">> 95%</span>
-          </div>
-          <div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden">
-            <div class="bg-emerald-400 h-full w-[96%] transition-all duration-500"></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
-      <div id="services" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
-        
-        <div class="max-w-md">
-          <div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
-            <FaLaptopCode class="w-6 h-6" />
-          </div>
-          <h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3>
-          <p class="text-zinc-400 text-xs leading-relaxed">
-            Individuelles Design & Entwicklung von Grund auf. Keine billigen Standard-Templates. Hochwertiger Code, der zu Ihrem Handwerksbetrieb passt.
-          </p>
-        </div>
-        <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto relative z-10">
-          <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Individuelles Konzept
-          </div>
-          <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener, sauberer Code
-          </div>
-          <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Optimiert für Mobilgeräte
-          </div>
-        </div>
-      </div>
-
-      <!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
-      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
-            <FaSearchDollar class="w-5 h-5" />
-          </div>
-          <h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
-          <p class="text-zinc-400 text-xs leading-relaxed">
-            Lokale Auffindbarkeit bei Google. Wir sorgen dafür, dass Kunden in Ihrer Region Sie direkt finden.
-          </p>
-        </div>
-      </div>
-
-      <!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
-      <div id="tech" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">Präzise Werkzeuge</h3>
-          <p class="text-zinc-400 text-xs leading-relaxed mb-6">
-            Wir nutzen modernste, stabile Werkzeuge für maximale Ladegeschwindigkeiten und absolute Ausfallsicherheit.
-          </p>
-        </div>
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 relative z-10">
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">Astro Framework</span>
-          </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
-          </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">React UI</span>
-          </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">Deutsches Hosting</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
-      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
-            <FaServer class="w-5 h-5" />
-          </div>
-          <h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
-          <p class="text-zinc-400 text-xs leading-relaxed">
-            Sicheres, DSGVO-konformes Hosting auf deutschen Servern. Komplett gewartet inklusive Backups.
-          </p>
-        </div>
-      </div>
-
-      <!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
-      <div id="concept" class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
-        
-        <div>
-          <h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3>
-          <ol class="space-y-4">
-            <li class="flex gap-3">
-              <span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span>
+          
+          <form class="space-y-4" onsubmit="event.preventDefault()">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <h4 class="text-xs font-bold text-white">Erstgespräch</h4>
-                <p class="text-[10px] text-zinc-400">Analyse Ihrer Anforderungen.</p>
+                <label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
+                <input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
               </div>
-            </li>
-            <li class="flex gap-3">
-              <span class="text-brand-arcticBlue font-mono text-xs font-bold">02</span>
               <div>
-                <h4 class="text-xs font-bold text-white">Design & Code</h4>
-                <p class="text-[10px] text-zinc-400">Programmierung & SEO.</p>
+                <label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
+                <input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
               </div>
-            </li>
-            <li class="flex gap-3">
-              <span class="text-brand-arcticBlue font-mono text-xs font-bold">03</span>
-              <div>
-                <h4 class="text-xs font-bold text-white">Hosting & Launch</h4>
-                <p class="text-[10px] text-zinc-400">Livegang & Betreuung.</p>
-              </div>
-            </li>
-          </ol>
-        </div>
-      </div>
-
-      <!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
-      <div id="contact" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 transition-all duration-300 group relative tactile-noise">
-        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
-        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
-        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
-        <h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3>
-        <p class="text-zinc-400 text-xs mb-8">
-          Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.
-        </p>
-        
-        <form class="space-y-4">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <div>
-              <label for="name" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Name</label>
-              <input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
             </div>
             <div>
-              <label for="email" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">E-Mail</label>
-              <input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
+              <label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
+              <textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
             </div>
-          </div>
-          <div>
-            <label for="message" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Nachricht</label>
-            <textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
-          </div>
-          <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
-            Senden
-          </button>
-        </form>
+            <button type="submit" class="w-full py-3 bg-brand-arcticBlue text-zinc-950 font-bold text-xs uppercase tracking-wider rounded hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-brand-arcticBlue focus:outline-none">
+              Anfrage senden
+            </button>
+          </form>
+        </div>
       </div>
-
-    </div>
+    </section>
   </main>
   
   <Footer />