fix: remove candles, deduplicate dates, add ambient music fallback

- Remove CandleSection from page; dates now appear only in hero - Footer stripped to just quote + impressum/admin links (no name/dates) - Musik nav link always visible - MusicPlayer: Web Audio API ambient mode when no tracks uploaded - A-minor pad (55/110/130/164/220 Hz sine oscillators) - Feedback delay for spaciousness, per-note LFO swells, 6s fade-in - "Stille Begleitung" UI with waveform bars - When tracks are uploaded: full track list + cycle mode as before - Floating mini-player works for both modes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-16 02:19:28 +01:00
parent 4aeb08cb57
commit 1ab5809a82
2 changed files with 297 additions and 246 deletions
@@ -5,7 +5,6 @@ import PhotoSlideshow from '@/components/PhotoSlideshow'
 import PhotoGallery from '@/components/PhotoGallery'
 import MemorySection from '@/components/MemorySection'
 import WriteSection from '@/components/WriteSection'
-import CandleSection from '@/components/CandleSection'
 import MusicPlayer from '@/components/MusicPlayer'
 import VideoGallery from '@/components/VideoGallery'

@@ -36,39 +35,25 @@ export default async function HomePage() {
      <nav className="sticky top-0 z-20 bg-cream/80 backdrop-blur-sm border-b border-warm-border">
        <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-center gap-6 sm:gap-10">
          {photos.length > 0 && (
-            <a
-              href="#bilder"
-              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
-            >
+            <a href="#bilder" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
              Bilder
            </a>
          )}
-          <a
-            href="#erinnerungen"
-            className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
-          >
+          <a href="#erinnerungen" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
            Erinnerungen
          </a>
          {videos.length > 0 && (
-            <a
-              href="#videos"
-              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
-            >
+            <a href="#videos" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
              Videos
            </a>
          )}
-          {music.length > 0 && (
-            <a
-              href="#musik"
-              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
-            >
+          <a href="#musik" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
            Musik
          </a>
-          )}
        </div>
      </nav>

-      {/* Photo section */}
+      {/* Photos */}
      {photos.length > 0 && (
        <section id="bilder" className="py-16 sm:py-20">
          <div className="max-w-6xl mx-auto px-4">
@@ -82,14 +67,13 @@ export default async function HomePage() {
                <div className="h-px w-16 bg-warm-gold/40" />
              </div>
            </div>
-
            {photos.length > 1 && <PhotoSlideshow photos={photos} />}
            <PhotoGallery photos={photos} />
          </div>
        </section>
      )}

-      {/* Write section – public */}
+      {/* Write */}
      <WriteSection />

      {/* Memories */}
@@ -100,49 +84,33 @@ export default async function HomePage() {
      {/* Videos */}
      <VideoGallery videos={videos} />

-      {/* Candle section */}
-      <CandleSection />
-
-      {/* Music player */}
+      {/* Music – always rendered (ambient fallback when no tracks) */}
      <MusicPlayer tracks={music} />

      {/* Footer */}
-      <footer className="py-16 text-center border-t border-warm-border bg-amber-50/30">
+      <footer className="py-12 text-center border-t border-warm-border bg-amber-50/30">
        <div className="max-w-lg mx-auto px-4">
-          <p className="font-cormorant italic text-3xl text-warm-gold mb-3">
-            In liebevoller Erinnerung
-          </p>
-          <p className="font-lora text-warm-brown-light text-sm tracking-wider">
-            Maria Malejka
-          </p>
-          <p className="font-lora text-warm-brown-light/60 text-xs mt-1 tracking-widest">
-            29. November 1944 — 10. Februar 2026
-          </p>
-
-          {/* Ornament */}
-          <div className="flex items-center justify-center gap-3 mt-6 mb-6">
-            <div className="h-px w-12 bg-warm-gold/20" />
-            <span className="text-warm-gold/40 text-sm">✦</span>
-            <div className="h-px w-12 bg-warm-gold/20" />
-          </div>
-
          <p className="font-cormorant italic text-warm-brown-light/60 text-lg">
            „Du bist nicht fort, nur ein Schritt voraus."
          </p>

-          {/* Footer links */}
-          <div className="mt-10 flex items-center justify-center gap-6">
+          <div className="flex items-center justify-center gap-3 mt-5">
+            <div className="h-px w-8 bg-warm-gold/20" />
+            <span className="text-warm-gold/30 text-xs">✦</span>
+            <div className="h-px w-8 bg-warm-gold/20" />
+          </div>
+
+          <div className="mt-6 flex items-center justify-center gap-5">
            <a
              href="/impressum"
-              className="text-warm-brown-light/40 hover:text-warm-brown-light/70 text-xs font-lora tracking-wider transition-colors duration-200"
+              className="text-warm-brown-light/35 hover:text-warm-brown-light/65 text-xs font-lora tracking-wider transition-colors duration-200"
            >
              Impressum
            </a>
            <span className="text-warm-border/40 text-xs">·</span>
-            {/* Hidden admin link */}
            <a
              href="/admin"
-              className="text-warm-border/30 hover:text-warm-border/60 text-xs transition-colors"
+              className="text-warm-border/25 hover:text-warm-border/50 text-xs transition-colors"
              title="Verwaltung"
            >
              ·
@@ -1,6 +1,6 @@
 'use client'

-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
  Play,
@@ -9,11 +9,12 @@ import {
  SkipBack,
  Volume2,
  VolumeX,
-  Music,
  X,
 } from 'lucide-react'
 import type { MediaItem } from '@/lib/types'

+// ─── helpers ────────────────────────────────────────────────────────────────
+
 function formatTime(s: number) {
  if (!s || isNaN(s) || !isFinite(s)) return '--:--'
  const m = Math.floor(s / 60)
@@ -33,12 +34,7 @@ function WaveformBars({ playing }: { playing: boolean }) {
              ? { height: ['30%', `${h * 100}%`, '45%', `${h * 75}%`, '30%'] }
              : { height: '30%' }
          }
-          transition={{
-            duration: 0.75 + i * 0.13,
-            repeat: Infinity,
-            ease: 'easeInOut',
-            delay: i * 0.11,
-          }}
+          transition={{ duration: 0.75 + i * 0.13, repeat: Infinity, ease: 'easeInOut', delay: i * 0.11 }}
          style={{ height: '30%' }}
        />
      ))}
@@ -46,15 +42,99 @@ function WaveformBars({ playing }: { playing: boolean }) {
  )
 }

