/* Kopfzeile und Leiste links im neuen Design (Marco 05.11.2026, Entwurf design/leisten/, Fassung 2, live für alle).
   Kopfzeile .tbx-*, Leiste .rx-*, Vorschaufenster .pk, Fenster .tbx-dd. Eigene Farbwerte (--cx-*), nicht unter .psx,
   damit Seiten im alten Design ihren Hintergrund behalten. Hell gedämpft wie /specials, Dunkel X, Pisten in einer Farbe
   (Türkis), aktive der letzten Stunde kräftig (runway_glyph.py: line.on/.off). Verhalten: static/chrome_x.js. */
@font-face { font-family: "Figtree"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/figtree-latin.woff2") format("woff2"); }

/* ---------- Zentrale Farbstufen aller Seiten im neuen Design (--ps-*, Marco 07.11.2026) ----------
   Jede Datei im neuen Design (compact, landing_x, settings_x, auth_x, logbook_x, error_x, emergencies_x, military_x,
   notif_x, photos_x) nimmt ihre Flächen, Linien und Schriftfarben von hier, statt eigene Grautöne zu kopieren.
   Hell = Pastell (Entwurf design/board-handy/, Farben „Pastell“): Flächen leicht in der Akzentfarbe getönt, Knöpfe
   (--ps-btn) fast neutral hell mit feinem Rand (--ps-btn-b) (Marco: „Knöpfe weniger mitfärben, damit man Knopf und Hintergrund unterscheidet“),
   Gewähltes in hellem Pastell mit dunkler Schrift. Dunkel bleibt wie bisher (ohne Akzent).
   Persönliche Einstellung (Settings → Appearance, prefs accent/tone, _head.html setzt data-accent/data-tone am <html>):
   Akzent blue (Standard) / mint / lilac = Farbton --ah; Stärke strong (Standard) / soft = Sättigung.
   Nur feste Zahlen in oklch() (kein calc), damit ältere iPhones die Farben sicher lesen.
   --ps-soft = eingelassene Fläche (Kennzahlen, Balken, Hover), --ps-btn = Knopf und Umschalter-Schiene,
   --ps-on = gewählt, --ps-pri = Hauptknopf. .ps-tl / .ps-td: Ausschnitt immer hell bzw. dunkel (Vorschau unter Settings), unabhängig vom Farbschema der Seite. */
:root { --ah: 250; }
:root[data-accent="mint"] { --ah: 170; }
:root[data-accent="lilac"] { --ah: 300; }
:root, .ps-tl {
  --ps-bg: oklch(0.945 0.02 var(--ah)); --ps-card: oklch(0.984 0.007 var(--ah)); --ps-soft: oklch(0.952 0.016 var(--ah));
  --ps-btn: oklch(0.975 0.005 var(--ah)); --ps-hover: oklch(0.958 0.012 var(--ah)); --ps-btn-b: oklch(0.84 0.035 var(--ah)); --ps-line: oklch(0.9 0.026 var(--ah));
  --ps-zebra: oklch(0.962 0.013 var(--ah)); --ps-field: oklch(0.976 0.005 var(--ah));
  --ps-fg: oklch(0.24 0.03 var(--ah)); --ps-muted: oklch(0.48 0.035 var(--ah)); --ps-faint: oklch(0.66 0.035 var(--ah));
  --ps-on: oklch(0.86 0.1 var(--ah)); --ps-on-b: oklch(0.74 0.11 var(--ah)); --ps-on-fg: oklch(0.3 0.09 var(--ah));
  --ps-pri: var(--ps-on); --ps-on-pri: var(--ps-on-fg); --ps-pri-b: var(--ps-on-b); --ps-field-b: var(--ps-btn-b);
  --ps-t-l: 0.87; --ps-t-c: 0.115; --ps-i-l: 0.36; --ps-i-c: 0.1; --ps-now: #e0a800;
  --ps-rail: oklch(0.915 0.028 var(--ah)); --ps-tile: oklch(0.955 0.012 var(--ah)); --ps-rail-hover: oklch(0.972 0.008 var(--ah));
  --ps-rail-line: oklch(0.82 0.04 var(--ah)); --ps-rail-muted: oklch(0.47 0.035 var(--ah));
  --ps-backdrop: oklch(0.945 0.02 var(--ah) / .55); --ps-dim: oklch(0.24 0.03 var(--ah) / .22);
  color-scheme: light;
}
/* Stärke „Zart“: gleiche Helligkeit, etwa halbe Sättigung */
:root[data-tone="soft"], [data-tone="soft"] .ps-tl {
  --ps-bg: oklch(0.945 0.011 var(--ah)); --ps-card: oklch(0.984 0.004 var(--ah)); --ps-soft: oklch(0.952 0.009 var(--ah));
  --ps-btn: oklch(0.975 0.003 var(--ah)); --ps-hover: oklch(0.958 0.007 var(--ah)); --ps-btn-b: oklch(0.84 0.02 var(--ah)); --ps-line: oklch(0.9 0.014 var(--ah));
  --ps-zebra: oklch(0.962 0.007 var(--ah)); --ps-field: oklch(0.976 0.003 var(--ah));
  --ps-fg: oklch(0.24 0.02 var(--ah)); --ps-muted: oklch(0.48 0.025 var(--ah)); --ps-faint: oklch(0.66 0.025 var(--ah));
  --ps-on: oklch(0.878 0.055 var(--ah)); --ps-on-b: oklch(0.76 0.065 var(--ah)); --ps-on-fg: oklch(0.3 0.07 var(--ah));
  --ps-t-l: 0.886; --ps-t-c: 0.063;
  --ps-rail: oklch(0.915 0.015 var(--ah)); --ps-tile: oklch(0.955 0.007 var(--ah)); --ps-rail-hover: oklch(0.972 0.004 var(--ah));
  --ps-rail-line: oklch(0.82 0.022 var(--ah)); --ps-rail-muted: oklch(0.47 0.025 var(--ah));
  --ps-backdrop: oklch(0.945 0.011 var(--ah) / .55); --ps-dim: oklch(0.24 0.02 var(--ah) / .22);
}
:root[data-theme="planescope-dark"], .ps-td {
  --ps-bg: #111113; --ps-card: #18181b; --ps-soft: #27272a; --ps-btn: #27272a; --ps-hover: #2a2a2e; --ps-btn-b: transparent; --ps-line: #2a2a2e;
  --ps-zebra: #1c1c1f; --ps-field: #1c1c1f; --ps-fg: #f4f4f5; --ps-muted: #a1a1aa; --ps-faint: #71717a;
  --ps-on: #3a3a3f; --ps-on-b: transparent; --ps-on-fg: #f4f4f5;
  --ps-pri: #f4f4f5; --ps-on-pri: #18181b; --ps-pri-b: transparent; --ps-field-b: #2a2a2e;
  --ps-t-l: 0.31; --ps-t-c: 0.07; --ps-i-l: 0.85; --ps-i-c: 0.14; --ps-now: #f5c518;
  --ps-rail: #0b0b0d; --ps-tile: #1f1f23; --ps-rail-hover: #29292e; --ps-rail-line: #2a2a2e; --ps-rail-muted: #9a9aa3;
  --ps-backdrop: rgb(17 17 19 / .6); --ps-dim: rgb(0 0 0 / .4);
  color-scheme: dark;
}

/* Kopfzeile und Leiste: Werte von den zentralen Stufen */
:root, [data-theme="planescope"] {
  --cx-bg: var(--ps-bg); --cx-card: var(--ps-card); --cx-line: var(--ps-line); --cx-soft: var(--ps-soft); --cx-field: var(--ps-field);
  --cx-zebra: var(--ps-zebra); --cx-fg: var(--ps-fg); --cx-muted: var(--ps-muted); --cx-faint: var(--ps-faint); --cx-on: var(--ps-on);
  --cx-on-b: var(--ps-on-b); --cx-on-fg: var(--ps-on-fg); --cx-btn: var(--ps-btn); --cx-btn-b: var(--ps-btn-b); --cx-field-b: var(--ps-field-b);
  --cx-pri: var(--ps-pri); --cx-on-pri: var(--ps-on-pri); --cx-pri-b: var(--ps-pri-b);
  --cx-t-l: var(--ps-t-l); --cx-t-c: var(--ps-t-c); --cx-i-l: var(--ps-i-l); --cx-i-c: var(--ps-i-c);
  --cx-count: oklch(0.58 0.2 25); --cx-red: oklch(0.6 0.2 25); --cx-dot: oklch(0.58 0.17 250); --cx-ok: oklch(0.55 0.14 150);
  --cx-backdrop: var(--ps-backdrop);
  --cx-dim: var(--ps-dim);
  --rx-bg: var(--ps-rail); --rx-tile: var(--ps-tile); --rx-hover: var(--ps-rail-hover); --rx-on: var(--ps-on); --rx-ink: var(--ps-fg);
  --rx-muted: var(--ps-rail-muted); --rx-line: var(--ps-rail-line);
  --rx-rwy: oklch(0.5 0.1 195); --rx-tl: 0.86; --rx-tc: 0.11; --rx-il: 0.34; --rx-ic: 0.1;
  --cx-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="planescope-dark"] {
  --cx-dot: oklch(0.72 0.14 250); --cx-ok: oklch(0.8 0.15 150);
  --rx-on: #3d3d44;
  --rx-rwy: oklch(0.8 0.11 195); --rx-tl: 0.31; --rx-tc: 0.07; --rx-il: 0.85; --rx-ic: 0.14;
}
.tbx svg, .railx svg, .tbx-dd svg, .rx-tipbox svg { width: 18px; height: 18px; flex: none; }
.tbx :is(a, button, input, textarea):focus-visible, .railx :is(a, button):focus-visible, .pk a:focus-visible { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
.tbx { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 3.5rem; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 0;
  background: var(--cx-bg); color: var(--cx-fg); border-bottom: 1px solid var(--cx-line); font: 15px/1.4 var(--cx-font); }
.tbx-logo { font: italic 900 22px/1 "Montserrat", var(--cx-font); letter-spacing: -0.02em; color: var(--cx-fg); padding-left: 20px; white-space: nowrap; }
.tbx-ib { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--cx-fg); cursor: pointer; flex: none; }
.tbx-ib:hover, .tbx-ib[aria-expanded="true"] { background: var(--cx-soft); }
.tbx-menu { display: none; margin-left: 8px; }
.tbx-mobile { display: none; }
.tbx-pop-wrap { position: relative; display: flex; align-items: center; }
.tbx-beta { font: 700 11.5px var(--cx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); background: transparent;
  border: 1px solid var(--cx-faint); border-radius: 5px; padding: 3px 7px; cursor: pointer; }
.tbx-beta:hover, .tbx-beta[aria-expanded="true"] { color: var(--cx-fg); border-color: var(--cx-fg); }
.tbx-guest { display: flex; gap: 4px; margin-left: 18px; }
.tbx-guest a { padding: 7px 12px; border-radius: 8px; font-weight: 500; color: var(--cx-muted); }
.tbx-guest a:hover { color: var(--cx-fg); }
.tbx-guest a[aria-current] { background: var(--cx-soft); color: var(--cx-fg); font-weight: 600; }
.tbx-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tbx-cnt { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cx-count); color: #fff;
  font: 700 11px/18px var(--cx-font); text-align: center; }
