/* ============================================================================
   Starlink-Checker · Stylesheet
   ----------------------------------------------------------------------------
   Die Seite hat eine Aufgabe: in zwei Sekunden sagen, ob ein Flugzeug Starlink
   hat. Daraus folgt alles hier.

   Szene: jemand steht am Gate, Handy in der Hand, Boarding in zwanzig Minuten.
   Deshalb ist das Handy die Ausgangsbreite - der grosse Schirm bekommt mehr
   Platz, keine andere Seite.

   Hell und Dunkel sind gleichrangig (Entscheidung vom 11.08.2026). Welcher
   Satz gilt, sagt das Geraet; wer will, schaltet um. Technisch steht jede
   Farbe genau einmal da, als `light-dark(hell, dunkel)`. Umgeschaltet wird
   nur `color-scheme` - eine Zeile statt zweier Farbsaetze, die auseinander-
   laufen koennen.

   Die Grundfigur ist die Strichliste: ein Strich ist ein Flugzeug. Daraus
   besteht das Feld auf der Startseite, und der Balken je Airline ist dieselbe
   Figur in einer Reihe.

   Farbe traegt die Aussage - gruen, gelb, rot, grau. Im dunklen Satz kommt
   ein Blauviolett fuer Links und Bedienelemente dazu, weil ein Link auf
   dunkler Flaeche sonst verschwindet. Im hellen Satz bleibt es bei Schwarz
   und unterstrichenen Links: dort traegt die Zurueckhaltung.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* --- Flaechen und Schrift ---------------------------------------------- */
  --grund:        light-dark(oklch(0.976 0.005 105), #0f1017);
  --flaeche:      light-dark(oklch(1 0 0),           #161826);
  --karte:        light-dark(oklch(0.97 0.006 105),  #1c1e2c);
  --karte-hoch:   light-dark(oklch(1 0 0),           #232532);

  --ink:          light-dark(oklch(0.19 0.012 110),  #e9e9ed);
  --ruhig:        light-dark(oklch(0.32 0.012 110),  #cfd3e5);
  /* PROBE 11.08.2026: im dunklen Satz ist alle gedaempfte Schrift auf Weiss
     gestellt. Zum Zuruecknehmen die beiden dunklen Werte wieder auf
     #b2b6ca (halblaut) und #9397ab (leise) setzen - dann auch --offen-schrift
     weiter unten. */
  --halblaut:     light-dark(oklch(0.42 0.012 110),  #e9e9ed);
  --leise:        light-dark(oklch(0.47 0.012 110),  #e9e9ed);

  --linie:        light-dark(oklch(0.885 0.006 110), rgba(233, 233, 237, 0.1));
  --linie-stark:  light-dark(oklch(0.8 0.008 110),   rgba(233, 233, 237, 0.16));
  /* Der Rand von Feldern und Knoepfen ist das einzige, woran man sie erkennt -
     er muss deshalb 3:1 gegen alles tragen, worauf er liegt. Trennlinien
     zwischen Zeilen duerfen leiser sein, sie tragen keine Bedienung.
     Dunkel 0.40 statt 0.28 seit dem 22.08.2026: mit der browsergetreuen
     Mischung (sRGB) trug 0.28 nur rund 2.3:1 - Entscheidung Vincent. */
  --linie-bedien: light-dark(oklch(0.63 0.01 110),   rgba(233, 233, 237, 0.40));
  --strich-leer:  light-dark(oklch(0.845 0.008 110), #31344a);
  --ueber:        light-dark(rgba(255, 255, 255, 0.94), rgba(22, 24, 38, 0.94));

  /* Bedienfarbe. Im hellen Satz ist sie bewusst die Tinte - dort gibt es
     keine Markenfarbe, Links sind unterstrichen. */
  --akzent:       light-dark(oklch(0.19 0.012 110),  #9184d9);
  --akzent-hell:  light-dark(oklch(0.19 0.012 110),  #b5abfc);
  --akzent-flaeche: light-dark(oklch(0.93 0.008 110), #423a6a);

  --fokus:        light-dark(oklch(0.52 0.19 265),   #9184d9);

  /* --- Die vier Aussagen. Das ist das eigentliche Design. ----------------- */
  --ja-flaeche:   light-dark(oklch(0.955 0.035 150), oklch(0.29 0.055 150));
  --ja-schrift:   light-dark(oklch(0.41 0.13 150),   oklch(0.85 0.13 150));
  --viel-flaeche: light-dark(oklch(0.96 0.05 85),    oklch(0.3 0.055 85));
  --viel-schrift: light-dark(oklch(0.45 0.11 78),    oklch(0.86 0.12 85));
  --nein-flaeche: light-dark(oklch(0.958 0.03 25),   oklch(0.3 0.06 25));
  --nein-schrift: light-dark(oklch(0.44 0.15 25),    oklch(0.83 0.11 25));
  --offen-flaeche: light-dark(oklch(0.95 0.006 110), #232532);
  --offen-schrift: light-dark(oklch(0.42 0.012 110), #e9e9ed);  /* PROBE, sonst #b2b6ca */

  /* Gold gehoert nur der Premieren-Auszeichnung (PREMIEREN in texts.py) -
     bewusst kein Statusgelb, damit sie nicht wie "gemeldet" aussieht. */
  --gold:      light-dark(oklch(0.68 0.13 80), oklch(0.78 0.14 82));
  --gold-tief: light-dark(oklch(0.50 0.11 75), oklch(0.60 0.12 78));

  /* Eigene Toene fuer Striche und Balken. Ein Strich ist drei Punkte breit -
     dort zaehlt nicht der Textkontrast, sondern dass man Gruen, Gelb und Rot
     nebeneinander auseinanderhaelt. */
  --strich-ja:    light-dark(oklch(0.56 0.17 150),   oklch(0.72 0.17 150));
  /* Gelb war im hellen Satz auf Papier zu schwach (2,6:1) - ein Strich ist
     drei Punkte breit und muss 3:1 tragen. Deshalb dunkler als im Entwurf. */
  --strich-viel:  light-dark(oklch(0.64 0.17 75),    oklch(0.78 0.16 78));
  --strich-nein:  light-dark(oklch(0.56 0.21 27),    oklch(0.65 0.19 27));

  /* --- Schrift ----------------------------------------------------------- */
  /* Eine Familie, feste Groessen. Kein Display-Font in einem Werkzeug - der
     Charakter kommt aus Gewicht, Laufweite und der Strichliste. */
  --satz: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;
  --satz-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               monospace;

  /* Die Leiter. Zwoelf Stufen, nach Haeufigkeit im Entwurf sortiert - dazwischen
     gibt es nichts, auch wenn eine Stelle nach 18 oder 25 ruft. */
  --s-11: 0.6875rem;
  --s-12: 0.75rem;
  --s-13: 0.8125rem;
  --s-14: 0.875rem;
  --s-15: 0.9375rem;
  --s-16: 1rem;
  --s-17: 1.0625rem;
  --s-18: 1.125rem;
  --s-21: 1.3125rem;
  --s-27: 1.6875rem;
  --s-30: 1.875rem;
  --s-40: 2.5rem;
  --s-52: 3.25rem;

  /* --- Abstaende: Vierer-Raster ------------------------------------------ */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a6: 1.5rem;
  --a8: 2rem;
  --a12: 3rem;

  --rand: 1rem;          /* Seitenrand, durchgehend 16 Punkte */
  --karten-luft: 0.75rem;
  --abschnitt: 1.625rem; /* Abstand zwischen Abschnitten: 26 Punkte */

  /* --- Radien: drei Stufen ----------------------------------------------- */
  --r-klein: 6px;
  --rund: 8px;
  --r-gross: 12px;

  --breite: 42rem;

  /* --- Die Strichliste --------------------------------------------------- */
  /* Teilung = Strich + Luecke; der Balken nimmt dieselbe Teilung, damit beide
     Figuren denselben Takt haben. */
  --strich: 3px;
  --luecke: 2px;
  --strich-hoch: 14px;
  --takt: 6px;

  /* Farbe, in der der Balken in Striche geschnitten wird - immer die Farbe
     der Flaeche dahinter, sonst sieht man den Schnitt beim Ueberfahren. */
  --schnitt: var(--grund);

  --tempo: 160ms;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);

  /* Ebenen, benannt statt geraten */
  --ebene-kopf: 20;
  --ebene-leiste: 30;
}

/* Der Schalter. Ohne Wahl entscheidet das Geraet (`light dark` oben). */
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }

/* --- Grundlage ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Die Seite ist mindestens so hoch wie der Schirm und stapelt ihre Teile
   von oben nach unten - damit die Leiste am Fuss auch auf einer kurzen Seite
   (404, "kennen wir nicht") ganz unten steht und nicht ein Stueck darueber.
   `dvh` statt `vh`: auf dem iPhone rechnet vh die eingeklappte Safari-Leiste
   nicht mit, dvh schon. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--satz);
  font-size: var(--s-16);
  line-height: 1.55;
  text-underline-offset: 0.2em;
  /* Die Teile, die man nicht selbst zeichnet, gehoeren auch zum Entwurf. */
  accent-color: var(--akzent);
  caret-color: var(--ink);
}

::selection { background: var(--ja-flaeche); color: var(--ja-schrift); }

main {
  width: 100%;   /* im Spaltenstapel des body sonst nur so breit wie der Inhalt */
  max-width: var(--breite);
  margin: 0 auto;
  /* Unten Luft fuer die Leiste, die ueber dem Inhalt steht. */
  padding: var(--a6) var(--rand) var(--a8);
}

main.weit { max-width: 56rem; }
main.breit { max-width: 58rem; }

h1, h2, h3 { text-wrap: balance; margin: 0; }

h1 {
  font-size: var(--s-27);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: var(--a2);
}

h2 {
  font-size: var(--s-17);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin-bottom: var(--a2);
}

p { margin: 0 0 var(--a4); text-wrap: pretty; }

a { color: var(--akzent); text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-hell); }

/* Im hellen Satz gibt es keine Markenfarbe: der Link erbt die Tinte und wird
   durch die Unterstreichung erkennbar. Im dunklen traegt ihn die Farbe. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) a { text-decoration-color: var(--linie-stark); }
  :root:not([data-thema="dunkel"]) a:hover { text-decoration-color: currentColor; }
}
:root[data-thema="hell"] a { text-decoration-color: var(--linie-stark); }
:root[data-thema="hell"] a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-klein);
}

.leise, .erklaerung, .dazu, .unabhaengig, .zaehler, .legende, .treffer,
footer p {
  color: var(--leise);
}

/* Zurueck-Zeile ueber den Unterseiten: Pfeil und Ortsangabe. */
.ruecken {
  display: flex;
  align-items: center;
  gap: var(--a2);
  margin: 0 0 var(--a2);
}

.ruecken .vorzeile { margin: 0; color: var(--leise); }

/* Kopf der Hinweisseite: Zeichen und Ueberschrift nebeneinander. */
.hinweiskopf {
  display: flex;
  align-items: flex-start;
  gap: var(--a3);
  margin-bottom: var(--a3);
}

.hinweiskopf .ikon { margin-top: 0.15em; color: var(--halblaut); }
.hinweiskopf h1 { margin: 0; }

.suchzeile { display: flex; gap: var(--a2); margin-bottom: var(--a4); }
.suchzeile input {
  flex: 1 1 auto;
  font-size: var(--s-17);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.suchzeile button { flex: 0 0 auto; }

.wofinde { margin-bottom: var(--a6); font-size: var(--s-14); }
.wofinde summary { cursor: pointer; color: var(--leise); width: fit-content; }
.wofinde summary:hover { color: var(--ink); }
.wofinde p { margin: var(--a2) 0 0; color: var(--leise); max-width: 62ch; }

.lead { color: var(--halblaut); }

/* Fuer Bildschirmleser da, fuer das Auge nicht */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.erklaerung, .dazu, .unabhaengig { font-size: var(--s-14); }

/* Kein Zeichenmaß: diese Blöcke sind ein bis drei Sätze, keine Textwüste. Ein
   Maß von 62 Zeichen würde sie auf den breiten Seiten mitten im Satz brechen
   und rechts die halbe Spalte leer lassen. Bricht der Satz doch, verteilt
   `balance` die Zeilen gleichmäßig. */
.erklaerung { text-wrap: balance; }
/* Der Satz unter der Überschrift bekommt bewusst kein enges Maß: er ist kurz
   und soll auf einer Zeile stehen, wo die Spalte es hergibt. Die 62-Zeichen-
   Regel gilt für Fließtext, nicht für eine einzelne Zeile. Bricht er doch
   (Handy), verteilt `balance` die Zeilen gleichmäßig. */
.lead { font-size: var(--s-15); line-height: 1.5; text-wrap: balance; }

.zahl, .kennung, .code, .anteil, .zaehler {
  font-variant-numeric: tabular-nums;
}

.vorzeile {
  display: block;
  font-size: var(--s-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--a1);
}

/* Ein Textlink, der weiterfuehrt: Wort, dann Pfeil. */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  min-height: 2.75rem;
  font-size: var(--s-14);
  color: var(--akzent-hell);
  text-decoration: none;
}

.weiter:hover { text-decoration: underline; }
.weiter .ikon { width: 1rem; height: 1rem; }

/* --- Ikonen --------------------------------------------------------------- */

/* Dreizehn Zeichen, gezeichnet wie die Risse: Striche, keine Flaechen. Sie
   liegen in bausteine.html im Dokument, nicht als Schriftart - eine Schrift
   fuer dreizehn Zeichen waere Ladezeit im Flughafen-WLAN. */
.ikon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikon.gross { width: var(--s-30); height: var(--s-30); stroke-width: 1.5; }

/* Zwei Zeichen sind Flaechen, keine Striche: das Flugzeug (dieselbe Zeichnung
   wie in der Marke) und der Punkt in der Sendekeule. */
.ikon.voll, .ikon .voll { fill: currentColor; stroke: none; }

/* --- Kopfzeile ------------------------------------------------------------ */

/* 56 Punkte hoch, dieselbe Flaeche wie der Fuss. Das Zeichen steht ohne
   Plaettchen darin: im dunklen Satz braucht es keinen Traeger mehr, und im
   hellen wirkt es ruhiger. */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  background: var(--flaeche);
  box-shadow: 0 1px 0 var(--linie);
}

/* Die Luft oben und unten ist knapp bemessen, damit die 44 Punkte hohe Suche
   in der Zeile Platz hat, ohne den Kopf zu strecken: 44 + 2 x 4 = 52, die
   Mindesthoehe von 56 bleibt also das Mass. */
.kopf {
  max-width: var(--breite);
  min-height: 3.5rem;
  margin: 0 auto;
  padding: var(--a1) var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
}

/* Auf den breiten Seiten laeuft der Kopf auf dieselbe Kante wie der Inhalt. */
.kopf.weit, .fuss.weit, .werkbank.weit { max-width: 56rem; }
.kopf.breit, .fuss.breit, .werkbank.breit { max-width: 58rem; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.zeichen { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--ruhig); }
.zeichen rect, .zeichen path { fill: currentColor; }
.zeichen .strahl { fill: var(--strich-ja); opacity: 0.5; }

.marke:hover .zeichen .strahl { opacity: 0.85; }

.wortmarke {
  font-size: var(--s-14);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wortmarke .endung { font-weight: 400; opacity: 0.5; }

/* Rechts im Kopf: der Weg zum Melder-Schluessel. */
/* Ein leiser Weg unter einem Formular - er soll da sein, aber niemanden vom
   Absenden ablenken. */
.nebenweg {
  margin-top: var(--a6);
  font-size: var(--s-13);
  color: var(--leise);
}

/* Ein Textweg rechts im Kopf. Frueher der Weg zum Melder-Code; seit dem
   17.08.2026 der Link "Unterstuetzen" (.kaffeeweg), der ohne Einwilligung an
   der Stelle des Buy-Me-a-Coffee-Knopfs steht und nichts laedt. */
.kopfweg {
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  min-height: 2.75rem;
  padding: 0 var(--a1);
  margin-right: calc(var(--a1) * -1);
  font-size: var(--s-13);
  color: var(--akzent-hell);
  text-decoration: none;
  white-space: nowrap;
}

.kopfweg:hover { text-decoration: underline; }
.kopfweg .ikon { width: 1rem; height: 1rem; }

/* --- Buy Me a Coffee, rechts im Kopf --------------------------------------- */

/* Der Knopf von dort, in deren Farben - das ist bewusst deren Marke, nicht
   unsere. Er steht rechts im Kopf, auf der Kante des Inhalts (der Kopf laeuft
   auf dieselbe Breite wie main). Deren Skript zeichnet ihn 60 Punkte hoch und
   210 breit; das sprengt die 56 Punkte des Kopfes und die 375 Punkte des
   Handys, deshalb wird er hier auf Zeilenhoehe gebracht: 40 hoch, so breit wie
   sein Text. Deren Regeln stehen mit !important, unsere gewinnen ueber die
   Spezifitaet.

   Das Skript rendert ihn einmal mit den hellen Werten (Gelb); im dunklen Satz
   faerben wir die Flaeche auf deren Violett um - derselbe Wert, den deren
   Einbettcode fuer den dunklen Knopf vorgibt. Vor dem Text steht das
   Flugzeug-Emoji; nur wenn ein Browser das nicht kann, zeichnet deren Skript
   stattdessen die Tasse, und die faerben wir dann ebenfalls wie im dunklen
   Einbettcode (Gelb). Ohne JavaScript stehen zwei Bilder von deren Server da,
   eins je Satz; gezeigt wird das passende. */
.kaffee { flex: 0 0 auto; margin-left: auto; line-height: 0; }
.kaffee .bmc-btn-container { line-height: 0; }
.kaffee .bmc-btn {
  height: 2.5rem !important;
  min-width: 0 !important;
  padding: 0 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}
/* Deren Skript gibt der Textzeile `width: 100%` - also die volle Innenbreite
   des Knopfs. Sie steht aber hinter dem Emoji und ragt deshalb um genau dessen
   Breite samt Abstand (30 Punkte) nach rechts hinaus. Zu sehen war davon
   nichts: die Buchstaben enden im Knopf, hinaus ragte nur der leere Kasten -
   auf 320 Punkten schob er die Seite auf 322. Mit `auto` ist der Kasten so
   breit wie sein Text (29.08.2026 im Browser nachgemessen: 107 statt 137
   Punkte, Seite wieder genau 320; am Knopf selbst aendert sich nichts). */
.kaffee .bmc-btn-text { width: auto !important; }

.kaffee .bmc-btn svg { height: 1.375rem !important; }
.kaffee img { display: block; height: 2.5rem; width: auto; }
.kaffee-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .kaffee .bmc-btn { background-color: #b2a7f8 !important; }
  :root:not([data-thema="hell"]) .kaffee .logo-coffee { fill: #FFDD00; }
  :root:not([data-thema="hell"]) .kaffee-hell { display: none; }
  :root:not([data-thema="hell"]) .kaffee-dunkel { display: inline-block; }
}
:root[data-thema="dunkel"] .kaffee .bmc-btn { background-color: #b2a7f8 !important; }
:root[data-thema="dunkel"] .kaffee .logo-coffee { fill: #FFDD00; }
:root[data-thema="dunkel"] .kaffee-hell { display: none; }
:root[data-thema="dunkel"] .kaffee-dunkel { display: inline-block; }

/* --- Die Suche (nur auf der Startseite) ----------------------------------- */

/* Ein Formular fuer alle Breiten: `.suchgross` steht unter der Frage im
   Inhalt, auf dem Handy so breit wie die Standkarte darunter. Das kleine
   Formular in der Kopfzeile (`.suchkopf`) ist ausser Dienst - Markup und
   Regeln bleiben stehen, falls die Kopfzeilen-Suche zurueckkommt. Das
   Ausblenden steht am Ende des Abschnitts. */

/* --- Die kleine Suche in der Kopfzeile ------------------------------------ */

/* Jede Kennung ist sechs Zeichen lang - "D-AIXP", "9H-AML", "OE-LWK". Mehr
   muss das Feld nicht fassen, und genau deshalb passt die Suche neben die
   Marke, statt eine zweite Zeile zu brauchen.

   Die Rechnung auf 375 Punkten: 343 nutzbar, davon Marke 180, Abstand 12,
   Feld 100, Abstand 8, Knopf 32 - macht 332. Wird es enger (320 Punkte),
   weicht die Wortmarke zurueck, nicht die Suche: sie hat `min-width: 0`
   und kuerzt mit Auslassungspunkten.

   Flach und breit statt hoch und schmal: 32 Punkte hoch reichen fuer eine
   Zeile mit 17 Punkten Schrift, und was an Hoehe wegfaellt, kommt der Breite
   zugute. Tiefer geht es nicht - darunter klemmt die Schrift zwischen den
   Kanten, und kleiner setzen darf man sie nicht: unter 16 Punkten zoomt iOS
   beim Antippen die ganze Seite heran. */
.suchkopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--a2);
}

/* `form.suchkopf` statt `.suchkopf`: das allgemeine Feld weiter unten im
   Stylesheet ist gleich stark und steht spaeter - es wuerde sonst gewinnen. */
form.suchkopf input {
  width: 6.25rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0 var(--a2);
  font-size: var(--s-17);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}

form.suchkopf input::placeholder {
  font-weight: 400;
  letter-spacing: 0;
}

/* Der Knopf ist quadratisch und so hoch wie das Feld. Das Wort "Nachschauen"
   steht als aria-label darin - vorgelesen wird also weiterhin ein Satz, kein
   Zeichen. */
.suchkopf button {
  flex: 0 0 auto;
  width: 2rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0;
}

.suchkopf button .ikon { width: 1.125rem; height: 1.125rem; }

/* Ab 392 Punkten ist Platz uebrig - der geht ins Feld, nicht in den Abstand. */
@media (min-width: 24.5rem) {
  form.suchkopf input { width: 7rem; }
}

/* Seit der Buy-Me-a-Coffee-Knopf rechts im Kopf steht (17.08.2026), wird es
   schon unter 400 Punkten eng: Zeichen, Schriftzug und Knopf teilen sich die
   Zeile. Dann faellt die Endung ".de" weg - so passt es auf die 375 Punkte,
   auf die entworfen wird, und auf die 360 der gaengigen Android-Geraete. */
@media (max-width: 25rem) {
  .wortmarke .endung { display: none; }
}

/* Unter 328 Punkten geht auch der Schriftzug: ein angeschnittener Domainname
   sieht kaputt aus, das Zeichen allein sieht gewollt aus. */
@media (max-width: 20.5rem) {
  .wortmarke { display: none; }
}

/* --- Die grosse Suche unter der Frage ------------------------------------- */

/* Die Suche darf ein richtiges Feld sein: mit dem Wort auf dem Knopf statt
   der Lupe. Feld und Knopf sind ein Stueck - der Knopf sitzt in der Flaeche
   des Feldes, nicht daneben. Zwei einzelne Kaestchen unter der Frage standen
   da wie abgestellt, nicht wie hingehoert. Breiter als 480 Punkte wird das
   Ganze nicht - ein Feld fuer sechs Zeichen, das ueber die halbe Seite
   laeuft, sieht aus wie ein Fehler. */
.suchgross {
  max-width: 26rem;
  margin: var(--a4) 0 var(--abschnitt);
  display: flex;
  align-items: center;
  gap: var(--a2);
  /* Rund wie eine Pille (Vincents Umbau vom 26.08.2026), links etwas
     Einzug fuer den Text. */
  padding: var(--a1) var(--a1) var(--a1) var(--a3);
  background: var(--karte);
  border: 1px solid var(--linie-bedien);
  border-radius: 999px;
  transition: border-color var(--tempo) var(--kurve);
}

.suchgross:hover { border-color: var(--akzent); }

/* Die Fokusanzeige traegt der gemeinsame Rahmen, nicht das Feld darin -
   sonst zeichnet sich ein Kasten im Kasten. */
.suchgross:has(input:focus) {
  border-color: var(--fokus);
  box-shadow: 0 0 0 1px var(--fokus);
}

form.suchgross input {
  flex: 1 1 auto;
  min-width: 0;
  /* 2.75rem sind die 44 Punkte aus DESIGN Paragraph 2 - kleiner wird ein
     Tippziel nicht, auch wenn die Suche seit dem 26.08.2026 flacher ist. */
  min-height: 2.75rem;
  background: transparent;
  border: 0;
  font-size: var(--s-18);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

form.suchgross input:focus-visible { outline: none; }

form.suchgross input::placeholder {
  font-weight: 400;
  letter-spacing: 0;
}

/* Der Knopf ist quadratisch und traegt die Lupe - das Wort "Nachschauen"
   steht als aria-label darin und wird vorgelesen. Radius des Knopfs =
   aeusserer Radius minus Innenluft, damit die Rundungen parallel laufen. */
.suchgross button {
  flex: 0 0 auto;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 999px;
}

.suchgross button .ikon { width: 1.375rem; height: 1.375rem; }

/* --- Nur eine der beiden Suchen ist zu sehen ------------------------------- */

/* Die Suche wandert nicht mehr in die Kopfzeile: sie steht auf jeder Breite
   im Block unter der Frage. Die 30rem-Grenze oben greift auf dem Handy nie -
   dort ist die Spalte schmaler, das Feld laeuft also ueber die volle Breite,
   buendig mit der Standkarte. */
.suchkopf { display: none; }

/* --- Die Vorschlaege beim Tippen ------------------------------------------ */

/* Eine eigene Liste statt des <datalist> des Browsers: die stand auf dem
   iPhone ueber dem Feld, in das man gerade tippt. Diese hier steht im Fluss
   der Seite direkt unter dem Feld - sie kann nichts verdecken, weil sie das,
   was darunter kommt, wegschiebt. Dieselbe Liste auf der Startseite (unter
   der grossen Suche) und im Meldeformular (unter dem Kennungsfeld). */
.vorschlaege {
  list-style: none;
  margin: var(--a2) 0;
  padding: var(--a1);
  background: var(--karte-hoch);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--r-gross);
}

/* Unter der grossen Suche haengt die Liste am unteren Rand des Rahmens - so
   breit wie er, und mit demselben Abstand nach unten wie er selbst hatte. */
.suchgross + .vorschlaege {
  max-width: 30rem;
  margin: calc(var(--abschnitt) * -1 + var(--a2)) 0 var(--abschnitt);
}

.vorschlaege li {
  display: flex;
  align-items: baseline;
  gap: var(--a3);
  min-height: 2.75rem;
  padding: var(--a2) var(--a3);
  border-radius: var(--r-klein);
  cursor: pointer;
}

.vorschlaege li:hover, .vorschlaege li[aria-selected="true"] {
  background: var(--akzent-flaeche);
}

/* Die eine Zeile, wenn nichts gefunden wurde oder die Suche nicht antwortet.
   Keine Auswahl, deshalb ruhig und ohne Zeigefinger. */
.vorschlaege li.keine {
  display: block;
  min-height: 0;
  color: var(--ruhig);
  cursor: default;
}

.vorschlaege b {
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.vorschlaege span {
  font-size: var(--s-13);
  color: var(--leise);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Werkbank: die zwei Schalter fuer den Bau ----------------------------- */

/* Nur vom eigenen Rechner sichtbar, wie die Pruefliste. Sie gehoert nicht zur
   Seite und sieht auch nicht so aus: schmale Zeile, gestrichelte Kante. */
.werkbank {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand) var(--a2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2);
  font-size: var(--s-11);
}

.werkbank > span {
  color: var(--leise);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schalter {
  display: inline-flex;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r-klein);
  overflow: hidden;
}

.schalter a, .schalter button {
  min-height: 1.75rem;
  padding: 0 var(--a2);
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--leise);
  font: inherit;
  font-size: var(--s-11);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tempo) var(--kurve);
}

.schalter a:hover, .schalter button:hover {
  background: var(--offen-flaeche);
  color: var(--ink);
}

.schalter [aria-pressed="true"], .schalter [aria-current="true"] {
  background: var(--akzent-flaeche);
  color: var(--akzent-hell);
  font-weight: 600;
}

/* Steht die Vorschau an, muss das unuebersehbar sein - sonst haelt man
   erfundene Zahlen fuer den Stand. */
.werkbank.an { border-bottom: 1px dashed var(--viel-schrift); }
.werkbank.an > span:first-child { color: var(--viel-schrift); font-weight: 700; }

/* --- Leiste am Fuss: die vier Wege ---------------------------------------- */

/* Der Boden traegt die Leiste und - solange niemand geantwortet hat - den
   Banner zur Einwilligung darueber. Er klebt am unteren Rand; die Leiste
   selbst klebt nicht mehr, sie steht im Boden. */
.boden {
  position: sticky;
  bottom: 0;
  z-index: var(--ebene-leiste);
}

.leiste {
  background: var(--ueber);
  backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--linie-stark);
}

/* --- Die Einwilligung ----------------------------------------------------- */

/* Ein Banner fuer beides, Melder-Code und Buy-Me-a-Coffee-Knopf (Vincents
   Entscheidung, 17.08.2026). Steht ueber der Leiste, bis jemand antwortet;
   ein Satz, drei Wege, die Auswahl aufklappbar. Dieselbe Flaeche wie Kopf
   und Fuss, harte Linie oben - kein Schatten, kein Verlauf. */
.einwilligung {
  background: var(--flaeche);
  box-shadow: 0 -1px 0 var(--linie-stark);
  font-size: var(--s-13);
}

.einwilligung-inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a3) var(--rand);
}

.einwilligung-inhalt.weit { max-width: 56rem; }
.einwilligung-inhalt.breit { max-width: 58rem; }

.einwilligung-satz { margin: 0 0 var(--a2); max-width: 72ch; }

/* Eine Zeile: die zwei Knoepfe, daneben "Auswaehlen", rechts der Weg zum
   Datenschutz. Klappt die Auswahl auf, nimmt sie eine eigene volle Zeile. */
.einwilligung-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2) var(--a3);
}

.einwilligung-form > button { min-height: 2.5rem; padding: 0 var(--a3); }
.einwilligung-form .mehr { color: var(--akzent-hell); margin-left: auto; }

/* "Auswaehlen": ein details, damit es ohne JavaScript geht. Die Zeile sieht
   aus wie die Wege im Fuss - Text, unterstrichen. */
.einwilligung-form .auswahl[open] { flex: 1 1 100%; }
.einwilligung-form .auswahl summary {
  display: inline-flex;
  align-items: center;
  /* 44 Punkte wie jedes andere Ziel (DESIGN Paragraph 2) - vorher waren es
     32, ausgerechnet an der Stelle mit der feineren Wahl. */
  min-height: 2.75rem;
  color: var(--akzent-hell);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  list-style: none;
}
.einwilligung-form .auswahl summary::-webkit-details-marker { display: none; }
.einwilligung-form .auswahl summary::after { content: " \25BE"; }
.einwilligung-form .auswahl[open] summary::after { content: " \25B4"; }

.einwilligung-form .auswahl .wahl {
  align-items: flex-start;
  /* Die 44 Punkte aus label.wahl bleiben stehen; frueher hob ein min-height
     von 0 sie hier auf. */
  padding: var(--a1) 0;
  font-size: var(--s-13);
  line-height: 1.45;
}
.einwilligung-form .auswahl .wahl input { margin-top: 0.2em; flex: 0 0 auto; }
.einwilligung-form .auswahl button { min-height: 2.5rem; padding: 0 var(--a3); margin: var(--a1) 0 0; }

/* Auf der eigenen Seite (/einwilligung) ist Platz: die Auswahl steht offen,
   die Schrift ist die normale. */
.einwilligung-seite { font-size: var(--s-15); }
.einwilligung-seite .auswahl .wahl { font-size: var(--s-14); }

/* Der Hinweis im Meldeformular und auf der Schluesselseite, wenn der
   Melder-Code nicht erlaubt ist: der Grund, darunter der Weg. */
.einwilligung-noetig { margin-bottom: var(--a3); }

/* Solange auf dem Handy getippt wird, ist der Boden weg - Leiste und, falls
   er noch steht, der Banner. Die Tastatur schoebe beides sonst nach oben,
   mitten in das Formular - und wer tippt, will gerade nirgendwohin. `tippt`
   setzt base.html per Skript, nur bei Fokus in einem Text- oder Datumsfeld;
   auf dem grossen Schirm bleibt alles wie es ist. */
@media (pointer: coarse) {
  body.tippt .boden { display: none; }
}

.leiste ul {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.leiste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a1);
  padding: var(--a2) 0 var(--a3);
  color: var(--leise);
  font-size: var(--s-11);
  text-decoration: none;
  box-shadow: inset 0 2px 0 transparent;
  transition: color var(--tempo) var(--kurve);
}

.leiste a .ikon { width: 1.375rem; height: 1.375rem; }
.leiste a:hover { color: var(--ink); }

.leiste a[aria-current="page"] {
  color: var(--akzent);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--akzent);
}

/* --- Fuss ----------------------------------------------------------------- */

footer {
  margin-top: auto;   /* auf kurzen Seiten: Fuss und Leiste ganz nach unten (body ist ein Spaltenstapel) */
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
}

.fuss {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a6) var(--rand);
  font-size: var(--s-13);
}

.fuss p { margin: 0 0 var(--a2); max-width: 72ch; }
.fuss p:last-child { margin-bottom: 0; }
.fuss .unabhaengig { color: var(--ink); font-weight: 600; }

/* Die Wege des Fusses: die Antwortseite und der Lufthansa-Verweis in einer
   gemeinsamen Zeile, die Pflichtseiten nebeneinander darunter. Bis zum
   10.09.2026 stand der Lufthansa-Verweis allein in seiner Zeile; seit
   Vincents Entscheidung teilen sich beide eine. Wird eine Zeile zu schmal,
   bricht sie um, statt die Schrift zu schrumpfen - auf dem Handy stehen die
   beiden Wege deshalb weiter untereinander, mit demselben Abstand wie
   frueher: der Zeilenabstand (--a2) ist so gross wie der Absatzrand (.fuss p),
   der vorher zwischen ihnen lag. Ein eigenes margin-top stand hier bis zum
   10.09.2026 - wirkungslos, weil .fuss p es ueberstimmt; darum geloescht. */
.fusswege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a4);
}

