/* Neues Design (Marco 04.11.2026), vorerst nur für Specials kompakt (/specials, templates/specials_compact.html).
   Alles hängt an .psx, damit Leiste, Kopfzeile und alle anderen Seiten im alten Design bleiben.
   Schrift Figtree (eigene Datei, CSP erlaubt nur eigene Schriften), neutrale Grautöne (zinc), Schilder:
   Hell = Pastell (satte helle Fläche, dunkle Schrift), Dunkel = „X“ (satte Schrift auf dunkler Tönung desselben Farbtons).
   Gelb nur für Jetzt-Linie und Unscheduled. Entwurf: design/specials/index.html. */
@font-face { font-family: "Figtree"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/figtree-latin.woff2") format("woff2"); }

.psx {
  /* Farben von der zentralen Stelle (chrome_x.css, --ps-*): Hell Pastell nach Akzent/Stärke, Dunkel wie bisher */
  --x-bg: var(--ps-bg); --x-card: var(--ps-card); --x-line: var(--ps-line); --x-soft: var(--ps-soft); --x-zebra: var(--ps-zebra);
  --x-fg: var(--ps-fg); --x-muted: var(--ps-muted); --x-faint: var(--ps-faint); --x-on: var(--ps-on); --x-now: var(--ps-now);
  --t-l: var(--ps-t-l); --t-c: var(--ps-t-c); --i-l: var(--ps-i-l); --i-c: var(--ps-i-c);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; color: var(--x-fg);
  display: grid; gap: 16px;   /* volle Breite wie das Board (main max. 96rem), Marco 04.11.2026: 16:9 ruhig nutzen */
}
.psx a { color: inherit; text-decoration: none; }
/* Seitenhintergrund hinter dem neuen Design im Hellen mitziehen (Leiste und Kopfzeile bleiben alt) */
[data-theme="planescope"] body:has(.psx:not(.psx-dlg)) { background: var(--ps-bg); }
/* Hülle nur für Fenster (z. B. _report_dialog.html auf Seiten ohne neues Design): Farben und Schrift, kein Seitenhintergrund */
.psx.psx-dlg { display: contents; }
.psx .muted { color: var(--x-muted); }
.psx .tnum { font-variant-numeric: tabular-nums; }

/* Umschalter (Segment): graue Schiene, gewähltes Feld hell abgesetzt */
.psx .controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
/* .seg und .hubsw auch auf dem Board (.psxb): Schalter Hub airlines ist ein Baustein (_hub_switch.html, Marco 07.11.2026) */
:is(.psx, .psxb) .seg { display: inline-flex; flex-wrap: wrap; background: var(--ps-btn); border-radius: 9px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--ps-btn-b); }
:is(.psx, .psxb) .seg a { font-weight: 500; font-size: 14px; color: var(--x-muted); border-radius: 7px; padding: 6px 12px; }
:is(.psx, .psxb) .seg a:hover { color: var(--x-fg); }
:is(.psx, .psxb) .seg a[aria-current="true"] { background: var(--x-on); color: var(--ps-on-fg); box-shadow: 0 0 0 1px var(--ps-on-b); }
[data-theme="planescope-dark"] :is(.psx, .psxb) .seg a[aria-current="true"] { box-shadow: none; }
.psx .btn-x { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--x-fg); background: var(--ps-btn);
  border: 0; border-radius: 8px; padding: 8px 13px; cursor: pointer; font-family: inherit; box-shadow: inset 0 0 0 1px var(--ps-btn-b); }
.psx .btn-x:hover { background: var(--ps-hover); }
.psx :is(a, button):focus-visible { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }

/* Kasten mit Flughafen-Kopf */
.psx .panel { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 12px; }
/* Kopf: Desktop eine Zeile (Name | Knöpfe | Hub | Zahnrad), darunter Tablet und Handy (Marco 05.11.2026) */
.psx .aphead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "id act hub gear";
  align-items: center; gap: 12px 16px; padding: 14px 18px; border-bottom: 1px solid var(--x-line); }
.psx .aphead .apid { grid-area: id; } .psx .aphead .actions { grid-area: act; } .psx .aphead .hubsw { grid-area: hub; } .psx .aphead .gear { grid-area: gear; justify-self: end; }
@media (max-width: 1180px) {
  .psx .aphead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id gear" "act hub"; }
  .psx .aphead .actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .psx .aphead { grid-template-areas: "id gear" "act act" "hub hub"; gap: 12px; padding: 14px; }
  .psx .aphead .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .psx .aphead .actions .btn-x { justify-content: center; }
  .psx .aphead .hubsw { justify-content: flex-end; margin-left: 0; }   /* rechtsbündig zusammen, kein Loch in der Mitte (Marco 05.11.) */
  .psx .apcode { padding: 5px 8px; } .psx .apname { font-size: 17px; }
}
.psx .apid { display: flex; align-items: center; gap: 14px; min-width: 0; }
.psx .apcode { background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); border-radius: 6px; padding: 6px 10px; font-weight: 700; letter-spacing: .02em; }
.psx .apname { font-weight: 600; font-size: 18px; line-height: 1.2; margin: 0; }
.psx .apsub { font-size: 13.5px; color: var(--x-muted); }
.psx .apsub .nw { white-space: nowrap; }
@media (max-width: 640px) { .psx .apsub .tm { display: block; } .psx .apsub .dot { display: none; } }   /* Handy: Uhrzeit eigene Zeile, ohne Punkt */   /* Umbruch nur zwischen „ICAO · Stadt“ und „· Uhrzeit local time“ (Marco 05.11.) */
.psx .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Hub-Schalter etwas von den Knöpfen abgesetzt, ohne Trennlinie (Marco 04.11.2026: wirkte gequetscht, Linie passte nicht) */
:is(.psx, .psxb) .hubsw { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; }
@media (max-width: 1180px) { :is(.psx, .psxb) .hubsw { margin-left: 0; } }
:is(.psx, .psxb) .hubsw > span { font-size: 14px; font-weight: 500; color: var(--x-muted); }
.psx .info-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--x-faint);
  color: var(--x-muted); font-weight: 600; font-size: 12px; cursor: pointer; }
.psx .info-x:hover, .psx .dropdown-open .info-x { color: var(--x-fg); border-color: var(--x-fg); }
.psx .pop-x { width: max-content; max-width: 18rem; background: var(--x-card); border: 1px solid var(--x-line); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; }
.psx .phead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 18px; border-bottom: 1px solid var(--x-line); }
.psx .phead h2 { font-weight: 600; font-size: 17px; margin: 0; }
.psx .phead .sum { color: var(--x-muted); font-size: 14px; }
.psx .counts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--x-line); }
.psx .counts a[aria-pressed="false"] { opacity: .35; }

