Wire up CMS for Biodiversity section and add Impressum & Datenschutz subpages

src/components/Biodiversity.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Biodiversity.astro
-// Komplett neu geschrieben für die "Plantlix Connection" und Fachthemen-Zusammenfassung
+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">
@@ -11,36 +13,15 @@
         </div>
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
-            <!-- Fachthema 1: Trockenmauer -->
+            {data.items.map((item) => (
-            <div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
+                <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`}>
-                <div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-mound"></i></div>
+                    {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>}
-                <h3 class="text-xl font-luxury font-bold text-white mb-4">Meisterhafter Trockenmauerbau</h3>
+                    <div class={`${item.title === 'Die Plantlix-Connection' ? 'text-emerald-400' : 'text-amber-400'} text-3xl mb-6`}><i class={item.icon}></i></div>
-                <p class="text-stone-400 text-sm font-light leading-relaxed mb-4">
+                    <h3 class="text-xl font-luxury font-bold text-white mb-4">{item.title}</h3>
-                    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.
+                    <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>
-                </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 class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Fokus: Biodiversität & Statik</div>
-            </div>
-
-            <!-- Fachthema 2: Schwammstadt -->
-            <div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
-                <div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-droplet"></i></div>
-                <h3 class="text-xl font-luxury font-bold text-white mb-4">Das Schwammstadt-Prinzip</h3>
-                <p class="text-stone-400 text-sm font-light leading-relaxed mb-4">
-                    Regenwasser ist wertvoll. Über Retentionsmulden und unterirdische Rigolen speichern wir das Wasser dort, wo es gebraucht wird. Das entlastet die Kanalisation und kühlt das Mikroklima deines Gartens.
-                </p>
-                <div class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Fokus: Klimaresistenz & Hydrologie</div>
-            </div>
-
-            <!-- Connection: Plantlix -->
-            <div class="glass p-8 rounded-2xl border border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50 transition-all group relative overflow-hidden">
-                <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>
-                <div class="text-emerald-400 text-3xl mb-6"><i class="fa-solid fa-robot"></i></div>
-                <h3 class="text-xl font-luxury font-bold text-white mb-4">Die Plantlix-Connection</h3>
-                <p class="text-stone-300 text-sm font-light leading-relaxed mb-4">
-                    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 für die Magerwiese oder das Sumpfbiotop.
-                </p>
-                <div class="text-xs font-semibold text-amber-500 uppercase tracking-wider">Fokus: Datengestützte Pflanzensoziologie</div>
                 </div>
+            ))}
         </div>
 
         <!-- Interactive Scanner -->

src/components/Footer.astro

@@ -42,6 +42,6 @@
 
     <!-- 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>&copy; 2026 Gebrüder Brabetz GmbH. Alle Rechte vorbehalten. | <a href="#" class="hover:text-stone-500">Impressum</a> | <a href="#" class="hover:text-stone-500">Datenschutz</a></p>
+        <p>&copy; 2026 Gebrüder Brabetz GmbH. 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>

src/components/SubpageDatenschutz.astro

@@ -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>

src/components/SubpageImpressum.astro

@@ -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>

src/content/biodiversity/biotope.md

@@ -2,19 +2,19 @@
 title: "Biotop-Bausteine für Ihren Garten"
 description: "Konzepte & Techniken"
 items:
-  - title: "Friesen- & Trockenmauern"
+  - title: "Meisterhafter Trockenmauerbau"
-    description: "Bauen ohne Mörtel: Wir setzen regionales Gestein im zweihäuptigen Verband. Die offenen Fugen bieten Eidechsen und Wildbienen Lebensraum. Ideal für Steingartenpflanzen wie <em class='text-emerald-400'>Sedum album</em> (Weiße Fetthenne) und <em class='text-emerald-400'>Sempervivum tectorum</em>."
+    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: "Mauerwerk"
+    technique: "Fokus: Biodiversität & Statik"
-    location: "Taunus-Hänge"
+    location: "Taunus"
     icon: "fa-solid fa-mound"
-  - title: "Artenreiche Magerwiese"
+  - title: "Das Schwammstadt-Prinzip"
-    description: "Bodenabmagerung für maximale Vielfalt: Wir tauschen Humus gegen Sand/Kies. Unter Verwendung von zertifiziertem Regio-Saatgut und einer 2-Schürigen Mahd im Jahr fördern wir Arten wie <em class='text-emerald-400'>Salvia pratensis</em> und <em class='text-emerald-400'>Leucanthemum vulgare</em>."
+    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: "Regio-Saatgut"
+    technique: "Fokus: Klimaresistenz & Hydrologie"
-    location: "Rheingau-Sonne"
+    location: "Rheingau"
-    icon: "fa-solid fa-seedling"
-  - title: "Sumpf- & Feuchtbiotope"
-    description: "Fakten zum Schwammstadt-Prinzip: Wir bauen Retentionsmulden und Rigolen. Mit Sumpfpflanzen wie <em class='text-emerald-400'>Iris pseudacorus</em> und <em class='text-emerald-400'>Caltha palustris</em> kühlen wir das Mikroklima und entlasten das Kanalnetz bei Starkregen."
-    technique: "Schwammstadt"
-    location: "Talauen & Senken"
     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"
 ---

src/pages/index.astro

@@ -13,6 +13,8 @@ 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';
 ---
 
 <Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
@@ -34,6 +36,8 @@ import SubpageContact from '../components/SubpageContact.astro';
     <SubpageMauer />
     <SubpageGewerbe />
     <SubpageContact />
+    <SubpageImpressum />
+    <SubpageDatenschutz />
 
     <!-- CHARTS INIT -->
     <script is:inline>