/* Kein Zeichenmass fuer die Wege ab der Lesebreite (42rem): die beiden
   Verweise sind zusammen gut 80 Zeichen lang, die 72 Zeichen des Fliesstextes
   (.fuss p) wuerden sie umbrechen, obwohl die Zeile Platz hat. Darunter bleibt
   das Mass stehen - dort soll sich nichts aendern. */
@media (min-width: 42rem) {
  .fuss .fusswege { max-width: none; }
}

/* Hell oder Dunkel, als Zeile im Fuss: "Ansicht: Automatisch · Hell · Dunkel".
   Die Stellungen sehen aus wie die Wege darueber - Text, unterstrichen -, nur
   die gewaehlte steht ohne Unterstrich und in der Tinte. Kein Knopf, kein
   Symbol: die Wahl ist eine seltene Handlung und soll nicht danach aussehen,
   als gehoerte sie zur Bedienung der Seite. */
.ansichtwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a1) var(--a3);
  color: var(--leise);
}

.ansichtwahl button {
  min-height: 0;
  padding: var(--a1) 0;
  margin: calc(var(--a1) * -1) 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: var(--akzent-hell);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ansichtwahl button:hover { background: none; text-decoration-thickness: 2px; }
.ansichtwahl button:active { transform: none; }

.ansichtwahl button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}