/* Schilder je Kategorie (--h = Farbton); Gelb nur Unscheduled */
:is(.psx, .psxb) .c-mil { --h: 125; } :is(.psx, .psxb) .c-vip { --h: 300; } :is(.psx, .psxb) .c-unusual, :is(.psx, .psxb) .c-variant { --h: 190; } :is(.psx, .psxb) .c-new { --h: 250; }
:is(.psx, .psxb) .c-livery, :is(.psx, .psxb) .c-sticker { --h: 45; } :is(.psx, .psxb) .c-emerg { --h: 25; }
:is(.psx, .psxb) .c-rare, :is(.psx, .psxb) .c-widebody { --h: 0; --t-c: 0; --i-c: 0; }
.psx .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; padding: 3px 8px; font-weight: 600; font-size: 13.5px; white-space: nowrap;   /* überall gleich groß: Leiste oben wie Zeilen */
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psx .chip.c-unsched { background: #f5c518; color: #15171a; }
.psx .chip.c-sticker, .psx .chip.c-variant { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(0.6 0.13 var(--h)); }

/* Eine Zeile je Maschine */
.psx .list { display: grid; font-size: 16px; }   /* Ergebnisse einen Tick größer (Marco 04.11.2026) */
.psx .row { display: grid; grid-template-columns: 7rem 6.4rem 4.3rem 6.8rem minmax(0, .9fr) minmax(0, 1.6fr); gap: 4px 14px; align-items: center; padding: 9px 18px; }
.psx .row:nth-child(even of .row) { background: var(--x-zebra); }
.psx .panel > .list:last-child > :last-child { border-radius: 0 0 11px 11px; }
.psx .row.past { color: var(--x-muted); }
.psx .row.past .chip { opacity: .7; }
.psx .times { display: grid; gap: 1px; font-weight: 700; }
.psx .times small, .psx .fn small { font-weight: 500; font-size: 13.5px; color: var(--x-muted); }
.psx .fn { font-weight: 700; }
.psx .fn small { display: block; }
.psx .typebox { justify-self: start; border: 1px solid var(--x-faint); border-radius: 5px; padding: 1px 6px; font-weight: 700; font-size: 14.5px; }
.psx .reg { font-weight: 600; }
.psx .reg:hover { text-decoration: underline; }
.psx .route { color: var(--x-muted); font-size: 15px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.psx .what { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.psx .what .name { font-size: 15px; overflow-wrap: anywhere; }
/* Schild + Livery-Name als ein Auslöser (_pop_x.html _shell name=, Marco 07.11.2026): beide öffnen das Popup mit Foto */
.psx .ps-trig { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; cursor: pointer; min-width: 0; }
.psx .ps-trig:hover .name, .psx .ps-trig:focus-visible .name { text-decoration: underline; text-underline-offset: 3px; }
.psx .lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.psx .lvl i { width: 3px; border-radius: 1px; background: var(--x-line); }
.psx .lvl i.on { background: var(--x-fg); }
.psx .lvl i:nth-child(1) { height: 4px; } .psx .lvl i:nth-child(2) { height: 7px; } .psx .lvl i:nth-child(3) { height: 10px; } .psx .lvl i:nth-child(4) { height: 14px; }
.psx .nowline { display: flex; align-items: center; gap: 10px; padding: 6px 18px; font-weight: 600; font-size: 13.5px; }
.psx .nowline::before, .psx .nowline::after { content: ""; height: 2px; background: var(--x-now); flex: 1; }
.psx .nowline::before { flex: 0 0 18px; }
.psx .cathead { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; border-top: 1px solid var(--x-line); }
.psx .cathead:first-child { border-top: 0; }
/* Zahnrad quadratisch und so hoch wie die Knöpfe daneben (Marco 05.11.2026) */
.psx .btn-x { height: 36px; }
.psx .btn-x.sq { width: 36px; padding: 0; justify-content: center; }
:is(.psx, .psxb) .hubsw .seg :is(a, button) { padding-block: 5px; }   /* Show/Hide ebenfalls 36 px hoch */
/* Tagestrenner: Abstand, Linie, Datum in normaler Schrift (keine Versal-Überschrift) */
.psx .daygap { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 18px; border-top: 1px solid var(--x-line);
  border-bottom: 1px solid var(--x-line); background: var(--x-soft); font-weight: 600; font-size: 14.5px; }
.psx .empty { padding: 24px 18px; color: var(--x-muted); }
@media (max-width: 820px) {
  .psx .row { grid-template-columns: 5.6rem minmax(0, 1fr) auto; grid-template-areas: "t f ty" "t reg reg" "w w w"; padding: 9px 14px; }
  .psx .times { grid-area: t; } .psx .fn { grid-area: f; } .psx .typebox { grid-area: ty; } .psx .reg { grid-area: reg; justify-self: start; }
  .psx .route { display: none; } .psx .what { grid-area: w; }
  .psx .phead, .psx .counts { padding-inline: 14px; }
}

/* Schild-Popups (templates/_pop_x.html, Entwurf design/popups/): Kopf mit Farbquadrat, Faktenfeld, Fußnote */
.psx .ps-pop .chip { cursor: pointer; }
.psx .chip svg { width: 13px; height: 13px; opacity: .8; }
.psx .chip.c-neutral { background: transparent; color: var(--x-muted); box-shadow: inset 0 0 0 1px var(--x-faint); }
:is(.psx, .psxb) .c-neutral { --h: 0; --t-c: 0; --i-c: 0; }
:is(.psx, .psxb) .popx { --a-l: 0.45; --a-c: 0.12; width: 19rem; max-width: calc(100vw - 32px); background: var(--x-card); border: 1px solid var(--x-line);
  border-radius: 12px; padding: 14px; display: grid; gap: 12px; text-align: left; white-space: normal; font-size: 15px; color: var(--x-fg); }
[data-theme="planescope-dark"] :is(.psx, .psxb) .popx { --a-l: 0.82; --a-c: 0.13; }
:is(.psx, .psxb) .popx .ph { display: flex; align-items: center; gap: 10px; }
:is(.psx, .psxb) .popx .sq { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
:is(.psx, .psxb) .popx .sq svg { width: 16px; height: 16px; }
:is(.psx, .psxb) .popx.c-unsched .sq { background: #f5c518; color: #15171a; }
:is(.psx, .psxb) .popx .ph b { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
:is(.psx, .psxb) .popx .facts { background: var(--x-soft); border-radius: 8px; padding: 11px 12px; display: grid; gap: 10px; }
:is(.psx, .psxb) .popx .f .l { font-size: 12.5px; color: var(--x-muted); }
:is(.psx, .psxb) .popx .f .v { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
:is(.psx, .psxb) .popx .f .v.big { font-size: 20px; font-weight: 700; line-height: 1.2; }
:is(.psx, .psxb) .popx .f .v .s { font-weight: 500; font-size: 13.5px; color: var(--x-muted); margin-left: 6px; }
:is(.psx, .psxb) .popx .f .v.acc { color: oklch(var(--a-l) var(--a-c) var(--h, 0)); }
:is(.psx, .psxb) .popx .f.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:is(.psx, .psxb) .popx .cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 10px; }
:is(.psx, .psxb) .popx .cmp .arrow { color: var(--x-faint); }
:is(.psx, .psxb) .popx .cmp .arrow svg { width: 16px; height: 16px; display: block; }
:is(.psx, .psxb) .popx .cmp .old .v { color: var(--x-muted); }
:is(.psx, .psxb) .popx .sep { border-top: 1px solid var(--x-line); }
:is(.psx, .psxb) .popx .txt { font-size: 14px; margin: 0;
  position: static; z-index: auto; width: auto; padding: 0; }   /* .txt heißt auch die Hinweisblase der Tour (chrome_x.css, fixed) */
:is(.psx, .psxb) .popx .note { font-size: 12.5px; color: var(--x-muted); margin: 0; }
:is(.psx, .psxb) .popx .note a { color: var(--x-fg); font-weight: 600; }
:is(.psx, .psxb) .popx .note a:hover { text-decoration: underline; }
/* Board (seit 08.11.2026 dieselben Popups, _pop_x.html): Gerätewechsel mit Verlauf, Farbton „Changed“ wie das Board-Schild */
:is(.psx, .psxb) .c-change { --h: 75; }
:is(.psx, .psxb) .popx .hist { display: grid; gap: 4px; }
:is(.psx, .psxb) .popx .hist > .l { font-size: 12.5px; color: var(--x-muted); }
:is(.psx, .psxb) .popx .hrow { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
:is(.psx, .psxb) .popx .hrow .t { color: var(--x-muted); min-width: 6.5rem; } :is(.psx, .psxb) .popx .hrow .o { color: var(--x-muted); }
:is(.psx, .psxb) .popx .v.strike { text-decoration: line-through; text-decoration-color: var(--x-faint); }
@media (max-width: 79.99rem) { :is(.psx, .psxb) .popx { width: auto; max-width: none; } }   /* dort Blatt unten über die Breite (input.css .ps-pop) */

/* Meldefenster „Report a movement“ (templates/_movement_dialog_x.html, Entwurf design/dialoge/ B): Kopf mit Farbquadrat,
   Flughafen-Kasten, großes Textfeld, freiwillige Schilder, Fußleiste; Hintergrund milchig und unscharf (Marco 05.11.2026) */
.psx dialog.mx { margin: auto; padding: 0; border: 0; background: transparent; color: var(--x-fg); max-width: min(31rem, calc(100vw - 24px)); width: 100%;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: visible; }
.psx dialog.mx::backdrop { background: var(--ps-backdrop, rgb(218 218 222 / .55)); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
[data-theme="planescope-dark"] .psx dialog.mx::backdrop { background: rgb(17 17 19 / .6); }
/* Kopf und Fußleiste (Send) bleiben immer sichtbar, nur der Inhalt dazwischen scrollt */
.psx .mxbox { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 12px; display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; font-size: 15px; }
.psx .mxbox > .mxhead, .psx .mxbox > .mxfoot { flex: none; }
.psx .mxbox > .mxbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.psx .mxhead { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 0; }
.psx .mxhead h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; }
.psx .mxhead p { margin: 2px 0 0; font-size: 14px; color: var(--x-muted); }
.psx .mxhead .sq { flex: none; width: 34px; height: 34px;   /* nur im Fenster (Zahnrad heißt auch .sq) */ border-radius: 8px; display: grid; place-items: center;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
:is(.psx, .psxb) .c-mov { --h: 250; } :is(.psx, .psxb) .c-ok { --h: 150; }
.psx .mxclose { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--x-muted); background: transparent; border: 0; cursor: pointer; }
.psx .mxclose:hover { background: var(--x-soft); color: var(--x-fg); }
.psx .mxbody { padding: 16px 18px; display: grid; gap: 14px; }
.psx .mxbody[hidden], .psx .mxfoot[hidden], .psx .mxfield[hidden], .psx .mxctx[hidden], .psx .mxerr[hidden] { display: none; }
.psx .mxctx { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--x-soft); border-radius: 8px; padding: 10px 12px; }
.psx .mxctx .apc { background: var(--x-card); border-radius: 6px; padding: 5px 9px; font-weight: 700; letter-spacing: .02em; }
.psx .mxctx .nm { font-weight: 700; } .psx .mxctx .sub { color: var(--x-muted); font-size: 13.5px; }
.psx .chg { font: 600 13.5px inherit; font-family: inherit; color: var(--x-fg); background: transparent; border: 0; border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.psx .chg:hover { background: var(--x-card); }
.psx .mxfield { display: grid; gap: 6px; }
.psx .mxfield .lbl { font-size: 14px; font-weight: 600; } .psx .mxfield .lbl small { font-weight: 400; color: var(--x-muted); font-size: 13px; }
.psx .in { font: inherit; font-size: 15px; color: var(--x-fg); background: var(--ps-field); border: 1px solid var(--ps-field-b); border-radius: 8px; padding: 9px 11px; width: 100%; }
[data-theme="planescope-dark"] .psx .in { background: #111113; }
.psx textarea.in { resize: vertical; min-height: 120px; }
.psx .in::placeholder { color: var(--x-faint); }
.psx .in:focus-visible { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 1px; }
.psx .helps { font-size: 13px; color: var(--x-muted); margin: 0; }
.psx .mxchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Schilder immer in ihrer Farbe (schnell wiedererkennbar), gewählt: kräftiger Rahmen und Häkchen (Marco 05.11.2026) */
.psx .kchip { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13.5px; border-radius: 5px; padding: 5px 10px; cursor: pointer; user-select: none;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psx .kchip input { position: absolute; opacity: 0; pointer-events: none; }
.psx .kchip svg { display: none; }
.psx .kchip:has(input:checked) { box-shadow: inset 0 0 0 2px oklch(var(--i-l) calc(var(--i-c) + .03) var(--h, 0)); }
.psx .kchip:has(input:checked) svg { display: block; }
.psx .kchip:has(input:focus-visible) { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }
.psx .k-special_livery { --h: 45; } .psx .k-military_state { --h: 125; } .psx .k-vip { --h: 300; } .psx .k-rare_type { --h: 0; --t-c: 0; --i-c: 0; }
.psx .k-new_aircraft { --h: 250; } .psx .k-retirement { --h: 330; } .psx .k-ferry { --h: 190; } .psx .k-delivery { --h: 230; } .psx .k-charter { --h: 90; }
.psx .k-other { --h: 0; --t-c: 0; --i-c: 0; }
/* Vorschläge über dem Fenster statt dazwischen: nichts springt, egal wie viele Treffer (Marco 05.11.2026) */
.psx [data-ap-search] { position: relative; }
.psx .sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: 17rem; overflow: auto;
  background: var(--x-card); border: 1px solid var(--x-line); border-radius: 8px; padding: 4px; display: grid; gap: 2px;
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / .35); }
.psx .sugg[hidden] { display: none; }
.psx .sugg .opt { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; border: 0; background: transparent;
  font: inherit; color: var(--x-fg); text-align: left; }
.psx .sugg .opt.on, .psx .sugg .opt:hover { background: var(--x-soft); }
.psx .sugg .opt b { display: block; font-weight: 600; font-size: 14.5px; } .psx .sugg .opt small { display: block; color: var(--x-muted); font-size: 13px; }
.psx .sugg .apc { background: var(--x-soft); border-radius: 5px; padding: 3px 7px; font-weight: 700; font-size: 13px; min-width: 44px; text-align: center; }
.psx .sugg .opt.on .apc, .psx .sugg .opt:hover .apc { background: var(--x-card); }
.psx .sugg .none { padding: 8px; color: var(--x-muted); font-size: 14px; }
.psx .mxerr { margin: 0; font-size: 14px; color: oklch(0.55 0.18 25); }
/* „Report data“ (templates/_report_dialog.html, Entwurf design/dialoge/ B, 08.11.2026): Flug wie eine Zeile der Liste,
   Gründe als Kästchen mit Farbe und Symbol (Farbtöne wie im Entwurf), am Handy einspaltig */
.psx .rx-rep { --h: 25; }
.psx .rxctx { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 12px; align-items: center; background: var(--x-soft); border-radius: 8px;
  padding: 10px 12px; font-size: 14.5px; }
.psx .rxctx .t, .psx .rxctx .fn { font-weight: 700; }
.psx .rxctx .ty { justify-self: start; border: 1px solid var(--x-faint); border-radius: 5px; padding: 0 6px; font-weight: 700; font-size: 13.5px; }
.psx .rxctx .sub { grid-column: 1 / -1; color: var(--x-muted); font-size: 13.5px; }
.psx .rxctx > :empty { display: none; }
.psx .rxctx > * { grid-area: auto; }   /* Handy-Regeln der Specials-Zeilen (.psx .fn { grid-area: f }) nicht übernehmen */
.psx .rxtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psx .rtile { position: relative; display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14px; line-height: 1.25; color: var(--x-fg);
  background: var(--ps-field); border: 1px solid var(--ps-field-b); border-radius: 8px; padding: 9px 10px; cursor: pointer; min-height: 48px; }
.psx .rtile input { position: absolute; opacity: 0; pointer-events: none; }
.psx .rtile .sq { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psx .rtile:hover { border-color: var(--x-faint); }
.psx .rtile:has(input:checked) { border-color: var(--x-fg); box-shadow: inset 0 0 0 1px var(--x-fg); }
.psx .rtile:has(input:focus-visible) { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }
.psx .rx-livery { --h: 45; } .psx .rx-rare { --h: 190; } .psx .rx-unsched { --h: 90; } .psx .rx-mil { --h: 125; } .psx .rx-new { --h: 250; }
.psx :is(.rx-missing, .rx-flight, .rx-other) { --h: 0; --t-c: 0; --i-c: 0; }
@media (max-width: 47.999rem) { .psx .rxtiles { grid-template-columns: 1fr; } .psx .rtile { min-height: 42px; } }
.psx .mxfoot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 18px; border-top: 1px solid var(--x-line); }
.psx .mxfoot .hint { margin-right: auto; font-size: 13px; color: var(--x-muted); }
.psx .btn-x.ghost { background: transparent; box-shadow: none; } .psx .btn-x.ghost:hover { background: var(--x-soft); }
.psx .btn-x.primary { background: var(--ps-pri); color: var(--ps-on-pri); box-shadow: inset 0 0 0 1px var(--ps-pri-b); } .psx .btn-x.primary:hover { opacity: .9; }
/* Handy: Blatt von unten, kompakter ohne kleinere Schrift (Marco 05.11.2026: nahm mehr als den ganzen Bildschirm ein) */
@media (max-width: 640px) {
  /* schwebende Karte mit Rand statt Blatt bis an die Kanten (Marco 05.11.2026: „an die Ränder gedrückt“) */
  /* mittig mit gleichem Abstand oben/unten; Höhe = sichtbarer Bereich ohne Browserleisten (dvh, Fallback vh),
     Inhalt scrollt im Fenster (Marco 05.11.2026: Chrome iPhone schnitt unten ab) */
  .psx dialog.mx { max-width: calc(100vw - 20px); margin: auto; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .psx .mxbox { border-radius: 16px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .psx .mxhead { padding: 14px 14px 0; gap: 10px; } .psx .mxhead .sq { width: 30px; height: 30px; }
  .psx .mxbody { padding: 12px 14px; gap: 11px; }
  .psx .mxctx { padding: 8px 10px; }
  .psx textarea.in { min-height: 92px; }
  .psx .mxchips { gap: 5px; } .psx .kchip { padding: 5px 9px; }
  .psx .mxfoot { padding: 10px 14px; }
  .psx .mxfoot .hint { display: none; }
}

/* ---------- Flughafen-Kasten (airport_box.py, templates/_apbox_x.html; Entwurf design/flughafen/, Marco 04./05.11.2026) ----------
   Zeilen aus frei wählbaren Abschnitten (Settings → Appearance, prefs ap_hidden): Spalten je Zeile aus den sichtbaren
   Abschnitten (--cols, in der Vorlage gesetzt). Landung grün, Start blau wie das Board; Jetzt gelb. */
.psx { --rwy: #bfbfc6; --rwy-mark: var(--x-card); --line-l: 0.58; --line-c: 0.15; }
[data-theme="planescope-dark"] .psx { --rwy: #3f3f46; --rwy-mark: #18181b; --line-l: 0.78; --line-c: 0.15; }
.psx .ldg { --h: 155; } .psx .dep { --h: 250; } .psx .c-wxcat { --h: 250; }
.psx .chip.off { background: none; color: var(--x-muted); padding-left: 0; font-weight: 500; }
.psx .chip .n { font-variant-numeric: tabular-nums; }
.psx .apbox { overflow: hidden; }
.psx .apbox .prow { display: grid; grid-template-columns: var(--cols, 1fr); }
.psx .apbox .prow + .prow { border-top: 1px solid var(--x-line); }
.psx .apbox .box { padding: 18px; min-width: 0; display: grid; gap: 14px; align-content: start; }
.psx .apbox .box + .box { border-left: 1px solid var(--x-line); }
@media (max-width: 980px) {
  .psx .apbox .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .psx .apbox .prow[data-n="1"] { grid-template-columns: 1fr; }
  .psx .apbox .box:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--x-line); }
}
@media (max-width: 680px) {
  .psx .apbox .prow { grid-template-columns: 1fr; } .psx .apbox .box + .box { border-left: 0; border-top: 1px solid var(--x-line); }
  .psx .apbox .box { padding: 16px 14px; }
}
.psx .sechead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.psx .sechead h2 { font-weight: 600; font-size: 17px; margin: 0; }
.psx .sechead .icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--x-soft); color: var(--x-muted); flex: none; }
.psx .sechead .aside { margin-left: auto; font-size: 13px; color: var(--x-muted); white-space: nowrap; }
.psx .big { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.psx .label { font-size: 13px; color: var(--x-muted); }
.psx .small { font-size: 13px; }
/* Wetter */
.psx .wxtop { display: flex; align-items: center; gap: 14px; }
.psx .wxtop > svg { width: 40px; height: 40px; color: var(--x-muted); flex: none; }
.psx .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; margin: 0; }
.psx .kv dt { color: var(--x-muted); } .psx .kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.psx .metar { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.5; background: var(--x-soft); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; margin: 0; }
/* Bewegungen */
.psx .mvrows { display: grid; gap: 12px; }
.psx .mvrow { display: grid; grid-template-columns: 6.6rem 1fr; gap: 4px 10px; align-items: baseline; }
.psx .mvrow .mvw { display: flex; align-items: center; gap: 6px; font-weight: 600; color: oklch(0.45 0.13 var(--h)); }
[data-theme="planescope-dark"] .psx .mvrow .mvw { color: oklch(var(--i-l) var(--i-c) var(--h)); }
.psx .mvnums { display: flex; flex-wrap: wrap; gap: 2px 14px; font-variant-numeric: tabular-nums; }
.psx .mvnums b { font-size: 21px; font-weight: 600; }
.psx .bar { display: block; height: 6px; border-radius: 3px; background: var(--x-soft); overflow: hidden; }
.psx .mvrow .bar { grid-column: 2; }
.psx .bar i { display: block; height: 100%; border-radius: 3px; background: oklch(var(--line-l) var(--line-c) var(--h, 0)); }
.psx .mvmore { display: grid; gap: 8px; border-top: 1px solid var(--x-line); padding-top: 12px; }
.psx .mvline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.psx .mvline .k { color: var(--x-muted); min-width: 6.6rem; }
.psx .delta { font-weight: 700; } .psx .delta.up { color: oklch(0.5 0.13 155); } .psx .delta.down { color: oklch(0.55 0.16 25); }
[data-theme="planescope-dark"] .psx .delta.up { color: oklch(0.8 0.14 155); } [data-theme="planescope-dark"] .psx .delta.down { color: oklch(0.75 0.14 25); }
.psx .fg { color: var(--x-fg); }
/* Pisten: Bild (A) mit Liste daneben oder Kacheln (B); Auswahl und Filter über static/airport_x.js */
.psx .rwfilter { justify-self: start; }
.psx .rwfilter button, :is(.psx, .psxb) .seg button { font: 500 14px inherit; font-family: inherit; color: var(--x-muted); background: transparent; border: 0; border-radius: 7px; padding: 6px 12px; cursor: pointer; }
:is(.psx, .psxb) .seg button:hover { color: var(--x-fg); }
:is(.psx, .psxb) .seg button:is([aria-pressed="true"], [aria-current="true"]) { background: var(--x-on); color: var(--ps-on-fg); box-shadow: 0 0 0 1px var(--ps-on-b); }
[data-theme="planescope-dark"] :is(.psx, .psxb) .seg button:is([aria-pressed="true"], [aria-current="true"]) { box-shadow: none; }
.psx .rwA { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
@media (max-width: 520px) { .psx .rwA { grid-template-columns: 1fr; } }
.psx .rwmap { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; display: block; }
.psx .rwmap .hit { cursor: pointer; }
.psx .rwlist { display: grid; gap: 9px; }
.psx .rwitem { display: grid; gap: 5px; cursor: pointer; border-radius: 8px; padding: 6px 8px 9px; margin: 0 -8px; border-bottom: 1px solid var(--x-line); }
.psx .rwitem:last-child { border-bottom: 0; }
.psx .rwitem:hover { background: var(--x-soft); }
.psx .rwitem.sel { background: var(--x-soft); box-shadow: inset 3px 0 0 var(--x-fg); }
.psx .rwitem.dim, .psx .tile.dim { opacity: .4; }
.psx .rwname { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.psx .rwname b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.psx .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.psx .chip > svg { width: 15px; height: 15px; }
.psx .rwB { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.psx .tile { border: 1px solid var(--x-line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0;
  cursor: pointer; text-align: left; font: inherit; color: inherit; background: transparent; }
.psx .tile.on { border-color: transparent; background: var(--x-soft); }
.psx .tile:hover { background: var(--x-zebra); }
.psx .tile.sel { background: var(--x-soft); box-shadow: inset 0 0 0 2px var(--x-fg); border-color: transparent; }
.psx .tile .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.psx .tile .top b { font-size: 24px; font-weight: 600; }
.psx .tile .glyph { width: 38px; height: 38px; flex: none; }
.psx .tile .len { font-size: 13px; color: var(--x-muted); }
.psx .rwdetail { border-top: 1px solid var(--x-line); padding-top: 12px; display: grid; gap: 12px; }
.psx .rwdetail[hidden] { display: none; }
.psx .rwdetail .dh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.psx .rwdetail .dh b { font-size: 24px; font-weight: 600; }
.psx .rwdetail .close { margin-left: auto; font: 600 13px inherit; font-family: inherit; color: var(--x-fg); background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.psx .dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.psx .dstat { background: var(--x-soft); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.psx .dstat b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.psx .ends { display: grid; gap: 8px; }
.psx .endrow { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.psx .endrow .bars { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--x-line); }
.psx .endrow .bars i { display: block; height: 100%; }
.psx .fc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--x-muted); border-top: 1px solid var(--x-line); padding-top: 10px; }
.psx .fc svg { width: 16px; height: 16px; flex: none; }
.psx .fc b { color: var(--x-fg); font-weight: 600; }
/* Pisten-Statistik fährt kurz aus statt aufzuspringen (Marco 05.11.2026): 260 ms, reduzierte Bewegung beachten */
@keyframes ps-open { from { max-height: 0; opacity: 0; transform: translateY(-4px); } to { max-height: 640px; opacity: 1; transform: none; } }
.psx .rwdetail.anim { overflow: hidden; animation: ps-open 260ms cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .psx .rwdetail.anim { animation: none; } }
/* Highlights */
.psx .hl { display: grid; }
.psx .hlrow { display: grid; grid-template-columns: 3.4rem 1.1rem minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--x-line); align-items: start; }
.psx .hlrow:first-child { border-top: 0; padding-top: 0; }
.psx .hlrow .t { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.psx .hlrow .lvl { margin-top: 3px; }
.psx .hlmain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.psx .hlmain .fn { font-size: 16px; }
.psx .hlmain .dir { display: inline-flex; align-items: center; gap: 4px; color: var(--x-muted); font-size: 13.5px; }
.psx .hlmain .dir svg { width: 14px; height: 14px; }
.psx .hlmain .ac { font-variant-numeric: tabular-nums; }
.psx .hlsub { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--x-muted); }
.psx .morelink { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); padding: 9px 12px; font-weight: 600; font-size: 14px; }
.psx .morelink:hover { background: var(--x-line); }
.psx .dayline { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; }
.psx .dayline::after { content: ""; height: 1px; background: var(--x-line); flex: 1; }
.psx .apbox details summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--x-muted); }
.psx .apbox details summary::-webkit-details-marker { display: none; }
.psx .apbox details summary svg { transition: transform .15s; }
.psx .apbox details[open] summary svg { transform: rotate(90deg); }
/* Großraum */
.psx .hvrow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--x-line); }
.psx .hvrow:first-child { border-top: 0; padding-top: 0; }
.psx .hvrow .t { font-weight: 700; font-variant-numeric: tabular-nums; }
.psx .hvrow .fn { font-weight: 600; }
.psx .hvrow .typebox { font-size: 13.5px; }
/* Tagesverlauf */
.psx .chart { width: 100%; height: auto; display: block; }
.psx .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--x-muted); }
.psx .legend span { display: inline-flex; align-items: center; gap: 6px; }
.psx .legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
/* Licht */
.psx .spotsel { display: grid; gap: 6px; }
.psx select.in { padding: 8px 10px; }
.psx .lightbig { display: grid; gap: 2px; }
.psx .lightbig b { font-size: 21px; font-weight: 600; line-height: 1.25; }
.psx .tl { position: relative; height: 26px; border-radius: 6px; background: var(--x-soft); overflow: hidden; }
.psx .tl i { position: absolute; top: 0; bottom: 0; }
.psx .tl .day { background: var(--x-zebra); }
.psx .tl .good { background: oklch(var(--t-l) 0.12 85); }
.psx .tl .gold { background: oklch(var(--line-l) 0.15 70); opacity: .55; }
.psx .tlx { display: flex; justify-content: space-between; font-size: 12px; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.psx .sun { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.psx .sun div { display: grid; gap: 2px; }
.psx .sun b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Öffentliche Fassung (Gäste): Hinweis auf das kostenlose Konto und sachliche Angaben unter dem Kasten */
.psx .cta { padding: 18px; display: grid; gap: 10px; }
.psx .cta h2, .psx .about h2 { font-weight: 600; font-size: 17px; margin: 0; }
.psx .cta p, .psx .about p { margin: 0; color: var(--x-muted); max-width: 72ch; }
.psx .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.psx .about > div { padding: 18px; display: grid; gap: 10px; align-content: start; }
.psx .about > div + div { border-left: 1px solid var(--x-line); }
@media (max-width: 760px) { .psx .about { grid-template-columns: 1fr; } .psx .about > div + div { border-left: 0; border-top: 1px solid var(--x-line); } }
.psx .about dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14.5px; }
.psx .about dt { color: var(--x-muted); } .psx .about dd { margin: 0; }
.psx .apchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px; }
.psx .apchips a { background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); border-radius: 6px; padding: 5px 9px; font-weight: 600; font-size: 14px; }
.psx .apchips a:hover { background: var(--x-line); }
.psx .crumb { font-size: 13.5px; color: var(--x-muted); }
.psx .crumb a:hover { text-decoration: underline; }
/* Pistenbild und Tagesdiagramm (SVG aus _apbox_x.html): Farben über Klassen, Filter/Auswahl über data-rf und .has-sel */
.psx .rwmap .ln, .psx .glyph .ln { stroke: var(--rwy); }
.psx :is(.rwmap, .glyph) .ln.l { stroke: oklch(var(--line-l) var(--line-c) 155); }
.psx :is(.rwmap, .glyph) .ln.d { stroke: oklch(var(--line-l) var(--line-c) 250); }
.psx .glyph .ln.o { opacity: .45; }
.psx .rwmap .cl { stroke: var(--rwy-mark); stroke-width: 1; stroke-dasharray: 5 6; opacity: .7; }
.psx .rwmap .ar line, .psx .rwmap .ar path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.psx .rwmap .ar line { stroke-dasharray: 5 5; }
/* Geschätzte Richtung ohne Verkehr: Bahnen und Flieger gedämpft */
.psx .rwmap.exp :is(.ln.l, .ln.d) { opacity: .5; } .psx .rwmap.exp .traffic { opacity: .5; }
/* ergänzte Richtung an Ein-Pisten-Plätzen (weather.infer_same_end): Strich/Pfeil halb, Schild gestrichelt */
.psx .rwmap :is(.ln.exp, .ar.exp) { opacity: .5; }
.psx .chip.exp { background: transparent; outline: 1.5px dashed oklch(var(--line-l) var(--line-c) var(--h)); outline-offset: -1.5px; }
.psx .chip.exp .xp { font-weight: 500; opacity: .75; }
.psx .rwmap .expnote { font: 700 19px "Figtree", sans-serif; fill: var(--x-fg); } .psx .rwmap .expnote.sub { font-weight: 500; font-size: 16px; fill: var(--x-muted); }
.psx .rwmap .rwlbl { font: 700 13px "Figtree", sans-serif; fill: var(--x-muted); }
.psx .has-sel .rwmap .rw:not(.sel) .rwlbl { display: none; }
.psx .rwmap .ar .halo { stroke: var(--x-card) !important; stroke-width: 5; stroke-dasharray: none; opacity: .9; }
/* Animation landender/startender Maschinen (static/airport_x.js, feste Schleife über die aktiven Pisten) */
.psx .rwmap .traffic .pl { fill: var(--x-fg); stroke: var(--x-card); stroke-width: 1.4; paint-order: stroke; stroke-linejoin: round; }
.psx .rwmap .traffic .sh { fill: color-mix(in oklab, var(--x-fg) 16%, transparent); }
.psx [data-rf="arr"] .rwmap .traffic .d, .psx [data-rf="dep"] .rwmap .traffic .l { display: none; }
.psx .rwmap .ar.ldg :is(line, path) { stroke: oklch(var(--line-l) var(--line-c) 155); }
.psx .rwmap .ar.dep :is(line, path) { stroke: oklch(var(--line-l) var(--line-c) 250); }
.psx .rwmap .ar text { font: 700 13px "Figtree", sans-serif; }
.psx .rwmap .ar.ldg text { fill: oklch(var(--line-l) var(--line-c) 155); } .psx .rwmap .ar.dep text { fill: oklch(var(--line-l) var(--line-c) 250); }
.psx .rwmap .north { fill: var(--x-muted); font: 11px "Figtree", sans-serif; }
.psx .rwmap :is(.v-arr, .v-dep) { display: none; }
.psx [data-rf="arr"] .rwmap .v-all, .psx [data-rf="dep"] .rwmap .v-all { display: none; }
.psx [data-rf="arr"] .rwmap .v-arr, .psx [data-rf="dep"] .rwmap .v-dep { display: inline; }
.psx [data-rf="arr"] :is(.ar.dep, .chip.dep), .psx [data-rf="dep"] :is(.ar.ldg, .chip.ldg) { display: none; }
.psx .chip.o-arr, .psx .chip.o-dep, .psx [data-rf="arr"] .chip.o-all, .psx [data-rf="dep"] .chip.o-all { display: none; }
.psx [data-rf="arr"] .chip.o-arr, .psx [data-rf="dep"] .chip.o-dep { display: inline-flex; }
.psx [data-rf="arr"]:not(.has-sel) :is(.rwitem, .tile):not(.on-arr), .psx [data-rf="dep"]:not(.has-sel) :is(.rwitem, .tile):not(.on-dep) { opacity: .4; }
.psx [data-rf="arr"]:not(.has-sel) .rwmap .rw:not(:has(.v-arr .ln.l)) .ln, .psx [data-rf="dep"]:not(.has-sel) .rwmap .rw:not(:has(.v-dep .ln.d)) .ln { opacity: .45; }
.psx .has-sel .rwmap .rw:not(.sel) .ln { stroke: var(--rwy); opacity: .45; }
.psx .has-sel .rwmap .rw:not(.sel) :is(.ar, .cl) { display: none; }
.psx .rwmap .rw.sel .ln { stroke-width: 10; }
.psx .rwmap .rw.sel .ln.n { stroke: var(--x-muted); }
.psx .has-sel :is(.rwitem, .tile):not(.sel) { opacity: .4; }
.psx .endrow .bars .bl { background: oklch(var(--line-l) var(--line-c) 155); } .psx .endrow .bars .bd { background: oklch(var(--line-l) var(--line-c) 250); }
.psx .chart text { font: 11px "Figtree", sans-serif; fill: var(--x-muted); }
.psx .chart .gl { stroke: var(--x-line); stroke-width: 1; }
.psx .chart rect.todo { fill: var(--rwy); } .psx .chart rect.arr { fill: oklch(var(--line-l) var(--line-c) 155); } .psx .chart rect.dep { fill: oklch(var(--line-l) var(--line-c) 250); }
.psx .chart .now { stroke: var(--x-now); stroke-width: 2; }
.psx .legend .ldg-bg { background: oklch(var(--line-l) var(--line-c) 155); } .psx .legend .dep-bg { background: oklch(var(--line-l) var(--line-c) 250); }
.psx .legend .todo-bg { background: var(--rwy); } .psx .legend .now-bg { background: var(--x-now); }
.psx .spotpanel[hidden] { display: none !important; }
/* Vorschau-Leiste für Admins (neue Fassungen vor Marcos OK, ?design=new) */
.psx .preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; color: var(--x-muted); }
.psx .preview b { color: var(--x-fg); }
/* Handy-Regeln der Specials-Zeilen (.row: grid-area für .fn/.typebox) nicht auf den Kasten übertragen */
.psx .hvrow > * { grid-area: auto; }
@media (max-width: 520px) { .psx .rwA .rwmap { max-width: 300px; justify-self: center; } }
/* Verkürzter Kasten über dem Board (_apbox_x.html apbox_short) */
.psx .bs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.6fr); align-items: stretch; }
.psx .bs > div { padding: 12px 16px; display: grid; gap: 6px; align-content: center; min-width: 0; }
.psx .bs > div + div { border-left: 1px solid var(--x-line); }
.psx .bs .v { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.psx .bs .wx { display: flex; align-items: center; gap: 10px; } .psx .bs .wx > svg { width: 30px; height: 30px; color: var(--x-muted); flex: none; }
.psx .bs .rwb { display: flex; align-items: center; gap: 12px; } .psx .bs .mini { width: 56px; height: 56px; flex: none; }
.psx .bs .mini .ln { stroke: var(--rwy); } .psx .bs .mini .ln.l { stroke: oklch(var(--line-l) var(--line-c) 155); } .psx .bs .mini .ln.d { stroke: oklch(var(--line-l) var(--line-c) 250); }
.psx .bs .hlmini .r { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.psx .bs .hlmini .r > * { grid-area: auto; }
.psx .bs .hlmini .r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.psx .bs .more2 { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } .psx .bs .more2 svg { width: 15px; height: 15px; }
.psx .bs .more2:hover { text-decoration: underline; }
.psx .apname a:hover, .psx a.apname:hover { text-decoration: underline; }
@media (max-width: 900px) { .psx .bs { grid-template-columns: 1fr 1fr; } .psx .bs > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--x-line); } }
@media (max-width: 560px) { .psx .bs { grid-template-columns: 1fr; } .psx .bs > div + div { border-left: 0; border-top: 1px solid var(--x-line); } }

