/* Bühne — Autostapler.

   Genau ein Panel steht vorne, die übrigen warten darüber in einer Reihe und
   sind dort anklickbar. Beim Wechsel fährt das vordere Panel nach oben in seinen
   Reihenplatz und das gewählte gleichzeitig nach vorne.

   Tiefe entsteht über Skalierung, Abdunklung und eine leichte Unschärfe, nicht
   über echtes translateZ mit perspective. Grund: die Panels sind unterschiedlich
   hoch, und mit perspective haengt die sichtbare Groesse zusaetzlich am Abstand
   zum Fluchtpunkt — die Reihenplaetze liessen sich dann nicht mehr sauber
   berechnen. Skalierung ist vorhersagbar, billig fuer die GPU und liest sich
   fuer den Betrachter genauso als "weiter hinten".

   Ohne JavaScript bleibt `.stg` ein gewoehnlicher Behaelter und die Sektionen
   stehen untereinander. Erst `.is-live` schaltet die Buehne scharf. */

.stg {
  position: relative;
  background: var(--ink-900);
}

/* --- Ruhezustand ohne Skript: nichts wird positioniert. --- */
.stg-deck > .stg-slot + .stg-slot { margin-top: 8px; }

/* --- Bühne scharf ---------------------------------------------------- */
/* Oben Luft, damit die Reihe nicht am Ticker des Heros klebt. */
.stg.is-live { padding: 56px 40px 48px; }

.stg.is-live .stg-deck {
  position: relative;
  height: var(--deck-h, auto);
  transition: height .85s var(--ease);
  will-change: height;
}

.stg.is-live .stg-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  transform-origin: top left;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
  transition: transform .85s var(--ease), opacity .85s var(--ease),
              filter .85s var(--ease), box-shadow .85s var(--ease);
  will-change: transform;
}

.stg.is-live .stg-slot[data-pos="front"] {
  z-index: 2;
  opacity: 1;
  filter: none;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .45);
}

.stg.is-live .stg-slot[data-pos="back"] {
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* Abdunklung und Unschaerfe liegen auf dem PANELINHALT, nicht auf dem Platz.
   Am Platz wirkt ein Filter auf den ganzen Teilbaum und erfasst damit auch
   die Beschriftung — die stand dadurch um 0,8 px unscharf da. */
.stg.is-live .stg-slot[data-pos="back"] > section {
  opacity: .85;
  filter: brightness(.5) saturate(.68) blur(1px);
  transition: opacity .85s var(--ease), filter .85s var(--ease);
}

.stg.is-live .stg-slot[data-pos="back"]:hover > section,
.stg.is-live .stg-slot[data-pos="back"]:focus-within > section {
  opacity: 1;
  filter: brightness(.68) saturate(.85) blur(0);
}

/* Panels im Hintergrund sind Auswahl, nicht Bedienung. */
.stg.is-live .stg-slot[data-pos="back"] > section { pointer-events: none; }

/* Der Reihenplatz bekommt einen Rahmen, damit er als Kachel liest. */
.stg.is-live .stg-slot[data-pos="back"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--mint-800);
  border-radius: 28px;
  pointer-events: none;
}

/* Auswahlflaeche über dem wartenden Panel ----------------------------- */
.stg-pick {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: flex-end;
  border: 0;
  padding: 0;
  /* Kraeftiger als vorher: die Beschriftung muss auf dem abgedunkelten Panel
     stehen wie auf einer eigenen Flaeche, sonst versinkt sie im Bild. */
  background: linear-gradient(180deg,
    rgba(var(--grund-rgb), .30) 0%,
    rgba(var(--grund-rgb), .78) 40%,
    rgba(var(--grund-rgb), .96) 100%);
  color: var(--pale);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Der Kasten wird gegenskaliert: er sitzt in einem Panel, das insgesamt auf
   rund ein Viertel heruntergerechnet ist. Ohne diese Rechnung wäre die
   Überschrift auf der Kachel unlesbar klein. */
.stg-pick-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(100% / var(--pick-scale, 1));
  padding: 24px 26px 26px;
  transform: scale(var(--pick-scale, 1));
  transform-origin: bottom left;
}