/* --- Pflichtseiten: reiner Lesetext ---------------------------------------- */

/* Hier wird gelesen, nicht ueberflogen: eine Spalte, ruhiger Zeilenabstand,
   Zeilenlaenge auf Lesebreite begrenzt. Keine Kacheln, keine Farbe - die
   bleibt der Aussage ueber ein Flugzeug vorbehalten. */
.rechtstext { max-width: 68ch; margin-top: var(--a6); }

.rechtstext section + section { margin-top: var(--a8); }

.rechtstext h2 {
  margin-bottom: var(--a3);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--linie);
}

.rechtstext p {
  margin: 0 0 var(--a4);
  line-height: 1.65;
}

.rechtstext p:last-child { margin-bottom: 0; }

/* Nicht `.stand` nennen - der Name ist weiter unten schon fuer die kleine
   Statusmarke in Listen vergeben. */
.rechtsstand {
  margin-top: var(--a8);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: var(--s-13);
}

/* Frueher standen hier zwei Spalten. Seit im Fuss nur noch ein Satz und eine
   Zeile mit Wegen stehen, waere die zweite Spalte leer. */

/* --- Formularteile: ein Vokabular fuer alle Seiten ------------------------- */

input, select, textarea, button { font: inherit; color: var(--ink); }

input[type="text"], input:not([type]), input[type="date"], select, textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--a2) var(--a3);
  background: var(--karte);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--rund);
  transition: border-color var(--tempo) var(--kurve);
}

