From e8a2e62becaa58463302cef3369934848e92a22a Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 04:02:52 +0200
Subject: [PATCH] style: hybridize contact form and input fields for correct
 light/dark theme transition

---
 src/pages/index.astro | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index fc62b52..92776ee 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,34 +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>
-              <label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
-              <input type="text" id="name" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all" />
+              <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="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
-              <input type="email" id="email" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all" />
+              <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>
             <div>
-              <label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
-              <textarea id="message" rows="4" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all resize-none"></textarea>
+              <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-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">
+            <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>