From a3222ec496ce317aeff6a69b0de2b20ba4e0ed5c Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 23:58:48 +0200
Subject: [PATCH] refactor: replace range calculators in templates with
 simulated contact forms

---
 src/pages/templates/[id].astro | 46 +++++++++++++---------------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/pages/templates/[id].astro b/src/pages/templates/[id].astro
index 00547b2..bad108c 100644
--- a/src/pages/templates/[id].astro
+++ b/src/pages/templates/[id].astro
@@ -480,46 +480,34 @@ const { tpl } = Astro.props;
         <div class="flex flex-col items-center justify-center py-12">
           <div class="text-center max-w-xl mb-12">
             <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
-            <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt kalkulieren.</h1>
-            <p class="opacity-75 text-xs sm:text-sm">Ermitteln Sie Ihren Bedarf schnell und unverbindlich in nur wenigen Schritten.</p>
+            <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt anfragen.</h1>
+            <p class="opacity-75 text-xs sm:text-sm">Tragen Sie Ihre Nachricht ein. Wir melden uns unverbindlich innerhalb von 24 Stunden.</p>
           </div>
           
-          {/* The centralized Calculator Block (Monolith) */}
+          {/* The centralized Contact Form Block (Monolith) */}
           <div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
             {tpl.group === "Glassmorphismus" && (
               <div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
             )}
             
-            <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Bedarfs-Rechner</h3>
-            <div class="space-y-4">
+            <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Kontaktformular</h3>
+            <form class="space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
               <div>
-                <label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Projekt-Fläche (ca. m²)</label>
-                <input type="range" min="10" max="500" value="120" class="w-full h-1 bg-current/10 rounded-lg appearance-none cursor-pointer" />
-                <div class="flex justify-between text-xs font-bold mt-2 opacity-80">
-                  <span>10 m²</span>
-                  <span class={tpl.accentText}>120 m²</span>
-                  <span>500 m²</span>
-                </div>
+                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
+                <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
               </div>
-              <div class="pt-4">
-                <label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Dienstleistung</label>
-                <select class="w-full bg-current/5 border border-current/20 rounded p-2 text-xs focus:outline-none focus:border-current">
-                  <option>Komplettmontage & Service</option>
-                  <option>Nur Lieferung & Zuschnitt</option>
-                  <option>Wartung & Reparatur</option>
-                </select>
+              <div>
+                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
+                <input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
               </div>
-              
-              <div class="bg-current/5 p-4 rounded-xl mt-6 border border-current/10 text-center">
-                <div class="text-[10px] uppercase font-bold opacity-60">Voraussichtliches Budget</div>
-                <div class="text-3xl font-black mt-1 uppercase tracking-tight">~ 2.450 €</div>
-                <div class="text-[9px] opacity-50 mt-1">Unverbindlicher Richtpreis inkl. MwSt.</div>
+              <div>
+                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihre Nachricht</label>
+                <textarea rows="4" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
               </div>
-              
-              <button class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
-                Ergebnis absenden & anfragen
+              <button type="submit" class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Anfrage senden
               </button>
-            </div>
+            </form>
           </div>
         </div>
       )}
@@ -548,7 +536,7 @@ const { tpl } = Astro.props;
           <h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
           <p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
         </div>
-        <form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault()">
+        <form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
           <div>
             <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
             <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />