Improve Hero text to be more impactful and craft-focused

Add shifting rainbow gradient animation to rain page title
Fix blank PDF by using temporary DOM element for rendering
2026-05-16 06:57:53 +02:00 · 2026-05-16 06:52:26 +02:00 · 2026-05-16 06:46:40 +02:00 · 2026-05-16 06:44:31 +02:00 · 2026-05-16 06:42:54 +02:00 · 2026-05-16 06:40:55 +02:00
31 changed files with 1569 additions and 636 deletions
@@ -1,4 +1,6 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
-// https://astro.build/config
+export default defineConfig({
-export default defineConfig({});
+  integrations: [tailwind()],
 });
@@ -1,7 +1,7 @@
 {
  "name": "brabetz-homepage",
  "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
@@ -10,6 +10,8 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^4.0.0"
+    "astro": "^4.0.0",
    "@astrojs/tailwind": "^5.1.0",
    "tailwindcss": "^3.4.0"
  }
 }
@@ -0,0 +1,28 @@
 backend:
  name: gitea # ACHTUNG: Wenn du GitLab nutzt, ändere das in 'gitlab'
  repo: fberger/brabetz-homepage
  api_root: https://git.brabros.de/api/v1 # Für GitLab: https://git.brabros.de/api/v4
  branch: main
 media_folder: "src/images"
 public_folder: "src/images"
 collections:
  - name: "pages"
    label: "Seiten"
    files:
      - file: "src/content/biodiversity/biotope.md"
        label: "Biotop-Bausteine"
        name: "biotope"
        fields:
          - { label: "Titel", name: "title", widget: "string" }
          - { label: "Beschreibung", name: "description", widget: "string" }
          - label: "Items"
            name: "items"
            widget: "list"
            fields:
              - { label: "Titel", name: "title", widget: "string" }
              - { label: "Beschreibung", name: "description", widget: "text" }
              - { label: "Technik", name: "technique", widget: "string" }
              - { label: "Location", name: "location", widget: "string" }
              - { label: "Icon", name: "icon", widget: "string" }
@@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that builds the page and powers Decap CMS -->
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  </head>
  <body>
  </body>
 </html>
@@ -1,45 +1,93 @@
 ---
 // src/components/Biodiversity.astro
 import { getEntry } from 'astro:content';
 const entry = await getEntry('biodiversity', 'biotope');
 const { data } = entry || { data: { items: [] } };
 ---
-<!-- Biodiversity & Quality Section -->
+<section id="biodiversity" class="py-32 bg-stone-900/30">
 <section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+        <div class="mb-20 text-center">
-            <div class="lg:col-span-6">
+            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Die Symbiose</span>
-                <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Zukunftssicher & Lebendig</span>
+            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Ein friedlicher Dialog zwischen Stein und Pflanze</h2>
-                <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
+            <p class="text-stone-500 max-w-2xl mx-auto font-light">Wie wir traditionelle Baukunst und digitale Intelligenz nutzen, um Oasen der Ruhe in aller Liebe zu erschaffen.</p>
-                <div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
+        </div>
-                <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
+
-                    Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
-                </p>
+            {data.items.map((item) => (
-                <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
+                <div class={`glass p-8 rounded-2xl border ${item.title === 'Die Plantlix-Connection' ? 'border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50' : 'border-stone-800/50 hover:border-emerald-500/30'} transition-all group relative overflow-hidden flex flex-col justify-between`}>
                    In enger Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-amber-400 hover:underline">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. So stellen wir sicher, dass jede Pflanze optimal zum Standort passt, die Biodiversität fördert und klimaresistent ist.
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
                    <div class="flex items-start gap-3">
                        <div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
                    <div>
-                            <h4 class="font-bold text-white text-sm">Native Flora</h4>
+                        {item.title === 'Die Plantlix-Connection' && <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>}
-                            <p class="text-stone-500 text-xs mt-1">Gezielter Einsatz heimischer Pflanzen zur Förderung von Insekten und Vögeln.</p>
+                        <div class={`${item.title === 'Die Plantlix-Connection' ? 'text-emerald-400' : 'text-amber-400'} text-3xl mb-6`}><i class={item.icon}></i></div>
                        <h3 class="text-xl font-luxury font-bold text-white mb-4">{item.title}</h3>
                        <p class={`${item.title === 'Die Plantlix-Connection' ? 'text-stone-300' : 'text-stone-400'} text-sm font-light leading-relaxed mb-4`} set:html={item.description}></p>
                        <div class={`text-xs font-semibold ${item.title === 'Die Plantlix-Connection' ? 'text-amber-500' : 'text-emerald-400'} uppercase tracking-wider`}>{item.technique}</div>
                    </div>
                    <button @click={item.title === 'Die Trockenmauer als Biotop' ? "currentPage = 'page-mauer'" : item.title === 'Das Schwammstadt-Prinzip' ? "currentPage = 'page-gewerbe'" : "currentPage = 'page-plantlix'"} class="mt-6 w-full text-center px-4 py-2.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                        Geschichte lesen
                    </button>
                </div>
-                    <div class="flex items-start gap-3">
+            ))}
-                        <div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
+        </div>
        <!-- Interactive Scanner -->
        <div class="mt-20 glass p-8 rounded-2xl border border-stone-800/50" x-data="{ scanning: false, scanned: false, progress: 0, startScan() { this.scanning = true; let timer = setInterval(() => { this.progress += 5; if (this.progress >= 100) { clearInterval(timer); this.scanning = false; this.scanned = true; } }, 50); } }">
            <div class="flex flex-col md:flex-row items-center justify-between gap-8">
                <div>
-                            <h4 class="font-bold text-white text-sm">Bodenbiologie</h4>
+                    <h3 class="text-xl font-luxury font-bold text-white mb-2">Plantlix Standort-Scanner</h3>
-                            <p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten nach DIN-Vorgaben für langlebiges Grün.</p>
+                    <p class="text-stone-400 text-sm font-light">Simuliere eine Standort-Analyse für dein Projekt.</p>
                </div>
                <button @click="startScan()" :disabled="scanning || scanned" class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                    <span x-show="!scanning && !scanned">Scan starten</span>
                    <span x-show="scanning">Scanne...</span>
                    <span x-show="scanned">Scan abgeschlossen</span>
                </button>
            </div>
            <!-- Progress Bar -->
            <div x-show="scanning" class="mt-6 w-full bg-stone-800 rounded-full h-2">
                <div class="bg-emerald-500 h-2 rounded-full" :style="`width: ${progress}%`"></div>
            </div>
            <!-- Results -->
            <div x-show="scanned" class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Boden-pH</span>
                    <p class="text-xl font-bold text-white">6.8 (Neutral)</p>
                </div>
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Feuchtigkeit</span>
                    <p class="text-xl font-bold text-white">42% (Mäßig)</p>
                </div>
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Empfehlung</span>
                    <p class="text-sm font-bold text-emerald-400">Artenreiche Magerwiese</p>
                </div>
            </div>
            <!-- Call to Action Button -->
            <div x-show="scanned" class="mt-8 text-center" x-transition:enter="transition ease-out duration-500 delay-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                <a href="https://plantlix.de" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                    Echte Analyse auf Plantlix.de starten <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
        </div>
-            <div class="lg:col-span-6">
+
-                <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
+        <!-- Flowchart -->
-                    <img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-5 gap-4 items-center text-center">
-                    <div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
+            <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
-                    <div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
+                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 1</span>
-                        <p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
+                <p class="text-sm font-bold text-white">Standort & Probe</p>
            </div>
            <div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
            <div class="bg-stone-900/50 p-4 rounded-lg border border-emerald-500/30">
                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 2</span>
                <p class="text-sm font-bold text-emerald-400">Plantlix API</p>
            </div>
            <div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
            <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 3</span>
                <p class="text-sm font-bold text-white">Perfekter Pflanzplan</p>
            </div>
        </div>
    </div>
@@ -0,0 +1,101 @@
 ---
 // src/components/EasterEgg.astro
 ---
 <div x-data="{ open: false, plantClicks: 0, blooming: false }" class="fixed bottom-4 right-4 z-50">
    <!-- Modal -->
    <div x-show="open" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
        <div class="glass p-8 rounded-2xl max-w-sm w-full text-center relative border border-emerald-500/30">
            <button @click="open = false; plantClicks = 0; blooming = false" class="absolute top-4 right-4 text-stone-500 hover:text-white">
                <i class="fa-solid fa-times"></i>
            </button>
            <h3 class="text-xl font-luxury font-bold text-white mb-2">Secret Garden</h3>
            <p class="text-stone-400 text-xs mb-6">Klicke auf Gießen, um die Pflanze wachsen zu lassen!</p>
            <div class="h-48 flex items-end justify-center mb-6">
                <!-- The Plant -->
                <div class="relative transition-transform duration-200" :style="`transform: scale(${1 + plantClicks * 0.005})`">
                    <div x-show="!blooming" class="text-emerald-500 text-6xl">
                        <i class="fa-solid fa-seedling"></i>
                    </div>
                    <!-- When blooming -->
                    <div x-show="blooming" class="text-6xl animate-bounce">
                        🌸
                    </div>
                </div>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-mono text-stone-500">Wachstum: <span x-text="plantClicks"></span>%</p>
                <div class="w-full bg-stone-800 h-1.5 rounded-full overflow-hidden">
                    <div class="bg-emerald-500 h-full transition-all" :style="`width: ${plantClicks}%`"></div>
                </div>
            </div>
            <button x-show="!blooming" @click="plantClicks += 10; if(plantClicks >= 100) { plantClicks = 100; blooming = true; }" class="mt-6 w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-colors">
                Gießen 💧
            </button>
            <!-- Award -->
            <div x-show="blooming" x-cloak class="mt-6 text-center" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <div class="text-5xl mb-3">🏆</div>
                <h4 class="text-lg font-luxury font-bold text-white mb-1">Auszeichnung verliehen!</h4>
                <p class="text-stone-400 text-xs mb-4 font-light">Hiermit verleihen wir dir den</p>
                <div class="bg-amber-500/10 border border-amber-500/30 p-4 rounded-lg inline-block mb-4">
                    <span class="text-amber-500 font-bold uppercase tracking-wider text-xs">Goldener Brabetz-Grüner-Daumen</span>
                </div>
                <p class="text-stone-500 text-[10px] font-mono leading-tight mb-4">Zertifikats-ID: BRB-PLX-2026-NICE</p>
                <button @click="window.downloadBrabetzPDF()" class="text-xs text-amber-500 hover:text-amber-400 underline uppercase tracking-wider transition-colors">
                    Als PDF herunterladen 📄
                </button>
            </div>
        </div>
    </div>
    <!-- Listen for custom event -->
    <div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
 </div>
 <script is:inline>
    window.downloadBrabetzPDF = function() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            orientation: 'landscape',
            unit: 'mm',
            format: 'a5'
        });
        // Background
        doc.setFillColor(24, 24, 27); // Dark stone-900
        doc.rect(0, 0, 210, 148, 'F');
        // Border
        doc.setDrawColor(245, 158, 11); // Amber-500
        doc.setLineWidth(1);
        doc.rect(5, 5, 200, 138);
        // Text
        doc.setTextColor(255, 255, 255);
        doc.setFontSize(24);
        doc.text("AUSZEICHNUNG", 105, 30, { align: "center" });
        doc.setTextColor(120, 113, 108); // Stone-500
        doc.setFontSize(12);
        doc.text("Hiermit verleihen wir", 105, 50, { align: "center" });
        doc.setTextColor(245, 158, 11); // Amber-500
        doc.setFontSize(18);
        doc.text("Den Goldenen Brabetz-Grünen-Daumen", 105, 70, { align: "center" });
        doc.setTextColor(120, 113, 108); // Stone-500
        doc.setFontSize(10);
        doc.text("für besondere Verdienste um das Pflanzenwachstum.", 105, 90, { align: "center" });
        doc.text("Zertifikats-ID: BRB-PLX-2026-NICE", 105, 120, { align: "center" });
        doc.save("Brabetz_Auszeichnung.pdf");
    }
 </script>
@@ -1,41 +1,48 @@
 ---
 // src/components/Events.astro
 // HINWEIS: Umbenannt von Events zu Kernkompetenzen (Pflanzen, Bauten, Gehölze)
 ---
-<!-- Events Section -->
+<!-- Core Competencies Section -->
-<section id="events" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
+<section id="competencies" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="mb-20 text-center">
-            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Exklusive Gartenevents</span>
+            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Unsere Kernkompetenzen</span>
-            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Das Komplettpaket für Ihr Event</h2>
+            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Pflanzen, Bauten & Gehölze</h2>
-            <p class="text-stone-500 max-w-2xl mx-auto font-light">Wir gestalten nicht nur Ihren Garten, wir füllen ihn auch mit Leben. Unser exklusives Netzwerk für unvergessliche Momente.</p>
+            <p class="text-stone-500 max-w-2xl mx-auto font-light">Wir konzentrieren uns auf das Wesentliche: Ausgeklügeltes Handwerk und botanische Präzision. Kein Schnickschnack, nur echte Qualität.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <!-- Leihköche -->
+            <!-- Pflanzen -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
-                    <i class="fa-solid fa-utensils"></i>
+                    <i class="fa-solid fa-seedling"></i>
                </div>