.tbx-cnt.hidden { display: none; }
.tbx-user { display: flex; align-items: center; gap: 9px; padding: 3px 8px 3px 3px; margin-left: 4px; border-radius: 9px; border: 0; background: transparent;
  color: var(--cx-fg); cursor: pointer; font-family: inherit; text-align: left; }
.tbx-user:hover, .tbx-user[aria-expanded="true"] { background: var(--cx-soft); }
.tbx-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cx-pri); color: var(--cx-on-pri); box-shadow: inset 0 0 0 1px var(--cx-pri-b); font-weight: 700; font-size: 13px; letter-spacing: .02em; flex: none; }
.tbx-who b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tbx-who small { display: block; font-size: 12px; color: var(--cx-muted); line-height: 1.2; }
.tbx-clock { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; margin-right: 8px; white-space: nowrap; }
.tbx-clock small { color: var(--cx-muted); font-weight: 500; font-size: 12.5px; margin-left: 3px; }
.tbx-clock i { color: var(--cx-faint); margin: 0 8px; font-style: normal; font-weight: 400; }
.tbx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 0;
  font: 600 14px var(--cx-font); cursor: pointer; white-space: nowrap; }
.tbx-btn.primary { background: var(--cx-pri); color: var(--cx-on-pri); box-shadow: inset 0 0 0 1px var(--cx-pri-b); }
.tbx-btn.soft { background: var(--cx-btn); color: var(--cx-fg); box-shadow: inset 0 0 0 1px var(--cx-btn-b); }
.tbx-seg { display: inline-flex; background: var(--cx-btn); border-radius: 8px; padding: 2px; gap: 2px; box-shadow: inset 0 0 0 1px var(--cx-btn-b); }
.tbx-seg button { font: 500 13px var(--cx-font); color: var(--cx-muted); background: transparent; border: 0; border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.tbx-seg button:hover { color: var(--cx-fg); }
.tbx-seg button[aria-pressed="true"] { background: var(--cx-on); color: var(--cx-on-fg); box-shadow: 0 0 0 1px var(--cx-on-b); }
[data-theme="planescope-dark"] .tbx-seg button[aria-pressed="true"] { background: var(--cx-on); box-shadow: none; }

/* Suche: ein Feld, Bereich links mit Trennstrich, Lupe, Tastenkürzel */
.tbx-search { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: min(36rem, 40vw); }
.tbx-field { display: flex; align-items: stretch; height: 40px; background: var(--cx-field); border: 1px solid var(--cx-field-b); border-radius: 9px; }
.tbx-field:hover { border-color: var(--cx-faint); }
.tbx-field:focus-within { border-color: var(--cx-muted); }
.tbx-scope { display: flex; align-items: center; gap: 16px; padding: 0 11px 0 13px; border: 0; border-right: 1px solid var(--cx-line); background: transparent;
  color: var(--cx-fg); font: 500 14.5px var(--cx-font); cursor: pointer; border-radius: 9px 0 0 9px; white-space: nowrap; }
.tbx-scope svg { width: 16px; height: 16px; color: var(--cx-muted); }
.tbx-scope:hover, .tbx-scope[aria-expanded="true"] { background: var(--cx-soft); }
.tbx-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; color: var(--cx-muted); cursor: text; }
.tbx-q input:focus-visible { outline: none; }
.tbx-q input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--cx-fg); font: 14.5px var(--cx-font); }
.tbx-q input::placeholder { color: var(--cx-muted); }
.tbx-q input::-webkit-search-cancel-button { display: none; }
.tbx kbd, .tbx-dd kbd { font: 600 12px var(--cx-font); color: var(--cx-muted); border: 1px solid var(--cx-line); background: var(--cx-bg); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.tbx kbd.invisible { visibility: hidden; }

/* Fenster unter der Kopfzeile (Suche, Bereich, Beta, Glocke, Benutzer) */
.tbx-dd { position: absolute; top: calc(100% + 8px); background: var(--cx-card); color: var(--cx-fg); border: 1px solid var(--cx-line); border-radius: 10px;
  padding: 6px; z-index: 60; font: 14.5px/1.4 var(--cx-font); box-shadow: 0 14px 34px -22px rgb(0 0 0 / .55); }
.tbx-dd[hidden] { display: none; }
.tbx-scopes { left: 0; width: 200px; display: grid; gap: 2px; }
.tbx-scopes button, .tbx-menu-pop a, .tbx-menu-pop form button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px;
  border: 0; background: transparent; color: var(--cx-fg); font: 500 14.5px var(--cx-font); cursor: pointer; text-align: left; }
