From 1493ad908bec9d3c8492bc381ef72f98f731c8ff Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 06:25:40 +0200
Subject: [PATCH] Make rain controls layout more compact with a 3-column grid

---
 src/components/SubpageRain.astro | 36 +++++++++++++++++---------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index cc4af73..38daa62 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -157,26 +157,28 @@ window.rainData = function() {
                 <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': rainOpen }"></i>
             </div>
             
-            <div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6 mt-6 pt-6 border-t border-stone-800">
-                <!-- Intensity -->
-                <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>
-                
-                <!-- Wind -->
-                <div>
-                    <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label>
-                    <input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
-                </div>
+            <div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mt-6 pt-6 border-t border-stone-800">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Intensity -->
+                    <div>
+                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span></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>
+                    
+                    <!-- Wind -->
+                    <div>
+                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Wind: <span x-text="wind" class="text-emerald-400"></span>°</label>
+                        <input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                    </div>
 
-                <!-- Lofi Filter -->
-                <div>
-                    <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label>
-                    <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                    <!-- Lofi Filter -->
+                    <div>
+                        <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Muffigkeit: <span x-text="lofiFilter" class="text-emerald-400"></span></label>
+                        <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                    </div>
                 </div>
                 
-                <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800">
+                <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 mt-4 border-t border-stone-800">
                     <span>Sound läuft automatisch</span>
                     <span class="text-emerald-400">Realtime Web Audio Rain</span>
                 </div>