-                <h3 class="text-xl font-luxury font-bold text-white mb-3">Beste Leihköche</h3>
+                <h3 class="text-xl font-luxury font-bold text-white mb-3">Pflanzen</h3>
-                <p class="text-stone-400 text-sm font-light leading-relaxed">Kulinarische Meisterwerke direkt in Ihrem Garten. Von Live-Cooking bis zum exklusiven Mehr-Gänge-Menü.</p>
+                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Ausgeklügelte Pflanzkonzepte mit Fokus auf Biodiversität. Wir setzen auf standortgerechte Stauden und klimaresistente Arten, deren Eignung wir vorab über <a href="https://plantlix.de" target="_blank" class="text-amber-400/80 hover:underline">Plantlix.de</a> verifizieren.
                </p>
            </div>
-            <!-- DJs -->
+            <!-- Bauten -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
-                    <i class="fa-solid fa-compact-disc"></i>
+                    <i class="fa-solid fa-trowel-bricks"></i>
                </div>
-                <h3 class="text-xl font-luxury font-bold text-white mb-3">Top DJs</h3>
+                <h3 class="text-xl font-luxury font-bold text-white mb-3">Bauten</h3>
-                <p class="text-stone-400 text-sm font-light leading-relaxed">Die perfekte Soundkulisse für Ihre Sommernacht. Professionelle DJs mit High-End Equipment.</p>
+                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Präzise Steinmetzarbeiten und Trockenmauerwerk nach DIN 18915. Langlebige Konstruktionen im zweihäuptigen Verband, die Struktur geben und Generationen überdauern.
                </p>
            </div>
-            <!-- Eventmanager -->
+            <!-- Gehölze -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
-                    <i class="fa-solid fa-calendar-check"></i>
+                    <i class="fa-solid fa-tree"></i>
                </div>
-                <h3 class="text-xl font-luxury font-bold text-white mb-3">Eventmanager</h3>
+                <h3 class="text-xl font-luxury font-bold text-white mb-3">Gehölze</h3>
-                <p class="text-stone-400 text-sm font-light leading-relaxed">Stressfreie Planung von A bis Z. Wir kümmern uns um Logistik, Deko und Ablauf, damit Sie Gast sein können.</p>
+                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Charakterstarke Solitärgehölze und Großbäume. Wir wählen jedes Gehölz passend zum Mikroklima aus und pflanzen mit optimalem Wurzelraum für gesundes Wachstum.
                </p>
            </div>
        </div>
    </div>
@@ -5,21 +5,87 @@
 <section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
    <div class="max-w-4xl mx-auto px-6">
        <div class="text-center mb-16">
-            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
+            <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Klartext</span>
            <h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
        </div>
-        <div class="space-y-4">
+        <div class="space-y-4" x-data="{ faqOpen: null }">
            <!-- FAQ 1 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
                <div class="flex justify-between items-center p-6 select-none">
-                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
+                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
-                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
+                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 1 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
                </div>
            </div>
            <!-- FAQ 2 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 2 ? null : 2)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie läuft die Zusammenarbeit mit Plantlix.de ab?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 2 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 2" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Vor jedem Projekt machen wir eine Standortanalyse (Boden, Licht, Wasser). Diese Daten fließen in die Plantlix-API ein. Plantlix schlägt uns dann die perfekte pflanzensoziologische Zusammenstellung vor. So garantieren wir, dass dein Garten ohne viel Pflegeaufwand prächtig gedeiht.
                </div>
            </div>
            <!-- FAQ 3 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 3 ? null : 3)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Was bedeutet das Schwammstadt-Prinzip für meinen Garten?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 3 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 3" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Es bedeutet, dass wir deinen Garten so planen, dass er Starkregen wie ein Schwamm aufsaugen kann. Statt das Wasser teuer in die Kanalisation zu leiten, speichern wir es in Rigolen und Mulden. Das spart Abwassergebühren und versorgt deine Pflanzen in Trockenzeiten.
                </div>
            </div>
            <!-- FAQ 4 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 4 ? null : 4)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie stabil sind Trockenmauern ohne Mörtel?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 4 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 4" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Extrem stabil, wenn man es richtig macht! Wir setzen die Steine mit einer leichten Neigung zum Hang (Anlauf) und hinterfüllen sie mit frostsicherem Schotter. Das Wasser kann abfließen, statt Druck aufzubauen. Das ist echte Handwerkskunst nach VOB/C!
                </div>
            </div>
            <!-- FAQ 5 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 5 ? null : 5)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Warum ist der Unterbau bei Pflasterarbeiten so wichtig?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 5 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 5" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Weil der Unterbau 90% der Last trägt! Wir graben tief genug aus, verfüllen mit frostsicherem Material und verdichten Schicht für Schicht. Nur so verhindern wir, dass die Steine nach ein paar Jahren absacken oder durch Frost auffrieren.
                </div>
            </div>
            <!-- FAQ 6 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 6 ? null : 6)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie bleibt ein Schwimmteich ohne Chemie sauber?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 6 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 6" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Durch ein ausgeklügeltes biologisches Gleichgewicht! Wir bauen eine separate Regenerationszone mit speziellen Wasserpflanzen und Zeolith-Filtern. Diese entziehen dem Wasser die Nährstoffe, sodass Algen keine Lebensgrundlage haben. Natur pur!
                </div>
            </div>
            <!-- FAQ 7 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 7 ? null : 7)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wann ist der beste Zeitpunkt für eine Gartenumgestaltung?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 7 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 7" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Eigentlich das ganze Jahr über, außer bei starkem Dauerfrost! Der Herbst und das zeitige Frühjahr sind ideal für Pflanzungen, da der Boden feucht ist. Bauliche Maßnahmen (Mauern, Pflaster) können wir fast immer durchführen.
                </div>
            </div>
        </div>
    </div>
 </section>
@@ -2,12 +2,46 @@
 // src/components/Footer.astro
 ---
 <!-- Footer -->
-<footer class="bg-stone-950 py-16 text-stone-500 border-t border-stone-900 text-sm text-center">
+<footer class="bg-stone-950 py-24 text-stone-500 border-t border-stone-900 text-sm">
-    <div class="max-w-7xl mx-auto px-6">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12">
-        <p class="font-luxury text-white mb-2 tracking-wider">Gebrüder Brabetz GmbH &copy; 2026</p>
+        <!-- Column 1: Brand -->
-        <p class="text-xs text-stone-600 mb-6">Meisterbetrieb für Garten- & Landschaftsbau // Rheingau-Taunus-Kreis</p>
+        <div>
-        <button @click="currentPage = 'page-contact'" class="text-amber-500 hover:text-amber-400 underline text-xs font-semibold uppercase tracking-wider transition-colors">
+            <p class="font-luxury text-white text-lg mb-4 tracking-wider">Gebrüder Brabetz GmbH</p>
-            Direktlink zur Bauleitung
+            <p class="text-xs text-stone-600 leading-relaxed">
                Meisterbetrieb für Garten- & Landschaftsbau im Rheingau-Taunus-Kreis. Gärten, die berühren. Handwerk, das bleibt.
            </p>
            <p class="text-xs text-stone-700 mt-4">
                Technologiepartner: <a href="https://plantlix.de" target="_blank" class="text-emerald-500/50 hover:text-emerald-500 hover:underline transition-colors">Plantlix.de</a>
            </p>
        </div>
        <!-- Column 2: Leistungen -->
        <div>
            <h4 class="text-white text-xs uppercase font-mono tracking-widest mb-4">Leistungen</h4>
            <ul class="space-y-2 text-xs">
                <li><a href="#projects" class="hover:text-amber-400 transition-colors">Meisterhafter Trockenmauerbau</a></li>
                <li><a href="#biodiversity" class="hover:text-amber-400 transition-colors">Schwammstadt-Systeme</a></li>
                <li><a href="#plant-of-the-week" class="hover:text-amber-400 transition-colors">Botanische Pflanzpläne</a></li>
            </ul>
        </div>
        <!-- Column 3: Kontakt -->
        <div>
            <h4 class="text-white text-xs uppercase font-mono tracking-widest mb-4">Kontakt</h4>
            <ul class="space-y-2 text-xs font-mono">
                <li><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</li>
                <li><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</li>
                <li class="mt-4">
                    <button @click="currentPage = 'page-contact'" class="text-amber-500 hover:text-amber-400 underline uppercase tracking-wider transition-colors">
                        Anfrage starten
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <!-- Bottom -->
    <div class="max-w-7xl mx-auto px-6 lg:px-8 mt-16 pt-8 border-t border-stone-900/50 text-center text-[10px] text-stone-700">
        <p x-data="{ clickCount: 0 }" class="select-none">&copy; 2026 <span @click="clickCount++; if(clickCount >= 5) { window.dispatchEvent(new CustomEvent('open-easter-egg')); clickCount = 0; }" class="cursor-pointer hover:text-stone-500">Gebrüder Brabetz GmbH</span>. Alle Rechte vorbehalten. | <button @click="currentPage = 'page-impressum'" class="hover:text-stone-500">Impressum</button> | <button @click="currentPage = 'page-datenschutz'" class="hover:text-stone-500">Datenschutz</button></p>
    </div>
 </footer>
@@ -1,6 +1,13 @@
 ---
 // src/components/Hero.astro
 ---
 <style>
    @keyframes fall {
        to {
            transform: translateY(100vh);
        }
    }
 </style>
 <!-- Hero Section -->
 <header class="relative min-h-screen flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 z-0">
@@ -8,15 +15,45 @@
        <div class="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/80 to-stone-950"></div>
    </div>
-    <div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20">
+    <div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20" x-data="{ rain: false, drops: [] }" x-init="for(let i=0; i<50; i++) drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 })">
-        <span class="text-xs font-bold tracking-[0.4em] text-amber-500 uppercase bg-emerald-950/80 px-6 py-2.5 rounded-full border border-amber-500/20 backdrop-blur-sm inline-block mb-8">
+        
-            Null Pfusch. Maximale Gewährleistung.
+        <!-- Rain Container -->
        <div x-show="rain" x-cloak class="absolute inset-0 pointer-events-none z-0 overflow-hidden">
            <template x-for="drop in drops">
                <div class="absolute bg-emerald-400/20 w-0.5 h-6" 
                     :style="`left: ${drop.left}%; top: -20px; animation: fall ${drop.speed}s linear infinite; animation-delay: ${drop.delay}s`">
                </div>
            </template>
        </div>
        <span class="text-xs font-bold tracking-[0.2em] text-amber-500 uppercase bg-emerald-950/80 px-6 py-2.5 rounded-full border border-amber-500/20 backdrop-blur-sm inline-block mb-4">
            Handwerk aus dem Herzen. Natur im Einklang. // Powered by Plantlix
        </span>
-        <h1 class="text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide leading-tight mb-6">
+        
-            Wer billig baut,<br>baut dreimal.
+        <!-- Live Status / Weather Widget -->
        <div class="mb-4 text-xs font-mono text-stone-500 flex justify-center items-center gap-2" x-data="{ temp: '...', icon: 'fa-cloud-sun', text: 'Wird geladen...' }" x-init="fetch('https://api.open-meteo.com/v1/forecast?latitude=50.1&longitude=8.0&current_weather=true').then(r => r.json()).then(data => { temp = Math.round(data.current_weather.temperature) + '°C'; const code = data.current_weather.weathercode; if(code === 0) { icon = 'fa-sun'; text = 'Perfektes Wetter für Gartenarbeit!'; } else if(code < 4) { icon = 'fa-cloud-sun'; text = 'Gutes Wetter für den Trockenmauerbau.'; } else if(code < 60) { icon = 'fa-cloud'; text = 'Gedecktes Wetter, ideal zum Pflanzen.'; } else { icon = 'fa-cloud-showers-heavy'; text = 'Regnerisch. Zeit für Planung!'; } }).catch(() => { temp = '18°C'; icon = 'fa-cloud-sun'; text = 'Aktuell perfektes Wetter für den Trockenmauerbau.'; })">
            <i class="fa-solid" :class="icon + ' text-emerald-400'"></i>
            <span>Rheingau-Taunus: <span x-text="temp"></span></span>
            <span class="text-stone-700">//</span>
            <span class="text-emerald-400" x-text="text"></span>
        </div>
        <!-- Rain Detail Page Button -->
        <div class="mb-8">
            <button @click="currentPage = 'page-rain'" class="text-emerald-400 hover:text-emerald-300 text-xs font-mono flex justify-center items-center gap-2 mx-auto bg-stone-900/50 px-4 py-2 rounded-full border border-emerald-900/50 hover:border-emerald-500 transition-colors backdrop-blur-sm">
                <i class="fa-solid fa-cloud-showers-heavy"></i>
                <span>Regen-Modus für Gemütlichkeit entdecken</span>
            </button>
        </div>
        <h1 class="text-3xl sm:text-5xl lg:text-6xl font-luxury font-bold tracking-wide leading-tight mb-4">
            „Wer einen Garten anlegt,<br>findet das Glück von selbst.“
        </h1>
        <p class="text-xs text-stone-500 font-mono uppercase tracking-widest mb-12">
            — Karl Foerster, Gärtner & Garten-Philosoph
        </p>
        <p class="text-xl text-stone-400 max-w-3xl mx-auto font-light leading-relaxed mb-12">
