/* Danceradio NRW – Studio-Look für ProRadio */
:root{--drn-bg:#080b16;--drn-panel:#10162c;--drn-panel2:#171e3a;--drn-line:#252d52;--drn-text:#f2eefb;--drn-muted:#ffffff;
  --drn-magenta:#ff7a1a;--drn-cyan:#8b5cff;--drn-onair:#ff3b30;--drn-amber:#ffb347;
  --drn-display:"Bahnschrift","DIN Condensed","Roboto Condensed","Arial Narrow",Impact,sans-serif}

/* ---- globaler Studio-Hintergrund (ProRadio-Flächen transparent schalten) ---- */
html:has(body.drn-studio-on){background:var(--drn-bg)}
body.drn-studio-on,
body.drn-studio-on .proradio-global,
body.drn-studio-on .proradio-master,
body.drn-studio-on .proradio-pagecontent,
body.drn-studio-on .proradio-bg{background:transparent!important;color:#c9c3de;
  --proradio-colors-paper:rgba(16,22,44,.88);--proradio-colors-ink:#c9c3de}
body.drn-studio-on h1,body.drn-studio-on h2,body.drn-studio-on h3,body.drn-studio-on h4{color:var(--drn-text)}
body.drn-studio-on a{color:var(--drn-cyan)}

.drn-studio-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(60vw 45vh at 8% 0%,rgba(255,122,26,.28),transparent 70%),
  radial-gradient(55vw 45vh at 95% 5%,rgba(139,92,255,.22),transparent 70%),
  radial-gradient(80vw 40vh at 50% 110%,rgba(255,200,87,.10),transparent 70%),
  linear-gradient(180deg,#0d1226,#060813)}
.drn-studio-bg::before{content:"";position:absolute;inset:0;opacity:.55;background:
  linear-gradient(135deg,rgba(255,255,255,.07) 25%,transparent 25%) 0 0/46px 46px,
  linear-gradient(225deg,rgba(255,255,255,.07) 25%,transparent 25%) 0 0/46px 46px,
  linear-gradient(315deg,rgba(0,0,0,.55) 25%,transparent 25%) 0 0/46px 46px,
  linear-gradient(45deg,rgba(0,0,0,.55) 25%,transparent 25%) 0 0/46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,transparent);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,transparent)}
.drn-studio-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.6))}
.drn-tube{position:absolute;left:-5%;right:-5%;height:3px;border-radius:3px;transform:rotate(-1.2deg)}
.drn-t1{top:22vh;background:var(--drn-magenta);box-shadow:0 0 12px 2px var(--drn-magenta),0 0 60px 10px rgba(255,122,26,.45)}
.drn-t2{top:calc(22vh + 14px);background:var(--drn-cyan);box-shadow:0 0 12px 2px var(--drn-cyan),0 0 60px 10px rgba(139,92,255,.35)}

/* ---- Layout ---- */
.drn-wrap{width:min(1180px,100% - 2rem);margin:2rem auto 3rem}
.drn-studio{display:block}
.drn-h{font:800 clamp(1.5rem,3vw,2.1rem)/1.1 var(--drn-display);letter-spacing:.03em;margin:3rem 0 1.1rem;text-transform:uppercase}
.drn-h::after{content:"";display:block;width:64px;height:4px;margin-top:.5rem;border-radius:4px;background:linear-gradient(90deg,var(--drn-magenta),var(--drn-cyan))}
.drn-content{margin-top:3rem}

