/* ============================================================
   SidTunez — Radio-Anwendung (Landingpage)
   Studio Teal & Amber. Eigenständig, plakativ.
   ============================================================ */
#radioLanding {
  --ra-bg0:#0E0F12; --ra-bg1:#17191E; --ra-bg2:#23262D; --ra-bg3:#2C2F37;
  --ra-teal:#2FD4C4; --ra-amber:#E9A94A;
  --ra-text:#ECEAE4; --ra-text2:#9A9CA3; --ra-text3:#61646d;
  color: var(--ra-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
#radioLanding h1, #radioLanding h2, #radioLanding h3 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: .03em; }

/* ---------- HERO ---------- */
.ra-hero {
  position: relative;
  padding: 5.5rem 1.5rem 4.5rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(47,212,196,.16), transparent 60%),
    radial-gradient(800px 400px at 85% 20%, rgba(233,169,74,.08), transparent 60%),
    var(--ra-bg0);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ra-hero-inner { max-width: 820px; margin: 0 auto; }
.ra-badge {
  display: inline-block; font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em;
  font-size: .95rem; color: var(--ra-teal); border: 1px solid rgba(47,212,196,.4);
  background: rgba(47,212,196,.08); padding: .3rem 1rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.ra-hero-title { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .98; margin: 0 0 1.2rem; color: #fff; }
.ra-accent { color: var(--ra-teal); }
.ra-hero-sub { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--ra-text2); line-height: 1.6; max-width: 640px; margin: 0 auto 2rem; }
.ra-hero-sub strong { color: var(--ra-text); }
.ra-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.ra-hero-note { margin-top: 1.4rem; font-size: .82rem; color: var(--ra-text3); letter-spacing: .02em; }

/* Buttons */
.ra-btn-play {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--ra-teal); color: #0E0F12; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem; letter-spacing: .05em; padding: .7rem 1.8rem; border-radius: 10px;
  border: none; cursor: pointer; transition: transform .12s, background .15s;
}
.ra-btn-play:hover { background: #3fe0d0; transform: translateY(-2px); }
.ra-btn-ghost {
  display: inline-flex; align-items: center; background: transparent; color: var(--ra-text);
  font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: .05em;
  padding: .7rem 1.6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.ra-btn-ghost:hover { border-color: var(--ra-teal); color: var(--ra-teal); }

/* ---------- DEFINITION ---------- */
.ra-lead { max-width: 820px; margin: 0 auto; padding: 3.5rem 1.5rem 1rem; }
.ra-lead p { font-size: 1.15rem; line-height: 1.75; color: var(--ra-text2); }
.ra-lead strong { color: var(--ra-text); }

/* ---------- Überschriften ---------- */
.ra-h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; text-align: center; margin: 0 0 2rem; }

/* ---------- FEATURE-GRID ---------- */
.ra-features { max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.ra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.ra-card {
  background: var(--ra-bg1); border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
  padding: 1.6rem 1.4rem; transition: transform .15s, border-color .15s, background .15s;
}
.ra-card:hover { transform: translateY(-3px); background: var(--ra-bg2); }
.ra-card-teal:hover { border-color: rgba(47,212,196,.5); }
.ra-card-amber:hover { border-color: rgba(233,169,74,.5); }
.ra-card-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1rem;
}
.ra-card-teal .ra-card-icon { background: rgba(47,212,196,.12); color: var(--ra-teal); }
.ra-card-amber .ra-card-icon { background: rgba(233,169,74,.12); color: var(--ra-amber); }
.ra-card h3 { font-size: 1.5rem; margin: 0 0 .6rem; color: #fff; letter-spacing: .04em; }
.ra-card p { font-size: .95rem; line-height: 1.6; color: var(--ra-text2); margin: 0; }
.ra-card p strong { color: var(--ra-text); }

/* ---------- ANWENDUNGSFÄLLE ---------- */
.ra-usecases { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem; }
.ra-usecases-intro { text-align: center; color: var(--ra-text2); font-size: 1.1rem; margin: -1rem auto 2rem; max-width: 640px; }
.ra-usecase-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.ra-usecase-list li {
  background: var(--ra-bg1); border-left: 3px solid var(--ra-teal); border-radius: 8px;
  padding: 1rem 1.2rem; font-size: .95rem; line-height: 1.55; color: var(--ra-text2);
}
.ra-usecase-list li strong { color: var(--ra-text); }

/* ---------- FAQ ---------- */
.ra-faq { max-width: 820px; margin: 0 auto; padding: 3rem 1.5rem; }
.ra-faq-item {
  background: var(--ra-bg1); border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
  padding: 1.3rem 1.5rem; margin-bottom: 1rem;
}
.ra-faq-item h3 { font-size: 1.4rem; color: var(--ra-teal); margin: 0 0 .5rem; letter-spacing: .04em; }
.ra-faq-item p { font-size: .98rem; line-height: 1.65; color: var(--ra-text2); margin: 0; }

/* ---------- ABSCHLUSS-CTA ---------- */
.ra-cta {
  max-width: 760px; margin: 2rem auto 4rem; padding: 3.5rem 2rem; text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(47,212,196,.14), transparent 65%),
    var(--ra-bg1);
  border: 1px solid rgba(47,212,196,.2); border-radius: 18px;
}
.ra-cta-title { font-size: clamp(2rem, 5vw, 3rem); color: #fff; margin: 0 0 .8rem; }
.ra-cta-sub { color: var(--ra-text2); font-size: 1.1rem; margin: 0 0 2rem; }
.ra-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .ra-hero { padding: 4rem 1.2rem 3.5rem; }
  .ra-hero-cta, .ra-cta-row { flex-direction: column; align-items: stretch; }
  .ra-btn-play, .ra-btn-ghost { justify-content: center; }
}