-function TrackNumber({ index, isCurrent, playing }: { index: number; isCurrent: boolean; playing: boolean }) {
-  if (isCurrent && playing) return <WaveformBars playing={playing} />
-  return (
-    <span className={`font-lora text-xs tabular-nums ${isCurrent ? 'text-amber-400/60' : 'text-amber-100/20'}`}>
-      {String(index + 1).padStart(2, '0')}
-    </span>
-  )
+// ─── ambient audio via Web Audio API ────────────────────────────────────────
+// A-minor chord: A1 55Hz · A2 110Hz · C3 130.81Hz · E3 164.81Hz · A3 220Hz
+
+function useAmbient() {
+  const ctxRef = useRef<AudioContext | null>(null)
+  const stopFnsRef = useRef<(() => void)[]>([])
+  const [playing, setPlaying] = useState(false)
+
+  const start = useCallback(() => {
+    if (ctxRef.current) return
+    const ctx = new AudioContext()
+    ctxRef.current = ctx
+
+    const master = ctx.createGain()
+    master.gain.setValueAtTime(0, ctx.currentTime)
+    master.gain.linearRampToValueAtTime(0.11, ctx.currentTime + 6)
+    master.connect(ctx.destination)
+
+    // Feedback delay for spaciousness
+    const delay = ctx.createDelay(2.0)
+    delay.delayTime.value = 1.4
+    const fbGain = ctx.createGain()
+    fbGain.gain.value = 0.22
+    delay.connect(fbGain)
+    fbGain.connect(delay)
+    fbGain.connect(master)
+
+    const notes = [
+      { freq: 55,     gain: 0.55 },
+      { freq: 110,    gain: 0.45 },
+      { freq: 130.81, gain: 0.38 },
+      { freq: 164.81, gain: 0.48 },
+      { freq: 220,    gain: 0.30 },
+    ]
+
+    notes.forEach(({ freq, gain }, i) => {
+      const osc = ctx.createOscillator()
+      osc.type = 'sine'
+      osc.frequency.value = freq + (i % 2 === 0 ? 0.15 : -0.15) // micro-detune
+      const g = ctx.createGain()
+      g.gain.value = gain
+
+      // Slow per-note swell LFO
+      const lfo = ctx.createOscillator()
+      lfo.type = 'sine'
+      lfo.frequency.value = 0.06 + i * 0.018
+      const lfoG = ctx.createGain()
+      lfoG.gain.value = gain * 0.38
+      lfo.connect(lfoG)
+      lfoG.connect(g.gain)
+      lfo.start()
+
+      osc.connect(g)
+      g.connect(master)
+      g.connect(delay)
+      osc.start()
+
+      stopFnsRef.current.push(() => {
+        try { osc.stop(); lfo.stop() } catch { /* already stopped */ }
+      })
+    })
+
+    setPlaying(true)
+  }, [])
+
+  const stop = useCallback(() => {
+    const ctx = ctxRef.current
+    if (!ctx) return
+    const master = ctx.destination
+    // Fade out gracefully
+    const g = ctx.createGain()
+    g.gain.setValueAtTime(1, ctx.currentTime)
+    g.gain.linearRampToValueAtTime(0, ctx.currentTime + 1.5)
+    g.connect(master)
+    setTimeout(() => {
+      stopFnsRef.current.forEach((fn) => fn())
+      stopFnsRef.current = []
+      ctx.close()
+      ctxRef.current = null
+      setPlaying(false)
+    }, 1600)
+  }, [])
+
+  const toggle = useCallback(() => {
+    if (playing) stop()
+    else start()
+  }, [playing, start, stop])
+
+  return { playing, toggle, start, stop }
 }

+// ─── component ──────────────────────────────────────────────────────────────
+
 export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
  const [current, setCurrent] = useState(0)
  const [playing, setPlaying] = useState(false)
@@ -65,7 +145,9 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
  const [elapsed, setElapsed] = useState(0)
  const [miniVisible, setMiniVisible] = useState(false)
  const audioRef = useRef<HTMLAudioElement>(null)
+  const ambient = useAmbient()

+  const hasTrack = tracks.length > 0
  const track = tracks[current] ?? null

  const trackName = (i: number) =>
@@ -74,40 +156,31 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
    `Titel ${i + 1}`

  useEffect(() => {
-    const audio = audioRef.current
-    if (!audio) return
-    audio.volume = muted ? 0 : volume
+    const a = audioRef.current
+    if (!a) return
+    a.volume = muted ? 0 : volume
  }, [volume, muted])

  useEffect(() => {
-    const audio = audioRef.current
-    if (!audio || !track) return
-    audio.src = `/api/files/${track.filename}`
-    audio.volume = muted ? 0 : volume
-    setDuration(0)
-    setElapsed(0)
-    setProgress(0)
-    if (playing) audio.play().catch(() => setPlaying(false))
+    const a = audioRef.current
+    if (!a || !track) return
+    a.src = `/api/files/${track.filename}`
+    a.volume = muted ? 0 : volume
+    setDuration(0); setElapsed(0); setProgress(0)
+    if (playing) a.play().catch(() => setPlaying(false))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [current])

  const togglePlay = () => {
-    const audio = audioRef.current
-    if (!audio) return
-    if (playing) {
-      audio.pause()
-    } else {
-      audio.play().catch(() => setPlaying(false))
-    }
+    const a = audioRef.current
+    if (!a) return
+    if (playing) a.pause()
+    else a.play().catch(() => setPlaying(false))
  }

  const playTrack = (i: number) => {
-    if (i === current) {
-      togglePlay()
-    } else {
-      setCurrent(i)
-      setPlaying(true)
-    }
+    if (i === current) togglePlay()
+    else { setCurrent(i); setPlaying(true) }
    setMiniVisible(true)
  }

@@ -115,40 +188,39 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
  const next = () => setCurrent((c) => (c + 1) % tracks.length)

  const handleTimeUpdate = () => {
-    const audio = audioRef.current
-    if (!audio || !audio.duration) return
-    setProgress((audio.currentTime / audio.duration) * 100)
-    setElapsed(audio.currentTime)
-  }
-
-  const handleLoadedMetadata = () => {
-    const audio = audioRef.current
-    if (audio) setDuration(audio.duration)
+    const a = audioRef.current
+    if (!a || !a.duration) return
+    setProgress((a.currentTime / a.duration) * 100)
+    setElapsed(a.currentTime)
  }

  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const audio = audioRef.current
-    if (!audio || !audio.duration) return
+    const a = audioRef.current
+    if (!a || !a.duration) return
    const pct = parseFloat(e.target.value)
-    audio.currentTime = (pct / 100) * audio.duration
+    a.currentTime = (pct / 100) * a.duration
    setProgress(pct)
  }

-  if (tracks.length === 0 || !track) return null
+  // Decide what the mini-player shows
+  const miniLabel = hasTrack ? trackName(current) : 'Stille Begleitung'
+  const miniPlaying = hasTrack ? playing : ambient.playing

  return (
    <>
+      {hasTrack && (
        <audio
          ref={audioRef}
-        src={`/api/files/${track.filename}`}
+          src={`/api/files/${track!.filename}`}
          onEnded={next}
          onTimeUpdate={handleTimeUpdate}
-        onLoadedMetadata={handleLoadedMetadata}
+          onLoadedMetadata={() => { const a = audioRef.current; if (a) setDuration(a.duration) }}
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
        />
+      )}

-      {/* ── Inline section ── */}
+      {/* ── Inline section ─────────────────────────────────────── */}
      <section
        id="musik"
        className="py-20 px-4"
@@ -174,7 +246,52 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
            </div>
          </motion.div>

-          {/* Track list */}
+          {/* ── No uploads: ambient player ── */}
+          {!hasTrack && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 1 }}
+              className="text-center"
+            >
+              <p className="font-lora text-amber-100/30 text-sm mb-8 leading-relaxed max-w-xs mx-auto">
+                Ein sanftes Klangteppich begleitet dich,
+                während du durch die Erinnerungen scrollst.
+              </p>
+
+              <div className="flex flex-col items-center gap-5">
+                <motion.button
+                  onClick={() => { ambient.toggle(); setMiniVisible(true) }}
+                  whileTap={{ scale: 0.94 }}
+                  className="w-16 h-16 rounded-full bg-amber-400/10 hover:bg-amber-400/18 border border-amber-400/20 hover:border-amber-400/40 text-amber-300/70 flex items-center justify-center transition-all duration-200"
+                  style={{ boxShadow: ambient.playing ? '0 0 28px rgba(196,160,74,0.14)' : undefined }}
+                >
+                  {ambient.playing
+                    ? <Pause size={22} />
+                    : <Play size={22} className="ml-1" />
+                  }
+                </motion.button>
+
+                {ambient.playing && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="flex items-end gap-1"
+                  >
+                    <WaveformBars playing={ambient.playing} />
+                  </motion.div>
+                )}
+
+                <p className="font-cormorant italic text-amber-200/35 text-lg">
+                  Stille Begleitung
+                </p>
+              </div>
+            </motion.div>
+          )}
+
+          {/* ── With uploads: track list + controls ── */}
+          {hasTrack && (
+            <>
              <div className="space-y-0.5 mb-8">
                {tracks.map((t, i) => (
                  <motion.button
@@ -191,111 +308,81 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
                    }`}
                  >
                    <div className="w-7 flex-shrink-0 flex items-center justify-center">
-                  <TrackNumber index={i} isCurrent={i === current} playing={playing} />
+                      {i === current && playing
+                        ? <WaveformBars playing={playing} />
+                        : <span className={`font-lora text-xs tabular-nums ${i === current ? 'text-amber-400/60' : 'text-amber-100/20'}`}>
+                            {String(i + 1).padStart(2, '0')}
+                          </span>
+                      }
                    </div>
-
-                <span
-                  className={`font-cormorant italic text-lg flex-1 min-w-0 truncate transition-colors ${
-                    i === current
-                      ? 'text-amber-200/80'
-                      : 'text-amber-100/35 group-hover:text-amber-100/60'
-                  }`}
-                >
+                    <span className={`font-cormorant italic text-lg flex-1 min-w-0 truncate transition-colors ${
+                      i === current ? 'text-amber-200/80' : 'text-amber-100/35 group-hover:text-amber-100/60'
+                    }`}>
                      {trackName(i)}
                    </span>
-
                    <span className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-                  {i === current && playing ? (
-                    <Pause size={13} className="text-amber-400/50" />
-                  ) : (
-                    <Play size={13} className="text-amber-400/40" />
-                  )}
+                      {i === current && playing
+                        ? <Pause size={13} className="text-amber-400/50" />
+                        : <Play size={13} className="text-amber-400/40" />
+                      }
                    </span>
                  </motion.button>
                ))}
              </div>

-          {/* Player controls */}
+              {/* Controls */}
              <div className="border-t border-amber-400/10 pt-6">
                <p className="text-center font-cormorant italic text-amber-200/50 text-xl mb-5 truncate px-4">
                  {trackName(current)}
                </p>

-            {/* Progress */}
                <div className="flex items-center gap-3 mb-6">
-              <span className="font-lora text-xs text-amber-100/20 w-9 text-right tabular-nums">
-                {formatTime(elapsed)}
-              </span>
-              <div className="flex-1 relative group/slider">
+                  <span className="font-lora text-xs text-amber-100/20 w-9 text-right tabular-nums">{formatTime(elapsed)}</span>
                  <input
-                  type="range"
-                  min="0"
-                  max="100"
-                  step="0.1"
-                  value={progress}
+                    type="range" min="0" max="100" step="0.1" value={progress}
                    onChange={handleSeek}
-                  className="w-full cursor-pointer accent-amber-500"
+                    className="flex-1 cursor-pointer accent-amber-500"
                    style={{ height: '2px' }}
                  />
-              </div>
-              <span className="font-lora text-xs text-amber-100/20 w-9 tabular-nums">
-                {formatTime(duration)}
-              </span>
+                  <span className="font-lora text-xs text-amber-100/20 w-9 tabular-nums">{formatTime(duration)}</span>
                </div>

-            {/* Controls row */}
                <div className="flex items-center justify-center gap-8 mb-5">
-              <button
-                onClick={prev}
-                className="text-amber-400/30 hover:text-amber-400/70 transition-colors"
-              >
+                  <button onClick={prev} className="text-amber-400/30 hover:text-amber-400/70 transition-colors">
                    <SkipBack size={20} />
                  </button>
-
                  <motion.button
                    onClick={() => { togglePlay(); setMiniVisible(true) }}
                    whileTap={{ scale: 0.93 }}
-                className="w-14 h-14 rounded-full bg-amber-400/10 hover:bg-amber-400/18 border border-amber-400/20 hover:border-amber-400/40 text-amber-300/80 flex items-center justify-center transition-all duration-200 shadow-lg"
+                    className="w-14 h-14 rounded-full bg-amber-400/10 hover:bg-amber-400/18 border border-amber-400/20 hover:border-amber-400/40 text-amber-300/80 flex items-center justify-center transition-all duration-200"
                    style={{ boxShadow: playing ? '0 0 24px rgba(196,160,74,0.15)' : undefined }}
                  >
                    {playing ? <Pause size={22} /> : <Play size={22} className="ml-0.5" />}
                  </motion.button>
-
-              <button
-                onClick={next}
-                className="text-amber-400/30 hover:text-amber-400/70 transition-colors"
-              >
+                  <button onClick={next} className="text-amber-400/30 hover:text-amber-400/70 transition-colors">
                    <SkipForward size={20} />
                  </button>
                </div>

-            {/* Volume */}
                <div className="flex items-center justify-center gap-3">
-              <button
-                onClick={() => setMuted((m) => !m)}
-                className="text-amber-600/40 hover:text-amber-400/60 transition-colors"
-              >
+                  <button onClick={() => setMuted((m) => !m)} className="text-amber-600/40 hover:text-amber-400/60 transition-colors">
                    {muted ? <VolumeX size={15} /> : <Volume2 size={15} />}
                  </button>
                  <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.01"
+                    type="range" min="0" max="1" step="0.01"
                    value={muted ? 0 : volume}
-                onChange={(e) => {
-                  setVolume(parseFloat(e.target.value))
-                  setMuted(false)
-                }}
+                    onChange={(e) => { setVolume(parseFloat(e.target.value)); setMuted(false) }}
                    className="w-28 accent-amber-600 cursor-pointer"
                    style={{ height: '2px' }}
                  />
                </div>
              </div>
+            </>
+          )}
        </div>
      </section>

-      {/* ── Floating mini-player ── */}
+      {/* ── Floating mini-player ─────────────────────────────────── */}
      <AnimatePresence>
        {miniVisible && (
          <motion.div
@@ -305,44 +392,40 @@ export default function MusicPlayer({ tracks }: { tracks: MediaItem[] }) {
            transition={{ duration: 0.25 }}
            className="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-stone-950/96 backdrop-blur-md px-4 py-3 rounded-2xl border border-amber-900/25 shadow-2xl"
          >
-            {/* Icon + pulse */}
            <div className="relative flex-shrink-0">
-              <div
-                className={`w-8 h-8 rounded-full bg-amber-800/40 flex items-center justify-center ${
-                  playing ? 'ring-1 ring-amber-400/30' : ''
-                }`}
-              >
-                <Music size={14} className="text-amber-300/80" />
+              <div className={`w-8 h-8 rounded-full bg-amber-800/40 flex items-center justify-center ${miniPlaying ? 'ring-1 ring-amber-400/30' : ''}`}>
+                {miniPlaying
+                  ? <WaveformBars playing />
+                  : <Play size={12} className="text-amber-300/70 ml-0.5" />
+                }
              </div>
-              {playing && (
+              {miniPlaying && (
                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
              )}
            </div>

-            {/* Track info */}
            <button
-              onClick={() =>
-                document.getElementById('musik')?.scrollIntoView({ behavior: 'smooth' })
-              }
+              onClick={() => document.getElementById('musik')?.scrollIntoView({ behavior: 'smooth' })}
              className="max-w-[130px] text-left"
            >
              <p className="text-amber-200/70 font-cormorant italic text-sm truncate leading-tight">
-                {trackName(current)}
+                {miniLabel}
              </p>
              <p className="text-amber-600/40 text-xs font-lora mt-0.5">
-                {playing ? `${formatTime(elapsed)} / ${formatTime(duration)}` : 'pausiert'}
+                {hasTrack
+                  ? (playing ? `${formatTime(elapsed)} / ${formatTime(duration)}` : 'pausiert')
+                  : (ambient.playing ? 'läuft …' : 'pausiert')
+                }
              </p>
            </button>

-            {/* Play/pause */}
            <button
-              onClick={togglePlay}
+              onClick={hasTrack ? togglePlay : () => { ambient.toggle() }}
              className="text-amber-400/60 hover:text-amber-300 transition-colors"
            >
-              {playing ? <Pause size={16} /> : <Play size={16} />}
+              {miniPlaying ? <Pause size={16} /> : <Play size={16} />}
            </button>

-            {/* Close */}
            <button
              onClick={() => setMiniVisible(false)}
              className="text-amber-800/60 hover:text-amber-500/80 transition-colors ml-1"