design: implement Bento-Grid and Corporate Dark Mode redesign

funktionen.md

@@ -1,33 +1,43 @@
 # Website Funktionen & Designkonzept - N&D i-t SOLUTIONS
 
 ## 1. Design & Aussehen (Aesthetics)
-- **Stil**: Modernes, premium Tech-Design. Kombination aus dunklem Modus (Dark Mode) und edlen Akzentfarben (Neon-Blau, Violett).
+- **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode). 
-- **Glassmorphismus**: Teiltransparente Hintergründe mit Unschärfe-Effekt (backdrop-filter: blur) für Karten und die Navigationsleiste.
+- **Farben**: Tiefes Anthrazit/Schwarz, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe.
-- **Typografie**: Moderne Sans-Serif Schriftart (z.B. Outfit oder Inter via Google Fonts).
+- **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
-- **Layout**: Vollständig responsiv (optimiert für Smartphones, Tablets, Desktops).
+- **Karten-Stil**: Mattes Finish (Subtiler Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit.
+- **Typografie**: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
+- **Layout**: Streng responsiv mit Fokus auf fehlerfreie Desktop-Raster und saubere Mobile-Kompression.
 
 ## 2. Effekte & Interaktion (Wirkung)
-- **Scroll-Animationen**: Sanftes Einblenden (Fade-In) von Sektionen beim Scrollen.
+- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
-- **Hover-Effekte**: 
+- **Grid-Hover**: Angesteuerte Bento-Zellen heben sich durch eine minimale Aufhellung des Hintergrunds ab.
-  - Buttons vergrößern sich minimal und leuchten leicht.
+- **Bento-Skalierung**: Inhaltselemente innerhalb einer Zelle verschieben sich bei Hover dezent (z. B. Pfeil-Icon wandert nach rechts oben).
-  - Service-Karten erhalten einen farbigen Rahmen-Gradienten bei Mausberührung.
+- **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
-- **Smooth Scroll**: Fließendes Navigieren zu den einzelnen Sektionen über das Menü.
-- **Sticky Navbar**: Navigationsleiste bleibt beim Scrollen oben fixiert und wird leicht transparent.
 
-## 3. Struktur & Sektionen
+## 3. Struktur & Sektionen (Bento-Architektur)
-- **Navbar (Navigation)**: Logo, Links zu Leistungen, Tech-Stack, Über uns, Kontakt. Button für Erstgespräch.
+
-- **Hero-Sektion**:
+### Navbar (Navigation)
-  - *Überschrift*: "Digitale Exzellenz für Ihr Unternehmen"
+- **Komponenten**: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen".
-  - *Subtext*: "Wir bauen schnelle, moderne und SEO-optimierte Websites für Kleinbetriebe und Dienstleister."
+
-  - *Call-to-Action*: Button "Projekt starten" & "Mehr erfahren".
+### Hero- & Wert-Sektion (Großes Bento-Raster oben)
-- **Services (Dienstleistungen)**:
+- **Zelle 1 (Groß - Hauptfokus)**: 
-  - *Karten*: Webdesign, Performance-Optimierung, SEO & Auffindbarkeit, Wartung & Support.
+  - *Überschrift*: "Webdesign, das konvertiert. Ohne Kompromisse."
-- **Tech-Stack**:
+  - *Subtext*: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google."
-  - Visualisierung moderner Technologien (Astro, Tailwind CSS, React, Node.js).
+  - *CTA*: Primärer Button "Projekt anfragen".
-- **About (Über uns)**:
+- **Zelle 2 (Mittel - Das Versprechen)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code.
-  - Vorstellung von N&D i-t SOLUTIONS, Fokus auf persönlichen Service und faire Preise für Kleinbetriebe.
+- **Zelle 3 (Klein - USP)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90).
-- **Contact (Kontakt)**:
+
-  - Kontaktformular mit interaktiven Eingabefeldern.
+### Services & Expertise (Bento-Raster Mitte)
-  - Direktkontakt (E-Mail, Telefon).
+- **Zelle 4 (Lang - Kernleistung)**: Individuelles Webdesign & UI/UX-Entwicklung von Grund auf.
-- **Footer**:
+- **Zelle 5 (Quadratisch)**: SEO-Fundament (Semantischer Code, strukturierte Daten für Google).
-  - Links zu Impressum und Datenschutz, Social-Media-Icons, Copyright.
+- **Zelle 6 (Quadratisch)**: Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates).
+
+### Tech-Stack & Methode (Bento-Raster unten)
+- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Sanity CMS).
+- **Zelle 8 (Mittel - Da noch keine Kunden)**: "Unser Ansatz" – Transparenter 3-Schritte-Prozess vom Erstgespräch zum Launch.
+
+### Contact (Kontakt-Zone)
+- **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
+
+### Footer
+- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.

