/* ► SCHRIFT: Thrives Glitch als ThrivesGlitch.ttf in denselben Ordner legen */
@font-face{font-family:"Thrives Glitch";src:url("ThrivesGlitch.ttf") format("truetype");font-display:swap}
[hidden]{display:none!important}
html,body{margin:0;background:#000;color:#fff;font-family:"Space Mono","Courier New",monospace}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
*{box-sizing:border-box}
a{color:inherit}

/* Seite */
.pg{max-width:1180px;margin:0 auto;padding:96px 24px 14vh}
.pg-hero{text-align:center;padding:5vh 0 4vh}
.pg-h{margin:0;font-family:"Thrives Glitch","Rubik Glitch",Impact,sans-serif;font-weight:400;font-size:clamp(2rem,9vw,6rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 0 40px rgba(255,255,255,.18)}
.pg-line{height:2px;background:#fff;width:min(260px,50%);margin:1.8rem auto 0}
.pg-sub{margin:1.6rem 0 2rem;opacity:.65;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem}
.sp-note{opacity:.55;font-size:.78rem;line-height:1.7}
.sp-note.center{text-align:center;max-width:620px;margin:3rem auto 0}
.sp-empty-big{text-align:center;opacity:.6;padding:8vh 0;letter-spacing:.08em}
.sp-empty{opacity:.55;text-align:center;padding:4vh 0}

/* Abschnitts-Überschriften */
.sp-h{display:flex;align-items:baseline;justify-content:space-between;margin:8vh 0 20px}
.sp-h h2{margin:0;font-family:"Rubik Glitch",Impact,sans-serif;font-weight:400;font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.03em;text-transform:uppercase}

/* Buttons */
.sp-btn{display:inline-block;background:#fff;color:#000;border:1px solid #fff;border-radius:999px;padding:.95em 2em;font:700 .74rem "Space Mono","Courier New",monospace;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.sp-btn:hover,.sp-btn:focus-visible{transform:scale(1.04);outline:none}
.sp-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sp-btn.ghost:hover{background:#fff;color:#000}
.sp-btn.full{width:100%;margin-top:6px}
.sp-btn:disabled{opacity:.5;cursor:wait;transform:none}

/* Filter-Chips (wie bei Spotify) */
.sp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.sp-chip{background:#1b1b1b;color:#fff;border:0;border-radius:999px;padding:.7em 1.3em;font:400 .72rem "Space Mono","Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.sp-chip:hover{background:#2c2c2c}
.sp-chip.on{background:#fff;color:#000}

/* Karten */
.sp-card{position:relative;display:block;background:#101010;color:#fff;text-decoration:none;border-radius:10px;padding:14px;transition:background .25s}
.sp-card:hover{background:#1c1c1c}
.sp-cov{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#1a1a1a;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.sp-cov img{display:block;width:100%;height:100%;object-fit:cover}
.sp-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;opacity:.4}
.sp-play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:#fff;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.sp-play::after{content:"";position:absolute;left:17px;top:13px;border-left:15px solid #000;border-top:9px solid transparent;border-bottom:9px solid transparent}
.sp-card:hover .sp-play,.sp-feat:hover .sp-play{opacity:1;transform:none}
.sp-t{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-s{margin-top:6px;font-size:.7rem;opacity:.55;letter-spacing:.1em;text-transform:uppercase}
.sp-shelf{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#333 transparent}
.sp-shelf .sp-card{flex:0 0 180px;scroll-snap-align:start}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}

/* Meistgeklickt */
.sp-feat{display:flex;align-items:center;gap:30px;padding:24px;border-radius:14px;background:linear-gradient(135deg,#1c1c1c,#0a0a0a);color:#fff;text-decoration:none}
.sp-feat .sp-cov{flex:0 0 min(240px,38%);margin:0}
.sp-fi{min-width:0}
.sp-k{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;opacity:.55}
.sp-ft{font-family:"Rubik Glitch",Impact,sans-serif;font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.05;margin:.35em 0 .3em;text-transform:uppercase;overflow-wrap:anywhere}
.sp-feat .sp-btn{margin-top:1.4rem}

/* Top 3 */
.sp-top{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sp-rank{position:relative;display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;background:#101010;color:#fff;text-decoration:none;transition:background .25s}
.sp-rank:hover{background:#1c1c1c}
.sp-n{font-family:"Thrives Glitch","Rubik Glitch",Impact,sans-serif;font-size:3rem;line-height:1;opacity:.9;min-width:.7em;text-align:center}
.sp-rank .sp-cov{flex:0 0 76px;margin:0}
.sp-ri{min-width:0}

/* Modal + Formulare */
.sp-modal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sp-dlg{position:relative;width:min(480px,100%);max-height:92vh;overflow:auto;background:#121212;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.sp-dlg h2{margin:0 0 .4rem;font-family:"Rubik Glitch",Impact,sans-serif;font-weight:400;font-size:1.7rem;text-transform:uppercase}
.sp-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;opacity:.6}
.sp-x:hover{opacity:1;background:rgba(255,255,255,.1)}
label{display:block;margin:1.1rem 0 0;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.sp-in{display:block;width:100%;margin-top:8px;background:#1d1d1d;color:#fff;border:1px solid transparent;border-radius:8px;padding:.9em 1em;font:400 .88rem "Space Mono","Courier New",monospace;letter-spacing:0;text-transform:none}
.sp-in:focus{outline:none;border-color:#fff}
select.sp-in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.4em}
select.sp-in option{background:#1d1d1d;color:#fff}
select.sp-in option:disabled{opacity:.4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sp-msg{margin-top:14px;min-height:1.2em;font-size:.8rem;line-height:1.6}
.sp-msg.ok{border-left:2px solid #fff;padding-left:12px}
.sp-msg.err{border-left:2px dashed rgba(255,255,255,.6);padding-left:12px;opacity:.85}

/* Mix Up */
.mx{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:start;max-width:860px;margin:0 auto}
.mx-slot label{margin-top:16px}
.mx-tile{position:relative;aspect-ratio:1;max-width:240px;margin:0 auto;border-radius:10px;overflow:hidden;background:#161616;display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.mx-tile.ph{opacity:.5}
.mx-tile img{display:block;width:100%;height:100%;object-fit:cover}
.mx-plus{align-self:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-top:-60px}
.mx-foot{grid-column:1/-1;max-width:520px;width:100%;margin:10px auto 0}
.mx-cov{background:#1a1a1a}
.mx-cov img{position:absolute;inset:0}
.mx-cov img.a{clip-path:polygon(0 0,100% 0,0 100%)}
.mx-cov img.b{clip-path:polygon(100% 0,100% 100%,0 100%)}
.mx-cov::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent calc(50% - 1px),#000 calc(50% - 1px),#000 calc(50% + 1px),transparent calc(50% + 1px))}
.mx-links{display:flex;gap:8px;margin-top:12px}
.mx-links a{flex:1;text-align:center;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.55em .4em;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,color .2s}
.mx-links a:hover{background:#fff;color:#000}
#mix-result{max-width:240px;margin:34px auto 0}
#mix-result .sp-card{animation:pop .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* Admin */
.adm-login{max-width:380px;margin:0 auto}
.adm-row{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding:14px;margin-bottom:12px;border-radius:12px;background:#101010}
.adm-row.slim{grid-template-columns:1fr auto}
.adm-cov{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#1a1a1a}
.adm-cov .sp-cov{margin:0;box-shadow:none;border-radius:0;height:100%}
.adm-cov img{width:100%;height:100%;object-fit:cover}
.adm-main{display:grid;gap:8px;min-width:0}
.adm-main .sp-in{margin-top:0}
.adm-meta{font-size:.68rem;letter-spacing:.08em;opacity:.55;text-transform:uppercase}
.adm-act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.adm-act .sp-btn{padding:.7em 1.2em;font-size:.68rem}

@media(max-width:760px){
  .pg{padding:84px 16px 12vh}
  .sp-top{grid-template-columns:1fr}
  .sp-feat{flex-direction:column;align-items:stretch;text-align:left}
  .sp-feat .sp-cov{flex:none;width:70%;margin:0 auto}
  .mx{grid-template-columns:1fr}
  .mx-plus{margin:0 auto}
  .adm-row,.adm-row.slim{grid-template-columns:1fr}
  .adm-cov{display:none}
  .adm-act{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Rechtliche Seiten und Footer */
.legal{max-width:720px;margin:0 auto 10vh;line-height:1.75;font-size:.9rem}
.legal h2{margin:2.2rem 0 .6rem;font-family:"Rubik Glitch",Impact,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.legal p,.legal ul{margin:.4rem 0 1rem;opacity:.85}
.legal ul{padding-left:1.2rem}
.legal code{background:#1d1d1d;padding:.1em .4em;border-radius:4px;font-size:.85em}
.legal a,.sp-legal a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.legal-nav{margin-top:2.5rem}
.sp-legal{text-align:center;padding:5vh 16px 4vh;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.sp-legal a{margin:0 .8em}