.tbx-scopes button:hover, .tbx-menu-pop a:hover, .tbx-menu-pop form button:hover { background: var(--cx-soft); }
.tbx-scopes button[aria-selected="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-fg); }
.tbx-results { left: 0; right: 0; max-height: 70vh; overflow-y: auto; }
.sr-head { font-size: 13px; color: var(--cx-muted); padding: 8px 10px 3px; }
.sr-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 7px;
  border: 0; background: transparent; color: var(--cx-fg); font: 500 14.5px var(--cx-font); cursor: pointer; text-align: left; }
.sr-row:hover, .sr-row:focus { background: var(--cx-soft); outline: none; }
.sr-row .sq { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--cx-soft); font-weight: 700; font-size: 11.5px; overflow: hidden; }
.sr-row:hover .sq, .sr-row:focus .sq { background: var(--cx-bg); }
.sr-row .sq svg { width: 16px; height: 16px; }
.sr-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .t b { font-weight: 600; } .sr-row .t span { color: var(--cx-muted); margin-left: 6px; }
.sr-row .t small { display: block; color: var(--cx-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.sr-row .k { color: var(--cx-muted); font-size: 12.5px; white-space: nowrap; }
.sr-none { padding: 12px 10px; color: var(--cx-muted); font-size: 14px; }
.sr-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--cx-line); font-size: 12.5px; color: var(--cx-muted); }

.tbx-betapop { left: 0; width: 360px; padding: 16px; }
.tbx-betapop form, .tbx-betapop .tbx-done { display: grid; gap: 12px; }
.tbx-betapop b { font-weight: 600; font-size: 15.5px; }
.tbx-betapop p { margin: 0; color: var(--cx-muted); font-size: 14px; }
.tbx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tbx-chips button { font: 600 13.5px var(--cx-font); border-radius: 6px; padding: 4px 10px; border: 1px solid var(--cx-line); background: transparent; color: var(--cx-fg); cursor: pointer; }
.tbx-chips button[aria-pressed="true"] { background: var(--cx-fg); color: var(--cx-bg); border-color: var(--cx-fg); }
.tbx-betapop textarea, .tbx-betapop input[type="email"] { width: 100%; font: 14.5px/1.45 var(--cx-font); color: var(--cx-fg); background: var(--cx-field);
  border: 1px solid var(--cx-line); border-radius: 8px; padding: 9px 11px; }
