/* ==========================================================================
   meteo365 v4 — FlugWetter (Airport) — Detail + Index
   Theme-aware über v4-Tokens. Flugkategorie-Farben lokal (Aviation-Standard).
   ========================================================================== */

:root {
  /* Flugkategorien in ZWEI Saetzen (User 2026-07-19):
     Kartenpunkte/Legende tragen keinen Text -> volles Neon.
     Beschriftete Pillen tragen WEISSE Schrift -> dunklere Flaeche noetig. */
  /* SIGNALFARBE (neon) — Kartenpunkte, Legende, Akzente. Kein Text darauf. */
  --fc-vfr:  #00ff88;
  --fc-mvfr: #57a5ff;   /* echtes Blau statt Cyan: das Cyan lag nur 10° vom Seitenblau entfernt */
  --fc-ifr:  #ff2d95;
  --fc-lifr: #c04dff;
  /* PILLEN-FLAECHE — dunkler, weil dort WEISSE Schrift steht (User 2026-07-19).
     Gemessen: Weiss auf dem Neon-Gruen waere 1,34:1 und unlesbar; diese Toene
     liegen bei 4,5-4,7:1. IFR/LIFR aendern sich kaum, VFR/MVFR muessen tiefer. */
  --fc-vfr-bg:  #008547;
  --fc-mvfr-bg: #1a6cff;
  --fc-ifr-bg:  #e60072;
  --fc-lifr-bg: #b124ff;
  --fc-unknown: #9fb4c4;
  /* Lagune-Glas (wie forecast.php). AUF :root/html (nicht body!), damit --ap-card-bg
     es auflösen kann. :root = Light-Default, html[data-theme="dark"] = Blue unten. */
  --fc-glass:   rgba(255,255,255,.72);
  --fc-glass-2: rgba(255,255,255,.58);
  --ap-card-bg: var(--fc-glass-2);   /* Panele = Lagune-Glas (wie forecast.php) */
  --ap-card-line: var(--line);
}
html[data-theme="dark"] { --fc-glass: rgba(255,255,255,.07); --fc-glass-2: rgba(255,255,255,.05); }

.ap-shell { padding: 18px 0 56px; }
.ap-shell .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }

.ap-back {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--font-sans);
  color: var(--muted); text-decoration: none;
  margin-bottom: 14px;
}
.ap-back:hover { color: var(--text); }

.ap-note {
  padding: 22px; border: 1px solid var(--ap-card-line); border-radius: var(--radius);
  background: var(--ap-card-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--muted); font: 500 14px/1.5 var(--font-sans);
}
.ap-note--warn { color: var(--fc-ifr); border-color: color-mix(in srgb, var(--fc-ifr) 40%, var(--line)); }

/* ---------- Kopfblock ---------- */
.ap-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
  padding: 18px 2px; margin-bottom: 16px;
}
.ap-head-name { font: 700 clamp(20px, 3.4vw, 30px)/1.15 var(--font-display); color: var(--text); margin: 0 0 6px; }
.ap-head-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 13px/1.4 var(--font-sans); color: var(--muted); }
.ap-head-sub .ap-code { font-family: var(--font-mono); font-weight: 700; color: var(--text); letter-spacing: .04em; }
.ap-head-sub .ap-iata { font-family: var(--font-mono); }
.ap-clock { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ---------- Grid der Karten ---------- */
/* minmax(0,…) statt reiner fr: fr-Tracks haben min-width:auto und koennen nicht
   unter die Inhalts-Mindestbreite schrumpfen — auf schmalen Schirmen schob eine
   Karte (z. B. lange Ortsnamen bei LEMD) so die ganze Seite waagerecht auf.
   min-width:0 auf den Grid-Kindern ist das Sicherheitsnetz gegen dasselbe eine
   Ebene tiefer (die Karten). */
.ap-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.ap-grid > * { min-width: 0; }
@media (max-width: 820px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } .ap-head { grid-template-columns: 1fr; }}