/* Board-Filter und Flugliste im neuen Design (Admin-Vorschau ?design=new, Marco 05.11.2026). Inhalte, Spalten und Größen
   bleiben wie im bisherigen Board (_flight.html, board.html); hier nur der Stil: Figtree, gedämpftes Hell, Pastell-Schilder,
   Linien statt Kästen, keine Versal-Beschriftungen. Greift über die daisyUI-Farbvariablen, damit alle Bausteine mitziehen.
   Seit 08.11.2026 auch um die Inhalte der Administration (settings_layout.html), die noch Tailwind/daisyUI nutzen. */
.psxb {
  --x-bg: var(--ps-bg); --x-card: var(--ps-card); --x-line: var(--ps-line); --x-soft: var(--ps-soft); --x-zebra: var(--ps-zebra);
  --x-fg: var(--ps-fg); --x-muted: var(--ps-muted); --x-faint: var(--ps-faint); --x-on: var(--ps-on);
  --t-l: var(--ps-t-l); --t-c: var(--ps-t-c); --i-l: var(--ps-i-l); --i-c: var(--ps-i-c);
  --color-base-100: var(--x-card); --color-base-200: var(--x-bg); --color-base-300: var(--x-line); --color-base-content: var(--x-fg);
  --radius-box: 12px; --radius-field: 8px; --radius-selector: 7px;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* weniger Monospace: Zahlen und Codes in Figtree mit festen Ziffernbreiten */
.psxb .font-mono { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* keine kleinen Versal-Beschriftungen (Spaltenköpfe, Tagestrenner, Gruppen) */
.psxb .eyebrow, .psxb .ps-group-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--x-muted); }
.psxb [data-day].eyebrow { color: var(--x-fg); font-size: 14.5px; }
/* Schilder: Satzschreibung, Pastell je Kategorie (--h wie auf /specials); Status-Schilder dürfen Versalien behalten */
.psxb .tag { text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.25; border-radius: 5px; padding: 3px 8px; }
.psxb [data-sc="mil"] { --h: 125; } .psxb [data-sc="vip"] { --h: 300; } .psxb [data-sc="unusual"], .psxb [data-sc="variant"] { --h: 190; }
.psxb [data-sc="new"] { --h: 250; } .psxb [data-sc="livery"], .psxb [data-sc="sticker"] { --h: 45; } .psxb [data-sc="emerg"] { --h: 25; }
.psxb [data-sc="rare"] { --h: 0; --t-c: 0; --i-c: 0; }
.psxb .cat-tag { background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psxb .cat-tag[data-sc="unsched"] { background: #f5c518; color: #15171a; }
.psxb .cat-tag[data-sc="sticker"], .psxb .cat-tag[data-sc="variant"] { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(0.6 0.13 var(--h)); }
.psxb .cat-tag.ps-expected { background: transparent; outline: 1.5px dashed oklch(0.6 0.13 var(--h, 0)); }
/* Special-Zeilen: leichte Pastell-Tönung und Balken vorne, kein Rahmen rundherum */
.psxb .cat-row { background-color: color-mix(in oklab, oklch(var(--t-l) var(--t-c) var(--h, 0)) 38%, var(--x-card)); box-shadow: none;
  border-left: 4px solid oklch(0.68 0.13 var(--h, 0)); }
.psxb .cat-row[data-sc="unsched"] { background-color: color-mix(in oklab, #f5c518 16%, var(--x-card)); border-left-color: #e0a800; }
@media (min-width: 80rem) { .psxb .cat-row:hover { background-color: color-mix(in oklab, oklch(var(--t-l) var(--t-c) var(--h, 0)) 55%, var(--x-card)); } }
/* Knöpfe und Felder wie /specials: flach, graue Fläche, Linien statt Schatten */
.psxb .btn { border-radius: 8px; font-weight: 600; box-shadow: none; }
.psxb .btn:not(.btn-primary):not(.btn-active) { background: var(--ps-btn); border-color: var(--ps-btn-b); }
.psxb .btn:not(.btn-primary):not(.btn-active):hover { background: var(--ps-hover); }
.psxb :is(.input, .select, .textarea) { border-radius: 8px; box-shadow: none; border-color: var(--ps-field-b); }
.psxb .rounded-box { border-radius: 12px; }
/* Filterkasten im neuen Design: heller Kopf statt dunkler Leiste, Umschalter wie .seg auf /specials (graue Schiene, gewähltes Feld hell) */
.psxb { --filter-bg: var(--x-card); --filter-edge: var(--x-line); }
.psxb .ps-filter-head, [data-theme="planescope-dark"] .psxb .ps-filter-head { background: var(--x-card); color: var(--x-fg); border-bottom: 1px solid var(--x-line); }
.psxb .ps-filter-head .opacity-60 { color: var(--x-muted); opacity: 1; }
.psxb .ps-seg { border: 0; background: var(--ps-btn); border-radius: 9px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--ps-btn-b); }
.psxb .ps-seg :is(label, a) { border-left: 0; border-radius: 7px; height: 2.125rem; font-weight: 500; color: var(--x-muted); }
.psxb .ps-seg :is(label, a):hover { background: transparent; color: var(--x-fg); }
.psxb .ps-seg label:has(input:checked), .psxb .ps-seg a[aria-current="true"], .psxb .ps-seg a.active {
  background: var(--ps-on); color: var(--ps-on-fg); box-shadow: 0 0 0 1px var(--ps-on-b); }
[data-theme="planescope-dark"] .psxb .ps-seg label:has(input:checked), [data-theme="planescope-dark"] .psxb .ps-seg a[aria-current="true"] { background: #3a3a3f; box-shadow: none; }
.psxb .ps-seg label:has(input:checked) .ps-dot { box-shadow: none; }
.psxb .ps-dot { border-radius: 2px; }

/* ---------- Filter-Darstellungen (Marco 05.11.2026): board.html data-fl, Verhalten static/filters_x.js ---------- */
/* Kopf im Stil der neuen Popups; nur am Desktop in Fenster/Menü sichtbar */
.psxb .fx-head { display: none; }
.psxb .fx-sq { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  background: oklch(var(--t-l) var(--t-c) var(--h, 250)); color: oklch(var(--i-l) var(--i-c) var(--h, 250)); }
.psxb .fx-head b { display: block; font-size: 15.5px; font-weight: 600; } .psxb .fx-head small { display: block; font-size: 13px; color: var(--x-muted); }
.psxb .fx-close { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--x-muted); background: transparent; border: 0; cursor: pointer; }
.psxb .fx-close:hover { background: var(--x-soft); color: var(--x-fg); }
/* Nur ein Abschnitt (Toolbar-Menü bzw. Handy-Blatt aus einem Themen-Knopf) */
.psxb #filter-panel[data-only] [data-fsec] { display: none; }
.psxb #filter-panel[data-only="route"] [data-fsec="route"], .psxb #filter-panel[data-only="airline"] [data-fsec="airline"],
.psxb #filter-panel[data-only="aircraft"] [data-fsec="aircraft"], .psxb #filter-panel[data-only="flight"] [data-fsec="flight"],
.psxb #filter-panel[data-only="interest"] [data-fsec="interest"], .psxb #filter-panel[data-only="specials"] [data-fsec="specials"],
.psxb #filter-panel[data-only="hubs"] [data-fsec="hubs"] { display: flex; }
.psxb #filter-panel[data-only] #filters > .grid, .psxb #filter-panel[data-only] .ps-seg-row, .psxb #filter-panel[data-only] .fsec-pair { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; }
.psxb #filter-panel[data-only] [data-fsec] { flex-direction: column; }
@media (min-width: 64rem) {
  /* Fenster (Clean) und Menü (Toolbar): schwebend, Kopf und Fuß sichtbar, Inhalt in grauer Fläche */
  .psxb #filter-panel.fx-open { position: fixed; z-index: 60; margin: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 32px);
    border: 1px solid var(--x-line); border-radius: 12px; background: var(--x-card); padding: 14px; gap: 12px; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45);
    animation: fx-in 200ms cubic-bezier(.2, .7, .2, 1); }
  .psxb #filter-panel.fx-open .fx-head { display: flex; gap: 10px; align-items: center; }
  .psxb #filter-panel.fx-open #filters { background: var(--x-soft); border-radius: 8px; padding: 12px; overflow-y: auto; }
  .psxb #filter-panel.fx-open #filters :is(.input, .select, .ps-seg) { background-color: var(--x-card); }
  .psxb #filter-panel.fx-open #filter-foot { display: flex; position: static; margin: 0; padding: 0; border: 0; background: transparent; }
  .psxb #filter-panel.fx-open[data-only] { width: min(22rem, calc(100vw - 24px)); }
  .psxb #filter-panel.fx-open:not([data-only]) { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(60rem, calc(100vw - 48px)); }
  /* Clean und Toolbar: Kasten zu, bis man ihn öffnet */
  .psxb:is([data-fl="clean"], [data-fl="toolbar"]) #filter-panel:not(.fx-open) { display: none; }
  .psxb:is([data-fl="clean"], [data-fl="toolbar"]) #filter-head { display: none; }
  .psxb:is([data-fl="clean"], [data-fl="toolbar"]) #filterbar { border-radius: 12px; border: 1px solid var(--x-line); border-top: 1px solid var(--x-line); }
  .psxb[data-fl="clean"] .ps-filters-btn { display: inline-flex !important; }
}
@keyframes fx-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .psxb #filter-panel.fx-open { animation: none; } }
#fx-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--ps-backdrop); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
[data-theme="planescope-dark"] #fx-backdrop { background: rgb(17 17 19 / .6); }
.psxb .ps-filters-btn { background: var(--ps-pri) !important; color: var(--ps-on-pri) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--ps-pri-b) !important; }

