From 78bd444bdbb006c40fe380c56e6900b9677a39bf Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 03:33:18 +0200
Subject: [PATCH] feat: replace bento grid with hybrid liquid glass design and
 add darkmode toggle

---
 src/components/HeroAndBento.astro       | 150 ---------------
 src/components/HeroAndLiquidGlass.astro | 236 ++++++++++++++++++++++++
 src/components/Navbar.astro             |  84 ++++++---
 src/layouts/Layout.astro                |   2 +-
 src/pages/index.astro                   |   6 +-
 5 files changed, 303 insertions(+), 175 deletions(-)
 delete mode 100644 src/components/HeroAndBento.astro
 create mode 100644 src/components/HeroAndLiquidGlass.astro

diff --git a/src/components/HeroAndBento.astro b/src/components/HeroAndBento.astro
deleted file mode 100644
index 7bd3fe0..0000000
--- a/src/components/HeroAndBento.astro
+++ /dev/null
@@ -1,150 +0,0 @@
-<!-- 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/components/HeroAndLiquidGlass.astro b/src/components/HeroAndLiquidGlass.astro
new file mode 100644
index 0000000..7643d7b
--- /dev/null
+++ b/src/components/HeroAndLiquidGlass.astro
@@ -0,0 +1,236 @@
+---
+// src/components/HeroAndLiquidGlass.astro
+---
+
+<!-- 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">
+  <!-- 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>
+  
+  <!-- Subtle Blueprint-Raster -->
+  <div class="absolute inset-0 opacity-[0.04] dark:opacity-[0.02] pointer-events-none transition-opacity duration-300" style="background-size: 30px 30px; background-image: linear-gradient(to right, #0284c7 1px, transparent 1px), linear-gradient(to bottom, #0284c7 1px, transparent 1px);"></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 lg:grid-cols-12 gap-12 items-center">
+      
+      <!-- Text-Spalte -->
+      <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">
+          Moderne Websites <br/>
+          <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-600 to-indigo-600 dark:from-sky-400 dark:via-indigo-300 dark:to-white">
+            für Ihren Betrieb.
+          </span>
+        </h1>
+        
+        <p class="text-slate-600 dark:text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed transition-colors duration-300">
+          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>
+        
+        <div class="flex flex-wrap gap-4 pt-2">
+          <a href="#contact" class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-[0_4px_20px_rgba(2,132,199,0.2)] dark:shadow-[0_0_20px_rgba(56,189,248,0.2)]">
+            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-white hover:bg-slate-50 dark:bg-slate-900/60 dark:hover:bg-slate-800 border border-slate-200 dark:border-white/10 text-slate-700 dark:text-white font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-sm backdrop-blur-md">
+            Templates ansehen
+          </a>
+        </div>
+      </div>
+      
+      <!-- Liquid Glass Visual Container (Rechte Spalte) -->
+      <div class="lg:col-span-5 relative flex justify-center items-center">
+        <!-- Weicher Glow -->
+        <div class="absolute w-72 h-72 bg-gradient-to-tr from-sky-200/30 to-indigo-200/30 dark:from-sky-400/20 dark:to-indigo-500/20 blur-3xl pointer-events-none rounded-full transition-colors duration-300"></div>
+        
+        <!-- Milchglas Masterpiece Element (Hybrid Liquid Glass) -->
+        <div class="relative w-full max-w-[360px] aspect-[4/5] rounded-[32px] border border-white/80 dark:border-white/10 bg-white/40 dark:bg-slate-950/40 backdrop-blur-2xl shadow-[0_20px_50px_rgba(31,38,135,0.06)] dark:shadow-[0_24px_50px_-12px_rgba(0,0,0,0.5)] p-6 flex flex-col justify-between overflow-hidden group hover:border-sky-200/60 dark:hover:border-white/20 transition-all duration-500 animate-float">
+          <!-- Textur-Noise -->
+          <div class="absolute inset-0 opacity-[0.02] dark:opacity-[0.01] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px] transition-opacity duration-300"></div>
+          
+          <!-- Helle innere Sphären -->
+          <div class="absolute -top-12 -right-12 w-32 h-32 rounded-full bg-sky-200/35 dark:bg-sky-400/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
+          <div class="absolute -bottom-16 -left-16 w-40 h-40 rounded-full bg-indigo-200/25 dark:bg-indigo-500/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
+          
+          <!-- Taktile Details -->
+          <span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/30"></span>
+          <span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/30"></span>
+          <span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/30"></span>
+          <span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/30"></span>
+
+          <!-- Header -->
+          <div class="flex justify-between items-center relative z-10">
+            <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-500 tracking-widest">SYSTEM STATUS: ACTIVE</span>
+            <div class="flex gap-1">
+              <span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-red-500/60"></span>
+              <span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-yellow-500/60"></span>
+              <span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-green-500/60"></span>
+            </div>
+          </div>
+          
+          <!-- Grafik -->
+          <div class="my-auto relative z-10 flex flex-col items-center">
+            <div class="w-24 h-24 rounded-full border border-sky-200 dark:border-white/10 flex items-center justify-center bg-white/60 dark:bg-white/[0.02] relative group-hover:border-sky-400/40 transition-colors duration-500 shadow-inner">
+              <svg class="w-8 h-8 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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>
+            <span class="text-xs font-mono text-slate-800 dark:text-zinc-300 mt-4 tracking-wider uppercase font-bold">Lighthouse Perfekt</span>
+            <span class="text-[10px] text-slate-500 font-mono mt-1">Speed Index: 0.4s</span>
+          </div>
+
+          <!-- Footer -->
+          <div class="relative z-10 border-t border-slate-100 dark:border-white/5 pt-4">
+            <div class="flex justify-between items-baseline">
+              <span class="text-2xl 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>
+      </div>
+      
+    </div>
+  </div>
+</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">
+  <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">
+    
+    <!-- Hero And Liquid Glass Details / Lead In -->
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 items-start reveal">
+      <div class="lg:col-span-8">
+        <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase transition-colors duration-300">
+          Ihr digitaler Mitarbeiter für Neukunden.
+        </h2>
+        <p class="text-slate-600 dark:text-zinc-400 text-sm mt-4 leading-relaxed max-w-2xl transition-colors duration-300">
+          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>
+      
+      <!-- Keypoints in Light/Dark-Glass Container -->
+      <div class="lg:col-span-4 bg-white/50 border border-white dark:bg-transparent dark:border-white/5 p-6 rounded-2xl shadow-sm space-y-4 transition-colors duration-300">
+        <div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
+          <svg class="w-4 h-4 text-emerald-500 dark: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-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
+          <svg class="w-4 h-4 text-emerald-500 dark: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-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
+          <svg class="w-4 h-4 text-emerald-500 dark: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>
+
+    <!-- Liquid Glass Service Grid -->
+    <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">
+        <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-55 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"><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-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign</h3>
+          <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
+            Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
+      </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">
+        <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 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-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</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.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Google-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">
+        <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 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-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sicheres Hosting</h3>
+          <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
+            Serverstandort Deutschland. Tägliche Backups, SSL-Verschlüsselung und volle Einhaltung aller DSGVO-Vorgaben.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<style>
+  @keyframes drift {
+    0%, 100% { transform: translate(0px, 0px) scale(1); }
+    33% { transform: translate(30px, -50px) scale(1.08); }
+    66% { transform: translate(-20px, 20px) scale(0.95); }
+  }
+  @keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-8px) rotate(0.5deg); }
+  }
+  .animate-drift {
+    animation: drift 22s ease-in-out infinite;
+  }
+  .animate-drift-delayed {
+    animation: drift 28s ease-in-out infinite;
+    animation-delay: 4s;
+  }
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  /* Scroll-driven Reveal */
+  .reveal {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .reveal.active {
+    opacity: 1;
+    transform: translateY(0);
+  }
+</style>
+
+<script>
+  // Intersection Observer for scroll animations
+  const revealElements = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('active');
+      }
+    });
+  }, {
+    threshold: 0.05
+  });
+  
+  revealElements.forEach(el => observer.observe(el));
+</script>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index eecdef6..fe7dd1b 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,33 +3,45 @@
 import { FaBars, FaTimes } from 'react-icons/fa';
 ---
 
