Add interactive Rain Mode to Hero section for coziiness

Add PDF download functionality to Easter Egg using jsPDF
Enhance Easter Egg with a visual award certificate on completion
2026-05-16 04:53:08 +02:00 · 2026-05-16 04:50:06 +02:00 · 2026-05-16 04:47:38 +02:00 · 2026-05-16 04:45:57 +02:00 · 2026-05-16 04:36:33 +02:00 · 2026-05-16 04:33:01 +02:00
30 changed files with 1195 additions and 319 deletions
@@ -0,0 +1,14 @@
+# Stage 1: Build the Astro site
+FROM node:lts AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve the site with Nginx
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [tailwind()],
+});
@@ -1,10 +1,8 @@
 services:
  brabetz-homepage:
-    image: nginx:alpine
+    build: .
    container_name: brabetz-homepage
    restart: always
-    volumes:
-      - ./src:/usr/share/nginx/html:ro
    networks:
      - traefik_proxy
    labels:
@@ -15,6 +13,9 @@ services:
      - "traefik.http.routers.brabetz-home.tls=true"
      - "traefik.http.routers.brabetz-home.tls.certresolver=myresolver"
      - "traefik.http.services.brabetz-home.loadbalancer.server.port=80"
+      - "traefik.http.middlewares.redirect-to-non-www.redirectregex.regex=^https?://www.gebrueder-brabetz.de/(.*)"
+      - "traefik.http.middlewares.redirect-to-non-www.redirectregex.replacement=https://gebrueder-brabetz.de/$$1"
+      - "traefik.http.routers.brabetz-home.middlewares=redirect-to-non-www"

 networks:
  traefik_proxy:
