design: apply exact color definitions and copy text modifications from funktionen.md

funktionen.md

@@ -2,42 +2,41 @@
 
 ## 1. Design & Aussehen (Aesthetics)
 - **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode).
-- **Farben**: Tiefes Anthrazit/Schwarz, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe.
+- **Farben**: Tiefes Anthrazit/Schwarz (#0B0F19), reines Weiß, dezentes Arktis-Blau (#38BDF8) als Fokusfarbe.
 - **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
-- **Karten-Stil**: Mattes Finish (Subtiler Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit.
+- **Karten-Stil**: Mattes Finish (Subtiler 1px Border in Dunkelgrau statt starkem Glassmorphismus).
 - **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)
 - **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
-- **Grid-Hover**: Angesteuerte Bento-Zellen heben sich durch eine minimale Aufhellung des Hintergrunds ab.
-- **Bento-Skalierung**: Inhaltselemente innerhalb einer Zelle verschieben sich bei Hover dezent (z. B. Pfeil-Icon wandert nach rechts oben).
+- **Grid-Hover**: Angesteuerte Bento-Zellen erhalten einen minimalen arktis-blauen Schein am Rand.
 - **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
 
-## 3. Struktur & Sektionen (Bento-Architektur)
+## 3. Struktur & Sektionen (Die 3-Säulen-Bento-Architektur)
 
 ### Navbar (Navigation)
-- **Komponenten**: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen".
+- **Komponenten**: Logo, Direktlinks (Leistungen, Tech-Stack, Ablauf), Button "Erstgespräch buchen".
 
-### Hero- & Wert-Sektion (Großes Bento-Raster oben)
+### Hero- & Wert-Sektion (Oberes Raster)
 - **Zelle 1 (Groß - Hauptfokus)**: 
-  - *Überschrift*: "Webdesign, das konvertiert. Ohne Kompromisse."
-  - *Subtext*: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google."
+  - *Überschrift*: "Websites, die performen. Von der Idee bis zum Live-Gang."
+  - *Subtext*: "Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut."
   - *CTA*: Primärer Button "Projekt anfragen".
-- **Zelle 2 (Mittel - Das Versprechen)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code.
-- **Zelle 3 (Klein - USP)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90).
+- **Zelle 2 (Mittel - Das Versprechen)**: "Full-Service-Garantie" – Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt.
+- **Zelle 3 (Klein - USP)**: Visualisierung: PageSpeed-Score >95% (Fokus auf extreme Ladegeschwindigkeit).
 
-### Services & Expertise (Bento-Raster Mitte)
-- **Zelle 4 (Lang - Kernleistung)**: Individuelles Webdesign & UI/UX-Entwicklung von Grund auf.
-- **Zelle 5 (Quadratisch)**: SEO-Fundament (Semantischer Code, strukturierte Daten für Google).
-- **Zelle 6 (Quadratisch)**: Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates).
+### Die 3 Kern-Säulen (Zentrales Bento-Raster)
+- **Zelle 4 (Groß - Säule 1: Webdesign)**: 
+  - *Inhalt*: Individuelles UI/UX-Design & Entwicklung von Grund auf (Keine billigen WordPress-Templates). Blitzschnell im Code umgesetzt.
+- **Zelle 5 (Mittel - Säule 2: Sichtbarkeit & SEO)**: 
+  - *Inhalt*: Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
+- **Zelle 6 (Mittel - Säule 3: Hosting & Betrieb)**: 
+  - *Inhalt*: Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
 
-### 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.
+### Tech-Stack & Methode (Unteres Raster)
+- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Vercel/Netlify).
+- **Zelle 8 (Mittel - Vertrauensaufbau)**: "Unser 3-Schritte-Prozess" – 1. Erstgespräch | 2. Design & Code | 3. Hosting & Launch.
 
-### Contact (Kontakt-Zone)
+### Contact & Footer
 - **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
-
-### Footer
-- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.
+- **Footer**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.

src/components/Navbar.astro

@@ -16,9 +16,9 @@ import { FaBars, FaTimes } from 'react-icons/fa';
 
       <!-- 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">Services</a>
