/* ===========================================================
   DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora)
   Der Flug: die feststehenden Stationen, ihr Textgrund, Scrollhinweis,
   Fortschrittsband.
   Teil der Kaskade in landing.html: sieben <link>-Zeilen in fester
   Reihenfolge (grund, schwelle, flug, doku, fuss, kleinteile, faelle) -
   nicht `stil-*.css`, nicht von bauen.py zusammengesetzt. Wer die
   Reihenfolge aendert, aendert das Ergebnis.
   =========================================================== */

/* ---------- Der Flug ---------------------------------------------------- */

/* Ohne JavaScript gibt es keinen Flug: dann steht die Geschichte
   einfach untereinander und ist lesbar. */
#flug { height: 0; }
html.st-flug #flug { height: 760vh; }

#hud { position: relative; z-index: 20; }

/* `#hud` ist nur noch der feste Kasten ueber der Welt. Die Achse traegt die
   Reihe darin: `max-w-content mx-auto px-4 sm:px-6` am `.hud-innen`
   (startseite/_flug.html), dieselben vier Klassen wie `.kopf-innen`. Bis zum
   2026-08-28 stand hier `padding: 0 var(--rand)` - gemessen bei 1912 Pixeln
   sichtbarer Breite: Station bei 72, Container jeder anderen Seite bei 246. */
html.st-flug #hud {
  position: fixed;
  inset: 0;
  padding: 0;
  pointer-events: none;
}
html.st-flug .hud-innen {
  height: 100%;
  display: grid;
  /* Eine ausdrueckliche Spalte ueber die volle Breite DER ACHSE. Ohne sie
     schrumpft die automatische Spur auf die Textbreite, und justify-self hat
     nichts mehr, worin es den Text nach links oder rechts schieben koennte:
     gemessen stand jede Station bei 400 px statt am Rand. */
  grid-template-columns: 1fr;
  place-items: center;
}

.station {
  max-width: 640px;
  /* Seitlich kein eigener Rand mehr: den bringt die Achse mit
     (`px-4 sm:px-6` am `.hud-innen`). Vorher stand hier `var(--rand)`,
     das kam auf die Achse OBEN DRAUF und war 16 bis 72 Pixel zu viel. */
  padding: 96px 0;
  margin: 0 auto;
}
html.st-flug .station {
  grid-area: 1 / 1;
  width: min(640px, 100%);
  /* margin:0 auto aus der Grundregel muss hier weg. Automatische Raender
     schlagen justify-self, und die Station stand deshalb gemessen immer
     mittig bei 400 px, egal ob links oder rechts vorgesehen war. */
  margin: 0;
  padding: 0;
  opacity: 0;
  will-change: opacity, transform;
}
html.st-flug .station > * { pointer-events: auto; }

/* Der Textgrund. Kein Kasten und kein Textschatten, sondern ein sehr weicher
   Schatten im Raum, der mit der Station kommt und geht. Er sorgt dafuer, dass
   4,5:1 auch dann noch stimmt, wenn das Werk hell durchs Bild zieht.
   Gemessen wird am Bild, nicht an dieser Zeile. */
html.st-flug .station { position: relative; }
html.st-flug .station::before {
  content: "";
  position: absolute;
  /* Die Kasten-Geometrie ist gerechnet, nicht geschaetzt: der Schatten haengt
     weit in die Welt hinaus, sein Mittelpunkt muss aber genau auf dem Text
     sitzen. Beim ersten Versuch lag er 370 px daneben, und die Messung fand
     dort Textstellen mit 2,1:1.

     **`--achse` und nicht `vw`.** Der Schatten ist der Grund UNTER dem Text
     und gehoert damit zum Text, nicht zum Fenster. Mit `vw` wuchs er ueber
     jede Fensterbreite mit: bei 3840 Pixeln spannte er von 543 bis 3180 und
     legte sich dabei ueber das Motiv, das daneben stehen soll. Bis 1420
     Pixeln ist `--achse` gleich `100vw` - schmal aendert sich also nichts. */
  left: calc(-0.18 * var(--achse)); right: calc(-0.34 * var(--achse));
  top: -30vh; bottom: -30vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(64% 52% at 42% 50%,
    rgba(5, 5, 6, 0.96) 0%, rgba(5, 5, 6, 0.93) 40%,
    rgba(5, 5, 6, 0.62) 64%, rgba(5, 5, 6, 0) 88%);
}
html.st-flug .station--rechts::before {
  left: calc(-0.34 * var(--achse)); right: calc(-0.18 * var(--achse));
  background: radial-gradient(64% 52% at 58% 50%,
    rgba(5, 5, 6, 0.96) 0%, rgba(5, 5, 6, 0.93) 40%,
    rgba(5, 5, 6, 0.62) 64%, rgba(5, 5, 6, 0) 88%);
}

.station--rechts { justify-self: end; text-align: left; }
.station--links  { justify-self: start; }

.zahl {
  font-family: var(--mono);
  /* 12 statt 11 Pixel und 0.28 statt 0.34em Sperrsatz. Der Entwurf E2 meldete
     neun Textstellen unter 12 Pixeln als offenen Befund; das engere Sperrmass
     haelt die Zeile dabei genau so lang wie vorher. Der Kontrast war schon
     dort in Ordnung (12,8:1), die Groesse nicht. */
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--leit);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.zahl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--linie), transparent);
  max-width: 120px;
}

.station h1, .station h2 {
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 300;
  margin: 0 0 20px;
  color: var(--weiss);
}
.station p {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--dimm);
  margin: 0;
  max-width: 30em;
}
.station .knopfreihe { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Der Hinweis, dass gescrollt werden darf. */
#scrollhinweis {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  /* 11 statt 10 Pixel, Sperrsatz 0.26 statt 0.3em. Im Browser gemessen: es
     war nach dem Einbau die kleinste Schrift der ganzen Seite. Er ist
     aria-hidden und damit Zierde - aber ein Sehender liest ihn trotzdem, und
     Zierde ist kein Grund fuer 10 Pixel. */
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dimm-leise);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#scrollhinweis.da { opacity: 1; }
#scrollhinweis .bahn {
  width: 1px; height: 44px;
  background: rgba(242,245,244,0.16);
  position: relative; overflow: hidden;
}
#scrollhinweis .bahn::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -50%;
  height: 50%;
  background: linear-gradient(180deg, transparent, var(--leit));
  animation: rinnen 2.4s cubic-bezier(0.6,0,0.3,1) infinite;
}
@keyframes rinnen { 0% { top: -50%; } 60%,100% { top: 100%; } }

/* Fortschrittsband am linken Rand waehrend des Fluges */
/* Unten rechts, nicht am linken Rand: dort stand es gemessen mitten im
   linksbuendigen Text und schnitt Buchstaben an. */
#fahrt {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 22;
  display: none;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.st-flug #fahrt { display: flex; }
#fahrt.da { opacity: 1; }
#fahrt i {
  display: block;
  width: 18px; height: 1px;
  background: rgba(242,245,244,0.2);
  transition: background 0.35s ease, width 0.35s ease;
}
#fahrt i.jetzt { background: var(--leit); width: 34px; }