.ap-card {
  border: 1px solid var(--ap-card-line); border-radius: var(--radius);
  background: var(--ap-card-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px; margin-bottom: 16px;
}
.ap-card-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 14px;
}
.ap-card-title .ap-age { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- Cockpit-Panel (METAR) ----------
   Instrumentenbrett als OPTIK, nicht als Nachbau: die Werte bleiben Zahlen und
   damit exakt ablesbar, bekommen aber die Fassung der Windrose (derselbe
   Lagune-Verlauf, derselbe helle Bezel). Bewusst in BEIDEN Themes dunkel — das
   Panel ist ein eigenes Objekt auf der Seite, so wie die Karte auch.
   Einziges echtes Rundinstrument ist der Hoehenmesser: bei QNH sagt die
   Nadelstellung „Hoch- oder Tiefdruck" schneller als die Zahl. */
.ap-cockpit {
  --ap-ink:    #eaf7fc;   /* 9.9:1 auf der Panel-Fassung */
  --ap-ink-mut: rgba(168,228,247,.72);
  --ap-bezel:  #6ba9c4;
  background: linear-gradient(160deg, #14708f 0%, #0e6288 58%, #0a415d 100%);
  border: 1px solid var(--ap-bezel); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
  padding: 16px 18px; margin-bottom: 16px;
  /* Flex-Spalte ist Pflicht, nicht Kosmetik: .radar-scope hebt seine Inhalte nur
     per z-index ueber den Scope-Hintergrund, und z-index greift bei normalen
     Block-Kindern nicht — der Radar wuerde sonst UEBER den Werten liegen. */
  display: flex; flex-direction: column; align-items: stretch;
}
.ap-cockpit .ap-card-title { color: var(--ap-ink-mut); }
.ap-cockpit .ap-card-title .ap-age { color: var(--ap-ink-mut); }

/* Kopfzeile: Temperatur als Haupt-Ablesung, Taupunkt daneben */
.ap-cockpit .ap-obs-top { align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ap-cockpit .ap-obs-temp { color: var(--ap-ink); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.ap-cockpit .ap-obs-dp { color: var(--ap-ink-mut); }

/* Instrumenten-Gehaeuse: eingelassenes Glas in heller Fassung */
/* auto-FILL, nicht auto-fit: bei voller Panelbreite bleiben die wenigen Kacheln
   schmal, statt sich auf je ~600px zu strecken. */
.ap-inst-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 10px; margin-top: 14px;
}
.ap-inst {
  background: linear-gradient(180deg, rgba(4,28,42,.72), rgba(4,28,42,.42));
  border: 1px solid rgba(168,228,247,.34); border-radius: 10px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ap-inst-k {
  font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ap-ink-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Merker fuer erklaerungsbeduerftige Werte (Titel liegt am Gehaeuse) */
.ap-inst[title] { cursor: help; }
.ap-inst-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px;
  border: 1px solid rgba(168,228,247,.5); border-radius: 50%;
  font-style: normal; font-size: 8px; line-height: 1; color: var(--ap-ink-mut);
}
.ap-inst-v {
  font: 600 17px/1.15 var(--font-mono); color: var(--ap-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ap-inst-v small { font-size: 11px; font-weight: 500; color: var(--ap-ink-mut); margin-left: 3px; }

/* ---------- Leitinstrument: grosse Windrose mit Bahnlage ----------
   Links die Rose, rechts Temperatur + die uebrigen Zifferblaetter. */
.ap-cockpit-body {
  display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 32px; align-items: start; margin-top: 14px;
}
.ap-cockpit-right { min-width: 0; }
.ap-wind-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wr { width: 100%; max-width: 360px; height: auto; display: block; }
@media (max-width: 900px) { .ap-cockpit-body { grid-template-columns: 1fr; }}

/* HUD statt Zifferblatt: keine gefuellte Fassung, nur Linien und Marken —
   dadurch scheint der Radar-Scope des Panels durch die Rose hindurch. */
.wr-corner  { fill: none; stroke: var(--brand-cyan); stroke-width: 2; opacity: .75; }
.wr-reticle { stroke: var(--brand-cyan); stroke-width: 2.5; opacity: .9; }
.wr-ring-o  { fill: rgba(4,26,38,.34); stroke: rgba(104,194,227,.5); stroke-width: 1.2; }
.wr-ring-i  { fill: none; stroke: rgba(104,194,227,.2); stroke-width: 1; stroke-dasharray: 3 6; }
/* Teilung: fein alle 2 Grad, kraeftiger alle 10, lang alle 30 */
.wr-tick    { stroke: rgba(168,228,247,.3);  stroke-width: .9; }
.wr-tick-m  { stroke: rgba(168,228,247,.62); stroke-width: 1.2; }
.wr-tick-M  { stroke: var(--brand-cyan);     stroke-width: 1.8; }
.wr-num     { fill: rgba(168,228,247,.8); font: 600 11px var(--font-mono); letter-spacing: -.02em; }
.wr-card    { fill: var(--brand-cyan); font: 700 20px var(--font-mono); letter-spacing: .08em; }

/* Bahn als Drahtgitter, nicht als Flaeche */
.wr-rwy-bed { fill: rgba(9,44,62,.88); stroke: var(--brand-cyan); stroke-width: 2; }
.wr-rwy-cl  { stroke: rgba(168,228,247,.6); stroke-width: 1.4; stroke-dasharray: 6 8; }
.wr-rwy-thr { stroke: var(--brand-cyan); stroke-width: 3; }
.wr-rwy-id-bg { fill: rgba(6,32,46,.92); stroke: rgba(104,194,227,.5); stroke-width: 1; }
.wr-rwy-id  { fill: #eaf7fc; font: 700 17px var(--font-mono); letter-spacing: .06em; }
.wr-rwy-dir { fill: rgba(104,194,227,.85); }

/* Windvektor: einziger warmer Ton im HUD, damit er sofort auffaellt */
.wr-arr-shaft { stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.wr-arr-head  { fill: var(--accent); filter: drop-shadow(0 0 7px rgba(244,169,50,.6)); }
.wr-arr-dot   { fill: none; stroke: var(--accent); stroke-width: 2.5; }

/* Kurszahl als HUD-Datenblock ueber der Rose, in eckigen Klammern wie im
   Head-up-Display. Frueher sass sie mittig auf der Bahn und hat sie zerteilt. */
.ap-wind-hdg {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 18px; margin-bottom: 2px;
  background: rgba(3,18,28,.55); border-block: 1px solid rgba(104,194,227,.45);
}
.ap-wind-hdg::before, .ap-wind-hdg::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 9px;
  border: 1px solid var(--brand-cyan);
}
.ap-wind-hdg::before { left: -1px; border-right: 0; }
.ap-wind-hdg::after  { right: -1px; border-left: 0; }
.ap-wind-hdg-v {
  font: 700 34px/1 var(--font-mono); color: #eaf7fc; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; text-shadow: 0 0 14px rgba(104,194,227,.45);
}
.ap-wind-hdg-u {
  font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .16em;
  color: rgba(168,228,247,.8);
}
.ap-wind-hdg-c { font: 700 16px/1.6 var(--font-mono); color: #eaf7fc; }

.ap-wind-read { text-align: center; }
.ap-wind-spd  { display: block; font: 700 21px/1.2 var(--font-mono); color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.ap-wind-spd b { color: var(--accent); }
.ap-wind-from { display: block; margin-top: 4px; font: 600 13px/1.35 var(--font-sans); color: var(--ap-ink-mut); }

/* Bahnauswahl: pro BAHN ein Rahmen mit den beiden Betriebsrichtungen darin.
   Ohne die Klammer las sich „13 31 12 30" wie vier Bahnen statt zwei. */
.ap-rwy-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ap-rwy-grp {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid rgba(168,228,247,.4); border-radius: calc(var(--radius-pill) + 3px);
  background: rgba(4,28,42,.42);
}
.ap-rwy-pill {
  min-width: 42px; padding: 6px 10px; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  color: var(--ap-ink-mut); font: 700 12px/1 var(--font-mono); letter-spacing: .04em;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ap-rwy-pill:hover { background: rgba(104,194,227,.16); color: var(--ap-ink); }
.ap-rwy-pill.is-on {
  color: #04202e;
  background: var(--brand-cyan);   /* dunkle Schrift: 8.9:1, hell waere 1.9:1 */
}
.ap-rwy-pill:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }

/* Decoder-Verweis: bewusst leise, unten rechts unter den Instrumenten */
.ap-decode-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.ap-decode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(168,228,247,.26); background: rgba(4,28,42,.45);
  color: var(--ap-ink-mut); text-decoration: none;
  font: 600 11.5px/1 var(--font-sans);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.ap-decode-pill:hover { border-color: var(--brand-cyan); color: var(--ap-ink); }

/* Gegen-/Seitenwind auf die gewaehlte Bahn gerechnet */
/* minmax(0,1fr) statt 1fr: Grid-Spalten haben sonst min-width:auto und koennen
   nicht unter ihre Inhaltsbreite schrumpfen — lange Labels wie „RÜCKENWIND"
   schoben das Raster ueber den Rand hinaus. */
.ap-wind-comp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ap-wc {
  background: rgba(4,28,42,.66); border: 1px solid rgba(168,228,247,.28);
  border-radius: 8px; padding: 7px 9px; text-align: center;
}
.ap-wc-k { display: block; font: 700 9.5px/1 var(--font-mono); text-transform: uppercase;
           letter-spacing: .1em; color: var(--ap-ink-mut); margin-bottom: 4px; }
.ap-wc-v { display: block; font: 700 15px/1.2 var(--font-mono); color: var(--ap-ink);
           font-variant-numeric: tabular-nums; }
.ap-wc-v i { display: block; font: 500 10px/1 var(--font-sans); font-style: normal;
             color: var(--ap-ink-mut); margin-top: 3px; }
/* Rueckenwind ist operativ heikel -> abgesetzt */
.ap-wc.is-warn { border-color: color-mix(in srgb, var(--fc-ifr) 55%, transparent); }
.ap-wc.is-warn .ap-wc-v { color: var(--fc-ifr); }

/* ---------- Rechte Spalte: Thermometer + zwei Runde + Sichtband ----------
   Drei Formen statt fuenf gleicher Kreise. Jede Form passt zu ihrem Inhalt:
   Temperatur ist eine Saeule, QNH und Feuchte sind Zeigerwerte, die Sicht ist
   eine Einordnung in Klassen. */
.ap-instpanel {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 16px 20px; align-items: start; margin-top: 4px;
}
/* Das Thermometer ist die hoechste Anzeige. Stuende es nur in Zeile 1, waere
   diese Zeile so hoch wie das Thermometer und die Sicht rutschte weit unter die
   Zifferblaetter. Ueber beide Zeilen gespannt bestimmt es die Spaltenhoehe,
   und die Sicht sitzt direkt unter dem Druck. */
.ap-instpanel .ap-thermo { grid-row: 1 / span 2; }
.ap-instpanel .ap-dials { margin: 0; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
/* Sicht gehoert unter Druck und Luftfeuchte in DIESELBE Spalte, nicht ueber die
   volle Breite: sie ist ein Messwert wie die beiden, das Thermometer daneben
   bleibt eine eigene Saeule. */
.ap-instpanel .ap-vis { grid-column: 2; }

/* Thermometer */
.ap-thermo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tm { width: 168px; height: auto; display: block; }
.tm-tube { fill: rgba(4,26,38,.55); stroke: rgba(104,194,227,.45); stroke-width: 1.4; }
.tm-fill { fill: rgba(104,194,227,.26); }
.tm-tick   { stroke: rgba(168,228,247,.35); stroke-width: 1; }
.tm-tick-M { stroke: rgba(168,228,247,.8); stroke-width: 1.5; }
.tm-num    { fill: rgba(168,228,247,.75); font: 600 9.5px var(--font-mono); }
.tm-brace  { fill: none; stroke: rgba(127,212,176,.75); stroke-width: 1.4; }
.tm-mk     { stroke-width: 2.2; }
.tm-mk-v   { font: 700 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.tm-mk-k   { font: 600 8.5px var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
             fill: var(--ap-ink-mut); }
.tm-mk-lead { stroke-width: 1; }
.tm-air .tm-mk, .tm-air .tm-mk-tip, .tm-air .tm-mk-lead { stroke: #eaf7fc; fill: #eaf7fc; }
.tm-air .tm-mk-v { fill: #eaf7fc; }
.tm-dew .tm-mk, .tm-dew .tm-mk-tip, .tm-dew .tm-mk-lead { stroke: #7fd4b0; fill: #7fd4b0; }
.tm-dew .tm-mk-v { fill: #7fd4b0; }
.ap-thermo-sp {
  display: inline-flex; align-items: center; gap: 5px; cursor: help;
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid rgba(127,212,176,.4); background: rgba(4,28,42,.5);
  font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ap-ink-mut);
}
.ap-thermo-sp b { color: #7fd4b0; font-size: 12.5px; letter-spacing: 0; }

/* Sicht als HUD-Band mit gleich breiten Klassenfeldern */
.ap-vis {
  border: 1px solid rgba(168,228,247,.28); border-radius: 10px;
  background: rgba(4,28,42,.55); padding: 10px 12px 14px;
}
.ap-vis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ap-vis-k { font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ap-ink-mut); }
.ap-vis-v { font: 700 17px/1 var(--font-mono); color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.ap-vis-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ap-vis-seg {
  padding: 5px 0; text-align: center; border-radius: 4px;
  font: 700 9.5px/1 var(--font-mono); letter-spacing: .06em;
  background: rgba(168,228,247,.09); color: rgba(168,228,247,.55);
}
.ap-vis-seg[data-cat="LIFR"].is-on { background: var(--fc-lifr-bg); color: #fff; }
.ap-vis-seg[data-cat="IFR"].is-on  { background: var(--fc-ifr-bg);  color: #fff; }
.ap-vis-seg[data-cat="MVFR"].is-on { background: var(--fc-mvfr-bg); color: #fff; }
.ap-vis-seg[data-cat="VFR"].is-on  { background: var(--fc-vfr-bg);  color: #fff; }
/* Marke: sitzt UNTER dem Band, damit sie die Beschriftung nicht verdeckt */
.ap-vis-mark {
  position: absolute; bottom: -9px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 6px solid #eaf7fc;
}

/* Instrumentenreihe („Six-Pack"): Wind, Hoehenmesser, Thermometer, Sicht */
.ap-dials {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: 16px 14px; margin: 16px 0 4px; justify-items: center;
}
.ap-dial { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; max-width: 190px; }
.ap-alt { width: 100%; max-width: 168px; height: auto; display: block; }
.ap-alt .alt-face   { fill: url(#apAltFace); }
.ap-alt .alt-bezel  { fill: none; stroke: rgba(168,228,247,.55); stroke-width: 2; }
.ap-alt .alt-tick   { stroke: rgba(234,247,252,.55); stroke-width: 1.2; }
.ap-alt .alt-tick-M { stroke: rgba(234,247,252,.9); stroke-width: 2; }
.ap-alt .alt-num    { fill: rgba(234,247,252,.8); font: 700 8.5px var(--font-mono); }
.ap-alt .alt-std    { stroke: var(--accent); stroke-width: 2.4; }
.ap-alt .alt-needle { fill: #eaf7fc; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.ap-alt .alt-hub    { fill: var(--ap-bezel); stroke: #eaf7fc; stroke-width: 1.2; }
.ap-alt-read, .ap-dial-read {
  font: 700 14px/1.25 var(--font-mono); color: var(--ap-ink); text-align: center;
  font-variant-numeric: tabular-nums;
}
.ap-alt-read small, .ap-dial-read small {
  display: block; font: 600 10px/1 var(--font-mono); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ap-ink-mut); margin-top: 3px;
}
/* Boeenwert in der Ablesung */
.ap-dial-read b { color: var(--accent); font-weight: 700; }

/* Zweite Nadel (Taupunkt) + Farbzonen + Boeen-Marke */
.ap-alt .alt-needle-2 { fill: #7fd4b0; opacity: .95; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ap-alt .alt-zone { fill: none; stroke-width: 4; stroke-linecap: butt; opacity: .85; }

/* Kompass im Panel: Gradskala aussen. Weiss, nur die vier Hauptrichtungen
   in Tuerkis — der einzige Farbakzent auf dem Blatt. */
.ap-cockpit .ap-compass .cmp-ring { stroke: rgba(168,228,247,.45); }
.ap-cockpit .ap-compass .cmp-hub  { fill: #eaf7fc; }
.ap-cockpit .ap-compass-read { color: var(--ap-ink); }
.ap-cockpit .ap-compass-read small { color: var(--ap-ink-mut); }

/* Wetter-Gruppe + Wolken im Panel */
.ap-cockpit .ap-wx { background: rgba(4,28,42,.6); border-color: rgba(168,228,247,.34); color: var(--ap-ink); }
.ap-cockpit .ap-clouds { color: var(--ap-ink); }
/* Wolkenbadges im Panel: NEUTRAL. Vorher erbten sie das Alarm-Magenta
   (--accent-alt) — ausgerechnet ein „FEW", die harmloseste Wolkenmeldung
   ueberhaupt, leuchtete damit wie eine Warnung. Nur BKN/OVC, die eine
   Wolkendecke bilden, werden leicht hervorgehoben. */
.ap-cockpit .ap-clouds .ap-cl-cover {
  background: rgba(4,28,42,.6); border-color: rgba(168,228,247,.32);
  color: var(--ap-ink-mut);
}
.ap-cockpit .ap-clouds li { border-top-color: rgba(168,228,247,.16); }
.ap-cockpit .ap-clouds .ap-cl-cover[data-sig="1"] {
  color: var(--ap-ink); border-color: var(--brand-cyan);
}
.ap-cockpit .ap-cl-base { color: var(--ap-ink-mut); }

/* Rohcode als Papierstreifen im Panel */
.ap-cockpit .ap-metar-raw {
  margin-bottom: 14px; font-size: 11.5px;
  background: rgba(4,28,42,.66); border: 1px solid rgba(168,228,247,.3);
  color: var(--ap-ink);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.ap-cockpit .ap-metar-decode { color: #a8e4f7; }

@media (max-width: 560px) {
  .ap-inst-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 8px; }
  .ap-inst-v { font-size: 15px; }}

/* ---------- TAF-Timeline ---------- */
.ap-taf-stale {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  font: 500 12px/1.4 var(--font-sans); color: var(--text);
}
.ap-taf-raw {
  font: 500 12px/1.6 var(--font-mono); color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
/* ---------- TAF-Zeitachse ----------
   Perioden als Karten an einer durchgehenden Schiene. Die linke Kante traegt
   die Flugkategorie-Farbe, der Typ-Chip die Art der Aenderung. */
.ap-taf-timeline { margin: 4px 0 14px; }
.ap-taf-card {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  position: relative;
}
/* Schiene: durchgehende Linie, Punkt je Periode */
.ap-taf-rail { position: relative; display: flex; justify-content: center; }
.ap-taf-rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--fc, var(--line)) 45%, transparent);
}
.ap-taf-card:first-child .ap-taf-rail::before { top: 14px; }
.ap-taf-card:last-child  .ap-taf-rail::before { bottom: calc(100% - 14px); }
.ap-taf-dot {
  position: relative; margin-top: 10px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--fc, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, var(--line)) 22%, transparent);
}
/* Kategorie-Farbe pro Karte in --fc heben, damit Schiene, Punkt und Kante sie teilen */
.ap-taf-card[data-cat="VFR"]  { --fc: var(--fc-vfr); }
.ap-taf-card[data-cat="MVFR"] { --fc: var(--fc-mvfr); }
.ap-taf-card[data-cat="IFR"]  { --fc: var(--fc-ifr); }
.ap-taf-card[data-cat="LIFR"] { --fc: var(--fc-lifr); }

.ap-taf-main {
  margin-bottom: 10px; padding: 11px 14px;
  border: 1px solid var(--ap-card-line); border-left: 3px solid var(--fc, var(--line));
  border-radius: var(--radius-sm); background: var(--ap-card-bg);
}
.ap-taf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ap-taf-chip {
  font: 800 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; color: #04202e; background: var(--brand-cyan);
}
/* Typen farblich unterscheiden: Grundlage neutral, PROB/TEMPO als Warnung */
.ap-taf-chip.is-base { background: rgba(104,194,227,.2); color: var(--text); }
.ap-taf-chip[data-typ="BECMG"] { background: var(--brand-cyan); }
.ap-taf-chip[data-typ="TEMPO"], .ap-taf-chip[data-typ="INTER"] { background: var(--accent); color: #2a1800; }
.ap-taf-chip[data-typ="PROB"]  { background: var(--fc-lifr); color: #fff; }
.ap-taf-time {
  font: 700 13px/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums;
}
.ap-taf-time i { color: var(--muted); font-style: normal; }
.ap-taf-cat {
  margin-left: auto; font: 800 10px/1 var(--font-mono); letter-spacing: .06em;
  padding: 4px 8px; border-radius: 4px; color: #fff; background: var(--fc, var(--muted));
}
.ap-taf-card[data-cat="VFR"]  .ap-taf-cat { background: var(--fc-vfr-bg); }
.ap-taf-card[data-cat="MVFR"] .ap-taf-cat { background: var(--fc-mvfr-bg); }
.ap-taf-card[data-cat="IFR"]  .ap-taf-cat { background: var(--fc-ifr-bg); }
.ap-taf-card[data-cat="LIFR"] .ap-taf-cat { background: var(--fc-lifr-bg); }

.ap-taf-cond { display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font: 600 14px/1.2 var(--font-sans); color: var(--text); }
.ap-taf-ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.ap-taf-card[data-cat="VFR"] .ap-taf-ico { color: var(--fc-vfr); }

.ap-taf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 6px 16px; }
.ap-taf-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-taf-mk { font: 700 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ap-taf-mv { font: 600 13px/1.3 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ap-taf-mv b { color: var(--accent); font-weight: 700; }
.ap-taf-clear { color: var(--muted); font-family: var(--font-sans); font-weight: 500; }
.ap-taf-arr { width: 15px; height: 15px; color: var(--accent); flex: none; }

.ap-taf-raw {
  font: 500 12px/1.6 var(--font-mono); color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* Im Dashboard (dunkles Panel) erben die Karten die HUD-Toene */
.ap-dash .ap-taf-main { background: rgba(4,28,42,.5); border-color: rgba(168,228,247,.22); }
.ap-dash .ap-taf-time, .ap-dash .ap-taf-cond, .ap-dash .ap-taf-mv { color: #eaf7fc; }

/* ---------- Nachbarflughäfen ----------
   Jeder Eintrag mit Kompasspfeil (zeigt in die echte Peilung) + Entfernung
   und Richtungskuerzel, rechts der ICAO-Code als Chip. */
.ap-nearby { list-style: none; margin: 0; padding: 0; }
.ap-nearby li { border-top: 1px solid var(--line); }
.ap-nearby li:first-child { border-top: 0; }
.ap-nearby a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; text-decoration: none; color: var(--text); }
.ap-nearby .ap-nb-dir {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 28%, transparent);
  color: var(--brand-cyan);
}
.ap-nearby .ap-nb-dir svg { width: 15px; height: 15px; transform-origin: 50% 50%; }
.ap-nearby .ap-nb-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ap-nearby .ap-nb-name b { font: 600 14px/1.25 var(--font-sans); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-nearby a:hover .ap-nb-name b { color: var(--accent); }
.ap-nearby .ap-nb-sub { font: 500 11px/1 var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.ap-nearby .ap-nb-code {
  flex: none; font: 700 12px/1 var(--font-mono); color: var(--text);
  padding: 5px 9px; border-radius: 7px; letter-spacing: .04em;
  background: color-mix(in srgb, var(--brand-cyan) 9%, transparent);
  border: 1px solid var(--ap-card-line);
}

/* ---------- Referenz / Legenden ---------- */
/* Referenz jetzt VOLLE Breite (ausserhalb des Zweispalters) */
.ap-ref { margin-top: 0; }
.ap-ref-intro { font: 500 13.5px/1.7 var(--font-sans); color: var(--muted); margin: 0 0 20px; max-width: 90ch; }
.ap-ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 30px; align-items: start; }
/* Linke Spalte: Flugregeln + Bedeckungsgrad gestapelt */
.ap-ref-stack { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 900px) { .ap-ref-grid { grid-template-columns: 1fr; gap: 22px; }}
.ap-ref-h { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ap-ref-note { font: 500 12px/1.5 var(--font-sans); color: var(--muted); margin: 0 0 12px; }

/* Bedeckungsgrad */
.ap-cc { display: flex; flex-direction: column; }
.ap-cc-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.ap-cc-row:first-child { border-top: 0; }
.ap-cc-code { font: 700 12px/1 var(--font-mono); text-align: center; padding: 5px 4px; border-radius: 6px;
  background: color-mix(in srgb, var(--brand-cyan) 12%, transparent); color: var(--text); letter-spacing: .04em; }
.ap-cc-name { font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.ap-cc-okta { font: 600 12px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.ap-cc-cavok { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--fc-vfr) 35%, var(--line));
  background: color-mix(in srgb, var(--fc-vfr) 7%, transparent); }
.ap-cc-cavok-badge { flex: none; background: var(--fc-vfr-bg); color: #fff; }
.ap-cc-cavok p { margin: 0; font: 500 12px/1.5 var(--font-sans); color: var(--text); }

/* Windrichtungen: Rose + Tabelle */
.ap-wd-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.rr { width: 280px; height: 280px; flex: none; }
.rr-face { fill: color-mix(in srgb, var(--brand-cyan) 5%, transparent); stroke: var(--line); stroke-width: 1; }
.rr-ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.rr-spoke { stroke: color-mix(in srgb, var(--brand-cyan) 22%, transparent); stroke-width: 1; }
.rr-tick { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.rr-tick-m { stroke: var(--text); stroke-width: 1.2; opacity: .7; }
.rr-tick-c { stroke: var(--brand-cyan); stroke-width: 2; }
.rr-num { fill: var(--muted); font: 600 9px var(--font-mono); }
.rr-card { fill: var(--brand-cyan); font: 700 13px var(--font-mono); }
.rr-hub { fill: var(--brand-cyan); }
/* Ohne Scroll: alle 16 Richtungen sichtbar (genug Platz neben der grossen Rose) */
.ap-wd-scroll { flex: 1 1 240px; min-width: 240px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ap-wd-table { border-collapse: collapse; width: 100%; font: 500 12px/1.3 var(--font-sans); }
.ap-wd-table thead th { position: sticky; top: 0; background: var(--ap-card-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 1; }
.ap-wd-table tr.is-main td { background: color-mix(in srgb, var(--brand-cyan) 7%, transparent); }
.ap-wd-table tr.is-main td b { font-weight: 700; }
.ap-wd-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ap-wd-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.ap-wd-table td b { font-family: var(--font-mono); color: var(--brand-cyan); margin-right: 4px; }
.ap-wd-deg, .ap-wd-range { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-wd-range { color: var(--muted); }
/* Flugregeln als farbcodierte Zeilen — Kategoriefarbe an der linken Kante */
.ap-rules { display: flex; flex-direction: column; gap: 8px; }
.ap-rule {
  display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--ap-card-line); border-left: 3px solid var(--fc, var(--line));
  background: color-mix(in srgb, var(--fc, transparent) 5%, transparent);
}
.ap-rule[data-cat="VFR"]  { --fc: var(--fc-vfr); }
.ap-rule[data-cat="MVFR"] { --fc: var(--fc-mvfr); }
.ap-rule[data-cat="IFR"]  { --fc: var(--fc-ifr); }
.ap-rule[data-cat="LIFR"] { --fc: var(--fc-lifr); }
.ap-rule-badge {
  min-width: 48px; text-align: center; padding: 5px 8px; border-radius: 6px;
  color: #fff; text-shadow: 0 1px 2px rgba(2,12,20,.5); font: 700 11px var(--font-mono); letter-spacing: .04em;
}
.ap-rule-badge[data-cat="VFR"]  { background: var(--fc-vfr-bg); }
.ap-rule-badge[data-cat="MVFR"] { background: var(--fc-mvfr-bg); }
.ap-rule-badge[data-cat="IFR"]  { background: var(--fc-ifr-bg); }
.ap-rule-badge[data-cat="LIFR"] { background: var(--fc-lifr-bg); }
.ap-rule-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font: 600 12.5px/1.3 var(--font-sans); color: var(--text); }
.ap-rule-cell b { font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ap-ref-guide {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 40%, var(--line));
  background: color-mix(in srgb, var(--brand-cyan) 8%, transparent);
  color: var(--text); text-decoration: none; font: 600 12.5px/1 var(--font-sans);
}
.ap-ref-guide:hover { border-color: var(--brand-cyan); }
.ap-hero .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }

.ap-search { display: flex; gap: 8px; max-width: 460px; }
.ap-search input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--menu-input-border); background: var(--menu-input-bg); color: var(--text);
  font: 600 15px/1 var(--font-mono); letter-spacing: .04em;
}
.ap-search input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 500; color: var(--muted); }
.ap-search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.ap-search button {
  padding: 12px 20px; border-radius: var(--radius); border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 14px/1 var(--font-sans);
}
.ap-search button:hover { background: var(--accent-hover); }
.ap-search-err { color: var(--fc-ifr); font: 500 12px/1.4 var(--font-sans); margin-top: 8px; min-height: 16px; }

.ap-sec { padding: 26px 0; }
.ap-sec .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.ap-sec h2 { font: 700 15px/1.2 var(--font-sans); color: var(--text); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }

.ap-majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.ap-major {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ap-card-bg); text-decoration: none; color: var(--text);
}
.ap-major:hover { border-color: var(--accent); }
.ap-major b { font: 600 13px/1.2 var(--font-sans); }
.ap-major span { font: 700 12px/1 var(--font-mono); color: var(--muted); }

.ap-sigmet-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ap-card-bg); padding: 16px 18px; }
.ap-sigmet-count { font: 700 15px/1.2 var(--font-sans); color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ap-sigmet-count .ap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fc-ifr); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-ifr) 22%, transparent); }
/* Filter nach Gefahrenart — nur Arten, die gerade vorkommen (mit Anzahl). */
.ap-sig-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ap-sig-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 700 11px/1 var(--font-sans); letter-spacing: .03em;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.ap-sig-chip:hover { color: var(--text); border-color: var(--accent); }
.ap-sig-chip.is-active { background: var(--fc-glass); color: var(--text); border-color: var(--accent); }
.ap-sig-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ap-sig-n { font: 600 10px/1 var(--font-mono); opacity: .75; }

.ap-sigmet-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ap-sigmet-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--font-sans); }
.ap-sigmet-list li:first-child { border-top: 0; }
.ap-sig-haz { flex: none; min-width: 54px; text-align: center; padding: 3px 6px; border-radius: 999px; color: #fff; font: 700 10px var(--font-sans); height: fit-content; text-transform: uppercase; }
.ap-sig-meta { min-width: 0; color: var(--muted); }
.ap-sig-meta b { display: block; color: var(--text); font-weight: 600; }
.ap-sig-more { margin-top: 8px; text-align: center; font: 600 11px/1 var(--font-mono); color: var(--muted); opacity: .8; }

/* ---------- TOP-10 Tabs + Tabellen (Index) ---------- */
.ap-top { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ap-card-bg); overflow: hidden; }
.ap-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ap-tab {
  flex: 1 1 auto; min-width: 96px; padding: 9px 12px; border: 0; cursor: pointer; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font: 600 13px/1 var(--font-sans);
}
.ap-tab:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 10%, transparent); }
/* Spec: oranger Strich, KEIN oranger Hintergrund (§4/§5). Unterstrich via inset-Shadow (kein Layout-Shift). */
.ap-tab.is-active { background: var(--fc-glass); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

.ap-table-wrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; font: 500 13px/1.4 var(--font-sans); }
.ap-table thead th { text-align: left; padding: 9px 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ap-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ap-table tbody tr { cursor: pointer; }
.ap-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ap-table .ap-t-rank { color: var(--muted); font-family: var(--font-mono); width: 34px; }
.ap-table .ap-t-name b { font-weight: 600; color: var(--text); }
.ap-table .ap-t-name span { display: block; font: 500 11px/1 var(--font-mono); color: var(--muted); margin-top: 2px; }
.ap-table .ap-t-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.ap-table .ap-t-cc { font-family: var(--font-mono); color: var(--muted); }
.ap-catpill { display: inline-block; min-width: 42px; text-align: center; padding: 2px 6px; border-radius: 999px; color: #fff; text-shadow: 0 1px 2px rgba(2,12,20,.5); font: 700 10px var(--font-mono); }
.ap-catpill[data-cat="VFR"]  { background: var(--fc-vfr-bg); }
.ap-catpill[data-cat="MVFR"] { background: var(--fc-mvfr-bg); }
.ap-catpill[data-cat="IFR"]  { background: var(--fc-ifr-bg); }
.ap-catpill[data-cat="LIFR"] { background: var(--fc-lifr-bg); }
.ap-catpill[data-cat=""]     { background: var(--fc-unknown); }

.ap-country-bar { margin-bottom: 10px; }
.ap-select {
  padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--menu-input-border);
  background: var(--menu-input-bg); color: var(--text); font: 600 14px/1 var(--font-sans); min-width: 220px;
}
.ap-table-empty td { color: var(--muted); text-align: center; padding: 18px; }

/* ---------- Suche-Autocomplete ---------- */
.ap-search { position: relative; }
.ap-ac {
  position: absolute; top: calc(100% + 4px); left: 0; right: 92px; z-index: 30;
  /* DECKEND (--surface), nicht --menu-card-bg: das ist mit ~4% Deckkraft
     praktisch durchsichtig → Ergebnisse ueber dem Hero-Bild unlesbar. */
  background: var(--surface); border: 1px solid var(--menu-border, var(--line));
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.35);
  /* Hoehe deckeln + intern scrollen: bei vielen Treffern wurde das Dropdown
     ueber 1000 px hoch. */
  overflow: hidden auto; max-height: min(60vh, 400px); display: none;
}
.ap-ac.is-open { display: block; }
.ap-ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; }
.ap-ac-item:hover, .ap-ac-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ap-ac-item b { font: 600 13px/1.2 var(--font-sans); color: var(--text); }
.ap-ac-item small { display: block; color: var(--muted); font-weight: 500; }
.ap-ac-item .ap-ac-code { font: 700 12px var(--font-mono); color: var(--muted); white-space: nowrap; }

/* ---------- Bewölkungs-Karte (Detail) ---------- */
.ap-metar-raw { font: 500 12px/1.5 var(--font-mono); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.ap-clouds { list-style: none; margin: 8px 0 0; padding: 0; }
.ap-clouds li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font: 500 13px/1.3 var(--font-sans); }
.ap-clouds li:first-child { border-top: 0; }
.ap-clouds .ap-cl-cover { font: 700 11px var(--font-mono); min-width: 40px; padding: 2px 6px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); border: 1px solid var(--badge-border); text-align: center; }
.ap-clouds .ap-cl-base { color: var(--muted); font-family: var(--font-mono); }
.ap-wx { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fc-ifr) 14%, transparent); color: var(--fc-ifr); font: 600 12px var(--font-mono); }
/* ID-Selektor + explizite Größe: schlägt maplibre-gl.css `.maplibregl-map{position:relative}
.ap-map canvas { outline: none; }
.ap-heromap .ap-search { position: relative; max-width: 100%; }
.ap-heromap .ap-search input {
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}
.ap-heromap .ap-search-err { margin-top: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* Legende (unten links) */
.ap-legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-pill);
  padding: 8px 14px; box-shadow: var(--shadow-soft);
}
.ap-legend-title { font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ap-legend-item { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-mono); color: var(--text); }
.ap-legend-item i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); }
.ap-legend-item[data-cat="VFR"] i { background: var(--fc-vfr); }
.ap-legend-item[data-cat="MVFR"] i { background: var(--fc-mvfr); }
.ap-legend-item[data-cat="IFR"] i { background: var(--fc-ifr); }
.ap-legend-item[data-cat="LIFR"] i { background: var(--fc-lifr); }
.ap-map-toggle.is-off { color: var(--muted); }
.ap-map-toggle.is-off::before { background: var(--muted); box-shadow: none; opacity: .6; }

/* Stat-Band */
.ap-stats { border-bottom: 1px solid var(--line); background: var(--ap-card-bg); }
.ap-stats .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ap-stat { padding: 16px 12px; text-align: center; border-left: 1px solid var(--line); }
.ap-stat:first-child { border-left: 0; }
.ap-stat-num { display: block; font: 700 clamp(20px, 3vw, 28px)/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-stat-lbl { display: block; margin-top: 5px; font: 600 11px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 620px) {
  .ap-stats .container { grid-template-columns: repeat(2, 1fr); }
  .ap-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ap-stat:nth-child(odd) { border-left: 0; }
  .ap-legend { right: 18px; left: 18px; bottom: 62px; justify-content: center; }}

/* Karten-Popup (Airport-Punkt) */
.ap-popup .maplibregl-popup-content {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; font-family: var(--font-sans);
}
.ap-popup .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }
.ap-popup .maplibregl-popup-close-button { color: var(--muted); font-size: 16px; padding: 2px 6px; }
.ap-pop-head { min-height: 4px; margin-bottom: 4px; }
.ap-pop-cat { display: inline-block; padding: 2px 7px; border-radius: 999px; color: #fff; text-shadow: 0 1px 2px rgba(2,12,20,.5); font: 700 11px var(--font-mono); }
.ap-pop-catlabel { font: 500 11px var(--font-sans); color: var(--muted); }
.ap-pop-name { display: block; font: 700 14px/1.25 var(--font-display); color: var(--text); }
.ap-pop-code { font: 600 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; margin-top: 1px; }
.ap-pop-vals { margin-top: 6px; font: 600 12px/1.3 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-pop-link { display: inline-block; margin-top: 8px; font: 700 12px var(--font-sans); color: var(--accent); text-decoration: none; }

/* SIGMET-Popup — dieselbe Hülle wie beim Flughafenpunkt, nur mit Wertetabelle
   und ausklappbarer Originalmeldung. */
.ap-pop--sig { max-width: 292px; }
.ap-pop-haz {
  display: inline-block; padding: 2px 8px; border-radius: 4px; color: #fff;
  text-shadow: 0 1px 2px rgba(2,12,20,.5);
  font: 700 11px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.ap-pop-dl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px;
  margin: 8px 0 0; align-items: baseline;
}
.ap-pop-dl dt { font: 600 10.5px/1.4 var(--font-sans); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.ap-pop-dl dd { margin: 0; font: 600 12px/1.4 var(--font-mono); color: var(--text);
  font-variant-numeric: tabular-nums; }
.ap-pop-dl dd small { font-weight: 500; opacity: .7; }
.ap-pop-raw { margin-top: 9px; }
.ap-pop-raw summary { cursor: pointer; font: 600 11px/1.4 var(--font-sans); color: var(--accent); }
.ap-pop-raw code {
  display: block; margin-top: 6px; padding: 7px 8px; border-radius: 6px;
  max-height: 128px; overflow: auto;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font: 500 11px/1.5 var(--font-mono); color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.ap-pop-link:hover { text-decoration: none; }

/* ==========================================================================
   Video-Hero + Karten-Sektion-Kopf + Erklär-Sektion (Index, Iteration 4)
   ========================================================================== */
.ap-videohero {
  position: relative; min-height: clamp(440px, 62vh, 620px);
  /* overflow: visible statt hidden — sonst schneidet der Hero das Such-Dropdown
     ab. Gefahrlos: Bild (.ap-video) und Scrim sind mit inset:0 exakt hero-gross
     gepinnt, koennen also nicht ueberlaufen. */
  overflow: visible;
  display: flex; flex-direction: column; justify-content: center;
  background: #10131a url(/assets/img/airport/agp-wing.jpg) center/cover no-repeat;
}
.ap-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-video-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,15,.42) 0%, rgba(8,10,15,.12) 38%, rgba(8,10,15,.68) 100%); }
.ap-video-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 12vh; max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto;
}
.ap-video-inner h1 { font: 600 clamp(26px, 5vw, 46px)/1.12 var(--font-display); letter-spacing: -.01em; color: #fff; margin: 0 0 8px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.ap-video-inner p { font: 500 clamp(14px, 2vw, 17px)/1.5 var(--font-sans); color: rgba(255,255,255,.94); margin: 0 0 18px; max-width: 60ch; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.5); }
.ap-videohero .ap-search { max-width: 480px; position: relative; }
.ap-videohero .ap-search input {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.ap-videohero .ap-search input::placeholder { color: rgba(255,255,255,.75); }
.ap-videohero .ap-search-err { color: #ffd4d4; margin-top: 8px; text-shadow: 0 1px 5px rgba(0,0,0,.6); }

.ap-mapsec { padding-top: 26px; }
.ap-mapsec > .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.ap-sec-h { font: 700 15px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 0 0 4px; }
.ap-sec-lead { font: 500 13px/1.5 var(--font-sans); color: var(--muted); margin: 0 0 14px; max-width: 72ch; }

/* Der Abschnitt liegt als Kasten auf der Seite — gleiche Optik wie .ap-ex-block
   auf der Erklaerseite (Glas, Haarlinie, weicher Schatten). Die fruehere
   border-top entfaellt: der Kasten trennt jetzt selbst, die Linie waere doppelt. */
.ap-explain { padding: 42px 0; }
.ap-explain > .container {
  max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto;
  padding: clamp(20px, 3vw, 26px) clamp(16px, 3vw, 26px) clamp(22px, 3vw, 28px);
  background: var(--ap-card-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--ap-card-line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.ap-explain h2 { font: 700 clamp(19px, 3vw, 26px)/1.2 var(--font-display); color: var(--text); margin: 0 0 8px; }
.ap-explain-lead { font: 500 14px/1.6 var(--font-sans); color: var(--muted); margin: 0 0 22px; max-width: 76ch; }
.ap-explain-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.ap-explain-media { margin: 0; position: sticky; top: 84px; }
.ap-explain-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow-soft); }
.ap-explain-media figcaption { margin-top: 8px; font: 500 11.5px/1.45 var(--font-sans); color: var(--muted); }
@media (max-width: 760px) {
  .ap-explain-grid { grid-template-columns: 1fr; }
  .ap-explain-media { position: static; max-width: 440px; }}
.ap-map-toggle.is-loading { opacity: .65; pointer-events: none; }
.ap-map-attr { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 4;
  font: 500 10px/1.3 var(--font-sans); color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.75);
  max-width: 66%; text-align: center; pointer-events: auto; }
.ap-map-attr:empty { display: none; }
.ap-map-attr a { color: inherit; text-decoration: underline; }
.ap-nearsec .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.ap-near-loading { padding: 16px 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font: 500 13px/1.4 var(--font-sans); display: flex; align-items: center; gap: 8px; }
.ap-near-pin { font-size: 14px; }
.ap-near-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--ap-card-bg); box-shadow: var(--shadow-soft); overflow: hidden; }
.ap-near-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px 0; }
.ap-near-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px 12px; text-decoration: none; color: var(--text); }
.ap-near-name { font: 700 clamp(16px, 2.4vw, 21px)/1.2 var(--font-display); color: var(--text); }
.ap-near-meta { font: 600 12px/1 var(--font-mono); color: var(--muted); margin-top: 4px; }
.ap-near-body:hover .ap-near-name { color: var(--accent); }
.ap-near-wx { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ap-near-temp { font: 700 21px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-near-wind { font: 600 13px var(--font-mono); color: var(--muted); }
@media (max-width: 560px) { .ap-near-body { flex-direction: column; align-items: flex-start; } .ap-near-wx { margin-top: 6px; }}

/* ==========================================================================
   CONTAINED LANDING — Video-Hero contained + Karte als Sektion im Textfluss.
   (Body erbt den Lagune-Himmel-zu-Meer-Gradient via body:not(.ap-immersive).)
   ========================================================================== */

/* Video-Hero: full-bleed Band, Inhalt bleibt im Container zentriert */
.ap-videohero {
  max-width: none; margin: 0;
  border-radius: 0; border: 0; box-shadow: none;
}
.ap-video-inner {
  width: 100%; height: auto;
  max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto;
  padding: clamp(20px, 4vw, 40px);
  justify-content: center;
}

/* Live-Wetterkarte als Sektion im Fluss (bounded Box) */
.ap-mapsec { padding-top: 6px; }
.ap-mapsec > .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
/* Karten-Box im „Aviation Space"-Look: Weltraum-Grund + zarter Cyan-Rand-Glow.
   Farbe = SPACE.ocean aus airport-map.js (kein Flash beim Laden). */
.ap-mapbox {
  position: relative; height: clamp(360px, 52vh, 520px); margin-top: 12px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(95,208,239,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 0 60px rgba(19,145,176,.10);
  background: #062a3e;
}
/* Vignette: zieht den Blick in die Mitte, verstärkt den Space-Eindruck. */
.ap-mapbox::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(2,12,20,.5) 100%);
}

/* ---------- Eigene Map-Buttons (Muster Zeitzonen, Optik = Space-Design) ---------- */
.ap-map-controls {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.ap-map-controls .map-btn {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6,37,52,.72); color: #d8f0fb;
  border: 1px solid rgba(95,208,239,.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.ap-map-controls .map-btn:hover { background: rgba(19,145,176,.55); border-color: rgba(95,208,239,.6); transform: translateY(-1px); }
.ap-map-controls .map-btn.is-active { background: rgba(19,145,176,.7); border-color: #5fd0ef; color: #fff; }
.ap-map-controls .map-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* 3D/2D-Umschalter zeigt Text statt Icon (Muster start.php; start.css wird hier nicht geladen). */
.ap-map-controls .map-btn--text .map-btn-text { font: 800 13px/1 var(--font-sans); letter-spacing: .02em; }
.ap-map-controls .map-btn[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border-radius: 6px; background: rgba(2,12,20,.92); color: #d8f0fb;
  border: 1px solid rgba(95,208,239,.22);
  font: 600 11px/1 var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.ap-map-controls .map-btn[data-tooltip]:hover::after { opacity: 1; }

/* 3D-Globus: Der Sternenhimmel (meteo-space.js) folgt sonst dem Theme und würde
   im Light-Mode als heller Himmel hinter unserer dunklen Space-Karte stehen.
   Hier bleibt er IMMER Weltraum — das Aviation-Design ist bewusst themenfest. */
.ap-mapbox .space-bg.space-light { background-color: #05070f; }
.ap-mapbox .space-bg.space-light .space-stars { opacity: 1; }

/* ---------- Vollbild (CSS-basiert wie bei den Zeitzonen) ---------- */
.ap-mapbox.is-fullscreen {
  position: fixed; inset: var(--header-height, 86px) 0 0 0; z-index: 90;
  height: auto; margin: 0; border-radius: 0; border: 0;
}
.ap-mapbox.is-fullscreen #ap-map { height: 100%; }
.ap-mapbox.is-fullscreen .ap-map-controls { top: 16px; right: 16px; }
body.ap-fs-open { overflow: hidden; }
.ap-mapbox #ap-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-mapbox .ap-legend { position: absolute; left: 14px; bottom: 14px; z-index: 4; }
.ap-mapbox .ap-map-attr { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 2; text-align: center; }

/* Landing-Panele: Lagune-Glas (Blur) über dem Gradient */
.ap-near-card, .ap-top, .ap-sigmet-panel, .ap-major, .ap-ex-card {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ap-table-wrap, .ap-stats .container {
  background: var(--fc-glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ap-top .ap-table-wrap { background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ap-stats { border: 0; background: transparent; padding-top: 26px; }
.ap-stats .container { overflow: hidden; }

/* ---------- Favoriten-Reihe: kompaktere, aufgeräumte Karten ---------- */
/* Favoriten als Raster nebeneinander (nicht je 100% Breite). */
.ap-near-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-near-row .ap-near-card { flex: 1 1 300px; max-width: 460px; }
.ap-near-row .ap-near-head { min-height: 22px; padding-top: 10px; }   /* Stern oben rechts, kein Gold-Label mehr */
.ap-near-row .ap-near-body { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; }
.ap-near-row .ap-near-name {
  font-size: 16px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 2.5em; overflow: hidden;   /* harte 2-Zeilen-Kappe, falls line-clamp mal nicht greift */
}
.ap-near-row .ap-near-wx { margin-top: 2px; }
.ap-near-row .ap-near-temp { font-size: 18px; }

/* ---------- Hero-Icon-Badges (Tower · Wetter · Flugzeug) ---------- */
.ap-hero-icons { display: flex; gap: 16px; margin-bottom: 26px; }
.ap-hero-icon {
  width: 66px; height: 66px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.25);
}
.ap-hero-icon svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@media (max-width: 560px) {
  .ap-hero-icons { gap: 12px; margin-bottom: 20px; }
  .ap-hero-icon { width: 54px; height: 54px; }
  .ap-hero-icon svg { width: 28px; height: 28px; }}

/* Tower-Badge nutzt das echte Icon-Bild (weiß/transparent) statt SVG */
.ap-hero-icon .ap-hero-img { width: 37px; height: 37px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@media (max-width: 560px) { .ap-hero-icon .ap-hero-img { width: 31px; height: 31px; }}

/* ==========================================================================
   Auffällige Bedingungen jetzt + Flaggen + „Alle anzeigen" (Landing, 2026-07-13)
   ========================================================================== */
.ap-notable { padding-top: 34px; }
.ap-notable > .container { max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.ap-notable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 14px; margin-top: 12px; }
.ap-not-card {
  display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; text-decoration: none; color: var(--text);
  background: var(--fc-glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ap-not-card:hover { transform: translateY(-2px); text-decoration: none; }
/* Kante zeigt die Flugkategorie DIESES Flughafens (User 2026-07-19) statt einer
   festen Position-Farbe. Signalfarbe (neon), nicht die dunklere Pillen-Flaeche:
   auf der Linie steht kein Text, sie soll leuchten. Ohne Kategorie -> Akzent. */
.ap-not-card[data-cat="VFR"]  { border-left-color: var(--fc-vfr); }
.ap-not-card[data-cat="MVFR"] { border-left-color: var(--fc-mvfr); }
.ap-not-card[data-cat="IFR"]  { border-left-color: var(--fc-ifr); }
.ap-not-card[data-cat="LIFR"] { border-left-color: var(--fc-lifr); }
.ap-not-head { display: flex; align-items: center; gap: 8px; }
.ap-not-head .ap-catpill { margin-left: auto; }   /* Kategorie oben rechts */
.ap-not-emoji { font-size: 20px; line-height: 1; }
.ap-not-label { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ap-not-val { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.ap-not-num { font: 700 clamp(26px, 4vw, 34px)/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-not-air { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.ap-not-icao { font: 500 11px/1 var(--font-mono); color: var(--muted); }

/* Flaggen (Emoji) in Tabellen/Karten */
.ap-flag { font-size: 18px; line-height: 1; }
.ap-t-name { display: flex; align-items: center; gap: 8px; }
.ap-t-name .ap-flag { display: inline-block; font-size: 18px; flex: none; }
.ap-t-nm { display: flex; flex-direction: column; min-width: 0; }
.ap-t-nm b { font-weight: 600; color: var(--text); }
.ap-t-nm span { display: block; font: 500 11px/1 var(--font-mono); color: var(--muted); margin-top: 2px; }

/* „Alle anzeigen" / „Weniger" */

/* ==========================================================================
   Hero zweispaltig (Text/Suche links · Live-Kachel rechts) + Chips (2026-07-13)
   ========================================================================== */
/* Höhe steckt als min-height in der Basisregel → Hero wächst mit den Favoriten unten.
   Inner füllt die Hero-Höhe (flex:1); Zeilen 1fr/auto → Hauptinhalt zentriert, Favoriten unten gepinnt. */
.ap-video-inner {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr);
  grid-template-rows: 1fr auto;
  column-gap: 26px; row-gap: 22px; align-items: center;
  padding-block: clamp(22px, 4vh, 44px);
}
.ap-hero-main { min-width: 0; }
.ap-hero-side { min-width: 0; }

/* ---- Favoriten / zuletzt angesehen: volle Breite unten im Hero, dunkles Glass ---- */
.ap-hero-favs { grid-column: 1 / -1; align-self: end; min-width: 0; }
.ap-hero-favs:empty { display: none; }
.ap-hero-favs .ap-near-h { font: 700 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.85); margin: 0 0 8px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
/* Eine Reihe: kompakte Karten, horizontal scrollbar wer rausfällt */
.ap-hero-favs .ap-near-row {
  flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding-bottom: 4px;
  align-items: stretch;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.ap-hero-favs .ap-near-row::-webkit-scrollbar { height: 6px; }
.ap-hero-favs .ap-near-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
.ap-hero-favs .ap-near-row .ap-near-card { flex: 0 0 auto; width: clamp(190px, 40vw, 224px); max-width: none; scroll-snap-align: start; display: flex; flex-direction: column; }
/* Body füllt die Karte → Wetterzeile sitzt bei allen Karten auf gleicher Höhe unten. */
.ap-hero-favs .ap-near-row .ap-near-body { flex: 1; justify-content: space-between; }
.ap-hero-favs .ap-near-noobs { font: italic 500 11px/1 var(--font-sans); color: rgba(255,255,255,.5); }
/* Karten im selben dunklen Glass wie die „nächster Flughafen"-Kachel */
.ap-hero-favs .ap-near-card {
  background: rgba(6,37,52,.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.36); color: #fff;
}
/* kompakter: weniger Padding, kleinere Schrift, Name NICHT bold.
   Stern absolut oben rechts → Name teilt sich die erste Zeile mit dem Stern und
   darf bei Bedarf auf 2 Zeilen umbrechen (rechts am Stern vorbei). */
.ap-hero-favs .ap-near-card { position: relative; }
.ap-hero-favs .ap-near-row .ap-near-head { position: absolute; top: 8px; right: 10px; min-height: 0; padding: 0; z-index: 2; }
.ap-hero-favs .ap-near-row .ap-near-body { padding: 10px 12px 10px; gap: 6px; }
.ap-hero-favs .ap-near-name {
  font: 500 13.5px/1.25 var(--font-display); padding-right: 22px;
  -webkit-line-clamp: 2; max-height: 2.6em;
}
.ap-hero-favs .ap-near-meta { font-size: 11px; margin-top: 2px; }
.ap-hero-favs .ap-near-wx { gap: 8px; }
.ap-hero-favs .ap-near-temp { font-size: 17px; }
.ap-hero-favs .ap-near-wind { font-size: 11px; }
.ap-hero-favs .ap-fav-btn { padding: 0; }
.ap-hero-favs .ap-near-body, .ap-hero-favs .ap-near-name, .ap-hero-favs .ap-near-temp { color: #fff; }
.ap-hero-favs .ap-near-body:hover .ap-near-name { color: var(--accent); }
.ap-hero-favs .ap-near-meta, .ap-hero-favs .ap-near-wind,
.ap-hero-favs .ap-near-label, .ap-hero-favs .ap-near-src { color: rgba(255,255,255,.78); }
.ap-hero-favs .ap-near-foot { border-top-color: rgba(255,255,255,.16); }
.ap-hero-favs .ap-near-precise { color: #fff; border-color: rgba(255,255,255,.38); }
.ap-hero-favs .ap-near-precise:hover { border-color: var(--accent); color: var(--accent); }
.ap-hero-favs .ap-near-loading { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); }
/* Stern-Toggle (war global ungestylt) */
.ap-hero-favs .ap-fav-btn { background: transparent; border: 0; cursor: pointer; padding: 2px; line-height: 0; color: rgba(255,255,255,.6); display: inline-flex; }
.ap-hero-favs .ap-fav-btn:hover, .ap-hero-favs .ap-fav-btn.is-on { color: #f6b73c; }
/* Der Entfernen-Zustand traegt ein ✕ statt des Sterns — Gold waere dafuer das
   falsche Signal, es soll neutral bleiben und erst beim Zeigen warnen. */
.ap-hero-favs .ap-fav-btn.is-on { color: rgba(255,255,255,.62); }
.ap-hero-favs .ap-fav-btn.is-on:hover { color: #ff8f8f; }
/* „Zuletzt angesehen"-Zeile */
.ap-hero-favs .ap-near-recent { margin-top: 12px; font: 500 13px/1.5 var(--font-sans); color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,0,0,.5); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ap-hero-favs .ap-near-recent-lbl { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.ap-hero-favs .ap-near-recent a { color: #fff; font-weight: 700; text-decoration: none; }
.ap-hero-favs .ap-near-recent a:hover { color: var(--accent); }
.ap-hero-favs .ap-fav-inline { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); padding: 4px 10px; color: #fff; font: 600 11.5px var(--font-sans); cursor: pointer; }
.ap-hero-favs .ap-fav-inline:hover { border-color: var(--accent); color: var(--accent); }

/* Beispiel-Chips unter der Suche */
.ap-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ap-hero-chip {
  padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
  font: 600 12px/1 var(--font-mono); letter-spacing: .04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ap-hero-chip:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Live-Kachel (nächster Flughafen) in der rechten Hero-Spalte */
.ap-hero-near {
  max-width: 340px; margin-left: auto;
  background: rgba(6,37,52,.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.4); color: #fff;
}
.ap-hn-lbl { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.82); margin-bottom: 10px; }
.ap-hn-body { display: block; text-decoration: none; color: #fff; }
.ap-hn-body:hover .ap-hn-name { text-decoration: none; }
.ap-hn-name { display: flex; align-items: center; gap: 8px; font: 700 clamp(16px, 2vw, 20px)/1.2 var(--font-display); }
.ap-hn-meta { font: 600 12px/1 var(--font-mono); color: rgba(255,255,255,.75); margin-top: 4px; }
.ap-hn-wx { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ap-hn-temp { font: 700 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ap-hn-wind { font: 600 13px var(--font-mono); color: rgba(255,255,255,.8); }
.ap-hn-precise { margin-top: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); padding: 6px 12px; color: #fff; font: 600 12px var(--font-sans); cursor: pointer; }
.ap-hn-precise:hover { background: rgba(255,255,255,.24); }

/* Unter 1000px: die "nächster Flughafen"-Kachel raus aus dem Hero (User-Wunsch).
   Der Hero wird dadurch einspaltig — H1/Lead/Suche bekommen die volle Breite,
   die Favoriten-Reihe unten bleibt. */
@media (max-width: 1000px) {
  .ap-hero-side { display: none; }
  .ap-video-inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ap-videohero { min-height: 0; }
  .ap-video-inner { flex: 0 1 auto; grid-template-columns: 1fr; grid-template-rows: none; padding-block: 26px; }
  .ap-hero-favs { align-self: auto; }}

/* ==========================================================================
   Erklärseite /airport/metar-taf-sigmet/ (2026-07-19)
   Layout kommt aus info.css (info-hero/-story/-stats/-cta); hier nur die
   fachlichen Bausteine: Decoder-Tabellen, Wettercode-Spalten, SIGMET-Katalog,
   Kategorie-Tabelle, Glossar.
   ========================================================================== */
.ap-explained .info-story-media img { border-radius: var(--radius); }

.ap-ex-block {
  margin: 26px 0; padding: 22px 24px;
  background: var(--ap-card-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--ap-card-line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  min-width: 0;   /* darf unter Min-Content schrumpfen (Grid-Item) */
}
.ap-ex-block h3 { font: 700 clamp(17px, 2.4vw, 21px)/1.25 var(--font-display); color: var(--text); margin: 0 0 6px; }
.ap-ex-block h3 + .ap-ex-lead { margin-top: 0; }
.ap-ex-block > h3:not(:first-child) { margin-top: 30px; }
.ap-ex-lead { font: 500 14px/1.6 var(--font-sans); color: var(--muted); margin: 0 0 16px; max-width: 78ch; }
.ap-ex-sub { font: 700 15px/1.3 var(--font-sans); color: var(--text); margin: 18px 0 6px; }

/* Beispiel-METAR prominent */
.ap-ex-sample { margin: 0 0 16px; overflow-x: auto; }
.ap-ex-sample code {
  display: inline-block; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(6,37,52,.55); border: 1px solid rgba(95,208,239,.25);
  font: 600 14px/1.5 var(--font-mono); color: #d8f0fb; letter-spacing: .02em; white-space: nowrap;
}
.ap-ex-sample code b { color: var(--accent); font-weight: 700; }

/* Tabellen */
.ap-ex-tablewrap { overflow-x: auto; }
.ap-ex-table { width: 100%; border-collapse: collapse; font: 500 13.5px/1.55 var(--font-sans); }
.ap-ex-table th {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line);
  font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  white-space: nowrap;
}
.ap-ex-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.ap-ex-table tr:last-child td { border-bottom: 0; }
.ap-ex-table td:first-child { white-space: nowrap; }
.ap-ex-table code {
  font: 700 12.5px/1.4 var(--font-mono); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 6px; border-radius: 4px;
}
.ap-ex-table td code, .ap-ex-lead code, .info-hero code, .ap-ex-glossary code {
  font-family: var(--font-mono); font-size: .92em;
}

/* Kategorie-Tabelle */
.ap-ex-cats td:first-child { padding-right: 18px; }
.ap-ex-join { display: block; font: 600 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }

/* Wettercode-Spalten */
/* min(100%, 220px) statt 220px: auf einem Schirm, der schmaler ist als die
   Mindestbreite, kann die Spur sonst nicht schrumpfen und schiebt die ganze
   Seite waagerecht auf. */
.ap-ex-wx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.ap-ex-wxcol h4 { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.ap-ex-wxcol dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; }
.ap-ex-wxcol dt { font: 700 12.5px/1.3 var(--font-mono); color: var(--accent); }
.ap-ex-wxcol dd { margin: 0; font: 500 13px/1.4 var(--font-sans); color: var(--text); }

/* SIGMET-Katalog */
.ap-ex-haz { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ap-ex-haz li { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ap-ex-haz li:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-ex-hazcode {
  flex: none; min-width: 96px; text-align: center; padding: 5px 10px; border-radius: var(--radius-pill);
  color: #fff; font: 700 11px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .04em;
}
.ap-ex-haz b { display: block; font: 700 14px/1.3 var(--font-sans); color: var(--text); margin-bottom: 3px; }
.ap-ex-haz span { font: 500 13px/1.55 var(--font-sans); color: var(--muted); }

/* Hinweiskästen */
.ap-ex-note {
  margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}
.ap-ex-note b { display: block; font: 700 13px/1.3 var(--font-sans); color: var(--text); margin-bottom: 5px; }
.ap-ex-note p { margin: 0; font: 500 13px/1.6 var(--font-sans); color: var(--text); }
.ap-ex-note--warn {
  background: color-mix(in srgb, var(--fc-ifr) 10%, transparent);
  border-color: color-mix(in srgb, var(--fc-ifr) 30%, var(--line));
}

/* Glossar */
.ap-ex-glossary { margin: 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 12px 20px; }
.ap-ex-glossary dt { font: 700 13px/1.5 var(--font-mono); color: var(--accent); }
.ap-ex-glossary dd { margin: 0; font: 500 13.5px/1.6 var(--font-sans); color: var(--text); }

.ap-ex-sources { margin: 26px 0 10px; }
.ap-ex-sources h3 { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.ap-ex-sources p { margin: 0; font: 500 12.5px/1.6 var(--font-sans); color: var(--muted); max-width: 80ch; }

@media (max-width: 560px) {
  .ap-ex-block { padding: 18px 16px; }
  .ap-ex-haz li { flex-direction: column; gap: 8px; }
  .ap-ex-glossary { grid-template-columns: 1fr; gap: 4px 0; }
  .ap-ex-glossary dd { margin-bottom: 10px; }
  /* Vergleichskarte: Begriff ueber die volle Breite, darunter EU|US nebeneinander
     — drei Spalten wurden hier zu schmal fuer die Code-Zellen. */
  .ap-cmp-head, .ap-cmp-row { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .ap-cmp-row b { grid-column: 1 / -1; margin-bottom: 2px; }
  .ap-cmp-row i { grid-column: 1 / -1; }
  /* Erste Kopfzelle ist leer (Platzhalter ueber der Begriffsspalte) — mobil weg,
     sonst steht "EU-Code" unter einer Leerzelle statt links. */
  .ap-cmp-head > span:first-child { display: none; }
  .ap-cmp { padding: 16px 14px 76px; }}

/* Verweis von der Landing auf die Erklärseite: mittig im Kasten, Tuerkis-Akzent.
   Fuellung bewusst TIEFES Tuerkis (#0d7f96 -> #0a6076): helle Schrift braucht
   mind. 4,5:1 — auf dem hellen Kuesten-Cyan #5fd0ef waeren es nur 1,79:1 gewesen.
   Der helle Rand + Glow holen die Leuchtkraft zurueck, ohne die Lesbarkeit zu
   opfern. Text-Shadow zusaetzlich fuer Schaerfe auf dem Verlauf. */
.ap-explain-more {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; margin: 26px auto 0;
  padding: 13px 26px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #0d7f96 0%, #0a6076 100%);
  border: 1px solid rgba(95,208,239,.55);
  color: #fff; text-decoration: none; font: 700 14px/1.3 var(--font-sans);
  text-shadow: 0 1px 3px rgba(2,12,20,.55);
  box-shadow: 0 8px 22px rgba(13,127,150,.4), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease), filter var(--t) var(--ease);
}
.ap-explain-more:hover {
  transform: translateY(-2px); filter: brightness(1.12);
  border-color: #5fd0ef; color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(95,208,239,.42), inset 0 1px 0 rgba(255,255,255,.22);
}
.ap-explain-more:focus-visible { outline: 2px solid #5fd0ef; outline-offset: 3px; }

/* Hero: gut sichtbarer Einstieg in die Erklärseite (der Link in der Erklär-
   sektion liegt ~45 % die Seite runter und wird faktisch nie gesehen). */
.ap-hero-learn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; text-decoration: none; font: 600 12.5px/1.3 var(--font-sans);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ap-hero-learn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-shadow: none; }
.ap-hero-learn svg { flex: none; opacity: .9; }
@media (max-width: 560px) { .ap-hero-learn { font-size: 12px; padding: 8px 13px; }}

/* Breitere Bildbox: die Weltkarte ist ~1.9:1 — in der 4:3-Standardbox fielen
   sonst 30 % der Breite (Amerika bzw. Asien) dem Crop zum Opfer. */
.ap-explained .info-story-media--wide { aspect-ratio: 16 / 9; }
/* Panorama-Zuschnitt (Webcam): Bild ist 2,43:1 — die Box folgt dem Format, statt
   es in 4:3 zu quetschen. Ergibt eine flachere Box und keinen Beschnitt an den
   Seiten (das eingebrannte Logo wurde bereits aus der Bilddatei geschnitten). */
.ap-explained .info-story-media--pano { aspect-ratio: 12 / 5; }

/* Regionale Unterschiede: Vergleichs-Karte statt Foto — ein Bild kann Code- und
   Einheiten-Unterschiede nicht zeigen, diese Gegenueberstellung schon. */
/* Hoehe NICHT auf 4:3 fixieren — gleiche Falle wie beim SIGMET-Schema unten:
   die Bildunterschrift ist absolut positioniert und wird je nach Sprache/Breite
   mehrzeilig; auf schmalen Schirmen ist eine 4:3-Box zu flach fuer Kopf + 4
   Zeilen und der Inhalt wird geclippt. Box waechst mit dem Inhalt, unten bleibt
   Platz fuer den Caption-Scrim. */
.ap-cmp-box { aspect-ratio: auto; display: flex; align-items: center; justify-content: center;
  position: relative; background: rgba(6,37,52,.5);
  border-style: solid; border-color: rgba(95,208,239,.2); }
.ap-cmp { width: 100%; padding: 20px clamp(14px, 3vw, 26px) 76px; }
.ap-cmp-head, .ap-cmp-row { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: center; }
.ap-cmp-head { padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.16); }
.ap-cmp-side { text-align: center; font: 700 10px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: rgba(216,240,251,.75); }
.ap-cmp-side--us { color: var(--accent); }
.ap-cmp-row { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ap-cmp-row:last-child { border-bottom: 0; }
.ap-cmp-row b { font: 600 12px/1.3 var(--font-sans); color: rgba(216,240,251,.9); }
.ap-cmp-row code { text-align: center; font: 700 clamp(12px, 1.5vw, 15px)/1.2 var(--font-mono);
  color: #d8f0fb; background: rgba(255,255,255,.08); border-radius: 5px; padding: 5px 4px; }
.ap-cmp-row code:last-child { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ap-cmp-row i { text-align: center; font: italic 500 11px/1.3 var(--font-sans); color: rgba(216,240,251,.45); }

/* SIGMET-Schema: zeigt die Kernaussage des Abschnitts — ein SIGMET gilt fuer ein
   GEBIET innerhalb einer FIR, nicht fuer einen Punkt. */
/* Hoehe NICHT auf 4:3 fixieren: die Bildunterschrift ist absolut positioniert und
   wird je nach Sprache 1- bis 3-zeilig — bei fixer Hoehe ueberlappt sie die Legende.
   Box waechst mit dem Inhalt, unten bleibt Platz fuer den Caption-Scrim. */
.ap-sig-box { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; padding: 18px 16px 82px; background: rgba(6,37,52,.5);
  border-style: solid; border-color: rgba(95,208,239,.2); }
.ap-sig-svg { width: 100%; max-width: 440px; height: auto; margin-inline: auto; display: block; }
.ap-sig-t { font-family: var(--font-mono); fill: #d8f0fb; }
.ap-sig-t--fir { font-size: 12px; font-weight: 700; fill: #5fd0ef; letter-spacing: .08em; }
.ap-sig-t--badge { font-size: 10px; font-weight: 700; fill: #fff; letter-spacing: .04em; }
.ap-sig-t--mov { font-size: 9px; fill: rgba(229,72,77,.95); letter-spacing: .04em; }
.ap-sig-t--fl { font-size: 9.5px; fill: rgba(216,240,251,.7); letter-spacing: .04em; }
.ap-sig-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ap-sig-key li { display: inline-flex; align-items: center; gap: 6px;
  font: 500 10.5px/1.3 var(--font-sans); color: rgba(216,240,251,.8); }
.ap-sig-key i { width: 16px; height: 0; flex: none; border-top-width: 2px; }
.ap-sig-k--fir { border-top: 2px dashed #5fd0ef; }
.ap-sig-k--area { border-top: 2px dashed #e5484d; }
.ap-sig-k--route { border-top: 2px dashed rgba(255,255,255,.6); }

/* ==========================================================================
   Interaktiver METAR-Decoder (metar-decoder.js)
   ========================================================================== */
.md-block { position: relative; }
.md-bar { display: flex; gap: 8px; max-width: 420px; margin-bottom: 12px; }
.md-bar input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid rgba(95,208,239,.32); background: rgba(6,37,52,.6); color: #d8f0fb;
  font: 700 15px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.md-bar input::placeholder { text-transform: none; letter-spacing: 0; font: 500 13px var(--font-sans); color: rgba(216,240,251,.5); }
.md-bar input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.md-bar button {
  padding: 11px 18px; border-radius: var(--radius); border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 13px/1 var(--font-sans);
}
.md-bar button:hover { background: var(--accent-hover); }

.md-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.md-examples span { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.md-examples button {
  padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(95,208,239,.3); background: transparent; color: #d8f0fb;
  font: 700 11.5px/1 var(--font-mono); letter-spacing: .05em;
}
.md-examples button:hover { border-color: var(--accent); color: var(--accent); }

.md-status { margin: 0 0 10px; font: 500 12.5px/1.4 var(--font-sans); color: var(--muted); min-height: 18px; }
.md-status.is-err { color: var(--fc-ifr); }

.md-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.md-head b { font: 700 16px/1 var(--font-mono); color: #d8f0fb; letter-spacing: .06em; }
.md-head span { font: 500 12px/1.3 var(--font-sans); color: var(--muted); }

/* Rohcode mit anklickbaren Gruppen */
.md-code { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-radius: var(--radius-sm);
  background: rgba(2,12,20,.45); border: 1px solid rgba(95,208,239,.18); }
.md-tok {
  padding: 5px 8px; border-radius: 5px; cursor: pointer; border: 1px solid transparent;
  background: rgba(255,255,255,.07); color: #d8f0fb;
  font: 700 13.5px/1.2 var(--font-mono); letter-spacing: .04em;
  transition: transform .12s ease, border-color .12s ease;
}
.md-tok:hover { transform: translateY(-1px); border-color: currentColor; }
.md-tok.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.md-hint { margin: 10px 0 16px; font: 500 11.5px/1.4 var(--font-sans); color: var(--muted); }

/* Farbcode je Gruppenart — dieselbe Sprache in Code und Liste */
.md-tok[data-kind="wind"],  .md-rowtok[data-kind="wind"]  { color: #7fd4ee; }
.md-tok[data-kind="vis"],   .md-rowtok[data-kind="vis"]   { color: #00d9ff; }
.md-tok[data-kind="cloud"], .md-rowtok[data-kind="cloud"] { color: #a9c4d6; }
.md-tok[data-kind="wx"],    .md-rowtok[data-kind="wx"]    { color: #ff2d95; }
.md-tok[data-kind="temp"],  .md-rowtok[data-kind="temp"]  { color: #f4a932; }
.md-tok[data-kind="press"], .md-rowtok[data-kind="press"] { color: #00ff88; }
.md-tok[data-kind="time"],  .md-rowtok[data-kind="time"]  { color: #c04dff; }
.md-tok[data-kind="trend"], .md-rowtok[data-kind="trend"] { color: #9fb4c4; }
.md-tok[data-kind="rvr"],   .md-rowtok[data-kind="rvr"],
.md-tok[data-kind="ws"],    .md-rowtok[data-kind="ws"]    { color: #ffb45c; }
.md-tok[data-kind="unknown"] { color: var(--muted); opacity: .7; }

/* Auflösung */
.md-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.md-row { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 14px;
  padding: 10px 10px; border-radius: var(--radius-sm); align-items: baseline; }
.md-row.is-sel { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.md-rowtok { font: 700 12.5px/1.4 var(--font-mono); letter-spacing: .04em; }
.md-row b { display: block; font: 700 11px/1.3 var(--font-sans); text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.md-row span { font: 500 13.5px/1.55 var(--font-sans); color: var(--text); }

@media (max-width: 560px) {
  .md-row { grid-template-columns: 1fr; gap: 4px; }
  .md-code { gap: 5px; padding: 11px; }
  .md-tok { font-size: 12.5px; padding: 4px 6px; }}

/* Kompakt-Teaser statt vier Langtext-Karten (2026-07-19): Orientierung in drei
   Sekunden, die Tiefe steht auf /airport/metar-taf-sigmet/. Als Kacheln NEBEN-
   einander mit Icon-Kreis im Hero-Stil; Akzentfarbe je Thema wie zuvor. */
.ap-ex-quick {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px;
}
.ap-ex-quick li {
  --exq: var(--accent);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 16px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--exq) 10%, var(--ap-card-bg));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--exq) 38%, transparent);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ap-ex-quick li:hover { transform: translateY(-2px); border-color: var(--exq); }
.ap-ex-quick li[data-kind="taf"]    { --exq: var(--fc-mvfr); }
.ap-ex-quick li[data-kind="sigmet"] { --exq: #e5484d; }
.ap-ex-quick li[data-kind="cat"]    { --exq: var(--fc-vfr); }
/* Icon-Kreis: Glas + weisser Rand + weisses Icon, wie die Hero-Icons */
.ap-exq-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 5px 14px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.22);
}
.ap-exq-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.ap-ex-quick b { font: 700 14px/1.3 var(--font-sans); color: var(--text); }
.ap-exq-txt { font: 500 12.5px/1.5 var(--font-sans); color: var(--muted); }
/* Bis 640px feste 2 Spalten: auto-fit wuerde dazwischen 3 Spalten bilden und
   die vierte Kachel allein in eine zweite Reihe schieben (3+1 wirkt kippelig). */
@media (max-width: 640px) {
  .ap-ex-quick { grid-template-columns: repeat(2, 1fr); }
  .ap-ex-quick li { padding: 13px 13px 15px; }
  .ap-exq-icon { width: 36px; height: 36px; }
  .ap-exq-icon svg { width: 19px; height: 19px; }
}

/* Ländertabelle ausgeklappt: fester Rahmen mit Innen-Scroll statt die Seite auf
   volle Listenlaenge aufzublasen. Kopfzeile bleibt beim Scrollen stehen. */
.ap-table-wrap.is-scroll { max-height: clamp(320px, 48vh, 520px); overflow-y: auto; }
.ap-table-wrap.is-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* ==========================================================================
   Bahnen & Wind in 3D (airport-runways.js) — Detailseite
   ========================================================================== */
/* Karte randlos ueber die ganze Fensterbreite (Hero-Band wie auf der Startseite),
   Text darunter bleibt im Lese-Raster. */
.arw-sec { margin: 10px 0 40px; }
.arw-sec > #arw-info, .arw-sec > .arw-hint {
  max-width: min(var(--container), calc(100% - 32px)); margin-inline: auto;
}
/* Bildunterschrift-artig IN der Karte, oben links (User 2026-07-19).
   Die Controls ruecken darunter, sonst ueberlappen sie. */
.arw-lead {
  position: absolute; top: 14px; left: var(--arw-gutter); z-index: 3; margin: 0;
  max-width: min(46ch, calc(var(--container) - 190px));
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(9,52,72,.92); border: 1px solid #6ba9c4;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  font: 600 12.5px/1.35 var(--font-sans); color: #eaf7fc;
}
.arw-box {
  /* Die Karte laeuft randlos, die Overlays duerfen es NICHT: sie richten sich an
     derselben Kante aus wie der Text darunter. Auf schmalen Screens bleibt es
     beim einfachen 14px-Abstand (User 2026-07-19). */
  --arw-gutter: max(14px, calc((100% - var(--container)) / 2 + 14px));
  position: relative; height: clamp(340px, 56vh, 620px); overflow: hidden;
  border-radius: 0; border: 0; border-top: 1px solid rgba(95,208,239,.22);
  border-bottom: 1px solid rgba(95,208,239,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.42); background: #062a3e;
}
.arw-box #arw-map { position: absolute; inset: 0; width: 100%; height: 100%; }


/* Bahnrichtungen mit Wind-Komponenten */
/* Kompakt (User 2026-07-19): zwei Spalten ab ~420px Spaltenbreite — dadurch
   stehen die beiden Richtungen EINER Piste nebeneinander (13|31, 12|30), und
   die Liste braucht nur noch die halbe Hoehe. */
.arw-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  /* min(100%, 420px): ohne das min() ist die Spalten-MINDESTbreite 420px — auf
     einem 375px-Handy also breiter als der Schirm, die Liste lief rechts raus.
     Mit min() faellt sie dort auf Containerbreite zurueck (eine Spalte). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 8px;
}
.arw-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  /* Verlaesslich DUNKLER Grund statt 5%-Weissglas: die Zeilen liegen ueber dem
     hellen Türkis-Seitenverlauf, auf dem weder Gruen noch Pink trug. Auf diesem
     dunklen Canvas: Gegenwind-Gruen ~9:1, Rueckenwind-Pink ~5,5:1. */
  background: rgba(4,26,38,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(104,194,227,.22); border-left: 3px solid transparent;
}
/* "Guenstigste"-Bewertung entfernt (User 2026-07-21): alle Bahnen gleichwertig
   gelistet, der Nutzer beurteilt selbst — passt auch zum ATC-Hinweis darunter. */
.arw-ident {
  flex: none; min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.09); color: var(--text);
  font: 700 13.5px/1 var(--font-mono); letter-spacing: .05em;
}
.arw-vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
/* ACHTUNG: Diese beiden Klassennamen werden im JS ZUSAMMENGESETZT
   ('arw-' + (head>=0 ? 'head' : 'tail') in airport-runways.js). Eine Suche nach
   dem woertlichen Namen findet sie nicht — beim Aufraeumen nicht als tot
   einstufen, sonst faellt Gegen-/Rueckenwind auf Weiss und Standardfett zurueck. */
.arw-head { color: var(--fc-vfr); font: 700 12.5px/1.3 var(--font-sans); }
/* Wieder das kraeftige IFR-Magenta — auf dem jetzt DUNKLEN Zeilengrund (.72)
   liest es sich (Gegenstueck zum gruenen Gegenwind), anders als auf dem frueheren
   hellen Glasgrund. */
.arw-tail { color: var(--fc-ifr); font: 700 12.5px/1.3 var(--font-sans); }
.arw-cross { font: 600 12px/1.3 var(--font-sans); color: var(--muted); }
.arw-cross small { font-weight: 500; opacity: .8; }
.arw-cross[data-lvl="mid"]  { color: var(--accent); }
.arw-cross[data-lvl="high"] { color: var(--fc-ifr); }
.arw-note { margin: 16px 0 0; font: 500 13px/1.5 var(--font-sans); color: var(--muted); }
@media (max-width: 560px) {
  .arw-row { gap: 6px 10px; }}

/* Bahnen-Karte: Kompass + Bahn-Ansicht, Partikel-Leinwand */
.arw-ctrls { position: absolute; left: var(--arw-gutter); top: 62px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
/* Optik exakt wie das Instrumentenblatt der Windrose: derselbe Lagune-Verlauf
   (#14708f -> #0e6288 -> #0a415d) und derselbe helle Rand wie die Bezel.
   Icons weiss — nur die Nordnadel bleibt in Akzent-Orange. */
.arw-btn {
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #14708f 0%, #0e6288 58%, #0a415d 100%);
  color: #fff; border: 2px solid #6ba9c4;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}
.arw-btn:hover { filter: brightness(1.18); border-color: #a8e4f7; transform: translateY(-1px); }
.arw-btn svg { stroke-width: 2; }
.arw-btn svg { width: 26px; height: 26px; }
/* „Bahn-Ansicht" nur betonen, wenn die Karte gerade NICHT so steht */
.arw-btn.is-off { border-color: #3c6a80; color: #9fc4d4; }
/* „Karte bewegen" aktiv: Knopf leuchtet, damit klar ist, dass Zoom+Ziehen an ist */
.arw-btn.is-active { border-color: var(--brand-cyan, #5fd0ef); color: #eafaff;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 2px rgba(95,208,239,.35); }
.arw-compass-needle { display: grid; place-items: center; width: 26px; height: 26px; color: var(--accent);
  transition: transform .3s var(--ease); }
.arw-compass-needle svg { width: 26px; height: 26px; }
.arw-btn[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border-radius: 6px; background: rgba(2,12,20,.92); color: #d8f0fb;
  border: 1px solid rgba(95,208,239,.22);
  font: 600 11px/1 var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.arw-btn[data-tooltip]:hover::after { opacity: 1; }
/* Der Dashboard-Knopf traegt gar keinen Tooltip mehr: er schaltet um, und auf
   Touch blieb die Beschriftung nach dem Antippen im Hover-Zustand stehen. */
.arw-btn[data-dash]::after { content: none; }
/* Auf Touch gibt es kein echtes Hover: nach dem Antippen bliebe der Tooltip
   dauerhaft stehen. Dort also gar nicht erst rendern. */
@media (hover: none) {
  .arw-btn[data-tooltip]::after,
  .ap-map-controls .map-btn[data-tooltip]::after { display: none; }
}
/* Partikel liegen ueber der Karten-Canvas, blockieren aber keine Bedienung */
.arw-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ---------- Windrose als Cockpit-Instrument (Lagune) ---------- */
/* Kein Gehaeuse mehr (User 2026-07-19): das Instrument steht frei auf der Karte,
   die Werte darunter in einer eigenen Pille. Schlagschatten haelt die Rose vom
   Kartenhintergrund abgesetzt. */
.arw-rose {
  position: absolute; top: 16px; right: var(--arw-gutter); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0; background: none; border: 0; box-shadow: none;
}
.arw-rose-svg { width: 152px; height: 152px; display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
/* HUD statt Zifferblatt — dieselbe Sprache wie die grosse Rose im Panel:
   kein Verlauf, nur Linienwerk, Eckwinkel, Fadenkreuz-Nabe. */
.arw-corner { fill: none; stroke: var(--brand-cyan); stroke-width: 1.6; opacity: .8; }
.arw-rose-face  { fill: none; stroke: rgba(104,194,227,.55); stroke-width: 1.4; }
.arw-rose-inner { fill: none; stroke: rgba(104,194,227,.22); stroke-width: .8; stroke-dasharray: 2 4; }
.arw-rose-ring, .arw-rose-arrow { transform-origin: 50% 50%; transition: transform .3s var(--ease); }
.arw-ticks line { stroke-linecap: butt; }
.arw-ticks .arw-tick-min { stroke: rgba(168,228,247,.34); stroke-width: .9; }
.arw-ticks .arw-tick-mid { stroke: rgba(168,228,247,.7);  stroke-width: 1.2; }
.arw-ticks .arw-tick-maj { stroke: var(--brand-cyan);     stroke-width: 2; }
.arw-rose-card { fill: var(--brand-cyan); font: 700 11px var(--font-mono); letter-spacing: .06em; }
.arw-rose-n    { fill: #eaf7fc; font-size: 12.5px; }
/* Windvektor wie im Panel: Ring auf der Quellseite, Spitze zur Mitte */
.arw-vec-dot   { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.arw-vec-shaft { stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.arw-vec-head  { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(244,169,50,.7)); }
/* Nabe als Fadenkreuz statt Vollpunkt */
.arw-hub-ring { fill: rgba(4,26,38,.8); stroke: rgba(168,228,247,.6); stroke-width: 1.2; }
.arw-hub-x    { stroke: rgba(168,228,247,.75); stroke-width: 1; }
/* Werte-Pille unter dem Instrument */
.arw-wtxt {
  padding: 5px 12px; border-radius: 4px;
  background: rgba(3,18,28,.34); border: 1px solid rgba(104,194,227,.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 700 12px/1 var(--font-mono); color: #eaf7fc; letter-spacing: .03em; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (max-width: 900px) { .arw-rose-svg { width: 116px; height: 116px; }}
@media (max-width: 560px) {
  .arw-rose { top: 10px; right: 10px; gap: 7px; }
  .arw-rose-svg { width: 78px; height: 78px; }
  .arw-wtxt { font-size: 10.5px; padding: 5px 9px; }}

/* ==========================================================================
   Detailseite: Kopfkasten, Favoriten-Stern, Toast (2026-07-19)
   ========================================================================== */
/* ---------- Kopfkasten: Name+Codes in EINER Zeile, rechts die Uhr ---------- */
.ap-head { align-items: center; gap: 18px; }
.ap-head-main { min-width: 0; }
.ap-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ap-head-name { margin: 0; }
.ap-head-codes { font: 700 14px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.ap-head-codes i { font-style: normal; opacity: .5; margin: 0 3px; }
.ap-head-cat { transform: translateY(-1px); }
.ap-head-sub { margin-top: 6px; }

/* Uhr: drei Zeilen, Ziffern mit fester Breite (tabular-nums), damit die Breite
   beim Sekundenwechsel NIE springt. Tuerkis-Akzent wie die Windrose. */
/* Uhr im HUD-Stil — bewusst SEITENWEIT, nicht nur im Dashboard: eckige
   Klammern statt Fassung, Monospace, feste Ziffernbreite. */
/* HUD-Rahmen: abgeschraegte Ecken (Fase oben-links + unten-rechts) mit
   Tuerkis-Rand und Punktreihen an den eckigen Ecken — Sci-Fi-Anmutung wie das
   Vorbild, in unseren Farben. Rahmen per clip-path (aussen = Randfarbe, innen
   dunkle Fuellung, dazwischen bleibt die 2-px-Kante stehen). */
.ap-clock-box {
  --ch: 12px;                 /* Kantenlaenge der Fase */
  position: relative; flex: none; padding: 2px;   /* = Randstaerke */
  background: linear-gradient(135deg, var(--brand-cyan), #2f8fb0);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  filter: drop-shadow(0 0 5px rgba(104,194,227,.4));
  font-family: var(--font-mono);
}
.ap-clock-inner {
  --ch: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 22px;
  /* Weisses Glas statt dunkler Fuellung — leichter, Tuerkis-Schrift traegt */
  background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
/* Punktreihen diagonal: oben-rechts + unten-links (die eckigen Ecken) */
.ap-clock-box::before, .ap-clock-inner::after {
  content: ""; position: absolute; z-index: 2; height: 4px; width: 26px;
  background: radial-gradient(circle, #2f8fb0 42%, transparent 46%);
  background-size: 7px 4px; background-repeat: repeat-x; pointer-events: none;
}
.ap-clock-box::before { top: 8px; right: 13px; }
.ap-clock-inner::after { bottom: 8px; left: 13px; }
.ap-clock-date { font: 600 11px/1.2 var(--font-mono); color: #0f6a82;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ap-clock-time { font: 700 clamp(20px, 2.6vw, 26px)/1.1 var(--font-mono); color: #0d6379;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ap-clock-lbl { font: 700 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  color: #156b83; }

/* Favoriten-Stern: nur das Symbol, direkt hinter dem Namen */
.ap-fav-star {
  flex: none; display: inline-grid; place-items: center; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  transition: color .16s ease, border-color .16s ease, transform .16s ease, background .16s ease;
}
.ap-fav-star svg { width: 17px; height: 17px; }
.ap-fav-star:hover { border-color: #f6b73c; color: #f6b73c; transform: scale(1.08); }
.ap-fav-star.is-on { color: #f6b73c; border-color: #f6b73c; background: color-mix(in srgb, #f6b73c 18%, transparent); }
/* „Klick mich": einmaliges Zwinkern nach 5 s, wenn noch kein Favorit */
.ap-fav-star.is-hint { animation: apStarHint 1.3s ease-in-out 2; }
@keyframes apStarHint {
  0%, 100% { color: #fff; border-color: rgba(255,255,255,.5); transform: scale(1); }
  50%      { color: #f6b73c; border-color: #f6b73c; transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .ap-fav-star.is-hint { animation: none; }}

@media (max-width: 640px) {
  .ap-head { grid-template-columns: 1fr; }
  /* Nur die Ausrichtung aendert sich mobil — die 2px sind die Rahmenstaerke,
     die darf NICHT ueberschrieben werden (sonst wird der HUD-Rand fett). */
  .ap-clock-box { align-self: flex-start; padding: 2px; }
  .ap-clock-inner { padding: 7px 18px; }}
/* gespeichert: Stern gefüllt in Gold, Pille warm getönt */
.ap-fav-lg.is-on {
  color: #f6b73c;
  background: color-mix(in srgb, #f6b73c 16%, transparent);
  border-color: color-mix(in srgb, #f6b73c 55%, transparent);
}
.ap-fav-lg.is-on:hover { background: color-mix(in srgb, #f6b73c 24%, transparent); }

/* Kurze Rückmeldung nach dem Klick */
.ap-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 1000; pointer-events: none;
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: rgba(9,52,72,.96); border: 1px solid rgba(127,212,238,.45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  color: #eaf7fc; font: 600 13.5px/1 var(--font-sans);
  opacity: 0; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.ap-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.ap-toast.is-on { border-color: color-mix(in srgb, #f6b73c 60%, transparent); color: #ffe2ac; }
@media (prefers-reduced-motion: reduce) { .ap-toast { transition: opacity .01s; }}

/* Auf schmalen Schirmen wird die Zeile zweizeilig und kollidiert oben mit
   Controls UND Windrose — daher dort an den unteren Kartenrand, wo nichts liegt. */
@media (max-width: 560px) {
  .arw-lead {
    top: auto; bottom: 10px; left: 10px; right: 10px; max-width: none;
    font-size: 11px; line-height: 1.3; padding: 6px 11px; text-align: center;
  }
  .arw-ctrls { top: 10px; left: 10px; }
}

/* ==========================================================================
   Live-Dashboard — Karte vollflaechig, Instrumente als Overlay
   Die Anzeigen bekommen KEINE Kaesten mehr; Lesbarkeit ueber der Karte kommt
   aus einem weichen Schleier an den Raendern (--dash-scrim) plus Textschatten.
   Der Schleier ist die Stellschraube: hoeher = lesbarer, niedriger = mehr Karte.
   ========================================================================== */
.ap-dash-on, .ap-dash-on body { overflow: hidden; }
/* Der Header ist `sticky` und haengt damit am Rollbereich der Seite. Den legt
   das `overflow: hidden` darueber still — bei gescrollter Seite blieb der
   Header dann dort stehen, wo er im Dokument sitzt: ganz oben, ausserhalb des
   Bildes. Im Dashboard deshalb `fixed`, dann klebt er unabhaengig vom
   Rollstand am oberen Rand. Der Inhalt dahinter ist ohnehin verdeckt, das
   Herausfallen aus dem Textfluss faellt also nicht auf. */
.ap-dash-on .site-header { position: fixed; top: 0; left: 0; right: 0; }
.ap-dash {
  --dash-scrim: .58;
  /* Die Panel-Tinte MUSS hier wiederholt werden: sie ist auf .ap-cockpit
     definiert, und das Dashboard leiht sich die Instrumente von dort aus.
     Ausserhalb des Cockpits waeren die Variablen undefiniert — `fill`/`color`
     fielen dann auf den geerbten dunklen Wert zurueck und Temperatur und
     Taupunkt waren auf der dunklen Karte praktisch unlesbar. */
  --ap-ink:     #eaf7fc;
  --ap-ink-mut: rgba(168,228,247,.72);
  /* Site-Header (Logo + Menue) bleibt SICHTBAR: das Overlay beginnt darunter und
     liegt unter dessen z-index (Header 1200, Quick-Menue 1230). Deshalb auch
     KEINE Fullscreen-API — die wuerde den Header mit ausblenden. */
  position: fixed; top: var(--header-height, 86px); left: 0; right: 0; bottom: 0;
  z-index: 1100; background: #062a3e; color: #eaf7fc;
}
.ap-dash[hidden] { display: none; }
.ap-dash-body { position: absolute; inset: 0; }

/* Karte fuellt alles, der Rest liegt darauf */
.ap-dash-map { position: absolute; inset: 0; }
.ap-dash-map > #arw-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Kopfzeile als Overlay */
.ap-dash-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 18px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(3,18,28,var(--dash-scrim)), transparent);
}
.ap-dash-bar > * { pointer-events: auto; }
.ap-dash-id { min-width: 0; flex: 1 1 auto; }
.ap-dash-id .ap-head {
  margin: 0; background: none; border: 0; box-shadow: none; padding: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.ap-dash-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.ap-dash-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 4px;
  border: 1px solid rgba(104,194,227,.45); background: rgba(3,18,28,.6);
  font: 700 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ap-ink-mut);
}
.ap-dash-live i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--fc-vfr); box-shadow: 0 0 8px var(--fc-vfr); }
/* Kein Blinken: eine Seite, die stundenlang offensteht, darf nichts dauerhaft
   animieren. Der Ruhezustand wird ueber die Farbe gezeigt. */
.ap-dash-live.is-idle i { background: var(--ap-ink-mut); box-shadow: none; }

.ap-dash-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
  background: rgba(3,18,28,.6); border: 1px solid rgba(104,194,227,.45); color: #eaf7fc;
}
.ap-dash-close:hover { border-color: var(--brand-cyan); }
.ap-dash-close svg { width: 20px; height: 20px; }

/* Schienen: schweben ueber der Karte, nur ein Randschleier traegt die Lesbarkeit */
.ap-dash-rail {
  /* Startet unter der Kopfzeile; deren Hoehe misst das Skript (--dash-bar-h),
     weil sie mit Namenslaenge und Fensterbreite variiert. */
  position: absolute; top: calc(var(--dash-bar-h, 74px) + 8px); bottom: 16px; z-index: 4; width: min(340px, 30vw);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 16px; padding: 6px 12px 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.ap-dash-left  { left: 0;  background: linear-gradient(to right, rgba(3,18,28,var(--dash-scrim)), transparent); }
.ap-dash-right { right: 0; width: min(370px, 32vw);
  background: linear-gradient(to left, rgba(3,18,28,var(--dash-scrim)), transparent); }

/* Mapcontrols unten links */
.ap-dash-tray { position: absolute; left: 14px; bottom: 16px; z-index: 5; }
.ap-dash-tray .arw-ctrls { position: static; }

/* Kompass unten rechts statt oben — oben sitzt jetzt die Kopfzeile */
/* Auf dem Schirm ist der Karten-Kompass ueberfluessig: dort steht links die
   grosse Rose mit den Bahnen und sagt dasselbe genauer. Mobil ist die grosse
   Rose ausgeblendet — dann uebernimmt dieser Kompass wieder (siehe unten). */
.ap-dash-map .arw-rose { display: none; }

/* --- Kaesten weg: die Anzeigen liegen frei auf der Karte --- */
.ap-dash .ap-inst,
.ap-dash .ap-vis,
.ap-dash .ap-wc,
.ap-dash .ap-metar-raw,
.ap-dash .ap-thermo-sp {
  background: none; border-color: transparent; box-shadow: none;
}
.ap-dash .ap-inst { padding: 4px 0; }
.ap-dash .ap-vis { padding: 0; }
.ap-dash .ap-wc { padding: 2px 0; }
.ap-dash .ap-metar-raw { padding: 0; font-size: 11px; }
/* Die Klassenfelder des Sichtbands bleiben sichtbar — sie SIND die Aussage */
.ap-dash .ap-vis-seg { background: rgba(3,18,28,.45); }
/* Bahnauswahl behaelt ihren Rahmen: sie ist bedienbar und braucht Trefferflaeche */
.ap-dash .ap-rwy-grp { background: rgba(3,18,28,.5); }

.ap-dash .ap-instpanel { grid-template-columns: 1fr; gap: 14px; }
.ap-dash .ap-instpanel .ap-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-dash .ap-thermo { align-self: center; }
/* Die Rose dreht als Ganzes (Teilung, Buchstaben, Bahn, Windpfeil) — genau wie
   zuvor der Ring des Karten-Kompasses. Weich, damit die Drehung der Karte
   folgt statt zu springen. */
/* Gedreht braucht ein Quadrat das 1,414-fache seiner Kante (Diagonale). Bei
   voller Schienenbreite ragte die Rose deshalb seitlich heraus und die Schiene
   bekam eine waagerechte Bildlaufleiste. 68 % lassen die Diagonale sicher
   hineinpassen (0,68 × 1,414 = 0,96). */
.ap-dash .wr { width: 68%; transform-origin: 50% 50%; transition: transform .3s var(--ease); }
/* Sicherheitsnetz: die Schiene rollt nur senkrecht. Steht `overflow-y: auto`
   allein, macht der Browser die Waagerechte automatisch mit — genau das war
   die Bildlaufleiste. */
.ap-dash-rail { overflow-x: clip; }
.ap-dash .ap-decode-row { display: none; }

/* Schmale Fenster: Schienen werden zu Streifen oben und unten */
/* Mobil: die Karte fuellt die volle Flaeche (kein Stapel-Layout mehr), die
   Instrumente liegen als schmale Schiene darauf. Uhr und Windrose entfallen
   hier bewusst — auf dem Handy zaehlt die Karte. */
@media (max-width: 1000px) {
  .ap-dash-right { width: min(300px, 78vw); }
}
/* Kompakte Temperatur in der Leiste — nur mobil (desktop zeigt das Thermometer) */
/* HUD-Eckwinkel als vier Farbverlaufs-Ebenen statt Rahmen — so bleiben die
   Kanten offen, dieselbe Sprache wie die Eckwinkel der Windrose. */
.ap-dash-temp { display: none; color: #eaf7fc; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  --hud-c: rgba(95,208,239,.8); --hud-l: 11px; --hud-w: 1.6px;
  padding: 9px 13px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--hud-c), var(--hud-c)), linear-gradient(var(--hud-c), var(--hud-c)),
    linear-gradient(var(--hud-c), var(--hud-c)), linear-gradient(var(--hud-c), var(--hud-c)),
    linear-gradient(var(--hud-c), var(--hud-c)), linear-gradient(var(--hud-c), var(--hud-c)),
    linear-gradient(var(--hud-c), var(--hud-c)), linear-gradient(var(--hud-c), var(--hud-c));
  background-size:
    var(--hud-l) var(--hud-w), var(--hud-w) var(--hud-l),   /* oben links */
    var(--hud-l) var(--hud-w), var(--hud-w) var(--hud-l),   /* oben rechts */
    var(--hud-l) var(--hud-w), var(--hud-w) var(--hud-l),   /* unten links */
    var(--hud-l) var(--hud-w), var(--hud-w) var(--hud-l);   /* unten rechts */
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
.ap-dash-temp b     { display: block; font: 700 26px/1 var(--font-mono); }
.ap-dash-temp span  { display: block; margin-top: 4px; font: 600 11px/1 var(--font-mono);
  letter-spacing: .05em; color: rgba(234,247,252,.72); }

/* Beobachtungszeit — in beiden Groessen sichtbar, damit ein Screenshot des
   Dashboards einordenbar bleibt. */
.ap-dash-lead { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ap-dash-when { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .04em;
  color: rgba(234,247,252,.62); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.ap-dash-when-k { font: 600 10px/1.4 var(--font-sans); text-transform: uppercase;
  letter-spacing: .07em; color: rgba(234,247,252,.5); }
.ap-dash-temp + .ap-dash-when { margin-top: 5px; }
/* Unter der Rohmeldung in der rechten Schiene: dort bezieht sie sich sichtbar
   auf den METAR darueber. */
.ap-metar-raw + .ap-dash-when { margin-top: 7px; }

@media (max-width: 640px) {
  .ap-dash .ap-clock-box { display: none; }   /* Uhr mobil weg */
  .ap-dash-left { display: none; }            /* Windrose mit Piste mobil weg */
  .ap-dash-live { display: none; }            /* „LIVE"-Pille mobil weg */
  .ap-dash-id { display: none; }              /* Flughafenname steht schon in der Titelleiste */
  .ap-dash-temp { display: block; }           /* dafuer die Temperatur oben links */
  .ap-dash-when { font-size: 11px; }
  .ap-dash-right { width: min(280px, 82vw); top: auto; bottom: 12px; max-height: 52vh; }
  .ap-dash-bar { padding: 10px 12px; }
  .ap-dash-close { display: none; }           /* Ausstieg laeuft ueber den Mapcontrol-Knopf */
  /* Kompass nach oben rechts — Werte zuerst, Rose darunter (im Markup umgekehrt) */
  /* Rose auf Hoehe der Temperatur; z-index ueber den Leisten-Verlauf, sonst
     wuerde der Schleier sie eintrueben. */
  .ap-dash-map .arw-rose { display: flex; top: 10px; right: 12px; bottom: auto; z-index: 6;
    flex-direction: column-reverse; }
  /* Thermometer entfaellt: Temperatur und Taupunkt stehen jetzt oben links */
  .ap-dash-right .ap-thermo { display: none; }
  .ap-dash-right .ap-dials { display: none; }      /* Druck + Luftfeuchte mobil raus */
  .ap-dash-right .ap-metar-raw { display: none; }  /* Rohmeldung mobil raus */
}

/* ---------- Seiten-Suche (Topbar der Detailseite) ---------- */
.ap-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-pagesearch {
  position: relative; margin-left: auto; flex: 0 1 320px; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--ap-card-bg); border: 1px solid var(--ap-card-line);
}
.ap-pagesearch:focus-within { border-color: var(--brand-cyan); }
.ap-ps-ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
.ap-pagesearch input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font: 500 14px/1.2 var(--font-sans);
}
.ap-pagesearch input::placeholder { color: var(--muted); }
/* Autocomplete-Dropdown teilt sich die Stile der Landing (.ap-ac ...), nur
   an die Topbar-Breite angepasst. */
.ap-pagesearch .ap-ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface, #fff); border: 1px solid var(--ap-card-line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  overflow: hidden; display: none;
}
.ap-pagesearch .ap-ac.is-open { display: block; }
.ap-pagesearch .ap-ac-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; cursor: pointer; border-top: 1px solid var(--line);
}
.ap-pagesearch .ap-ac-item:first-child { border-top: 0; }
.ap-pagesearch .ap-ac-item:hover, .ap-pagesearch .ap-ac-item.is-active { background: var(--accent-soft-bg); }
.ap-pagesearch .ap-ac-item b { font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.ap-pagesearch .ap-ac-item small { display: block; font: 500 11px/1.3 var(--font-sans); color: var(--muted); }
.ap-pagesearch .ap-ac-code { font: 700 12px/1 var(--font-mono); color: var(--brand-cyan); white-space: nowrap; }
@media (max-width: 560px) { .ap-pagesearch { flex-basis: 100%; margin-left: 0; }}

/* ---------- Info-Panel (Flughafen-Stammdaten) ---------- */
/* Kennungen als Pillen im Kopf */
.ap-info-codes { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-info-code {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 32%, transparent);
  font: 700 16px/1 var(--font-mono); letter-spacing: .04em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ap-info-code b { font: 700 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em;
  color: var(--brand-cyan); }
.ap-info-rows { display: flex; flex-direction: column; }
.ap-info-row { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.ap-info-row:first-child { border-top: 0; }
.ap-info-ico { width: 17px; height: 17px; color: var(--brand-cyan); opacity: .85; }
.ap-info-k { font: 600 12px/1.3 var(--font-sans); color: var(--muted); }
.ap-info-v { font: 600 13px/1.3 var(--font-sans); color: var(--text); text-align: right;
  word-break: break-word; }
.ap-info-v.ap-info-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Pisten-Panel ---------- */
.ap-rwy-lead { font: 500 13px/1.5 var(--font-sans); color: var(--text); margin: 0 0 12px; }
.ap-rwy-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.ap-rwy-item:first-of-type { border-top: 0; }
.ap-rwy-item.is-closed { opacity: .55; }
.ap-rwy-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 62px; padding: 10px 8px; border-radius: 999px;
  border: 2px solid var(--brand-cyan); color: var(--text);
  font: 700 14px/1 var(--font-mono); letter-spacing: .02em;
}
.ap-rwy-badge i { color: var(--muted); font-style: normal; margin: 0 1px; }
.ap-rwy-facts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-rwy-facts > span { font: 600 13px/1.4 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-rwy-facts b { font: 600 11px/1 var(--font-sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-right: 6px; }
.ap-rwy-facts small { color: var(--muted); }
.ap-rwy-meta { color: var(--muted) !important; font: 500 12px/1.4 var(--font-sans) !important; }

/* ---------- Text-Beobachtung ---------- */
.ap-obstext p { margin: 0; font: 400 14px/1.7 var(--font-sans); color: var(--text); }
.ap-obstext-lead { font-weight: 700; }

/* ---------- Fussnoten (Datenumfang + Haftung) ---------- */
.ap-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.ap-foot p { display: flex; gap: 8px; margin: 0 0 8px;
  font: 500 11.5px/1.6 var(--font-sans); color: var(--muted); max-width: 100ch; }
.ap-foot p:last-child { margin-bottom: 0; }
.ap-foot a { color: var(--brand-cyan); text-decoration: none; }
.ap-foot a:hover { text-decoration: none; }

/* ---------- Sonne & Tageslicht ----------
   Kein eigenes CSS mehr: die Karte (.ap-sun) enthaelt die geteilte Komponente
   MeteoSunPath, die ihre Stile aus css/components/sun-path.css (.msp-*) mitbringt.
   Der frühere Eigenbau (Tagesbogen .ap-sun-arc/.ap-arc-*, Zeilen .ap-sun-row …)
   ist mit der Umstellung 2026-07-22 entfallen. */

/* ---------- Dichte- & Druckhöhe ---------- */
.ap-da-main { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ap-da-big { font: 700 clamp(26px, 5vw, 34px)/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-da-big small { font-size: 15px; color: var(--muted); margin-left: 6px; }
.ap-da-lbl { font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-cyan); }
.ap-da-rows { display: flex; flex-direction: column; }
.ap-da-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--font-sans); color: var(--muted); }
.ap-da-row:first-child { border-top: 0; }
.ap-da-row b { font: 700 13px/1.3 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-da-row b small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.ap-da-hint { margin: 12px 0 0; font: 500 11.5px/1.5 var(--font-sans); color: var(--muted); }

/* ---------- Kurzverlauf (Sparklines) ---------- */
.ap-trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .ap-trend-grid { grid-template-columns: 1fr; gap: 18px; }}
.ap-trend-col { min-width: 0; }
.ap-trend-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ap-trend-lbl { font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ap-trend-cur { font: 700 18px/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-spark-wrap { position: relative; }
.ap-spark { width: 100%; height: 46px; display: block; overflow: visible; cursor: crosshair; }
/* Fadenkreuz-Cursor + Tooltip beim Ueberfahren der Sparkline */
.ap-spark-cursor { position: absolute; top: 0; bottom: 0; width: 1px; display: none;
  background: color-mix(in srgb, var(--brand-cyan) 60%, transparent); pointer-events: none; }
.ap-spark-tip { position: absolute; bottom: calc(100% + 6px); display: none; pointer-events: none;
  white-space: nowrap; padding: 4px 8px; border-radius: 6px; z-index: 20;
  background: var(--surface); border: 1px solid var(--brand-cyan);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.ap-spark-tip b { font: 700 12px/1.2 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-spark-tip i { display: block; font: 600 10px/1.2 var(--font-mono); color: var(--muted); font-style: normal; }
.ap-spark-line { fill: none; stroke: var(--brand-cyan); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ap-spark-area { fill: color-mix(in srgb, var(--brand-cyan) 12%, transparent); stroke: none; }
.ap-spark-dot { fill: var(--brand-cyan); }
.ap-trend-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px;
  font: 600 11px/1.3 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-trend-tend { font: 700 11px/1 var(--font-sans); }
.ap-trend-tend.is-up { color: var(--fc-ifr); }
.ap-trend-tend.is-down { color: var(--brand-cyan); }
.ap-trend-tend.is-steady { color: var(--muted); }

/* ---------- Kurzporträt (Fakten-Fliesstext, SEO) ---------- */
.ap-overview p { margin: 0; font: 400 14.5px/1.75 var(--font-sans); color: var(--text); max-width: 92ch; }

/* Flughafenname hinter dem METAR-Kartentitel — normale Schreibweise statt
   Versalien, damit er sich vom Label absetzt. */
.ap-obs-airport { text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--ap-ink); }

/* ---------- Mobil-Härtung Cockpit (2026-07-22) ----------
   Schmale Schirme: Thermometer über die Instrumente, Luftdruck und Luftfeuchte
   untereinander, Gegen-/Seitenwind gestapelt. Ohne das standen Thermometer +
   2 Rundinstrumente nebeneinander (~410 px) und liefen aus dem Bild. */
@media (max-width: 640px) {
  .ap-instpanel { grid-template-columns: 1fr; }
  /* Zwingend zuruecksetzen: das Panel hat hier nur EINE Spalte, `grid-column: 2`
     wuerde eine zweite, implizite Spalte aufmachen und die Sicht neben statt
     unter die Zifferblaetter setzen. */
  .ap-instpanel .ap-vis { grid-column: auto; }
  .ap-instpanel .ap-thermo { grid-row: auto; }
  .ap-instpanel .ap-dials { grid-template-columns: 1fr; }
  .ap-wind-comp { grid-template-columns: 1fr; }
  /* Windrose mobil zuruecknehmen: 360px sind auf einem 375px-Schirm praktisch
     volle Breite und wirken erschlagend. */
  .wr { max-width: 250px; }
  .ap-wind-hdg { padding: 4px 15px; }
  .ap-wind-hdg-v { font-size: 27px; }
}

/* ============ Veraltete Meldung ============
   Bernstein, nicht Alarmrot: Ein grosser Teil der Faelle sind keine Stoerungen,
   sondern geschlossene Plaetze. Rot liesse die Seite kaputt wirken, obwohl
   alles normal ist. */
.ap-stale-note {
  margin: 0 0 16px; padding: 13px 15px; border-radius: 10px;
  background: color-mix(in srgb, #e0a13a 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0a13a 34%, transparent);
}
.ap-stale-head { font: 700 13.5px/1.35 var(--font-sans); color: var(--text); }
.ap-stale-txt  { margin: 5px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--muted); max-width: 62ch; }
.ap-stale-plain { display: inline-block; margin-top: 9px; font: 500 12.5px/1.4 var(--font-sans); color: var(--muted); }
.ap-stale-go {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 10px; padding: 8px 13px; border-radius: 8px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  font: 500 13px/1.4 var(--font-sans); color: var(--text);
}
.ap-stale-go:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ap-stale-go b { font-weight: 700; }
.ap-stale-meta  { font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.ap-stale-arrow { font: 600 12px/1 var(--font-sans); color: var(--accent); }

/* Kennzeichnung an den abgeleiteten Werten — sie sehen konkret aus und sind
   deshalb bei alten Daten besonders irrefuehrend. */
.ap-stale-chip {
  margin-left: 8px; padding: 2px 7px; border-radius: 4px; vertical-align: middle;
  background: color-mix(in srgb, #e0a13a 16%, transparent);
  color: color-mix(in srgb, #a86c10 88%, var(--text));
  font: 700 10px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.ap-age.is-stale { color: color-mix(in srgb, #a86c10 88%, var(--text)); font-weight: 700; }
/* Flugkategorie im Kopf: sie ist aus der alten Meldung abgeleitet. */
.ap-stale .ap-head-cat { opacity: .55; filter: saturate(.5); }

/* ============ FlugWetter 404 ============
   Kein eigenes Bild: der Radarschirm ist die Bildsprache der Sektion
   (.radar-scope liefert Ringe, Fadenkreuz und Sweep als Hintergrund). */
/* Der Radarschirm liegt auf dem <body> (Klasse .radar-scope), nicht mehr im
   Kasten — zwei uebereinander waeren Unruhe. Dafuer muss die Seite dunkel sein,
   sonst traegt das cyanfarbene Linienwerk nicht. */
.ap-404 { padding: 30px 0 70px; }
.ap-404-box {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(min(100%, 240px), 320px) minmax(0, 1fr);
  gap: 26px 34px; align-items: center;
  padding: 34px 32px; border-radius: var(--radius);
  background: linear-gradient(160deg, #14708f 0%, #0e6288 58%, #0a415d 100%);
  border: 1px solid #6ba9c4; box-shadow: 0 16px 40px rgba(0,0,0,.34);
  color: #eaf7fc;
}
.ap-404-art { position: relative; z-index: 1; }
.ap-404-art svg { width: 100%; height: auto; display: block; color: var(--brand-cyan); }
.ap404-rings circle { fill: none; stroke: rgba(104,194,227,.34); stroke-width: 1.1; }
.ap404-cross line   { stroke: rgba(104,194,227,.22); stroke-width: 1; stroke-dasharray: 3 5; }
.ap404-track { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 6; }
.ap404-plane { fill: #eaf7fc; }
/* Der abgesetzte Kreis rechts: das Ziel ist aus der Erfassung heraus. */
.ap404-lost circle { fill: none; stroke: var(--fc-ifr); stroke-width: 1.4; opacity: .75; }
.ap404-lost circle:last-child { stroke-dasharray: 4 5; opacity: .45; }

.ap-404-txt { position: relative; z-index: 1; min-width: 0; }
.ap-404-kicker {
  display: inline-block; margin-bottom: 9px; padding: 3px 9px; border-radius: 4px;
  background: rgba(3,18,28,.4); border: 1px solid rgba(104,194,227,.35);
  font: 700 10.5px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  color: rgba(168,228,247,.9);
}
.ap-404-lead { margin: 0 0 20px; font: 400 14.5px/1.65 var(--font-sans); color: rgba(234,247,252,.86); max-width: 62ch; }
.ap-404-lead code {
  font: 700 13.5px/1 var(--font-mono); padding: 2px 6px; border-radius: 4px;
  background: rgba(3,18,28,.42); color: #fff;
}
.ap-404-try { margin: 18px 0 8px; font: 600 12px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: .07em; color: rgba(168,228,247,.75); }
.ap-404 .ap-hero-chips { margin: 0; }
.ap-404-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }
.ap-404-links a { font: 600 13px/1.4 var(--font-sans); color: #a8e4f7; text-decoration: none; }
.ap-404-links a:hover { color: #fff; text-decoration: none; }

@media (max-width: 760px) {
  .ap-404-box { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 18px; }
  /* Die Grafik ist Beiwerk — auf schmalen Schirmen kleiner und oben mittig. */
  .ap-404-art { max-width: 260px; margin: 0 auto; }
}

/* Sortierbare Spaltenköpfe der Länderliste */
.ap-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ap-th-sort:hover { color: var(--accent); }
.ap-th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ap-th-sort.is-sort { color: var(--accent); }
/* Feste Breite: der Pfeil darf die Spalte beim Umschalten nicht springen lassen */
.ap-th-arrow { display: inline-block; width: 1em; margin-left: 3px; font-size: 9px; vertical-align: 1px; }

/* ============ Wolkensäule ============
   Sitzt im Cockpit-Panel, erbt also dessen helle Tinte (--ap-ink*). */
.ap-cloudbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(104,194,227,.22); }
.ap-cloudbox-h { font: 700 10.5px/1 var(--font-sans); text-transform: uppercase;
  letter-spacing: .09em; color: var(--ap-ink-mut); margin-bottom: 9px; }
.ap-cloudbox-in { display: grid; grid-template-columns: minmax(min(100%, 170px), 250px) minmax(0, 1fr);
  gap: 10px 30px; align-items: start; }
.ap-cloudbox-txt { min-width: 0; }
.ap-cloudbox-in .ap-clouds { margin-top: 0; }

.ap-cloudcol svg { width: 100%; height: auto; display: block; overflow: visible; }
.cc-grid   { stroke: rgba(168,228,247,.16); stroke-width: 1; stroke-dasharray: 2 4; }
.cc-ground { stroke: rgba(168,228,247,.55); stroke-width: 1.4; }
.cc-gridlbl { fill: var(--ap-ink-mut); font: 600 8.5px var(--font-mono); }
.cc-ground-lbl { fill: var(--ap-ink-mut); font: 600 8px var(--font-sans);
  text-transform: uppercase; letter-spacing: .06em; }
/* Hauptwolkenuntergrenze: die eine Linie, auf die es fliegerisch ankommt */
.cc-ceil { stroke: var(--fc-ifr); stroke-width: 1.4; stroke-dasharray: 5 3; opacity: .9; }

/* Acht Felder je Schicht — gefüllt wird die gemeldete Achtel-Zahl */
.cc-cell { fill: none; stroke: rgba(168,228,247,.3); stroke-width: .8; }
.cc-cell.is-on { fill: rgba(168,228,247,.32); stroke: rgba(168,228,247,.6); }
.cc-layer[data-cover="BKN"] .cc-cell.is-on,
.cc-layer[data-cover="OVC"] .cc-cell.is-on { fill: rgba(234,247,252,.62); stroke: #eaf7fc; }
.cc-lbl { fill: #eaf7fc; font: 700 9px var(--font-mono); letter-spacing: .02em; }
.cc-val { fill: var(--ap-ink-mut); font: 600 8.5px var(--font-mono); }
.cc-type { fill: var(--fc-ifr); font-weight: 800; }

.cc-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.cc-key { display: inline-flex; align-items: center; gap: 5px;
  font: 600 10px/1.4 var(--font-sans); color: var(--ap-ink-mut); }
.cc-key::before { content: ""; width: 12px; height: 2px; background: var(--fc-ifr); flex: none; }
.cc-key--cb::before { height: 8px; width: 3px; }
.cc-note { margin: 6px 0 0; font: 400 10.5px/1.45 var(--font-sans); color: var(--ap-ink-mut); max-width: 44ch; }

@media (max-width: 640px) {
  .ap-cloudbox-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ap-cloudcol { max-width: 260px; }
}

/* Wettererscheinung: Rohcode + Klartext nebeneinander */
.ap-wx-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.ap-wx-txt { font: 600 13px/1.4 var(--font-sans); color: #eaf7fc; }

/* Klima-Abschnitt: deutlich Luft zum Fussnoten-Block darueber */
.ap-climate-sec { margin-top: 40px; }
.ap-climate-sec .ap-sec-h { margin-bottom: 14px; }
@media (max-width: 640px) { .ap-climate-sec { margin-top: 30px; } }

/* ---------- Verweis auf die 3D-Livekarte (nur Malaga, siehe detail.php) ----------
   Steht in der Kopfzeile neben dem Zurueck-Verweis. Bewusst auffaellig: es ist
   die einzige Seite der Sektion, die echte Flugbewegungen zeigt. */
.ap-livecta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--font-sans); text-decoration: none;
  color: var(--accent-ink); background: var(--accent);
  padding: 9px 15px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.ap-livecta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.ap-livecta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ap-livecta svg { width: 17px; height: 17px; }
.ap-livecta-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ffffff;
  animation: ap-livecta-puls 2.2s var(--ease) infinite;
}
@keyframes ap-livecta-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ap-livecta-dot { animation: none; } }


/* ============ Werbung + Premium-Banner (FlugWetter) ============
   .ap-monetize gruppiert Werbeslot + Premium-Banner mit Abstand nach oben.
   .ads-slot (aus inc/ad_slot.php) bekommt hier seine Optik; leere Slots klappt
   ad_collapse_assets() selbst ein. */
.ap-monetize { margin: 36px auto 0; display: flex; flex-direction: column; gap: 16px; }
.ap-monetize:empty { display: none; }
.ads-slot {
  display: block; margin: 0; padding: 12px 14px; position: relative;
  border: 1px dashed var(--line); border-radius: var(--radius); text-align: center;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.ads-label {
  display: block; font: 600 9px/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ads-slot .adsbygoogle { display: block; }