.tbx-betapop textarea { min-height: 96px; resize: vertical; }
.tbx-betapop :is(textarea, input)::placeholder { color: var(--cx-faint); }
.tbx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tbx-chk { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--cx-muted); min-width: 0; }
.tbx-chk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-chk input { accent-color: var(--cx-fg); flex: none; }
.tbx-err { color: var(--cx-red) !important; }
.tbx-acts { display: flex; justify-content: flex-end; gap: 8px; }
.tbx-done { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
.tbx-okq { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: oklch(var(--cx-t-l) var(--cx-t-c) 150); color: oklch(var(--cx-i-l) var(--cx-i-c) 150); }

.tbx-notif { right: -4px; width: 400px; padding: 0; overflow: hidden; }
.tbx-nh { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.tbx-nh b { font-weight: 600; font-size: 16px; }
.tbx-nh .tbx-seg { margin-left: auto; }
.tbx-nday { font-size: 13px; color: var(--cx-muted); padding: 8px 14px 4px; border-top: 1px solid var(--cx-line); }
.tbx-ni { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; color: var(--cx-fg); }
.tbx-ni:hover { background: var(--cx-zebra); }
.tbx-ni .sq { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: oklch(var(--cx-t-l) var(--cx-t-c) var(--h)); color: oklch(var(--cx-i-l) var(--cx-i-c) var(--h)); }
.tbx-ni .sq svg { width: 17px; height: 17px; }
.tbx-ni b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.tbx-ni p { margin: 0; font-size: 13.5px; color: var(--cx-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbx-ni .tm { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: var(--cx-muted); white-space: nowrap; }
.tbx-ni .tm i { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-dot); }
.tbx-pnext { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 14px 10px; padding: 8px 10px;
  border: 1px solid var(--cx-line); border-radius: 8px; background: var(--cx-bg); color: var(--cx-muted); font-size: 13.5px; }
.tbx-pnext:hover { border-color: var(--cx-faint); }
.tbx-pnext b { color: var(--cx-fg); font-weight: 600; }
.tbx-pnext .sq { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: oklch(var(--cx-t-l) var(--cx-t-c) var(--h)); color: oklch(var(--cx-i-l) var(--cx-i-c) var(--h)); }
.tbx-pnext .sq svg { width: 14px; height: 14px; }
.tbx-pnext .cd { color: var(--cx-fg); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbx-empty { margin: 0; padding: 22px 14px; color: var(--cx-muted); font-size: 14px; border-top: 1px solid var(--cx-line); }
.tbx-nf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--cx-line); background: var(--cx-zebra); font-size: 13.5px; }
.tbx-nf a:first-child { font-weight: 600; }
.tbx-nf [data-push-note] { color: var(--cx-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tbx-nf [data-push-note] i { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-faint); }
.tbx-nf [data-push-note].on i { background: var(--cx-ok); }

.tbx-menu-pop { right: 0; width: 280px; display: grid; gap: 2px; }
.tbx-menu-pop svg { color: var(--cx-muted); }
.tbx-mwho { padding: 8px 10px 10px; border-bottom: 1px solid var(--cx-line); margin-bottom: 4px; min-width: 0; }
.tbx-mwho b { display: block; font-weight: 600; } .tbx-mwho small { display: block; color: var(--cx-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.tbx-mtheme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 6px 10px; font-weight: 500; }
.tbx-hr { height: 1px; background: var(--cx-line); margin: 4px 0; }

/* ---------- Leiste ---------- */
.railx { position: fixed; left: 0; top: 3.5rem; bottom: 0; z-index: 30; width: 72px; display: flex; flex-direction: column; align-items: stretch;
  background: var(--rx-bg); color: var(--rx-ink); font: 15px/1.35 var(--cx-font); padding: 12px 10px; gap: 8px; }
.rx-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; margin: -4px -10px 0; padding: 4px 10px 0; }
.rx-list::-webkit-scrollbar { display: none; }
.rx-grp, .rx-feat { display: flex; flex-direction: column; gap: 8px; }
.rx-feat { padding-top: 14px; }   /* Abstand statt Trennstrich */
.rx-wrap { position: relative; }
.rx-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none;
  border-radius: 10px; background: var(--rx-tile); color: var(--rx-ink); }
.rx-item:hover { background: var(--rx-hover); }
.rx-item::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 0; border-radius: 0 3px 3px 0; background: var(--rx-ink); transform: translateY(-50%); transition: height .15s; }
.rx-item:hover::before { height: 18px; }
.rx-item.on { background: var(--rx-on); box-shadow: inset 0 0 0 1px var(--rx-line); }
.rx-item.on::before { height: 30px; }
.rx-sq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.rx-sq svg { width: 22px; height: 22px; }
.rx-ap .rx-sq svg { width: 26px; height: 26px; color: var(--rx-rwy); }
.rx-ap .rx-sq svg line.off { stroke-opacity: .38; }
.rx-code { font-weight: 600; font-size: 12.5px; letter-spacing: .03em; line-height: 1; }
.rx-nm { display: none; }
.rx-cnt { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--cx-count); color: #fff;
  font: 700 11px/18px var(--cx-font); text-align: center; box-shadow: 0 0 0 2px var(--rx-bg); }
.rx-cnt[hidden] { display: none; }
.rx-add { background: transparent; color: var(--rx-muted); box-shadow: inset 0 0 0 1.5px var(--rx-line); }
.rx-add:hover { color: var(--rx-ink); background: var(--rx-tile); }
.rx-add .rx-sq svg { width: 20px; height: 20px; }
.rx-view { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rx-muted); }
.rx-view.on { background: var(--rx-on); box-shadow: inset 0 0 0 1.5px var(--rx-muted); }
.rx-pin { position: absolute; bottom: -6px; left: 36px; margin: 0; }
.rx-pin button { width: 22px; height: 22px; border-radius: 6px; border: 0; display: grid; place-items: center; background: var(--rx-ink); color: var(--rx-bg);
  cursor: pointer; box-shadow: 0 0 0 2px var(--rx-bg); }
