feat: align template previews with design archetype matrix

src/pages/templates/[id].astro

@@ -2,202 +2,50 @@
 import Layout from '../../layouts/Layout.astro';
 import Navbar from '../../components/Navbar.astro';
 import Footer from '../../components/Footer.astro';
-import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope } from 'react-icons/fa';
+import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope, FaDesktop } from 'react-icons/fa';
 
 export function getStaticPaths() {
   const templates = [
+    // --- GRUPPE 1: INDUSTRIE-BRUTALISMUS ---
     {
       id: "01",
       name: "Der Handwerker-Klassiker",
       style: "Einfach & Bodenständig",
-      layout: "Boxed Layout",
+      group: "Brutalismus",
-      design: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen & Monolith
       colorScheme: "Warm & Earthy (Sand & Terrakotta)",
-      bgClass: "bg-[#FDFBF7] text-[#2C1A11]",
+      bgClass: "bg-[#F4F1EA] text-[#2C1A11] tactile-noise",
-      borderClass: "border-2 border-[#2C1A11]",
+      cardClass: "bg-[#FAF8F5] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none",
-      accentText: "text-[#D97706]",
+      accentText: "text-[#D95D39]",
-      accentBg: "bg-[#D97706] hover:bg-[#B45309] text-white",
+      accentBg: "bg-[#D95D39] hover:bg-[#b54a2a] text-white border-2 border-black shadow-[4px_4px_0_0_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none rounded-none",
-      cardClass: "bg-white border border-[#2C1A11]/20",
       theme: "light",
       businessType: "Schreinerei & Innenausbau"
     },
-    {
-      id: "02",
-      name: "Dachdecker Meister",
-      style: "Elegant & Professionell",
-      layout: "Split-Screen",
-      design: "Glassmorphismus",
-      colorScheme: "Deep Dark (Anthrazit & Gold)",
-      bgClass: "bg-[#0B0F19] text-white",
-      borderClass: "border border-white/10",
-      accentText: "text-amber-400",
-      accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950",
-      cardClass: "bg-slate-900/50 backdrop-blur border border-white/10",
-      theme: "dark",
-      businessType: "Dachdeckerei & Spenglerei"
-    },
-    {
-      id: "03",
-      name: "Solar & Photovoltaik",
-      style: "Tech & Zukunft",
-      layout: "Bento-Grid",
-      design: "SaaS-Minimalismus",
-      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
-      bgClass: "bg-zinc-950 text-zinc-100",
-      borderClass: "border border-zinc-800",
-      accentText: "text-orange-500",
-      accentBg: "bg-orange-600 hover:bg-orange-700 text-white",
-      cardClass: "bg-zinc-900 border border-zinc-800",
-      theme: "dark",
-      businessType: "Solartechnik & Energiesysteme"
-    },
-    {
-      id: "04",
-      name: "Die Kanzlei",
-      style: "Seriös & Clean",
-      layout: "Asymmetrisch",
-      design: "Glassmorphismus",
-      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
-      bgClass: "bg-[#0B0F19] text-white",
-      borderClass: "border border-white/10",
-      accentText: "text-emerald-400",
-      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
-      cardClass: "bg-slate-900/50 backdrop-blur border border-white/10",
-      theme: "dark",
-      businessType: "Rechtsanwälte & Notare"
-    },
-    {
-      id: "05",
-      name: "Bio-Hofladen",
-      style: "Rustikal & Natur",
-      layout: "Minimalistisch 1-spaltig",
-      design: "Neomorphismus",
-      colorScheme: "Warm & Earthy (Terrakotta)",
-      bgClass: "bg-[#FAF7F2] text-[#4A3B32]",
-      borderClass: "border border-[#E8DCC4]",
-      accentText: "text-[#C2410C]",
-      accentBg: "bg-[#C2410C] hover:bg-[#A8370A] text-white",
-      cardClass: "bg-[#FAF7F2] shadow-[4px_4px_10px_rgba(0,0,0,0.05),-4px_-4px_10px_rgba(255,255,255,0.8)] border border-[#FAF7F2]",
-      theme: "light",
-      businessType: "Bio-Bauernhof & Hofladen"
-    },
-    {
-      id: "06",
-      name: "Sanitär & Heizung",
-      style: "Klar & Zuverlässig",
-      layout: "Bento-Grid",
-      design: "SaaS-Minimalismus",
-      colorScheme: "Clean Light (Weiß & Navy-Blau)",
-      bgClass: "bg-slate-50 text-slate-900",
-      borderClass: "border border-slate-200",
-      accentText: "text-blue-700",
-      accentBg: "bg-blue-700 hover:bg-blue-800 text-white",
-      cardClass: "bg-white border border-slate-200 shadow-sm",
-      theme: "light",
-      businessType: "Heizung, Sanitär & Klima"
-    },
     {
       id: "07",
       name: "KFZ-Werkstatt Schnellservice",
       style: "Dynamisch & Direkt",
-      layout: "Split-Screen",
+      group: "Brutalismus",
-      design: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
       colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
-      bgClass: "bg-zinc-900 text-white",
+      bgClass: "bg-[#E5E7EB] text-zinc-950",
-      borderClass: "border-2 border-zinc-700",
+      cardClass: "bg-white border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] rounded-none",
-      accentText: "text-orange-500",
+      accentText: "text-[#FF5500]",
-      accentBg: "bg-orange-600 hover:bg-orange-700 text-white",
+      accentBg: "bg-[#FF5500] text-white border-2 border-black font-bold hover:-translate-x-1 hover:-translate-y-1 active:translate-x-0 active:translate-y-0 shadow-[4px_4px_0_0_rgba(0,0,0,1)] transition-transform rounded-none",
-      cardClass: "bg-zinc-800 border border-zinc-700",
+      theme: "light",
-      theme: "dark",
       businessType: "Kfz-Meisterbetrieb"
     },
-    {
-      id: "08",
-      name: "Schreinerei Holzart",
-      style: "Handwerk & Präzision",
-      layout: "Boxed Layout",
-      design: "SaaS-Minimalismus",
-      colorScheme: "Warm & Earthy (Sand-Töne)",
-      bgClass: "bg-[#F5F2EB] text-[#3D3A36]",
-      borderClass: "border border-[#D9D2C5]",
-      accentText: "text-[#8B5A2B]",
-      accentBg: "bg-[#8B5A2B] hover:bg-[#6F4722] text-white",
-      cardClass: "bg-white border border-[#EBE6DC] shadow-sm",
-      theme: "light",
-      businessType: "Möbel- & Bauschreinerei"
-    },
-    {
-      id: "09",
-      name: "Steuerberater Premium",
-      style: "Exklusiv & Diskret",
-      layout: "Bento-Grid",
-      design: "Glassmorphismus",
-      colorScheme: "Deep Dark (Anthrazit & Gold)",
-      bgClass: "bg-slate-950 text-slate-100",
-      borderClass: "border border-slate-800",
-      accentText: "text-amber-400",
-      accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950",
-      cardClass: "bg-slate-900/40 backdrop-blur border border-white/10",
-      theme: "dark",
-      businessType: "Steuerberatungskanzlei"
-    },
-    {
-      id: "10",
-      name: "Garten- & Landschaftsbau",
-      style: "Frisch & Modern",
-      layout: "Asymmetrisch",
-      design: "Glassmorphismus",
-      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
-      bgClass: "bg-emerald-50/30 text-slate-900",
-      borderClass: "border border-emerald-100",
-      accentText: "text-emerald-700",
-      accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white",
-      cardClass: "bg-white/80 backdrop-blur border border-emerald-100 shadow-sm",
-      theme: "light",
-      businessType: "Garten- & Landschaftsbau"
-    },
-    {
-      id: "11",
-      name: "Modern Dentists Zahnarzt",
-      style: "Clean & Vertrauensvoll",
-      layout: "Minimalistisch 1-spaltig",
-      design: "SaaS-Minimalismus",
-      colorScheme: "Clean Light (Weiß & Navy-Blau)",
-      bgClass: "bg-white text-slate-900",
-      borderClass: "border border-slate-200",
-      accentText: "text-blue-800",
-      accentBg: "bg-blue-800 hover:bg-blue-900 text-white",
-      cardClass: "bg-slate-50 border border-slate-150",
-      theme: "light",
-      businessType: "Zahnarztpraxis"
-    },
-    {
-      id: "12",
-      name: "Bäckerei Traditionsbäcker",
-      style: "Gemütlich & Lecker",
-      layout: "Boxed Layout",
-      design: "Neomorphismus",
-      colorScheme: "Warm & Earthy (Terrakotta)",
-      bgClass: "bg-[#FDF9F3] text-[#5C3E21]",
-      borderClass: "border border-[#EADCC9]",
-      accentText: "text-[#B45309]",
-      accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white",
-      cardClass: "bg-[#FDF9F3] shadow-[4px_4px_10px_rgba(0,0,0,0.04),-4px_-4px_10px_rgba(255,255,255,0.75)] border border-transparent",
-      theme: "light",
-      businessType: "Feinbäckerei & Konditorei"
-    },
     {
       id: "13",
       name: "Elektro-Technik Meister",
       style: "Präzise & Leistungsstark",
-      layout: "Split-Screen",
+      group: "Brutalismus",
-      design: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
       colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
-      bgClass: "bg-neutral-950 text-neutral-100",
+      bgClass: "bg-zinc-900 text-zinc-100",
-      borderClass: "border border-neutral-800",
+      cardClass: "bg-zinc-800 border-2 border-purple-500 shadow-[6px_6px_0px_0px_rgba(139,92,246,0.3)] rounded-none relative overflow-hidden",
-      accentText: "text-purple-400",
+      accentText: "text-purple-400 font-mono",
-      accentBg: "bg-purple-600 hover:bg-purple-700 text-white",
+      accentBg: "bg-purple-600 hover:bg-purple-700 text-white border border-purple-400 rounded-none shadow-[3px_3px_0_0_rgba(255,255,255,0.2)]",
-      cardClass: "bg-neutral-900 border border-neutral-800",
       theme: "dark",
       businessType: "Elektrotechnik & Smart Home"
     },
@@ -205,106 +53,245 @@ export function getStaticPaths() {
       id: "14",
       name: "Fitness- & Kraftstudio",
       style: "Stark & Motivierend",
-      layout: "Asymmetrisch",
+      group: "Brutalismus",
-      design: "Brutalismus",
+      layoutType: "Typ A", // Asymmetrisches Bento
       colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
-      bgClass: "bg-black text-white",
+      bgClass: "bg-[#0A0A0A] text-white",
-      borderClass: "border-2 border-zinc-800",
+      cardClass: "bg-zinc-950 border-2 border-[#FF5700] rounded-none shadow-[8px_8px_0_0_rgba(255,87,0,0.15)]",
-      accentText: "text-orange-500",
+      accentText: "text-[#FF5700]",
-      accentBg: "bg-orange-500 hover:bg-orange-600 text-black font-bold",
+      accentBg: "bg-[#FF5700] hover:bg-[#e04c00] text-black font-black uppercase rounded-none border border-black shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]",
-      cardClass: "bg-zinc-950 border border-zinc-800",
       theme: "dark",
       businessType: "Premium Gym & Fitness"
     },
-    {
-      id: "15",
-      name: "Architekturbüro Struktur",
-      style: "Minimalismus & Ästhetik",
-      layout: "Split-Screen",
-      design: "SaaS-Minimalismus",
-      colorScheme: "Clean Light (Weiß & Navy-Blau)",
-      bgClass: "bg-white text-zinc-900",
-      borderClass: "border border-zinc-200",
-      accentText: "text-zinc-900",
-      accentBg: "bg-zinc-900 hover:bg-zinc-800 text-white",
-      cardClass: "bg-zinc-50 border border-zinc-200",
-      theme: "light",
-      businessType: "Architektur & Generalplanung"
-    },
-    {
-      id: "16",
-      name: "Physiotherapie Praxis",
-      style: "Achtsam & Gesund",
-      layout: "Minimalistisch 1-spaltig",
-      design: "Glassmorphismus",
-      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
-      bgClass: "bg-[#FAFDFB] text-slate-800",
-      borderClass: "border border-emerald-100",
-      accentText: "text-emerald-600",
-      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
-      cardClass: "bg-white/80 backdrop-blur border border-emerald-100 shadow-sm",
-      theme: "light",
-      businessType: "Physiotherapie & Osteopathie"
-    },
     {
       id: "17",
       name: "Metallbau & Schlosserei",
       style: "Hart & Präzise",
-      layout: "Boxed Layout",
+      group: "Brutalismus",
-      design: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
       colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
-      bgClass: "bg-zinc-900 text-zinc-100",
+      bgClass: "bg-[#1A1D20] text-zinc-200 border-dashed border-slate-700",
-      borderClass: "border-2 border-zinc-700",
+      cardClass: "bg-zinc-900 border border-zinc-700 hover:border-emerald-500/50 shadow-md rounded-none",
       accentText: "text-emerald-400",
-      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
+      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-none border border-emerald-500",
-      cardClass: "bg-zinc-800 border-2 border-zinc-700",
       theme: "dark",
       businessType: "Schlosserei & Konstruktion"
     },
+
+    // --- GRUPPE 2: GLASSMORPHISMUS ---
     {
-      id: "18",
+      id: "02",
-      name: "Restaurant & Gaststube",
+      name: "Dachdecker Meister",
-      style: "Rustikal & Einladend",
+      style: "Elegant & Professionell",
-      layout: "Bento-Grid",
+      group: "Glassmorphismus",
-      design: "Neomorphismus",
+      layoutType: "Typ A", // Bento
-      colorScheme: "Warm & Earthy (Sand-Töne)",
+      colorScheme: "Deep Dark (Anthrazit & Gold)",
-      bgClass: "bg-[#FCFAF7] text-[#4E3629]",
+      bgClass: "bg-[#0F1115] text-white",
-      borderClass: "border border-[#ECE4D9]",
+      cardClass: "bg-white/[0.03] backdrop-blur-xl border border-white/10 hover:border-amber-500/30 transition-all duration-300 rounded-2xl shadow-xl",
-      accentText: "text-[#A75D5D]",
+      accentText: "text-amber-400",
-      accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white",
+      accentBg: "bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 text-zinc-950 font-bold rounded-lg shadow-lg shadow-amber-500/10",
-      cardClass: "bg-[#FCFAF7] shadow-[5px_5px_12px_rgba(0,0,0,0.03),-5px_-5px_12px_rgba(255,255,255,0.8)] border border-transparent",
+      theme: "dark",
-      theme: "light",
+      businessType: "Dachdeckerei & Spenglerei"
-      businessType: "Wirtshaus & Feinkost"
     },
     {
-      id: "19",
+      id: "04",
-      name: "Software-Entwicklung Byte",
+      name: "Die Kanzlei",
-      style: "Sauber & Strukturiert",
+      style: "Seriös & Clean",
-      layout: "Bento-Grid",
+      group: "Glassmorphismus",
-      design: "SaaS-Minimalismus",
+      layoutType: "Typ A", // Bento
-      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
-      bgClass: "bg-[#0C0C0F] text-zinc-100",
+      bgClass: "bg-[#0B0F19] text-white",
-      borderClass: "border border-zinc-800",
+      cardClass: "bg-slate-900/50 backdrop-blur-md border border-emerald-500/20 hover:border-emerald-500/40 rounded-xl transition-all",
-      accentText: "text-indigo-400",
+      accentText: "text-emerald-400 font-serif",
-      accentBg: "bg-indigo-600 hover:bg-indigo-700 text-white",
+      accentBg: "bg-emerald-800 hover:bg-emerald-950 text-white border border-emerald-500/30 rounded px-6 py-2.5",
-      cardClass: "bg-zinc-900 border border-zinc-800",
       theme: "dark",
-      businessType: "Software & Webanwendungen"
+      businessType: "Rechtsanwälte & Notare"
+    },
+    {
+      id: "09",
+      name: "Steuerberater Premium",
+      style: "Exklusiv & Diskret",
+      group: "Glassmorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Deep Dark (Anthrazit & Gold)",
+      bgClass: "bg-slate-950 text-slate-100",
+      cardClass: "bg-white/[0.02] backdrop-blur-lg border border-white/[0.08] hover:border-amber-400/20 rounded-2xl",
+      accentText: "text-amber-400",
+      accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950 rounded px-5 py-2.5 font-semibold",
+      theme: "dark",
+      businessType: "Steuerberatungskanzlei"
+    },
+    {
+      id: "10",
+      name: "Garten- & Landschaftsbau",
+      style: "Frisch & Modern",
+      group: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+      bgClass: "bg-[#F8FAF9] text-slate-800",
+      cardClass: "bg-white/70 backdrop-blur-md border border-emerald-100 hover:border-emerald-300 shadow-sm rounded-2xl",
+      accentText: "text-emerald-800",
+      accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white rounded-full px-6 py-2.5",
+      theme: "light",
+      businessType: "Garten- & Landschaftsbau"
+    },
+    {
+      id: "16",
+      name: "Physiotherapie Praxis",
+      style: "Achtsam & Gesund",
+      group: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+      bgClass: "bg-slate-50 text-slate-800",
+      cardClass: "bg-white/60 backdrop-blur-xl border border-emerald-500/10 hover:border-emerald-500/20 rounded-3xl shadow-sm",
+      accentText: "text-emerald-700",
+      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-full",
+      theme: "light",
+      businessType: "Physiotherapie & Osteopathie"
     },
     {
       id: "20",
       name: "Malerbetrieb Farbenfroh",
       style: "Kreativ & Präzise",
-      layout: "Asymmetrisch",
+      group: "Glassmorphismus",
-      design: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
       colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
-      bgClass: "bg-[#161622] text-zinc-100",
+      bgClass: "bg-[#1E1E2E] text-zinc-100",
-      borderClass: "border border-white/5",
+      cardClass: "bg-slate-900/60 backdrop-blur-md border border-white/10 hover:border-orange-500/30 rounded-2xl",
       accentText: "text-orange-400",
-      accentBg: "bg-orange-500 hover:bg-orange-600 text-white",
+      accentBg: "bg-orange-500 hover:bg-orange-600 text-white rounded-xl",
-      cardClass: "bg-slate-900/60 backdrop-blur border border-white/10",
       theme: "dark",
       businessType: "Maler- & Lackiererbetrieb"
+    },
+
+    // --- GRUPPE 3: SAAS-MINIMALISMUS ---
+    {
+      id: "03",
+      name: "Solar & Photovoltaik",
+      style: "Tech & Zukunft",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-[#F9FAFB] text-zinc-900",
+      cardClass: "bg-white border border-zinc-200 hover:border-orange-500/30 rounded-xl shadow-sm",
+      accentText: "text-orange-600",
+      accentBg: "bg-orange-600 hover:bg-orange-700 text-white rounded-lg px-6 py-2.5",
+      theme: "light",
+      businessType: "Solartechnik & Energiesysteme"
+    },
+    {
+      id: "06",
+      name: "Sanitär & Heizung",
+      style: "Klar & Zuverlässig",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-slate-800",
+      cardClass: "bg-white border border-slate-200 hover:border-blue-500/30 shadow-sm rounded-xl",
+      accentText: "text-blue-800",
+      accentBg: "bg-blue-800 hover:bg-blue-900 text-white rounded px-6 py-2.5",
+      theme: "light",
+      businessType: "Heizung, Sanitär & Klima"
+    },
+    {
+      id: "08",
+      name: "Schreinerei Holzart",
+      style: "Handwerk & Präzision",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Warm & Earthy (Sand-Töne & dunkles Holz)",
+      bgClass: "bg-[#FAF9F5] text-[#3D3A36]",
+      cardClass: "bg-white border border-[#EBE6DC] hover:border-[#8B5A2B]/40 rounded-lg shadow-sm",
+      accentText: "text-[#8B5A2B]",
+      accentBg: "bg-[#8B5A2B] hover:bg-[#6f4823] text-white rounded px-6 py-2.5",
+      theme: "light",
+      businessType: "Möbel- & Bauschreinerei"
+    },
+    {
+      id: "11",
+      name: "Modern Dentists Zahnarzt",
+      style: "Clean & Vertrauensvoll",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-slate-900",
+      cardClass: "bg-slate-50 border border-slate-200 hover:border-blue-700/30 shadow-sm rounded-xl",
+      accentText: "text-blue-700",
+      accentBg: "bg-blue-700 hover:bg-blue-800 text-white rounded-lg",
+      theme: "light",
+      businessType: "Zahnarztpraxis"
+    },
+    {
+      id: "15",
+      name: "Architekturbüro Struktur",
+      style: "Minimalismus & Ästhetik",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-zinc-900 border-blue-100", // Blueprint Grid
+      cardClass: "bg-white border border-zinc-200 hover:border-zinc-900 shadow-sm rounded-none",
+      accentText: "text-zinc-900",
+      accentBg: "bg-zinc-950 hover:bg-zinc-800 text-white rounded-none px-6 py-2.5",
+      theme: "light",
+      businessType: "Architektur & Generalplanung"
+    },
+    {
+      id: "19",
+      name: "Software-Entwicklung Byte",
+      style: "Sauber & Strukturiert",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      bgClass: "bg-[#1C1B22] text-zinc-100",
+      cardClass: "bg-[#25242A] border border-zinc-800 hover:border-purple-500/30 rounded-xl",
+      accentText: "text-purple-400",
+      accentBg: "bg-purple-600 hover:bg-purple-700 text-white rounded-lg",
+      theme: "dark",
+      businessType: "Software & Webanwendungen"
+    },
+
+    // --- GRUPPE 4: NEOMORPHISMUS ---
+    {
+      id: "05",
+      name: "Bio-Hofladen",
+      style: "Rustikal & Natur",
+      group: "Neomorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
+      bgClass: "bg-[#FDFBF7] text-[#4A3B32]",
+      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_9px_9px_16px_rgba(163,177,198,0.2),_-9px_-9px_16px_rgba(255,255,255,0.7)] rounded-3xl",
+      accentText: "text-[#C2410C]",
+      accentBg: "bg-[#C2410C] hover:bg-[#a13307] text-white rounded-full px-6 py-2.5",
+      theme: "light",
+      businessType: "Bio-Bauernhof & Hofladen"
+    },
+    {
+      id: "12",
+      name: "Bäckerei Traditionsbäcker",
+      style: "Gemütlich & Lecker",
+      group: "Neomorphismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
+      bgClass: "bg-[#FDFBF7] text-[#5C3E21]",
+      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_6px_6px_12px_rgba(163,177,198,0.15),_-6px_-6px_12px_rgba(255,255,255,0.75)] rounded-2xl",
+      accentText: "text-[#B45309]",
+      accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white rounded-xl shadow-md",
+      theme: "light",
+      businessType: "Feinbäckerei & Konditorei"
+    },
+    {
+      id: "18",
+      name: "Restaurant & Gaststube",
+      style: "Rustikal & Einladend",
+      group: "Neomorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Warm & Earthy (Sand-Töne & Dunkelbraun)",
+      bgClass: "bg-[#FAF6F0] text-[#543D2B]",
+      cardClass: "bg-[#FAF6F0] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.5),_8px_8px_16px_rgba(0,0,0,0.03),_-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-inner rounded-3xl transition-all duration-300",
+      accentText: "text-[#A75D5D]",
+      accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white rounded-2xl",
+      theme: "light",
+      businessType: "Wirtshaus & Feinkost"
     }
   ];
 