-            Wir bauen für Generationen. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision und messbare VOB-Transparenz im Rheingau-Taunus-Kreis.
+            Im Rheingau-Taunus verschmelzen wir archaische Handwerkskunst mit tiefer botanischer Leidenschaft. Wir bändigen die Natur nicht, sondern geben ihr eine meisterhafte Form – von der zeitlosen Trockenmauer bis zum klimaresistenten Pflanzkonzept. Für Gärten, die Generationen überdauern.
        </p>
        <div class="flex flex-wrap justify-center gap-6">
            <a href="#projects" class="px-8 py-3.5 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-lg border border-white/10 transition-all backdrop-blur-sm text-xs uppercase tracking-widest">
@@ -17,7 +17,7 @@
        <div class="hidden lg:flex items-center gap-10 text-xs font-semibold uppercase tracking-widest text-stone-400">
            <a href="#standards" class="hover:text-amber-400 transition-colors">Regelwerk</a>
            <a href="#projects" class="hover:text-amber-400 transition-colors">Projekte</a>
-            <a href="#events" class="hover:text-amber-400 transition-colors">Events</a>
+            <a href="#competencies" class="hover:text-amber-400 transition-colors">Leistungen</a>
            <a href="#biodiversity" class="hover:text-amber-400 transition-colors">Natur</a>
            <a href="#faq" class="hover:text-amber-400 transition-colors">FAQ</a>
            <button @click="currentPage = 'page-contact'" class="bg-emerald-800 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg transition-all shadow-lg text-xs uppercase tracking-wider font-bold border border-emerald-700 hover:border-emerald-600">
@@ -0,0 +1,55 @@
 ---
 // src/components/PlantOfTheWeek.astro
 ---
 <section id="plant-of-the-week" class="py-32 bg-stone-900/10 border-y border-stone-800/50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="mb-16 text-center">
            <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Botanische Empfehlung</span>
            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Pflanze der Woche</h2>
            <p class="text-stone-500 max-w-2xl mx-auto font-light">Präsentiert in Kooperation mit den Datenexperten von Plantlix.de</p>
        </div>
        <div class="glass overflow-hidden rounded-3xl border border-emerald-500/20 max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2">
            <!-- Image -->
            <div class="relative h-64 md:h-full overflow-hidden">
                <img src="https://images.unsplash.com/photo-1632156383859-372ef15ad6bd?fm=jpg&q=60&w=800&auto=format&fit=crop" alt="Wiesensalbei" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-r from-stone-900/50 to-transparent md:hidden"></div>
            </div>
            <!-- Content -->
            <div class="p-8 md:p-12 flex flex-col justify-between bg-stone-900/50">
                <div>
                    <div class="flex items-center gap-3 mb-4">
                        <span class="text-xs font-mono text-emerald-400 bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-500/20 uppercase tracking-widest">Wiesensalbei</span>
                        <span class="text-xs font-mono text-stone-500 italic">*Salvia pratensis*</span>
                    </div>
                    <h3 class="text-2xl font-luxury font-bold text-white mb-4">Der Überlebenskünstler für magere Böden</h3>
                    <p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
                        Der Wiesensalbei ist eine der wertvollsten Pflanzen für unsere heimische Insektenwelt. Er liebt sonnige, trockene Standorte und kommt hervorragend mit den zunehmenden Hitzeperioden im Rheingau klar.
                    </p>
                    <div class="space-y-3 text-xs text-stone-500">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-emerald-500"></i>
                            <span>Boden: Trocken bis mäßig trocken, kalkhaltig</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-emerald-500"></i>
                            <span>Licht: Volle Sonne</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-emerald-500"></i>
                            <span>Insektenwert: Extrem hoch (Hummeln, Wildbienen)</span>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-stone-800 pt-6 flex items-center justify-between">
                    <span class="text-xs text-stone-600 font-light">Datenbasis: Plantlix.de (Standort-Matching)</span>
                    <a href="https://plantlix.de" target="_blank" class="text-emerald-400 hover:text-emerald-300 text-xs font-semibold uppercase tracking-wider transition-colors flex items-center gap-1">
                        Mehr erfahren <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
 </section>
@@ -0,0 +1,95 @@
 ---
 // src/components/PlantQuiz.astro
 ---
 <section class="py-24 bg-stone-950">
    <div class="max-w-4xl mx-auto px-6 text-center">
        <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Spielerisch lernen</span>
        <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Das kleine Pflanzen-Quiz</h2>
        <p class="text-stone-400 mb-12 font-light">Teste dein Wissen! In Kooperation mit den Lern-Algorithmen von Plantlix.de.</p>
        <div class="glass p-8 rounded-2xl border border-stone-800 text-left" 
             x-data="{ 
                 answered: false, 
                 correct: false, 
                 selected: '',
                 question: 'Lade Quiz-Frage von Plantlix...', 
                 options: [], 
                 correctAnswer: '', 
                 explanation: '',
                 loading: true,
                 init() {
                     // Versuche die Frage von Plantlix zu holen
                     fetch('https://plantlix.de/api/quiz/random')
                         .then(res => {
                             if (!res.ok) throw new Error('API Fehler');
                             return res.json();
                         })
                         .then(data => {
                             this.question = data.question;
                             this.options = data.options; // Erwartet Array von Objekten: { key: 'A', text: '...' }
                             this.correctAnswer = data.correctAnswer; // Erwartet 'A', 'B' oder 'C'
                             this.explanation = data.explanation;
                             this.loading = false;
                         })
                         .catch(err => {
                             console.log('Plantlix API nicht erreichbar, nutze Fallback-Frage.');
                             // Fallback-Daten (die ursprüngliche Frage)
                             this.question = 'Welcher dieser Bäume ist ein extremer Tiefwurzler und übersteht Trockenheit am besten?';
                             this.options = [
                                 { key: 'A', text: 'Die Rotbuche (*Fagus sylvatica*)' },
                                 { key: 'B', text: 'Die Stieleiche (*Quercus robur*)' },
                                 { key: 'C', text: 'Die Fichte (*Picea abies*)' }
                             ];
                             this.correctAnswer = 'B';
                             this.explanation = 'Die Stieleiche bildet eine tiefgehende Pfahlwurzel und kommt so auch in trockenen Sommern an Wasser. Buchen und Fichten sind Flachwurzler und leiden schneller unter Trockenstress.';
                             this.loading = false;
                         });
                 }
             }">
            <!-- Loading State -->
            <div x-show="loading" class="text-center py-6">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-emerald-500 mb-4"></div>
                <p class="text-stone-500 text-sm font-mono" x-text="question"></p>
            </div>
            <!-- Quiz Content -->
            <div x-show="!loading" x-cloak>
                <h3 class="text-xl font-bold text-white mb-6" x-text="question"></h3>
                <div class="space-y-4" x-show="!answered">
                    <template x-for="option in options" :key="option.key">
                        <button @click="answered = true; selected = option.key; correct = (option.key === correctAnswer)" 
                                class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center group">
                            <span>
                                <span class="font-mono text-emerald-500 mr-2" x-text="option.key + ')'"></span>
                                <span x-text="option.text"></span>
                            </span>
                            <i class="fa-solid fa-chevron-right text-stone-600 group-hover:text-emerald-500 transition-colors"></i>
                        </button>
                    </template>
                </div>
                <!-- Result -->
                <div x-show="answered" class="text-center py-6" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                    <div x-show="correct" class="text-emerald-400">
                        <div class="text-4xl mb-4"><i class="fa-solid fa-circle-check"></i></div>
                        <h4 class="text-xl font-bold mb-2">Absolut richtig!</h4>
                        <p class="text-stone-400 text-sm font-light" x-text="explanation"></p>
                    </div>
                    <div x-show="!correct" class="text-amber-500">
                        <div class="text-4xl mb-4"><i class="fa-solid fa-circle-xmark"></i></div>
                        <h4 class="text-xl font-bold mb-2">Leider nicht ganz!</h4>
                        <p class="text-stone-400 text-sm font-light">
                            Die richtige Antwort ist <span class="font-bold" x-text="correctAnswer"></span>. 
                            <span x-text="explanation"></span>
                        </p>
                    </div>
                    <button @click="answered = false; selected = ''; correct = false; init();" class="mt-8 text-xs text-stone-500 hover:text-white underline uppercase tracking-wider transition-colors">
                        Nächste Frage laden
                    </button>
                </div>
            </div>
        </div>
    </div>
 </section>
@@ -6,25 +6,28 @@
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="mb-20 text-center">
            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Ausgeführte Großprojekte</span>
-            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Harte Fakten statt schöner Renderings</h2>
+            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Geschichten aus Stein und Erde</h2>
-            <p class="text-stone-500 max-w-2xl mx-auto font-light">Echte Baustellen, echte Massen, echte Qualität.</p>
+            <p class="text-stone-500 max-w-2xl mx-auto font-light">Jeder Garten erzählt eine eigene Geschichte. Hier sind zwei unserer liebsten Projekte, die wir mit Herzblut realisiert haben.</p>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Project 1 -->
            <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-64 overflow-hidden">
-                    <img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
+                    <img src="https://images.unsplash.com/photo-1772974566583-a8c2b9e362ca?fm=jpg&q=60&w=800&auto=format&fit=crop" alt="Trockenmauer im Taunus" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                    <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                    <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span>
                    <span class="absolute top-4 right-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest flex items-center gap-1">
                        <i class="fa-solid fa-leaf"></i> Plantlix verifiziert
                    </span>
                </div>
                <div class="p-8 flex flex-col flex-grow justify-between">
                    <div>
-                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Monumentale Hangterrassierung</h3>
+                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Die schwebende Trockenmauer im Taunus</h3>
-                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
+                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein steiler Hang drohte wegzurutschen. Statt Beton bauten wir eine 3 Meter hohe Trockenmauer aus regionalem Quarzit. Stein für Stein im zweihäuptigen Verband. Heute sonnen sich dort Eidechsen.</p>
                    </div>
                    <button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
-                        Technische Detailseite öffnen
+                        Geschichte lesen
                    </button>
                </div>
            </div>
@@ -32,17 +35,62 @@
            <!-- Project 2 -->
            <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-64 overflow-hidden">
-                    <img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
+                    <img src="https://images.unsplash.com/photo-1690404946138-f12ca2497d36?fm=jpg&q=60&w=800&auto=format&fit=crop" alt="Sponge City Garten" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                    <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                    <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span>
                    <span class="absolute top-4 right-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest flex items-center gap-1">
                        <i class="fa-solid fa-leaf"></i> Plantlix verifiziert
                    </span>
                </div>
                <div class="p-8 flex flex-col flex-grow justify-between">
                    <div>
-                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Großflächen-Wegebau & Rigolensystem</h3>
+                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Die blühende Schwammstadt</h3>
-                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerter Entwässerung.</p>
+                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">In einem Neubaugebiet staute sich das Regenwasser. Wir bauten ein Rigolensystem und tarnten es als wunderschönes Sumpfbiotop. Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm – optimiert durch die Pflanzenanalysen von <a href="https://plantlix.de" target="_blank" class="text-emerald-400/80 hover:underline">Plantlix.de</a>.</p>
                    </div>
                    <button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
-                        Technische Detailseite öffnen
+                        Geschichte lesen
                    </button>
                </div>
            </div>
            <!-- Project 3: Teichbau -->
            <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-64 overflow-hidden">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Swimming_Pond_Ready.jpg" alt="Schwimmteich" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                    <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                    <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study III</span>
                    <span class="absolute top-4 right-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest flex items-center gap-1">
                        <i class="fa-solid fa-leaf"></i> Plantlix verifiziert
                    </span>
                </div>
                <div class="p-8 flex flex-col flex-grow justify-between">
                    <div>
                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Der lebendige Schwimmteich</h3>
                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein Kunde wollte einen klassischen Pool. Wir überzeugten ihn von einem biologischen Badeparadies. Ohne Chlor, dafür mit einer Regenerationszone aus über 200 Wasserpflanzen. Kristallklares Wasser im Einklang mit der Natur.</p>
                    </div>
                    <button @click="currentPage = 'page-teich'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                        Geschichte lesen
                    </button>
                </div>
            </div>
            <!-- Project 4: Weinberg -->
            <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-64 overflow-hidden">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Ingersheim_%28Neckar%29_-_Kleiningersheim_-_M%C3%BChlberg_-_Weinberge_am_Schloss_-_Treppe_%281%29.jpg" alt="Weinberg Terrassen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                    <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                    <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study IV</span>
                    <span class="absolute top-4 right-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest flex items-center gap-1">
                        <i class="fa-solid fa-leaf"></i> Plantlix verifiziert
                    </span>
                </div>
                <div class="p-8 flex flex-col flex-grow justify-between">
                    <div>
                        <h3 class="text-2xl font-luxury font-bold text-white mb-3">Die Weinberg-Terrassierung</h3>
                        <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein historischer Steilhang-Weinberg im Rheingau drohte durch Erosion zu verfallen. Wir sicherten den Hang mit über 150 Metern Trockenmauerwerk und schufen neue, bepflanzbare Terrassen. Ein Denkmal für die Region.</p>
                    </div>
                    <button @click="currentPage = 'page-weinberg'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                        Geschichte lesen
                    </button>
                </div>
            </div>