textarea { min-height: 5.25rem; resize: vertical; line-height: 1.5; }

input:hover, select:hover, textarea:hover { border-color: var(--akzent); }
input::placeholder, textarea::placeholder { color: var(--leise); opacity: 1; }

input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Der Knopf ist umrissen, nicht gefuellt: gefuellte Flaechen gehoeren der
   Aussage. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  min-height: 2.875rem;
  padding: var(--a2) var(--a4);
  background: transparent;
  color: var(--akzent-hell);
  border: 1px solid var(--akzent);
  border-radius: var(--rund);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}

button:hover { background: var(--akzent-flaeche); }
button:active { transform: translateY(1px); }

button.leise {
  color: var(--halblaut);
  border-color: var(--linie-bedien);
  font-weight: 500;
}

button.leise:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

button.breitknopf { width: 100%; min-height: 3rem; border-radius: var(--r-gross); }

.feld { margin: 0 0 var(--a4); }

.feld > label, fieldset legend {
  display: block;
  font-size: var(--s-13);
  font-weight: 600;
  margin-bottom: var(--a1);
}

.feld .dazu { display: block; margin-top: var(--a1); font-size: var(--s-12); }

fieldset {
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  padding: var(--a3);
  margin: 0 0 var(--a4);
}

fieldset legend { padding: 0 var(--a1); }

