/* ===========================================================
   DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora)
   Die Faelle, in denen die Seite anders aussehen MUSS: gestapelt statt
   geflogen, ohne WebGL, weniger Bewegung, schmales Geraet.
   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.
   =========================================================== */

/* ---------- Wenn die Geschichte gestapelt statt geflogen wird ------------
   Zwei Faelle fuehren hierher: kein WebGL und "weniger Bewegung". In beiden
   steht dieselbe Geschichte einfach untereinander. Ohne diese Regeln erbt
   sie die Flug-Masse (kein Rand, links/rechts verteilt) und laeuft unter der
   Kopfzeile durch - gemessen und im Bild gesehen. */
html.kein3d #hud, html.st-flug.gestapelt #hud { padding-top: 96px; }
/* Gestapelt ist die Reihe keine Gitterspur mehr, sondern nur noch die Achse:
   `max-w-content mx-auto px-4 sm:px-6` bleibt, das Gitter geht. Ohne diese
   Zeile stuenden alle sechs Stationen weiter uebereinander in EINER Zelle. */
html.kein3d .hud-innen, html.st-flug.gestapelt .hud-innen {
  display: block;
  height: auto;
}
html.kein3d .station, html.st-flug.gestapelt .station {
  grid-area: auto;
  justify-self: center;
  width: min(760px, 100%);
  margin: 0 auto;
  /* Seitlich kein eigener Rand: den bringt die Achse mit. */
  padding: 76px 0;
  opacity: 1 !important;
  transform: none !important;
  text-align: left;
}
html.kein3d .station::before, html.st-flug.gestapelt .station::before { display: none; }
html.kein3d #scrollhinweis, html.st-flug.gestapelt #scrollhinweis,
html.kein3d #fahrt, html.st-flug.gestapelt #fahrt { display: none; }

/* ---------- Ohne WebGL -------------------------------------------------- */

html.kein3d #flug { height: 0; }
html.kein3d #hud { position: relative; display: block; padding: 0; }
html.kein3d .station { opacity: 1 !important; transform: none !important; grid-area: auto; }
html.kein3d #welt {
  background:
    radial-gradient(90% 60% at 70% 24%, rgba(34,232,208,0.15) 0%, transparent 60%),
    radial-gradient(70% 50% at 20% 70%, rgba(168,85,247,0.13) 0%, transparent 60%),
    #050506;
}
/* ── Der Schleier gehoert hierher genauso wie zu "weniger Bewegung" ───────
   Er ist ausdruecklich der Ersatz fuer jeden Textschatten (startseite-grund.css,
   `#schleier`), und die Seite fahrt ihn ueberall aus, wo gelesen statt geflogen
   wird: im Flug setzt `bild()` ihn auf `d`, also auf 1, sobald der Doku-Teil
   steht; bei "weniger Bewegung" setzt `los()` ihn auf 1, mit der Begruendung,
   der Text stehe dort AUF der Welt statt daneben. **Ohne WebGL gilt genau
   dasselbe** - die Welt ist da, der Flug nicht -, nur kam der Fall nie an
   dieser Stelle vorbei: `los()` kehrt fuer `kein3d` schon in der ersten Zeile
   um, und `bild()` laeuft nie. Der Schleier blieb als einziger Zustand der
   Seite auf 0.

   Im Browser gemessen, 2026-08-28, am gerenderten Bildpunkt unter den
   Buchstaben - nicht gegen das Farb-Token, nicht ueber das Element-Rechteck:

     320 px, ohne WebGL, `.fuss-marke`     4.70:1 auf #190f24   <- der duennste
     320 px, ohne WebGL, mit dieser Zeile  5.02:1 auf #0c0910      Wert der Seite

   #190f24 ist die Mitte des lila Scheins zwei Regeln weiter oben, bei voller
   Deckung. Schmal wird die Fusszeile dreizeilig und reicht genau dorthin; auf
   1440 ist sie einzeilig, bleibt unter dem Schein und kam nie unter 5.05:1.
   **Der schlechteste Fall haengt an der HOEHE der Fusszeile, nicht an der
   Breite des Fensters** - wer dort Zeilen hinzufuegt, misst nach.

   Der Verlauf des Schleiers bleibt, wie er ist, und das ist die Entscheidung
   und nicht die Bequemlichkeit: er ist oben leicht (0.34) und unten schwer
   (0.74), also leicht ueber dem Bild und schwer ueber dem Lesetext. Ein
   gleichmaessiger Schleier wurde danebengestellt und verworfen - er brachte
   keinen Kontrast dazu (4.86 gegen 4.87:1) und nahm oben den Teal-Schein weg,
   der ohne WebGL das Einzige ist, was die Seite noch leuchten laesst. Die
   drei Fassungen als Bild: 04-berichte/schleier-kein3d/.

   Die Zeile braucht kein `!important`: `#schleier { opacity: 0 }` in
   startseite-grund.css waegt leichter, und ohne WebGL schreibt das Skript nie
   eine eigene Deckung an das Element - `bild()` laeuft nur im Flug. */
