/* ===========================================================
   DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora)
   Die Tuer: Ladebalken, Prozentwert, EINTRETEN, Ton-Wahl.
   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.
   =========================================================== */

/* ---------- Die Schwelle ------------------------------------------------ */

/* ══ Zwei Schalter, zwei Fragen ══════════════════════════════════════════

   `st-js`    Laeuft auf dieser Seite ueberhaupt JavaScript? Gesetzt von einem
              Inline-Skript im <head> (landing.html), damit die Tuer nicht
              erst aufblitzt und dann erscheint. **Nur die Tuer haengt daran.**
   `st-flug`  Hat startseite.js wirklich uebernommen? Erst daran haengen die
              Masse des Fluges: #flug wird 760vh hoch, #hud legt sich fest
              ueber das Bild, die Stationen gehen auf opacity 0.

   ── Warum das getrennt ist, und was es gekostet hat ────────────────────────

   **Am 2026-08-28 im echten Browser gemessen, mit abgeschaltetem
   JavaScript: die Tuer deckte die ganze Seite ab.** Sie liegt fest ueber
   allem (`position: fixed; inset: 0; z-index: 100`) auf einer deckenden
   Flaeche, und der Knopf EINTRETEN tat nichts, weil sein Zuhoerer nie
   angemeldet wurde. Im Dokument standen 3208 Zeichen Text, und ein Besucher
   sah davon **kein einziges**. Kein Test hat das gesehen, kein Standbild
   haette es gezeigt.

   Der naheliegende Weg waere gewesen, die Tuer an `st-flug` zu haengen.
   Der ist falsch: `st-flug` faellt auch dann weg, wenn three.js nicht
   ankommt - und dann steht die Seite ohne Tuer da, aber MIT JavaScript. Das
   ist richtig so. Die Tuer haengt an der Frage "gibt es JavaScript", die
   Fluggeometrie an der Frage "laeuft der Flug". Zwei Fragen, zwei Schalter.

   **Das Rettungsnetz steht im <head>**: kommt startseite.js nicht an, nimmt
   ein Zeitgeber `st-js` nach sechs Sekunden wieder ab, und die Tuer
   verschwindet von selbst. Ausfuehrlich in landing.html.
   ══════════════════════════════════════════════════════════════════════ */

#schwelle {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Ohne JavaScript gibt es sie nicht. Der Ausgangszustand ist die
     vollstaendige Seite, nicht der Vorhang davor. */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #030304;
  text-align: center;
  padding: var(--rand);
  transition: opacity 1.1s ease;
}
/* `:not([hidden])` ist noetig und keine Zierde: `html.st-js #schwelle` waegt
   schwerer als `#schwelle[hidden]`, und die Tuer waere nach dem Eintreten nie
   wieder weggegangen. */
html.st-js #schwelle:not([hidden]) { display: flex; }
#schwelle.geht { opacity: 0; pointer-events: none; }

.schwelle-marke {
  font-family: var(--mono);
  font-size: clamp(26px, 6.5vw, 54px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  margin: 0 0 18px;
  font-weight: 400;
  color: var(--weiss);
}
.schwelle-satz {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimm);
  margin: 0 0 44px;
  min-height: 1.4em;
}
.balkenbahn {
  width: min(320px, 70vw);
  height: 2px;
  background: rgba(242, 245, 244, 0.16);
  position: relative;
  overflow: hidden;
}
.balkenbahn i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--leit-tief), var(--leit));
  box-shadow: 0 0 12px rgba(34, 232, 208, 0.8);
}
.prozent {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--dimm-leise);
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
#eintritt {
  margin-top: 30px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#eintritt.da { opacity: 1; transform: none; pointer-events: auto; }
.schwelle-fuss {
  position: absolute;
  bottom: calc(var(--rand) - 4px);
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimm-leise);
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}
.schwelle-fuss.da { opacity: 1; }
/* Die Wahl gehoert an die Tuer, nicht dahinter: die Kopfzeile mit dem
   Ton-Schalter liegt waehrend der Schwelle unter dem schwarzen Vorhang. */
.tonwahl {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--leit);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: 2px 0;
  cursor: pointer;
}
.tonwahl:hover { color: var(--leit-hell); border-color: var(--leit-hell); }
.tonwahl[aria-pressed="true"]::after { content: " ●"; }