@@ -318,6 +305,7 @@ const { tpl } = Astro.props;
 ---
 
 <Layout title={`${tpl.name} | Live-Vorschau`}>
+  {/* Header Frame control */}
   <div class="fixed top-0 left-0 w-full bg-[#0b0f19]/90 backdrop-blur border-b border-white/10 py-3 z-50 text-white flex justify-between items-center px-4 sm:px-8">
     <div class="flex items-center gap-3">
       <a href="/templates" class="flex items-center gap-1 text-xs uppercase tracking-wider text-zinc-400 hover:text-brand-arcticBlue transition-colors font-bold">
@@ -329,193 +317,259 @@ const { tpl } = Astro.props;
       </div>
     </div>
     <div class="flex items-center gap-2">
-      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-white/10 rounded">Stil: {tpl.design}</span>
+      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-white/10 rounded">Gruppe: {tpl.group}</span>
-      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded hidden sm:inline">{tpl.layout}</span>
+      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded">{tpl.layoutType}</span>
     </div>
   </div>
 
-  <div class={`min-h-screen pt-16 pb-12 ${tpl.bgClass}`}>
+  {/* Outer Page Shell */}
+  <div class={`min-h-screen pt-20 pb-12 ${tpl.bgClass} ${tpl.name === "Architekturbüro Struktur" ? "tactile-grid-bg" : ""}`}>
     
