/* ═══════════════════════════════════
   RadioVelbert User Portal
   Header – identisch zur Hauptseite
   aber im Dark-Theme
═══════════════════════════════════ */

:root{
  --blue:#06b6d4;
  --blue2:#0891b2;
  --accent:#0891b2;
  --bg:#060b14;
  --glass:rgba(13,19,32,.92);
  --text:#e2e8f0;
  --muted:#64748b;
  --page-bg:#060b14;--page-text:#e2e8f0;--page-muted:#64748b;
  --card-bg:rgba(17,24,39,.9);--card-bg-solid:#111827;
  --card-border:#1a2235;--card-text:#e2e8f0;
  --input-bg:#0d1320;--input-border:#1e293b;--input-text:#e2e8f0;
  --bar-bg:rgba(255,255,255,.04);
  --gradient-card:linear-gradient(135deg,#111827,#0d1320);
  --border-solid:#1e293b;--hover-bg:rgba(255,255,255,.03);
  --canvas-bg:#111827;--badge-bg:rgba(255,255,255,.05);
  --coin-bar-bg:linear-gradient(135deg,#111827,#0d1320);
  --coin-bar-border:rgba(250,204,21,.2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{text-decoration:none;color:inherit}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg)!important;
  color:var(--text)!important;
}
h1,h2,h3{color:#f1f5f9}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
header.desktop-header{
  position:sticky;
  top:0;
  z-index:9999;
}

/* ═══════════════════════════
   HEADER CARD – schwebend
═══════════════════════════ */
.header-card{
  max-width:1400px;
  margin:22px auto 0;
  background:var(--glass);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-radius:34px;
  box-shadow:
    0 40px 120px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:margin .32s ease, border-radius .32s ease;
}

/* ═══════════════════════════
   NAV
═══════════════════════════ */
.header-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:22px 30px;
  transition:padding .32s ease;
}

.logo{
  height:40px;
  transition:height .32s ease;
}

.nav{
  display:flex;
  justify-content:center;
  gap:34px;
}

.nav a{
  position:relative;
  padding:10px 8px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#94a3b8;
  transition:color .25s;
}

.nav a::after{
  content:'';
  position:absolute;
  left:50%;bottom:-6px;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  border-radius:99px;
  transform:translateX(-50%);
  transition:.32s ease;
}

.nav a:hover{color:#fff}
.nav a:hover::after{width:100%}

/* ═══════════════════════════
   LISTEN BUTTON
═══════════════════════════ */
.header-actions{display:flex;align-items:center}

.listen-btn{
  position:relative;
  overflow:hidden;
  padding:16px 34px;
  border-radius:999px;
  font-size:.7rem;
  letter-spacing:.22em;
  font-weight:900;
  text-transform:uppercase;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  box-shadow:0 18px 40px rgba(6,182,212,.35);
  transition:all .32s ease;
  animation:listenPulse 3.4s ease-in-out infinite;
}

@keyframes listenPulse{
  0%,100%{box-shadow:0 18px 40px rgba(6,182,212,.35);transform:scale(1)}
  50%{box-shadow:0 26px 60px rgba(6,182,212,.55);transform:scale(1.045)}
}

.listen-btn::after{
  content:"";
  position:absolute;
  top:-60%;left:-140%;
  width:70%;height:220%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  animation:listenShine 4.8s ease-in-out infinite;
}
@keyframes listenShine{0%{left:-140%}65%{left:-140%}100%{left:160%}}

.listen-btn:hover{transform:translateY(-2px)}
.listen-btn:active{transform:scale(.93);box-shadow:0 10px 24px rgba(6,182,212,.5)}

.listen-btn i{margin-right:8px;font-size:.55rem}

/* ═══════════════════════════
   ZWEITE ZEILE
═══════════════════════════ */
.header-row2{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 30px 12px;
  border-top:1px solid rgba(255,255,255,.06);
}

.r2-socials{display:flex;gap:6px}
.r2-social{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
  color:#b0b8c4;background:rgba(255,255,255,.06);
  transition:all .35s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.r2-social::before{
  content:"";position:absolute;inset:0;border-radius:10px;
  opacity:0;transition:opacity .35s;
}
.r2-social:hover{color:#fff;transform:translateY(-3px) scale(1.08)}
.r2-social:hover::before{opacity:1}
.r2-social i{position:relative;z-index:1}

.r2-ig::before{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.r2-ig:hover{box-shadow:0 6px 20px rgba(225,48,108,.35)}
.r2-fb::before{background:#1877f2}
.r2-fb:hover{box-shadow:0 6px 20px rgba(24,119,242,.35)}
.r2-dc::before{background:#5865f2}
.r2-dc:hover{box-shadow:0 6px 20px rgba(88,101,242,.35)}

.r2-sep{width:1px;height:18px;background:rgba(255,255,255,.08);flex-shrink:0}

/* Wetter */
.weather-pill{
  display:flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:all .3s;
}
.weather-pill:hover{background:rgba(255,255,255,.08)}
.weather-slider-track{display:flex}
.weather-slide{display:flex;align-items:center;gap:6px}
.weather-slide:not(.active){display:none}
.weather-city{font-size:.65rem;font-weight:700;color:var(--muted)}
.weather-divider{width:1px;height:12px;background:rgba(255,255,255,.08)}
.weather-icon{font-size:.85rem}
.weather-temp{font-size:.75rem;font-weight:800;color:#f1f5f9}

/* News */
.r2-news{
  flex:1;display:flex;align-items:center;gap:12px;
  min-width:0;overflow:hidden;
}
.r2-news-badge{
  font-size:.55rem;font-weight:800;letter-spacing:.1em;
  padding:4px 12px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;flex-shrink:0;
  position:relative;overflow:hidden;
}
.r2-news-badge::after{
  content:'';position:absolute;top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:badgeShine 3s ease-in-out infinite;
}
@keyframes badgeShine{0%,80%{left:-100%}100%{left:200%}}

.r2-news-slider{flex:1;min-width:0;overflow:hidden}
.r2-news-item{
  font-size:.8rem;font-weight:600;color:#94a3b8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;
}
.r2-news-item:not(.active){display:none}
.r2-news-item:hover{color:#fff}

/* ═══════════════════════════
   NOW BAR – im Card drin
═══════════════════════════ */
.header-now{
  display:grid;
  grid-template-columns:1.6fr 1.2fr;
  gap:30px;
  padding:22px 30px 28px;
  border-top:1px solid rgba(255,255,255,.06);
  transition:padding .32s ease;
}

.now-col{min-width:0}
.now-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}

.label{
  font-size:.52rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);line-height:1;
}

.artist{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.15;
  color:#fff;
}

.title{
  font-size:.82rem;
  color:var(--muted);
  margin-top:3px;
}

/* EQ */
.eq{
  display:flex;gap:6px;
  height:22px;align-items:flex-end;
}
.eq span{
  width:5px;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  border-radius:4px;
  animation:eqWave 1.2s ease-in-out infinite;
  transform-origin:bottom;
}
.eq span:nth-child(1){animation-delay:0s}
.eq span:nth-child(2){animation-delay:.15s}
.eq span:nth-child(3){animation-delay:.3s}
.eq span:nth-child(4){animation-delay:.45s}
@keyframes eqWave{
  0%{height:30%}25%{height:80%}50%{height:45%}75%{height:100%}100%{height:35%}
}

/* Song Progress */
.song-progress-wrap{margin-top:10px}
.song-progress-bar{
  width:200px;height:3px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.song-progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  transition:width .5s linear;
}
.song-progress-times{
  display:flex;justify-content:space-between;
  font-size:.55rem;color:#3e4a63;margin-top:3px;width:200px;
  font-variant-numeric:tabular-nums;
}

/* Show Column */
.now-show-col{
  display:flex;align-items:center;gap:16px;
}

.now-mod{
  width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:3px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:all .35s;
}
.now-mod img{width:100%;height:100%;object-fit:cover}
.now-mod:hover{transform:scale(1.06);border-color:rgba(255,255,255,.15)}
.now-mod.live{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(6,182,212,.15),0 8px 24px rgba(0,0,0,.3);
  animation:modGlow 3s ease-in-out infinite;
}
@keyframes modGlow{
  0%,100%{box-shadow:0 0 0 4px rgba(6,182,212,.15),0 8px 24px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 6px rgba(6,182,212,.1),0 8px 32px rgba(6,182,212,.1)}
}

.show-title{font-size:1rem;font-weight:800;color:#f1f5f9;margin-top:2px}
.show-meta{font-size:.72rem;color:var(--muted);margin-top:3px}
.show-mod{
  font-size:.68rem;color:var(--muted);margin-top:4px;
  display:flex;align-items:center;gap:5px;
}
.show-mod i{color:var(--blue);font-size:.55rem}

/* ═══════════════════════════
   SHRINK STATE
═══════════════════════════ */
header.desktop-header.shrink .header-card{
  margin-top:8px;
  border-radius:22px;
}
header.desktop-header.shrink .header-nav{padding:12px 22px}
header.desktop-header.shrink .logo{height:28px}
header.desktop-header.shrink .listen-btn{padding:10px 20px;font-size:.6rem}
header.desktop-header.shrink .header-now{padding:14px 22px 18px}
header.desktop-header.shrink .artist{font-size:1.05rem}
header.desktop-header.shrink .eq{height:18px}
header.desktop-header.shrink .eq span{width:4px}
header.desktop-header.shrink .now-mod{width:48px;height:48px}
header.desktop-header.shrink .header-row2{padding:6px 22px 8px}

/* ═══════════════════════════
   BURGER
═══════════════════════════ */
.burger{
  display:none;position:fixed;top:32px;right:28px;z-index:10001;
  background:rgba(13,19,32,.7);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;width:44px;height:44px;cursor:pointer;padding:0;
}
.burger span{
  position:absolute;left:11px;right:11px;height:2px;
  background:#fff;border-radius:2px;transition:.3s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){transform:rotate(45deg);top:21px}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:rotate(-45deg);top:21px}

.nav-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:.3s;z-index:10000;
}
body.menu-open .nav-overlay{opacity:1;pointer-events:auto}

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media(max-width:900px){
  .burger{display:block}
  .header-card{margin:12px 12px 0;border-radius:22px}
  header.desktop-header.shrink .header-card{margin-top:6px;border-radius:16px}
  .burger{top:22px;right:20px}

  .header-nav{padding:16px 20px}
  .listen-btn{display:none}

  .nav{
    position:fixed;top:0;right:0;height:100dvh;width:100%;max-width:340px;
    background:rgba(13,19,32,.98);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:flex-start;gap:0;
    padding:90px 24px 40px;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.18,1);
    z-index:10001;
    border-left:1px solid rgba(255,255,255,.05);
  }
  body.menu-open .nav{transform:translateX(0)}
  body.menu-open{overflow:hidden}

  .nav a{
    font-size:1.1rem;font-weight:700;color:#94a3b8;
    padding:16px 0;border-bottom:1px solid rgba(255,255,255,.04);
    text-transform:none;letter-spacing:0;
  }
  .nav a:hover{color:#fff}
  .nav a::after{display:none}

  .nav::after{
    content:'▶  LIVE HÖREN';
    display:flex;align-items:center;justify-content:center;
    margin-top:24px;padding:16px;border-radius:14px;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  }

  .header-row2{padding:6px 20px 8px!important;gap:8px}
  .r2-socials{display:none}
  .r2-sep:first-of-type{display:none}

  .header-now{
    grid-template-columns:1fr;gap:16px;
    padding:16px 20px 20px;
  }
  .now-show-col{padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
  .song-progress-wrap{display:none}
  .now-mod{width:48px;height:48px}
}

@media(max-width:500px){
  .header-card{margin:8px 8px 0;border-radius:18px}
  .header-nav{padding:14px 16px}
  .header-row2{padding:4px 16px 6px!important}
  .header-now{padding:12px 16px 16px}
  .artist{font-size:1.15rem}
  .now-mod{width:42px;height:42px}
  .show-title{font-size:.88rem}
}