-<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-brand-darkBg/30 backdrop-blur-xl border-b border-brand-darkBorder">
+<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-14">
       
       <!-- Logo -->
       <a href="#" class="flex items-center gap-2 group">
-        <span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
+        <span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
           N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
         </span>
       </a>
 
       <!-- Desktop Nav Links -->
       <nav class="hidden md:flex items-center gap-8">
-        <a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Leistungen</a>
-        <a href="#tech" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
-        <a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Ablauf</a>
+        <a href="#services" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Leistungen</a>
+        <a href="#tech" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
+        <a href="#concept" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Ablauf</a>
       </nav>
 
       <!-- Right controls -->
       <div class="flex items-center gap-4">
+        <!-- Theme Toggle Button -->
+        <button id="theme-toggle" class="p-2 rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200" aria-label="Farbschema wechseln">
+          <!-- Moon Icon (shows when light mode is active -> switches to dark) -->
+          <svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+          </svg>
+          <!-- Sun Icon (shows when dark mode is active -> switches to light) -->
+          <svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+
         <!-- CTA button -->
-        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-white border border-brand-darkBorder rounded bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
+        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
           Erstgespräch buchen
         </a>
 
         <!-- Mobile menu button -->
-        <button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
+        <button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
           <FaBars class="w-5 h-5" />
         </button>
       </div>