/* ---- Deck ---- */
.drn-deck{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--drn-line);background:var(--drn-panel);isolation:isolate;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.drn-deck-bg{position:absolute;inset:-40px;z-index:-2;background:#171e3a center/cover no-repeat;filter:blur(38px) saturate(1.2);transform:scale(1.15)}
.drn-deck::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(5,7,16,.94),rgba(5,7,16,.82) 55%,rgba(5,7,16,.9))}
.drn-deck-inner{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:2rem;padding:clamp(1.2rem,3vw,2.2rem);align-items:center}
.drn-cover{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#1b2344;box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1)}
.drn-cover img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.drn-ph{position:absolute;inset:0;display:grid;place-items:center;font:800 2.2rem var(--drn-display);color:var(--drn-line);letter-spacing:.1em}
.drn-topline{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;color:var(--drn-muted);font-size:.9rem}
.drn-onair{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .8rem;border:2px solid var(--drn-onair);border-radius:6px;
  font:800 1rem/1 var(--drn-display);letter-spacing:.18em;color:#ffd9d6;background:rgba(255,59,48,.12);
  box-shadow:0 0 14px rgba(255,59,48,.55),inset 0 0 12px rgba(255,59,48,.25);text-shadow:0 0 10px var(--drn-onair)}
.drn-onair i{width:.65rem;height:.65rem;border-radius:50%;background:var(--drn-onair);box-shadow:0 0 10px 3px var(--drn-onair)}
body.drn-playing .drn-onair i{animation:drn-blink 1.2s steps(2,start) infinite}
@keyframes drn-blink{50%{opacity:.25}}
.drn-artist{margin:.8rem 0 0;font-weight:700;font-size:clamp(1.1rem,2.2vw,1.6rem);line-height:1.2;color:var(--drn-cyan)}
.drn-title{margin:.15rem 0 0;font:800 clamp(2rem,5vw,4rem)/1.02 var(--drn-display);color:var(--drn-text);text-wrap:balance;text-transform:none;letter-spacing:.01em}
.drn-album{margin:.4rem 0 0;color:var(--drn-muted)}
.drn-progress{height:6px;border-radius:6px;background:rgba(255,255,255,.12);margin:1.4rem 0 .35rem;overflow:hidden}
.drn-progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--drn-magenta),var(--drn-cyan));transition:width 1s linear}
.drn-times{display:flex;justify-content:space-between;font-size:.8rem;color:var(--drn-muted);font-variant-numeric:tabular-nums}
.drn-controls{display:flex;align-items:center;gap:1.2rem;margin-top:1.3rem;flex-wrap:wrap}
.drn-play{width:76px;height:76px;padding:0;border-radius:50%;border:0;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#ffa35c,var(--drn-magenta) 55%,#b84a00);
  box-shadow:0 0 0 4px rgba(255,122,26,.25),0 10px 30px rgba(255,122,26,.5);transition:transform .15s}