+        <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">Konzept</a>
+        <a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Ablauf</a>
       </nav>
 
       <!-- Right controls -->
@@ -48,9 +48,9 @@ import { FaBars, FaTimes } from 'react-icons/fa';
       </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">Services</a>
+      <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">Konzept</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">
         Erstgespräch buchen
       </a>

src/pages/index.astro

@@ -3,17 +3,13 @@ import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
 import { 
-  FaArrowUp, 
   FaCheck, 
   FaLaptopCode, 
   FaSearchDollar, 
   FaServer, 
   FaArrowRight, 
-  FaReact, 
-  FaLock, 
   FaEnvelope, 
-  FaPhoneAlt, 
-  FaShieldAlt 
+  FaPhoneAlt 
 } from 'react-icons/fa';
 ---
 
@@ -21,24 +17,23 @@ import {
   <Navbar />
   
   <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
-    <!-- Grid System Container -->
+    <!-- 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-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 class="md:col-span-2 md:row-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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-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>
             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>
+            Websites, die performen.<br/>
+            <span class="text-brand-arcticBlue">Von der Idee bis zum Live-Gang.</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.
+            Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut.
           </p>
         </div>
         <div class="mt-8">
@@ -50,48 +45,46 @@ import {
       </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 class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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>
+          <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">
-            Jedes Design entsteht individuell direkt im Code. Keine vorgefertigten Pagebuilder-Templates. 
-            Maximale Flexibilität, minimaler Overhead.
+            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>[ INDIVIDUELLER CODE ]</span>
+          <span>[ ALL-IN-ONE SOLUTION ]</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 class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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.
+            Visualisierung des Pagespeed-Wertes. Extreme Ladegeschwindigkeit für glückliche Besucher.
           </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>
+            <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-[98%] transition-all duration-500"></div>
+            <div class="bg-emerald-400 h-full w-[96%] 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">
+      <!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
+      <div id="services" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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>
+          <h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</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.
+            Individuelles UI/UX-Design & Entwicklung von Grund auf. Keine billigen WordPress-Templates. Blitzschnell im Code umgesetzt.
           </p>
         </div>
         <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto">
@@ -99,68 +92,68 @@ import {
             <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
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener Code
           </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
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> SEO-optimiert
           </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">
+      <!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
+      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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>
+          <h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Semantischer Aufbau, fehlerfreie Überschriftenstruktur und Google Lighthouse-Optimierung standardmäßig integriert.
+            Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
           </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 id="tech" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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.
+            Wir setzen auf modernste Technologien für maximale Ladezeiten, Sicherheit 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">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue 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">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue 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">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue 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 class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">Vercel / Netlify</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">
+      <!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
+      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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>
+          <h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Updates, Backups, SSL-Zertifikate und rechtssichere Cookie-Consent-Lösungen aus einer Hand.
+            Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
           </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">
+      <!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
+      <div id="concept" class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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>
+          <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>
@@ -172,15 +165,15 @@ import {
             <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>
+                <h4 class="text-xs font-bold text-white">Design & Code</h4>
+                <p class="text-[10px] text-zinc-400">Programmierung & SEO.</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>
+                <h4 class="text-xs font-bold text-white">Hosting & Launch</h4>
+                <p class="text-[10px] text-zinc-400">Livegang & Betreuung.</p>
               </div>
             </li>
           </ol>
@@ -188,7 +181,7 @@ import {
       </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">
+      <div id="contact" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] 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.
@@ -198,16 +191,16 @@ import {
           <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" />
+              <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-zinc-800 rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
+              <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>
           </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>
+            <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

tailwind.config.mjs

@@ -6,10 +6,10 @@ export default {
 		extend: {
 			colors: {
 				brand: {
-					darkBg: '#09090b',
-					darkCard: '#18181b',
-					darkBorder: '#27272a',
-					arcticBlue: '#00d2ff',
+					darkBg: '#0b0f19',
+					darkCard: '#151b2c',
+					darkBorder: '#232d45',
+					arcticBlue: '#38bdf8',
 					lightText: '#f4f4f5',
 				}
 			}