.rx-pin svg { width: 13px; height: 13px; }
.rx-empty { font-size: 11.5px; font-weight: 600; text-align: center; color: var(--rx-muted); padding: 4px 0; line-height: 1.3; }
.rx-fn.tint { background: oklch(var(--rx-tl) var(--rx-tc) var(--h)); color: oklch(var(--rx-il) var(--rx-ic) var(--h)); }
.rx-fn.tint:hover { filter: brightness(1.05); }
.rx-fn.alarm { background: var(--cx-red); color: #fff; }
.rx-fn.alarm .rx-cnt { background: #fff; color: oklch(0.45 0.2 25); }
.rx-tog { display: grid; place-items: center; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--rx-muted); cursor: pointer; flex: none; font: 500 13.5px var(--cx-font); }
.rx-tog:hover { color: var(--rx-ink); background: var(--rx-hover); }
.rx-tog-close { display: none; align-items: center; gap: 8px; }

/* Ausgeklappt (B): Zeilen mit Namen und benutzten Pistenrichtungen */
body.rail-wide .railx { width: 252px; }
body.rail-wide .rx-grp, body.rail-wide .rx-feat, body.rail-wide .rx-list { gap: 2px; }
body.rail-wide .rx-item { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; height: auto; padding: 6px 8px; border-radius: 9px; background: transparent; }
body.rail-wide .rx-item:hover { background: var(--rx-hover); }
body.rail-wide .rx-item.on { background: var(--rx-on); }
body.rail-wide .rx-item::before { display: none; }
body.rail-wide .rx-sq { width: 36px; height: 36px; border-radius: 8px; background: var(--rx-tile); flex: none; }
body.rail-wide .rx-item.on .rx-sq { background: var(--rx-bg); }
body.rail-wide .rx-ap .rx-sq svg { width: 24px; height: 24px; }
body.rail-wide .rx-sq svg { width: 19px; height: 19px; }
body.rail-wide .rx-code { display: none; }
body.rail-wide .rx-nm { display: block; min-width: 0; flex: 1; }
body.rail-wide .rx-nm b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.rail-wide .rx-nm b span { color: var(--rx-muted); font-weight: 500; margin-left: 5px; }
body.rail-wide .rx-nm small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--rx-muted); }
body.rail-wide .rx-nm small span { display: inline-block; white-space: nowrap; margin-right: 8px; }
body.rail-wide .rx-cnt { position: static; box-shadow: none; flex: none; }
body.rail-wide .rx-add { box-shadow: none; }
body.rail-wide .rx-add .rx-sq { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rx-line); }
body.rail-wide .rx-add .rx-nm b { font-weight: 500; color: var(--rx-muted); }
body.rail-wide .rx-view { box-shadow: inset 0 0 0 1.5px var(--rx-muted); }
body.rail-wide .rx-pin { left: auto; right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); }
body.rail-wide .rx-pin button { box-shadow: none; }
body.rail-wide .rx-fn.tint, body.rail-wide .rx-fn.alarm { background: transparent; color: var(--rx-ink); filter: none; }
body.rail-wide .rx-fn.tint:hover, body.rail-wide .rx-fn.alarm:hover { background: var(--rx-hover); }
body.rail-wide .rx-fn.tint .rx-sq { background: oklch(var(--rx-tl) var(--rx-tc) var(--h)); color: oklch(var(--rx-il) var(--rx-ic) var(--h)); }
body.rail-wide .rx-fn.alarm .rx-sq { background: var(--cx-red); color: #fff; }
body.rail-wide .rx-fn.alarm .rx-cnt { background: var(--cx-count); color: #fff; }
body.rail-wide .rx-tog { justify-content: start; padding: 0 8px; }
body.rail-wide .rx-tog-open { display: none; }
body.rail-wide .rx-tog-close { display: inline-flex; }
body.rail-wide .rx-empty { text-align: left; padding: 4px 8px; }

/* Fußzeile (Zeitzone, Impressum, Privacy …) bei kurzen Seiten am unteren Fensterrand statt direkt unter dem Inhalt
   (Marco 06.11.2026): Inhaltsbereich mindestens fensterhoch, main wächst, Fußzeile rutscht nach unten.
   width:100% hält mx-auto/max-w der Seiten-Klassen (main_class) zentriert, sonst schrumpft main im Flex auf Inhaltsbreite. */
.ps-content { display: flex; flex-direction: column; min-height: 100dvh; }
.ps-content > main { flex: 1 0 auto; width: 100%; }
.ps-content > footer { width: 100%; }
/* Öffentliche Seiten (site/_public_base.html) genauso */
body.ps-public { display: flex; flex-direction: column; }
body.ps-public > main { flex: 1 0 auto; width: 100%; }

/* Inhalt neben der Leiste */
@media (min-width: 48rem) {
  .ps-content { padding-left: 72px; }
  body.rail-wide .ps-content { padding-left: 252px; }
}

/* Hinweis beim Darüberfahren (eingeklappt, statt title-Tooltip) und Vorschaufenster */
.rx-tipbox { position: fixed; z-index: 70; pointer-events: none; white-space: nowrap; background: var(--cx-card); color: var(--cx-fg); border: 1px solid var(--cx-line);
  border-radius: 8px; padding: 6px 10px; font: 600 13.5px var(--cx-font); transform: translateY(-50%); }
.rx-tipbox[hidden], .pk-host[hidden] { display: none; }
.pk-host { position: fixed; z-index: 70; width: 330px; }
.pk { background: var(--cx-card); color: var(--cx-fg); border: 1px solid var(--cx-line); border-radius: 12px; overflow: hidden; font: 14px/1.4 var(--cx-font);
  box-shadow: 0 14px 34px -22px rgb(0 0 0 / .55); }
.pk-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cx-line); }
.pk-code { background: var(--cx-soft); border-radius: 6px; padding: 4px 8px; font-weight: 700; font-size: 13.5px; }
.pk-h b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.pk-h small { color: var(--cx-muted); font-size: 12.5px; }
.pk dl { margin: 0; display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px; font-size: 13.5px; }
.pk dt { color: var(--cx-muted); }
.pk dd { margin: 0; font-weight: 500; min-width: 0; }
.pk .k { color: var(--cx-muted); font-weight: 500; }
.pk-l { font-size: 12.5px; color: var(--cx-muted); padding: 0 14px 4px; }
.pk-nx { display: grid; gap: 6px; padding: 0 14px 12px; }
.pk-nx > div { display: grid; grid-template-columns: 4.6rem 3.4rem minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13.5px; }
.pk-type { justify-self: start; border: 1px solid var(--cx-faint); border-radius: 5px; padding: 0 6px; font-weight: 700; font-size: 13px; }
.pk-acts { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--cx-line); background: var(--cx-zebra); }
.pk-acts a { font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: 7px; background: var(--cx-btn); color: var(--cx-fg); box-shadow: inset 0 0 0 1px var(--cx-btn-b); }
.pk-acts a:hover { background: var(--cx-line); }
.cx-chip { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 7px; font-weight: 600; font-size: 13px; white-space: nowrap;
  background: oklch(var(--cx-t-l) var(--cx-t-c) var(--h, 0)); color: oklch(var(--cx-i-l) var(--cx-i-c) var(--h, 0)); }