/* Das versteckte Feld im Meldeformular: `display: none` nimmt es aus der
   Seite und aus dem Vorlesebaum. Nur ein Programm, das den Quelltext liest,
   findet es noch - und faellt damit auf. */
.falle { display: none; }

/* Die Uebersichtstabelle in der Datenschutzerklaerung. Sieben Zeilen, vier
   Spalten - auf dem Handy passt das nicht nebeneinander, deshalb schiebt sie
   sich in ihrem eigenen Rahmen. Die Seite selbst bleibt ruhig. */
.tabellenrahmen {
  overflow-x: auto;
  margin: var(--a3) 0;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
}

.datentabelle {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--s-14);
  line-height: 1.45;
}

.datentabelle th, .datentabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--linie);
}

.datentabelle thead th {
  font-weight: 600;
  background: var(--karte);
}

.datentabelle tbody tr:last-child td { border-bottom: 0; }

label.wahl {
  display: flex;
  gap: var(--a2);
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--s-15);
  font-weight: 400;
}

label.wahl input { width: auto; min-height: 0; }

/* Der Satz unter der Kopfzeile: zwei Zeilen, die zweite kleiner und leiser
   ("*und auch, was nicht."), eng gesetzt - ein Block, kein Absatzpaar. */
.fragenblock .lead { line-height: 1.3; }
.fragenblock .lead .sternchen {
  display: block;
  margin-top: var(--a1);
  font-size: var(--s-12);
  color: var(--leise);
}

