:root { color-scheme: dark; }
body { background:#000; position:relative; }

/* Textur + globale Lichtflecken */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url('https://www.transparenttextures.com/patterns/asfalt-light.png');opacity:.05}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.38;background:
  radial-gradient(520px 320px at 12% 18%, rgba(255,46,166,.10), transparent 60%),
  radial-gradient(420px 260px at 78% 14%, rgba(120,140,255,.09), transparent 60%),
  radial-gradient(360px 220px at 85% 88%, rgba(255,46,166,.07), transparent 60%),
  radial-gradient(400px 240px at 18% 80%, rgba(120,140,255,.06), transparent 60%)}

.has-aura{position:relative}
.has-aura::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:
  radial-gradient(220px 150px at 12% 28%, rgba(255,46,166,.08), transparent 65%),
  radial-gradient(230px 150px at 88% 18%, rgba(120,140,255,.07), transparent 65%),
  radial-gradient(220px 150px at 85% 82%, rgba(255,46,166,.06), transparent 65%),
  radial-gradient(230px 150px at 18% 78%, rgba(120,140,255,.05), transparent 65%)}

/* Header */
.glass{background:rgba(12,14,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.10);transition:background .25s,border-color .25s,box-shadow .25s}
.glass.scrolled{background:rgba(12,14,18,.88);border-bottom-color:rgba(255,255,255,.18);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.nav-link{padding:.45rem .8rem;border-radius:.55rem;transition:all .25s}
.nav-link:hover{background:rgba(255,255,255,.10);box-shadow:0 0 12px rgba(255,46,166,.35);color:#fff}

/* Player */
.range{-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.25);border-radius:999px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#ff2ea6;border:2px solid #fff;margin-top:-5px}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#ff2ea6;border:2px solid #fff}
.panel{position:fixed;left:0;right:0;top:64px;transform:translateY(-120%);transition:transform .35s;z-index:40;pointer-events:none}
.panel.open{transform:translateY(0);pointer-events:auto}
.minibar{position:fixed;left:0;right:0;top:64px;transform:translateY(-120%);transition:transform .3s,opacity .2s;opacity:0;z-index:35;pointer-events:none}
.minibar.show{transform:translateY(0);opacity:1;pointer-events:auto}
.eq>span{display:inline-block;width:2px;height:10px;border-radius:2px;background:#ff2ea6;margin:0 1px;animation:beat 1.1s infinite ease-in-out}
.eq>span:nth-child(2){animation-delay:.1s}.eq>span:nth-child(3){animation-delay:.2s}.eq>span:nth-child(4){animation-delay:.3s}.eq>span:nth-child(5){animation-delay:.4s}
@keyframes beat{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}

/* FOLLOW */
.follow-divider{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;font-family:Oswald,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.35em;color:#fff}
.follow-divider .line{width:min(96px,20vw);height:1px;background:rgba(255,255,255,.35)}
.follow-divider .label{color:rgba(255,255,255,.95);font-size:.95rem}

/* Section-Titel */
.section-title{display:flex;align-items:center;justify-content:flex-start;font-family:Oswald,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.35em;font-size:1rem;color:#fff}
.section-title .line{display:none}.soft-sep{display:none}

/* Socials */
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:.6rem;transition:transform .12s,box-shadow .2s}
.social-icon img{width:28px;height:28px;opacity:.95}
.social-icon:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--brand,transparent),0 0 12px color-mix(in srgb, var(--brand,#fff) 55%, transparent)}

/* Plattform-Pills */
.platform-btn{--brand:#888;color:#fff;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .95rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:transform .12s,border-color .2s,background .2s,box-shadow .2s}
.platform-btn .icon-duo{position:relative;width:18px;height:18px}
.platform-btn .icon-duo img{position:absolute;inset:0;width:18px;height:18px;transition:opacity .18s}
.platform-btn .gray{opacity:1}.platform-btn .color{opacity:0}
.platform-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:var(--brand);box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent),0 0 16px color-mix(in srgb, var(--brand) 35%, transparent)}
.platform-btn:hover .gray{opacity:0}.platform-btn:hover .color{opacity:1}

:focus-visible{outline:2px solid #ff2ea6;outline-offset:2px}
section{scroll-margin-top:80px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Offcanvas */
.offcanvas{position:fixed;inset:0 30% 0 0;max-width:320px;background:rgba(12,14,18,.96);backdrop-filter:blur(10px);transform:translateX(-105%);transition:transform .28s ease;z-index:60;border-right:1px solid rgba(255,255,255,.12)}
.offcanvas.open{transform:translateX(0)}
.oc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.oc-backdrop.show{opacity:1;pointer-events:auto}

/* Cards: Hover-Infos */
.card-cover{position:relative;}
.card-cover .hover-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.45));opacity:0;transition:opacity .2s;}
.card-cover:hover .hover-info{opacity:1;}