diff --git a/src/pages/templates.astro b/src/pages/templates.astro
new file mode 100644
index 0000000..9c38288
--- /dev/null
+++ b/src/pages/templates.astro
@@ -0,0 +1,427 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
+import { FaArrowLeft, FaEye, FaDesktop } from 'react-icons/fa';
+
+// List of 20 design templates showcasing maximum diversity in color, structure, and style
+const templates = [
+  {
+    id: "01",
+    name: "Der Handwerker-Klassiker",
+    style: "Einfach & Bodenständig",
+    layout: "Boxed Layout",
+    design: "Brutalismus",
+    colorScheme: "Warm & Earthy (Sand & Terrakotta)",
+    bgClass: "bg-[#FDFBF7] text-[#2C1A11] border-[#2C1A11]/20",
+    theme: "light",
+    accentColor: "bg-[#D97706]",
+    badgeClass: "bg-[#D97706]/10 text-[#D97706]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "02",
+    name: "Dachdecker Meister",
+    style: "Elegant & Professionell",
+    layout: "Split-Screen",
+    design: "Glassmorphismus",
+    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    bgClass: "bg-[#18181B] text-white border-yellow-500/20",
+    theme: "dark",
+    accentColor: "bg-yellow-500",
+    badgeClass: "bg-yellow-500/10 text-yellow-400",
+    layoutPreview: "split"
+  },
+  {
+    id: "03",
+    name: "Solar & Photovoltaik",
+    style: "Tech & Zukunft",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-zinc-900 text-zinc-100 border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-400",
+    layoutPreview: "bento"
+  },
+  {
+    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 border-emerald-500/20",
+    theme: "dark",
+    accentColor: "bg-emerald-500",
+    badgeClass: "bg-emerald-500/10 text-emerald-400",
+    layoutPreview: "asymmetric"
+  },
+  {
+    id: "05",
+    name: "Bio-Hofladen",
+    style: "Rustikal & Natur",
+    layout: "Minimalistisch 1-spaltig",
+    design: "Neomorphismus",
+    colorScheme: "Warm & Earthy (Terrakotta)",
+    bgClass: "bg-[#FAF7F2] text-[#4A3B32] border-[#E8DCC4]",
+    theme: "light",
+    accentColor: "bg-[#C2410C]",
+    badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
+    layoutPreview: "single"
+  },
+  {
+    id: "06",
+    name: "Sanitär & Heizung",
+    style: "Klar & Zuverlässig",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    bgClass: "bg-white text-slate-800 border-slate-200",
+    theme: "light",
+    accentColor: "bg-blue-800",
+    badgeClass: "bg-blue-800/10 text-blue-800",
+    layoutPreview: "bento"
+  },
+  {
+    id: "07",
+    name: "KFZ-Werkstatt Schnellservice",
+    style: "Dynamisch & Direkt",
+    layout: "Split-Screen",
+    design: "Brutalismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-zinc-800 text-white border-zinc-700",
+    theme: "dark",
+    accentColor: "bg-orange-600",
+    badgeClass: "bg-orange-600/15 text-orange-400",
+    layoutPreview: "split"
+  },
+  {
+    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] border-[#D9D2C5]",
+    theme: "light",
+    accentColor: "bg-[#8B5A2B]",
+    badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "09",
+    name: "Steuerberater Premium",
+    style: "Exklusiv & Diskret",
+    layout: "Bento-Grid",
+    design: "Glassmorphismus",
+    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    bgClass: "bg-slate-900 text-slate-100 border-amber-500/20",
+    theme: "dark",
+    accentColor: "bg-amber-500",
+    badgeClass: "bg-amber-500/10 text-amber-400",
+    layoutPreview: "bento"
+  },
+  {
+    id: "10",
+    name: "Garten- & Landschaftsbau",
+    style: "Frisch & Modern",
+    layout: "Asymmetrisch",
+    design: "Glassmorphismus",
+    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    bgClass: "bg-[#F3F7F4] text-slate-800 border-emerald-200",
+    theme: "light",
+    accentColor: "bg-emerald-700",
+    badgeClass: "bg-emerald-700/10 text-emerald-800",
+    layoutPreview: "asymmetric"
+  },
+  {
+    id: "11",
+    name: "Modern Dentists Zahnarzt",
+    style: "Clean & Vertrauensvoll",
+    layout: "Minimalistisch 1-spaltig",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    bgClass: "bg-slate-50 text-slate-800 border-slate-200",
+    theme: "light",
+    accentColor: "bg-[#1E3A8A]",
+    badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
+    layoutPreview: "single"
+  },
+  {
+    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] border-[#EADCC9]",
+    theme: "light",
+    accentColor: "bg-[#B45309]",
+    badgeClass: "bg-[#B45309]/10 text-[#B45309]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "13",
+    name: "Elektro-Technik Meister",
+    style: "Präzise & Leistungsstark",
+    layout: "Split-Screen",
+    design: "Brutalismus",
+    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    bgClass: "bg-neutral-900 text-neutral-100 border-purple-500/20",
+    theme: "dark",
+    accentColor: "bg-purple-600",
+    badgeClass: "bg-purple-600/10 text-purple-400",
+    layoutPreview: "split"
+  },
+  {
+    id: "14",
+    name: "Fitness- & Kraftstudio",
+    style: "Stark & Motivierend",
+    layout: "Asymmetrisch",
+    design: "Brutalismus",
+    colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
+    bgClass: "bg-black text-white border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-500",
+    layoutPreview: "asymmetric"
+  },
+  {
+    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 border-zinc-200",
+    theme: "light",
+    accentColor: "bg-zinc-900",
+    badgeClass: "bg-zinc-950/10 text-zinc-900",
+    layoutPreview: "split"
+  },
+  {
+    id: "16",
+    name: "Physiotherapie Praxis",
+    style: "Achtsam & Gesund",
+    layout: "Minimalistisch 1-spaltig",
+    design: "Glassmorphismus",
+    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    bgClass: "bg-[#F7FAFC] text-slate-800 border-emerald-100",
+    theme: "light",
+    accentColor: "bg-emerald-600",
+    badgeClass: "bg-emerald-600/10 text-emerald-700",
+    layoutPreview: "single"
+  },
+  {
+    id: "17",
+    name: "Metallbau & Schlosserei",
+    style: "Hart & Präzise",
+    layout: "Boxed Layout",
+    design: "Brutalismus",
+    colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+    bgClass: "bg-stone-900 text-stone-100 border-emerald-500/20",
+    theme: "dark",
+    accentColor: "bg-emerald-600",
+    badgeClass: "bg-emerald-600/10 text-emerald-400",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "18",
+    name: "Restaurant & Gaststube",
+    style: "Rustikal & Einladend",
+    layout: "Bento-Grid",
+    design: "Neomorphismus",
+    colorScheme: "Warm & Earthy (Sand-Töne)",
+    bgClass: "bg-[#FAF6F0] text-[#543D2B] border-[#EFEAE2]",
+    theme: "light",
+    accentColor: "bg-[#A75D5D]",
+    badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
+    layoutPreview: "bento"
+  },
+  {
+    id: "19",
+    name: "Software-Entwicklung Byte",
+    style: "Sauber & Strukturiert",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    bgClass: "bg-[#1C1B22] text-zinc-100 border-indigo-500/20",
+    theme: "dark",
+    accentColor: "bg-indigo-500",
+    badgeClass: "bg-indigo-500/10 text-indigo-400",
+    layoutPreview: "bento"
+  },
+  {
+    id: "20",
+    name: "Malerbetrieb Farbenfroh",
+    style: "Kreativ & Präzise",
+    layout: "Asymmetrisch",
+    design: "Glassmorphismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-[#1E1E2E] text-zinc-100 border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-400",
+    layoutPreview: "asymmetric"
+  }
+];
+---
+
+<Layout title="Template-Katalog | N&D i-t SOLUTIONS">
+  <Navbar />
+  
+  <main class="relative min-h-screen bg-brand-darkBg text-white pt-28 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden tactile-grid-bg">
+    
+    <!-- Background Glow (Aurora Effect - kept extremely subtle) -->
+    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-sky-500/[0.02] blur-[150px] pointer-events-none rounded-full"></div>
+    <div class="absolute top-2/3 left-1/3 w-[400px] h-[400px] bg-blue-600/[0.02] blur-[120px] pointer-events-none rounded-full"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      
+      <!-- Back Link -->
+      <a href="/" class="inline-flex items-center gap-2 text-zinc-400 hover:text-brand-arcticBlue text-xs uppercase tracking-wider font-semibold mb-8 group transition-colors">
+        <FaArrowLeft class="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+        Zurück zur Startseite
+      </a>
+
+      <!-- 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>
+        </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.
+        </p>
+      </div>
+
+      <!-- Grid System Container (20 Bento-Kacheln) -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        
+        {templates.map((tpl) => (
+          <a href={`/templates/${tpl.id}`} class={`group relative rounded-2xl p-6 border transition-all duration-300 hover:scale-[1.01] flex flex-col justify-between h-[340px] ${tpl.bgClass} ${tpl.theme === 'dark' ? 'hover:border-white/20' : 'hover:border-black/20'} shadow-lg cursor-pointer block tactile-noise`}>
+            
+            {/* Precision Blueprint Corner Markers */}
+            <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-current/25"></span>
+            <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-current/25"></span>
+            <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-current/25"></span>
+            <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-current/25"></span>
+
+            {/* Overlay glow for modern style */}
+            <div class="absolute inset-0 bg-white/[0.01] dark:bg-white/[0.02] rounded-2xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+            <div>
+              {/* Badge & ID & Status Indicator */}
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-2">
+                  <span class={`text-[10px] font-mono font-bold uppercase px-2 py-0.5 rounded ${tpl.badgeClass}`}>
+                    {tpl.style}
+                  </span>
+                  <span class="relative flex h-2 w-2" title="Vorschau aktiv">
+                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                  </span>
+                </div>
+                <span class="text-xs font-mono opacity-40">#{tpl.id}</span>
+              </div>
+
+              {/* Title & Description */}
+              <h3 class="text-lg font-bold tracking-tight mb-2 line-clamp-2 leading-snug">
+                {tpl.name}
+              </h3>
+              
+              <div class="space-y-1 mt-3">
+                <div class="flex items-center gap-1.5 text-[11px] opacity-70">
+                  <span class="font-bold">Stil:</span> {tpl.design}
+                </div>
+                <div class="flex items-center gap-1.5 text-[11px] opacity-70">
+                  <span class="font-bold">Farbe:</span> {tpl.colorScheme}
+                </div>
+              </div>
+            </div>
+
+            {/* Visual Mini-Layout Preview Component inside card (Bento Content-Mix) */}
+            <div class="my-4 h-16 w-full rounded border border-black/[0.06] dark:border-white/[0.06] bg-black/5 dark:bg-white/5 p-1.5 flex gap-1 justify-center items-stretch relative overflow-hidden">
+              
+              {tpl.layoutPreview === "bento" && (
+                <div class="w-full grid grid-cols-3 gap-1">
+                  <div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="col-span-2 rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "split" && (
+                <div class="w-full flex gap-1">
+                  <div class={`w-1/2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="w-1/2 rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "boxed" && (
+                <div class="w-full flex justify-center items-center p-2">
+                  <div class="w-full h-full rounded border border-black/20 dark:border-white/20 p-1 flex gap-1">
+                    <div class={`w-1/3 rounded ${tpl.accentColor} opacity-70`}></div>
+                    <div class="w-2/3 rounded bg-black/10 dark:bg-white/10"></div>
+                  </div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "asymmetric" && (
+                <div class="w-full grid grid-cols-4 gap-1">
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "single" && (
+                <div class="w-full flex flex-col gap-1 justify-center">
+                  <div class={`h-3 w-3/4 mx-auto rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="h-2 w-1/2 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="h-2 w-2/3 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+            </div>
+
+            {/* CTA action bottom */}
+            <div class="flex items-center justify-between pt-3 border-t border-black/[0.06] dark:border-white/[0.06]">
+              <span class="text-[10px] font-mono opacity-50 uppercase">{tpl.layout}</span>
+              <div class="flex items-center gap-1.5 text-xs font-semibold group-hover:translate-x-0.5 transition-transform">
+                <span>Vorschau</span>
+                <FaDesktop class="w-3 h-3 opacity-60" />
+              </div>
+            </div>
+
+          </a>
+        ))}
+
+      </div>
+
+      <!-- Bottom Info Callout -->
+      <div class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
+        <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+          <div>
+            <h3 class="text-xl font-bold mb-2">Ihr Wunsch-Design ist nicht dabei?</h3>
+            <p class="text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
+              Kein Problem. Jedes Layout wird von uns individuell im Code programmiert. Wir nutzen keine starren Fertig-Systeme. Teilen Sie uns einfach Ihre Vorstellungen mit, und wir setzen sie passgenau um.
+            </p>
+          </div>
+          <a href="/#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200 shrink-0">
+            Design besprechen
+            <FaDesktop class="w-3 h-3" />
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <Footer />
+</Layout>
diff --git a/src/pages/templates/[id].astro b/src/pages/templates/[id].astro
new file mode 100644
index 0000000..aa82fbb
--- /dev/null
+++ b/src/pages/templates/[id].astro
@@ -0,0 +1,521 @@
+---
+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';
+
+export function getStaticPaths() {
+  const templates = [
+    {
+      id: "01",
+      name: "Der Handwerker-Klassiker",
+      style: "Einfach & Bodenständig",
+      layout: "Boxed Layout",
+      design: "Brutalismus",
+      colorScheme: "Warm & Earthy (Sand & Terrakotta)",
+      bgClass: "bg-[#FDFBF7] text-[#2C1A11]",
+      borderClass: "border-2 border-[#2C1A11]",
+      accentText: "text-[#D97706]",
+      accentBg: "bg-[#D97706] hover:bg-[#B45309] text-white",
+      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",
+      design: "Brutalismus",
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-zinc-900 text-white",
+      borderClass: "border-2 border-zinc-700",
+      accentText: "text-orange-500",
+      accentBg: "bg-orange-600 hover:bg-orange-700 text-white",
+      cardClass: "bg-zinc-800 border border-zinc-700",
+      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",
+      design: "Brutalismus",
+      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      bgClass: "bg-neutral-950 text-neutral-100",
+      borderClass: "border border-neutral-800",
+      accentText: "text-purple-400",
+      accentBg: "bg-purple-600 hover:bg-purple-700 text-white",
+      cardClass: "bg-neutral-900 border border-neutral-800",
+      theme: "dark",
+      businessType: "Elektrotechnik & Smart Home"
+    },
+    {
+      id: "14",
+      name: "Fitness- & Kraftstudio",
+      style: "Stark & Motivierend",
+      layout: "Asymmetrisch",
+      design: "Brutalismus",
+      colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
+      bgClass: "bg-black text-white",
+      borderClass: "border-2 border-zinc-800",
+      accentText: "text-orange-500",
+      accentBg: "bg-orange-500 hover:bg-orange-600 text-black font-bold",
+      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",
+      design: "Brutalismus",
+      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+      bgClass: "bg-zinc-900 text-zinc-100",
+      borderClass: "border-2 border-zinc-700",
+      accentText: "text-emerald-400",
+      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
+      cardClass: "bg-zinc-800 border-2 border-zinc-700",
+      theme: "dark",
+      businessType: "Schlosserei & Konstruktion"
+    },
+    {
+      id: "18",
+      name: "Restaurant & Gaststube",
+      style: "Rustikal & Einladend",
+      layout: "Bento-Grid",
+      design: "Neomorphismus",
+      colorScheme: "Warm & Earthy (Sand-Töne)",
+      bgClass: "bg-[#FCFAF7] text-[#4E3629]",
+      borderClass: "border border-[#ECE4D9]",
+      accentText: "text-[#A75D5D]",
+      accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white",
+      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: "light",
+      businessType: "Wirtshaus & Feinkost"
+    },
+    {
+      id: "19",
+      name: "Software-Entwicklung Byte",
+      style: "Sauber & Strukturiert",
+      layout: "Bento-Grid",
+      design: "SaaS-Minimalismus",
+      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      bgClass: "bg-[#0C0C0F] text-zinc-100",
+      borderClass: "border border-zinc-800",
+      accentText: "text-indigo-400",
+      accentBg: "bg-indigo-600 hover:bg-indigo-700 text-white",
+      cardClass: "bg-zinc-900 border border-zinc-800",
+      theme: "dark",
+      businessType: "Software & Webanwendungen"
+    },
+    {
+      id: "20",
+      name: "Malerbetrieb Farbenfroh",
+      style: "Kreativ & Präzise",
+      layout: "Asymmetrisch",
+      design: "Glassmorphismus",
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-[#161622] text-zinc-100",
+      borderClass: "border border-white/5",
+      accentText: "text-orange-400",
+      accentBg: "bg-orange-500 hover:bg-orange-600 text-white",
+      cardClass: "bg-slate-900/60 backdrop-blur border border-white/10",
+      theme: "dark",
+      businessType: "Maler- & Lackiererbetrieb"
+    }
+  ];
+
+  return templates.map((tpl) => ({
+    params: { id: tpl.id },
+    props: { tpl }
+  }));
+}
+
+const { tpl } = Astro.props;
+---
+
+<Layout title={`${tpl.name} | Live-Vorschau`}>
+  <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">
+        <FaArrowLeft class="w-3 h-3" /> Zurück
+      </a>
+      <span class="text-zinc-600">|</span>
+      <div class="text-xs sm:text-sm font-semibold">
+        Design-Vorschau: <span class="text-brand-arcticBlue">{tpl.name}</span>
+      </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-brand-arcticBlue/20 text-brand-arcticBlue rounded hidden sm:inline">{tpl.layout}</span>
+    </div>
+  </div>
+
+  <div class={`min-h-screen pt-16 pb-12 ${tpl.bgClass}`}>
+    
+    {/* Boxed structure wrapper if selected */}
+    <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" : ""}>
+      
+      {/* 1. Header (Dynamic) */}
+      <header class="py-6 px-8 flex justify-between items-center border-b border-current/10">
+        <div class="font-bold text-xl uppercase tracking-wider">
+          {tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
+        </div>
+        <div class="hidden md:flex gap-6 text-sm font-semibold opacity-85">
+          <span class="cursor-pointer">Leistungen</span>
+          <span class="cursor-pointer">Über uns</span>
+          <span class="cursor-pointer">Referenzen</span>
+          <span class="cursor-pointer">Kontakt</span>
+        </div>
+      </header>
+
+      {/* 2. Hero Section (Dynamic Layouts) */}
+      <main class="px-8 py-16 sm:py-24">
+        
+        {tpl.layout === "Split-Screen" ? (
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div>
+              <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Echtes Handwerk seit 1995</span>
+              <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6 leading-tight">
+                Qualität und Zuverlässigkeit für Ihr Projekt.
+              </h1>
+              <p class="opacity-80 text-sm sm:text-base mb-8 max-w-md leading-relaxed">
+                Wir planen und realisieren Ihr Projekt nach Maß. Termingerecht, sauber und absolut professionell vom Meisterbetrieb.
+              </p>
+              <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider transition-colors ${tpl.accentBg}`}>
+                Jetzt Angebot 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">
+                <div class="text-4xl font-bold">100%</div>
+                <div class="text-xs uppercase tracking-wider font-semibold opacity-60">Kundenzufriedenheit</div>
+              </div>
+            </div>
+          </div>
+        ) : tpl.layout === "Bento-Grid" ? (
+          <div>
+            <div class="text-center max-w-2xl mx-auto mb-16">
+              <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Bento Grid Showcase</span>
+              <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6">Moderne Struktur. Voller Fokus.</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}`}>
+                <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>
+                  <p class="opacity-70 text-xs">Fragen Sie Ihr Projekt einfach kostenlos an.</p>
+                </div>
+                <button class={`px-4 py-2 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg} shrink-0`}>
+                  Rückruf anfordern
+                </button>
+              </div>
+            </div>
+          </div>
+        ) : tpl.layout === "Asymmetrisch" ? (
+          <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">
+                Ihr Partner für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>.
+              </h1>
+              <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
+                Wir konzipieren und setzen maßgeschneiderte Lösungen für private und gewerbliche Kunden um. Verlässlich, smart und von Experten ausgeführt.
+              </p>
+              <div class="flex flex-wrap gap-4">
+                <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                  Erstgespräch vereinbaren
+                </button>
+              </div>
+            </div>
+            <div class="lg:col-span-2 space-y-6">
+              <div class={`rounded-2xl p-6 ${tpl.cardClass}`}>
+                <h4 class="font-bold mb-1">01. Beratung</h4>
+                <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>
+            </div>
+          </div>
+        ) : (
+          /* Minimalistisch 1-spaltig / Default */
+          <div class="text-center max-w-2xl mx-auto py-8">
+            <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">
+              Einfach. Klar. Auf den Punkt.
+            </h1>
+            <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.
+            </p>
+            <div class="flex gap-4 justify-center">
+              <button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Kontakt aufnehmen
+              </button>
+            </div>
+          </div>
+        )}
+
+      </main>
+
+      {/* 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>
+            <p class="opacity-70 text-xs sm:text-sm">Wir arbeiten ausschließlich mit geprüften Fachkräften und hochwertigen Materialien.</p>
+          </div>
+          <div class="space-y-2">
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Feste Termine</div>
+            <p class="opacity-70 text-xs sm:text-sm">Pünktlichkeit ist unsere Zusage. Wir halten uns an vereinbarte Ausführungszeiten.</p>
+          </div>
+          <div class="space-y-2">
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Transparente Preise</div>
+            <p class="opacity-70 text-xs sm:text-sm">Keine versteckten Gebühren. Jedes Angebot ist detailliert und verbindlich.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Mock Contact Form */}
+      <section class="border-t border-current/10 py-16 px-8">
+        <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>
+          <p class="opacity-70 text-xs mt-2">Wir melden uns innerhalb eines Werktages persönlich bei Ihnen.</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>
+            <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" />
+          </div>
+          <div>
+            <label class="block text-[10px] font-semibold 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" />
+          </div>
+          <div>
+            <label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">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>
+          </div>
+          <button type="submit" class={`w-full py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+            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>
+</Layout>