html.kein3d #schleier { opacity: 1; }
html.kein3d #scrollhinweis, html.kein3d #fahrt { display: none; }

/* ---------- Weniger Bewegung -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.st-flug #schleier { opacity: 1 !important; }
  #scrollhinweis .bahn::after { animation: none; opacity: 0.5; }
  .ton[aria-pressed="true"] .balken i { animation: none !important; }
  html.st-flug #flug { height: 0; }
  html.st-flug #hud { position: relative; display: block; inset: auto; padding: 96px 0 0; }
  html.st-flug .hud-innen { display: block; height: auto; }
  html.st-flug .station {
    opacity: 1 !important; transform: none !important;
    grid-area: auto; width: min(760px, 100%); margin: 0 auto; padding: 76px 0;
    text-align: left;
  }
  html.st-flug .station::before { display: none; }
  html.st-flug .anflug { opacity: 1; transform: none; }
}

/* ---------- Klein --------------------------------------------------------*/

@media (max-width: 720px) {
  :root { --rand: 20px; }
  body { font-size: 16px; }
  /* Nur oben und unten. Links und rechts haelt `px-4 sm:px-6` am Kasten
     darin (`.kopf-innen`, startseite-grund.css) - die Achse des Produkts
     gilt hier genauso wie auf 1920 Pixeln, nur ist sie schmal die volle
     Fensterbreite minus 16. */
  #kopf { padding-block: 14px; }
  .marke { font-size: 12px; letter-spacing: 0.3em; }
  /* Schmal bleibt der Weg ins Produkt sichtbar - "Anmelden" und "Anfangen"
     stehen auch auf 320 Pixeln in der Kopfzeile, deshalb braucht diese Seite
     kein Mobilmenue. Weg gehen die zwei Dinge, die an einer zweiten Stelle
     auf derselben Seite stehen: der Preis-Verweis (der Abschnitt kommt beim
     Scrollen ohnehin, und Station 06 fuehrt hin) und der Sprachumschalter
     (er steht in der Fusszeile ein zweites Mal). */
  .kopf-preise, .kopf-sprache { display: none; }
  /* Schmal wird das Polster der Kopfzeile schmaler, die Schrift nicht.
     **Und die Hoehe schon gar nicht.** Bis zum 2026-09-02 stand hier
     `.knopf { padding: 9px 16px; font-size: 13px; }`; daraus wurden
     im Browser gemessene **40,8 Pixel Hoehe**, waehrend jede andere Seite
     des Produkts ab 320 Pixeln 44 haelt. `.btn` bringt die 44 als
     `min-height` mit, deshalb kann das Polster hier gefahrlos schrumpfen.

     **Und es traf nicht nur die Kopfzeile.** Weil die alte Regel auf
     `.knopf` ohne Vorfahren stand, fielen unter 720 Pixeln auch die grossen
     Handlungen von 56 auf 40,8 und die drei Tarifknoepfe mit. Elf Knoepfe
     bei 320 und 390 nachgemessen, alle 40,8 ausser dem Ton.

     Nur die Kopfzeile, nicht alle Knoepfe: die grossen Handlungen im Flug
     und im Schluss haben schmal den ganzen Platz und brechen ohnehin um. Ein
     unbeschraenktes `.btn { padding: ... }` an dieser Stelle wuerde `.btn-lg`
     ueberstimmen, denn eine Regel ausserhalb von `@layer` gewinnt gegen jede
     darin, egal in welcher Reihenfolge die Dateien geladen werden. */
  .kopf-rechts .btn { padding-left: 0.75rem; padding-right: 0.75rem; }
  /* `place-items` sitzt am Gitter, und das Gitter ist seit dem
     2026-08-28 die Reihe auf der Achse, nicht `#hud`. */
  html.st-flug #hud { padding-bottom: 118px; }
  html.st-flug .hud-innen { place-items: end center; }
  html.st-flug .station { width: 100%; }
  /* Schmal steht der Text unten. Der Grund liegt dann als Band darunter. */
  html.st-flug .station::before,
  html.st-flug .station--rechts::before {
    left: -8vw; right: -8vw; top: -18vh; bottom: -30vh;
    background: linear-gradient(180deg,
      rgba(5,5,6,0) 0%, rgba(5,5,6,0.80) 30%, rgba(5,5,6,0.95) 55%, rgba(5,5,6,0.95) 100%);
  }
  .station--rechts, .station--links { justify-self: stretch; }
  .station h2 { font-size: clamp(27px, 8vw, 40px); }
  html.st-flug #fahrt { display: none; }   /* schmal ist kein Platz dafuer */
  #fahrt i { width: 12px; }
  #fahrt i.jetzt { width: 22px; }
  #scrollhinweis { bottom: 18px; }
  /* Schmal bricht die Zeile an der Tuer haesslich um: untereinander statt
     nebeneinander, und der Trenner faellt weg. */
  .schwelle-fuss { flex-direction: column; gap: 12px; text-align: center; }
  .schwelle-fuss span[aria-hidden] { display: none; }
  .karte, .tarif { padding: 26px 22px; }
  /* Schmal bricht die Fusszeile sonst in drei ungleiche Bloecke. Die Reihe
     ist seit dem 2026-08-28 der Kasten darin, nicht mehr `#fuss` selbst -
     die Linie oben gehoert weiter dem `#fuss` und geht ueber die volle
     Breite. */
  #fuss { text-align: center; }
  .fuss-innen { flex-direction: column; gap: 16px; }
  .schluss h2 { font-size: clamp(28px, 9vw, 44px); }
}

