Add buttons to Biodiversity cards linking to dedicated story subpages

src/components/Biodiversity.astro

@@ -14,13 +14,19 @@ const { data } = entry || { data: { items: [] } };
 
         <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`}>
+                <div class={`glass p-8 rounded-2xl border ${item.title === 'Die Plantlix-Connection' ? 'border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50' : 'border-stone-800/50 hover:border-emerald-500/30'} transition-all group relative overflow-hidden flex flex-col justify-between`}>
+                    <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>}
                         <div class={`${item.title === 'Die Plantlix-Connection' ? 'text-emerald-400' : 'text-amber-400'} text-3xl mb-6`}><i class={item.icon}></i></div>
                         <h3 class="text-xl font-luxury font-bold text-white mb-4">{item.title}</h3>
                         <p class={`${item.title === 'Die Plantlix-Connection' ? 'text-stone-300' : 'text-stone-400'} text-sm font-light leading-relaxed mb-4`} set:html={item.description}></p>
                         <div class={`text-xs font-semibold ${item.title === 'Die Plantlix-Connection' ? 'text-amber-500' : 'text-emerald-400'} uppercase tracking-wider`}>{item.technique}</div>
                     </div>
+                    
+                    <button @click={item.title === 'Die Trockenmauer als Biotop' ? "currentPage = 'page-mauer'" : item.title === 'Das Schwammstadt-Prinzip' ? "currentPage = 'page-gewerbe'" : "currentPage = 'page-plantlix'"} class="mt-6 w-full text-center px-4 py-2.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
+                        Geschichte lesen
+                    </button>
+                </div>
             ))}
         </div>
 

src/components/SubpagePlantlix.astro

@@ -0,0 +1,54 @@
+---
+// src/components/SubpagePlantlix.astro
+---
+<!-- Subpage: Plantlix Story -->
+<div x-show="currentPage === 'page-plantlix'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950">
+    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
+        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
+            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
+        </button>
+
+        <div class="border-b border-stone-800 pb-6">
+            <span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study III</span>
+            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Plantlix-Connection</h1>
+            <p class="text-stone-400 text-lg font-light leading-relaxed">
+                Wie künstliche Intelligenz und traditionelles Gärtnerwissen gemeinsam das perfekte Ökosystem erschufen.
+            </p>
+        </div>
+
+        <!-- Story Content -->
+        <div class="space-y-8 text-stone-400 text-sm leading-relaxed">
+            <div>
+                <h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
+                <p>Ein Kunde im Rheingau hatte ein Grundstück mit extrem schwierigen Bodenverhältnissen: Teils schattig und feucht, teils extrem sonnig und trocken auf engstem Raum. Klassische Pflanzpläne scheiterten hier oft, weil die Pflanzen nach wenigen Monaten eingingen.</p>
+            </div>
+
+            <div>
+                <h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
+                <p>Wir fütterten die Algorithmen von **Plantlix.de** mit den genauen Standortdaten (Bodenproben, Lichtstunden, Feuchtigkeit). Plantlix analysierte die Daten und spuckte eine pflanzensoziologische Gemeinschaft aus, die perfekt an diese Micro-Habitate angepasst war.</p>
+                <p class="mt-2">Statt Monokulturen pflanzten wir eine dynamische Gemeinschaft, die sich gegenseitig unterstützt (Schattenwerfer, Bodendecker, Tiefwurzler).</p>
+            </div>
+
+            <div>
+                <h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
+                <p>Der Garten blüht wie nie zuvor. Keine Pflanze ist eingegangen. Die KI hat uns geholfen, die Natur besser zu verstehen und Fehler zu vermeiden, die früher erst nach Jahren sichtbar geworden wären.</p>
+            </div>
+        </div>
+
+        <!-- Facts & Figures -->
+        <div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
+            <div>
+                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">100 %</span>
+                <span class="text-xs text-stone-500 uppercase font-mono">Anwachsrate</span>
+            </div>
+            <div>
+                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">15</span>
+                <span class="text-xs text-stone-500 uppercase font-mono">Pflanzengemeinschaften</span>
+            </div>
+            <div>
+                <span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">&lt; 1 s</span>
+                <span class="text-xs text-stone-500 uppercase font-mono">Analysezeit</span>
+            </div>
+        </div>
+    </div>
+</div>

src/pages/index.astro

@@ -17,6 +17,7 @@ import SubpageContact from '../components/SubpageContact.astro';
 import SubpageImpressum from '../components/SubpageImpressum.astro';
 import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
 import SubpageRain from '../components/SubpageRain.astro';
+import SubpagePlantlix from '../components/SubpagePlantlix.astro';
 import EasterEgg from '../components/EasterEgg.astro';
 ---
 
@@ -43,6 +44,7 @@ import EasterEgg from '../components/EasterEgg.astro';
     <SubpageImpressum />
     <SubpageDatenschutz />
     <SubpageRain />
+    <SubpagePlantlix />
     <EasterEgg />
 
     <!-- CHARTS INIT -->