Replace Web Audio drone with YouTube Lofi Hip Hop player

src/components/SubpageRain.astro

@@ -36,56 +36,14 @@
             </div>
 
             <!-- Music Control -->
-            <div class="pt-4 border-t border-stone-800 flex justify-between items-center" x-data="{ 
+            <div class="pt-4 border-t border-stone-800 space-y-4">
-                playing: false,
-                audioCtx: null,
-                osc1: null,
-                osc2: null,
-                gain: null,
-                toggle() {
-                    if (!this.audioCtx) {
-                        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-                        this.gain = this.audioCtx.createGain();
-                        this.gain.gain.setValueAtTime(0, this.audioCtx.currentTime);
-                        
-                        this.osc1 = this.audioCtx.createOscillator();
-                        this.osc1.type = 'sine';
-                        this.osc1.frequency.setValueAtTime(100, this.audioCtx.currentTime);
-                        
-                        this.osc2 = this.audioCtx.createOscillator();
-                        this.osc2.type = 'sine';
-                        this.osc2.frequency.setValueAtTime(100.5, this.audioCtx.currentTime);
-                        
-                        let filter = this.audioCtx.createBiquadFilter();
-                        filter.type = 'lowpass';
-                        filter.frequency.setValueAtTime(400, this.audioCtx.currentTime);
-                        
-                        this.osc1.connect(filter);
-                        this.osc2.connect(filter);
-                        filter.connect(this.gain);
-                        this.gain.connect(this.audioCtx.destination);
-                        
-                        this.osc1.start();
-                        this.osc2.start();
-                    }
-                    
-                    if (this.playing) {
-                        this.gain.gain.linearRampToValueAtTime(0, this.audioCtx.currentTime + 0.5);
-                        setTimeout(() => { this.playing = false; }, 500);
-                    } else {
-                        this.gain.gain.linearRampToValueAtTime(0.05, this.audioCtx.currentTime + 0.5);
-                        this.playing = true;
-                    }
-                }
-            }">
                 <div>
                     <span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Hintergrund-Vibe</span>
-                    <span class="text-xs text-stone-400">Smooth Lo-Fi Drone (Web Audio)</span>
+                    <span class="text-xs text-stone-400">Lofi Hip Hop Groove (YouTube Stream)</span>
+                </div>
+                <div class="rounded-lg overflow-hidden border border-stone-800">
+                    <iframe width="100%" height="80" src="https://www.youtube.com/embed/jfKfPfyJRdk" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                 </div>
-                <button @click="toggle()" class="text-white text-xs font-mono flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-emerald-500/50 transition-colors">
-                    <i class="fa-solid" :class="playing ? 'fa-pause text-emerald-400' : 'fa-play text-emerald-400'"></i>
-                    <span x-text="playing ? 'Pausieren' : 'Abspielen'"></span>
-                </button>
             </div>
         </div>