.cx-chip.c-mil { --h: 125; } .cx-chip.c-vip { --h: 300; } .cx-chip:is(.c-unusual, .c-variant) { --h: 190; } .cx-chip.c-new { --h: 250; }
.cx-chip:is(.c-livery, .c-sticker) { --h: 45; } .cx-chip.c-emerg { --h: 25; }
.cx-chip:is(.c-rare, .c-widebody, .c-bizjet, .c-sports) { --cx-t-c: 0; --cx-i-c: 0; }
.cx-chip.c-unsched { background: #f5c518; color: #15171a; }

/* Milchiger Hintergrund hinter offenen Fenstern (Beta, Glocke, Benutzer, Suche), wie beim Meldefenster (compact.css .mx).
   Unter der Kopfzeile (z 40), über Leiste (30) und Inhalt; Klick daneben schließt (Capture-Listener in chrome_x.js/app.js). */
.tbx-veil { display: none; position: fixed; inset: 3.5rem 0 0 0; z-index: 35; background: var(--cx-backdrop);
  -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
body.veil-on .tbx-veil { display: block; }
/* Aufklappfenster einer Seite (Merkmal data-veil, chrome_x.js): nur leicht abdunkeln, kein Weichzeichner – der Inhalt dahinter
   bleibt erkennbar, weil das Fenster ihn ändert (Marco 07.11.2026). Auslöser und Fenster über den Schleier heben. */
body.veil-dim .tbx-veil { background: var(--cx-dim); -webkit-backdrop-filter: none; backdrop-filter: none; }
:has(> [data-veil]:not([hidden])) { position: relative; z-index: 36; }
/* Schild- und Erklär-Popups (.ps-pop, app.js) dunkeln den Hintergrund ebenfalls ab, egal in welchem Aufbau sie stecken
   (Marco 08.11.2026: „alle Popups“ – „Widebodies are rare here“ tat es nicht, nur .popx am Handy). Als Schatten des Popups
   statt Schleier, damit es unabhängig von der Zeile darüber liegt. Bedingung = wann daisyUI das Popup zeigt. Am Handy
   stärker, dort liegt das Popup unten über der Liste (wie .popx in compact.css). */
.ps-pop:is(.dropdown-open, :focus-within):not(.dropdown-close) > .dropdown-content > :first-child {
  box-shadow: 0 0 0 100vmax var(--cx-dim), 0 10px 24px -14px rgb(0 0 0 / .35); }
@media (max-width: 79.99rem) {
  .ps-pop:is(.dropdown-open, :focus-within):not(.dropdown-close) > .dropdown-content > :first-child {
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45), 0 -14px 32px -14px rgb(0 0 0 / .6); }
}

/* ---------- Handy ---------- */
.tbx-shade { display: none; }
@media (max-width: 47.999rem) {
  .tbx { gap: 6px; padding-right: 8px; }
  .tbx-menu, .tbx-mobile { display: grid; }
  .tbx-logo { font-size: 18px; padding-left: 2px; }
  .tbx-beta { font-size: 10.5px; padding: 2px 5px; }
  .tbx-who, .tbx-guest, .tbx-desk, .tbx-clock { display: none; }
  .tbx-user { padding: 2px; margin-left: 2px; }
  /* Tippfläche unsichtbar auf 44 px Höhe (Prüflauf 07.11.2026: Knöpfe 36×36, Beta 40×19); seitlich nur 2 px wegen 4 px Abstand */
  .tbx-ib, .tbx-user, .tbx-beta { position: relative; }
  .tbx-ib::before, .tbx-user::before { content: ""; position: absolute; inset: -4px -2px; }
  .tbx-beta::before { content: ""; position: absolute; inset: -12px -4px; }
  .tbx-search { display: none; position: fixed; left: 0; right: 0; top: 3.5rem; transform: none; width: auto; padding: 10px; background: var(--cx-bg); border-bottom: 1px solid var(--cx-line); }
  .tbx-search.is-open { display: block; }
  .tbx-search kbd { display: none; }
  .tbx-results { position: static; margin-top: 8px; max-height: 70vh; }
  .tbx-scopes { top: 58px; left: 10px; }
  .tbx-pop-wrap { position: static; }
  .tbx-betapop, .tbx-notif, .tbx-menu-pop { position: fixed; top: calc(3.5rem + 6px); left: 10px; right: 10px; width: auto; }
  .railx { z-index: 50; transform: translateX(-100%); transition: transform .26s ease; }
  body.nav-open .railx { transform: none; }
  body.rail-wide .railx { width: 304px; }
  body.nav-open .tbx-shade { display: block; position: fixed; inset: 3.5rem 0 0 0; z-index: 45; background: var(--cx-backdrop); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
  /* ausgeklappt: Funktionen fest unten in drei Spalten, Flughäfen scrollen */
  body.rail-wide .rx-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--rx-line); padding-top: 10px; }
  body.rail-wide .rx-fn { flex-direction: column; gap: 5px; padding: 8px 2px; text-align: center; }
  body.rail-wide .rx-fn .rx-nm b { font-size: 12.5px; white-space: normal; }
  body.rail-wide .rx-fn .rx-nm small { display: none; }
  body.rail-wide .rx-fn .rx-cnt { position: absolute; top: 2px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .railx, .rx-item::before { transition: none; } }

/* ---------- Öffentliche Seiten (templates/site/_nav.html, seit 06.11.2026) ----------
   Gleiche Kopfzeile wie die Gast-Fassung der App, aber im Seitenfluss (nicht fest oben, keine Leiste darunter).
   Am Handy fehlen die Links in der Kopfzeile (.tbx-guest) → eigene zweite Zeile .tbx-pubnav. */
.tbx.tbx-pub { position: relative; }
.tbx-pubnav { display: none; }
@media (max-width: 47.999rem) {
  .tbx-pub .tbx-logo { padding-left: 16px; }
  .tbx-pubnav { display: flex; gap: 4px; overflow-x: auto; padding: 6px 10px; background: var(--cx-bg); border-bottom: 1px solid var(--cx-line); font: 14px/1.4 var(--cx-font); }
  .tbx-pubnav a { flex: none; padding: 6px 11px; border-radius: 8px; font-weight: 500; color: var(--cx-muted); }
  .tbx-pubnav a[aria-current] { background: var(--cx-soft); color: var(--cx-fg); font-weight: 600; }
}

/* Milchige Hintergründe überall kurz einblenden statt schlagartig (Marco 05.11.2026): 180 ms, startet bei jedem Einblenden neu
   (display wechselt). Gilt für Kopfzeilen-Fenster, Handy-Menü, Dialoge (::backdrop), Filterfenster. */
@keyframes ps-veil-in { from { opacity: 0; } }
.tbx-veil, body.nav-open .tbx-shade, #fx-backdrop, #filter-backdrop, dialog::backdrop { animation: ps-veil-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .tbx-veil, .tbx-shade, #fx-backdrop, #filter-backdrop, dialog::backdrop { animation: none; } }
/* Fenster der Kopfzeile und Vorschaufenster ebenso: einblenden und 4 px hineinrutschen */
@keyframes ps-pop-in { from { opacity: 0; transform: translateY(-4px); } }
.tbx-dd:not([hidden]), .pk-host:not([hidden]) .pk { animation: ps-pop-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .tbx-dd, .pk { animation: none !important; } }

/* ---------- Einführungstour im neuen Design (Marco 05.11.2026, Vorschau-Artefakt „Planescope Tour Preview“) ----------
   Bleibt auf der aktuellen Seite (kein Seitenwechsel). Fenster mittig (.txm: Start/Ende), groß mit Screenshot (.txw,
   Bilder static/tour/*-light|dark.webp) und Hinweisblase am Element (.txt). Abdunklung mit Loch über dem Ziel (.tx-hole).
   Verhalten: app.js „Einführungstour“. */
.tx-veil { position: fixed; inset: 0; z-index: 90; background: rgb(17 17 19 / .62); display: grid; place-items: center; padding: 20px 12px; overflow-y: auto; }
[data-theme="planescope-dark"] .tx-veil { background: rgb(0 0 0 / .66); }
.tx-hole { position: fixed; z-index: 90; border-radius: 8px; pointer-events: none; outline: 2px solid var(--cx-dot); outline-offset: 3px;
  box-shadow: 0 0 0 200vmax rgb(17 17 19 / .62); }
[data-theme="planescope-dark"] .tx-hole { box-shadow: 0 0 0 200vmax rgb(0 0 0 / .66); }
.tx-box { position: relative; background: var(--cx-card); color: var(--cx-fg); border: 1px solid var(--cx-line); border-radius: 12px;
  font: 15px/1.45 var(--cx-font); display: grid; gap: 12px; }
.tx-box h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.tx-box p { margin: 0; font-size: 14.5px; }
.tx-box .tx-muted { color: var(--cx-muted); }
.tx-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; text-align: left; }
.tx-box li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
.tx-box li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--cx-ok); }
.tx-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--cx-muted);
  display: grid; place-items: center; cursor: pointer; }