/* Toolbar: Themen-Knöpfe und Specials-Schilder; nur in diesem Modus */
.psxb .ftopics, .psxb .fspecials { display: none; }
.psxb[data-fl="toolbar"] .ftopics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--x-line); }
.psxb[data-fl="toolbar"] .fspecials { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--x-line); }
.psxb .ftopic { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ps-btn); color: var(--x-fg); box-shadow: inset 0 0 0 1px var(--ps-btn-b);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.psxb .ftopic:hover, .psxb .ftopic[aria-expanded="true"] { background: var(--ps-hover); }
.psxb .ftopic.is-set { background: var(--ps-pri); color: var(--ps-on-pri); box-shadow: inset 0 0 0 1px var(--ps-pri-b); } .psxb .ftopic b { font-weight: 600; }
.psxb .ftopic svg { opacity: .7; }
/* Umschalter Specials / All flights über der Liste (Startansicht board_default, Marco 07.11.2026: Fassung B in der warmen
   Specials-Farbe). Farbton --h vom Element (data-sc="livery", wie die Special-Livery-Schilder), gewählt „Specials“ = Pastell
   der Kategorie, gewählt „All flights“ = neutral. Handy: beide Knöpfe auf voller Breite. */
.psxb .spsw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; }
.psxb .spsw-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 8px; background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); }
.psxb .spsw-seg a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 6px;
  font-size: 15px; font-weight: 600; color: var(--x-muted); white-space: nowrap; }