src/components/Navbar.astro

@@ -1,44 +1,36 @@
 ---
 // src/components/Navbar.astro
-import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
+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-4 bg-transparent">
+<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">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex items-center justify-between h-16">
+    <div class="flex items-center justify-between h-14">
       
       <!-- Logo -->
       <a href="#" class="flex items-center gap-2 group">
-        <span class="text-xl sm:text-2xl font-bold tracking-wider text-white select-none">
+        <span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
-          N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent group-hover:animate-pulse">i-t SOLUTIONS</span>
+          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="#" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Home</a>
+        <a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Services</a>
-        <a href="#services" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Services</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="#tech" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan 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">Konzept</a>
-        <a href="#about" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">About</a>
-        <a href="#contact" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Kontakt</a>
       </nav>
 
       <!-- Right controls -->
       <div class="flex items-center gap-4">
-        <!-- Theme Toggle -->
-        <button id="theme-toggle" class="p-2.5 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-cyan" aria-label="Toggle Theme">
-          <span class="dark:hidden"><FaMoon class="w-5 h-5 text-yellow-300" /></span>
-          <span class="hidden dark:inline"><FaSun class="w-5 h-5 text-orange-400" /></span>
-        </button>
-
         <!-- CTA button -->
-        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-5 py-2 text-xs font-semibold tracking-wider text-white border border-brand-cyan rounded-full hover:bg-brand-cyan hover:text-brand-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(0,229,255,0.4)]">
+        <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">
-          Anfrage starten
+          Erstgespräch buchen
         </a>
 
         <!-- Mobile menu button -->
-        <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all focus:outline-none" aria-label="Open Menu">
+        <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">
-          <FaBars class="w-6 h-6" />
+          <FaBars class="w-5 h-5" />
         </button>
       </div>
 
@@ -46,23 +38,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
   </div>
 
   <!-- Mobile Menu Drawer -->
-  <div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-primary/95 backdrop-blur-lg md:hidden translate-x-full transition-transform duration-300 ease-in-out">
+  <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-white/10">
+    <div class="flex justify-between items-center p-6 border-b border-brand-darkBorder">
-      <span class="text-xl font-bold tracking-wider text-white">
+      <span class="text-lg font-bold tracking-wider text-white">
-        N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">i-t SOLUTIONS</span>
+        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-lg bg-white/10 text-white hover:bg-white/20 transition-all" aria-label="Close Menu">
+      <button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
-        <FaTimes class="w-6 h-6" />
+        <FaTimes class="w-5 h-5" />
       </button>
     </div>
-    <nav class="flex flex-col gap-6 p-8 text-center text-xl font-semibold text-white">
+    <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white">
-      <a href="#" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-1">Home</a>
+      <a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Services</a>
-      <a href="#services" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-2">Services</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="#tech" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-3">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">Konzept</a>
-      <a href="#about" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-4">About</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">
-      <a href="#contact" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-5">Kontakt</a>
+        Erstgespräch buchen
-      <a href="#contact" class="inline-flex justify-center items-center py-3 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full mt-4" id="mobile-link-6">
-        Anfrage starten
       </a>
     </nav>
   </div>