@@ -12,7 +12,7 @@
            </div>
            <div class="lg:col-span-7">
                <p class="text-stone-400 text-lg leading-relaxed font-light">
-                    Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach <strong class="text-white font-semibold">VOB/C</strong> aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
+                    Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach <strong class="text-white font-semibold">VOB/C (speziell ATV DIN 18320 für Landschaftsbauarbeiten)</strong> aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Das bedeutet für Sie: Keine Schätzgebühren, faire Übermessungsregeln und absolute Abrechnungsklarheit nach tatsächlichem Aufwand. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
                </p>
            </div>
        </div>
@@ -15,37 +15,103 @@
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
-            <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ submitted: false }">
+            <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ step: 1, submitted: false, projectType: '', area: '', slope: false }">
-                <form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted">
+                <!-- Progress Indicator -->
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                <div class="flex items-center justify-between mb-8" x-show="!submitted">
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 1 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">1</span>
                        <span class="text-xs font-mono text-stone-400">Projekt</span>
                    </div>
                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 2 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">2</span>
                        <span class="text-xs font-mono text-stone-400">Details</span>
                    </div>
                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 3 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">3</span>
                        <span class="text-xs font-mono text-stone-400">Kontakt</span>
                    </div>
                </div>
                <form @submit.prevent="submitted = true; setTimeout(() => { submitted = false; step = 1; }, 5000)" class="space-y-6" x-show="!submitted">
                    <!-- Step 1: Project Type -->
                    <div x-show="step === 1" class="space-y-4">
                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-4 tracking-widest">Was möchtest du bauen? *</label>
                        <div class="grid grid-cols-1 gap-4">
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'mauer' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="mauer" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Trockenmauerwerk / Hangsicherung</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Traditioneller Steinbau für Ewigkeit und Biodiversität.</p>
                            </label>
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'schwamm' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="schwamm" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Schwammstadt-System / Entwässerung</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Intelligentes Regenwassermanagement und Rigolen.</p>
                            </label>
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'garten' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="garten" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Premium Privatgarten</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Komplette Neugestaltung mit Fokus auf Natur. Inklusive kostenloser Standort-Analyse durch <span class="text-emerald-400 font-semibold">Plantlix.de</span>!</p>
                            </label>
                        </div>
                        <button type="button" @click="step = 2" :disabled="!projectType" class="w-full mt-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                            Weiter zu den Details
                        </button>
                    </div>
                    <!-- Step 2: Details -->
                    <div x-show="step === 2" class="space-y-6">
                        <div>
-                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</label>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Ungefähre Fläche (m²)</label>
                            <input type="number" x-model="area" placeholder="z.B. 100" class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gibt es eine Hanglage?</label>
                            <div class="flex gap-4">
                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
                                    <input type="radio" name="slope" :value="true" x-model="slope" class="hidden">
                                    Ja, Hanglage
                                </label>
                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="!slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
                                    <input type="radio" name="slope" :value="false" x-model="slope" class="hidden">
                                    Nein, flach
                                </label>
                            </div>
                        </div>
                        <div class="flex gap-4 mt-6">
                            <button type="button" @click="step = 1" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                                Zurück
                            </button>
                            <button type="button" @click="step = 3" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                                Weiter zum Kontakt
                            </button>
                        </div>
                    </div>
                    <!-- Step 3: Contact -->
                    <div x-show="step === 3" class="space-y-6">
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Dein Name *</label>
                            <input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
                        <div>
-                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Direkte E-Mail *</label>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">E-Mail Adresse *</label>
                            <input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
-                    </div>
+                        <div class="flex gap-4 mt-6">
-                    <div>
+                            <button type="button" @click="step = 2" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
-                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gewerk / Projektart</label>
+                                Zurück
                        <select class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500 transition-colors">
                            <option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
                            <option>Exklusive Neuanlage (Privatgarten Premium)</option>
                            <option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Projektdaten (Maße, Fakten)</label>
                        <textarea rows="4" placeholder="Zahlen, Maße und Fakten..." class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors"></textarea>
                    </div>
                    <button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
                        Daten zur Prüfung einreichen
                            </button>
                            <button type="submit" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
                                Konfiguration senden
                            </button>
                        </div>
                    </div>
                </form>
                <div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
-                    ✔ Datensatz erfolgreich an die Bauleitung übermittelt. Wir prüfen Ihre Angaben.
+                    ✔ Konfiguration erfolgreich an die Bauleitung übermittelt. Wir prüfen deine Angaben.
                </div>
            </div>
@@ -0,0 +1,30 @@
 ---
 // src/components/SubpageDatenschutz.astro
 ---
 <div x-show="currentPage === 'page-datenschutz'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
    <div class="max-w-4xl mx-auto space-y-12">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Rechtliches</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Datenschutz</h1>
        </div>
        <div class="glass p-8 rounded-2xl text-stone-400 text-sm leading-relaxed space-y-6">
            <div>
                <h3 class="text-white font-bold mb-2">1. Datenschutz auf einen Blick</h3>
                <p>Wir nehmen den Schutz deiner persönlichen Daten sehr ernst. Wir behandeln deine personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
            </div>
            <div>
                <h3 class="text-white font-bold mb-2">2. Datenerfassung auf unserer Website</h3>
                <p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten kannst du dem Impressum dieser Website entnehmen.</p>
            </div>
            <div>
                <h3 class="text-white font-bold mb-2">3. Plugins und Tools</h3>
                <p>Unsere Website nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Web Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt dein Browser die benötigten Web Fonts in deinen Browsercache, um Texte und Schriftarten korrekt anzuzeigen.</p>
            </div>
        </div>
    </div>
 </div>
@@ -2,15 +2,56 @@
 // src/components/SubpageGewerbe.astro
 ---
 <!-- Subpage: Gewerbe -->
-<div x-show="currentPage === 'page-gewerbe'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
+<div x-show="currentPage === 'page-gewerbe'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
-    <div class="max-w-6xl mx-auto space-y-12">
+    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
-            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2026-03</span>
+            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study II</span>
-            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Das Logistik-Plateau</h1>
+            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die blühende Schwammstadt</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed">
                Wie wir ein Entwässerungsproblem in ein blühendes Sumpfbiotop verwandelten – optimiert durch Plantlix.
            </p>
        </div>
        <!-- Story Content -->
        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
                <p>In einem neu erschlossenen Wohngebiet gab es massiven Ärger: Bei Starkregen staute sich das Wasser auf den Grundstücken, weil der Boden das Wasser nicht schnell genug aufnehmen konnte. Die Kanalisation war überlastet. Die Gemeinde forderte eine Lösung zur Regenwasser-Rückhaltung.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
                <p>Statt hässlicher Betonbecken bauten wir ein intelligentes Rigolensystem unter der Erde. Das Besondere: An der Oberfläche tarnten wir das System als wunderschönes, natürliches Sumpfbiotop.</p>
                <p class="mt-2">Über die API von **Plantlix.de** analysierten wir die Standortbedingungen. Plantlix lieferte uns die perfekte pflanzensoziologische Zusammenstellung für ein wechselfeuchtes Biotop. Wir pflanzten über 300 spezialisierte Sumpf- und Wasserpflanzen.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
                <p>Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm. Es gibt keine Überschwemmungen mehr. Und der Kunde hat statt einer technischen Anlage eine wunderschöne Oase, in der sich Libellen und Amphibien sichtlich wohlfühlen.</p>
            </div>
        </div>
        <!-- Facts & Figures -->
        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">50.000 l</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Speicherkapazität</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">300+</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Spezialpflanzen</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">100 %</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Regenwassernutzung</span>
            </div>
        </div>
        <!-- Keep the Charts -->
        <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
    </div>
 </div>
@@ -0,0 +1,39 @@
 ---
 // src/components/SubpageImpressum.astro
 ---
 <div x-show="currentPage === 'page-impressum'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
    <div class="max-w-4xl mx-auto space-y-12">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Rechtliches</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Impressum</h1>
        </div>
        <div class="glass p-8 rounded-2xl text-stone-400 text-sm leading-relaxed space-y-6">
            <div>
                <h3 class="text-white font-bold mb-2">Angaben gemäß § 5 TMG:</h3>
                <p>Gebrüder Brabetz GmbH</p>
                <p>Musterstraße 123</p>
                <p>12345 Musterstadt</p>
            </div>
            <div>
                <h3 class="text-white font-bold mb-2">Vertreten durch:</h3>
                <p>Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
            </div>
            <div>
                <h3 class="text-white font-bold mb-2">Kontakt:</h3>
                <p>Telefon: 06124 / 4654</p>
                <p>E-Mail: info@gebrueder-brabetz.de</p>
            </div>
            <div>
                <h3 class="text-white font-bold mb-2">Registereintrag:</h3>
                <p>Eintragung im Handelsregister.</p>
                <p>Registergericht: Mustergericht</p>
                <p>Registernummer: HRB 12345</p>
            </div>
        </div>
    </div>
 </div>
@@ -2,15 +2,56 @@
 // src/components/SubpageMauer.astro
 ---
 <!-- Subpage: Mauer -->
-<div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
+<div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
-    <div class="max-w-6xl mx-auto space-y-12">
+    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
-            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2025-09</span>
+            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study I</span>
-            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Die Festung im Rheingau</h1>
+            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die schwebende Trockenmauer im Taunus</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed">
                Wie wir einen rutschenden Steilhang ohne ein Gramm Mörtel sicherten und ein Paradies für Eidechsen schufen.
            </p>
        </div>
        <!-- Story Content -->
        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
                <p>Der Kunde stand vor einem Riesenproblem: Ein extrem steiler Hang auf seinem Grundstück drohte bei jedem starken Regen weiter abzurutschen. Die klassische Lösung der meisten Firmen: Eine gigantische Betonwand. Aber der Kunde wollte Natur. Er wollte keine graue Wüste vor seinem Fenster.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
                <p>Wir entschieden uns für die Königsdisziplin im GaLaBau: Den echten Trockenmauerbau. Wir verwendeten regionalen Quarzit aus dem Taunus. Stein für Stein wurde von Hand ausgewählt und im zweihäuptigen Verband gesetzt. Das Prinzip basiert auf Schwerkraft und Reibung – kein Mörtel, kein Beton.</p>
                <p class="mt-2">Die offenen Fugen füllten wir mit einem speziellen Substrat und pflanzten trockenheitsresistente Stauden. So entstand eine "schwebende" Optik, die sich perfekt in die Landschaft einfügt.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
                <p>Die Mauer hält bombensicher. Und das Beste: Schon im ersten Sommer zogen die ersten Smaragdeidechsen in die warmen Fugen ein. Es ist ein lebendiges Bauwerk geworden, das mit den Jahren immer schöner wird.</p>
            </div>
        </div>
        <!-- Facts & Figures -->
        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">120 t</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Stein bewegt</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">3 m</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Maximale Höhe</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">0 g</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Mörtel verwendet</span>
            </div>
        </div>
        <!-- Keep the Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
            <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
