/* ================= Musik-Player ================= */
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta.song{background:var(--grad);border-color:transparent;box-shadow:0 10px 34px rgba(255,92,168,.4)}
.cta.song .note{display:inline-block;font-size:1.2rem;animation:note 1.8s ease-in-out infinite}
@keyframes note{50%{transform:translateY(-3px) rotate(-12deg)}}

/* Musik wirkt auf die ganze Seite */
html.music .glow{filter:brightness(calc(1 + var(--bass,0)*.9))}
html.music .hero-title em{filter:drop-shadow(0 0 calc(30px + var(--bass,0)*70px) rgba(255,92,168,.65))}
html.music .aurora{opacity:calc(.6 + var(--bass,0)*.35)}
html.music .progress{box-shadow:0 0 calc(var(--bass,0)*26px) var(--a2)}

.pl{position:fixed;left:50%;bottom:16px;z-index:150;transform:translate(-50%,140%);transition:transform .7s var(--ease);width:max-content;max-width:calc(100vw - 92px)}
.pl.show{transform:translate(-50%,0)}
.pl-mini{--p:0deg;position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:99px;
  background:rgba(14,15,28,.72);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 calc(10px + var(--bass,0)*34px) rgba(255,92,168,calc(.18 + var(--bass,0)*.4))}
.pl.pending .pl-mini::after{content:"";position:absolute;inset:-5px;border-radius:99px;border:2px solid var(--a2);opacity:0;animation:ping 2.4s ease-out infinite;pointer-events:none}
.pl.started .pl-mini::after{display:none}
@keyframes ping{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.14)}}
.pm-disc{position:relative;width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle,transparent 58%,rgba(0,0,0,.35) 60%),conic-gradient(from 0deg,#7c5cff,#ff5ca8,#ffb454,#38d9f5,#7c5cff);animation:spin 6s linear infinite;animation-play-state:paused}
.pl.playing .pm-disc{animation-play-state:running}
.pm-disc::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#fff var(--p),transparent 0);-webkit-mask:radial-gradient(circle,transparent 25px,#000 26px);mask:radial-gradient(circle,transparent 25px,#000 26px);opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.disc-label{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#0b0c18;color:#fff;font-size:.6rem;font-weight:800;letter-spacing:-.02em}
.disc-label.big{width:34%;height:34%;font-size:clamp(.9rem,3.2vw,1.5rem);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.pm-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;cursor:pointer}
.pm-text b{font-size:.92rem;white-space:nowrap}
.pm-text span{font-size:.74rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-eq{display:flex;align-items:flex-end;gap:3px;height:24px;width:34px;flex:none}
.pm-eq i{flex:1;height:100%;border-radius:3px;background:var(--grad);transform:scaleY(.15);transform-origin:50% 100%}
.pm-play{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;color:#0b0c18;transition:transform .25s var(--ease),box-shadow .25s;box-shadow:0 6px 20px rgba(255,255,255,.25)}
.pm-play:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(255,255,255,.4)}
.pm-play svg{width:22px;height:22px}
.pm-open{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none;transition:.25s}
.pm-open:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
@media (max-width:640px){.pm-eq{display:none}.pm-text b{font-size:.85rem}.pl{bottom:12px;left:12px;transform:translate(0,140%);max-width:calc(100vw - 80px)}.pl.show{transform:none}}

/* Großes Fenster */
.pl-sheet{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .38s;overflow:hidden}
.pl-sheet.on{opacity:1}
.pl-sheet[hidden]{display:none}
.ps-back{position:absolute;inset:0;background:rgba(4,5,12,.78);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.ps-aur{position:absolute;inset:-15%;filter:blur(80px);opacity:calc(.55 + var(--bass,0)*.45);pointer-events:none}
.ps-aur i{position:absolute;border-radius:50%;animation:drift 18s ease-in-out infinite alternate}
.ps-aur i:nth-child(1){width:55vmax;height:55vmax;left:-10%;top:-15%;background:radial-gradient(circle,#5b3bff,transparent 65%)}
.ps-aur i:nth-child(2){width:48vmax;height:48vmax;right:-12%;top:5%;background:radial-gradient(circle,#ff3d8e,transparent 65%);animation-delay:-6s}
.ps-aur i:nth-child(3){width:42vmax;height:42vmax;left:25%;bottom:-25%;background:radial-gradient(circle,#ff9a3c,transparent 65%);animation-delay:-11s}
.ps-card{position:relative;width:min(560px,100%);max-height:calc(100svh - 24px);overflow:auto;padding:26px clamp(18px,4vw,34px) 28px;border-radius:32px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 calc(20px + var(--bass,0)*60px) rgba(255,92,168,calc(.15 + var(--bass,0)*.3));transform:translateY(30px) scale(.96);transition:transform .5s var(--ease);scrollbar-width:none}
.pl-sheet.on .ps-card{transform:none}
.ps-close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);transition:.25s;z-index:2}
.ps-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
.ps-viz{position:relative;width:min(78vw,400px,36svh);aspect-ratio:1;margin:6px auto 4px}
.ps-viz canvas{position:absolute;inset:0;width:100%;height:100%}
.ps-disc{--s:1;position:absolute;left:50%;top:50%;width:59%;aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--s))}
.vinyl{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;animation:spin 9s linear infinite;animation-play-state:paused;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),
  conic-gradient(from 20deg,#1a1033,#3a1659 20%,#6a1b55 38%,#1a1033 52%,#4a1a66 70%,#7a2a4a 86%,#1a1033);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.08)}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.18) 24%,transparent 30% 68%,rgba(255,255,255,.14) 74%,transparent 80%)}
.vinyl .disc-label{background:var(--grad);color:#fff;position:relative;box-shadow:0 0 0 4px rgba(10,10,20,.6)}
html.music .vinyl{animation-play-state:running}
.ps-kicker{margin-top:4px;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.ps-title{margin-top:4px;font-size:clamp(1.6rem,5vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.ps-artist{color:#cfd2e8;font-weight:600;margin-bottom:18px}
.ps-seek{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums}
.ps-seek>span{width:38px;flex:none}
.wv{position:relative;flex:1;height:54px;cursor:pointer;touch-action:none}
.wv canvas{width:100%;height:100%;display:block}
.wv-tip{position:absolute;bottom:100%;transform:translate(-50%,-4px);padding:3px 8px;border-radius:8px;background:#fff;color:#0b0c18;font-size:.72rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s}
.wv-tip.on{opacity:1}
.ps-ctrl{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,18px);margin-top:20px;flex-wrap:wrap}
.pc{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line);transition:transform .25s var(--ease),background .25s,box-shadow .25s;flex:none}
.pc:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.pc.sm{width:40px;height:40px}
.pc.on{background:var(--grad);border-color:transparent;box-shadow:0 6px 20px rgba(255,92,168,.45)}
.pc.main{width:72px;height:72px;background:#fff;color:#0b0c18;border:0;box-shadow:0 10px 40px rgba(255,255,255,.28)}
.pc.main:hover{transform:scale(1.07);box-shadow:0 14px 50px rgba(255,255,255,.45);background:#fff}
.pc.main svg{width:30px;height:30px}
.vol{display:flex;align-items:center;gap:8px}
#psVol{-webkit-appearance:none;appearance:none;width:90px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);outline-offset:6px}
#psVol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,92,168,.8);cursor:pointer}
#psVol::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,92,168,.8);cursor:pointer}
@media (max-width:480px){#psVol{width:64px}.ps-ctrl{gap:8px}}
@media (prefers-reduced-motion:reduce){.pm-disc,.vinyl{animation:none!important}}