@@ -38,20 +50,20 @@ import { FaBars, FaTimes } from 'react-icons/fa';
   </div>
 
   <!-- Mobile Menu Drawer -->
-  <div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-darkBg/98 backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
-    <div class="flex justify-between items-center p-6 border-b border-brand-darkBorder">
-      <span class="text-lg font-bold tracking-wider text-white">
+  <div id="mobile-menu" class="fixed inset-0 z-50 bg-white dark:bg-brand-darkBg backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
+    <div class="flex justify-between items-center p-6 border-b border-slate-200 dark:border-brand-darkBorder">
+      <span class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
         N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
       </span>
-      <button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
+      <button id="mobile-close-btn" class="p-2 rounded bg-slate-100 dark:bg-zinc-900 text-slate-700 dark:text-white hover:bg-slate-200 dark:hover:bg-zinc-800 transition-all" aria-label="Close Menu">
         <FaTimes class="w-5 h-5" />
       </button>
     </div>
-    <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white">
-      <a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
-      <a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
-      <a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
-      <a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-zinc-900 text-brand-arcticBlue border border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
+    <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-slate-900 dark:text-white">
+      <a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
+      <a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
+      <a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
+      <a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-slate-100 dark:bg-zinc-900 text-brand-arcticBlue border border-slate-200 dark:border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
         Erstgespräch buchen
       </a>
     </nav>
@@ -65,14 +77,14 @@ import { FaBars, FaTimes } from 'react-icons/fa';
   const mobileCloseBtn = document.getElementById('mobile-close-btn');
   const mobileMenu = document.getElementById('mobile-menu');
 
-  // Change header opacity on scroll
+  // Change header styling on scroll
   window.addEventListener('scroll', () => {
     if (window.scrollY > 30) {
-      header?.classList.remove('bg-brand-darkBg/30');
-      header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
+      header?.classList.remove('bg-white/30', 'dark:bg-brand-darkBg/30');
+      header?.classList.add('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
     } else {
-      header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
-      header?.classList.add('bg-brand-darkBg/30');
+      header?.classList.remove('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
+      header?.classList.add('bg-white/30', 'dark:bg-brand-darkBg/30');
     }
   });
 
@@ -89,4 +101,34 @@ import { FaBars, FaTimes } from 'react-icons/fa';
     const link = document.getElementById(`mobile-link-${i}`);
     link?.addEventListener('click', toggleMobileMenu);
   }
+
+  // Darkmode Toggle Logic
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const themeToggleBtn = document.getElementById('theme-toggle');
+
+  // Set initial icon state based on DOM class
+  function updateToggleIcons() {
+    if (document.documentElement.classList.contains('dark')) {
+      themeToggleLightIcon?.classList.remove('hidden');
+      themeToggleDarkIcon?.classList.add('hidden');
+    } else {
+      themeToggleDarkIcon?.classList.remove('hidden');
+      themeToggleLightIcon?.classList.add('hidden');
+    }
+  }
+
+  updateToggleIcons();
+
+  themeToggleBtn?.addEventListener('click', () => {
+    // Toggle class
+    if (document.documentElement.classList.contains('dark')) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+    updateToggleIcons();
+  });
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3d5f20b..053c8b6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -33,7 +33,7 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
 			})();
 		</script>
 	</head>
-	<body class="bg-brand-darkBg text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
+	<body class="bg-slate-50 dark:bg-brand-darkBg text-slate-800 dark:text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
 		<slot />
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5ee70b0..027e4b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,15 +2,15 @@
 import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
-import HeroAndBento from '../components/HeroAndBento.astro';
+import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
 ---
 
 <Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
   <Navbar />
   
   <main>
-    {/* Clean, modular Hero and Bento section (0 KB JS, tactile details) */}
-    <HeroAndBento />
+    {/* Clean, modular Hero and Liquid Glass section */}
+    <HeroAndLiquidGlass />
     
     <!-- Contact section (separate, clean layout) -->
     <section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">