@@ -0,0 +1,54 @@
 ---
 // src/components/SubpagePlantlix.astro
 ---
 <!-- Subpage: Plantlix Story -->
 <div x-show="currentPage === 'page-plantlix'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study III</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Plantlix-Connection</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed">
                Wie künstliche Intelligenz und traditionelles Gärtnerwissen gemeinsam das perfekte Ökosystem erschufen.
            </p>
        </div>
        <!-- Story Content -->
        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
                <p>Ein Kunde im Rheingau hatte ein Grundstück mit extrem schwierigen Bodenverhältnissen: Teils schattig und feucht, teils extrem sonnig und trocken auf engstem Raum. Klassische Pflanzpläne scheiterten hier oft, weil die Pflanzen nach wenigen Monaten eingingen.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
                <p>Wir fütterten die Algorithmen von **Plantlix.de** mit den genauen Standortdaten (Bodenproben, Lichtstunden, Feuchtigkeit). Plantlix analysierte die Daten und spuckte eine pflanzensoziologische Gemeinschaft aus, die perfekt an diese Micro-Habitate angepasst war.</p>
                <p class="mt-2">Statt Monokulturen pflanzten wir eine dynamische Gemeinschaft, die sich gegenseitig unterstützt (Schattenwerfer, Bodendecker, Tiefwurzler).</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
                <p>Der Garten blüht wie nie zuvor. Keine Pflanze ist eingegangen. Die KI hat uns geholfen, die Natur besser zu verstehen und Fehler zu vermeiden, die früher erst nach Jahren sichtbar geworden wären.</p>
            </div>
        </div>
        <!-- Facts & Figures -->
        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">100 %</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Anwachsrate</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">15</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Pflanzengemeinschaften</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">&lt; 1 s</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Analysezeit</span>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,252 @@
 ---
 // src/components/SubpageRain.astro
 ---
 <script is:inline>
 window.rainData = function() {
    return { 
        rainIntensity: 50, 
        wind: 0,
        lofiFilter: 800,
        drops: [], 
        audioCtx: null,
        noiseNode: null,
        filterNode: null,
        gainNode: null,
        player: null,
        rainOpen: false,
        musicOpen: false,
        generateDrops(val) { 
            this.drops = []; 
            for(let i=0; i<val; i++) this.drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 }); 
        },
        initAudio() {
            if (this.audioCtx) return;
            try {
                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                // --- REGEN-SOUND ---
                let bufferSize = 2 * this.audioCtx.sampleRate;
                let noiseBuffer = this.audioCtx.createBuffer(1, bufferSize, this.audioCtx.sampleRate);
                let output = noiseBuffer.getChannelData(0);
                for (let i = 0; i < bufferSize; i++) {
                    output[i] = Math.random() * 2 - 1;
                }
                this.noiseNode = this.audioCtx.createBufferSource();
                this.noiseNode.buffer = noiseBuffer;
                this.noiseNode.loop = true;
                this.filterNode = this.audioCtx.createBiquadFilter();
                this.filterNode.type = 'lowpass';
                this.filterNode.frequency.setValueAtTime(this.lofiFilter, this.audioCtx.currentTime);
                this.gainNode = this.audioCtx.createGain();
                this.gainNode.gain.setValueAtTime(this.rainIntensity / 200 * 0.05, this.audioCtx.currentTime);
                this.noiseNode.connect(this.filterNode);
                this.filterNode.connect(this.gainNode);
                this.gainNode.connect(this.audioCtx.destination);
                this.noiseNode.start();
                // --- YOUTUBE API ---
                this.loadYouTubeAPI();
            } catch(e) {
                console.log('Audio failed', e);
            }
        },
        loadYouTubeAPI() {
            if (window.YT && window.YT.Player) {
                this.initPlayer();
            } else {
                let tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                let firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                window.onYouTubeIframeAPIReady = () => {
                    this.initPlayer();
                };
            }
        },
        initPlayer() {
            this.player = new YT.Player('lofi-player', {
                height: '100%',
                width: '100%',
                videoId: 'jfKfPfyJRdk',
                playerVars: {
                    'autoplay': 1,
                    'mute': 0,
                    'controls': 1,
                    'rel': 0,
                    'modestbranding': 1,
                    'enablejsapi': 1
                },
                events: {
                    'onReady': (event) => {
                        let promise = event.target.playVideo();
                        if (promise && promise.catch) {
                            promise.catch(() => {
                                event.target.mute();
                                event.target.playVideo();
                            });
                        }
                    },
                    'onStateChange': (event) => {
                        if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.PAUSED) {
                            setTimeout(() => {
                                if (this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
                                    this.player.mute();
                                    this.player.playVideo();
                                }
                            }, 1000);
                        }
                    }
                }
            });
        },
        updateAudio() {
            if (this.gainNode) {
                this.gainNode.gain.linearRampToValueAtTime(this.rainIntensity / 200 * 0.05, this.audioCtx.currentTime + 0.2);
            }
            if (this.filterNode) {
                this.filterNode.frequency.linearRampToValueAtTime(this.lofiFilter, this.audioCtx.currentTime + 0.2);
            }
        }
    };
 }
 </script>
 <!-- Subpage: Rain Detail -->
 <div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" 
    x-data="window.rainData()" 
    x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => { if(val === 'page-rain') { initAudio(); } })">
    <!-- Rain Container (Full Screen on this page) -->
    <div class="absolute inset-0 pointer-events-none z-0">
        <template x-for="drop in drops">
            <div class="absolute bg-emerald-400/30 w-0.5 h-8" 
                 :style="`left: ${drop.left}%; top: -20px; animation: fall ${drop.speed}s linear infinite; animation-delay: ${drop.delay}s; transform: rotate(${wind}deg)`">
            </div>
        </template>
    </div>
    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Atmosphäre & Ökologie</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold rainbow-text">Regen für Gemütlichkeit</h1>
        </div>
        <style>
        .rainbow-text {
            background: linear-gradient(to right, #ff2a2a, #ff7e2a, #ffea2a, #2aff2a, #2a7eff, #8a2be2, #ff2a2a);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: rainbow 4s linear infinite;
        }
        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }
        </style>
        <!-- Controls (Togglebar) -->
        <div class="glass p-8 rounded-2xl border border-stone-800">
            <div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen">
                <div>
                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Regen-Steuerung</span>
                    <span class="text-xs text-stone-500 block mt-1">Intensität, Wind und Filter</span>
                </div>
                <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': rainOpen }"></i>
            </div>
            <div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mt-6 pt-6 border-t border-stone-800">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Intensity -->
                    <div>
                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span></label>
                        <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
                    </div>
                    <!-- Wind -->
                    <div>
                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Wind: <span x-text="wind" class="text-emerald-400"></span>°</label>
                        <input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
                    </div>
                    <!-- Lofi Filter -->
                    <div>
                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Muffigkeit: <span x-text="lofiFilter" class="text-emerald-400"></span></label>
                        <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
                    </div>
                </div>
                <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 mt-4 border-t border-stone-800">
                    <span>Sound läuft automatisch</span>
                    <span class="text-emerald-400">Realtime Web Audio Rain</span>
                </div>
            </div>
        </div>
        <!-- YouTube Player (Togglebar) -->
        <div class="glass p-6 rounded-2xl border border-stone-800">
            <div class="flex justify-between items-center cursor-pointer select-none" @click="musicOpen = !musicOpen">
                <div>
                    <span class="block text-xs font-mono text-emerald-500 uppercase mb-1 tracking-widest">Musik (Lofi mit Vocals)</span>
                    <span class="text-xs text-stone-400">Echte Tracks für mehr Vielfalt & Gesang</span>
                </div>
                <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': musicOpen }"></i>
            </div>
            <div x-show="musicOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-4 mt-6 pt-6 border-t border-stone-800">
                <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video bg-stone-900">
                    <div id="lofi-player"></div>
                </div>
                <p class="text-xs text-stone-500 leading-relaxed">Browser blockieren Autoplay oft. Die KI versucht zuerst mit Ton abzuspielen. Falls das fehlschlägt, wird das Video stummgeschaltet automatisch gestartet. Du kannst den Ton dann einfach am Player aktivieren!</p>
            </div>
        </div>
        <!-- Content -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 text-stone-400 text-sm leading-relaxed">
            <div class="space-y-6">
                <div>
                    <h3 class="text-white font-bold text-lg mb-2">Warum wir den Regen lieben</h3>
                    <p>Für viele ist Regen ein Grund, im Haus zu bleiben. Für uns Gärtner ist er der Herzschlag der Natur. Ohne Regen gibt es kein Wachstum, keine Kühlung und keine Erholung für den Boden.</p>
                </div>
                <div>
                    <h3 class="text-white font-bold text-base mb-1">Der Geruch des Lebens (Petrichor)</h3>
                    <p>Wusstest du, dass der Geruch von Regen wissenschaftlich erforscht ist? Eine <a href="https://news.mit.edu/2015/rainfall-releases-aerosols-0114" target="_blank" class="text-emerald-400 hover:underline">Studie des MIT</a> zeigt, dass Regentropfen beim Auftreffen auf poröse Böden winzige Luftblasen einschließen, die dann als Aerosole nach oben steigen und den Duft (Petrichor) verteilen. Dieser Duft signalisiert unserem Gehirn seit Jahrtausenden "Frische und Leben".</p>
                </div>
                <div>
                    <h3 class="text-white font-bold text-base mb-1">Beruhigung durch Rosa Rauschen</h3>
                    <p>Das gleichmäßige Prasseln von Regen ist ein natürliches "Rosa Rauschen". Im Gegensatz zu weißem Rauschen nehmen die Frequenzen bei höheren Tönen ab, was für das menschliche Ohr besonders angenehm ist. <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3412218/" target="_blank" class="text-emerald-400 hover:underline">Neurologische Studien</a> belegen, dass diese Klangmuster die Gehirnwellen stabilisieren und tiefen, erholsamen Schlaf fördern können.</p>
                </div>
            </div>
            <div class="space-y-6">
                <div>
                    <h3 class="text-white font-bold text-lg mb-2">Vom Genuss zur Technik</h3>
                    <p>Aber Regen ist nicht nur Atmosphäre. In Zeiten des Klimawandels müssen wir lernen, jeden Tropfen zu nutzen. Hier schließt sich der Kreis zu unserem **Schwammstadt-Prinzip**.</p>
                </div>
                <div>
                    <h3 class="text-white font-bold text-base mb-1">Gärten als Klimaretter</h3>
                    <p>Wir bauen Gärten, die das Wasser nicht einfach in die Kanalisation ableiten, sondern wie ein Schwamm aufsaugen und speichern. Das entlastet die städtische Infrastruktur bei Starkregen und kühlt die Umgebung in Hitzeperioden durch Verdunstung.</p>
                </div>
                <div>
                    <h3 class="text-white font-bold text-base mb-1">Die Psychologie der Natur</h3>
                    <p>Der Aufenthalt im Regen (oder das Betrachten und Hören davon) senkt nachweislich den Cortisolspiegel (Stresshormon). Wir möchten mit unseren Gärten Oasen schaffen, die dieses "Biophile Design" nutzen, um deine mentale Gesundheit zu fördern.</p>
                </div>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,54 @@
 ---
 // src/components/SubpageTeich.astro
 ---
 <!-- Subpage: Teich -->
 <div x-show="currentPage === 'page-teich'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study III</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Der lebendige Schwimmteich</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed">
                Wie wir einen Chlor-Pool verhinderten und ein biologisches Badeparadies im Rheingau erschufen.
            </p>
        </div>
        <!-- Story Content -->
        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
                <p>Der Kunde wünschte sich einen klassischen Swimmingpool für seinen Garten. Doch der Gedanke an Chlorgeruch und eine künstlich blaue Wüste passte nicht zu seinem Wunsch nach einem naturnahen Garten. Die Herausforderung: Ein Badegewässer zu schaffen, das glasklar ist, aber ohne Chemie auskommt.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
                <p>Wir bauten einen zweigeteilten Schwimmteich. Der Badebereich ist klar vom Regenerationsbereich getrennt. Im Regenerationsbereich filtert die Natur das Wasser: Spezielle Substrate und über 200 Wasserpflanzen (wie Schilf und Seerosen) entziehen dem Wasser Nährstoffe und verhindern so Algenbildung.</p>
                <p class="mt-2">Eine sanfte Umwälzpumpe sorgt dafür, dass das Wasser ständig durch diesen natürlichen Filter fließt. Ganz ohne Chlor.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
                <p>Der Kunde schwimmt jetzt in Wasser von Trinkwasserqualität. Der Teich ist das optische Highlight des Gartens geworden und zieht Libellen, Frösche und Vögel an. Ein lebendiges Ökosystem, das gleichzeitig der Entspannung dient.</p>
            </div>
        </div>
        <!-- Facts & Figures -->
        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">150 m³</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Wasservolumen</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">200+</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Wasserpflanzen</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">0 %</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Chlor</span>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,54 @@
 ---
 // src/components/SubpageWeinberg.astro
 ---
 <!-- Subpage: Weinberg -->
 <div x-show="currentPage === 'page-weinberg'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study IV</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Weinberg-Terrassierung</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed">
                Wie wir einen historischen Steilhang im Rheingau vor dem Verfall retteten.
            </p>
        </div>
        <!-- Story Content -->
        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
                <p>Ein Winzer im Rheingau stand vor einer Herkulesaufgabe: Seine besten Steillagen drohten durch Erosion und Starkregen abzurutschen. Die alten, maroden Mauern hielten dem Druck nicht mehr stand. Ohne Sicherung war die Bewirtschaftung lebensgefährlich und der Weinertrag bedroht.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
                <p>Wir sanierten die Hänge nach historischem Vorbild, aber mit modernem statischen Wissen. Wir bauten über 150 Meter neue Trockenmauern aus regionalem Bruchstein. Dabei achteten wir extrem auf die Entwässerung hinter der Mauer (Hinterpackung), damit der Wasserdruck die Steine nicht wegdrückt.</p>
                <p class="mt-2">Zwischen den Mauern schufen wir breitere Terrassen, die nun maschinell oder zumindest sicherer von Hand bewirtschaftet werden können.</p>
            </div>
            <div>
                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
                <p>Der Weinberg ist für die nächsten 100 Jahre gesichert. Der Winzer kann wieder sicher arbeiten und die neuen Trockenmauern bieten Lebensraum für seltene Mauereidechsen und wärmeliebende Pflanzen. Ein Stück Kulturlandschaft wurde gerettet.</p>
            </div>
        </div>
        <!-- Facts & Figures -->
        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">150 m</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Mauerlänge</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">45°</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Hangneigung</span>
            </div>
            <div>
                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">100 %</span>
                <span class="text-xs text-stone-500 uppercase font-mono">Handarbeit</span>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,198 @@
 ---
 // src/components/Tutorials.astro
 ---
 <!-- Include html2pdf.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" is:inline></script>
 <script is:inline>
 function downloadPDF(elementId, title) {
    const element = document.getElementById(elementId);
    // Extrahiere Daten aus dem DOM
    const titleText = element.querySelector('h3').innerText;
    const descText = element.querySelector('p').innerText;
    const steps = [];
    element.querySelectorAll('.space-y-6 > .flex.gap-4').forEach(stepDiv => {
        const num = stepDiv.querySelector('.font-mono').innerText;
        const h4 = stepDiv.querySelector('h4').innerText;
        const p = stepDiv.querySelector('p').innerText;
        steps.push({ num, h4, p });
    });
    // Generiere ein sauberes, druckbares HTML-Dokument (Weißer Hintergrund, dunkler Text)
    const html = `
        <div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1c1917; padding: 50px; max-width: 800px; margin: 0 auto; background-color: #ffffff;">
            <div style="text-align: center; margin-bottom: 40px; border-bottom: 2px solid #10b981; padding-bottom: 20px;">
                <span style="color: #10b981; font-size: 12px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">GEBRÜDER BRABETZ — PRAXIS-TUTORIAL</span>
                <h1 style="color: #0c0a09; font-size: 32px; margin: 10px 0; font-family: serif; font-weight: bold;">${titleText}</h1>
                <p style="color: #78716c; font-size: 14px; max-width: 600px; margin: 0 auto;">${descText}</p>
            </div>
            <div style="margin-top: 30px;">
                ${steps.map(step => `
                    <div style="display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start;">
                        <div style="flex-shrink: 0; width: 36px; height: 36px; background: #0c0a09; color: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: monospace; font-size: 16px;">${step.num}</div>
                        <div style="flex: 1;">
                            <h4 style="margin: 0; color: #0c0a09; font-size: 18px; font-weight: bold;">${step.h4}</h4>
                            <p style="margin: 6px 0 0 0; color: #444; font-size: 14px; line-height: 1.6;">${step.p}</p>
                        </div>
                    </div>
                `).join('')}
            </div>
            <div style="margin-top: 60px; padding-top: 20px; border-top: 1px solid #e7e5e4; text-align: center; color: #a8a29e; font-size: 11px;">
                © 2026 Gebrüder Brabetz Garten- & Landschaftsbau. Alle Rechte vorbehalten.<br>
                Dieses Dokument wurde automatisch generiert. Besuchen Sie uns auf brabetz.de
            </div>
        </div>
    `;
    const opt = {
        margin:       0,
        filename:     `Tutorial-${title}.pdf`,
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { 
            scale: 2, 
            backgroundColor: '#ffffff',
            useCORS: true
        },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };
    // Create temporary element
    const worker = document.createElement('div');
    worker.innerHTML = html;
    worker.style.position = 'absolute';
    worker.style.left = '-9999px';
    document.body.appendChild(worker);
    // PDF generieren
    html2pdf().set(opt).from(worker).save().then(() => {
        document.body.removeChild(worker);
    });
 }
 </script>
 <!-- Tutorials Section -->
 <section id="tutorials" class="py-32 bg-stone-950 relative overflow-hidden">
    <!-- Background Glow -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="max-w-6xl mx-auto px-6 relative z-10">
        <div class="text-center mb-16">
            <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Wissen teilen</span>
            <h2 class="text-3xl font-luxury font-bold text-white">Praxis-Tutorials vom Profi</h2>
            <p class="text-stone-400 text-sm mt-4 max-w-2xl mx-auto">Wie machen die das eigentlich? Wir zeigen dir, wie echte GaLaBau-Handwerkskunst funktioniert.</p>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Tutorial 1: Trockenmauer -->
            <div id="tutorial-mauer" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                <div>
                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #1</span>
                    <h3 class="text-xl font-bold text-white mt-2 mb-4">Die perfekte Trockenmauer bauen</h3>
                    <p class="text-stone-400 text-sm mb-4">Eine Trockenmauer hält ohne Mörtel – rein durch Schwerkraft und Reibung. Hier ist die Schritt-für-Schritt-Anleitung.</p>
                    <!-- Wetter-Hinweis -->
                    <a href="https://www.wetter.com/suche/?q=Rheingau-Taunus" target="_blank" class="text-xs font-mono text-emerald-400 mb-6 bg-stone-900/50 px-3 py-2 rounded-lg border border-emerald-900/30 inline-block hover:bg-emerald-900/20 transition-colors cursor-pointer">
                        <i class="fa-solid fa-cloud-sun"></i> Rheingau-Taunus: 4°C // Gutes Wetter für den Trockenmauerbau.
                    </a>
                    <!-- Steps -->
                    <div class="space-y-6">
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Fundament ausheben</h4>
                                <p class="text-stone-500 text-xs mt-1">Mindestens 40 cm tief ausheben und mit frostsicherem Schotter (0/32) auffüllen und stark verdichten.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Die erste Reihe (Gründung)</h4>
                                <p class="text-stone-500 text-xs mt-1">Die größten und flachsten Steine als Basis setzen. Sie müssen leicht nach hinten geneigt sein (Anlauf ca. 10-15%).</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Hinterfüllung & Drainage</h4>
                                <p class="text-stone-500 text-xs mt-1">Nach jeder Steinreihe mit Schotter hinterfüllen. Das verhindert Wasserdruck auf die Mauer.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Bepflanzung</h4>
                                <p class="text-stone-500 text-xs mt-1">In die Fugen spezielles Substrat füllen und trockenheitsliebende Pflanzen wie Steingarten-Stauden setzen.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
                    <div class="flex gap-4 text-xs font-mono text-stone-500">
                        <span>Dauer: ca. 2 Tage</span>
                        <span class="text-emerald-500">Schwierigkeit: Schwer</span>
                    </div>
                    <button onclick="downloadPDF('tutorial-mauer', 'Trockenmauer')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
                        <i class="fa-solid fa-file-pdf"></i> PDF
                    </button>
                </div>
            </div>
            <!-- Tutorial 2: Rasenpflege -->
            <div id="tutorial-rasen" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                <div>
                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #2</span>
                    <h3 class="text-xl font-bold text-white mt-2 mb-4">Premium-Rasen im Sommer</h3>
                    <p class="text-stone-400 text-sm mb-6">Ein sattes Grün im Hochsommer ist kein Zufall, sondern das Ergebnis der richtigen Pflege-Routine.</p>
                    <!-- Steps -->
                    <div class="space-y-6">
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Seltener, aber durchdringend gießen</h4>
                                <p class="text-stone-500 text-xs mt-1">Nicht jeden Tag ein bisschen, sondern 1-2 mal pro Woche intensiv (ca. 15-20 l/m²). Das fördert tiefe Wurzeln.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Schnitthöhe anpassen</h4>
                                <p class="text-stone-500 text-xs mt-1">Im Sommer den Rasen nicht kürzer als 5 cm schneiden. Längere Halme beschatten den Boden und schützen vor Austrocknung.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Organisch düngen</h4>
                                <p class="text-stone-500 text-xs mt-1">Ein Langzeitdünger im Mai/Juni versorgt den Rasen gleichmäßig. Keine mineralischen Dünger in der prallen Sonne verwenden!</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Schnittgut liegen lassen (Mulchen)</h4>
                                <p class="text-stone-500 text-xs mt-1">Wenn du oft mähst, lass das feine Schnittgut liegen. Es dient als natürlicher Dünger und Sonnenschutz.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
                    <div class="flex gap-4 text-xs font-mono text-stone-500">
                        <span>Dauer: Kontinuierlich</span>
                        <span class="text-emerald-500">Schwierigkeit: Einfach</span>
                    </div>
                    <button onclick="downloadPDF('tutorial-rasen', 'Rasenpflege')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
                        <i class="fa-solid fa-file-pdf"></i> PDF
                    </button>
                </div>
            </div>
        </div>
    </div>
 </section>