@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip Compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Caching for static assets (Bilder, Schriften, JS/CSS)
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    # Fallback für SPA-Routing (falls wir mal echte Seiten hinzufügen)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
@@ -0,0 +1,17 @@
+{
+  "name": "brabetz-homepage",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "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>
@@ -0,0 +1,88 @@
+---
+// src/components/Biodiversity.astro
+import { getEntry } from 'astro:content';
+const entry = await getEntry('biodiversity', 'biotope');
+const { data } = entry || { data: { items: [] } };
+---
+<section id="biodiversity" class="py-32 bg-stone-900/30">
+    <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">Die Symbiose</span>
+            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Ein friedlicher Dialog zwischen Stein und Pflanze</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>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            {data.items.map((item) => (
+                <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`}>
+                    {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>}
+                    <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>
+            ))}
+        </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>
+                    <h3 class="text-xl font-luxury font-bold text-white mb-2">Plantlix Standort-Scanner</h3>
+                    <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>
+
+        <!-- Flowchart -->
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-5 gap-4 items-center text-center">
+            <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 1</span>
+                <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>
+</section>
@@ -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>
@@ -0,0 +1,49 @@
+---
+// src/components/Events.astro
+// HINWEIS: Umbenannt von Events zu Kernkompetenzen (Pflanzen, Bauten, Gehölze)
+---
+<!-- Core Competencies Section -->
+<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">Unsere Kernkompetenzen</span>
+            <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 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">
+            <!-- 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-seedling"></i>
+                </div>
+                <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">
+                    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>
+
+            <!-- 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-trowel-bricks"></i>
+                </div>
+                <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">
+                    Präzise Steinmetzarbeiten und Trockenmauerwerk nach DIN 18915. Langlebige Konstruktionen im zweihäuptigen Verband, die Struktur geben und Generationen überdauern.
+                </p>
+            </div>
+
+            <!-- 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-tree"></i>
+                </div>
+                <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">
+                    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>
+</section>
@@ -0,0 +1,47 @@
+---
+// src/components/FAQ.astro
+---
+<!-- 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" 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>
+                    <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>
+
+            <!-- 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-amber-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-amber-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-amber-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-amber-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>
+        </div>
+    </div>
+</section>
@@ -0,0 +1,47 @@
+---
+// src/components/Footer.astro
+---
+<!-- Footer -->
+<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 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12">
+        <!-- Column 1: Brand -->
+        <div>
+            <p class="font-luxury text-white text-lg mb-4 tracking-wider">Gebrüder Brabetz GmbH</p>
+            <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>
@@ -0,0 +1,71 @@
+---
+// 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">
+        <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" 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 })">
+        
+        <!-- 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>
+        
+        <!-- Live Status / Weather Widget -->
+        <div class="mb-4 text-xs font-mono text-stone-500 flex justify-center items-center gap-2">
+            <i class="fa-solid fa-cloud-sun text-emerald-400"></i>
+            <span>Rheingau-Taunus: 18°C</span>
+            <span class="text-stone-700">//</span>
+            <span class="text-emerald-400">Aktuell perfektes Wetter für den Trockenmauerbau.</span>
+        </div>
+
+        <!-- Rain Toggle Button -->
+        <div class="mb-8">
+            <button @click="rain = !rain" class="text-stone-500 hover:text-white 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-stone-800 hover:border-stone-700 transition-colors backdrop-blur-sm">
+                <i class="fa-solid" :class="rain ? 'fa-cloud-showers-heavy text-emerald-400' : 'fa-cloud'"></i>
+                <span x-text="rain ? 'Regen stoppen' : 'Regen-Modus für Gemütlichkeit'"></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 erschaffen lebendige Meisterwerke im Rheingau-Taunus-Kreis. Mit tiefer Liebe zur Botanik und kompromissloser Präzision im Trockenmauerbau gestalten wir Rückzugsorte, die Generationen überdauern. Echte Natur, meisterhaft geformt.
+        </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>
@@ -0,0 +1,28 @@
+---
+// src/components/Nav.astro
+---
+<!-- 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="#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">
+                Projekt starten
+            </button>
+        </div>
+    </div>
+</nav>
@@ -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,46 @@
+---
+// 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 }">
+            <h3 class="text-xl font-bold text-white mb-6">Welcher dieser Bäume ist ein extremer Tiefwurzler und übersteht Trockenheit am besten?</h3>
+            
+            <div class="space-y-4" x-show="!answered">
+                <button @click="answered = true; correct = false" 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">
+                    <span>A) Die Rotbuche (*Fagus sylvatica*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+                <button @click="answered = true; correct = true" 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">
+                    <span>B) Die Stieleiche (*Quercus robur*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+                <button @click="answered = true; correct = false" 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">
+                    <span>C) Die Fichte (*Picea abies*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+            </div>
+
+            <!-- Result -->
+            <div x-show="answered" x-cloak 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">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.</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 **B) Die Stieleiche**. Sie bildet eine tiefe Pfahlwurzel. Rotbuchen und Fichten wurzeln eher flach und sind daher anfälliger für Trockenheit.</p>
+                </div>
+                <button @click="answered = false" class="mt-8 text-xs text-stone-500 hover:text-white underline uppercase tracking-wider transition-colors">
+                    Nochmal versuchen
+                </button>
+            </div>
+        </div>
+    </div>
+</section>
@@ -0,0 +1,57 @@
+---
+// src/components/Projects.astro
+---
+<!-- 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">Geschichten aus Stein und Erde</h2>
+            <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-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">Die schwebende Trockenmauer im Taunus</h3>
+                        <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">
+                        Geschichte lesen
+                    </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-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">Die blühende Schwammstadt</h3>
+                        <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">
+                        Geschichte lesen
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
@@ -0,0 +1,20 @@
+---
+// src/components/Standards.astro
+---
+<!-- 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>
@@ -0,0 +1,140 @@
+---
+// src/components/SubpageContact.astro
+---
+<!-- 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="{ step: 1, submitted: false, projectType: '', area: '', slope: false }">
+                <!-- Progress Indicator -->
+                <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">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">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 class="flex gap-4 mt-6">
+                            <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">
+                                Zurück
+                            </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">
+                    ✔ Konfiguration erfolgreich an die Bauleitung übermittelt. Wir prüfen deine 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>
@@ -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>
@@ -0,0 +1,19 @@
+---
+// 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 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 mb-4">Das blühende Schwammstadt-Biotop</h1>
+            <p class="text-stone-400 text-lg font-light leading-relaxed max-w-3xl">
+                In einem Neubaugebiet staute sich das Regenwasser. Statt es einfach in die Kanalisation zu leiten, bauten wir ein unterirdisches Rigolensystem und tarnten es an der Oberfläche als wunderschönes Sumpfbiotop. Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm.
+            </p>
+        </div>
+        <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>
@@ -0,0 +1,22 @@
+---
+// 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 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 mb-4">Die Festung im Rheingau</h1>
+            <p class="text-stone-400 text-lg font-light leading-relaxed max-w-3xl">
+                Ein steiler Hang drohte wegzurutschen. Statt einer kalten Betonwand bauten wir eine bis zu 3 Meter hohe Trockenmauer aus regionalem Quarzit. Stein für Stein im zweihäuptigen Verband – ganz ohne Mörtel. Heute sonnen sich dort Eidechsen und der Hang ist für Generationen gesichert.
+            </p>
+        </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>
@@ -0,0 +1,20 @@
+---
+title: "Biotop-Bausteine für Ihren Garten"
+description: "Konzepte & Techniken"
+items:
+  - title: "Meisterhafter Trockenmauerbau"
+    description: "Wir bauen Mauern ohne Mörtel, Stein für Stein nach DIN 18915 im zweihäuptigen Verband. Das ist nicht nur standsicher, sondern schafft wertvollen Lebensraum für Eidechsen und Wildbienen in den offenen Fugen. Ideal für Pflanzen wie <em class='text-emerald-400'>Sedum album</em>."
+    technique: "Fokus: Biodiversität & Statik"
+    location: "Taunus"
+    icon: "fa-solid fa-mound"
+  - title: "Das Schwammstadt-Prinzip"
+    description: "Regenwasser ist wertvoll. Über Retentionsmulden und unterirdische Rigolen speichern wir das Wasser dort, wo es gebraucht wird. Das entlastet die Kanalisation. Mit Sumpfpflanzen wie <em class='text-emerald-400'>Iris pseudacorus</em> kühlen wir das Mikroklima."
+    technique: "Fokus: Klimaresistenz & Hydrologie"
+    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 (Boden, Licht, Wasser) digital. Plantlix liefert uns die perfekte pflanzensoziologische Zusammenstellung."
+    technique: "Fokus: Datengestützte Pflanzensoziologie"
+    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,316 +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 - Kontakt & Bauleitung</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <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@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        .font-luxury { font-family: 'Cinzel', serif; }
-        .font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
-        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
-        .faq-active .faq-answer { max-height: 500px; }
-        .faq-active .faq-icon { transform: rotate(180deg); }
-        .subpage { display: none; }
-        .subpage.active { display: block; animation: fadeIn 0.4s ease-out forwards; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-    </style>
-</head>
-<body class="bg-stone-900 text-stone-100 font-sans antialiased selection:bg-amber-600 selection:text-stone-950">
-
-    <div id="main-page" class="bg-stone-50 text-stone-900 min-h-screen">
-        <nav class="fixed w-full bg-stone-50/90 backdrop-blur-md z-50 shadow-sm border-b border-stone-200/60">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between">
-                <a href="#" onclick="switchPage('main-page')" class="flex items-center gap-4 group">
-                    <div class="w-12 h-12 bg-emerald-900 rounded-xl flex items-center justify-center text-amber-400 text-xl shadow-md group-hover:scale-105 transition-transform">
-                        <i class="fa-solid fa-compass-drafting"></i>
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xl font-luxury font-bold text-emerald-950 tracking-wider">Gebrüder Brabetz</span>
-                        <span class="text-[10px] font-bold text-amber-700 uppercase tracking-[0.25em] -mt-1">Garten- & Landschaftsbau GmbH</span>
-                    </div>
-                </a>
-                <div class="hidden lg:flex items-center gap-8 text-sm font-semibold text-stone-800 tracking-wide">
-                    <a href="#standards" class="hover:text-emerald-800 transition">Das Regelwerk</a>
-                    <a href="#services" class="hover:text-emerald-800 transition">Kompetenzen</a>
-                    <a href="#projects" class="hover:text-emerald-800 transition">Masse & Beweise</a>
-                    <a href="#faq" class="hover:text-emerald-800 transition">Klartext</a>
-                    <button onclick="switchPage('page-contact')" class="bg-emerald-900 hover:bg-emerald-800 text-white px-6 py-3 rounded-xl transition shadow-lg text-xs uppercase tracking-wider">Projekt zünden</button>
-                </div>
-            </div>
-        </nav>
-
-        <header class="relative min-h-screen flex items-center justify-center pt-24 overflow-hidden bg-emerald-950">
-            <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="absolute inset-0 w-full h-full object-cover opacity-30 scale-105">
-            <div class="absolute inset-0 bg-gradient-to-b from-emerald-950/40 via-emerald-950/70 to-stone-50"></div>
-            <div class="relative max-w-5xl mx-auto px-6 text-center z-10">
-                <span class="text-xs font-bold tracking-[0.3em] text-amber-400 uppercase bg-emerald-900/60 px-5 py-2 rounded-full border border-amber-500/30 backdrop-blur-md">Null Pfusch. Maximale Gewährleistung.</span>
-                <h1 class="mt-8 text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide text-white leading-[1.15]">
-                    Wer billig baut, baut dreimal.<br>
-                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-amber-300">Wir bauen für Generationen.</span>
-                </h1>
-                <p class="mt-8 text-lg sm:text-xl text-stone-200 max-w-3xl mx-auto font-light leading-relaxed">
-                    Wir überlassen im Rheingau-Taunus-Kreis nichts dem Zufall. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision, exzellente Facharbeiter-Struktur und messbare VOB-Transparenz.
-                </p>
-                <div class="mt-12 flex flex-wrap justify-center gap-4">
-                    <a href="#projects" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl border border-white/20 transition-all backdrop-blur-md text-sm uppercase tracking-wider">Fallstudien ansehen</a>
-                    <button onclick="switchPage('page-contact')" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl shadow-lg text-sm uppercase tracking-wider transition-all">Direkt zur Bauleitung</button>
-                </div>
-            </div>
-        </header>
-
-        <section id="standards" class="py-28 bg-white border-b border-stone-200">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="max-w-3xl mb-12">
-                    <span class="text-xs font-bold tracking-widest text-amber-700 uppercase">Keine Ausreden</span>
-                    <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-emerald-950 mt-2">Warum wir nach DIN und VOB abrechnen</h2>
-                </div>
-                <p class="text-stone-600 leading-relaxed max-w-4xl">
-                    Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach **VOB/C** aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
-                </p>
-            </div>
-        </section>
-
-        <section id="projects" class="py-28 bg-emerald-950 text-white">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="mb-16">
-                    <span class="text-xs font-bold tracking-widest text-amber-400 uppercase">Ausgeführte Großprojekte</span>
-                    <h2 class="text-3xl sm:text-5xl font-luxury font-bold mt-2">Harte Fakten statt schöner Renderings</h2>
-                    <div class="w-12 h-1 bg-amber-500 mt-4"></div>
-                </div>
-
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    <div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
-                        <img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-56 object-cover">
-                        <div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
-                            <div>
-                                <span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie I // Massenaufmaß</span>
-                                <h3 class="text-2xl font-luxury font-bold mt-1 text-white">Monumentale Hangterrassierung</h3>
-                                <p class="text-stone-300 text-sm mt-2 leading-relaxed">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
-                            </div>
-                            <button onclick="switchPage('page-mauer')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
-                                <i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
-                        <img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-56 object-cover">
-                        <div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
-                            <div>
-                                <span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie II // Ablauf & Taktung</span>
-                                <h3 class="text-2xl font-luxury font-bold mt-1 text-white">Großflächen-Wegebau & Rigolensystem</h3>
-                                <p class="text-stone-300 text-sm mt-2 leading-relaxed">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerer Entwässerung.</p>
-                            </div>
-                            <button onclick="switchPage('page-gewerbe')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
-                                <i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <section id="faq" class="py-28 max-w-4xl mx-auto px-6">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl font-luxury font-bold text-emerald-950">Klartext im Vorfeld</h2>
-                <div class="w-12 h-1 bg-amber-600 mx-auto mt-4"></div>
-            </div>
-            <div class="space-y-4">
-                <div class="bg-white border border-stone-200 rounded-2xl p-6 cursor-pointer" onclick="toggleFaq(this)">
-                    <div class="flex justify-between items-center select-none">
-                        <h3 class="font-bold text-emerald-950 text-base sm:text-lg">Was unterscheidet euch von günstigen Kolonnen?</h3>
-                        <i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform"></i>
-                    </div>
-                    <div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
-                        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>
-        </section>
-
-        <footer class="bg-stone-900 py-12 text-stone-400 border-t border-stone-950 text-sm text-center">
-            <p class="font-luxury text-white">Gebrüder Brabetz GmbH &copy; 2026 // Rheingau-Taunus-Kreis</p>
-            <button onclick="switchPage('page-contact')" class="text-amber-400 hover:underline mt-2 block mx-auto text-xs font-mono">Direktlink zur Bauleitung & QR-Code</button>
-        </footer>
-    </div>
-
-
-    <div id="page-mauer" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-6xl mx-auto space-y-12">
-            <button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
-                <i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
-            </button>
-            <div class="border-b border-stone-800 pb-6">
-                <span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2025-09</span>
-                <h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Die Festung im Rheingau</h1>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
-                <div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
-            </div>
-        </div>
-    </div>
-
-
-    <div id="page-gewerbe" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-6xl mx-auto space-y-12">
-            <button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
-                <i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
-            </button>
-            <div class="border-b border-stone-800 pb-6">
-                <span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2026-03</span>
-                <h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Das Logistik-Plateau</h1>
-            </div>
-            <div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
-        </div>
-    </div>
-
-
-    <div id="page-contact" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-6xl mx-auto space-y-12">
-            <button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
-                <i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
-            </button>
-
-            <div class="border-b border-stone-800 pb-6">
-                <span class="text-xs text-amber-400 font-mono uppercase tracking-widest">Bauleitung & Vergabe // Direkter Draht</span>
-                <h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Projekt zünden.</h1>
-                <p class="text-stone-400 mt-4 max-w-2xl text-base">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst. Reichen Sie Ihre Pläne ein.</p>
-            </div>
-
-            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-                <div class="lg:col-span-7 bg-stone-900 border border-stone-800 p-8 rounded-3xl shadow-xl">
-                    <form onsubmit="handleFormSubmit(event)" class="space-y-4">
-                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                            <div>
-                                <label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Auftraggeber / Firma *</label>
-                                <input type="text" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
-                            </div>
-                            <div>
-                                <label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Direkte E-Mail *</label>
-                                <input type="email" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Gewerk / Projektart</label>
-                            <select class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500">
-                                <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-400 uppercase mb-1">Harte Projektdaten (m², geplante Massen, Wünsche)</label>
-                            <textarea rows="4" placeholder="Keine Romane. Nur Zahlen, Maße und Fakten..." class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500"></textarea>
-                        </div>
-                        <button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs uppercase tracking-widest transition shadow-lg">Daten zur technischen Prüfung einreichen</button>
-                    </form>
-                    <div id="form-success-sub" class="hidden mt-4 p-4 bg-emerald-950/60 border border-emerald-800 rounded-xl text-emerald-300 text-sm text-center font-medium font-mono">
-                        ✔ Datensatz erfolgreich auf lokalem Docker-Node (brabetz-node) verbucht. Die Bauleitung initiiert die Prüfung.
-                    </div>
-                </div>
-
-                <div class="lg:col-span-5 space-y-6">
-                    <div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl flex flex-col items-center text-center">
-                        <div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-3 py-1 rounded-md text-[10px] uppercase font-mono mb-4">Digitale Visitenkarte</div>
-                        
-                        <div class="p-4 bg-white rounded-2xl shadow-inner border border-stone-700">
-                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-48 h-48">
-                        </div>
-                        
-                        <p class="text-xs text-stone-400 font-mono mt-4 leading-relaxed px-4">
-                            <strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und die Bauleitung fehlerfrei ohne Tippfehler im System hinterlegen.
-                        </p>
-                    </div>
-
-                    <div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl font-mono text-xs text-stone-400 space-y-4">
-                        <div class="text-amber-400 font-bold uppercase border-b border-stone-800 pb-2">Die Zentrale</div>
-                        <p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> <strong>Telefon:</strong> 06124 / 4654</p>
-                        <p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> <strong>E-Mail:</strong> info@gebrueder-brabetz.de</p>
-                        <p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> <strong>Leitung:</strong> Caspar, Jakob & Felix Brabetz</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <script>
-        // SPA Page-Switcher Framework
-        function switchPage(pageId) {
-            document.getElementById('main-page').classList.add('hidden');
-            document.getElementById('page-mauer').classList.add('hidden');
-            document.getElementById('page-gewerbe').classList.add('hidden');
-            document.getElementById('page-contact').classList.add('hidden');
-
-            const target = document.getElementById(pageId);
-            target.classList.remove('hidden');
-            target.classList.add('active');
-            
-            // Charts verzögert zünden
-            if(pageId === 'page-mauer') setTimeout(triggerMauerCharts, 50);
-            if(pageId === 'page-gewerbe') setTimeout(triggerGewerbeCharts, 50);
-            
-            window.scrollTo(0, 0);
-        }
-
-        // FAQ Toggle
-        function toggleFaq(element) { element.classList.toggle('faq-active'); }
-
-        // Formular Absendung (SPA Sub)
-        function handleFormSubmit(event) {
-            event.preventDefault();
-            const successDiv = document.getElementById('form-success-sub');
-            successDiv.classList.remove('hidden');
-            event.target.reset();
-            setTimeout(() => successDiv.classList.add('hidden'), 7000);
-        }
-
-        // --- CHARTS ENGINE ---
-        let initializedCharts = {};
-        function triggerMauerCharts() {
-            if (initializedCharts['mauer']) return;
-            new Chart(document.getElementById('subChartMassen').getContext('2d'), {
-                type: 'pie',
-                data: {
-                    labels: ['Erdaushub (m³)', 'Muschelkalk-Quader (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
-                    datasets: [{ data: [140, 65, 38, 25], backgroundColor: ['#b45309', '#78716c', '#475569', '#15803d'], borderWidth: 0 }]
-                },
-                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
-            });
-            new Chart(document.getElementById('subChartBoden').getContext('2d'), {
-                type: 'bar',
-                data: {
-                    labels: ['Ist-Profil Baugrube'],
-                    datasets: [
-                        { label: 'Mutterboden reaktiviert (20cm)', data: [20], backgroundColor: '#166534' },
-                        { label: 'Filterschicht / Drainage (40cm)', data: [40], backgroundColor: '#a16207' },
-                        { label: 'Baugrund stabilisiert (Klasse 4)', data: [80], backgroundColor: '#44403c' }
-                    ]
-                },
-                options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true, ticks: { color: '#d6d3d1' } }, y: { stacked: true, ticks: { color: '#d6d3d1' } } }, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
-            });
-            initializedCharts['mauer'] = true;
-        }
-
-        function triggerGewerbeCharts() {
-            if (initializedCharts['gewerbe']) return;
-            new Chart(document.getElementById('subChartGantt').getContext('2d'), {
-                type: 'bar',
-                data: {
-                    labels: ['1. Erdbau & Rigolenbettung', '2. Tragschichtherstellung', '3. Betonsteinpflasterdecke', '4. Großbaumpflanzung (DIN)'],
-                    datasets: [{ data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], backgroundColor: '#047857', borderRadius: 6 }]
-                },
-                options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { min: 1, max: 9, ticks: { color: '#d6d3d1', callback: v => 'Woche ' + v } }, y: { ticks: { color: '#d6d3d1' } } }, plugins: { legend: { display: false } } }
-            });
-            initializedCharts['gewerbe'] = true;
-        }
-    </script>
-</body>
-</html>
@@ -0,0 +1,37 @@
+---
+// src/layouts/Layout.astro
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<!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>{title}</title>
+    <!-- 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">
+    
+    <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 }">
+    <slot />
+</body>
+</html>
@@ -0,0 +1,126 @@
+---
+// src/pages/index.astro
+import Layout from '../layouts/Layout.astro';
+import Nav from '../components/Nav.astro';
+import Hero from '../components/Hero.astro';
+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 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 EasterEgg from '../components/EasterEgg.astro';
+---
+
+<Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
+    <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 />
+        <Standards />
+        <Projects />
+        <Events />
+        <Biodiversity />
+        <PlantOfTheWeek />
+        <PlantQuiz />
+        <FAQ />
+        <Footer />
+    </div>
+
+    <!-- Subpages -->
+    <SubpageMauer />
+    <SubpageGewerbe />
+    <SubpageContact />
+    <SubpageImpressum />
+    <SubpageDatenschutz />
+    <EasterEgg />
+
+    <!-- CHARTS INIT -->
+    <script is:inline>
+        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>
+    <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	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
Felix Brabetz	18a3e20d34	Optimize Nginx (gzip, cache) and Traefik (WWW redirect)	2026-05-16 01:51:31 +02:00
Felix Brabetz	35fc67cd6e	Migrate to Astro and split components	2026-05-16 01:46:08 +02:00