@@ -71,28 +61,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
 <script>
   // Elements
   const header = document.getElementById('main-header');
-  const themeToggle = document.getElementById('theme-toggle');
   const mobileMenuBtn = document.getElementById('mobile-menu-btn');
   const mobileCloseBtn = document.getElementById('mobile-close-btn');
   const mobileMenu = document.getElementById('mobile-menu');
 
-  // Change header background on scroll
+  // Change header opacity on scroll
   window.addEventListener('scroll', () => {
-    if (window.scrollY > 50) {
+    if (window.scrollY > 30) {
-      header?.classList.remove('bg-transparent', 'py-4');
+      header?.classList.remove('bg-brand-darkBg/30');
-      header?.classList.add('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
+      header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
     } else {
-      header?.classList.remove('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
+      header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
-      header?.classList.add('bg-transparent', 'py-4');
+      header?.classList.add('bg-brand-darkBg/30');
     }
   });
 
-  // Toggle Theme
-  themeToggle?.addEventListener('click', () => {
-    const isDark = document.documentElement.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : 'light');
-  });
-
   // Mobile Menu open/close
   const toggleMobileMenu = () => {
     mobileMenu?.classList.toggle('translate-x-full');
@@ -102,7 +85,7 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
   mobileCloseBtn?.addEventListener('click', toggleMobileMenu);
 
   // Close mobile menu on link click
-  for (let i = 1; i <= 6; i++) {
+  for (let i = 1; i <= 4; i++) {
     const link = document.getElementById(`mobile-link-${i}`);
     link?.addEventListener('click', toggleMobileMenu);
   }

src/layouts/Layout.astro

@@ -34,7 +34,7 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
 			})();
 		</script>
 	</head>
-	<body class="bg-brand-lightBg text-brand-primary dark:bg-brand-darkBg dark:text-gray-100 font-sans transition-colors duration-300 antialiased selection:bg-brand-cyan selection:text-brand-primary">
+	<body class="bg-brand-darkBg text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
 		<slot />
 	</body>
 </html>

src/pages/index.astro

@@ -1,22 +1,222 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
-import Hero from '../components/Hero.astro';
-import Services from '../components/Services.astro';
-import TechStack from '../components/TechStack.astro';
-import About from '../components/About.astro';
-import Contact from '../components/Contact.astro';
 import Footer from '../components/Footer.astro';
+import { 
+  FaArrowUp, 
+  FaCheck, 
+  FaLaptopCode, 
+  FaSearchDollar, 
+  FaServer, 
+  FaArrowRight, 
+  FaReact, 
+  FaLock, 
+  FaEnvelope, 
+  FaPhoneAlt, 
+  FaShieldAlt 
+} from 'react-icons/fa';
 ---
 
-<Layout title="N&D i-t SOLUTIONS | Professionelles Webdesign & Websites für Kleinbetriebe">
+<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
   <Navbar />
-	<main>
+  
-		<Hero />
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
-		<Services />
+    <!-- Grid System Container -->
-		<TechStack />
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
-		<About />
+      
+      <!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
+      <div class="md:col-span-2 md:row-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300">
+        <div class="absolute inset-0 bg-radial-gradient 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>
+            Webdesign & UI/UX Entwicklung
+          </div>
+          <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
+            Webdesign, das konvertiert.<br/>
+            <span class="text-brand-arcticBlue">Ohne Kompromisse.</span>
+          </h1>
+          <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
+            Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. 
+            Technisch perfekt programmiert. Sichtbar bei Google.
+          </p>
+        </div>
+        <div class="mt-8">
+          <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>
+        </div>
+      </div>
+
+      <!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
+      <div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+        <div>
+          <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Keine Vorlagen</h2>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Jedes Design entsteht individuell direkt im Code. Keine vorgefertigten Pagebuilder-Templates. 
+            Maximale Flexibilität, minimaler Overhead.
+          </p>
+        </div>
+        <div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1">
+          <span>[ INDIVIDUELLER CODE ]</span>
+        </div>
+      </div>
+
+      <!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
+      <div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+        <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">
+            Optimierte Ladezeiten für beste User Experience und Conversion Rates.
+          </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">> 98%</span>
+          </div>
+          <div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden">
+            <div class="bg-emerald-400 h-full w-[98%] transition-all duration-500"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ZELLE 4: KERNLEISTUNG (Span 2 cols on md) -->
+      <div id="services" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group">
+        <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 von Grund auf</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Wir gestalten benutzerfreundliche Interfaces, die Besucher fesseln und zu Kunden machen. 
+            Modernste Design-Pattern gepaart mit sauberem HTML5/CSS3.
+          </p>
+        </div>
+        <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto">
+          <div class="flex items-center gap-2 text-zinc-300 text-xs">
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping
+          </div>
+          <div class="flex items-center gap-2 text-zinc-300 text-xs">
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Responsive Designs
+          </div>
+          <div class="flex items-center gap-2 text-zinc-300 text-xs">
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Modern UX Flows
+          </div>
+        </div>
+      </div>
+
+      <!-- ZELLE 5: SEO-FUNDAMENT (Span 1 col) -->
+      <div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+        <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">SEO-Fundament</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Semantischer Aufbau, fehlerfreie Überschriftenstruktur und Google Lighthouse-Optimierung standardmäßig integriert.
+          </p>
+        </div>
+      </div>
+
+      <!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
+      <div id="tech" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group">
+        <div>
+          <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">State-of-the-Art Tools</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed mb-6">
+            Wir setzen auf zukunftssichere Technologien für maximale Geschwindigkeit, Wartbarkeit und Skalierbarkeit.
+          </p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">Astro</span>
+          </div>
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 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-zinc-800 rounded hover:border-zinc-700 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">React</span>
+          </div>
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">Sanity CMS</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ZELLE 6: WARTUNG & HOSTING (Span 1 col) -->
+      <div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+        <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 & DSGVO</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Updates, Backups, SSL-Zertifikate und rechtssichere Cookie-Consent-Lösungen aus einer Hand.
+          </p>
+        </div>
+      </div>
+
+      <!-- ZELLE 8: UNSER ANSATZ (Span 1 col) -->
+      <div id="concept" class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+        <div>
+          <h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser Ansatz</h3>
+          <ol class="space-y-4">
+            <li class="flex gap-3">
+              <span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span>
+              <div>
+                <h4 class="text-xs font-bold text-white">Erstgespräch</h4>
+                <p class="text-[10px] text-zinc-400">Analyse Ihrer Anforderungen.</p>
+              </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">Entwicklung</h4>
+                <p class="text-[10px] text-zinc-400">Programmierung & SEO-Optimierung.</p>
+              </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">Launch</h4>
+                <p class="text-[10px] text-zinc-400">Livegang & Support.</p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </div>
+
+      <!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
+      <div id="contact" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 sm:p-10 transition-all duration-300 group">
+        <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-zinc-800 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-zinc-800 rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
+            </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-zinc-800 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>
+      </div>
+
+    </div>
   </main>
-	<Contact />
+  
   <Footer />
 </Layout>

tailwind.config.mjs

@@ -6,11 +6,11 @@ export default {
 		extend: {
 			colors: {
 				brand: {
-					primary: '#0a0a0a',
+					darkBg: '#09090b',
-					cyan: '#00e5ff',
+					darkCard: '#18181b',
-					magenta: '#ff00ff',
+					darkBorder: '#27272a',
-					darkBg: '#111111',
+					arcticBlue: '#00d2ff',
-					lightBg: '#f9fafb',
+					lightText: '#f4f4f5',
 				}
 			}
 		},