@@ -0,0 +1,20 @@
 ---
 title: "Lebendige Ökosysteme statt toter Schottergärten"
 description: "Wir bauen keine sterilen Flächen. Wir erschaffen lebendige Biotope, die atmen, wachsen und Tieren ein Zuhause geben."
 items:
  - title: "Die Trockenmauer als Biotop"
    description: "Wir bauen Mauern ohne Mörtel, Stein für Stein. Das ist nicht nur standsicher, sondern schafft wertvollen Lebensraum für Eidechsen und Wildbienen in den offenen Fugen. Jede Fuge ist ein kleines Hotel für Nützlinge und ein Versprechen an die Natur."
    technique: "Fokus: Artenschutz & Mikroklima"
    location: "Taunus"
    icon: "fa-solid fa-mound"
  - title: "Das Schwammstadt-Prinzip"
    description: "Regenwasser ist Leben. Über Retentionsmulden und unterirdische Rigolen speichern wir das Wasser dort, wo es gebraucht wird. Das entlastet die Kanalisation und kühlt das Mikroklima. Wir schaffen Oasen für Libellen und Amphibien."
    technique: "Fokus: Klimaresistenz & Wasserkreislauf"
    location: "Rheingau"
    icon: "fa-solid fa-droplet"
  - title: "Die Plantlix-Connection"
    description: "Hier schließt sich der Kreis: Über die API von <a href='https://plantlix.de' target='_blank' class='text-emerald-400 hover:underline font-bold'>Plantlix.de</a> analysieren wir den Standort. Plantlix liefert uns die perfekte pflanzensoziologische Zusammenstellung – für Gärten im Einklang mit der heimischen Flora."
    technique: "Fokus: Datengestützte Ökologie"
    location: "Digital"
    icon: "fa-solid fa-robot"
 ---
@@ -0,0 +1,20 @@
 import { defineCollection, z } from 'astro:content';
 const biodiversity = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    items: z.array(z.object({
      title: z.string(),
      description: z.string(),
      technique: z.string(),
      location: z.string(),
      icon: z.string(),
    })),
  }),
 });
 export const collections = {
  'biodiversity': biodiversity,
 };