-    {/* Boxed structure wrapper if selected */}
+    {/* Aurora Background glows for Glassmorphism group */}
-    <div class={tpl.layout === "Boxed Layout" ? "max-w-6xl mx-auto my-8 border-4 border-black/10 dark:border-white/10 rounded-2xl overflow-hidden shadow-2xl" : ""}>
+    {tpl.group === "Glassmorphismus" && (
+      <div class="absolute inset-0 pointer-events-none overflow-hidden z-0">
+        <div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-emerald-500/5 dark:bg-amber-500/5 blur-[120px] rounded-full"></div>
+        <div class="absolute top-1/2 right-1/4 w-[400px] h-[400px] bg-sky-500/5 dark:bg-blue-600/5 blur-[100px] rounded-full animate-pulse"></div>
+      </div>
+    )}
 
-      {/* 1. Header (Dynamic) */}
+    {/* Blueprint line grid overlay if Architekturbüro */}
-      <header class="py-6 px-8 flex justify-between items-center border-b border-current/10">
+    {tpl.name === "Architekturbüro Struktur" && (
-        <div class="font-bold text-xl uppercase tracking-wider">
+      <div class="absolute inset-0 pointer-events-none border-t border-l border-blue-500/10 z-0"></div>
+    )}
+
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      
+      {/* 1. Header component */}
+      <header class={`py-6 px-8 mb-8 flex justify-between items-center rounded-2xl ${tpl.cardClass}`}>
+        <div class="font-extrabold text-xl uppercase tracking-tighter">
           {tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
         </div>
-        <div class="hidden md:flex gap-6 text-sm font-semibold opacity-85">
+        <nav class="hidden md:flex gap-8 text-xs uppercase tracking-wider font-bold opacity-80">
-          <span class="cursor-pointer">Leistungen</span>
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Leistungen</span>
-          <span class="cursor-pointer">Über uns</span>
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Über uns</span>
-          <span class="cursor-pointer">Referenzen</span>
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Referenzen</span>
-          <span class="cursor-pointer">Kontakt</span>
+        </nav>
-        </div>
+        <button class={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+          Kontakt
+        </button>
       </header>
 
-      {/* 2. Hero Section (Dynamic Layouts) */}
+      {/* 2. Main content area rendering based on Layout-Type */}
-      <main class="px-8 py-16 sm:py-24">
+      {tpl.layoutType === "Typ B" ? (
-        
+        // Split-Screen & Monolith Layout (Sticky-Anchor-Cards)
-        {tpl.layout === "Split-Screen" ? (
+        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          {/* Sticky left monolithen */}
-            <div>
+          <div class={`lg:col-span-2 lg:sticky lg:top-32 p-8 rounded-2xl ${tpl.cardClass}`}>
-              <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Echtes Handwerk seit 1995</span>
+            <span class={`text-[10px] font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Regionaler Partner</span>
-              <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6 leading-tight">
+            <h1 class="text-3xl sm:text-5xl font-black tracking-tight mt-2 mb-6 uppercase leading-tight">
-                Qualität und Zuverlässigkeit für Ihr Projekt.
+              Echtes Handwerk.<br/>Ohne Kompromisse.
             </h1>
-              <p class="opacity-80 text-sm sm:text-base mb-8 max-w-md leading-relaxed">
+            <p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-8">
-                Wir planen und realisieren Ihr Projekt nach Maß. Termingerecht, sauber und absolut professionell vom Meisterbetrieb.
+              Wir setzen Ihre Projekte mit Leidenschaft und Fachverstand um. Seit über 25 Jahren stehen wir für absolute Zuverlässigkeit und präzise Meisterleistung in unserer Region.
             </p>
-              <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider transition-colors ${tpl.accentBg}`}>
+            <button class={`w-full py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
-                Jetzt Angebot anfragen
+              Jetzt Termin anfragen
             </button>
           </div>
-            <div class={`h-[350px] rounded-2xl flex items-center justify-center p-8 text-center border border-current/10 bg-current/5`}>
+          
-              <div class="space-y-2">
+          {/* Scrollable right content */}
-                <div class="text-4xl font-bold">100%</div>
+          <div class="lg:col-span-3 space-y-8">
-                <div class="text-xs uppercase tracking-wider font-semibold opacity-60">Kundenzufriedenheit</div>
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 01: Beratung vor Ort</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Wir besprechen Ihr Vorhaben direkt vor Ort. Sie erhalten eine ehrliche Einschätzung sowie verständliche Optionen, die zu Ihren Wünschen passen.
+              </p>
+            </div>
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 02: Transparente Planung</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Unsere Angebote enthalten alle Kosten übersichtlich aufgeschlüsselt. Keine überraschenden Nachträge oder versteckten Extrakosten.
+              </p>
+            </div>
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 03: Saubere Ausführung</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Wir arbeiten zügig, ordentlich und termingerecht. Nach Projektabschluss übergeben wir Ihren Arbeitsbereich besenrein.
+              </p>
+            </div>
+            
+            {/* Rhythmusbrecher (Text-Slam) */}
+            <div class="p-12 bg-zinc-950 text-white rounded-2xl text-center border border-zinc-800">
+              <h4 class="text-3xl font-extrabold mb-2 text-white">EIN WORT. EIN WERT.</h4>
+              <p class="text-xs text-zinc-400 max-w-sm mx-auto">100% verlässliche Handwerksqualität direkt aus Meisterhand.</p>
             </div>
           </div>
         </div>
-        ) : tpl.layout === "Bento-Grid" ? (
+      ) : tpl.layoutType === "Typ A" ? (
-          <div>
+        // Asymmetrisches Bento Grid
-            <div class="text-center max-w-2xl mx-auto mb-16">
+        <div class="space-y-8">
-              <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Bento Grid Showcase</span>
+          <div class="max-w-xl">
-              <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6">Moderne Struktur. Voller Fokus.</h1>
+            <h1 class="text-3xl sm:text-5xl font-black uppercase tracking-tight mb-4">
+              Ihr Meisterbetrieb für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>
+            </h1>
           </div>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div class={`md:col-span-2 rounded-2xl p-8 ${tpl.cardClass}`}>
+            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between min-h-[220px]`}>
-                <h2 class="text-2xl font-bold mb-4">Meisterliche Ausführung</h2>
-                <p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-6">
-                  Wir stehen für Handwerkskunst der Spitzenklasse. Durch modernste Planung und traditionelles Können schaffen wir dauerhafte Werte für Ihr Gebäude.
-                </p>
-                <button class={`px-5 py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
-                  Kontakt aufnehmen
-                </button>
-              </div>
-              <div class={`rounded-2xl p-8 flex flex-col justify-between ${tpl.cardClass}`}>
-                <div class="text-2xl font-mono font-bold">DEUTSCHLAND</div>
-                <div class="text-xs opacity-75">Regionaler Service direkt vor Ort bei Ihnen.</div>
-              </div>
-              <div class={`rounded-2xl p-8 flex flex-col justify-between ${tpl.cardClass}`}>
-                <div class="text-2xl font-mono font-bold">> 25 JAHRE</div>
-                <div class="text-xs opacity-75">Erfahrung, auf die Sie bauen können.</div>
-              </div>
-              <div class={`md:col-span-2 rounded-2xl p-8 ${tpl.cardClass} flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4`}>
               <div>
-                  <h3 class="text-lg font-bold">Direkt & Unverbindlich</h3>
+                <h3 class="text-2xl font-bold mb-2">Unsere Arbeitsweise</h3>
-                  <p class="opacity-70 text-xs">Fragen Sie Ihr Projekt einfach kostenlos an.</p>
+                <p class="opacity-75 text-xs leading-relaxed max-w-md">
+                  Wir verbinden traditionelle Fertigkeiten mit moderner Technik, um langlebige und ästhetisch anspruchsvolle Lösungen für Ihren Betrieb zu garantieren.
+                </p>
               </div>
-                <button class={`px-4 py-2 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg} shrink-0`}>
+              <div class="mt-4">
-                  Rückruf anfordern
+                <button class={`px-5 py-2.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                  Konzept besprechen
                 </button>
               </div>
             </div>
+            
+            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
+              <div class="text-3xl font-black opacity-80">DEUTSCHER MEISTER</div>
+              <p class="text-xs opacity-75 mt-2">Garantiert geprüftes Fachwissen und höchste Qualifikation.</p>
             </div>
-        ) : tpl.layout === "Asymmetrisch" ? (
+            
+            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
+              <div class="text-3xl font-black opacity-80">> 95%</div>
+              <p class="text-xs opacity-75 mt-2">Zuverlässigkeitsquote bei Terminen und Fertigstellungen.</p>
+            </div>
+            
+            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Individuelle Sonderanfertigungen</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Planung nach Maß: Wir fertigen für Sie genau das an, was Sie benötigen. Jedes Stück ist ein Unikat, handwerklich präzise nach Ihren Vorstellungen gearbeitet.
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : tpl.layoutType === "Typ C" ? (
+        // Magazin-Raster (Asymmetrischer Whitespace & Überlappung)
+        <div class="space-y-16">
           <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 items-center">
             <div class="lg:col-span-3">
-              <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight leading-tight mb-6">
+              <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tighter leading-tight mb-8">
-                Ihr Partner für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>.
+                Räume neu <span class={tpl.accentText}>denken.</span>
               </h1>
-              <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
+              <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-lg">
-                Wir konzipieren und setzen maßgeschneiderte Lösungen für private und gewerbliche Kunden um. Verlässlich, smart und von Experten ausgeführt.
+                Wir konzipieren anspruchsvolle, nachhaltige Projekte, die Ästhetik und Nutzbarkeit perfekt vereinen. Ein Zusammenspiel aus Form, Material und Funktion.
               </p>
-              <div class="flex flex-wrap gap-4">
+              <button class={`px-6 py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
-                <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Portfolio ansehen
-                  Erstgespräch vereinbaren
               </button>
             </div>
+            <div class="lg:col-span-2 -mt-6">
+              <div class={`p-8 rounded-2xl ${tpl.cardClass} -translate-y-4 hover:translate-y-0 transition-transform duration-300`}>
+                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 01 ] Entwurf</h4>
+                <p class="opacity-75 text-xs">Individuelle Konzepte & 3D-Visualisierung.</p>
               </div>
-            <div class="lg:col-span-2 space-y-6">
+              <div class={`p-8 rounded-2xl ${tpl.cardClass} translate-x-4 hover:translate-x-0 transition-transform duration-300`}>
-              <div class={`rounded-2xl p-6 ${tpl.cardClass}`}>
+                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 02 ] Konstruktion</h4>
-                <h4 class="font-bold mb-1">01. Beratung</h4>
+                <p class="opacity-75 text-xs">Exakte Planung und statische Berechnungen.</p>
-                <p class="opacity-70 text-xs">Persönliche Vorort-Analyse Ihrer Wünsche.</p>
               </div>
-              <div class={`rounded-2xl p-6 translate-x-0 md:translate-x-4 ${tpl.cardClass}`}>
-                <h4 class="font-bold mb-1">02. Konzept</h4>
-                <p class="opacity-70 text-xs">Transparente Planung und Angebotserstellung.</p>
             </div>
-              <div class={`rounded-2xl p-6 ${tpl.cardClass}`}>
-                <h4 class="font-bold mb-1">03. Umsetzung</h4>
-                <p class="opacity-70 text-xs">Schnelle, saubere Montage & Abnahme.</p>
           </div>
+          
+          {/* Whitespace-Pause (Atem-Pause / pure Leerraum-Monolith) */}
+          <div class="py-24 text-center border-t border-b border-current/10">
+            <span class="text-xs uppercase tracking-widest opacity-40">Ausgezeichnetes Handwerk</span>
+            <div class="text-4xl font-black mt-2 uppercase tracking-widest opacity-80">PRÄZISION & MEISTERSCHAFT</div>
           </div>
         </div>
       ) : (
-          /* Minimalistisch 1-spaltig / Default */
+        // Typ D: Zentralisiertes Fokus-Layout (Kalkulator-Dummy oder radialer Fokus)
-          <div class="text-center max-w-2xl mx-auto py-8">
+        <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-6xl font-extrabold tracking-tight mt-4 mb-6 leading-tight">
+            <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt kalkulieren.</h1>
-              Einfach. Klar. Auf den Punkt.
+            <p class="opacity-75 text-xs sm:text-sm">Ermitteln Sie Ihren Bedarf schnell und unverbindlich in nur wenigen Schritten.</p>
-            </h1>
+          </div>
-            <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-10 max-w-lg mx-auto">
+          
-              Keine unnötigen Ablenkungen. Wir liefern genau das, was Ihr Betrieb für den Erfolg braucht. Technisch präzise gearbeitet und pünktlich geliefert.
+          {/* The centralized Calculator Block (Monolith) */}
-            </p>
+          <div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
-            <div class="flex gap-4 justify-center">
+            {tpl.group === "Glassmorphismus" && (
-              <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+              <div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
-                Kontakt aufnehmen
+            )}
+            
+            <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Bedarfs-Rechner</h3>
+            <div class="space-y-4">
+              <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>
+              </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>
+              
+              <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>
+              
+              <button class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Ergebnis absenden & anfragen
               </button>
             </div>
           </div>
+        </div>
       )}
 
-      </main>
+      {/* 3. Features Section (Grounded Handwerker-Werte) */}
-
+      <section class="border-t border-current/10 py-16 mt-16">
-      {/* 3. Features Section */}
-      <section class="border-t border-current/10 py-16 px-8">
         <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
           <div class="space-y-2">
-            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 01 ] Meisterqualität</div>
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 01 ] Festpreis-Garantie</div>
-            <p class="opacity-70 text-xs sm:text-sm">Wir arbeiten ausschließlich mit geprüften Fachkräften und hochwertigen Materialien.</p>
+            <p class="opacity-70 text-xs leading-relaxed">Wir halten uns an vereinbarte Angebote. Keine überraschenden Mehrkosten oder Nachkalkulationen.</p>
           </div>
           <div class="space-y-2">
-            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Feste Termine</div>
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Meisterqualität</div>
-            <p class="opacity-70 text-xs sm:text-sm">Pünktlichkeit ist unsere Zusage. Wir halten uns an vereinbarte Ausführungszeiten.</p>
+            <p class="opacity-70 text-xs leading-relaxed">Alle Arbeiten werden nach offiziellen Richtlinien und handwerklichen Normen sorgfältig ausgeführt.</p>
           </div>
           <div class="space-y-2">
-            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Transparente Preise</div>
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Betreuung vor Ort</div>
-            <p class="opacity-70 text-xs sm:text-sm">Keine versteckten Gebühren. Jedes Angebot ist detailliert und verbindlich.</p>
+            <p class="opacity-70 text-xs leading-relaxed">Ein Ansprechpartner für Ihr gesamtes Vorhaben. Direkt ansprechbar und verlässlich.</p>
           </div>
         </div>
       </section>
 
       {/* 4. Mock Contact Form */}
-      <section class="border-t border-current/10 py-16 px-8">
+      <section class="border-t border-current/10 py-16">
         <div class="max-w-xl mx-auto text-center mb-8">
-          <h2 class="text-2xl sm:text-3xl font-bold">Sprechen Sie uns an.</h2>
+          <h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
-          <p class="opacity-70 text-xs mt-2">Wir melden uns innerhalb eines Werktages persönlich bei Ihnen.</p>
+          <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()">
           <div>
-            <label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">Ihr Name</label>
+            <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/20 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
+            <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>
-            <label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
+            <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/20 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
+            <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>
-            <label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">Nachricht</label>
+            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Vorhaben / Nachricht</label>
-            <textarea rows="3" required class="w-full bg-current/5 border border-current/20 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
+            <textarea rows="3" required class="w-full bg-[#1b1b26]/0 bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
           </div>
           <button type="submit" class={`w-full py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
-            Senden
+            Anfrage Senden
           </button>
         </form>
       </section>
 
-      {/* 5. Footer */}
-      <footer class="border-t border-current/10 py-8 px-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs opacity-60">
-        <div>
-          &copy; {new Date().getFullYear()} {tpl.businessType.split(' ')[0]} Mustermann GbR.
-        </div>
-        <div class="flex gap-4">
-          <span>Datenschutz</span>
-          <span>Impressum</span>
-        </div>
-      </footer>
-
     </div>
 
   </div>
+
+  <Footer />
 </Layout>