/* ---------- Sehr schmal: 420 Pixel und darunter -------------------------
   **Gemessen im echten Browser bei 320 x 640, nicht geschaetzt.** Die
   Kopfzeile belegte dort 343,7 Pixel bei 320 verfuegbaren: "Anfangen" stand
   19,7 Pixel ueber dem rechten Rand. Kein Test hat das gesehen, kein
   Standbild haette es gezeigt - `overflow-x: hidden` am body schneidet den
   Ueberhang einfach ab, und dann fehlt die rechte Haelfte des einen Knopfes,
   der zaehlt.

   Die Rechnung, damit der Naechste sie nachvollziehen kann. **Am
   2026-09-02 im Browser nachgemessen** (320 x 640, `mobile: False`,
   `clientWidth` 320, `scrollWidth` 320, also kein Ueberhang mehr):

     Rand links und rechts       2 x 16 =  32
     Logo (nur das Bildzeichen)            34
     Ton                                   44
     Anmelden, als reiner Verweis          69
     Anfangen                              92
     zwei Abstaende in der Reihe    2 x 8 = 16
                                        ----
                                          287  von 320, 33 Luft

   Die Reihe steht damit von 16 bis 304. Die Luft verteilt
   `justify-content: space-between` zwischen Logo und rechter Reihe.

   **"Anmelden" verliert dabei seinen Rahmen, nicht seinen Platz.** Es ist die
   leise der beiden Handlungen, und leise heisst hier: ein Verweis ohne
   Kante. Ihn ganz wegzunehmen waere die naheliegende Loesung und die falsche
   Ein wiederkehrender Kunde stuende dann ohne Weg zur Anmeldung da.

   **Der Ton bleibt bei 44 und schrumpft nicht mehr auf 40.** Bis zum
   2026-09-02 stand hier `width: 40px; height: 40px`, und damit fiel der
   Schalter genau dort unter die Trefferflaeche, wo er am meisten davon
   braucht. Die vier Pixel sind ueber das Polster der beiden Nachbarn wieder
   hereingekommen (Block "Klein" weiter oben), und die Reihe ist heute
   schmaler als vorher. */

@media (max-width: 420px) {
  :root { --rand: 16px; }
  .kopf-innen { gap: 12px; }
  .kopf-rechts { gap: 8px; }
  /* `.btn-ghost` hat weder Kante noch Fuellung, seit dem 2026-09-02 muss hier
     also nur noch das Polster weg. Die zwei Zeilen, die vorher Rahmen und
     Grund zurueckgenommen haben, sind mit der Pille entfallen.

     **`.kopf-rechts` davor ist kein Zierat, sondern noetig.** Der Block
     "Klein" weiter oben setzt `.kopf-rechts .btn`, und das ist spezifischer
     als ein blosses `.kopf-anmelden`. Ohne den Vorfahren hier gewinnt die
     Regel von 720 auch auf 320, und "Anmelden" behaelt 24 Pixel Polster, die
     im Budget der Kopfzeile fehlen. Einmal gemessen worden, statt gedacht. */
  .kopf-rechts .kopf-anmelden { padding-left: 0; padding-right: 0; }
}