@@ -1,490 +0,0 @@
 <!DOCTYPE html>
 <html lang="de" class="scroll-smooth">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gebrüder Brabetz GmbH - Premium GaLaBau</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        emerald: {
                            950: '#022c22',
                            900: '#064e3b',
                            800: '#065f46',
                        },
                        amber: {
                            400: '#fbbf24',
                            500: '#f59e0b',
                            600: '#d97706',
                        },
                        stone: {
                            950: '#0c0a09',
                            900: '#1c1917',
                            800: '#292524',
                        }
                    },
                    fontFamily: {
                        luxury: ['Cinzel', 'serif'],
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        [x-cloak] { display: none !important; }
        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
        .glass-dark { background: rgba(12, 10, 9, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
        .text-gradient { background: linear-gradient(to right, #ffffff, #d6d3d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .text-gradient-gold { background: linear-gradient(to right, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    </style>
 </head>
 <body class="bg-stone-950 text-stone-200 font-sans antialiased" x-data="{ currentPage: 'main', faqOpen: null }">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 transition-all duration-300 border-b border-white/5 bg-stone-950/80 backdrop-blur-md">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between">
            <a href="#" @click.prevent="currentPage = 'main'" class="flex items-center gap-3 group">
                <div class="w-10 h-10 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-lg border border-amber-500/20 group-hover:border-amber-500/50 transition-all shadow-glow">
                    <i class="fa-solid fa-compass-drafting"></i>
                </div>
                <div class="flex flex-col">
                    <span class="text-lg font-luxury font-bold tracking-wider text-white">Gebrüder Brabetz</span>
                    <span class="text-[9px] font-bold text-amber-500 uppercase tracking-[0.3em] -mt-0.5">Garten- & Landschaftsbau</span>
                </div>
            </a>
            <div class="hidden lg:flex items-center gap-10 text-xs font-semibold uppercase tracking-widest text-stone-400">
                <a href="#standards" class="hover:text-amber-400 transition-colors">Regelwerk</a>
                <a href="#projects" class="hover:text-amber-400 transition-colors">Projekte</a>
                <a href="#events" class="hover:text-amber-400 transition-colors">Events</a>
                <a href="#biodiversity" class="hover:text-amber-400 transition-colors">Natur</a>
                <a href="#faq" class="hover:text-amber-400 transition-colors">FAQ</a>
                <button @click="currentPage = 'page-contact'" class="bg-emerald-800 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg transition-all shadow-lg text-xs uppercase tracking-wider font-bold border border-emerald-700 hover:border-emerald-600">
                    Projekt starten
                </button>
            </div>
        </div>
    </nav>
    <!-- Main Page Content -->
    <div x-show="currentPage === 'main'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-0">
        <!-- Hero Section -->
        <header class="relative min-h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 z-0">
                <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="w-full h-full object-cover opacity-20 scale-105 transform transition-transform duration-10000 hover:scale-100">
                <div class="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/80 to-stone-950"></div>
            </div>
            <div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20">
                <span class="text-xs font-bold tracking-[0.4em] text-amber-500 uppercase bg-emerald-950/80 px-6 py-2.5 rounded-full border border-amber-500/20 backdrop-blur-sm inline-block mb-8">
                    Null Pfusch. Maximale Gewährleistung.
                </span>
                <h1 class="text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide leading-tight mb-6">
                    Wer billig baut,<br>baut dreimal.
                </h1>
                <p class="text-xl text-stone-400 max-w-3xl mx-auto font-light leading-relaxed mb-12">
                    Wir bauen für Generationen. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision und messbare VOB-Transparenz im Rheingau-Taunus-Kreis.
                </p>
                <div class="flex flex-wrap justify-center gap-6">
                    <a href="#projects" class="px-8 py-3.5 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-lg border border-white/10 transition-all backdrop-blur-sm text-xs uppercase tracking-widest">
                        Fallstudien ansehen
                    </a>
                    <button @click="currentPage = 'page-contact'" class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 text-stone-950 font-bold rounded-lg shadow-xl shadow-amber-500/10 text-xs uppercase tracking-widest transition-all hover:scale-[1.02]">
                        Direkt zur Bauleitung
                    </button>
                </div>
            </div>
            <div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-50">
                <i class="fa-solid fa-chevron-down text-xl text-stone-500"></i>
            </div>
        </header>
        <!-- Standards Section -->
        <section id="standards" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div class="lg:col-span-5">
                        <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Keine Ausreden</span>
                        <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Warum wir nach DIN und VOB abrechnen</h2>
                        <div class="w-16 h-1 bg-gradient-to-r from-amber-500 to-emerald-800 mb-6"></div>
                    </div>
                    <div class="lg:col-span-7">
                        <p class="text-stone-400 text-lg leading-relaxed font-light">
                            Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach <strong class="text-white font-semibold">VOB/C</strong> aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Projects Section -->
        <section id="projects" class="py-32">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">
                <div class="mb-20 text-center">
                    <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Ausgeführte Großprojekte</span>
                    <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Harte Fakten statt schöner Renderings</h2>
                    <p class="text-stone-500 max-w-2xl mx-auto font-light">Echte Baustellen, echte Massen, echte Qualität.</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <!-- Project 1 -->
                    <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                        <div class="relative h-64 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                            <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                            <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span>
                        </div>
                        <div class="p-8 flex flex-col flex-grow justify-between">
                            <div>
                                <h3 class="text-2xl font-luxury font-bold text-white mb-3">Monumentale Hangterrassierung</h3>
                                <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
                            </div>
                            <button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                                Technische Detailseite öffnen
                            </button>
                        </div>
                    </div>
                    <!-- Project 2 -->
                    <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
                        <div class="relative h-64 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
                            <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
                            <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span>
                        </div>
                        <div class="p-8 flex flex-col flex-grow justify-between">
                            <div>
                                <h3 class="text-2xl font-luxury font-bold text-white mb-3">Großflächen-Wegebau & Rigolensystem</h3>
                                <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerter Entwässerung.</p>
                            </div>
                            <button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                                Technische Detailseite öffnen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Events Section -->
        <section id="events" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">
                <div class="mb-20 text-center">
                    <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Exklusive Gartenevents</span>
                    <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Das Komplettpaket für Ihr Event</h2>
                    <p class="text-stone-500 max-w-2xl mx-auto font-light">Wir gestalten nicht nur Ihren Garten, wir füllen ihn auch mit Leben. Unser exklusives Netzwerk für unvergessliche Momente.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Leihköche -->
                    <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                        <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                            <i class="fa-solid fa-utensils"></i>
                        </div>
                        <h3 class="text-xl font-luxury font-bold text-white mb-3">Beste Leihköche</h3>
                        <p class="text-stone-400 text-sm font-light leading-relaxed">Kulinarische Meisterwerke direkt in Ihrem Garten. Von Live-Cooking bis zum exklusiven Mehr-Gänge-Menü.</p>
                    </div>
                    <!-- DJs -->
                    <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                        <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                            <i class="fa-solid fa-compact-disc"></i>
                        </div>
                        <h3 class="text-xl font-luxury font-bold text-white mb-3">Top DJs</h3>
                        <p class="text-stone-400 text-sm font-light leading-relaxed">Die perfekte Soundkulisse für Ihre Sommernacht. Professionelle DJs mit High-End Equipment.</p>
                    </div>
                    <!-- Eventmanager -->
                    <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                        <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                            <i class="fa-solid fa-calendar-check"></i>
                        </div>
                        <h3 class="text-xl font-luxury font-bold text-white mb-3">Eventmanager</h3>
                        <p class="text-stone-400 text-sm font-light leading-relaxed">Stressfreie Planung von A bis Z. Wir kümmern uns um Logistik, Deko und Ablauf, damit Sie Gast sein können.</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Biodiversity & Quality Section -->
        <section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div class="lg:col-span-6">
                        <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Zukunftssicher & Lebendig</span>
                        <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
                        <div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
                        <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
                            Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
                        </p>
                        <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
                            In enger Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-amber-400 hover:underline">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. So stellen wir sicher, dass jede Pflanze optimal zum Standort passt, die Biodiversität fördert und klimaresistent ist.
                        </p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
                            <div class="flex items-start gap-3">
                                <div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
                                <div>
                                    <h4 class="font-bold text-white text-sm">Native Flora</h4>
                                    <p class="text-stone-500 text-xs mt-1">Gezielter Einsatz heimischer Pflanzen zur Förderung von Insekten und Vögeln.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
                                <div>
                                    <h4 class="font-bold text-white text-sm">Bodenbiologie</h4>
                                    <p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten nach DIN-Vorgaben für langlebiges Grün.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lg:col-span-6">
                        <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
                            <img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
                            <div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
                                <p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FAQ Section -->
        <section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
            <div class="max-w-4xl mx-auto px-6">
                <div class="text-center mb-16">
                    <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
                    <h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
                </div>
                <div class="space-y-4">
                    <!-- FAQ 1 -->
                    <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
                        <div class="flex justify-between items-center p-6 select-none">
                            <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
                            <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
                        </div>
                        <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                            Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Footer -->
        <footer class="bg-stone-950 py-16 text-stone-500 border-t border-stone-900 text-sm text-center">
            <div class="max-w-7xl mx-auto px-6">
                <p class="font-luxury text-white mb-2 tracking-wider">Gebrüder Brabetz GmbH &copy; 2026</p>
                <p class="text-xs text-stone-600 mb-6">Meisterbetrieb für Garten- & Landschaftsbau // Rheingau-Taunus-Kreis</p>
                <button @click="currentPage = 'page-contact'" class="text-amber-500 hover:text-amber-400 underline text-xs font-semibold uppercase tracking-wider transition-colors">
                    Direktlink zur Bauleitung
                </button>
            </div>
        </footer>
    </div>
    <!-- Subpage: Mauer -->
    <div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
        <div class="max-w-6xl mx-auto space-y-12">
            <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
                <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
            </button>
            <div class="border-b border-stone-800 pb-6">
                <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2025-09</span>
                <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Die Festung im Rheingau</h1>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
                <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
            </div>
        </div>
    </div>
    <!-- Subpage: Gewerbe -->
    <div x-show="currentPage === 'page-gewerbe'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
        <div class="max-w-6xl mx-auto space-y-12">
            <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
                <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
            </button>
            <div class="border-b border-stone-800 pb-6">
                <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2026-03</span>
                <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Das Logistik-Plateau</h1>
            </div>
            <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
        </div>
    </div>
    <!-- Subpage: Kontakt -->
    <div x-show="currentPage === 'page-contact'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
        <div class="max-w-6xl mx-auto space-y-12">
            <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
                <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
            </button>
            <div class="border-b border-stone-800 pb-6">
                <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Bauleitung & Vergabe</span>
                <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Projekt zünden.</h1>
                <p class="text-stone-400 mt-4 max-w-2xl font-light">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst.</p>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
                <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ submitted: false }">
                    <form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</label>
                                <input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                            </div>
                            <div>
                                <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Direkte E-Mail *</label>
                                <input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gewerk / Projektart</label>
                            <select class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500 transition-colors">
                                <option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
                                <option>Exklusive Neuanlage (Privatgarten Premium)</option>
                                <option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Projektdaten (Maße, Fakten)</label>
                            <textarea rows="4" placeholder="Zahlen, Maße und Fakten..." class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors"></textarea>
                        </div>
                        <button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
                            Daten zur Prüfung einreichen
                        </button>
                    </form>
                    <div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                        ✔ Datensatz erfolgreich an die Bauleitung übermittelt. Wir prüfen Ihre Angaben.
                    </div>
                </div>
                <div class="lg:col-span-5 space-y-6">
                    <div class="glass p-8 rounded-2xl flex flex-col items-center text-center">
                        <div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded text-[10px] uppercase font-mono mb-6 tracking-widest">Digitale Visitenkarte</div>
                        <div class="p-4 bg-white rounded-xl border border-stone-800">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-40 h-40">
                        </div>
                        <p class="text-xs text-stone-500 font-mono mt-6 leading-relaxed">
                            <strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und Kontakt speichern.
                        </p>
                    </div>
                    <div class="glass p-8 rounded-2xl font-mono text-xs text-stone-400 space-y-4">
                        <div class="text-amber-500 font-bold uppercase border-b border-stone-800 pb-2 tracking-widest">Die Zentrale</div>
                        <p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
                        <p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
                        <p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> Caspar, Jakob & Felix Brabetz</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- CHARTS INIT -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Chart 1: Massen
            new Chart(document.getElementById('subChartMassen').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: ['Erdaushub (m³)', 'Muschelkalk (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
                    datasets: [{ 
                        data: [140, 65, 38, 25], 
                        backgroundColor: ['#d97706', '#065f46', '#292524', '#047857'], 
                        borderWidth: 1,
                        borderColor: '#0c0a09'
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { 
                        legend: { 
                            position: 'bottom',
                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
                        } 
                    } 
                }
            });
            // Chart 2: Boden
            new Chart(document.getElementById('subChartBoden').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['Bodenprofil'],
                    datasets: [
                        { label: 'Mutterboden (20cm)', data: [20], backgroundColor: '#047857', borderWidth: 0 },
                        { label: 'Drainage (40cm)', data: [40], backgroundColor: '#d97706', borderWidth: 0 },
                        { label: 'Baugrund (80cm)', data: [80], backgroundColor: '#292524', borderWidth: 0 }
                    ]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    scales: { 
                        x: { stacked: true, display: false }, 
                        y: { stacked: true, display: false } 
                    }, 
                    plugins: { 
                        legend: { 
                            position: 'bottom',
                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
                        } 
                    } 
                }
            });
            // Chart 3: Gantt
            new Chart(document.getElementById('subChartGantt').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['1. Erdbau', '2. Tragschicht', '3. Pflaster', '4. Pflanzung'],
                    datasets: [{ 
                        data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], 
                        backgroundColor: '#065f46', 
                        borderRadius: 4,
                        borderWidth: 0
                    }]
                },
                options: { 
                    indexAxis: 'y', 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    scales: { 
                        x: { min: 1, max: 9, ticks: { color: '#78716c', font: { size: 10 }, callback: v => 'W.' + v } }, 
                        y: { ticks: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 11 } } } 
                    }, 
                    plugins: { legend: { display: false } } 
                }
            });
        });
    </script>
 </body>
 </html>