/* Deutlich groesser als die erste Fassung (15/12,5 px), aber ohne Schein —
   das Leuchten wirkte billig. Die Farbe ist Mint 500, dieselbe wie
   "in deiner Gegend." in der H1. Das Tracking ist knapper als sonst bei
   Syncopate, weil lange Woerter wie PARTNERBEREICH sonst nicht in die
   Kachelbreite passen. */
.stg-pick-title {
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-family: Syncopate, Manrope, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mint);
  transition: color .3s var(--ease);
}

.stg-pick-arrow {
  flex: 0 0 auto;
  font-size: .7em;
  transition: transform .3s var(--ease);
}

/* Zwei Zeilen fest reserviert. Der Block haengt an der Unterkante der Kachel;
   eine zweizeilige Zwischenzeile — "Entdecke Fitnessangebote in deiner Nähe" —
   schob die Ueberschrift sonst nach oben, waehrend die einzeiligen daneben
   tiefer standen. Mit fester Hoehe sitzen alle Ueberschriften auf einer Linie. */
.stg-pick-sub {
  min-height: 2.6em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--pale);
}

.stg-pick:hover .stg-pick-title,
.stg-pick:focus-visible .stg-pick-title {
  color: var(--mint-300);
}

.stg-pick:hover .stg-pick-arrow { transform: translateX(4px); }

.stg.is-live .stg-slot[data-pos="back"] .stg-pick { display: flex; }
.stg-pick:focus-visible { outline: 2px solid var(--mint-300); outline-offset: -4px; }

/* Rückweg ------------------------------------------------------------- */
.stg-back {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--mint-800);
  border-radius: 999px;
  background: rgba(var(--grund-rgb), .72);
  backdrop-filter: blur(8px);
  color: var(--tx-1);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.stg.is-live .stg-slot[data-pos="front"]:not(:first-child) .stg-back { display: inline-flex; }
.stg-back:hover { border-color: var(--mint); transform: translateX(-2px); }
.stg-back:focus-visible { outline: 2px solid var(--mint-300); outline-offset: 3px; }
.stg-back svg { width: 15px; height: 15px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Auf hellem Panel muss der Knopf umdrehen. */
.stg-slot[data-panel="matching"] .stg-back {
  border-color: rgba(var(--akzent-tief-rgb), .35);
  background: rgba(var(--pale-rgb), .78);
  color: var(--ink-900);
}

.stg-slot[data-panel="matching"] .stg-back svg { stroke: var(--mint-800); }

/* Kachelleiste — nur im flachen Modus ---------------------------------- */
.stg-bar { display: none; }

.stg.is-flat .stg-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 16px 20px 4px;
  scrollbar-width: none;
}

.stg.is-flat .stg-bar::-webkit-scrollbar { display: none; }

.stg-tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--tx-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease);
}

.stg-tab[aria-current="true"] {
  border-color: var(--mint);
  background: var(--mint-800);
  color: var(--tx-1);
}

/* Flacher Modus: keine Tiefe, keine Reihe — nur ein Panel und die Leiste. */
.stg.is-flat.is-live { padding: 0; }
.stg.is-flat.is-live .stg-deck { height: auto; }

.stg.is-flat.is-live .stg-slot {
  position: relative;
  transform: none;
  border-radius: 0;
  opacity: 1;
  filter: none;
  box-shadow: none;
}

.stg.is-flat.is-live .stg-slot[data-pos="back"] { display: none; }
.stg.is-flat.is-live .stg-slot[data-pos="back"]::after { display: none; }
.stg.is-flat.is-live .stg-slot[data-pos="front"] { animation: stg-swap .5s var(--ease); }
.stg.is-flat.is-live .stg-back { top: 16px; left: 16px; }

@keyframes stg-swap {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .stg.is-live { padding: 40px 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .stg.is-live .stg-deck,
  .stg.is-live .stg-slot,
  .stg-back,
  .stg-tab {
    transition: none !important;
  }
  .stg.is-flat.is-live .stg-slot[data-pos="front"] { animation: none; }
}