@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root{
  /* ===== Navy / Marine Base ===== */
  --bg1:#050A14;     /* deep navy */
  --bg2:#071A2E;     /* marine */
  --bg3:#0B2C46;     /* ocean */
  --bg4:#0A1B2A;     /* shadow tone */

  /* ===== Fancy Accents ===== */
  --accent:#4CC9F0;       /* icy cyan */
  --accent-2:#A78BFA;     /* soft violet glow */
  --accent-warm:#FBBF24;  /* subtle gold highlight (sparsam!) */

  /* ===== Live ===== */
  --live-red:#FF3B3B;

  /* ===== Glass ===== */
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.12);

  /* ===== Text ===== */
  --text-main:#EAF2FF;
  --text-dim: rgba(234,242,255,.75);

  /* ===== Radius / Shadow ===== */
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-lg: 0 18px 60px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(76,201,240,.12), 0 0 40px rgba(76,201,240,.12);
}

/* Subtiler Hintergrund: Gradient + “Glow”-Spots */
body{
  min-height:100vh;
  padding-bottom:50px;
  color:var(--text-main);
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:
    radial-gradient(900px 600px at 10% 10%, rgba(76,201,240,.16), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(167,139,250,.12), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(251,191,36,.10), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  background-attachment: fixed;
}

/* Typography */
h1,h2,h3{
  font-weight:700;
  letter-spacing:-0.6px;
}
.text-accent{ color:var(--accent); }

/* ===== Glass Card (fancy) ===== */
.glass-card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.05)
  );
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Shimmer-Highlight oben */
.glass-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 240px at 30% 0%, rgba(76,201,240,.20), transparent 60%),
    radial-gradient(900px 220px at 70% 0%, rgba(167,139,250,.14), transparent 55%);
  opacity:.9;
  pointer-events:none;
  mask: linear-gradient(#000, transparent 55%);
}

/* Hover: leicht anheben + Glow */
.glass-card:hover{
  transform: translateY(-4px);
  border-color: rgba(76,201,240,.22);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* ===== LIVE Modus ===== */
.glass-card.live-on-air{
  border: 2px solid rgba(255,59,59,.9);
  box-shadow: var(--shadow-lg), 0 0 42px rgba(255,59,59,.22);
}

.live-badge{
  background: linear-gradient(180deg, #FF4D4D, #FF2E2E);
  color:white;
  padding:6px 14px;
  border-radius: 10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow: 0 10px 25px rgba(255,59,59,.20);
  animation:pulse 2s infinite;
}
.live-badge::before{
  content:"●";
  font-size:12px;
  filter: drop-shadow(0 0 6px rgba(255,59,59,.8));
}

@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.04); opacity:.85; }
  100%{ transform:scale(1); opacity:1; }
}

/* ===== Song Title Bar (edler) ===== */
.song-ticker{
  background: rgba(0,0,0,.35);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Countdown */
.countdown-timer{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(76,201,240,.20);
}

/* ===== Modal (Navy) ===== */
.modal-content{
  background: linear-gradient(180deg, rgba(11,44,70,.95), rgba(7,26,46,.92));
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.btn-close{ filter: invert(1); opacity:.85; }
.btn-close:hover{ opacity:1; }

/* ===== Hero / Buttons (modern) ===== */
.hero{
  padding: 60px 20px 20px;
  text-align: center;
}
.hero-btn{
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  color: #06121f;
  background: linear-gradient(135deg, var(--accent), rgba(167,139,250,.9));
  box-shadow: 0 12px 30px rgba(76,201,240,.18);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.hero-btn:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 16px 40px rgba(76,201,240,.22);
}
.hero-btn:active{
  transform: translateY(0) scale(.99);
}

/* WhatsApp bleibt */
.btn-whatsapp{
  background-color:#25D366 !important;
  color:white !important;
}

/* ===== Station Cards ===== */
.station-btn{
  text-decoration:none;
  color:var(--text-main);
  display:block;
  padding:10px;
}
.station-card{
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  border-radius: 18px;
}
.station-card:hover{
  transform: translateY(-5px);
  background: rgba(255,255,255,.10);
  border-color: rgba(76,201,240,.18);
}

/* Footer */
footer a{
  color: var(--accent);
  text-decoration:none;
  opacity:.75;
}
footer a:hover{
  opacity:1;
}

/* Kleine Quality-of-Life: nicer selection */
::selection{
  background: rgba(76,201,240,.30);
  color: var(--text-main);
}

/* Optional: Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}