@@ -12,8 +12,6 @@ const { title } = Astro.props;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <!-- Font Awesome -->
@@ -25,36 +23,6 @@ const { title } = Astro.props;
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        emerald: {
                            950: '#022c22',
                            900: '#064e3b',
                            800: '#065f46',
                        },
                        amber: {
                            400: '#fbbf24',
                            500: '#f59e0b',
                            600: '#d97706',
                        },
                        stone: {
                            950: '#0c0a09',
                            900: '#1c1917',
                            800: '#292524',
                        }
                    },
                    fontFamily: {
                        luxury: ['Cinzel', 'serif'],
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        [x-cloak] { display: none !important; }
        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
@@ -7,11 +7,21 @@ import Standards from '../components/Standards.astro';
 import Projects from '../components/Projects.astro';
 import Events from '../components/Events.astro';
 import Biodiversity from '../components/Biodiversity.astro';
 import PlantOfTheWeek from '../components/PlantOfTheWeek.astro';
 import PlantQuiz from '../components/PlantQuiz.astro';
 import FAQ from '../components/FAQ.astro';
 import Tutorials from '../components/Tutorials.astro';
 import Footer from '../components/Footer.astro';
 import SubpageMauer from '../components/SubpageMauer.astro';
 import SubpageGewerbe from '../components/SubpageGewerbe.astro';
 import SubpageContact from '../components/SubpageContact.astro';
 import SubpageImpressum from '../components/SubpageImpressum.astro';
 import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
 import SubpageRain from '../components/SubpageRain.astro';
 import SubpagePlantlix from '../components/SubpagePlantlix.astro';
 import SubpageTeich from '../components/SubpageTeich.astro';
 import SubpageWeinberg from '../components/SubpageWeinberg.astro';
 import EasterEgg from '../components/EasterEgg.astro';
 ---
 <Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
@@ -24,6 +34,9 @@ import SubpageContact from '../components/SubpageContact.astro';
        <Projects />
        <Events />
        <Biodiversity />
        <PlantOfTheWeek />
        <PlantQuiz />
        <Tutorials />
        <FAQ />
        <Footer />
    </div>
@@ -32,6 +45,13 @@ import SubpageContact from '../components/SubpageContact.astro';
    <SubpageMauer />
    <SubpageGewerbe />
    <SubpageContact />
    <SubpageImpressum />
    <SubpageDatenschutz />
    <SubpageRain />
    <SubpagePlantlix />
    <SubpageTeich />
    <SubpageWeinberg />
    <EasterEgg />
    <!-- CHARTS INIT -->
    <script is:inline>
@@ -112,4 +132,5 @@ import SubpageContact from '../components/SubpageContact.astro';
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" is:inline></script>
 </Layout>
@@ -0,0 +1,30 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        emerald: {
          950: '#022c22',
          900: '#064e3b',
          800: '#065f46',
        },
        amber: {
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
        },
        stone: {
          950: '#0c0a09',
          900: '#1c1917',
          800: '#292524',
        }
      },
      fontFamily: {
        luxury: ['Cinzel', 'serif'],
        sans: ['Plus Jakarta Sans', 'sans-serif'],
      }
    },
  },
  plugins: [],
 }
Author	SHA1	Message	Date
Felix Brabetz	8a2b6fe3d2	Improve Hero text to be more impactful and craft-focused	2026-05-16 06:57:53 +02:00
Felix Brabetz	802261982c	Add shifting rainbow gradient animation to rain page title	2026-05-16 06:52:26 +02:00
Felix Brabetz	d5d7645b47	Fix blank PDF by using temporary DOM element for rendering	2026-05-16 06:46:40 +02:00
Felix Brabetz	a431237b70	Make plant quiz dynamic with fetch from Plantlix API and fallback	2026-05-16 06:44:31 +02:00
Felix Brabetz	14fb2d029c	Fix PDF generation by targeting specific step elements	2026-05-16 06:42:54 +02:00
Felix Brabetz	29873be4cb	Fix PDF download by generating clean HTML for export	2026-05-16 06:40:55 +02:00
Felix Brabetz	a9d7d3572e	Add PDF download buttons to tutorials using html2pdf.js	2026-05-16 06:38:42 +02:00
Felix Brabetz	4aafe19531	Replace project images for Schwimmteich and Weinberg with Wikimedia images	2026-05-16 06:29:44 +02:00
Felix Brabetz	1493ad908b	Make rain controls layout more compact with a 3-column grid	2026-05-16 06:25:40 +02:00
Felix Brabetz	3100b769c7	Make weather badge a link to wetter.com for Rheingau-Taunus	2026-05-16 06:20:43 +02:00
Felix Brabetz	e4445c51ec	Add contextual weather recommendation to Trockenmauer tutorial	2026-05-16 06:18:54 +02:00
Felix Brabetz	e023459ee2	Expand rain page content with explanation and links to studies	2026-05-16 06:16:35 +02:00
Felix Brabetz	56982d5c76	Collapse both modules by default in SubpageRain	2026-05-16 06:13:46 +02:00
Felix Brabetz	3f59fa78cd	Make rain controls and music player modules toggleable	2026-05-16 06:11:12 +02:00
Felix Brabetz	6f533819ac	Use YouTube Iframe API for smart autoplay with fallback to muted	2026-05-16 06:07:47 +02:00
Felix Brabetz	c5f110ba77	Add autoplay=1 to YouTube iframe in SubpageRain	2026-05-16 06:04:42 +02:00
Felix Brabetz	e8b8312d65	Add Tutorials component and section to index.astro	2026-05-16 06:01:25 +02:00
Felix Brabetz	0a5f89a697	Expand FAQ with specific GaLaBau topics and update colors	2026-05-16 05:55:59 +02:00
Felix Brabetz	5882df0f4e	Revert to YouTube player for music to support vocals and diverse beats	2026-05-16 05:50:50 +02:00
Felix Brabetz	ae49abd168	Synthesize real Lofi Hip Hop beat in Web Audio API along with rain	2026-05-16 05:48:07 +02:00
Felix Brabetz	d499b2ba5f	Implement custom UI controls for YouTube Lofi player	2026-05-16 05:45:21 +02:00
Felix Brabetz	d8a8254916	Make YouTube lofi player autoplay on entering the rain page	2026-05-16 05:44:12 +02:00
Felix Brabetz	845d72136d	Add synthesized background melody and volume slider to SubpageRain	2026-05-16 05:40:45 +02:00
Felix Brabetz	eaa030d7c5	Refactor SubpageRain to use script tag for Alpine data, fixing build error	2026-05-16 05:37:41 +02:00
Felix Brabetz	adc6704923	Fix syntax error in SubpageRain x-init	2026-05-16 05:36:08 +02:00
Felix Brabetz	08dacf45d7	Add advanced controls and synthesized rain sound to SubpageRain	2026-05-16 05:34:42 +02:00
Felix Brabetz	578ffb3583	Replace Web Audio drone with YouTube Lofi Hip Hop player	2026-05-16 05:30:35 +02:00
Felix Brabetz	5eb63eae5f	Replace broken audio URL with robust Web Audio API drone generator	2026-05-16 05:28:01 +02:00
Felix Brabetz	4d3998b78e	Add Goa-Zen background music player to SubpageRain	2026-05-16 05:25:33 +02:00
Felix Brabetz	0545007970	Make weather widget dynamic using Open-Meteo API	2026-05-16 05:22:51 +02:00
Felix Brabetz	ab49d69523	Add 2 more projects (Teichbau, Weinberg) with dedicated story subpages	2026-05-16 05:19:20 +02:00
Felix Brabetz	53eccd692d	Expand VOB/C text with specific ATV DIN 18320 reference and benefits	2026-05-16 05:13:36 +02:00
Felix Brabetz	6947e259a0	Add buttons to Biodiversity cards linking to dedicated story subpages	2026-05-16 05:10:02 +02:00
Felix Brabetz	e958bfc323	Flesh out subpages into rich stories with challenges, solutions, and facts	2026-05-16 05:05:36 +02:00
Felix Brabetz	e4b012026b	Enhance ecological focus in biotope.md with anti-gravel garden message	2026-05-16 05:01:13 +02:00
Felix Brabetz	90e7b030ca	Add dedicated SubpageRain with slider and connection to Schwammstadt	2026-05-16 04:57:12 +02:00
Felix Brabetz	4a41cd1392	Add interactive Rain Mode to Hero section for coziiness	2026-05-16 04:53:08 +02:00
Felix Brabetz	1fcd1dbd48	Add PDF download functionality to Easter Egg using jsPDF	2026-05-16 04:50:06 +02:00
Felix Brabetz	c4f33e2368	Enhance Easter Egg with a visual award certificate on completion	2026-05-16 04:47:38 +02:00
Felix Brabetz	65a875fbaf	Add hidden Easter Egg clicker game triggered by clicking the company name 5 times	2026-05-16 04:45:57 +02:00
Felix Brabetz	44302d1dfd	Revert Hero subtitle and add Plantlix to the top badge instead	2026-05-16 04:36:33 +02:00
Felix Brabetz	857389df50	Add Plantlix.de to the Hero subtitle to emphasize the connection	2026-05-16 04:33:01 +02:00
Felix Brabetz	4fd01e79ea	Replace Hero title with a quote by Karl Foerster	2026-05-16 04:27:41 +02:00
Felix Brabetz	7f32dd9440	Add interactive Plant Quiz component in cooperation with Plantlix.de	2026-05-16 04:21:45 +02:00
Felix Brabetz	1ec938651d	Delete old index.html to avoid confusion with Astro files	2026-05-16 04:20:13 +02:00
Felix Brabetz	4950ba3090	Establish more connections to Plantlix.de in projects and contact form	2026-05-16 04:13:44 +02:00
Felix Brabetz	dd6e28ee14	Infuse Hero and Biodiversity slogans with 'Love and Peace' as requested	2026-05-16 04:09:20 +02:00
Felix Brabetz	5e62a62137	Update slogans to be smarter and more sophisticated in Hero and Biodiversity sections	2026-05-16 04:04:12 +02:00
Felix Brabetz	092982decf	Wire up CMS for Biodiversity section and add Impressum & Datenschutz subpages	2026-05-16 04:00:10 +02:00
Felix Brabetz	e00df2e84b	Upgrade footer to a rich, 3-column layout with contact info and links	2026-05-16 03:54:43 +02:00
Felix Brabetz	bb75341f80	Add weather widget to Hero and convert contact form to multi-step wizard	2026-05-16 03:51:00 +02:00
Felix Brabetz	ee614af5e1	Add 'Plant of the Week' section in cooperation with Plantlix.de	2026-05-16 03:48:44 +02:00
Felix Brabetz	2689b54c65	Add more FAQs about Plantlix and Schwammstadt to FAQ section	2026-05-16 03:39:45 +02:00
Felix Brabetz	11f1156296	Add CTA button to Plantlix.de in scanner results	2026-05-16 03:35:19 +02:00
Felix Brabetz	03249f1b2c	Add interactive Plantlix scanner and visual flowchart to Biodiversity section	2026-05-16 03:30:20 +02:00
Felix Brabetz	48b37ba77e	Update subpages with stories and better titles	2026-05-16 03:24:59 +02:00
Felix Brabetz	ed8c1ccf82	Rewrite Biodiversity section to 'The Brabetz-Plantlix Connection' and summarize topics	2026-05-16 03:19:09 +02:00
Felix Brabetz	b9e84db501	Add subtle references to Plantlix.de in Competencies, Projects, and Footer	2026-05-16 03:02:02 +02:00
Felix Brabetz	6774ce7b93	Update Hero and Projects with emotional and passionate copy ('mit aller Liebe')	2026-05-16 02:58:58 +02:00
Felix Brabetz	e8d77ad97f	Fix broken image URLs in Case Studies with direct Unsplash links	2026-05-16 02:51:33 +02:00
Felix Brabetz	481e5cefe8	Update Case Studies with stories and better images	2026-05-16 02:45:58 +02:00
Felix Brabetz	7d0f7412ff	Add facts about Schwammstadt and Blumenwiese to content	2026-05-16 02:36:34 +02:00
Felix Brabetz	c0c7738498	Update Nav menu item from 'Events' to 'Leistungen'	2026-05-16 02:35:05 +02:00
Felix Brabetz	07979d2936	Highlight Plantlix cooperation with a prominent feature box	2026-05-16 02:33:04 +02:00
Felix Brabetz	6067382763	Replace Events section with Core Competencies (Plants, Constructions, Shrubs)	2026-05-16 02:30:08 +02:00
Felix Brabetz	4d7101ba77	Add prominent 'Sponsored by Plantlix.de' badge to Biodiversity section	2026-05-16 02:26:00 +02:00
Felix Brabetz	811ed227b6	Remove conflicting JSON file from content collection	2026-05-16 02:20:15 +02:00
Felix Brabetz	afe6e2ebe9	Setup Decap CMS and Content Collection for Biodiversity	2026-05-16 02:18:39 +02:00
Felix Brabetz	f5bc182a06	Remove 'Pfusch' and add botanical names & locations to Biodiversity	2026-05-16 02:14:02 +02:00
Felix Brabetz	cd6aaa1ef1	Migrate to official Astro Tailwind integration for robust styling	2026-05-16 02:07:56 +02:00
Felix Brabetz	100d722f78	Fix Tailwind config by adding is:inline in Layout.astro	2026-05-16 02:05:01 +02:00
Felix Brabetz	fcd306548c	Add hard facts and project suggestions to Biodiversity section	2026-05-16 02:01:48 +02:00