.psxb .spsw-seg a:not(.on):hover { background: var(--ps-hover); color: var(--x-fg); }
.psxb .spsw-seg a.sp svg { color: oklch(var(--i-l) var(--i-c) var(--h)); }
.psxb .spsw-seg a.on { background: var(--x-card); color: var(--x-fg); box-shadow: inset 0 0 0 1px var(--x-line); }
.psxb .spsw-seg a.sp.on { background: oklch(var(--t-l) var(--t-c) var(--h)); color: oklch(var(--i-l) var(--i-c) var(--h)); box-shadow: inset 0 0 0 1px oklch(0.6 0.13 var(--h)); }
.psxb .spsw-seg em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--x-card); color: var(--x-fg); box-shadow: inset 0 0 0 1px var(--x-line); }
.psxb .spsw-def { font-size: 13px; color: var(--x-muted); }
.psxb .spsw-def a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.psxb .spsw-def a:hover { color: var(--x-fg); }
@media (max-width: 40rem) { .psxb .spsw-seg { display: flex; width: 100%; } .psxb .spsw-seg a { flex: 1; padding: 10px 8px; } }
.psxb .fspecials-l { font-size: 13.5px; font-weight: 600; color: var(--x-muted); margin-right: 4px; }
.psxb .fspecials .cat-tag { cursor: pointer; }
.psxb .fspecials .cat-tag.is-off { background: transparent; color: var(--x-muted); box-shadow: inset 0 0 0 1px var(--x-line); }
@media (max-width: 63.99rem) {   /* Handy/Tablet: Zeilen seitlich wischen, ein Tipp je Filter */
  .psxb[data-fl="toolbar"] :is(.ftopics, .fspecials) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .psxb[data-fl="toolbar"] :is(.ftopics, .fspecials) > * { flex: none; }
}

/* Sidebar: Filter links in einer Spalte, Liste rechts (Desktop) */
@media (min-width: 80rem) {
  .psxb[data-fl="sidebar"] { display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .psxb[data-fl="sidebar"] > * { grid-column: 2; }
  .psxb[data-fl="sidebar"] > #filter-panel { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 4.5rem; margin: 0; max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
  .psxb[data-fl="sidebar"] #filter-head { display: none; }
  .psxb[data-fl="sidebar"] #filterbar { border-radius: 12px; border: 1px solid var(--x-line); }
  .psxb[data-fl="sidebar"] #filters > .grid, .psxb[data-fl="sidebar"] .ps-seg-row, .psxb[data-fl="sidebar"] .fsec-pair { display: grid !important; grid-template-columns: 1fr !important; gap: 14px; }
}

/* Info-Knopf und Popup wie auf /specials (Hub airlines) */
.psxb .info-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--x-faint, #9d9da6); color: var(--x-muted);
  font-weight: 600; font-size: 12px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.psxb .info-x:hover, .psxb .dropdown-open .info-x { color: var(--x-fg); border-color: var(--x-fg); }
.psxb .pop-x { display: block; width: max-content; max-width: 18rem; background: var(--x-card); border: 1px solid var(--x-line); border-radius: 8px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 400; color: var(--x-fg); text-transform: none; letter-spacing: 0; white-space: normal; box-shadow: 0 10px 24px -14px rgb(0 0 0 / .35); }

/* Gesetzte Filter (Schilder mit ×) und gespeicherte Filter im neuen Stil */
.psxb #filterbar a.bg-primary { background: var(--ps-btn); box-shadow: inset 0 0 0 1px var(--ps-btn-b); color: var(--x-fg); border-radius: 7px; font-size: 13.5px; padding: 4px 6px 4px 10px; }
.psxb #filterbar a.bg-primary > span:first-child { opacity: 1; color: var(--x-muted); }
.psxb [data-saved-filters] .dropdown-content { background: var(--x-card); border-color: var(--x-line); border-radius: 12px; padding: 14px; }
.psxb [data-saved-filters] [data-saved-form] { background: var(--x-soft); border: 0; border-radius: 8px; padding: 10px; margin-top: 10px; }
.psxb [data-saved-filters] [data-saved-form] .input { background: var(--x-card); }
.psxb [data-saved-filters] [data-saved-form] .btn-primary { background: var(--ps-pri); color: var(--ps-on-pri); border: 0; box-shadow: inset 0 0 0 1px var(--ps-pri-b); }
.psxb [data-saved-filters] [data-saved-list] li:hover { background: var(--x-soft); border-radius: 6px; }
/* Saved offen: Knopf hervorgehoben; Handy: Hintergrund abgedunkelt wie die Schild-Popups (.popx), Marco 05.11.2026 */
.psxb [data-saved-filters]:focus-within .ps-seg button { background: var(--x-on); color: var(--ps-on-fg); box-shadow: 0 0 0 1px var(--ps-on-b); }
@media (max-width: 47.999rem) { .psxb [data-saved-filters]:focus-within .dropdown-content { box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); animation: ps-pop-in .18s ease-out; } }
.psxb .fx-savedhead { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.psxb .fx-savedhead b { display: block; font-size: 15.5px; font-weight: 600; } .psxb .fx-savedhead small { display: block; font-size: 13px; color: var(--x-muted); }

/* Handy/Tablet: Filter-Blatt wie das Meldefenster „Report a movement“ (Marco 05.11.2026): schwebende Karte mit Rand,
   mittig, milchiger Hintergrund, Kopf mit Farbquadrat, Inhalt scrollt, Knöpfe unten bleiben stehen */
@media (max-width: 63.99rem) {
  .psxb #filter-panel { left: 10px !important; right: 10px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%);
    max-height: calc(100vh - 20px) !important; max-height: calc(100dvh - 20px) !important; border: 1px solid var(--x-line) !important; border-radius: 16px !important;
    background: var(--x-card); box-shadow: none !important; overflow: hidden !important; flex-direction: column; }
  .psxb #filter-panel:not(.max-lg\:hidden) { display: flex; animation: fx-in 200ms cubic-bezier(.2, .7, .2, 1); }
  .psxb #filter-panel .fx-oldhead { display: none; }
  .psxb #filter-panel .fx-head { display: flex; gap: 10px; align-items: center; padding: 14px 14px 12px; flex: none; }
  .psxb #filter-panel #filters { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 14px; padding: 12px !important;
    background: var(--x-soft); border-radius: 10px; }
  .psxb #filter-panel #filters :is(.input, .select, .ps-seg) { background-color: var(--x-card); }
  .psxb #filter-panel #filter-foot { position: static; flex: none; margin: 0; padding: 12px 14px; border-top: 0; background: transparent; }
  .psxb #filter-panel #filter-foot .btn-primary { background: var(--x-fg); color: var(--x-card); border: 0; }
  .psxb #filter-backdrop { background: var(--ps-backdrop) !important; -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
  [data-theme="planescope-dark"] .psxb #filter-backdrop { background: rgb(17 17 19 / .6) !important; }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) { .psxb #filter-panel:not(.max-lg\:hidden) { animation: none; } }
/* Classic am Handy (Marco 06.11.2026: „Classic = alle Filter offen“, Entwurf design/filter-classic/): wie am PC ein Kasten aus
   Kopfzeile „Filter flights“, Leiste und offenen Feldern über der Liste (app.js setzt .fx-inline); hebt die Fenster-Regeln
   oben auf. Felder untereinander, Knopfleisten über die ganze Breite. Weggescrollt klebt nur die Leiste als eigener Kasten
   und zeigt „Filters“ (springt zurück). Bis 08.11.2026 galt hier noch die alte Blatt-Regel (88dvh hoch) → Inhalt hing über der Liste. */
@media (max-width: 63.99rem) {
  .psxb[data-fl="classic"] #filter-head { display: flex; margin-top: 8px; border: 1px solid var(--filter-edge); border-bottom: 0; border-radius: 12px 12px 0 0; white-space: nowrap; }
  /* Erklärung und „Reset all filters“ passen nicht in die Zeile; Zurücksetzen steht am Handy schon in der Leiste */
  .psxb[data-fl="classic"] #filter-head > :is(span + span, a) { display: none; }
  .psxb[data-fl="classic"] #filterbar { margin-inline: 0; background: color-mix(in oklab, var(--filter-bg) 95%, transparent);
    border: 1px solid var(--filter-edge); border-top: 0; border-bottom-color: var(--x-line); border-radius: 0; }
  .psxb[data-fl="classic"] #filterbar[data-compact] { border-top: 1px solid var(--filter-edge); border-bottom-color: var(--filter-edge); border-radius: 12px; }
  .psxb[data-fl="classic"] #filterbar:not([data-compact]) .ps-filters-btn { display: none; }
  .psxb #filter-panel.fx-inline { position: static !important; transform: none; display: block; max-height: none !important;
    overflow: visible !important; margin: 0 0 16px !important; padding: 0 !important; animation: none; box-shadow: none !important;
    background: var(--filter-bg); border: 1px solid var(--filter-edge) !important; border-top: 0 !important; border-radius: 0 0 12px 12px !important; }
  .psxb #filter-panel.fx-inline :is(.fx-head, .fx-oldhead, #filter-foot) { display: none; }
  .psxb #filter-panel.fx-inline #filters { margin: 0; padding: 14px 12px !important; background: transparent; overflow: visible; }
  /* Schiene der Umschalter wieder sichtbar (die Fenster-Regel färbt sie wie den Kasten, dort liegt sie auf grauem Grund) */
  .psxb #filter-panel.fx-inline #filters .ps-seg { background-color: var(--ps-btn); }
  .psxb #filter-panel.fx-inline :is(.ps-seg-row, .fsec-pair) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .psxb #filter-panel.fx-inline [data-fsec]:not([data-fsec="specials"]) .ps-seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .psxb #filter-panel.fx-inline [data-fsec]:not([data-fsec="specials"]) .ps-seg label { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 4px; }
}
/* Specials im Filter: einzelne Kästchen mit Abstand statt einer umbrechenden Schiene */
.psxb #filters [data-fsec="specials"] .ps-seg { background: transparent !important; padding: 0; gap: 6px; box-shadow: none; }   /* Ring der Gruppe lief zwischen umgebrochenen Knöpfen sichtbar mit (Handy, 07.11.2026) */
.psxb #filters [data-fsec="specials"] .ps-seg label { background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line); padding: 0 11px; height: 2.125rem; border: 0; }
.psxb #filters [data-fsec="specials"] .ps-seg label:has(input:checked) { background: var(--ps-pri); color: var(--ps-on-pri); box-shadow: inset 0 0 0 1px var(--ps-pri-b); }

/* Handy: Knöpfe im Flughafen-Kopf nebeneinander gleich breit, Text nie umbrechen (Marco 05.11.2026: „Highlights compact“ brach um) */
.psx .btn-x { white-space: nowrap; }
@media (max-width: 640px) {
  .psx .aphead .actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .psx .aphead .actions .btn-x { padding-inline: 8px; font-size: 13.5px; min-width: 0; }
}
/* Handy-Filter je Darstellung (Marco 05.11.2026): Clean/Toolbar = schwebende Karte wie das Meldefenster (oben) mit Abstand
   zu den Gerätekanten; Classic steht offen über der Liste (.fx-inline oben) */
@media (max-width: 63.99rem) {
  .psxb #filter-panel { left: max(10px, env(safe-area-inset-left, 0px)) !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; }
}

