diff --git a/src/components/HeroAndLiquidGlass.astro b/src/components/HeroAndLiquidGlass.astro
index f7e6f6c..859e416 100644
--- a/src/components/HeroAndLiquidGlass.astro
+++ b/src/components/HeroAndLiquidGlass.astro
@@ -16,7 +16,7 @@ const heroTemplates = [
 ---
 
 <!-- Hero-Sektion: Hybrid Liquid Glass Style & Aurora Glow -->
-<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#070A13] transition-colors duration-300">
+<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#0B0F19] transition-colors duration-300">
   <!-- Weiche, pastellfarbene Aurora Glows im Hintergrund (Light/Dark angepasst) -->
   <div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-200/50 dark:bg-sky-500/10 blur-[130px] rounded-full pointer-events-none transition-colors duration-300 animate-drift"></div>
   <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-indigo-200/40 dark:bg-indigo-500/10 blur-[150px] rounded-full pointer-events-none transition-colors duration-300 animate-drift-delayed"></div>
@@ -31,9 +31,9 @@ const heroTemplates = [
       <div class="lg:col-span-7 space-y-8">
         
         <h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300">
-          Sorgenfreies Hosting <br/>
+          Ihre Premium-Website. <br/>
           <span class="text-sky-600 dark:text-sky-400">
-            für Ihre Website.
+            Im WaaS-Abonnement.
           </span>
         </h1>
         
@@ -164,7 +164,7 @@ const heroTemplates = [
 </section>
 
 <!-- Hauptinhalte: Elegantes Hybrid-Liquid Layout (Echtes Handwerk, kein KI-Standard-Raster) -->
-<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
+<section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
   <div class="absolute inset-0 opacity-[0.02] 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -197,11 +197,11 @@ const heroTemplates = [
       </div>
     </div>
 
-    <!-- Liquid Glass Service Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+     <!-- Liquid Glass Bento Grid (3-Säulen-Architektur) -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
       
-      <!-- Card 1: Webdesign -->
-      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
+      <!-- Card 1: WaaS Premium Webdesign (Breit: col-span-2) -->
+      <div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
         <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
         <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
         
@@ -209,16 +209,19 @@ const heroTemplates = [
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
             <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sorgenfrei-Hosting</h3>
-          <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Deutsche Server, tägliche Backups und SSL-Verschlüsselung. Ihr Internetauftritt ist rundum abgesichert im monatlichen Abo.
+          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Website-as-a-Service (WaaS)</h3>
+          <p class="text-slate-600 dark:text-zinc-400 text-sm leading-relaxed transition-colors duration-300">
+            Wir erstellen Ihre neue, verkaufsstarke Premium-Website komplett schlüsselfertig. Keine hohen Einmalkosten. Für eine faire monatliche Pauschale erhalten Sie Design, Programmierung, Hosting, SSL-Verschlüsselung sowie tägliche Datensicherungen und Updates.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
+        <div class="flex justify-between items-center mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
+          <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">All-Inclusive ab 49€ / Monat</span>
+          <span class="text-xs font-bold text-sky-600 dark:text-sky-400">Festpreisgarantie</span>
+        </div>
       </div>
 
-      <!-- Card 2: SEO -->
-      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
+      <!-- Card 2: Lokale Sichtbarkeit (Schmal: col-span-1) -->
+      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
         <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
         <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
         
@@ -226,73 +229,94 @@ const heroTemplates = [
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
             <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</h3>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokales SEO</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
+            Wir optimieren Ihre Präsenz gezielt für Ihre Region. Kunden finden Sie direkt bei der Google-Suche vor Ort.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Google-Dominanz</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Lokale Dominanz</span>
       </div>
 
-      <!-- Card 3: Hosting -->
-      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
+      <!-- Card 3: DSGVO-Sicherheit (Schmal: col-span-1) -->
+      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
         <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
         <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
         
         <div>
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
-            <svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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>
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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>
           </div>
-          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign Inklusive</h3>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">100% DSGVO-sicher</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Noch keine eigene Website? Wir erstellen Ihren neuen, optimierten Internetauftritt direkt passend zum Hosting dazu.
+            Absolute Rechtssicherheit durch <i>Zero Third-Party Requests</i>. Alle Assets werden lokal geladen. Keine US-Serverabfragen, keine Abmahnfallen.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Zero Third-Party</span>
       </div>
 
-      <!-- Card 4: Lighthouse Perfekt -->
-      <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
+      <!-- Card 4: ROI-Rechner (Breit: col-span-2) -->
+      <div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[380px] shadow-sm hover:shadow-md reveal">
         <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
         <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
         
         <div>
-          <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
-            <svg class="w-5 h-5 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lighthouse Perfekt</h3>
-          <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Wir programmieren so sauber, dass wir regelmäßig die Bestnote 100/100 im Google Speed Index erzielen.
+          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-4 uppercase tracking-tight">WaaS ROI-Rechner</h3>
+          <p class="text-slate-600 dark:text-zinc-400 text-xs mb-6 leading-relaxed">
+            Rechnen Sie aus, wie viel Geld und wertvolle Zeit Sie im Vergleich zu traditionellen Einmalkäufen sparen.
           </p>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            <div class="space-y-4">
+              <div>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-cost">Aktuelle Web-Kosten (Jahr in €):</label>
+                <input type="number" id="roi-cost" value="600" 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" />
+              </div>
+              <div>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-hours">Eigenleistung Wartung (Std/Monat):</label>
+                <input type="number" id="roi-hours" value="4" 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" />
+              </div>
+            </div>
+            <div class="bg-sky-500/5 border border-sky-500/10 dark:border-sky-500/5 p-6 rounded-xl flex flex-col justify-center">
+              <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Ersparnis mit N&D WaaS:</span>
+              <p class="text-3xl font-extrabold text-sky-600 dark:text-sky-400 mt-2" id="roi-result">0 € / Jahr</p>
+              <p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium" id="roi-time">0 Stunden Lebenszeit zurück</p>
+            </div>
+          </div>
         </div>
-        <div class="flex justify-between items-baseline mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
-          <span class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span>
-          <span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span>
-        </div>
-      </div>
-
-    </div>
-
-    <!-- Showcase-Link Callout -->
-    <div class="mt-16 text-center reveal">
-      <div class="inline-flex flex-col sm:flex-row items-center gap-4 p-4 rounded-2xl border border-white/80 dark:border-white/5 bg-white/30 dark:bg-slate-950/20 backdrop-blur-md shadow-sm">
-        <span class="text-xs text-slate-600 dark:text-zinc-400">
-          Sie suchen Inspiration? Entdecken Sie unsere 20 maßgeschneiderten Design-Vorlagen.
-        </span>
-        <a href="/templates" class="inline-flex items-center gap-2 text-xs font-bold text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-white transition-colors duration-300">
-          Design-Vorlagen ansehen
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><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>
+        <script is:inline>
+          (function() {
+            const costInput = document.getElementById('roi-cost');
+            const hoursInput = document.getElementById('roi-hours');
+            const resultText = document.getElementById('roi-result');
+            const timeText = document.getElementById('roi-time');
+            
+            function calc() {
+              const cost = parseFloat(costInput.value) || 0;
+              const hours = parseFloat(hoursInput.value) || 0;
+              const waasYear = 99 * 12;
+              const currentTotalYear = cost + (hours * 50 * 12);
+              const saving = Math.max(0, currentTotalYear - waasYear);
+              
+              resultText.textContent = `${saving.toLocaleString('de-DE')} € / Jahr`;
+              timeText.textContent = `${hours * 12} Stunden Lebenszeit zurück / Jahr`;
+            }
+            
+            if (costInput && hoursInput && resultText && timeText) {
+              costInput.addEventListener('input', calc);
+              hoursInput.addEventListener('input', calc);
+              calc();
+            }
+          })();
+        </script>
       </div>
     </div>
 
+
+
   </div>
 </section>
 
 <!-- FAQ Sektion im Hybrid Liquid Glass Look -->
-<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
+<section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center mb-16">
       <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">