/* --- Startseite: Frage ---------------------------------------------------- */

/* Die Frage steht seit dem 05.09.2026 auf Vincents Wunsch auf jeder Breite -
   auch auf dem Handy. Die Zusatzklasse, die sie schmal versteckt hat, ist
   damit weg; hier bleibt nur noch die Groesse. Sie darf umbrechen: keine
   feste Breite, kein nowrap, sonst schoebe sie auf 320 Punkten die Seite. */
h1.frage {
  font-size: var(--s-27);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: var(--a2);
}

@media (min-width: 40rem) {
  h1.frage { font-size: var(--s-40); }
}

/* --- Startseite: das obere Drittel ----------------------------------------- */

/* Frage, Satz und Suche bilden mit der Standkarte ein Paar: links wird
   gefragt, rechts steht der Stand. Auf dem Handy bleibt alles untereinander;
   erst wenn der Schirm zwei Spalten hergibt (dieselben 60rem wie bei den
   Ranglisten), ruecken die Bloecke nebeneinander - dann lehnt die Suche an
   der Karte, statt allein vor leerer Flaeche zu stehen. */
@media (min-width: 60rem) {
  .oben {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--a12);
    align-items: center;
    margin: 0 0 var(--abschnitt);
  }
  .oben .umbau { margin: 0; }
  .oben .suchgross { margin-bottom: 0; }
  /* Ohne Abstand unter dem Feld darf die Liste auch nicht mehr nach oben
     ziehen - sonst deckt sie 18 Punkte des Feldes samt Lupe zu
     (Vincent, 26.08.2026). */
  .oben .suchgross + .vorschlaege { margin-top: var(--a2); }
  .oben .erklaerung { margin-bottom: 0; }
}

/* --- Die Standkarte: eine Zahl, ein Feld ---------------------------------- */

/* Der Stand des Umbaus als eine anklickbare Flaeche - Zahl, Anteil und
   darunter die ganze Flotte als Striche. */
.standkarte {
  display: block;
  width: 100%;
  margin: 0 0 var(--abschnitt);
  /* Unten weniger Polster: das Strichfeld bringt selbst rund 12 Punkte
     Luft mit, so ist der Abstand unten gleich dem ueber der Vorzeile
     (Vincent, 26.08.2026). */
  padding: var(--a4) var(--a4) var(--a1);
  background: var(--karte-hoch);
  border: 0;
  border-radius: var(--r-gross);
  color: inherit;
  text-align: left;
  text-decoration: none;
  --schnitt: var(--karte-hoch);
}

.standkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a3);
  margin-bottom: var(--a3);
}

/* "61 von 739": die erste Zahl ist der Blickfang, der Rest des Satzes bleibt
   klein. Deshalb haengt die Groesse am Element, nicht an einer Zusatzklasse -
   <b> ist die Zahl, um die es geht, <span> die, gegen die gezaehlt wird. */
.standzahl {
  display: block;
  font-size: var(--s-16);
  line-height: 1.2;
  color: var(--leise);
}

.standzahl b.zahl {
  font-size: var(--s-40);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.standzahl span.zahl { color: var(--leise); }

/* Dieselbe Zahl als Ueberschrift einer Seite - dort steht der Anteil daneben
   statt darueber. */
.standgross {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a3);
  margin: 0 0 var(--a3);
}

.standgross .standzahl { flex: 1 1 auto; }

@media (min-width: 40rem) {
  .standgross b.zahl { font-size: var(--s-52); }
}

/* Die Strichliste eines einzelnen Flugzeugs sitzt in einer eigenen Flaeche -
   sonst schwimmt das Feld ohne Kante auf der Seite. */
.feldkarte {
  padding: var(--a3);
  background: var(--karte);
  border-radius: var(--rund);
}

/* Der Anteil sitzt in der Farbe der Aussage - gruen, sobald es etwas zu
   melden gibt, sonst still. */
.anteilmarke {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  padding: 3px var(--a2);
  border-radius: var(--r-klein);
  background: var(--offen-flaeche);
  color: var(--offen-schrift);
  font-size: var(--s-16);
  font-weight: 600;
}

.anteilmarke.ja { background: var(--ja-flaeche); color: var(--ja-schrift); }
.anteilmarke .ikon { width: 0.875rem; height: 0.875rem; }

/* --- Die Strichliste ------------------------------------------------------ */

/* Ein Strich ist ein Flugzeug. Deshalb steht hier kein Diagramm, sondern die
   Flotte selbst - man sieht auf einen Blick, wie gross die Aufgabe ist. */
.strichfeld {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luecke);
  margin: 0 0 var(--a3);
}

.strichfeld i {
  width: var(--strich);
  height: var(--strich-hoch);
  border-radius: 0.5px;
  background: var(--strich-leer);
}

.strichfeld.gross i { height: 1.25rem; }

/* Im Kopf der Startseite steht die ganze Flotte auf 343 Punkten. Dort wird die
   Teilung enger, sonst passt die Flotte nicht in eine Karte. */
.strichfeld.eng { gap: 1px; }
.strichfeld.eng i { width: 2px; height: 1.125rem; border-radius: 0; }

.strichfeld i.j { background: var(--strich-ja); }
.strichfeld i.v { background: var(--strich-viel); }
.strichfeld i.n { background: var(--strich-nein); }
.strichfeld i.f { background: transparent; box-shadow: inset 0 0 0 1px var(--strich-leer); }

/* Das eine Flugzeug, um das es gerade geht, muss in hunderten Strichen zu finden
   sein. Alle anderen treten zurueck, dieser eine wird breiter, hoeher und
   traegt seine Statusfarbe. */
.strichfeld.eines i { background: var(--linie); }

.strichfeld.eines i.dieses {
  width: 5px;
  height: 1.5rem;
  margin: -3px 0;
  background: var(--halblaut);
  outline: 1px solid var(--karte);
}

.strichfeld.eines i.dieses.j { background: var(--strich-ja); }
.strichfeld.eines i.dieses.v { background: var(--strich-viel); }
.strichfeld.eines i.dieses.n { background: var(--strich-nein); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a4);
  padding: 0;
  margin: 0 0 var(--a4);
  list-style: none;
  font-size: var(--s-12);
}

.legende li { display: flex; align-items: center; gap: var(--a2); }

/* Auf dem Handy bleibt die Legende eine Zeile (Vincent, 26.08.2026): kleiner
   und enger statt umbrechen. Die Rechnung stand auf 375 Punkten - auf 320
   stimmt sie nicht: dort braucht die Zeile 327 Punkte, nutzbar sind 288, die
   Seite liess sich um 23 Punkte seitlich schieben (gemessen am 29.08.2026).
   Statt umzubrechen schiebt sich jetzt die Legende selbst, wie die
   Filterreihe: der Rahmen reicht bis an beide Seitenraender, damit nichts
   abgeschnitten aussieht. */
@media (max-width: 40rem) {
  .legende {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: var(--s-11);
    gap: var(--a1) var(--a2);
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--rand) * -1) var(--a4);
    padding: 0 var(--rand);
  }
  .legende::-webkit-scrollbar { display: none; }
  .legende li { gap: var(--a1); flex: 0 0 auto; }
}

.legende i {
  width: var(--strich);
  height: 0.75rem;
  border-radius: 0.5px;
  background: var(--strich-leer);
  flex: 0 0 auto;
}

.legende i.j { background: var(--strich-ja); }
.legende i.v { background: var(--strich-viel); }
.legende i.n { background: var(--strich-nein); }

/* --- Der Balken ----------------------------------------------------------- */