/* Startseite (templates/overview.html, Marco 05.11.2026): Begrüßung, Hub-Schalter, je Flughafen ein Kasten mit drei Spalten */
.psx.home .hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.psx.home .hello h1 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 600; line-height: 1.1; margin: 0; }
.psx.home .hello .clock { text-align: right; } .psx.home .hello .clock b { display: block; font-size: clamp(30px, 5vw, 44px); font-weight: 600; line-height: 1; }
.psx.home .hello .clock span { display: block; color: var(--x-muted); font-size: 13.5px; margin-top: 4px; }
@media (max-width: 640px) { .psx.home .hello .clock { text-align: left; } }
.psx.home .hometools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
/* Hub-Schalter steht hier auf dem Seitengrund (= --x-soft): Schiene eine Stufe dunkler, sonst unsichtbar */
.psx.home .hometools .hubsw .seg { background: var(--x-line); }
.psx.home .homecard .aphead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act"; }
.psx.home .homerow { --cols: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }
.psx.home .homesep { border-top: 1px solid var(--x-line); margin: 4px 0; }
@media (max-width: 1180px) { .psx.home .homecard .aphead { grid-template-areas: "id" "act"; grid-template-columns: 1fr; } }
@media (max-width: 640px) { .psx.home .homecard .aphead .actions { grid-template-columns: 1fr 1fr; } .psx.home .homecard .aphead .actions > :last-child { grid-column: 1 / -1; } }
.psx.home .empty { padding: 40px 24px; text-align: center; color: var(--x-muted); }
/* Startseite als Übersicht (Marco 05.11.2026): Wetter einzeilig + Sonnenbalken, Movements kompakt; Handy kurz ohne großes Pistenbild */
.psx.home .wxl { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.psx.home .wxl span { display: inline-flex; align-items: center; gap: 6px; } .psx.home .wxl svg { color: var(--x-muted); }
.psx.home .sunbox { display: grid; gap: 6px; }
.psx.home .sunrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 14.5px; }
.psx.home .sunrow span { display: inline-flex; align-items: center; gap: 6px; } .psx.home .sunrow svg { color: var(--x-muted); }
.psx.home .tl { position: relative; height: 22px; border-radius: 6px; background: var(--x-soft); overflow: hidden; }
.psx.home .tl i { position: absolute; top: 0; bottom: 0; }
.psx.home .tl .day { background: oklch(var(--t-l) 0.11 85); } .psx.home .tl .gold { background: oklch(0.7 0.15 65); opacity: .7; } .psx.home .tl .nowm { width: 2px; background: var(--x-now); }
.psx.home .homerow > .box { gap: 12px; }
.psx.home .homerow .big { font-size: 30px; }
.psx.home .rwshort { display: none; align-items: center; gap: 12px; }
.psx.home .rwshort .mini { width: 56px; height: 56px; flex: none; }
@media (max-width: 680px) {
  .psx.home .homerw { display: none; }
  .psx.home .rwshort { display: flex; border-top: 1px solid var(--x-line); padding-top: 12px; }
  .psx.home .homerow [data-sec="hl"] { border-left: 0; border-top: 1px solid var(--x-line); }
  .psx.home .homerow .hl > :nth-child(n+4) { display: none; }
  .psx.home .homerow .mvline .k { min-width: 5.6rem; }
}
/* kleines Pistenbild (Board-Kasten, Startseite am Handy): gleiche Linienfarben wie das große */
.psx .mini .ln { stroke: var(--rwy); } .psx .mini .ln.l { stroke: oklch(var(--line-l) var(--line-c) 155); } .psx .mini .ln.d { stroke: oklch(var(--line-l) var(--line-c) 250); }
/* Startseite: Highlights füllen die Höhe der höchsten Spalte (home_x.js); ausgeblendete Zeilen wirklich weg */
.psx.home .hl > [hidden] { display: none !important; }
@media (max-width: 680px) { .psx.home .homerow .hl > :nth-child(n+4) { display: none; } }
/* Startseite Handy: ohne Movements today, Pistenzeile bleibt (Marco 05.11.2026) */
.psx.home .homemv { display: grid; gap: 12px; }
@media (max-width: 680px) { .psx.home .homemv { display: none; } }
/* Startseite: Skala unter dem Sonnenbalken; Handy: drei Knöpfe in einer Zeile mit kurzer Beschriftung (Marco 05.11.2026) */
.psx.home .tlx { display: flex; justify-content: space-between; font-size: 12px; color: var(--x-muted); font-variant-numeric: tabular-nums; margin-top: -2px; }
.psx.home .l-short { display: none; }
@media (max-width: 640px) {
  .psx.home .homecard .aphead .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psx.home .homecard .aphead .actions > :last-child { grid-column: auto; }
  .psx.home .l-long { display: none; } .psx.home .l-short { display: inline; }
}
/* Gewähltes Feld in Link-Schienen (Richtung, Tage): wie .seg auf /specials statt dunkler Fläche */
.psxb .ps-seg a.is-on { background: var(--ps-on); color: var(--ps-on-fg); box-shadow: 0 0 0 1px var(--ps-on-b); }
[data-theme="planescope-dark"] .psxb .ps-seg a.is-on { background: #3a3a3f; box-shadow: none; }
.psxb .fspecials .fn { font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
/* Handy-Board: kleine Zeilen unter der Uhrzeit dürfen umbrechen statt in die Flugnummer zu laufen (Marco 05.11.2026) */
@media (max-width: 79.99rem) { .psxb [data-row] .flex-col > span.whitespace-nowrap { white-space: normal; } }
/* Handy: Schild-Popups unten heben sich ab wie das Meldefenster (Marco 05.11.2026: im Dunkelmodus nicht zu erkennen):
   Rest der Seite abgedunkelt, hellere Fläche, deutlicher Rand, Abstand zur Kante */
@media (max-width: 79.99rem) {
  :is(.psx, .psxb) .popx { box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45), 0 -14px 32px -14px rgb(0 0 0 / .6); border-radius: 16px; }
  [data-theme="planescope-dark"] :is(.psx, .psxb) .popx { background: #232327; border-color: #3f3f46; }
  [data-theme="planescope"] :is(.psx, .psxb) .popx { background: var(--ps-card); border-color: var(--ps-btn-b); }
  .psx .ps-pop .dropdown-content { bottom: max(.75rem, env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- Seite je Maschine (aircraft_page.py, templates/aircraft_x.html; Entwürfe design/maschine/ und
   design/maschine-mil/, Marco 05.11.2026). Alles unter .acpage, damit Specials und Flughafenseite unberührt bleiben. ---------- */
.psx.acpage { --ink-l: 0.45; --mil: 125; }
[data-theme="planescope-dark"] .psx.acpage { --ink-l: 0.85; }
.acpage .okbar { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 8px; padding: 9px 14px; font-size: 14px; }
.acpage .achead { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id act gear"; }
@media (max-width: 760px) { .acpage .achead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id gear" "act act"; }
  .acpage .achead .actions { display: grid; grid-template-columns: 1fr 1fr; } .acpage .achead .actions .btn-x { justify-content: center; } }
.acpage .acid { display: grid; gap: 3px; min-width: 0; }
.acpage .regline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
/* Langer Livery-Name (OO-SNO „Trident, Belgian Icons – Red Devils / Red Flames“) bricht im Kopf um, statt über den Rand und
   unter das Zahnrad zu laufen (Marco 08.11.2026); nichts abschneiden, Symbol bleibt oben */
.acpage .regline .chip { white-space: normal; max-width: 100%; align-items: flex-start; line-height: 1.3; }
.acpage .regline .chip svg { flex: none; margin-top: 2px; }
.acpage .acreg { font-size: 24px; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 640px) { .acpage .acreg { font-size: 21px; } }
.acpage .c-mil { --h: 125; }
.acpage .c-livery, .acpage .c-sticker { --h: 45; }
.acpage .chip.c-mil.soft { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(var(--line-l) var(--line-c) 125); color: oklch(var(--ink-l) 0.13 125); }
.acpage .chip.plain { background: var(--x-soft); color: var(--x-fg); font-weight: 500; font-size: 12.5px; padding: 2px 7px; }
.acpage .btn-x { height: 36px; white-space: nowrap; }
.acpage .btn-x.on { background: oklch(var(--t-l) var(--t-c) 250); color: oklch(var(--i-l) var(--i-c) 250); }
.acpage .btn-x.dark { background: var(--x-fg); color: var(--x-card); }
.acpage .btn-x.sq { width: 36px; padding: 0; justify-content: center; }
.acpage .ulink { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--x-faint); font-weight: 600; }
.acpage .muted { color: var(--x-muted); } .acpage .small { font-size: 13px; }

/* Live-Zeile unter dem Kopf */
.acpage .live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 18px; border-bottom: 1px solid var(--x-line);
  background: color-mix(in oklab, oklch(var(--t-l) var(--t-c) 250) 45%, var(--x-card)); font-size: 14.5px; }
.acpage .live.mil { background: color-mix(in oklab, oklch(var(--t-l) var(--t-c) 125) 45%, var(--x-card)); }
.acpage .live .sep { color: var(--x-muted); }
.acpage .live .btn-x { margin-left: auto; height: 32px; background: var(--x-card); }
/* Verweise im Streifen (FR24/AirNav/ADS-B mit LIVE, Karte): als Gruppe rechts, am Handy eigene Zeile */
.acpage .live .lvlinks { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.acpage .live .lvlinks .btn-x { margin-left: 0; gap: 5px; padding-inline: 10px; }
.acpage .live .lvlinks .sh { display: none; }
.psx .live-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 3px; background: oklch(0.58 0.2 25); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: 3px 5px 3px 4px; }
.psx .live-tag i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .psx .live-tag i { animation: ps-live-blink 1.6s ease-in-out infinite; } @keyframes ps-live-blink { 50% { opacity: .35; } } }
@media (max-width: 640px) { .acpage .live { padding: 10px 14px; } .acpage .live .btn-x { margin-left: 0; }
  .acpage .live .lvlinks { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acpage .live .lvlinks .btn-x { justify-content: center; padding-inline: 6px; font-size: 13px; }
  .acpage .live .lvlinks .lg { display: none; } .acpage .live .lvlinks .sh { display: inline; }
  .acpage .live .lvlinks .chev { display: none; } .acpage .live .lvlinks .map { grid-column: 1 / -1; } }

/* Nächster Besuch */
.acpage .visit { display: grid; gap: 12px; }
/* daisyUI .label ist flex + nowrap → lange Flughafenliste lief am Handy aus dem Kasten (05.11.2026) */
.acpage .visit > .label { display: block; white-space: normal; }
.acpage .vrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
@media (max-width: 520px) { .psx.acpage .vrow { grid-template-columns: 1fr; } .psx.acpage .vrow .vkind { grid-column: 1; } }
.acpage .vrow .t { font-size: 22px; font-weight: 600; }
.acpage .vrow .vwhat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.acpage .vrow .vwhat b { font-weight: 700; }
.acpage .vrow .vkind { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13.5px; color: var(--x-muted); }
.acpage .ground { display: grid; gap: 6px; }
.acpage .gbar { position: relative; height: 10px; border-radius: 5px; background: var(--x-soft); }
.acpage .gbar i { position: absolute; top: 0; bottom: 0; width: 8%; border-radius: 5px; }
.acpage .gbar .in { left: 0; background: oklch(var(--line-l) var(--line-c) 155); } .acpage .gbar .out { right: 0; background: oklch(var(--line-l) var(--line-c) 250); }
.acpage .gtxt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--x-muted); }
.acpage .gtxt b { color: var(--x-fg); font-weight: 600; }
.acpage .note { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--x-muted); border-top: 1px solid var(--x-line); padding-top: 10px; }
.acpage .note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.acpage .note b { color: var(--x-fg); font-weight: 600; }

/* Steckbrief, Foto, Logbuch */
.acpage .kv dd { min-width: 0; }
.acpage .src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acpage .photo { aspect-ratio: 3 / 2; max-width: 100%; border-radius: 8px; background: var(--x-soft); display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; margin: 0; color: var(--x-faint); }
.acpage .photo > svg { width: 30%; height: auto; }
.acpage .photo.has { aspect-ratio: auto; display: block; background: none; }
.acpage .photo.has img { display: block; width: 100%; height: auto; border-radius: 8px; }
.acpage .credit { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--x-muted); }
.acpage .logline { display: grid; gap: 4px; border-top: 1px solid var(--x-line); padding-top: 12px; }
.acpage .logline .r { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }

/* Flugliste wie das Board: Tagestrenner in Satzschreibung, Jetzt-Linie, Zebra */
.acpage .fl { display: grid; margin: 0 -18px; }
@media (max-width: 680px) { .acpage .fl { margin: 0 -14px; } }
.acpage .fl .day { padding: 7px 18px; background: var(--x-soft); font-size: 14px; font-weight: 600; }
.acpage .frow { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) minmax(0, 1.25fr) 7rem 7.4rem; grid-template-areas: "t f r w s";
  gap: 4px 14px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--x-line); }
/* eigene Rasterbereiche: die Handy-Regeln der Specials-Liste (.psx .fn / .what mit grid-area) dürfen hier nicht greifen */
.acpage .frow .tm { grid-area: t; } .acpage .frow .fn { grid-area: f; } .acpage .frow .rt { grid-area: r; }
.acpage .frow .rw { grid-area: w; } .acpage .frow .ss { grid-area: s; } 
.acpage .fl .day + .frow, .acpage .nowline + .frow { border-top: 0; }
.acpage .frow:nth-child(even) { background: var(--x-zebra); }
.acpage .frow .tm { display: grid; gap: 1px; }
.acpage .frow .tm b { font-size: 17px; font-weight: 700; white-space: nowrap; }
.acpage .frow small { font-size: 12.5px; color: var(--x-muted); font-weight: 500; }
.acpage .frow .tm small.e { color: oklch(var(--ink-l) 0.13 155); font-weight: 600; } .acpage .frow .tm small.l { color: oklch(var(--ink-l) 0.14 60); font-weight: 600; }
.acpage .frow .fn b { display: block; font-size: 16px; }
.acpage .frow .fn small { display: block; overflow-wrap: anywhere; }   /* umbrechen statt „…“ (Marco, 06.11.2026) */
.acpage .frow .rt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.acpage .frow .rt > svg { color: var(--x-muted); align-self: center; }
.acpage .frow .rt b { font-size: 16px; font-weight: 700; }
.acpage .frow .rt span { font-size: 12.5px; color: var(--x-muted); overflow-wrap: anywhere; min-width: 0; }
.acpage .frow .rw { justify-self: start; } .acpage .frow .ss { justify-self: end; }
.acpage .st { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: 3px 7px; white-space: nowrap;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.acpage .st.sched { background: transparent; box-shadow: inset 0 0 0 1px var(--x-faint); color: var(--x-muted); }
.acpage .st.pass { --h: 60; background: transparent; box-shadow: inset 0 0 0 1.5px oklch(var(--line-l) var(--line-c) 60); color: oklch(var(--ink-l) 0.13 60); }
@media (max-width: 680px) {
  .acpage .frow { grid-template-columns: 5.4rem minmax(0, 1fr) auto; grid-template-areas: "t f s" "t r w"; padding: 10px 14px; gap: 6px 12px; }
  .acpage .frow .tm { align-self: start; } .acpage .frow .rw { justify-self: end; }
  .acpage .fl .day { padding: 7px 14px; }
}
.acpage details.more > summary { list-style: none; cursor: pointer; }
.acpage details.more > summary::-webkit-details-marker { display: none; }
.acpage details.more[open] > summary { margin-bottom: 8px; }

/* Ziele, Heimatflughafen, Verlauf */
.acpage .bars { display: grid; gap: 7px; }
.acpage .brow { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 1.8rem; gap: 10px; align-items: center; font-size: 14px; }
.acpage .brow b { font-weight: 700; }
.acpage .brow .tr { position: relative; height: 20px; border-radius: 5px; background: var(--x-soft); overflow: hidden; }
.acpage .brow .tr i { position: absolute; inset: 0 auto 0 0; background: oklch(var(--t-l) var(--t-c) 250); border-radius: 5px; }
.acpage .brow .tr.mil i { background: oklch(var(--t-l) var(--t-c) 125); }
.acpage .brow .tr span { position: relative; padding-left: 8px; font-size: 12.5px; line-height: 20px; white-space: nowrap; }
.acpage .brow .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--x-muted); }
.psx.acpage .acstats, .psx.acpage .nowgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acpage .acstat { background: var(--x-soft); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.acpage .acstat b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.acpage .acstat span { font-size: 12.5px; color: var(--x-muted); }
.acpage .rwsplit { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.acpage .rwsplit i { display: block; height: 100%; background: oklch(var(--line-l) var(--line-c) 155); }
.acpage .rwleg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--x-muted); }
.acpage .rwleg b { color: var(--x-fg); }
.acpage .chart .grid { stroke: var(--x-line); stroke-width: 1; }
.acpage .chart .ax { font-size: 12px; fill: var(--x-muted); } .acpage .chart .yr { font-size: 12px; font-weight: 600; fill: var(--x-fg); }
.acpage .chart rect.cur { fill: var(--rwy); }

