brabetz-homepage/src/components/Biodiversity.astro

---
// src/components/Biodiversity.astro
---
<!-- Biodiversity & Quality Section -->
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center mb-20">
            <div class="lg:col-span-6">
                <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Zukunftssicher & Lebendig</span>
                <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
                <div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
                <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
                    Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
                </p>
                <p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
                    In enger Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-amber-400 hover:underline">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. So stellen wir sicher, dass jede Pflanze optimal zum Standort passt, die Biodiversität fördert und klimaresistent ist.
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
                    <div class="flex items-start gap-3">
                        <div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
                        <div>
                            <h4 class="font-bold text-white text-sm">Native Flora & Magerböden</h4>
                            <p class="text-stone-500 text-xs mt-1">Gezielte Abmagerung des Bodens für artenreiche Wildblumenwiesen statt Einheitsgrün.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
                        <div>
                            <h4 class="font-bold text-white text-sm">Bodenbiologie nach DIN 18915</h4>
                            <p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten für langlebiges Grün und optimalen Wasserhaushalt.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-6">
                <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
                    <img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
                    <div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
                        <p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projektvorschläge -->
        <div class="border-t border-stone-800/50 pt-20">
            <div class="text-center mb-12">
                <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Konzepte & Techniken</span>
                <h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">Biotop-Bausteine für Ihren Garten</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Projekt 1 -->
                <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
                    <div>
                        <div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-mound"></i></div>
                        <h4 class="text-xl font-luxury font-bold text-white mb-3">Friesen- & Trockenmauern</h4>
                        <p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
                            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>.
                        </p>
                    </div>
                    <div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
                        <span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Mauerwerk</span>
                        <span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Taunus-Hänge</span>
                    </div>
                </div>

                <!-- Projekt 2 -->
                <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
                    <div>
                        <div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-seedling"></i></div>
                        <h4 class="text-xl font-luxury font-bold text-white mb-3">Artenreiche Magerwiese</h4>
                        <p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
                            Wir tauschen humosen Oberboden gegen ein Sand-Kies-Gemisch, um Nährstoffe zu reduzieren. Nur so etablieren sich seltene Wildkräuter wie <em class="text-emerald-400">Salvia pratensis</em> (Wiesensalbei) und <em class="text-emerald-400">Leucanthemum vulgare</em> dauerhaft.
                        </p>
                    </div>
                    <div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
                        <span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Bodenabmagerung</span>
                        <span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Rheingau-Sonne</span>
                    </div>
                </div>

                <!-- Projekt 3 -->
                <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
                    <div>
                        <div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-droplet"></i></div>
                        <h4 class="text-xl font-luxury font-bold text-white mb-3">Sumpf- & Feuchtbiotope</h4>
                        <p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
                            Kombination aus Versickerung und Lebensraum. Mit standortgerechten Sumpfpflanzen wie <em class="text-emerald-400">Iris pseudacorus</em> (Sumpf-Schwertlilie) und <em class="text-emerald-400">Caltha palustris</em> schaffen wir Filterzonen, die Libellen anziehen.
                        </p>
                    </div>
                    <div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
                        <span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Retentionsmulde</span>
                        <span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Talauen & Senken</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>