/* ══ STATIONEN — Aussehen ═════════════════════════════════════════════════
   Die Seite scrollt nicht. Alle Stationen liegen deckungsgleich
   übereinander, eine Geste schaltet weiter — wie auf sparweb-agentur.de.

   ── Der Wechsel hat KEINEN Übergang (Stand 08.08.2026) ──────────────────
   Die alte Station ist weg, die neue steht. Bewusst leer, kein
   vergessener Zwischenstand: hier sind VIER Fassungen gebaut und alle
   vier wieder ausgebaut worden.

     · Holografischer Durchgang — die Sektionen zerfielen in Zellen, ein
       Strahl lief darüber, glühender Staub legte das Licht dazu.
     · Kameraflug — die Sektionen SELBST flogen durch einen
       `perspective`-Raum, mit Lichtfeld und Ziel-Schein.
     · Welt — Bildebenen in der Tiefe, durch die eine Kamera fuhr.
     · Kameraflug im HINTERGRUND (08.08.) — der einzige, der die Sektionen
       stehen ließ; ausgebaut, weil der Auftritt von 1 nach 2 stattdessen
       eine Entfaltung am Scroll wurde. Liegt vollständig in
       `labor/flug-gitter-verworfen/`, mit Rezept zum Wiedereinbau.

   Der Auftritt Sektion 1 → 2 ist deshalb hier gar kein Thema mehr: beide
   liegen zusammen in EINER Station mit Innen-Scroller und entfalten sich
   daran (engine/entfalten/). Was hier bleibt, ist das Umschalten der
   übrigen Stationen — und daran war nie etwas falsch.

   Geblieben ist nur, was auch ohne Effekt richtig ist: die Klassen
   `on`/`vor`/`hinter` an den Sektionen. `vor` und `hinter` sagen, ob eine
   Station vor oder hinter der aktiven liegt — sie tun hier gerade nichts
   und sind trotzdem gesetzt, weil ein Klassenwechsel keine Arbeit je Bild
   ist und ein Übergang sie vorfindet.

   Die Richtung `--dir` stand hier als registrierte Eigenschaft und ist
   ausgebaut: sie wurde je Wechsel geschrieben und von niemandem gelesen.
   Ein Übergang holt sie sich aus `von` und `i` in `setzen()`.
──────────────────────────────────────────────────────────────────────── */

/* Maße, die mehrere Sektionen brauchen. Sie stehen HIER und nicht in der
   Seite: sie beschreiben Kopf und Anzeige der Stationen, nicht den Inhalt.
   Wer sie in jeder Sektion abschreibt, hat sie beim nächsten Mal an einer
   Stelle vergessen. */
html.stationen {
  --st-kopf: clamp(88px, 12svh, 118px);   /* Platz für den festen Kopf   */
  --st-nav-breite: clamp(96px, 8vw, 132px); /* Breite der Stationsanzeige */
}

/* ── Der Behälter ────────────────────────────────────────────────────── */
html.stationen, html.stationen body { height: 100%; overflow: hidden; }
html.stationen .st-buehne { position: fixed; inset: 0; z-index: 1; }

/* ── Die Ebenen ──────────────────────────────────────────────────────────
   Sichtbar ist genau EINE. `visibility` statt `display: none`, weil die
   Sektionen ihr Layout behalten sollen: die Engines messen darin (und
   `display: none` liefert überall 0), und ein Wechsel würde sonst jedes
   Mal das ganze Raster neu aufbauen. */
html.stationen [data-station] {
  position: absolute;
  inset: 0;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
}
html.stationen [data-station].on {
  visibility: visible;
  pointer-events: auto;
}
/* Kinder dürfen die Unsichtbarkeit nicht ÜBERSTIMMEN. `visibility` wird
   vererbt, ist aber von Kindern überschreibbar — und eine transition AUF
   visibility zählt als genau so eine Überschreibung: `.mo-kopf` führt
   eine (0,32 s, für die Tafel), und wenn die verlassene Station auf
   `hidden` geht, hielt diese transition den Kopf ihre volle Laufzeit auf
   `visible` — bei voller Deckkraft, denn die Abgangs-Animation der
   Sektion ist mit ihrer Klasse da schon abgeräumt. Sichtbar war das als
   „die Texte von Sektion 2 stehen noch zu lange da" (dritte Runde
   derselben Beschwerde, 11.08.2026): Kicker, Überschrift und Hinweis
   blitzten NACH dem Ausblenden wieder auf und standen 0,32 s im
   Kameraflug. Die ersten zwei Fixe drehten an Abgangsdauer und Gesten —
   der falschen Schicht; nur beim Abgang tritt es auf, weil visibility
   mit Endpunkt `visible` die ganze Laufzeit `visible` bleibt.
   Deshalb pauschal: eine Station ohne `on` hat KEINE laufenden
   Übergänge, auch nicht in der `geht`-Phase — dass dabei bestehende
   transitions (Hover-Reste u. Ä.) auf ihren Endwert springen, ist
   gewollt: nichts soll mitten im Verlassen weiterdriften. */
html.stationen [data-station]:not(.on) * { transition: none; }

/* ── Stationsanzeige ─────────────────────────────────────────────────── */
html.stationen .st-nav {
  position: fixed;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  translate: 0 -50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-nav { display: none; }
html.stationen .st-nav { display: flex; }
html.stationen .st-nav button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  /* Tippziel 44 px, obwohl der Punkt 7 px hat — die Fläche macht das
     Padding, nicht der sichtbare Teil. */
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font: 500 10.5px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.stationen .st-nav span {
  opacity: 0;
  translate: 6px 0;
  transition: opacity .3s var(--ease, ease), translate .3s var(--ease, ease);
}
html.stationen .st-nav i {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--haze, #b9a4f0) 34%, transparent);
  transition: background .3s var(--ease, ease), scale .3s var(--ease, ease);
}
html.stationen .st-nav button.aktiv i {
  background: var(--accent, #6fded9);
  scale: 1.35;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #6fded9) 70%, transparent);
}
html.stationen .st-nav button.aktiv span,
html.stationen .st-nav button:focus-visible span { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  html.stationen .st-nav button:hover span { opacity: .8; translate: 0 0; }
  html.stationen .st-nav button:hover i { background: var(--haze, #b9a4f0); }
}
@media (max-width: 1100px) {
  html.stationen .st-nav span { display: none; }
}