/* Militär: Tagesketten, Kalender */
.acpage .trips { display: grid; }
.acpage .trip { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--x-line); align-items: baseline; }
.acpage .trip:first-child { border-top: 0; padding-top: 0; }
.acpage .trip .td { font-size: 13.5px; color: var(--x-muted); }
.acpage .trip .chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.acpage .trip .chain b { font-weight: 700; } .acpage .trip .chain b.home { color: var(--x-muted); font-weight: 600; }
.acpage .trip .chain i { font-style: normal; color: var(--x-faint); }
.acpage .trip .tc { grid-column: 2; font-size: 12.5px; color: var(--x-muted); }
.acpage .cal { display: grid; grid-template-columns: 3.4rem repeat(7, minmax(0, 1fr)); gap: 4px; }
.acpage .cal .cw { font-size: 12.5px; color: var(--x-muted); text-align: center; }
.acpage .cal .cwk { font-size: 12.5px; color: var(--x-muted); align-self: center; white-space: nowrap; }
.acpage .cd { height: 34px; border-radius: 6px; background: var(--x-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 7px; font-size: 12px; }
.acpage .cd em { font-style: normal; color: var(--x-muted); } .acpage .cd b { font-weight: 700; }
.acpage .cd.n1 { background: oklch(var(--t-l) var(--t-c) 125); color: oklch(var(--i-l) var(--i-c) 125); }
.acpage .cd.n2 { background: oklch(var(--line-l) var(--line-c) 125); color: var(--x-card); }
.acpage .cd.n1 em, .acpage .cd.n2 em { color: inherit; opacity: .8; }
.acpage .cd.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--x-line); }
.acpage .cd.today { box-shadow: inset 0 0 0 2px var(--x-now); }
.acpage .legend .n1-bg { background: oklch(var(--t-l) var(--t-c) 125); } .acpage .legend .n2-bg { background: oklch(var(--line-l) var(--line-c) 125); }
@media (max-width: 520px) { .acpage .cal { grid-template-columns: 2.9rem repeat(7, minmax(0, 1fr)); gap: 3px; } .acpage .cd { height: 30px; padding: 0 4px; justify-content: center; } .acpage .cd b { display: none; } }

/* Benachrichtigen */
.acpage .nform { display: grid; gap: 12px; }
.acpage .apchips { padding: 0; }
.acpage .apchip { position: relative; font-weight: 600; font-size: 14px; color: var(--x-muted); border: 1px solid var(--x-line); border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.acpage .apchip input { position: absolute; opacity: 0; pointer-events: none; }
.acpage .apchip svg { width: 14px; height: 14px; display: none; }
.acpage .apchip:has(input:checked) { background: oklch(var(--t-l) var(--t-c) 250); color: oklch(var(--i-l) var(--i-c) 250); border-color: transparent; }
.acpage .apchip:has(input:checked) svg { display: block; }
.acpage .apchip:has(input:focus-visible) { outline: 2px solid oklch(0.65 0.15 250); outline-offset: 2px; }
.acpage .picker { display: grid; gap: 6px; }
.acpage .nfoot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* Spalten nie breiter als der Kasten (sonst wuchs „Next at your airports“ am Handy über den Rand, 05.11.2026) */
.psx.acpage .apbox .box, .psx.acpage .visit, .psx.acpage .ground { grid-template-columns: minmax(0, 1fr); }
/* Bodenzeit neu (Marco 05.11.2026): Punkt Landung – Linie – Punkt Start, darunter Landezeit | Bodenzeit | Startzeit */
.acpage .gline { display: flex; align-items: center; gap: 6px; }
.acpage .gtrack { flex: 1; height: 2px; border-radius: 1px; background: var(--x-line); }
.acpage .gdot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.acpage .gdot.g-ldg { background: oklch(var(--line-l) var(--line-c) 155); } .acpage .gdot.g-dep { background: oklch(var(--line-l) var(--line-c) 250); }
.acpage .gtimes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.acpage .gtimes > span { display: grid; gap: 1px; min-width: 0; }
.acpage .gtimes b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.acpage .gtimes small { font-size: 12.5px; color: var(--x-muted); }
.acpage .gtimes .mid { text-align: center; } .acpage .gtimes .mid b { font-size: 15px; padding-top: 3px; }
.acpage .gtimes .end { text-align: right; }
.acpage .lnote { grid-column: 1 / -1; font-size: 13.5px; color: var(--x-muted); line-height: 1.45; }
.acpage .lnote .unrev { display: inline-block; margin-left: 4px; font-size: 12px; border: 1px dashed var(--x-faint); border-radius: 4px; padding: 0 5px; }
.acpage .rwrow { grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) 1.8rem; }
.acpage .rwrow .rwn { display: grid; line-height: 1.2; } .acpage .rwrow .rwn small { font-size: 12px; color: var(--x-muted); }
.acpage .brow .tr.ldg i { background: oklch(var(--t-l) var(--t-c) 155); }

/* ---------- Details-Fenster der Flugliste (templates/_flight_details.html, Marco 05.11.2026, Entwurf design/details/) ----------
   Wurzel .psx.psxb.psd: Farben/Schilder wie Board. Tagesstrahl im Stil des Sonnenbalkens der Startseite (.psx.home .tl).
   Handy (< 640 px): Pistenbild, Licht und Legende weg, damit alles ohne Scrollen auf eine Seite passt. Nichts wird gekürzt. */
.psd { --ink-l: 0.45; display: block; background: var(--x-card); color: var(--x-fg); border: 1px solid var(--x-line); border-radius: 12px; overflow: hidden; }
[data-theme="planescope-dark"] .psd { --ink-l: 0.85; }
.psd .ldg { --h: 155; } .psd .dep { --h: 250; } .psd .err { --h: 25; }
.psd svg:not(.rwmap) { width: 16px; height: 16px; flex: none; }
.psd .dh { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--x-line); }
.psd .sq { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psd .sq svg { width: 19px; height: 19px; }
.psd .dh .id { min-width: 0; flex: 1; display: grid; gap: 2px; }
.psd .dh .id b { font-size: 22px; font-weight: 700; line-height: 1.1; }
.psd .dh .l2 { font-size: 13.5px; color: var(--x-muted); }
.psd .st { font-size: 12px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: 3px 7px; white-space: nowrap; text-transform: uppercase;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psd .st:not(.ldg):not(.dep):not(.err) { background: transparent; box-shadow: inset 0 0 0 1px var(--x-faint); color: var(--x-muted); }
.psd .acts { display: flex; align-items: center; gap: 6px; }
.psd .ib { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; font-weight: 600; font-size: 13.5px; background: var(--x-soft); border-radius: 8px; white-space: nowrap; }
.psd .ib:hover, .psd .btn:hover { background: var(--x-line); }
.psd .close { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; color: var(--x-muted); background: transparent; border: 0; cursor: pointer; }
.psd .close:hover { background: var(--x-soft); color: var(--x-fg); }
.psd .blk { padding: 16px 18px; display: grid; gap: 12px; min-width: 0; align-content: start; }
/* Mittelteil dynamisch (Marco 07.11.2026): Kästen je zwei nebeneinander, Linien über 1px-Abstand; ein übrig
   bleibender letzter Kasten über die ganze Breite – so entstehen keine leeren Flächen, wenn ein Kasten fehlt. */
.psd .pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--x-line); border-top: 1px solid var(--x-line); }
.psd .pgrid > .blk { background: var(--x-card); }
.psd .pgrid > .blk:last-child:nth-child(odd) { grid-column: 1 / -1; }
.psd .pgrid .lights { border-top: 1px solid var(--x-line); padding-top: 10px; }
.psd .rwbody { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: center; }
.psd .rwbody > .rwlines:only-child { grid-column: 1 / -1; }
.psd .rwlines { display: grid; gap: 8px; align-content: center; }
.psd .rwbody .dmap { margin: 4px 6px; }
.psd .rwlines:empty { display: none; }
.psd .sechead { display: flex; align-items: center; gap: 10px; }
.psd .sechead h3 { margin: 0; font-size: 16px; font-weight: 600; }
.psd .icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--x-soft); color: var(--x-muted); flex: none; }
.psd .wic { background: oklch(var(--t-l) var(--t-c) 45); color: oklch(var(--i-l) var(--i-c) 45); }
/* Strecke */
.psd .route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3rem, 1.4fr) minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.psd .ap > b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.psd .ap > span { display: block; font-size: 13.5px; color: var(--x-muted); }
.psd .ap.r { text-align: right; }
.psd .track { position: relative; height: 30px; margin-top: 2px; }
.psd .track::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: oklch(var(--line-l) var(--line-c) 155); }
.psd .track i { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; }
.psd .track i.a { left: 0; background: oklch(var(--line-l) var(--line-c) 250); } .psd .track i.b { right: 0; background: oklch(var(--line-l) var(--line-c) 155); }
.psd .track i.hollow { background: var(--x-card); box-shadow: inset 0 0 0 2.5px oklch(var(--line-l) var(--line-c) 155); }
.psd .track .pl { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: oklch(var(--ink-l) 0.13 155); background: var(--x-card); padding: 0 3px; display: grid; }
.psd .track .pl svg { width: 18px; height: 18px; }
.psd .track.lv::before { right: calc(100% - var(--p)); }
.psd .track.lv::after { content: ""; position: absolute; left: var(--p); right: 6px; top: 50%; border-top: 3px dotted var(--x-faint); margin-top: -1.5px; }
.psd .track.lv .pl { right: auto; left: calc(var(--p) - 12px); color: oklch(var(--ink-l) 0.13 250); }
/* Noch nicht gestartet (box.phase pre): ganze Strecke gepunktet, Flugzeug am Start */
.psd .track.pre::before { background: none; height: 0; margin-top: -1.5px; border-top: 3px dotted var(--x-faint); border-radius: 0; }
.psd .track.pre .pl { right: auto; left: 14px; color: oklch(var(--ink-l) 0.13 250); }
.psd .track .dur { position: absolute; left: 0; right: 0; top: 100%; text-align: center; font-size: 12.5px; color: var(--x-muted); }
.psd .track .dur b { color: var(--x-fg); }
.psd .times { display: grid; gap: 3px; margin-top: 8px; } .psd .ap.r .times { justify-items: end; }
.psd .tm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .psd .ap.r .tm { justify-content: flex-end; }
.psd .tm b { font-size: 19px; font-weight: 700; } .psd .tm .k { font-size: 13px; color: var(--x-muted); }
.psd .sub2 { font-size: 13px; color: var(--x-muted); }
.psd .sub2 .e { color: oklch(var(--ink-l) 0.13 155); font-weight: 600; } .psd .sub2 .l { color: oklch(var(--ink-l) 0.14 40); font-weight: 600; }
.psd .tnum, .psd .nw { white-space: nowrap; }
/* Maschine */
.psd .acgrid { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 14px; align-items: start; }
.psd .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14.5px; margin: 0; }
.psd .kv dt { color: var(--x-muted); } .psd .kv dd { margin: 0; min-width: 0; }
.psd .reglink { font-weight: 700; display: inline-flex; align-items: center; gap: 2px; border-bottom: 1.5px solid var(--x-faint); }
.psd .reglink svg { width: 14px; height: 14px; }
.psd .photo { display: grid; gap: 4px; margin: 0; min-width: 0; }
.psd .pimg { aspect-ratio: 3 / 2; max-width: 100%; border-radius: 8px; background: var(--x-soft); display: grid; place-items: center; overflow: hidden; font-size: 12px; color: var(--x-muted); }
.psd .photo img { width: 100%; height: auto; display: block; border-radius: 8px; }
.psd .credit { font-size: 12px; color: var(--x-muted); } .psd .credit.hidden { display: none; }
.psd .whyc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .psd .whyc b { font-size: 15px; }
.psd .whyt { margin: 0; font-size: 14px; line-height: 1.5; }
/* Tagesstrahl */
.psd .day { display: grid; gap: 2px; }
.psd .dtl { position: relative; height: 22px; border-radius: 6px; background: var(--x-soft); overflow: visible; }
.psd .dtl i { position: absolute; top: 0; bottom: 0; }
.psd .dtl .day { background: oklch(var(--t-l) 0.11 85); } .psd .dtl .gold { background: oklch(0.7 0.15 65); opacity: .7; }
.psd .dtl .day:first-child { border-radius: 0; }
.psd .dtl .gspan { top: 8px; bottom: 8px; background: var(--x-faint); border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--x-muted) 0 5px, transparent 5px 9px); }
.psd .dtl .gspan.done { background: var(--x-muted); }
.psd .dtl .gdot { top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 2px solid var(--x-card); background: oklch(var(--line-l) var(--line-c) var(--h)); }
.psd .dtl .gdot.hollow { background: var(--x-card); border: 3px solid oklch(var(--line-l) var(--line-c) var(--h)); }
.psd .dtl .nowm { width: 2.5px; top: -3px; bottom: -3px; background: var(--x-now); }
.psd .dtx { position: relative; height: 16px; font-size: 11px; color: var(--x-muted); }
.psd .dtx span { position: absolute; transform: translateX(-50%); } .psd .dtx span:first-child { transform: none; } .psd .dtx span:last-child { transform: translateX(-100%); }
.psd .gt { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; font-size: 13px; color: var(--x-muted); }
.psd .gt b { display: block; color: var(--x-fg); font-size: 15.5px; font-weight: 700; } .psd .gt small { font-weight: 500; color: var(--x-muted); font-size: 12px; }
.psd .gt .mid { text-align: center; } .psd .gt .end { text-align: right; }
.psd .turnbtn { all: unset; cursor: pointer; display: inline-block; text-align: right; border-radius: 6px; }
.psd .turnbtn:hover { color: var(--x-fg); } .psd .turnbtn svg { width: 13px; height: 13px; vertical-align: -2px; }
.psd .rwline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.psd .rwline > svg { color: var(--x-muted); } .psd .rwline .sp { width: 8px; }
.psd .chip { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 7px; font-weight: 600; font-size: 13px;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.psd .chip.guess { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(var(--line-l) var(--line-c) var(--h)); }
.psd .dmap { max-width: 10rem; overflow: visible; margin: 6px 10px; } .psd .dmap .north { display: none; }
.psd .lights { display: grid; gap: 8px; font-size: 14px; }
.psd .lights > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; } .psd .lights svg { margin-top: 2px; color: var(--x-muted); }
.psd .lights .m { color: var(--x-muted); }
/* Kennzahlen */
.psd .stblk { border-top: 1px solid var(--x-line); }
/* Kennzahlen als Aussagen (Entwurf 07.11.2026): zwei Karten „Diese Maschine hier“ und „Der Typ hier“ mit Einordnung */
.psd .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.psd .facts > .fact:only-child { grid-column: 1 / -1; }
.psd .fact { background: var(--x-soft); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.psd .fact .fh { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--x-muted); }
.psd .ftag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--x-faint); color: var(--x-muted); white-space: nowrap; }
.psd .fact.hi .ftag { box-shadow: none; background: oklch(var(--t-l) var(--t-c) 45); color: oklch(var(--i-l) var(--i-c) 45); }
.psd .fbig { font-size: 19px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.psd .fsub { font-size: 13px; color: var(--x-muted); }
.psd .fsub:empty { display: none; }
/* Zeitleiste der Besuche: jeder Besuch ein Punkt, dieser Flug grün am rechten Ende */
.psd .ftl { position: relative; height: 22px; margin: 8px 6px 0; }
.psd .ftl::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--x-line); border-radius: 1px; }
.psd .ftl i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--x-muted); }
.psd .ftl i.now { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: oklch(var(--line-l) var(--line-c) 155); box-shadow: 0 0 0 3px var(--x-soft); }
.psd .fbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; align-items: end; height: 30px; margin-top: 8px; }
.psd .fbars i { display: block; background: var(--x-faint); border-radius: 2px 2px 0 0; }
.psd .fbars i:last-child { background: oklch(var(--line-l) var(--line-c) 155); }
.psd .fax { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--x-muted); margin-top: 2px; }
/* Häufigkeit des Typs am Platz: vier Stufen, die zutreffende gefüllt */
.psd .fsc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; height: 8px; margin-top: 10px; }
.psd .fsc i { border-radius: 2px; background: var(--x-line); }
.psd .fsc i.on { background: var(--x-muted); }
.psd .fact.hi .fsc i.on { background: oklch(var(--line-l) var(--line-c) 45); }
.psd .fsl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; font-size: 11px; color: var(--x-faint); }
.psd .fsl span.on { color: var(--x-fg); font-weight: 600; }
/* Fuß */
.psd .df { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--x-line); }
.psd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; font-weight: 600; font-size: 14px; color: var(--x-fg);
  background: var(--x-soft); border: 0; border-radius: 8px; padding: 0 12px; cursor: pointer; white-space: nowrap; min-height: 0; box-shadow: none; }
