style: remove text gradients and hybridize footer styling

.agents/AGENTS.md

@@ -0,0 +1,21 @@
+# UI/UX Best Practices
+
+## UI/UX Dos
+- **Prioritize Accessibility:** Ensure text has a high contrast ratio and include alternative text for all images.
+- **Maintain Consistency:** Use uniform typography, spacing systems (e.g., 8-pixel grids), and color palettes across all pages to reduce user cognitive load.
+- **Design Clear Visual Hierarchy:** Use size, weight, and strategic whitespace to make the primary action (CTA) stand out clearly.
+- **Implement Single-Column Forms:** Keep form fields stacked in a single column for an easier, seamless input flow.
+- **Optimize for Touch (Fitts's Law):** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile.
+- **Apply Hick's Law:** Limit user choices to prevent decision paralysis. Simplify navigation and form inputs.
+- **Chunk Information (Miller's Law):** Break down complex content into smaller, readable chunks (groups of 5-7 items max).
+- **Structure via Boundaries (Law of Common Region):** Group related content within clear visible containers (like cards or border divisions).
+- **Leverage F-Shaped Scanning:** Position critical branding and primary CTA paths at the top and left of layouts where human eyes naturally scan first.
+
+## UI/UX Don'ts
+- **Don't Let Aesthetics Compromise Usability:** Avoid choosing fancy fonts, hidden navigation menus, or complex animations if they make it difficult for users to find information.
+- **Don't Use Color Alone to Convey Meaning:** Always pair colors with labels or icons (e.g., in error states) to accommodate color-blind users.
+- **Don't Auto-Play Videos with Sound:** This is highly disruptive; give users full control over media.
+- **Don't Overcrowd the Interface (Whitespace mastery):** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text to reduce cognitive load.
+- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
+- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
+- **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation.

src/components/About.astro

@@ -27,15 +27,15 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
         <!-- Fun facts -->
         <div class="grid grid-cols-3 gap-6 text-center">
           <div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
-            <span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">100%</span>
+            <span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">100%</span>
             <span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Zufriedenheit</span>
           </div>
           <div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
-            <span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">48h</span>
+            <span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">48h</span>
             <span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Feedback-Zeit</span>
           </div>
           <div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
-            <span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">50+</span>
+            <span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">50+</span>
             <span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Webprojekte</span>
           </div>
         </div>

src/components/Footer.astro

@@ -3,40 +3,40 @@
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="bg-brand-primary border-t border-white/5 py-12 text-gray-400 text-sm">
+<footer class="bg-slate-100 dark:bg-brand-darkBg border-t border-slate-200 dark:border-white/5 py-12 text-slate-600 dark:text-gray-400 text-sm transition-colors duration-300">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-white/5 pb-8 mb-8">
+    <div class="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-slate-200 dark:border-white/5 pb-8 mb-8">
       
       <!-- Brand logo/name -->
       <div>
-        <a href="#" 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>
+        <a href="#" class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
+          N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
         </a>
-        <p class="mt-2 text-xs text-gray-500 max-w-sm">
+        <p class="mt-2 text-xs text-slate-500 dark:text-gray-500 max-w-sm">
           Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.
         </p>
       </div>
 
       <!-- Footer Quick Links -->
       <nav class="flex flex-wrap gap-x-8 gap-y-2 justify-center">
-        <a href="#" class="hover:text-brand-cyan transition-colors">Home</a>
-        <a href="#services" class="hover:text-brand-cyan transition-colors">Services</a>
-        <a href="#tech" class="hover:text-brand-cyan transition-colors">Tech-Stack</a>
-        <a href="#about" class="hover:text-brand-cyan transition-colors">About</a>
-        <a href="#contact" class="hover:text-brand-cyan transition-colors">Kontakt</a>
+        <a href="#" class="hover:text-brand-arcticBlue transition-colors">Home</a>
+        <a href="#services" class="hover:text-brand-arcticBlue transition-colors">Services</a>
+        <a href="#tech" class="hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
+        <a href="#about" class="hover:text-brand-arcticBlue transition-colors">About</a>
+        <a href="#contact" class="hover:text-brand-arcticBlue transition-colors">Kontakt</a>
       </nav>
 
     </div>
 
     <!-- Bottom Copyright & Legal Links -->
-    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
+    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-gray-500">
       <div>
         &copy; {currentYear} N&D i-t SOLUTIONS. Alle Rechte vorbehalten.
       </div>
       <div class="flex gap-6">
-        <a href="/privacy" class="hover:text-white transition-colors">Datenschutz</a>
-        <span class="text-white/10">|</span>
-        <a href="/privacy#impressum" class="hover:text-white transition-colors">Impressum</a>
+        <a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
+        <span class="text-slate-300 dark:text-white/10">|</span>
+        <a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
       </div>
     </div>
   </div>

src/components/HeroAndLiquidGlass.astro

@@ -18,20 +18,20 @@
       <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.
+          Sorgenfreies Hosting <br/>
+          <span class="text-sky-600 dark:text-sky-400">
+            für Ihre Website.
           </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.
+          Wir hosten, sichern und pflegen Ihren Internetauftritt auf deutschen Servern. Im monatlichen Sorgenfrei-Paket ist alles inklusive: tägliche Backups, DSGVO-Updates, SSL-Verschlüsselung und auf Wunsch die Erstellung Ihrer Website.
         </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>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
           </a>
           <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
@@ -72,7 +72,7 @@
           <!-- 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">
+              <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" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
               </svg>
             </div>
@@ -137,15 +137,15 @@
         <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 class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
           </div>
-          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign</h3>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sorgenfrei-Hosting</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
+            Deutsche Server, tägliche Backups und SSL-Verschlüsselung. Ihr Internetauftritt ist rundum abgesichert im monatlichen Abo.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
       </div>
 
       <!-- Card 2: SEO -->
@@ -155,7 +155,7 @@
         
         <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>
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
           </div>
           <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
@@ -172,17 +172,101 @@
         
         <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>
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
           </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>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign Inklusive</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.
+            Noch keine eigene Website? Wir erstellen Ihren neuen, optimierten Internetauftritt direkt passend zum Hosting dazu.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
       </div>
 
     </div>
+
+    <!-- Showcase-Link Callout -->
+    <div class="mt-16 text-center reveal">
+      <div class="inline-flex flex-col sm:flex-row items-center gap-4 p-4 rounded-2xl border border-white/80 dark:border-white/5 bg-white/30 dark:bg-slate-950/20 backdrop-blur-md shadow-sm">
+        <span class="text-xs text-slate-600 dark:text-zinc-400">
+          Sie suchen Inspiration? Entdecken Sie unsere 20 maßgeschneiderten Design-Vorlagen.
+        </span>
+        <a href="/templates" class="inline-flex items-center gap-2 text-xs font-bold text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-white transition-colors duration-300">
+          Design-Vorlagen ansehen
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- FAQ Sektion im Hybrid Liquid Glass Look -->
+<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">
+        Häufig gestellte Fragen
+      </h2>
+      <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
+        Alles Wissenswerte zu unserem Sorgenfrei-Paket. Angebot auf Anfrage, jede Anfrage unverbindlich.
+      </p>
+    </div>
+
+    <div class="space-y-4 reveal">
+      
+      <!-- FAQ 1 -->
+      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+          <span>Ist die Erstellung der Website wirklich im Hosting-Abo inklusive?</span>
+          <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
+            <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+          Ja. Wir erstellen Ihren neuen Internetauftritt passend zum Hosting direkt mit. Es gibt keine hohen einmaligen Einrichtungskosten – alles ist in der monatlichen Pauschale enthalten.
+        </div>
+      </details>
+
+      <!-- FAQ 2 -->
+      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+          <span>Kann ich meine bestehende Domain mitnehmen?</span>
+          <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
+            <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+          Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
+        </div>
+      </details>
+
+      <!-- FAQ 3 -->
+      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+          <span>Wie laufen spätere Änderungen an meiner Website ab?</span>
+          <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
+            <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+          Senden Sie uns einfach eine kurze Nachricht mit Ihren Änderungswünschen (z. B. neue Öffnungszeiten oder Bilder). Wir setzen diese zeitnah und zuverlässig für Sie um – ohne Zusatzkosten.
+        </div>
+      </details>
+
+      <!-- FAQ 4 -->
+      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+          <span>Wie flexibel ist das Sorgenfrei-Paket und wie sind die Laufzeiten?</span>
+          <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
+            <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+          Unser Angebot richtet sich ganz nach Ihrem Bedarf. Die Preise und genauen Konditionen kalkulieren wir auf Anfrage. Jede Anfrage ist für Sie vollkommen unverbindlich.
+        </div>
+      </details>
+
+    </div>
   </div>
 </section>
 

src/components/Navbar.astro

@@ -10,7 +10,7 @@ import { FaBars, FaTimes } from 'react-icons/fa';
       <!-- Logo -->
       <a href="#" class="flex items-center gap-2 group">
         <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>
+          N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
         </span>
       </a>
 
@@ -23,26 +23,26 @@ import { FaBars, FaTimes } from 'react-icons/fa';
 
       <!-- 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">
+        <!-- Theme Toggle Button (44x44px target) -->
+        <button id="theme-toggle" class="w-11 h-11 flex items-center justify-center 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 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Farbschema wechseln">
+          <!-- Moon Icon -->
+          <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" aria-hidden="true">
             <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">
+          <!-- Sun Icon -->
+          <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" aria-hidden="true">
             <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-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">
+        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-2 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 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Erstgespräch buchen">
           Erstgespräch buchen
         </a>
 
-        <!-- Mobile menu button -->
-        <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" />
+        <!-- Mobile menu button (44x44px target) -->
+        <button id="mobile-menu-btn" class="md:hidden w-11 h-11 flex items-center justify-center 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 focus:ring-2 focus:ring-sky-500" aria-label="Menü öffnen">
+          <FaBars className="w-5 h-5" aria-hidden="true" />
         </button>
       </div>
 
@@ -53,10 +53,10 @@ import { FaBars, FaTimes } from 'react-icons/fa';
   <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>
+        N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
       </span>
       <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" />
+        <FaTimes className="w-5 h-5" aria-hidden="true" />
       </button>
     </div>
     <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-slate-900 dark:text-white">

src/pages/index.astro

@@ -13,36 +13,34 @@ import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
     <HeroAndLiquidGlass />
     
     <!-- Contact section (separate, clean layout) -->
-    <section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
-      <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+    <section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
+      <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px] transition-opacity duration-300"></div>
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise">
-          <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
-          <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
-          <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
-          <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
+        <div class="bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-slate-200 dark:border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise shadow-sm dark:shadow-none">
+          <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
+          <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-slate-300 dark:border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-slate-300 dark:border-zinc-700/50"></span>
           
-          <h2 class="text-3xl font-extrabold text-white mb-2 uppercase tracking-tight">Bereit für Ihr Projekt?</h2>
-          <p class="text-zinc-400 text-xs mb-8">
+          <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Bereit für Ihr Projekt?</h2>
+          <p class="text-slate-600 dark:text-zinc-400 text-xs mb-8 transition-colors duration-300">
             Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
           </p>
           
           <form class="space-y-4" onsubmit="event.preventDefault()">
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
-                <input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
-              </div>
-              <div>
-                <label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
-                <input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
-              </div>
+            <div>
+              <label for="name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name</label>
+              <input type="text" id="name" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all" />
             </div>
             <div>
-              <label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
-              <textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
+              <label for="email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail</label>
+              <input type="email" id="email" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all" />
             </div>
-            <button type="submit" class="w-full py-3 bg-brand-arcticBlue text-zinc-950 font-bold text-xs uppercase tracking-wider rounded hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-brand-arcticBlue focus:outline-none">
+            <div>
+              <label for="message" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Nachricht</label>
+              <textarea id="message" rows="4" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all resize-none"></textarea>
+            </div>
+            <button type="submit" class="w-full py-3 bg-sky-600 hover:bg-sky-700 dark:bg-brand-arcticBlue text-white dark:text-zinc-950 font-bold text-xs uppercase tracking-wider rounded dark:hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:outline-none">
               Anfrage senden
             </button>
           </form>

src/pages/templates.astro

@@ -288,11 +288,8 @@ const templates = [
 
       <!-- Header Section -->
       <div class="max-w-3xl mb-16">
-        <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-4">
-          Handwerk trifft moderne Architektur
-        </div>
         <h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
-          Die perfekte Struktur für <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-arcticBlue to-white">jeden Betrieb.</span>
+          Die perfekte Struktur für <span class="text-brand-arcticBlue">jeden Betrieb.</span>
         </h1>
         <p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
           Egal ob klassische Schreinerei, moderne Anwaltskanzlei oder lokaler Handwerker: Wir passen das Design perfekt an Ihren Stil an. Hier sind 20 beispielhafte Bento-Kombinationen, Farbwelten und Layout-Konzepte.