/* Dieselbe Figur wie die Strichliste, nur in einer Reihe: eine durchgehende
   Bahn, die von oben in den Takt der Striche geschnitten wird. Der Schnitt
   liegt als Auflage darueber, damit die Luecken ueber alle Farbabschnitte
   hinweg an derselben Stelle sitzen. */
.bahn {
  position: relative;
  display: flex;
  height: 0.5rem;
  background: var(--strich-leer);
  border-radius: 1px;
  overflow: hidden;
}

.bahn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(var(--takt) - var(--luecke)),
    var(--schnitt) calc(var(--takt) - var(--luecke)) var(--takt)
  );
}

/* Ein einzelnes bestaetigtes Flugzeug unter 269 waere ein Balken von einem
   Punkt. Mindestens ein Strich muss es sein, sonst luegt die Null. */
.bahn .teil { height: 100%; min-width: var(--takt); }
.bahn .teil.j { background: var(--strich-ja); }
.bahn .teil.v { background: var(--strich-viel); }
.bahn .teil.n { background: var(--strich-nein); }

/* --- Zuletzt bestaetigt: eine schiebbare Reihe ---------------------------- */

.zuletzt {
  display: flex;
  gap: var(--a2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--rand) * -1) var(--abschnitt);
  padding: 0 var(--rand);
}

.zuletzt::-webkit-scrollbar { display: none; }

.zuletzt a {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  width: 8.5rem;
  padding: var(--a3);
  background: var(--karte-hoch);
  border-radius: var(--rund);
  color: var(--ink);
  text-decoration: none;
}

/* Der Rahmen liegt nach innen (-1px): die schiebbare Reihe schneidet ab,
   was ueber ihre Ober- und Unterkante hinausragt - ein aussen liegender
   Rahmen waere dort unsichtbar. */
.zuletzt a:hover { outline: 1px solid var(--linie-stark); outline-offset: -1px; }
.zuletzt .oben { height: 3px; background: var(--strich-ja); border-radius: 1px; }
.zuletzt .kennung { font-size: var(--s-16); font-weight: 600; letter-spacing: 0.02em; }
.zuletzt .dazu { font-size: var(--s-11); line-height: 1.35; }

/* --- Zeilen mit Riss: Muster, Flotte, Airline ----------------------------- */

/* Die Risse sind vorerst abgeschaltet (silhouettes.AUSSPIELEN); die Regeln
   bleiben, damit ein Umlegen des Schalters reicht. Alle Risse sind im selben
   Massstab gezeichnet, 4,01 Punkte je Meter. Der 747-8 ist deshalb doppelt
   so lang wie die A319 - der Unterschied ist echt. */
.riss { display: block; width: 100%; height: auto; color: var(--ruhig); }

.risskarte {
  margin: 0 0 var(--abschnitt);
  padding: var(--a4) var(--a3) var(--a3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
}

.zeilen { list-style: none; padding: 0; margin: 0 0 var(--a2); }

.zeilen li { border-bottom: 1px solid var(--linie); }

.zeilen a {
  display: flex;
  align-items: center;
  gap: var(--a3);
  min-height: 3.75rem;
  padding: var(--a3) var(--a2);
  margin: 0 calc(var(--a2) * -1);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--tempo) var(--kurve);
}

.zeilen a:hover { background: var(--offen-flaeche); --schnitt: var(--offen-flaeche); }

.zeilen .bild { flex: 0 0 4.625rem; width: 4.625rem; height: 1.625rem; }
.zeilen .mitte { flex: 1 1 auto; min-width: 0; }

.zeilen .name, .zeilen .kennung {
  display: block;
  font-size: var(--s-15);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.zeilen .kennung { font-size: var(--s-16); letter-spacing: 0.02em; }

.zeilen .zaehler {
  display: block;
  font-size: var(--s-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeilen .anteil {
  flex: 0 0 auto;
  font-size: var(--s-16);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.zeilen .pfeil { flex: 0 0 auto; width: 0.9375rem; height: 0.9375rem; color: var(--leise); }

/* Musterzeile mit grossem Riss: Name und Zaehler oben, darunter die
   Zeichnung ueber die volle Breite - so stimmt der Massstab untereinander. */
.risszeilen { list-style: none; padding: 0; margin: 0; }
.risszeilen li { border-bottom: 1px solid var(--linie); }

.risszeilen a {
  display: block;
  padding: var(--a3) 0 var(--a4);
  color: var(--ink);
  text-decoration: none;
}

.risszeilen .kopf2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a2);
  margin-bottom: var(--a1);
}

.risszeilen .name { font-size: var(--s-15); font-weight: 600; }
.risszeilen .zaehler { font-size: var(--s-13); }
.risszeilen a:hover .name { text-decoration: underline; }

/* --- Die Antwort: der Kopf der Flugzeugseite ------------------------------ */

/* Ueber allem eine Flaeche in der Farbe der Aussage. Unter der Lesebreite
   steht sie ausserhalb davon: dort traegt sie die Seite und laeuft bis an
   beide Raender. Ab der Lesebreite (42rem, siehe unten) liegt sie als Flaeche
   in der Spalte - so breit wie die Karten darunter, sonst waere sie nur 16
   Punkte breiter als sie und saehe aus wie ein Versehen (Vincents
   Entscheidung vom 10.09.2026). */
.antwortkopf {
  margin: calc(var(--a6) * -1) calc(var(--rand) * -1) var(--a4);
  padding: var(--a3) var(--rand) var(--abschnitt);
}

.antwortkopf.ja { background: var(--ja-flaeche); color: var(--ja-schrift); }
.antwortkopf.nein { background: var(--nein-flaeche); color: var(--nein-schrift); }
.antwortkopf.vielleicht { background: var(--viel-flaeche); color: var(--viel-schrift); }
.antwortkopf.offen { background: var(--offen-flaeche); color: var(--offen-schrift); }

/* Fremdgeraet ist keine Aussage ueber Starlink, sondern ein Sonderfall.
   Deshalb Umriss statt Flaeche. */
.antwortkopf.fremd {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r-gross);
  margin-inline: 0;
}

.antwortkopf .zeile {
  display: flex;
  align-items: center;
  gap: var(--a2);
  margin-bottom: var(--a6);
}

.zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: calc(var(--a3) * -1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--rund);
}

.zurueck .ikon { width: 1.3125rem; height: 1.3125rem; }
.zurueck:hover { background: color-mix(in oklab, currentColor 12%, transparent); }

.antwortkopf .woher { font-size: var(--s-13); opacity: 0.85; }

