/* ============================================================
   Ashfallmusic — 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; }
}

/* ---------- ERKLÄRFILM ----------
   Gleiche Bauform wie der Erklärfilm auf der Startseite: ein Rahmen mit
   festem Seitenverhältnis, in dem die Animation als eigene Seite läuft.
   Dadurch bleibt die Radio-Seite schlank — geladen wird erst beim
   Herunterscrollen (loading="lazy" am iframe). */
.ra-video { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem; }
.ra-video-head { text-align: center; margin-bottom: 1.6rem; }
.ra-video-eyebrow {
  color: var(--ra-teal); font-size: .8rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 .6rem;
}
.ra-video-sub { color: var(--ra-text2); font-size: 1rem; margin: -1.2rem auto 0; max-width: 620px; }
.ra-video-card {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--ra-bg3); background: var(--ra-bg1);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.ra-video-card iframe { display: block; width: 100%; aspect-ratio: 960/630; border: 0; }

/* ---------- Erklaer-Grafiken (Ansagen) ----------
   Grundsatz: Beschriftungen stehen als HTML NEBEN/UNTER der Grafik, nicht
   im SVG. Text in einer breiten SVG-Grafik schrumpft auf dem Handy sonst
   auf unter 11px und ist nicht mehr lesbar. */
.ra-figure {
  margin: 1.6rem 0 0; padding: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ra-bg3); background: var(--ra-bg1);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.ra-figure-pad { padding: 1.4rem 1.4rem 0; }
.ra-figure img { display: block; width: 100%; height: auto; }
.ra-figure figcaption {
  padding: .85rem 1.2rem; font-size: .92rem; line-height: 1.5;
  color: var(--ra-text2); border-top: 1px solid var(--ra-bg3);
  background: var(--ra-bg0);
}
.ra-figure-pad figcaption { margin: 1.2rem -1.4rem 0; }

/* Wellenform mit aufgesetzter Ansage-Pille */
.ra-duck { position: relative; }
.ra-duck-pill {
  position: absolute; left: 52.8%; top: 50%; transform: translate(-50%,-50%);
  background: var(--ra-amber); color: #17191E; font-weight: 600;
  font-size: clamp(.8rem, 2.2vw, 1.05rem); white-space: nowrap;
  padding: .45em 1.1em; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ra-duck-legend {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .7rem 1rem 0; font-size: clamp(.72rem, 2vw, .95rem); line-height: 1.35;
}
.ra-duck-legend span { flex: 1 1 0; }
.ra-duck-legend span:nth-child(2) { text-align: center; }
.ra-duck-legend span:last-child { text-align: right; }
.ra-lg-teal  { color: var(--ra-teal); }
.ra-lg-amber { color: var(--ra-amber); }

/* Takt-Vergleich: reines HTML/CSS, damit alles mitskaliert */
.ra-takt-head { margin: 0 0 1.1rem; font-size: .95rem; color: var(--ra-text2); }
.ra-takt-row { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }
.ra-takt-label { flex: 0 0 190px; }
.ra-takt-label strong { display: block; font-size: 1.05rem; color: var(--ra-text); }
.ra-takt-label span { display: block; font-size: .82rem; color: var(--ra-text3); margin-top: .1rem; }
.ra-takt-line {
  position: relative; flex: 1 1 auto; height: 4px;
  background: var(--ra-bg3); border-radius: 2px;
}
.ra-takt-dot {
  position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--ra-teal);
  box-shadow: 0 0 0 5px rgba(47,212,196,.18);
}
.ra-takt-dot-amber { background: var(--ra-amber); box-shadow: 0 0 0 5px rgba(233,169,74,.2); }
.ra-takt-scale {
  display: flex; justify-content: space-between;
  margin-left: calc(190px + 1.2rem); font-size: .8rem; color: var(--ra-text3);
}

@media (max-width: 640px) {
  .ra-figure { border-radius: 12px; margin-top: 1.2rem; }
  .ra-figure-pad { padding: 1.1rem 1rem 0; }
  .ra-figure figcaption { padding: .7rem .9rem; font-size: .86rem; }
  .ra-figure-pad figcaption { margin: 1rem -1rem 0; }
  /* Auf schmalen Displays Beschriftung ueber die Zeitleiste stellen */
  .ra-takt-row { flex-direction: column; align-items: stretch; gap: .5rem; margin-bottom: 1.5rem; }
  .ra-takt-label { flex: none; }
  .ra-takt-scale { margin-left: 0; }
  .ra-duck-legend { font-size: .7rem; padding: .6rem .7rem 0; }
}
@media (max-width: 640px) {
  .ra-video { padding: 2rem 1rem; }
  .ra-video-card { border-radius: 14px; }
}