.tx-x:hover { background: var(--cx-soft); color: var(--cx-fg); }
.tx-x svg { width: 16px; height: 16px; }
.tx-btn { display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--cx-font); border: 0; border-radius: 8px;
  padding: 10px 16px; cursor: pointer; background: var(--cx-btn); color: var(--cx-fg); box-shadow: inset 0 0 0 1px var(--cx-btn-b); }
.tx-btn:hover { background: var(--cx-line); }
.tx-btn.primary { background: var(--cx-pri); color: var(--cx-on-pri); box-shadow: inset 0 0 0 1px var(--cx-pri-b); } .tx-btn.primary:hover { opacity: .9; }
.tx-link { border: 0; background: none; color: var(--cx-muted); font: 500 14px/1 var(--cx-font); cursor: pointer; padding: 6px 4px; }
.tx-link:hover { color: var(--cx-fg); text-decoration: underline; }
.tx-box :is(button):focus-visible { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }
.tx-prog { display: flex; gap: 4px; margin-right: 34px; }
.tx-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--cx-line); }
.tx-prog i.on { background: var(--cx-fg); }
.tx-cnt { color: var(--cx-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-ft { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.tx-ft .tx-link { margin-right: auto; padding-left: 0; }
/* Start und Ende */
.txm { width: min(420px, 100%); padding: 28px 28px 20px; justify-items: center; text-align: center; gap: 14px; }
.txm h2 { font-size: 22px; font-weight: 700; }
.txm hr { width: 100%; border: 0; border-top: 1px solid var(--cx-line); margin: 0; }
.txm .tx-btn.primary { min-width: 200px; }
.tx-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--cx-soft); }
.tx-mark svg { width: 26px; height: 26px; }
/* Großes Fenster mit Screenshot(s) */
.txw { width: min(880px, 100%); padding: 22px; }
.tx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tx-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.tx-col h3 { margin: 4px 0 0; font-size: 15.5px; font-weight: 600; }
.tx-col p, .tx-col ul { font-size: 14px; }
.tx-shot { border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; background: var(--cx-bg); }
.tx-shot img { display: block; width: 100%; height: auto; }
.tx-shot .tx-d, [data-theme="planescope-dark"] .tx-shot .tx-l { display: none; }
[data-theme="planescope-dark"] .tx-shot .tx-d { display: block; }
.tx-pts { grid-template-columns: 1fr 1fr; column-gap: 18px; }
/* nachgebautes Coming up (notif_x.css) im großen Fenster */
.tx-mock { padding: 16px; pointer-events: none; }
.tx-shot .ncx { grid-template-columns: 190px minmax(0, 1fr); gap: 18px; max-width: none; margin: 0; zoom: .66; }   /* wie ein verkleinerter Screenshot */
.tx-shot .ncx h1 { font-size: 20px; }
@media (max-width: 47.999rem) { .tx-shot .ncx { grid-template-columns: minmax(0, 1fr); zoom: .8; } .tx-shot .ncx aside { display: none; } }
/* Hinweisblase am Element */
.txt { position: fixed; z-index: 91; width: min(340px, calc(100vw - 24px)); padding: 16px 18px 14px; gap: 10px; }
.txt .tx-prog { margin-right: 0; }
.txt .tx-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.txt h2 { font-size: 16px; }
.tx-arrow { position: absolute; width: 14px; height: 14px; background: var(--cx-card); border: 1px solid var(--cx-line); transform: rotate(45deg); }
.txt.right .tx-arrow { left: -8px; border-top: 0; border-right: 0; }
.txt.below .tx-arrow { top: -8px; border-right: 0; border-bottom: 0; }
@media (max-width: 47.999rem) {
  .tx-cols, .tx-pts { grid-template-columns: minmax(0, 1fr); }
  .tx-veil { place-items: start center; }
  .txw { padding: 16px; } .txm { padding: 24px 18px 16px; } .txm .tx-btn.primary { width: 100%; min-width: 0; }
  /* Handy (07.11.2026): Fenster nie höher als der Bildschirm – Inhalt scrollt im Fenster, Knöpfe bleiben unten sichtbar;
     Bilder (Handy-Aufnahmen) höchstens 40 % der Höhe, oben angeschnitten statt verkleinert */
  .tx-veil { padding: 12px; }
  .txw { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .txw .tx-ft { position: sticky; bottom: -16px; margin: 4px -16px -16px; padding: 12px 16px; background: var(--cx-card);
    border-top: 1px solid var(--cx-line); }
  .txw .tx-shot img { max-height: 40dvh; object-fit: cover; object-position: top; }
  .txw .tx-mock { max-height: 40dvh; overflow: hidden; }
  .txm { margin-top: 18dvh; }   /* Start/Ende mittig statt unter dem Menü-Knopf oben rechts */
}
@media (prefers-reduced-motion: no-preference) {
  .tx-box { animation: ps-pop-in .18s ease-out; }
}

/* ---------- Gerüst beim Seitenwechsel zum Board (app.js boardSkeleton, Marco 08.11.2026) ----------
   Sofort nach dem Tippen: Kopf mit Code und Namen des Flughafens, Leiste und Zeilen als Platzhalter, die ruhig pulsieren
   (keine Verläufe, Farben aus den zentralen Stufen). Aufbau wie Board-Kopf und Zeilen-Karten, damit nichts springt. */
.ps-skel { display: grid; gap: 10px; max-width: 96rem; margin: 0 auto; padding: 12px 0 24px; font-family: var(--cx-font); color: var(--cx-fg); }
.ps-skel :is(.sk-bar, .sk-box, .sk-pill) { display: block; height: 12px; border-radius: 4px; background: var(--cx-soft); animation: ps-skel 1.2s ease-in-out infinite; }
.ps-skel .sk-box { height: 26px; border-radius: 6px; }
.ps-skel .sk-pill { height: 36px; border-radius: 9px; background: var(--cx-card); box-shadow: inset 0 0 0 1px var(--cx-line); }
.ps-skel .r { margin-left: auto; }
.ps-skel .w12 { width: 12%; } .ps-skel .w15 { width: 15%; } .ps-skel .w20 { width: 20%; } .ps-skel .w22 { width: 22%; }
.ps-skel .w25 { width: 25%; } .ps-skel .w30 { width: 30%; } .ps-skel .w40 { width: 40%; }
.ps-skel .sk-head { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 12px; }
.ps-skel .sk-code { background: var(--cx-soft); border-radius: 6px; padding: 6px 10px; font-weight: 700; letter-spacing: .02em; }
.ps-skel .sk-name { display: grid; gap: 8px; flex: 1; min-width: 0; } .ps-skel .sk-name b { font-weight: 600; font-size: 18px; line-height: 1.2; }
.ps-skel .sk-name b:empty { display: none; }
.ps-skel .sk-tools { display: flex; gap: 8px; }
.ps-skel .sk-day { padding: 8px 2px 0; }
.ps-skel .sk-card { display: grid; gap: 14px; padding: 16px 14px; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 12px; }
.ps-skel .sk-row { display: flex; align-items: center; gap: 12px; }
.ps-skel .sk-card:nth-child(n+6) :is(.sk-bar, .sk-box) { animation-delay: .15s; }
@keyframes ps-skel { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ps-skel :is(.sk-bar, .sk-box, .sk-pill) { animation: none; } }