.antwortkopf .kennung {
  display: block;
  margin: 0 0 var(--a3);
  font-size: var(--s-40);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.antwortkopf .aussage {
  display: flex;
  align-items: center;
  gap: var(--a2);
  margin: 0 0 var(--a2);
  font-size: var(--s-27);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* 66 Zeichen je Zeile - die obere Kante dessen, was sich noch fluessig liest.
   Auf dem Handy greift die Grenze nie: dort ist die Spalte 343 Punkte breit
   und damit ohnehin schmaler. Ab der Lesebreite faellt sie weg (siehe den
   Block unten): dort soll der Satz die Spalte fuellen wie der graue Hinweis
   darunter, statt rechts die halbe Flaeche leer zu lassen (Vincents
   Entscheidung vom 10.09.2026). */
.antwortkopf .erklaerung {
  margin: 0;
  color: inherit;
  opacity: 0.85;
  max-width: 66ch;
}

/* Ab der Lesebreite (--breite: 42rem) liegt der Kopf in der Spalte: dieselbe
   Breite und dieselben runden Ecken wie die Karten darunter, oben der normale
   Abstand zur Kopfzeile. Das seitliche Polster bleibt --rand (16 Punkte), so
   fluchtet sein Text mit dem Text in den Karten. Der Erklaersatz laeuft bis
   zur rechten Kante: kein Zeichenmass mehr, und `pretty` statt `balance`,
   damit die Zeilen von oben nach unten voll laufen und nur die letzte kurz
   bleibt. Unter 42rem bleibt alles wie auf dem Handy. */
@media (min-width: 42rem) {
  .antwortkopf {
    margin: 0 0 var(--a4);
    border-radius: var(--r-gross);
  }

  .antwortkopf .erklaerung {
    max-width: none;
    text-wrap: pretty;
  }
}

/* --- Premiere: Podest-Karte und kleiner Pokal ------------------------------
   Die Auszeichnung eines Flugzeugs (PREMIEREN in texts.py): Siegertreppchen
   als eigene Karte direkt unter dem Antwortkopf, der kleine Pokal haengt in
   der Flottenliste an der Kennung. Entwurf vom 20.08.2026 (Fassung B+C). */
.premierenkarte {
  margin-top: var(--a4);
  padding: var(--a6) var(--a4);
  background: var(--karte);
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  border-radius: var(--r-gross);
  text-align: center;
}

.premierenkarte .podest { display: block; width: 9rem; height: 5.25rem; margin: 0 auto; }

.premierenkarte .titel {
  margin: var(--a3) 0 0;
  font-weight: 650;
  font-size: var(--s-16);
  text-wrap: balance;
}

.premierenkarte .dazu { margin: 0.2rem 0 0; }

.zeilen .kennung .minipokal {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.3rem;
  vertical-align: -0.08em;
}

.pruefmarke {
  display: inline-block;
  font-size: var(--s-13);
  font-weight: 600;
  padding: 0 var(--a2);
  margin-left: var(--a2);
  border: 1px solid currentColor;
  border-radius: 1rem;
  vertical-align: 0.15em;
}

@media (min-width: 40rem) {
  .antwortkopf .kennung { font-size: var(--s-52); }
}

/* Kleine Statusmarke in Listen */
.stand {
  flex: 0 0 auto;
  display: inline-block;
  font-size: var(--s-12);
  font-weight: 600;
  padding: 3px var(--a2);
  border-radius: var(--r-klein);
  white-space: nowrap;
}

.stand.ja { background: var(--ja-flaeche); color: var(--ja-schrift); }
.stand.nein { background: var(--nein-flaeche); color: var(--nein-schrift); }
.stand.vielleicht { background: var(--viel-flaeche); color: var(--viel-schrift); }

/* "Wissen wir noch nicht" ist der Normalfall und trifft in einer Liste fast
   jede Zeile. Als eingefaerbte Marke wuerde es die Kennungen erschlagen, die
   man eigentlich sucht. Also nur stiller Text. */
.stand.offen { background: transparent; color: var(--leise); font-weight: 500; }
.stand.fremd {
  background: transparent;
  color: var(--leise);
  border: 1px dashed var(--linie-stark);
}

/* --- Angaben zum Flugzeug ------------------------------------------------- */

.angaben {
  margin: 0 0 var(--karten-luft);
  padding: 0 var(--a4);
  background: var(--karte-hoch);
  border-radius: var(--r-gross);
}

.angaben > div {
  display: flex;
  justify-content: space-between;
  gap: var(--a4);
  padding: var(--a3) 0;
  box-shadow: 0 1px 0 var(--linie);
  font-size: var(--s-14);
}

.angaben > div:last-child { box-shadow: none; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Karte mit Ueberschrift - "Drumherum", "Wer fliegt das Muster". */
.karte {
  margin: 0 0 var(--karten-luft);
  padding: var(--a4);
  background: var(--karte-hoch);
  border-radius: var(--r-gross);
  --schnitt: var(--karte-hoch);
}

.karte > h2 { margin-bottom: var(--a1); }
.karte > .dazu { margin: 0 0 var(--a2); font-size: var(--s-13); }

.umfeld { list-style: none; padding: 0; margin: 0; }
.umfeld li { border-bottom: 1px solid var(--linie); }
.umfeld li:last-child { border-bottom: 0; }

.umfeld a {
  display: block;
  padding: var(--a3) 0;
  color: var(--ink);
  text-decoration: none;
}

.umfeld .kopf2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a2);
  margin-bottom: var(--a2);
  font-size: var(--s-14);
  font-weight: 600;
}

.umfeld a:hover .kopf2 { text-decoration: underline; }

/* --- Flottenliste (bewusst keine Tabelle: bricht auf dem Handy) ----------- */

.filterreihe {
  display: flex;
  gap: var(--a2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--rand) * -1) var(--a4);
  padding: 0 var(--rand);
}

.filterreihe::-webkit-scrollbar { display: none; }

.filterreihe a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  height: 2.75rem;
  padding: 0 var(--a3);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--rund);
  color: var(--halblaut);
  font-size: var(--s-13);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.filterreihe a[aria-current="true"] {
  border-color: var(--akzent);
  background: var(--akzent-flaeche);
  color: var(--akzent-hell);
}

.filterreihe .ikon { width: 0.8125rem; height: 0.8125rem; }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3);
  align-items: end;
  margin-bottom: var(--a4);
  padding: var(--a3);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
}

.filter .feld { margin: 0; flex: 1 1 100%; }
.filter button { flex: 1 1 100%; }

@media (min-width: 34rem) {
  .filter .feld { flex: 1 1 12rem; }
  .filter button { flex: 0 0 auto; }
}

/* --- Fortschritt: eine Bande je Airline ----------------------------------- */

.banden { list-style: none; padding: 0; margin: 0 0 var(--a4); }

.banden a {
  display: block;
  padding: var(--a2) 0 var(--a3);
  color: var(--ink);
  text-decoration: none;
}

.banden .kopf2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a2);
  margin-bottom: var(--a2);
}

.banden .name { font-size: var(--s-13); font-weight: 600; }
.banden .zaehler { font-size: var(--s-12); }
.banden a:hover .name { text-decoration: underline; }

/* --- Meldungen an den Nutzer ---------------------------------------------- */

.fehler, .notiz {
  padding: var(--a3);
  border-radius: var(--rund);
  margin-bottom: var(--a4);
  font-size: var(--s-14);
  line-height: 1.45;
}

.fehler { background: var(--nein-flaeche); color: var(--nein-schrift); }

/* Ein Hinweis ist kein Erfolg. Gruen bleibt der Aussage "Starlink an Bord"
   vorbehalten; der Hinweis nimmt dieselbe stille Flaeche wie "wissen wir noch
   nicht". */
.notiz { background: var(--offen-flaeche); color: var(--offen-schrift); }

.code {
  display: block;
  font-family: var(--satz-zahl);
  font-size: var(--s-21);
  letter-spacing: 0.06em;
  text-align: center;
  padding: var(--a3);
  margin: 0 0 var(--a3);
  background: var(--karte-hoch);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--rund);
  user-select: all;
}

.aufruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--a4);
  background: transparent;
  color: var(--akzent-hell);
  border: 1px solid var(--akzent);
  border-radius: var(--r-gross);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--tempo) var(--kurve);
}

.aufruf:hover { background: var(--akzent-flaeche); }

/* --- Fragen und Antworten (Antwortseite) ---------------------------------- */
/* Eine Frage, eine Antwort, eine Trennlinie - dieselbe Figur wie die Angaben
   auf der Flugzeugseite, nur untereinander statt nebeneinander. Antworten sind
   ganze Saetze und brauchen Lesebreite. */

.fragen { margin: 0; }

.fragen dt {
  font-weight: 600;
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
}

.fragen dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.fragen dd {
  margin: var(--a2) 0 0;
  max-width: 68ch;
  color: var(--halblaut);
  font-size: var(--s-15);
  line-height: 1.5;
}

/* --- Abschnitte ----------------------------------------------------------- */

section { margin: 0 0 var(--abschnitt); }
section:last-child { margin-bottom: 0; }

/* Auf dem Handy stehen die Ranglisten untereinander. Sobald der Schirm es
   hergibt, stehen sie nebeneinander - sonst laeuft rechts eine leere Spalte
   mit. */
@media (min-width: 60rem) {
  .spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--a8);
    align-items: start;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  button:active { transform: none; }
}