Add dedicated SubpageRain with slider and connection to Schwammstadt

src/components/Hero.astro

@@ -38,11 +38,11 @@
             <span class="text-emerald-400">Aktuell perfektes Wetter für den Trockenmauerbau.</span>
         </div>
 
-        <!-- Rain Toggle Button -->
+        <!-- Rain Detail Page 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">
+            <button @click="currentPage = 'page-rain'" class="text-emerald-400 hover:text-emerald-300 text-xs font-mono flex justify-center items-center gap-2 mx-auto bg-stone-900/50 px-4 py-2 rounded-full border border-emerald-900/50 hover:border-emerald-500 transition-colors backdrop-blur-sm">
-                <i class="fa-solid" :class="rain ? 'fa-cloud-showers-heavy text-emerald-400' : 'fa-cloud'"></i>
+                <i class="fa-solid fa-cloud-showers-heavy"></i>
-                <span x-text="rain ? 'Regen stoppen' : 'Regen-Modus für Gemütlichkeit'"></span>
+                <span>Regen-Modus für Gemütlichkeit entdecken</span>
             </button>
         </div>
 

src/components/SubpageRain.astro

@@ -0,0 +1,56 @@
+---
+// src/components/SubpageRain.astro
+---
+<div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" x-data="{ rainIntensity: 50, drops: [], generateDrops(val) { this.drops = []; for(let i=0; i<val; i++) this.drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 }); } }" x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => generateDrops(value))">
+    
+    <!-- Rain Container (Full Screen on this page) -->
+    <div class="absolute inset-0 pointer-events-none z-0">
+        <template x-for="drop in drops">
+            <div class="absolute bg-emerald-400/30 w-0.5 h-8" 
+                 :style="`left: ${drop.left}%; top: -20px; animation: fall ${drop.speed}s linear infinite; animation-delay: ${drop.delay}s`">
+            </div>
+        </template>
+    </div>
+
+    <div class="max-w-4xl mx-auto space-y-12 relative z-10">
+        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
+            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
+        </button>
+
+        <div class="border-b border-stone-800 pb-6">
+            <span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Atmosphäre & Ökologie</span>
+            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1>
+        </div>
+
+        <!-- Controls -->
+        <div class="glass p-8 rounded-2xl border border-stone-800 space-y-6">
+            <div>
+                <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
+                <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+            </div>
+            
+            <div class="flex justify-between text-xs text-stone-600 font-mono">
+                <span>Nieselregen</span>
+                <span>Landregen</span>
+                <span>Wolkenbruch</span>
+            </div>
+        </div>
+
+        <!-- Content -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-stone-400 text-sm leading-relaxed">
+            <div class="space-y-4">
+                <h3 class="text-white font-bold text-lg">Warum wir den Regen lieben</h3>
+                <p>Für viele ist Regen ein Grund, im Haus zu bleiben. Für uns Gärtner ist er der Herzschlag der Natur. Ohne Regen gibt es kein Wachstum, keine Kühlung und keine Erholung für den Boden.</p>
+                <p>Mit unserem "Regen-Modus" möchten wir dir die beruhigende Wirkung eines Sommerregens näherbringen. Setz dich hin, dreh die Intensität hoch und genieße die Atmosphäre.</p>
+            </div>
+            <div class="space-y-4">
+                <h3 class="text-white font-bold text-lg">Vom Genuss zur Technik</h3>
+                <p>Aber Regen ist nicht nur Atmosphäre. In Zeiten des Klimawandels müssen wir lernen, jeden Tropfen zu nutzen. Hier schließt sich der Kreis zu unserem **Schwammstadt-Prinzip**.</p>
+                <p>Wir bauen Gärten, die das Wasser nicht einfach ableiten, sondern wie ein Schwamm aufsaugen und speichern. So schützen wir vor Überflutung und versorgen die Pflanzen in Trockenzeiten.</p>
+                <button @click="currentPage = 'page-gewerbe'" class="text-emerald-400 hover:text-emerald-300 underline font-semibold transition-colors">
+                    Mehr zum Schwammstadt-Prinzip lesen
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

src/pages/index.astro

@@ -16,6 +16,7 @@ import SubpageGewerbe from '../components/SubpageGewerbe.astro';
 import SubpageContact from '../components/SubpageContact.astro';
 import SubpageImpressum from '../components/SubpageImpressum.astro';
 import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
+import SubpageRain from '../components/SubpageRain.astro';
 import EasterEgg from '../components/EasterEgg.astro';
 ---
 
@@ -41,6 +42,7 @@ import EasterEgg from '../components/EasterEgg.astro';
     <SubpageContact />
     <SubpageImpressum />
     <SubpageDatenschutz />
+    <SubpageRain />
     <EasterEgg />
 
     <!-- CHARTS INIT -->