.psxb.psd .btn.pri { background: var(--x-fg); color: var(--x-card); }
.psd .sub2, .psd .tm .k, .psd .gt > span { font-weight: 400; }
.psd .btn.ghost { background: transparent; color: var(--x-muted); margin-left: auto; }
.psd .btn .sh { display: none; }
.psd .adm { font-size: 12px; color: var(--x-muted); padding: 0 18px 10px; text-align: right; }
@media (max-width: 860px) { .psd .pgrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .psd { border-radius: 16px 16px 0 0; border-bottom: 0; }
  .psd .dh { padding: 10px 12px; gap: 10px; } .psd .sq { width: 32px; height: 32px; } .psd .dh .id b { font-size: 20px; } .psd .dh .l2 { font-size: 13px; }
  .psd .ib { width: 34px; padding: 0; justify-content: center; } .psd .ib span { display: none; } .psd .acts { gap: 4px; }
  .psd .st { font-size: 11px; padding: 2px 6px; }
  .psd .blk { padding: 10px 12px; gap: 8px; } .psd .ap > b { font-size: 22px; } .psd .ap > span { font-size: 13px; }
  .psd .route { grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); gap: 2px 8px; }
  .psd .track:not(.lv) .dur, .psd .track .pl { display: none; } .psd .track.lv .dur { font-size: 11.5px; }
  .psd .times { margin-top: 4px; gap: 1px; } .psd .tm b { font-size: 16px; } .psd .sub2 > span { display: block; } .psd .sub2 > i { display: none; }
  .psd .sechead, .psd .adm, .psd .pgrid .lights, .psd .rwbody .dmap, .psd .rwblk:not(:has(.rwline)) { display: none; } .psd .rwbody { grid-template-columns: 1fr; }
  .psd .acgrid { grid-template-columns: minmax(0, 1fr) 7.2rem; gap: 10px; } .psd .kv { font-size: 13.5px; gap: 2px 10px; }
  .psd .whyt { font-size: 12.5px; line-height: 1.35; }
  .psd .gt { font-size: 12px; gap: 6px; } .psd .gt b { font-size: 14px; } .psd .rwline { font-size: 12.5px; }
  .psd .facts { gap: 6px; } .psd .fact { padding: 8px 9px; gap: 2px; } .psd .fact .fh { font-size: 11.5px; }
  .psd .fact .fh { flex-wrap: wrap; gap: 4px; } .psd .ftl, .psd .fbars, .psd .fax, .psd .fsl { display: none; }
  .psd .fbig { font-size: 14.5px; } .psd .fsub { font-size: 11.5px; line-height: 1.3; } .psd .fsc { margin-top: 6px; height: 6px; }
  .psd .df { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 12px; }
  .psd .df .btn { padding: 0 6px; font-size: 13.5px; gap: 4px; } .psd .df .btn .lg, .psd .df .btn .ext { display: none; } .psd .df .btn .sh { display: inline; }
  .psd .df .btn .live-tag { padding: 0; width: 8px; height: 8px; border-radius: 50%; font-size: 0; } .psd .df .btn .live-tag i { display: none; }
  .psd .df .btn.ghost, .psd .df .mapb { grid-column: 1 / -1; margin: 0; height: 30px; font-size: 13px; }
}

/* ---------- Seite je Airline (airline_x.html, Marco 05.11.2026, Entwurf design/airline/). Baut auf .acpage auf. ---------- */
.alpage .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--x-line); }
.alpage .kpi { padding: 12px 18px; display: grid; gap: 2px; min-width: 0; align-content: start; }
.alpage .kpi + .kpi { border-left: 1px solid var(--x-line); }
.alpage .kpi b { font-size: 22px; font-weight: 600; line-height: 1.2; }
.alpage .kpi > span { font-size: 12.5px; color: var(--x-muted); }
.alpage .kpi .dn { color: oklch(var(--ink-l) 0.14 60); font-weight: 600; } .alpage .kpi .up { color: oklch(var(--ink-l) 0.13 155); font-weight: 600; }
@media (max-width: 860px) { .alpage .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alpage .kpi + .kpi { border-left: 0; }
  .alpage .kpi { border-top: 1px solid var(--x-line); } .alpage .kpi:nth-child(-n+2) { border-top: 0; }
  .alpage .kpi:nth-child(even) { border-left: 1px solid var(--x-line); } .alpage .kpi:last-child { grid-column: 1 / -1; } }
.alpage .tbox { display: inline-block; border: 1px solid var(--x-line); border-radius: 3px; padding: 1px 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.alpage .nx { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--x-line); align-items: baseline; }
.alpage .nx:first-child { border-top: 0; padding-top: 0; }
.alpage .nx .t { font-size: 18px; font-weight: 700; white-space: nowrap; }
.alpage .nx .t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--x-muted); }
.alpage .nx .w { display: grid; gap: 5px; min-width: 0; }
.alpage .nx .l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.alpage .nx .l1 b { font-weight: 700; font-size: 16px; }
.alpage .nx .l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.alpage .nx .l2:empty { display: none; }
.alpage .ut { display: inline-flex; align-items: center; gap: 6px; } .alpage .ut s { color: var(--x-muted); }
.alpage .ut svg { width: 14px; height: 14px; color: var(--x-muted); }
.alpage .lv { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--x-line); }
.alpage .lv:first-child { border-top: 0; padding-top: 0; }
.alpage .lv .r1 { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.alpage .lv .r2 { font-size: 13.5px; color: var(--x-muted); } .alpage .lv .r2 b { color: var(--x-fg); font-weight: 600; }
.alpage .ftab { display: grid; margin: 0 -18px; }
.alpage .ftr { display: grid; grid-template-columns: 4.2rem minmax(0, 1.4fr) 3.6rem 4.6rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 18px; border-top: 1px solid var(--x-line); font-size: 14px; }
.alpage .ftr:nth-child(even) { background: var(--x-zebra); }
.alpage .ftr.h { border-top: 0; font-size: 12.5px; color: var(--x-muted); padding-top: 0; background: transparent; }
.alpage .ftr .n, .alpage .ftr .ag { text-align: right; }
.alpage .ftr .tr { height: 8px; border-radius: 4px; background: var(--x-soft); overflow: hidden; }
.alpage .ftr .tr i { display: block; height: 100%; background: oklch(var(--line-l) var(--line-c) 250); border-radius: 4px; }
@media (max-width: 680px) { .alpage .ftab { margin: 0 -14px; } .alpage .ftr { grid-template-columns: 3.8rem minmax(0, 1fr) 2.6rem 4rem; padding: 8px 14px; } .alpage .ftr .tr { display: none; } }
.alpage .sub2 { display: grid; gap: 8px; border-top: 1px solid var(--x-line); padding-top: 12px; }
.alpage .reglist { display: flex; flex-wrap: wrap; gap: 6px; }
.alpage .regc { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--x-line); border-radius: 4px; padding: 3px 8px; font-size: 13.5px; }
.alpage .regc b { font-weight: 700; } .alpage .regc span { color: var(--x-muted); font-size: 12.5px; }
.alpage .regc.sm { padding: 1px 6px; font-size: 13px; }
.alpage .regc svg { width: 13px; height: 13px; align-self: center; }
.alpage .regc.got { background: oklch(var(--t-l) var(--t-c) 155); border-color: transparent; color: oklch(var(--i-l) var(--i-c) 155); }
.alpage .regc.got span { color: inherit; opacity: .8; }
.alpage .prog { height: 10px; border-radius: 5px; background: var(--x-soft); overflow: hidden; }
.alpage .prog i { display: block; height: 100%; background: oklch(var(--line-l) var(--line-c) 155); }
.alpage .wl { display: grid; margin: 0 -18px; }
.alpage .wlr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 3.6rem; gap: 10px; padding: 9px 18px; border-top: 1px solid var(--x-line); font-size: 14px; align-items: baseline; }
.alpage .wlr:nth-child(even) { background: var(--x-zebra); }
.alpage .wlr.h { border-top: 0; font-size: 12.5px; color: var(--x-muted); padding-top: 0; background: transparent; }
.alpage .wlr .n { text-align: right; } .alpage .wlr small { color: var(--x-muted); font-size: 12.5px; }
@media (max-width: 680px) { .alpage .wl { margin: 0 -14px; } .alpage .wlr { grid-template-columns: minmax(0, 1fr) 3rem; padding: 9px 14px; } .alpage .wlr .reglist { grid-column: 1 / -1; grid-row: 2; } }
.alpage .brow.wide { grid-template-columns: 4.6rem minmax(0, 1fr) 3rem; }
.alpage .opts { display: grid; gap: 8px; }
.alpage .opt { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.alpage .opt input { width: 17px; height: 17px; margin: 0; accent-color: oklch(0.55 0.15 250); }
/* „+N more“ zum Aufklappen (Makro capped in airline_x.html) */
.alpage details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--x-fg); background: var(--x-soft); border-radius: 6px; padding: 5px 10px; }
.alpage details.more > summary::-webkit-details-marker { display: none; }
.alpage details.more > summary:hover { background: var(--x-line); }
.alpage details.more .lless, .alpage details.more[open] .mlabel { display: none; }
.alpage details.more[open] .lless { display: inline; }
.alpage details.more[open] > summary { order: 2; }
.alpage details.more[open] { display: flex; flex-direction: column; }
.alpage details.more[open] > .mbody { order: 1; }
.alpage .ftab details.more > summary { margin: 8px 18px 0; }
.alpage details.more.inl > summary { margin-top: 0; padding: 1px 7px; font-size: 13px; }
.alpage .reglist details.more.inl[open] { flex-basis: 100%; }
.alpage .reglist details.more.inl > .mbody { display: flex; flex-wrap: wrap; gap: 6px; }
.alpage .reglist details.more.inl[open] > summary { margin-top: 6px; align-self: flex-start; }
.alpage .bars details.more > .mbody { display: grid; gap: 7px; }
.alpage .bars details.more[open] > .mbody { margin-bottom: 0; }
/* Zwei durchgehende Spalten (airline_page.COLUMNS); am Handy eine Spalte, Reihenfolge über order */
.psx .alpage .pcols, .psx.alpage .pcols { display: grid; grid-template-columns: var(--cols, 1fr); }
.psx.alpage .pcol { display: flex; flex-direction: column; min-width: 0; }
.psx.alpage .pcol + .pcol { border-left: 1px solid var(--x-line); }
.psx.alpage .pcol > .box { border-left: 0 !important; grid-column: auto !important; }
.psx.alpage .pcol > .box + .box { border-top: 1px solid var(--x-line); }
@media (max-width: 760px) {
  .psx.alpage .pcols { display: flex; flex-direction: column; }
  .psx.alpage .pcol { display: contents; }
  .psx.alpage .pcol > .box { border-top: 1px solid var(--x-line); }
  .psx.alpage .pcol > .box[style*="order: 1"] { border-top: 0; }
}
/* Lange Kopfangaben umbrechen statt abschneiden (Flughafenliste bei Next) */
.psx.alpage .sechead { flex-wrap: wrap; }
.psx.alpage .sechead .aside { white-space: normal; text-align: right; }
@media (max-width: 680px) { .psx.alpage .sechead .aside { margin-left: 38px; text-align: left; flex-basis: 100%; } .psx.alpage .wlr.h { display: none; } }

/* Liste lädt neu (app.js: htmx-Anfrage für #results/#page, Knopf „Now“, Marco 07.11.2026): Zeilen pulsieren dezent,
   damit die Seite sofort reagiert statt still zu warten. Ohne Verlauf; bei reduzierter Bewegung nur abgeblendet. */
#results.ps-loading :is([data-row], .ps-day, .day-divider) { animation: ps-load 1.1s ease-in-out infinite; }
#results.ps-loading { cursor: progress; }
@keyframes ps-load { 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { #results.ps-loading :is([data-row], .ps-day, .day-divider) { animation: none; opacity: .55; } }