.drn-play:hover{transform:scale(1.05)}
.drn-play svg{width:32px;height:32px;fill:currentColor}
.drn-play .drn-i-pause{display:none}
body.drn-playing .drn-play .drn-i-play{display:none}
body.drn-playing .drn-play .drn-i-pause{display:block}
.drn-fader{display:flex;align-items:center;gap:.7rem;color:var(--drn-muted);font-size:.9rem;margin:0}
.drn-fader input{-webkit-appearance:none;appearance:none;width:170px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.14);cursor:pointer}
.drn-fader input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:34px;border-radius:4px;background:linear-gradient(#e9e4f7,#9a93b5);border:1px solid #000}
.drn-fader input::-moz-range-thumb{width:18px;height:34px;border-radius:4px;background:#cfc8e6;border:1px solid #000}
.drn-meters{display:flex;align-items:flex-end;gap:3px;height:44px;margin-left:auto}
.drn-meters span{width:6px;height:100%;border-radius:2px;transform-origin:bottom;transform:scaleY(.08);
  background:linear-gradient(0deg,var(--drn-cyan) 0 55%,var(--drn-amber) 55% 80%,var(--drn-onair) 80%)}
body.drn-playing .drn-meters span{animation:drn-vu var(--d,.7s) ease-in-out var(--l,0s) infinite alternate}
@keyframes drn-vu{from{transform:scaleY(.1)}to{transform:scaleY(var(--h,.9))}}

/* ---- Stream-Buttons ---- */
.drn-streams{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.drn-btn{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.2rem;text-decoration:none;color:var(--drn-text)!important;
  background:linear-gradient(180deg,var(--drn-panel2),var(--drn-panel));border:1px solid var(--drn-line);border-radius:12px;
  box-shadow:0 6px 0 #07050c,0 12px 24px rgba(0,0,0,.4);transition:transform .12s,border-color .12s,box-shadow .12s}
.drn-btn strong{font:800 1.3rem/1.1 var(--drn-display);letter-spacing:.05em;color:var(--drn-text)}
.drn-btn small{color:var(--drn-muted);word-break:break-all}
.drn-btn:hover{border-color:var(--drn-cyan);transform:translateY(2px);box-shadow:0 4px 0 #07050c,0 0 24px rgba(139,92,255,.25)}

/* ---- Tracks ---- */
.drn-tracks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.8rem}
.drn-track{display:flex;align-items:center;gap:.9rem;padding:.65rem;margin:0;border-radius:12px;background:rgba(16,22,44,.82);border:1px solid var(--drn-line);backdrop-filter:blur(6px)}
.drn-tc{width:64px;height:64px;flex:none;border-radius:8px;overflow:hidden;background:#1b2344}
.drn-tc img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.drn-tt{min-width:0;flex:1}
.drn-ta{font-weight:700;color:var(--drn-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drn-tn{color:var(--drn-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drn-track time{color:var(--drn-cyan);font:700 .95rem var(--drn-display);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.drn-empty{grid-column:1/-1;color:var(--drn-muted);padding:1rem;border:1px dashed var(--drn-line);border-radius:12px;list-style:none}

/* Platz für den ProRadio-Footer-Player */
body.drn-studio-on .drn-wrap{padding-bottom:90px}

@media (max-width:800px){
  .drn-deck-inner{grid-template-columns:1fr}
  .drn-cover{max-width:320px;margin-inline:auto;width:100%}
  .drn-meters{display:none}
  .drn-tracks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.drn-studio *,.drn-studio *::before,.drn-studio *::after,.drn-studio-bg *{animation:none!important;transition:none!important}}


/* ---- Lesbarkeit: reinweiße Schrift, dunkle Lesetafeln ---- */
body.drn-studio-on .drn-studio,
body.drn-studio-on .drn-studio *:not(.drn-onair):not(.drn-onair *):not(.drn-play):not(.drn-play *){color:#fff!important}
.drn-studio .drn-artist,.drn-studio .drn-album,.drn-studio .drn-status,.drn-studio .drn-times,.drn-studio .drn-fader,
.drn-studio .drn-ta,.drn-studio .drn-tn,.drn-studio .drn-track time,.drn-studio .drn-btn *{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.55)}
.drn-studio .drn-title{text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 28px rgba(0,0,0,.7)}
.drn-play,.drn-play *{color:#080b16!important}
.drn-onair{color:#ffd9d6!important}
.drn-deck::before{background:linear-gradient(100deg,rgba(4,6,14,.96),rgba(4,6,14,.9) 55%,rgba(4,6,14,.94))}
.drn-panel{margin-top:2rem;background:rgba(5,7,16,.82);border:1px solid var(--drn-line);border-radius:16px;padding:clamp(1rem,2.5vw,1.6rem);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.drn-panel .drn-h{margin-top:0}
.drn-track{background:rgba(16,22,44,.95)}
.drn-tn,.drn-album,.drn-times{font-size:1rem}
.drn-btn small{font-size:.9rem}


/* ---- Header-Slogan ---- */
.drn-slogan{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2rem);padding:.9rem 1rem;margin:0;
  background:linear-gradient(90deg,transparent,rgba(5,7,16,.78) 20%,rgba(5,7,16,.78) 80%,transparent)}
.drn-slogan__text{margin:0;text-align:center;font:800 clamp(1.15rem,3.2vw,2rem)/1.1 var(--drn-display);letter-spacing:.14em;text-transform:uppercase;
  color:#fff!important;text-shadow:0 0 6px rgba(255,255,255,.35),0 0 22px rgba(255,122,26,.75),0 0 44px rgba(139,92,255,.45)}
.drn-slogan__line{flex:1 1 40px;max-width:220px;height:3px;border-radius:3px;background:var(--drn-magenta);
  box-shadow:0 0 10px 2px var(--drn-magenta),0 0 30px 6px rgba(255,122,26,.4)}
.drn-slogan__line:last-child{background:var(--drn-cyan);box-shadow:0 0 10px 2px var(--drn-cyan),0 0 30px 6px rgba(139,92,255,.35)}
@media (max-width:560px){.drn-slogan__line{display:none}.drn-slogan__text{letter-spacing:.08em}}

/* ---- DanceMixRadio-Look: weiße UI-Elemente, bunter Slogan ---- */
.drn-progress b{background:#fff}
.drn-meters span{background:#fff}
.drn-play{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 10px 30px rgba(255,255,255,.25)}
.drn-h::after{background:#fff}
.drn-btn:hover{border-color:#fff;box-shadow:0 4px 0 #07050c,0 0 24px rgba(255,255,255,.2)}
.drn-slogan__text{
  background:linear-gradient(90deg,#ff3d6e,#ff7a1a,#ffd23f,#3dff8b,#19e3ff,#8b5cff,#ff3dd1,#ff3d6e) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.18));animation:drn-logo-shift 12s linear infinite}
@keyframes drn-logo-shift{to{background-position:300% 0}}