/* ============================================================
   stxrm808 — SECTION FLOW
   Content-Sektionen greifen als gestapelte Panels ineinander:
   jede schiebt sich (runder Oberrand + Schatten + warme Kante)
   über die vorige. Demos → Playlist → Catalog → Kits → AURA.
   ============================================================ */

.home-playlist,
.home-gateway,
.legacy-home-kits,
.home-aura,
.footer {
  position: relative;
  margin-top: -68px;                  /* deutlichere Überlappung */
  border-top: none;                   /* flow.css lädt nach style.css, gleiche Spezifität → kein !important nötig (WR-03) */
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  box-shadow: 0 -42px 80px -22px rgba(0, 0, 0, 0.92);
}

/* sichtbare, leuchtende Oberkante des Panels.
   Playlist nutzt ::after, weil style.css auf .home-playlist::before
   bereits die maskierte Grid-Textur legt — das background-Shorthand hier
   würde sie sonst zurücksetzen (CR-01). Die anderen Panels haben kein
   Basis-::before und bleiben darauf. */
.home-playlist::after,
.home-gateway::before,
.legacy-home-kits::before,
.home-aura::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  background: linear-gradient(90deg, transparent 6%, rgba(255, 120, 60, 0.55) 50%, transparent 94%);
  pointer-events: none;
  z-index: 3;
}

/* gestapelt: spätere Sektion liegt über der vorigen */
.home-playlist     { z-index: 4; }
.home-gateway      { z-index: 5; }
.legacy-home-kits  { z-index: 6; }
.home-aura         { z-index: 7; }
/* Footer schließt den Stapel ab: liegt über allen Panels, greift
   die letzte Sektion und beendet die Seite als bewusster Premium-Block.
   Überschreibt das style.css `.footer { z-index: 2 }` (flow.css lädt
   danach, gleiche Spezifität). */
.footer            { z-index: 8; }

/* "This is what fire sounds like." lag in der Playlist-Überlappung -> hochziehen, damit's frei steht */
.featured-producer__slogan {
  bottom: 120px;
}

/* Producer-Demo-Karten waren zu groß -> kompakter */
#demos .fp-card__artist,
#demos .fp-card__player { padding: 26px 30px; }
#demos .fp-card__avatar { width: 58px; height: 58px; }
#demos .fp-card__artist-name { font-size: clamp(22px, 2.6vw, 32px); }