/* ============================================================
   traveLOG — persönliches Flug- & Reiselogbuch
   Design: Navigationskarte bei Nacht + ATC-Flugstreifen
   ============================================================ */

:root{
  --ink:        #05101a;
  --ink-2:      #081826;
  --panel:      #0b1e2b;
  --panel-2:    #0f2735;
  --line:       #16394b;
  --line-soft:  #102b3a;
  --sea:        #071a26;
  --land:       #11303f;
  --land-hi:    #16455c;
  --route:      #ff9a2e;
  --route-dim:  #a35c14;
  --visit:      #37d9a8;
  --visit-dim:  #1a7a60;
  --text:       #d9e9f1;
  --text-2:     #8fb0c0;
  --muted:      #5c7c8d;
  --danger:     #ff6b6b;
  /* Eigene Töne für Flächen, die sich vom Grund abheben sollen */
  --hdr:        rgba(5,16,26,.94);
  --band:       #0a2130;
  --band-2:     #0d2a3c;
  --app-1:      #0d2c3d;
  --app-2:      #0a2333;
  /* Schrift auf den Akzentflächen. Auf hellen Welten ist der Akzent
     dunkel, dort muss die Schrift hell sein. */
  --on-route:   #1a0d00;
  --on-visit:   #00251a;

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r: 3px;
}

/* ═══════════════ Farbwelten ═══════════════
   Jede Welt tauscht nur die Farbwerte, nicht die Struktur. Deshalb gilt
   sie überall zugleich — Tabellen, Diagramme, Karten und Stecknadeln
   greifen alle auf dieselben Variablen zu. */

/* Nachtblau mit Bernstein — die Ausgangsfarben */
#app[data-thema="nacht"]{ }

/* Kohle: neutral grau, das Orange bleibt der einzige Akzent */
#app[data-thema="kohle"]{
  --ink:#0d0d0f; --ink-2:#141417; --panel:#1a1a1e; --panel-2:#212127;
  --line:#33333b; --line-soft:#25252b;
  --sea:#111114; --land:#26262d; --land-hi:#34343d;
  --route:#ff8c42; --route-dim:#a3521f;
  --visit:#5ecfa0; --visit-dim:#2e7a5e;
  --text:#e8e8ea; --text-2:#a3a3ad; --muted:#6e6e7a;
  --hdr:rgba(13,13,15,.94); --band:#1a1a1e; --band-2:#212127; --app-1:#212127; --app-2:#1a1a1e;
}

/* Kupfer: warm, gedeckt, Rotbraun statt Blau */
#app[data-thema="kupfer"]{
  --ink:#140f0c; --ink-2:#1d1613; --panel:#251c17; --panel-2:#30251e;
  --line:#4a382c; --line-soft:#332821;
  --sea:#1a1310; --land:#33251c; --land-hi:#4a3527;
  --route:#f5a25d; --route-dim:#9c6230;
  --visit:#7fbf8f; --visit-dim:#3f6b4a;
  --text:#f0e3d7; --text-2:#c2a894; --muted:#8a7261;
  --hdr:rgba(20,15,12,.94); --band:#251c17; --band-2:#30251e; --app-1:#30251e; --app-2:#251c17;
}

/* Tiefsee: blaugrün, kühl, hoher Kontrast */
#app[data-thema="tiefsee"]{
  --ink:#04141a; --ink-2:#07202a; --panel:#0a2a36; --panel-2:#0e3644;
  --line:#17505f; --line-soft:#0f3d4b;
  --sea:#05191f; --land:#0f3c48; --land-hi:#175666;
  --route:#ffd166; --route-dim:#a3832f;
  --visit:#2ec4b6; --visit-dim:#177d74;
  --text:#dcf0f2; --text-2:#8fbcc2; --muted:#5b8c93;
  --hdr:rgba(4,20,26,.94); --band:#0a2a36; --band-2:#0e3644; --app-1:#0e3644; --app-2:#0a2a36;
}

/* Purpur: dunkelviolett mit Magenta */
#app[data-thema="purpur"]{
  --ink:#100c18; --ink-2:#181022; --panel:#20172e; --panel-2:#2a1e3b;
  --line:#3f2d57; --line-soft:#2e2140;
  --sea:#140f1e; --land:#2a1f3c; --land-hi:#3d2d55;
  --route:#ff7bc4; --route-dim:#a34b7c;
  --visit:#8b7bff; --visit-dim:#4f45a3;
  --text:#ece4f5; --text-2:#b3a4c9; --muted:#7d6f94;
  --hdr:rgba(16,12,24,.94); --band:#20172e; --band-2:#2a1e3b; --app-1:#2a1e3b; --app-2:#20172e;
}

/* Papier: hell, für Tageslicht und zum Ausdrucken */
#app[data-thema="papier"]{
  --ink:#f4f1ea; --ink-2:#ebe7dd; --panel:#ffffff; --panel-2:#f7f4ee;
  --line:#d2cbbd; --line-soft:#e2ddd2;
  --sea:#e6ecef; --land:#d8d2c4; --land-hi:#c2bba9;
  --route:#a8500f; --route-dim:#d9a06a;
  --visit:#1f7a5c; --visit-dim:#7fbca8;
  --text:#1d2429; --text-2:#4a5560; --muted:#78838d;
  --danger:#c2362f;
  --hdr:rgba(255,255,255,.94); --band:#ffffff; --band-2:#f2eee6; --app-1:#e8e3d8; --app-2:#f4f1ea;
  --on-route:#ffffff; --on-visit:#ffffff;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%; background:var(--ink)}
body{margin:0}

#app{
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--app-1) 0%, transparent 62%),
    radial-gradient(900px 600px at 5% 105%, var(--app-2) 0%, transparent 60%),
    var(--ink);
  min-height:100vh;
  padding:0 0 72px;
  font-size:15px;
  line-height:1.5;
  /* clip statt hidden: „hidden" macht diesen Kasten zum Scrollbehälter,
     und daran scheiterte die klebende Kopfzeile — sie klebte am Kasten
     statt am Bildschirm. „clip" schneidet nur ab, ohne zu scrollen. */
  overflow-x:clip;
}

#app button, #app input, #app select, #app textarea{font-family:inherit; font-size:inherit}

/* Beim Scrollen rückt die Kopfzeile zusammen: Die Marke wird kleiner,
   der Zustandstext verschwindet. Die Reiter bleiben — sie sind der
   Grund, warum die Leiste überhaupt kleben soll. */
.kompakt .brandrow{padding:5px 0}
.kompakt .brand{font-size:22px}
.kompakt .brand-sub{display:none}
.kompakt .chan{padding:6px 2px 8px}
.hdr{transition:box-shadow .2s}
.kompakt .hdr{box-shadow:0 8px 24px -20px rgba(0,0,0,.8)}

/* ---------- Kopfzeile ---------- */
.hdr{
  position:sticky; top:0; z-index:40;
  background:var(--hdr);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  /* Im Vollbildbetrieb liegt der Inhalt unter der Statusleiste des
     Geräts. Der Rand hält Uhrzeit und Akku von der Kopfzeile fern. */
  padding-top:env(safe-area-inset-top, 0px);
}
.hdr-in{max-width:1560px; margin:0 auto; padding:12px 16px 0}
.brandrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{
  /* Die Marke ist das einzige Element der Kopfzeile, das groß sein darf —
     die Reiter daneben stehen auf 12 px. Weniger Sperrung als früher,
     sonst wird die Zeile bei dieser Größe zu breit. */
  font-family:var(--mono); font-weight:700; font-size:42px;
  letter-spacing:.14em; color:var(--visit);
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.brand:hover{opacity:.82}
.brand:focus-visible{outline:2px solid var(--route); outline-offset:3px; border-radius:2px}
.nurlesen .brand{cursor:default}
.nurlesen .brand:hover{opacity:1}
.brand-wort{letter-spacing:.14em}

/* ── Fallblattanzeige ──
   Drei Kacheln wie auf einer Abflugtafel: tiefschwarz, bernsteinfarbene
   Schrift, in der Mitte die Fuge zwischen oberem und unterem Blatt.
   Die Farben sind bewusst NICHT an die Farbwelt gebunden — eine
   Abflugtafel ist überall gleich, und genau daran erkennt man sie. */
.tafel{display:inline-flex; gap:2px; letter-spacing:0}
.flap{
  position:relative; display:inline-grid; place-items:center;
  width:1.02em; height:1.3em; border-radius:3px;
  background:#0d0d0d; color:#ffc247;
  font-family:var(--mono); font-weight:700; font-size:.94em; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden;
}
/* Die Fuge in der Mitte, wie zwischen zwei Blättchen */
.flap::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,.85); box-shadow:0 1px 0 rgba(255,255,255,.06);
}
/* Beim Wechsel klappt das obere Blatt kurz nach unten */
.flap.dreht{animation:flapp .11s linear}
@keyframes flapp{
  0%{transform:translateY(-8%) scaleY(.86)}
  60%{transform:translateY(2%) scaleY(1.04)}
  100%{transform:none}
}
.brand-sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-left:auto;
}
.rjahre{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.rjahr-btn{
  padding:5px 11px; background:transparent; border:1px solid var(--line-soft);
  border-radius:var(--r); color:var(--muted); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
}
.rjahr-btn:hover{color:var(--text-2); border-color:var(--line)}
.rjahr-btn.on{background:var(--route); border-color:var(--route); color:var(--on-route); font-weight:700}
.rjahr-btn.alle{margin-right:6px}
.rjahr-btn.alle.on{background:var(--visit); border-color:var(--visit)}

.fakten{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(228px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.fakt{background:var(--panel); padding:12px 13px}
.fakt dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.fakt dd{
  font-family:var(--mono); font-size:14px; color:var(--text); font-weight:600;
  line-height:1.3; overflow:hidden; text-overflow:ellipsis;
}
.fakt span{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--route);
}

.charts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(430px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
  margin:0 0 14px;
}
/* ---------- Einstellungen ---------- */
/* Eine Spalte, bewusst. Zwei Spalten sparen zwar Scrollen, aber man
   muss dann beim Lesen springen — die Gruppen haben keine gemeinsame
   Grundlinie, weil sie unterschiedlich hoch sind. Stattdessen bleibt die
   Breite begrenzt, damit die Zeilen nicht auseinanderlaufen. */
#cfgBox{max-width:820px}

/* Aufklappbare Gruppen. Zugeklappt zeigt jede Zeile Titel und eine
   kurze Beschreibung — damit weiß man, was drin ist, ohne zu öffnen. */
.cfggrp{
  margin:0;
  border-top:1px solid var(--line-soft);
}
.cfggrp:first-of-type{border-top:0}

.cfggrp > summary{
  display:flex; align-items:baseline; gap:12px;
  padding:15px 30px 15px 2px; cursor:pointer; position:relative;
  list-style:none;
}
.cfggrp > summary::-webkit-details-marker{display:none}
.cfggrp > summary:hover h3{color:var(--text)}

/* Eigener Pfeil, der sich beim Öffnen dreht */
.cfggrp > summary::after{
  /* Als gezeichneter Winkel statt als Schriftzeichen — sonst sieht er
     auf jedem Gerät anders aus */
  content:''; position:absolute; right:8px; top:50%;
  width:7px; height:7px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-50%) rotate(-45deg); color:var(--muted);
  transition:transform .18s;
}
.cfggrp[open] > summary::after{transform:translateY(-50%) rotate(45deg)}
.cfggrp[open] > summary h3{color:var(--route)}

.cfggrp > summary h3{margin:0}
.cfgkurz{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  color:var(--muted); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cfggrp[open] .cfgkurz{opacity:0; transition:opacity .15s}

/* Der Inhalt bekommt Luft, sobald er sichtbar ist */
.cfggrp > *:not(summary){margin-left:2px}
.cfggrp[open]{padding-bottom:18px}

.cfggrp.gefahr > summary h3{color:var(--danger)}
.cfggrp.gefahr[open] > summary h3{color:var(--danger)}
.cfggrp h3{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-2);
  margin:0 0 12px;
}
.cfggrp.gefahr h3{color:var(--danger)}
.cfggrp .field{margin-bottom:12px}
.cfggrp .status:not(:empty){margin-bottom:12px}
.cfggrp > div[id$="Liste"]:not(:empty){margin-bottom:12px}
.cfggrp .field:last-child{margin-bottom:0}

/* Eine Aktion ist eine Zeile, kein Block: links steht, was passiert,
   rechts ein kleiner Knopf. Vorher waren alle Knöpfe 300 px breit und
   40 px hoch — dadurch sah „Sicherung ablegen" so gewichtig aus wie
   „Alle Flüge löschen". */
.cfgakt{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:0; padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.cfggrp .cfgakt:last-of-type{border-bottom:0}
.cfgakt .btn{
  order:2; width:auto; flex:none; white-space:nowrap;
  min-height:30px; padding:6px 12px; font-size:10px; letter-spacing:.09em;
}
/* Die Erklärung steht vorn und nimmt den Raum — der Knopf rückt nach rechts */
.cfgakt .hint-no{
  order:1; flex:1 1 200px; min-width:0; font-size:10.5px;
  line-height:1.55; letter-spacing:.05em;
}
/* Knöpfe in aufgeklappten Werkzeugen bleiben nachgeordnet und kompakt */
.cfggrp .toolbar .btn{
  flex:none; white-space:nowrap;
  min-height:30px; font-size:10px; letter-spacing:.09em; padding:6px 12px;
}
.cfggrp .toolbar{gap:8px; flex-wrap:wrap}
.cfgsave{
  margin:10px 0; padding:12px;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--ink-2);
}

@media(max-width:640px){
  /* Untereinander: Erklärung oben, Knopf darunter links — volle Breite
     braucht ein Nebenschauplatz nicht. */
  .cfgakt{flex-direction:column; align-items:flex-start; gap:8px; padding:11px 0}
  .cfgakt .hint-no{flex:none}
  .cfgsave .btn{width:100%}
}

.themen{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.thema{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 10px 6px 7px; background:transparent;
  border:1px solid var(--line-soft); border-radius:var(--r);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted);
}
.thema:hover{border-color:var(--line); color:var(--text-2)}
.thema.on{border-color:var(--route); color:var(--text)}
.tprobe{display:flex; border-radius:2px; overflow:hidden; border:1px solid rgba(255,255,255,.14)}
.tprobe i{display:block; width:11px; height:16px}

.chartbox{background:var(--panel); padding:14px 14px 6px}
.charttitel{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.charttitel em{
  margin-left:auto; font-style:normal; color:var(--muted); letter-spacing:.08em;
  text-transform:none; font-size:10px;
}
.charttitel span{color:var(--muted)}
/* Ohne preserveAspectRatio skaliert das Bild gleichmäßig: Vorher wurde
   die Breite stärker gestaucht als die Höhe, und die Beschriftung lief
   auf schmalen Schirmen schmal und verzerrt. */
.chart{display:block; width:100%; height:auto; overflow:visible}
.csaeule{cursor:pointer}
.csaeule rect + rect{transition:fill .15s}
.csaeule:hover rect + rect{fill:var(--route-dim)}
.csaeule.an:hover rect + rect{fill:var(--route)}

.rgrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
  margin:0 0 14px;
}
.rk{background:var(--panel); padding:12px 13px}
.rk dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.rk dd{font-family:var(--mono); font-size:23px; color:var(--route); font-weight:700}
.rk dd small{font-size:11px; color:var(--muted); margin-left:3px; font-weight:400}
.rv{
  margin-top:6px; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  display:flex; flex-wrap:wrap; gap:3px 7px; align-items:baseline;
}
.rv i{color:var(--muted); font-style:normal}
.rv .rang{color:var(--text-2)}
.dauf{color:var(--visit)}
.dab{color:var(--danger)}
.dgl{color:var(--muted)}

.rliste{border:1px solid var(--line-soft); border-radius:var(--r)}
.rz{
  display:flex; align-items:baseline; gap:12px; padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px;
}
.rz:last-child{border-bottom:0}
.rz span{color:var(--muted); min-width:190px}
.rz b{color:var(--text); font-weight:600; flex:1; min-width:0}
.rz i{color:var(--route); font-style:normal}
@media(max-width:640px){
  .rz{flex-wrap:wrap; gap:4px 10px}
  .rz span{min-width:0; flex:1 1 100%}
}

.pruef{margin:8px 0 4px; border:1px solid var(--line-soft); border-radius:var(--r)}
.prow{
  display:flex; align-items:center; gap:12px; padding:9px 11px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px;
}
.prow:last-child{border-bottom:0}
.pn{
  flex:none; min-width:38px; text-align:right; font-weight:700; font-size:13px;
}
.prow.fehler .pn{color:var(--danger)}
.prow.luecke .pn{color:var(--route)}
.prow.hinweis .pn{color:var(--muted)}
.pt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.pt b{color:var(--text); font-weight:600}
.pt span{color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis}

.reise{
  margin:8px 0 4px; max-height:420px; overflow-y:auto;
  border:1px solid var(--line-soft); border-radius:var(--r);
}
.rrow{
  display:flex; align-items:center; gap:10px; padding:8px 11px; cursor:pointer;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px;
}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:var(--ink-2)}
.rrow.an{background:rgba(55,217,168,.07)}
.rrow input[type=checkbox]{accent-color:var(--visit); width:15px; height:15px; flex:none}
.rort{display:flex; flex-direction:column; gap:1px; min-width:150px}
.rort b{color:var(--text); font-weight:600}
.rort span{color:var(--muted); font-size:10px}
.rinfo{color:var(--text-2); flex:1; min-width:0}
.rart{flex:none}
.rbesuch{color:var(--visit); font-size:10px; letter-spacing:.08em}
.rumstieg{color:var(--muted); font-size:10px; letter-spacing:.08em}
.rjahr{width:96px; flex:none; padding:4px 6px; min-height:0; font-size:11px}
@media(max-width:640px){
  .rrow{flex-wrap:wrap}
  .rort{min-width:0; flex:1}
  .rinfo{flex:1 1 100%; order:5}
}

.hist{margin:8px 0 4px; border:1px solid var(--line-soft); border-radius:var(--r)}
.histrow{
  display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; color:var(--text-2);
}
.histrow:last-child{border-bottom:0}
.hrev{color:var(--route); min-width:38px}
.hzeit{min-width:132px}
.hzahl{color:var(--muted); flex:1}

/* Symbole sitzen auf der Schriftlinie und übernehmen deren Farbe */
.ik{display:inline-block; vertical-align:-2px; flex:none}
.ik + span, span + .ik{margin-left:5px}

/* Schildchen mit dem Namen des Zugangs — steht in den Einstellungen
   neben den Abgleichknöpfen, nicht mehr in der Kopfzeile */
.werbin{
  order:1; flex:none; margin:0; padding:4px 9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--visit); border:1px solid var(--visit-dim); border-radius:var(--r);
}

.netzaus{
  flex:none; margin-left:10px; padding:4px 8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--danger); border:1px solid var(--danger); border-radius:var(--r);
  background:rgba(255,90,90,.08);
}
.kopfknopf{
  flex:none; width:26px; height:26px; padding:0; margin-left:10px;
  background:transparent; border:1px solid var(--line-soft); border-radius:var(--r);
  color:var(--muted); cursor:pointer; font-size:13px; line-height:1;
}
.kopfknopf:hover{color:var(--text-2); border-color:var(--line)}
.kopfknopf.an{color:var(--route); border-color:var(--route-dim)}
.kopfknopf:focus-visible{outline:2px solid var(--route); outline-offset:2px}
.nurlesen .kopfknopf{display:none}

.channels{display:flex; gap:0; margin-top:12px}
.chan{
  appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--muted); padding:9px 2px 11px; margin-right:26px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  transition:color .18s, border-color .18s; display:flex; align-items:center; gap:8px;
  white-space:nowrap; flex:none;      /* sonst brechen die Namen um */
}
.chan:hover{color:var(--text-2)}
.chan[aria-selected="true"]{color:var(--text); border-bottom-color:var(--route)}
#chan-world[aria-selected="true"]{border-bottom-color:var(--visit)}
.chan .cnt{
  font-size:10px; padding:1px 5px; border-radius:999px;
  background:var(--line-soft); color:var(--text-2);
}
.chan:focus-visible{outline:2px solid var(--route); outline-offset:3px}

/* ---------- Layout ---------- */
/* Eine Breite für alle Reiter. Vorher waren die beiden Listen breiter
   als der Rest — sie brauchen den Platz für ihre Spalten, aber der
   Sprung beim Reiterwechsel war unruhiger als der Gewinn. */
.wrap{max-width:1560px; margin:0 auto; padding:20px 16px 0}
.view{display:none}
.view.on{display:block; animation:fade .3s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- Kennzahlen ---------- */
.metrics{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); margin-bottom:18px;
}
.metric{background:var(--ink-2); padding:12px 13px}
.metric dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 5px;
}
.metric dd{
  margin:0; font-family:var(--mono); font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--text);
}
.metric dd small{font-size:11px; color:var(--text-2); font-weight:400; margin-left:3px}
.metric.acc dd{color:var(--route)}
.metric.acc2 dd{color:var(--visit)}
@media(max-width:900px){ .metrics{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric dd{font-size:19px}
}

/* ---------- Panels ---------- */
.panel{background:var(--panel); border:1px solid var(--line-soft); margin-bottom:18px}
.panel-hd{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
}
.panel-hd h2{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-2); font-weight:600;
}
.panel-hd .tag{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--muted);
}
.panel-bd{padding:14px}

/* ---------- Formular ---------- */
.field{display:flex; flex-direction:column; gap:5px}
.field label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.inp{
  background:var(--ink); border:1px solid var(--line); color:var(--text);
  padding:9px 11px; border-radius:var(--r); width:100%;
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  transition:border-color .15s, box-shadow .15s; min-height:40px;
}
.inp::placeholder{color:var(--muted); letter-spacing:.02em}
.inp:focus{outline:none; border-color:var(--route); box-shadow:0 0 0 3px rgba(255,154,46,.13)}
#view-world .inp:focus{border-color:var(--visit); box-shadow:0 0 0 3px rgba(55,217,168,.13)}
.inp.up{text-transform:uppercase}
.inp.ok{border-color:var(--visit)}
.hint-ok{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--visit)}
.hint-no{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted)}

.lookup-row{
  display:grid; grid-template-columns:1.1fr 1.2fr auto; gap:10px;
  align-items:end;
  padding-bottom:17px;          /* Platz für die Hinweiszeile darunter */
}
/* Der Hinweis steht außerhalb des Flusses, sonst verschiebt er die
   Ausrichtung der Nachbarfelder */
.lookup-row .field{position:relative}
.lookup-row .field > .hint-no,
.lookup-row .field > .hint-ok{
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:640px){
  .lookup-row{grid-template-columns:1fr 1fr; padding-bottom:20px}
  .lookup-row .btn-go{grid-column:1/-1}
  .lookup-row .field > .hint-no,
  .lookup-row .field > .hint-ok{white-space:normal}
}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(max-width:640px){ .grid3{grid-template-columns:1fr 1fr} }

/* ---------- Buttons ---------- */
.btn{
  appearance:none; cursor:pointer; border-radius:var(--r);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 16px; min-height:40px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text-2);
  transition:.16s; white-space:nowrap;
}
.btn:hover{border-color:var(--muted); color:var(--text)}
.btn:focus-visible{outline:2px solid var(--route); outline-offset:2px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn-go{background:var(--route); border-color:var(--route); color:var(--on-route); font-weight:700}
.btn-go:hover{filter:brightness(1.12)}
.btn-go2{background:var(--visit); border-color:var(--visit); color:var(--on-visit); font-weight:700}
.btn-go2:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent}
.btn-sm{padding:6px 10px; min-height:0; font-size:10px}
.btn-danger:hover{border-color:var(--danger); color:var(--danger)}

/* ---------- Statuszeile ---------- */
.passbox{
  margin-top:12px; padding:13px; background:var(--ink-2);
  border:1px solid var(--line-soft);
}
.passhit{
  margin-top:10px; padding:10px 12px; background:var(--panel);
  border-left:2px solid var(--visit); font-family:var(--mono); font-size:11.5px;
  color:var(--text-2); line-height:1.7;
}
.passhit b{color:var(--text)}

.status{
  margin-top:12px; padding:10px 12px; border-left:2px solid var(--line);
  background:var(--ink-2); font-family:var(--mono); font-size:11.5px;
  color:var(--text-2); letter-spacing:.03em; display:none; line-height:1.6;
}
.status.on{display:block}
.status.work{border-left-color:var(--route); color:var(--route)}
.status.ok{border-left-color:var(--visit); color:var(--visit)}
.status.err{border-left-color:var(--danger); color:var(--danger)}
.dots::after{content:''; animation:dots 1.3s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ---------- Karte ---------- */
.mapbox{position:relative; background:var(--sea); border:1px solid var(--line-soft); overflow:hidden}
.mapbox svg{display:block; width:100%; height:auto; touch-action:none; cursor:grab}
.mapbox svg.drag{cursor:grabbing}
#mapGL, #mapGLW{position:absolute; inset:0; z-index:2; display:none}
.mapbox.gl #mapGLW{display:block}
.mapfit{position:absolute; right:9px; top:9px; z-index:4; display:none; flex-direction:column; gap:6px}
.mapbox.gl .mapfit{display:flex}
.mapfit button{
  width:32px; height:32px; padding:0; font-size:15px; line-height:1; cursor:pointer;
  background:rgba(8,24,38,.92); border:1px solid var(--line); color:var(--text-2);
  border-radius:var(--r); font-family:var(--mono);
}
.mapfit button:hover{color:var(--route); border-color:var(--route-dim)}
.mapfit button.an{color:var(--route); border-color:var(--route-dim)}
.mapfit button:focus-visible{outline:2px solid var(--route); outline-offset:2px}
.mapbox.gl #mapGL{display:block}
.mapbox.gl > svg{visibility:hidden}      /* hält die Höhe, bleibt als Rückfall */
.mapbox.gl .mapctl{display:none}
.mapbox.gl .maplegend, .mapbox.gl .maphint{z-index:3; text-shadow:0 0 6px #05101a}
.maplibregl-ctrl-attrib{font-size:9px !important}
.maplibregl-ctrl-attrib a{color:#6f8a97 !important}
.maplibregl-popup-content{
  background:var(--panel) !important; color:var(--text) !important;
  border:1px solid var(--line); border-radius:2px; padding:8px 11px !important;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
}
.maplibregl-popup-tip{border-top-color:var(--line) !important; border-bottom-color:var(--line) !important}

.mapctl{position:absolute; right:9px; bottom:9px; display:flex; flex-direction:column; gap:5px; z-index:5}
.mapctl button{
  width:32px; height:32px; padding:0; font-size:15px; line-height:1;
  background:rgba(8,24,38,.9); border:1px solid var(--line); color:var(--text-2);
  border-radius:var(--r); cursor:pointer; font-family:var(--mono);
}
.mapctl button:hover{color:var(--text); border-color:var(--muted)}
/* Beide sitzen oben links untereinander. Unten wäre die Quellenangabe
   der Karte im Weg — und auf hellen Kartenbildern braucht die Schrift
   einen eigenen Grund, sonst verschwindet sie. */
.maplegend, .maphint{
  position:absolute; left:10px; z-index:5; pointer-events:none;
  font-family:var(--mono); letter-spacing:.14em;
  background:rgba(5,16,26,.72); border-radius:var(--r);
  padding:4px 8px; backdrop-filter:blur(3px);
  max-width:calc(100% - 60px);
}
.maplegend{
  top:10px; font-size:9.5px; text-transform:uppercase; color:#cfe3ec;
}
.maphint{
  top:34px; font-size:9px; letter-spacing:.1em; color:#8fb0c0;
}
@media(max-width:640px){
  /* Auf dem Handy ist der Hinweis nach der ersten Berührung überflüssig */
  .mapbox.beruehrt .maphint{opacity:0; transition:opacity .4s}
}

/* ---------- Flugstreifen (Signature) ---------- */
.strip{
  display:grid; grid-template-columns:112px 1fr 148px 40px;
  border:1px solid var(--line-soft); border-left:3px solid var(--route-dim);
  background:var(--ink-2); margin-bottom:8px; transition:border-color .16s, background .16s;
}
.strip:hover{border-color:var(--line); border-left-color:var(--route); background:var(--panel)}
.strip > div{padding:10px 12px; border-right:1px solid var(--line-soft); min-width:0}
.strip > div:last-child{border-right:0}
.s-call{font-family:var(--mono)}
.s-call .no{font-size:15px; font-weight:700; letter-spacing:.09em; color:var(--route)}
.s-call .dt{font-size:10.5px; color:var(--muted); margin-top:3px; letter-spacing:.06em}
.s-route{display:flex; align-items:center; gap:10px}
.s-port{font-family:var(--mono); min-width:52px}
.s-port .iata{font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--text)}
.s-port .city{font-size:10px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px}
.s-line{flex:1; height:1px; background:linear-gradient(90deg,var(--line),var(--route-dim),var(--line)); position:relative; min-width:22px}
.s-line::after{
  content:'>'; position:absolute; right:-3px; top:50%; transform:translateY(-52%);
  font-family:var(--mono); font-size:11px; color:var(--route-dim);
}
.s-line .km{
  position:absolute; left:50%; top:-15px; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.08em; white-space:nowrap;
}
.s-meta{font-family:var(--mono); font-size:11.5px; color:var(--text-2); letter-spacing:.05em}
.s-meta .reg{color:var(--text); font-weight:600}
.s-meta div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.s-act{display:flex; align-items:center; justify-content:center; padding:0!important}
.s-act button{
  width:100%; height:100%; background:transparent; border:0; color:var(--muted);
  cursor:pointer; font-family:var(--mono); font-size:15px;
}
.s-act button:hover{color:var(--danger); background:rgba(255,107,107,.07)}
@media(max-width:720px){
  .strip{grid-template-columns:1fr 40px; grid-template-areas:"call act" "route act" "meta act"}
  .strip .s-call{grid-area:call; border-right:0; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:baseline}
  .strip .s-call .dt{margin-top:0}
  .strip .s-route{grid-area:route; border-right:0; border-bottom:1px solid var(--line-soft)}
  .strip .s-meta{grid-area:meta; border-right:0; display:flex; gap:14px}
  .strip .s-act{grid-area:act; border-left:1px solid var(--line-soft)}
  .s-port .city{max-width:80px}
}

/* ---------- Länderliste ---------- */
.kont{margin-bottom:14px}
.kont-hd{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:0 2px 8px; margin-bottom:9px; cursor:pointer;
}
.kont-hd:hover .kont-name{color:var(--visit)}
.kont-caret{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  transition:transform .2s; transform:rotate(90deg);
}
.kont:not(.auf) .kont-caret{transform:none}
.kont-name{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text); font-weight:600;
}
.kont-n{
  margin-left:auto; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; color:var(--muted); white-space:nowrap;
}
.kont-bd{display:none}
.kont.auf .kont-bd{display:block}

.ctry{border:1px solid var(--line-soft); border-left:3px solid var(--visit-dim); background:var(--ink-2); margin-bottom:8px}
.ctry.open{border-left-color:var(--visit)}
.ctry-hd{
  display:flex; align-items:center; gap:12px; padding:11px 13px; cursor:pointer;
  width:100%; background:transparent; border:0; text-align:left; color:inherit;
}
.ctry-hd:hover{background:var(--panel)}
.ctry-hd:focus-visible{outline:2px solid var(--visit); outline-offset:-2px}
.ctry-code{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--visit); border:1px solid var(--visit-dim); padding:3px 6px; border-radius:2px;
}
.ctry-name{font-size:14.5px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctry-n{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.1em; white-space:nowrap}
.ctry-caret{font-family:var(--mono); color:var(--muted); font-size:11px; transition:transform .2s}
.ctry.open .ctry-caret{transform:rotate(90deg)}
.ctry-bd{display:none; padding:2px 13px 12px 13px; border-top:1px solid var(--line-soft)}
.ctry.open .ctry-bd{display:block}
.city{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px dashed var(--line-soft); font-size:14px;
}
.city:last-child{border-bottom:0}
.city .dot{width:5px; height:5px; border-radius:50%; background:var(--visit); flex:none}
.city .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.city .yr{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.08em}
.yr-ed{
  width:56px; flex:none; text-align:center; padding:3px 4px; min-height:0;
  background:transparent; border:1px solid transparent; border-radius:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted);
  transition:.15s;
}
.yr-ed::placeholder{color:var(--line)}
.yr-ed:hover{border-color:var(--line)}
.yr-ed:focus{
  outline:none; border-color:var(--visit); color:var(--text);
  background:var(--ink); box-shadow:0 0 0 3px rgba(55,217,168,.12);
}
.yr-ed.gesetzt{color:var(--text-2)}
.city .rm{background:transparent; border:0; color:var(--muted); cursor:pointer; font-family:var(--mono); font-size:13px; padding:2px 4px}
.city .rm:hover{color:var(--danger)}

/* ---------- Leerzustand ---------- */
.empty{
  padding:34px 18px; text-align:center; border:1px dashed var(--line);
  background:var(--ink-2);
}
.empty p{margin:0 0 6px; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-2)}
.empty span{font-size:13px; color:var(--muted)}

/* ---------- Sortier-/Werkzeugleiste ---------- */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.toolbar .spacer{flex:1}

/* ---------- Filterleiste ---------- */
.filterbar{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line-soft); padding:12px 14px; margin-bottom:18px;
}
.filterbar .field{min-width:132px}
.filterbar select{
  background:var(--ink); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:var(--r); font-family:var(--mono); font-size:13px;
  width:100%; min-height:38px;
}
.filterbar select:focus{outline:none; border-color:var(--route)}
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fltnote{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted);
  margin-left:auto; align-self:center;
}


/* ---------- Zeitraumfilter ---------- */
.seg button{
  appearance:none; background:transparent; border:0; cursor:pointer; padding:6px 11px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:.15s;
}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--text-2)}
.seg button.on{background:var(--route); color:var(--on-route); font-weight:700}

/* ---------- Auswahl der Auswertungen ---------- */
/* ═══════════════ Einstellungen als Ebene ═══════════════
   Sie legt sich über den Inhalt, statt ihn zu verschieben. Von rechts
   eingefahren, weil das dem Zahnrad in der Kopfzeile entspricht; der
   Hintergrund wird abgedunkelt und leicht unscharf, damit klar ist,
   dass die Seite darunter gerade nicht bedienbar ist. */
#hbEbene{z-index:90}
.ebene{position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end}

/* ── Handbuch ── */
.hb{max-width:780px; padding-bottom:40px}
.hb h3{
  margin:28px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--route); font-weight:600;
}
.hb h3:first-of-type{border-top:0; padding-top:0; margin-top:6px}
.hb p{margin:0 0 11px; font-size:13.5px; line-height:1.65; color:var(--text-2)}
.hb b{color:var(--text); font-weight:600}
.hb code{
  font-family:var(--mono); font-size:12px; padding:1px 5px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:2px;
  color:var(--text-2);
}
.hb-merk{
  padding:10px 13px; border-left:2px solid var(--visit);
  background:var(--ink-2); color:var(--text-2)!important;
}
.hb-inhalt{
  display:flex; flex-wrap:wrap; gap:5px 7px; margin:0 0 6px;
  padding-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.hb-inhalt a{
  padding:5px 9px; border:1px solid var(--line-soft); border-radius:var(--r);
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--muted); text-decoration:none;
}
.hb-inhalt a:hover{color:var(--text); border-color:var(--line)}
.hb-tasten{
  display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
  margin:0; font-size:13px;
}
.hb-tasten dt{
  font-family:var(--mono); font-size:11px; color:var(--route);
  white-space:nowrap; padding-top:2px;
}
.hb-tasten dd{margin:0; color:var(--text-2); line-height:1.5}
#hbPanel{border:0; background:transparent}
.hb-inhalt a:focus-visible{outline:2px solid var(--route); outline-offset:2px}
.ebene.hidden{display:none!important}

.ebene-grund{
  position:absolute; inset:0;
  background:rgba(2,8,14,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:grundAuf .22s ease-out;
}
@keyframes grundAuf{ from{opacity:0} to{opacity:1} }

.ebene-blatt{
  position:relative; z-index:1;
  width:min(880px, 100%);
  height:100%; overflow-y:auto; overscroll-behavior:contain;
  background:var(--ink);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
  padding:0 0 40px;
  animation:blattRein .26s cubic-bezier(.22,.8,.3,1);
  padding-top:env(safe-area-inset-top, 0px);
}
@keyframes blattRein{ from{transform:translateX(28px); opacity:.4} to{transform:none; opacity:1} }

/* Beim Schließen zurückfahren, sonst verschwindet sie ruckartig */
.ebene.zu .ebene-blatt{animation:blattRaus .2s ease-in forwards}
.ebene.zu .ebene-grund{animation:grundZu .2s ease-in forwards}
@keyframes blattRaus{ to{transform:translateX(28px); opacity:0} }
@keyframes grundZu{ to{opacity:0} }

/* Innerhalb der Ebene braucht der Bereich keinen eigenen Rahmen */
.ebene #cfgPanel{border:0; margin:0; background:transparent}
.ebene .panel-hd{
  position:sticky; top:0; z-index:2;
  background:var(--ink); border-bottom:1px solid var(--line);
}

@media(max-width:640px){
  .ebene-blatt{width:100%; border-left:0}
  /* Auf dem Handy von unten, das ist dort die vertraute Richtung */
  .ebene{align-items:flex-end}
  .ebene-blatt{height:92%; border-top-left-radius:14px; border-top-right-radius:14px;
               animation:blattHoch .28s cubic-bezier(.22,.8,.3,1)}
  @keyframes blattHoch{ from{transform:translateY(40px); opacity:.5} to{transform:none; opacity:1} }
  .ebene.zu .ebene-blatt{animation:blattRunter .2s ease-in forwards}
  @keyframes blattRunter{ to{transform:translateY(40px); opacity:0} }
}

@media(prefers-reduced-motion:reduce){
  .ebene-grund, .ebene-blatt{animation:none}
}

#cfgPanel{
  overflow:hidden;
  animation:aufklappen .22s ease-out;
}
@keyframes aufklappen{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:none}
}

.cardbox{padding:12px 14px 14px; border-bottom:1px solid var(--line-soft); background:var(--ink-2)}
.cardbox-hd{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.cardbox-hd .cnt3{color:var(--text-2)}
.cardbox-hd .btn{margin-left:0}
.cardbox-hd .btn:first-of-type{margin-left:auto}
.panel-hd .chip{margin-left:12px}
.panel-hd > .btn{margin-left:8px}
.picks{display:flex; flex-wrap:wrap; gap:7px}
.pick{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 11px 6px 9px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink); transition:.15s;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
}
.pick:hover{border-color:var(--muted); color:var(--text-2)}
.pick input{
  appearance:none; width:12px; height:12px; margin:0; border-radius:2px; flex:none;
  border:1px solid var(--line); background:transparent; position:relative; cursor:pointer;
}
.pick input:checked{background:var(--route); border-color:var(--route)}
.pick input:checked::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--on-route); font-weight:700;
}
.pick:has(input:checked){border-color:var(--route-dim); color:var(--text)}
.pick input:focus-visible{outline:2px solid var(--route); outline-offset:2px}

/* ---------- Auswertungskarten ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 10px; border:1px solid var(--route-dim); border-radius:var(--r);
  background:rgba(255,154,46,.10); color:var(--text-2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
}
.chip b{color:var(--route); font-weight:600}
.chip .lbl{color:var(--muted); font-weight:400}
.chip .trenn{color:var(--line); margin:0 7px; font-size:11px}
.chip span{color:var(--muted); font-size:12px}
.chip:hover{border-color:var(--route)} .chip:hover span{color:var(--route)}

.pickbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 14px; background:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
}
.pb-lbl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); flex:none;
}
.pb-chips{display:flex; gap:7px; flex-wrap:wrap; flex:1; min-width:0}
.pickbar .btn-go{margin-left:auto}
.srow.gewaehlt .k{color:var(--route); font-weight:600}
.srow.gewaehlt .bar i{opacity:1}
.frow.gewaehlt .n{color:var(--route); font-weight:600}

/* Anklickbare Zeilen in der Auswertung */
.srow.ohne .k{color:var(--muted); font-style:italic}
.srow.ohne .bar i{background:var(--line)}
.frow.ohne .n{color:var(--muted); font-style:italic}

.srow[data-v] .k{cursor:pointer}
.srow[data-v]:hover .k{color:var(--route)}
.srow[data-v]:hover .bar i{opacity:1}
.frow[data-v]{cursor:pointer}
.frow[data-v]:hover .n{color:var(--route)}

.statgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft)}
.stat{
  background:var(--ink-2); padding:13px 14px 12px;
  display:flex; flex-direction:column;   /* Fußzeile bleibt unten */
}
.stat h3{
  margin:0 0 11px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
/* Alle Zeilen einer Karte teilen sich ein Raster, damit die Balken
   an derselben Stelle beginnen — unabhängig von der Namenslänge. */
.slist{
  --zeile:15px; --luecke:6px;
  display:grid; grid-template-columns:104px minmax(46px,1fr) 44px;
  align-items:center; align-content:start;
  column-gap:9px; row-gap:var(--luecke);
  /* Platz für acht Zeilen freihalten, damit alle Karten gleich hoch sind */
  min-height:calc(8 * var(--zeile) + 7 * var(--luecke));
}
@media(max-width:400px){ .slist{grid-template-columns:92px minmax(38px,1fr) 40px} }
.srow{display:contents}
.slist{margin-bottom:9px}
.srow .k{
  font-family:var(--mono); font-size:11px; line-height:15px; color:var(--text);
  letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srow .bar{height:7px; background:var(--line-soft); position:relative; border-radius:1px}
.srow .bar i{position:absolute; left:0; top:0; bottom:0; background:var(--route); border-radius:1px;
  display:block; transition:width .35s ease}
.srow .v{font-family:var(--mono); font-size:10.5px; line-height:15px; color:var(--text-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}

.stat .tot{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted);
}
.stat .tot b{color:var(--text); font-size:14px; font-weight:600; letter-spacing:0}


/* ---------- Kennzahlenband unter der Karte ---------- */
.summary{
  /* minmax(0,…) statt 1fr: Sonst darf eine Spalte über ihren Anteil
     hinauswachsen, sobald der Inhalt breiter ist — das Band würde bei
     jedem Wechsel der Vergleichszeile leicht springen. */
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px;
  background:rgba(255,154,46,.22);
  border:1px solid rgba(255,154,46,.35);
  margin:0 0 18px; padding:0;
  box-shadow:0 0 0 1px rgba(5,16,26,.6), 0 10px 26px -18px rgba(255,154,46,.5);
}
.sum{background:var(--band); padding:15px 15px 16px; min-width:0}
.sum dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 7px;
}
.sum dd{
  margin:0; font-family:var(--mono); font-size:27px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--text); line-height:1;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sum dd small{font-size:11px; color:var(--text-2); font-weight:400; margin-left:2px; letter-spacing:.05em}
/* Wechselnde Vergleichszeile — feste Höhe, damit das Band beim
   Umschalten nicht springt */
.vgl{
  display:block; margin-top:5px; min-height:13px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .26s ease;
}
@media(prefers-reduced-motion:reduce){ .vgl{transition:none} }

/* Im Vollbildbetrieb: Doppeltipp löst kein Zoomen aus, Bedienung bleibt
   flüssig. Die Karten behalten ihr eigenes Verhalten. */
#app.kein-zoom{touch-action:manipulation}
#app.kein-zoom .mapbox, #app.kein-zoom .mapbox *{touch-action:auto}
.sum.acc dd{color:var(--route)}
/* Im Länder-Tab ist Türkis die Leitfarbe — die Regel galt bisher nur
   für die kleinen Kennzahlen, nicht für das große Band. */
.sum.acc2 dd{color:var(--visit)}
#view-world .sum.acc dd, #view-world .go2{color:var(--visit)}
#view-world button.sum:focus-visible{outline-color:var(--visit)}
@media(max-width:900px){ .summary{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media(max-width:520px){
  .summary{grid-template-columns:repeat(2,1fr)}
  .sum{padding:12px 12px 13px}
  .sum dd{font-size:21px}
}

/* ---------- Vollständige Liste ---------- */
.tot{
  margin-top:auto; padding:8px 0 0; border:0; border-top:1px solid var(--line-soft);
  width:100%; background:none; cursor:pointer;
  display:flex; align-items:baseline; gap:5px; white-space:nowrap; overflow:hidden;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); transition:color .15s;
}
.tot .n{color:var(--text-2); font-size:10.5px; letter-spacing:.02em; font-weight:600}
.tot .u{min-width:0; overflow:hidden; text-overflow:ellipsis}
.tot .go{
  margin-left:auto; padding-left:8px; letter-spacing:.1em;
  color:var(--muted); transition:color .15s;
}
.tot:hover{color:var(--text-2)}
.tot:hover .go{color:var(--route)}
.tot:focus-visible{outline:1px solid var(--route); outline-offset:2px}

.sheet{
  position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(3,10,17,.78); backdrop-filter:blur(3px);
}
@media(min-width:700px){ .sheet{align-items:center; padding:24px} }
.sheet-in{
  background:var(--panel); border:1px solid var(--line);
  width:100%; max-width:680px; max-height:88vh; display:flex; flex-direction:column;
}
.sheet-hd{
  display:flex; align-items:center; gap:10px; padding:13px 15px;
  border-bottom:1px solid var(--line-soft); flex:none;
}
.sheet-hd h3{
  margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text); font-weight:600;
}
.sheet-hd .cnt2{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.1em}
.sheet-hd .x{
  margin-left:auto; background:none; border:1px solid var(--line); color:var(--text-2);
  width:30px; height:30px; border-radius:var(--r); cursor:pointer; font-family:var(--mono); font-size:14px;
}
.sheet-hd .x:hover{border-color:var(--muted); color:var(--text)}
.sheet-bd{overflow-y:auto; padding:6px 15px 16px; -webkit-overflow-scrolling:touch}
.frow{
  display:grid; grid-template-columns:26px minmax(0,1fr) 90px 62px 46px;
  align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:12px;
}
.frow:last-child{border-bottom:0}
.frow .r{color:var(--muted); font-size:10px; text-align:right}
.frow .n{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.frow .b{height:6px; background:var(--line-soft); position:relative}
.frow .b i{position:absolute; inset:0 auto 0 0; background:var(--route)}
.frow .a{text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums}
.frow .p{text-align:right; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .frow{grid-template-columns:24px minmax(0,1fr) 56px 42px; }
  .frow .p{display:none}
}

/* ---------- Listen ---------- */

}
.listbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:11px 13px; margin-bottom:14px;
  background:var(--ink-2); border:1px solid var(--line-soft);
}
.listbar .inp{flex:1; min-width:200px}
button.sum{
  display:block; width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit; border:0; position:relative;
}
button.sum:hover{background:var(--band-2)}
button.sum:focus-visible{outline:2px solid var(--route); outline-offset:-2px}
.go2{
  display:block; margin-top:6px; font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--route);
}

.tablewrap{border:1px solid var(--line-soft); background:var(--panel); overflow-x:auto}

/* Die Städteliste hat neun schmale Spalten. Ohne Vorgabe verteilt der
   Browser sie gleichmäßig — dann steht überall Luft und nirgends ein
   Schwerpunkt. Stadt und Land bekommen deshalb den Raum, die Zahlen
   nur so viel, wie sie brauchen. */
#ptab{table-layout:fixed}
#ptab th:nth-child(1){width:24%}
#ptab th:nth-child(2){width:26%}
#ptab th:nth-child(3){width:12%}
#ptab th:nth-child(4){width:13%}
#ptab th:nth-child(5){width:11%}
#ptab th:nth-child(6){width:6%}
#ptab th:nth-child(7),
#ptab th:nth-child(8){width:7%}
#ptab th:nth-child(9){width:34px}
#ptab td{overflow:hidden; text-overflow:ellipsis}
#ptab td .rt{display:inline-block; max-width:100%; overflow:hidden;
             text-overflow:ellipsis; vertical-align:bottom}
/* Die aufgeklappte Zeile spannt über alles und darf nicht beschnitten werden */
#ptab tr.det td{overflow:visible; text-overflow:clip}
.ftab{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px}
.ftab th{
  position:sticky; top:0; z-index:2; background:var(--ink-2);
  text-align:left; padding:10px 9px; white-space:nowrap;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--line);
}
.ftab th.s{cursor:pointer; user-select:none}
.ftab th.s:hover{color:var(--text-2)}
.ftab th.on{color:var(--route)}
.ftab th.num, .ftab td.num{text-align:right; font-variant-numeric:tabular-nums}
.ftab td{padding:9px 9px; border-bottom:1px solid var(--line-soft); white-space:nowrap; color:var(--text-2)}
.ftab td:last-child, .ftab th:last-child{
  position:sticky; right:0; background:var(--panel);
  box-shadow:-8px 0 10px -8px rgba(3,10,17,.9);
}
.ftab tbody tr:hover td:last-child, .ftab tr.open td:last-child{background:var(--ink-2)}
.ftab tbody tr{cursor:pointer}
.ftab tbody tr:hover td{background:var(--ink-2)}
.ftab tr.open td{background:var(--ink-2); border-bottom-color:transparent}
.ftab .d{color:var(--text-2)}
.ftab .wd{color:var(--muted); font-size:10px; margin-left:5px}
.ftab .no{color:var(--route); font-weight:700; letter-spacing:.06em}
.ftab .rt{color:var(--text); letter-spacing:.06em}
.ftab .rt em{font-style:normal; color:var(--muted); margin:0 4px}
.ftab .rc{
  color:var(--muted); font-size:10px;
  max-width:190px; overflow:hidden; text-overflow:ellipsis;
}
.ftab .cls{
  display:inline-block; min-width:20px; text-align:center; padding:1px 5px; border-radius:2px;
  font-size:9.5px; letter-spacing:.08em; border:1px solid var(--line);
}
.ftab .cls.b{color:var(--route); border-color:var(--route-dim)}
.ftab .cls.f{color:#fff; border-color:#fff6}
.ftab .car{color:var(--muted); font-size:11px}

/* Airline-Kachel */
.alogo{
  display:flex; align-items:center; gap:7px; min-width:0; max-width:158px;
}
.alogo b{
  flex:none; width:34px; height:22px; border-radius:2px; color:var(--on-route);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
}
.alogo img{
  flex:none; width:34px; height:22px; object-fit:contain;
  background:var(--panel); border-radius:2px; padding:1px 2px;
}
.alogo span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2)}

/* Bearbeitungsformular */
.editform{padding:12px 0 14px}
.editgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px 14px;
}
.editgrid .inp{font-size:12.5px; padding:7px 9px; min-height:34px}
.editgrid select.inp{appearance:none; background-image:none}
.editform .fltnote{margin-left:0}

/* Aufgeklappte Einzelheiten */
.det td{padding:0 10px 12px; border-bottom:1px solid var(--line); white-space:normal}
.detgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 18px; padding:10px 0 2px;
}
.detgrid div{min-width:0}
.detgrid dt{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.detgrid dd{margin:0; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis}

@media(max-width:1000px){
  .ftab .hs, .ftab td.hs{display:none}
}
@media(max-width:820px){
  .ftab .hc{display:none}
  .ftab td.hc{display:none}
}
@media(max-width:560px){
  .ftab th, .ftab td{padding:8px 7px; font-size:11px}
  .alogo span{display:none}
}

/* ── Listen auf dem Handy ──
   Ohne feste Spaltenbreiten: Die Anteile in Prozent gelten für alle
   neun Spalten. Sind die meisten ausgeblendet, bleibt der Rest übrig
   und landet in der Pfeilspalte — daher der breite leere Streifen. */
@media(max-width:820px){
  /* Auf dem Handy sind sechs der neun Spalten ausgeblendet. Die Anteile
     vom großen Bildschirm gelten weiter für alle neun — der Platz der
     unsichtbaren bliebe reserviert. Deshalb hier eigene Maße für die
     drei, die man sieht. */
  #ptab th:nth-child(1){width:34%}    /* Stadt */
  #ptab th:nth-child(2){width:44%}    /* Land */
  #ptab th:nth-child(6){width:22%}    /* Jahr */
  #ptab th:nth-child(3), #ptab th:nth-child(4), #ptab th:nth-child(5),
  #ptab th:nth-child(7), #ptab th:nth-child(8){width:0}
  #ptab th:nth-child(9){width:26px}

  .ftab th:last-child, .ftab td.car{width:26px; padding-left:0; padding-right:8px;
                                     text-align:right}

  /* Beide Tabellen bleiben in der Breite, statt seitlich zu laufen */
  .tablewrap{overflow-x:hidden}
  .ftab{table-layout:fixed}
  .ftab td, .ftab th{overflow:hidden; text-overflow:ellipsis}
}


.lstsort{display:none; align-items:center; gap:8px; margin:0 0 10px}
.lstsort label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.lstsort .inp{min-height:32px; padding:5px 9px; font-size:12.5px; width:auto; flex:1}
.lstsort .btn{min-height:32px; padding:5px 11px; font-size:13px}
@media(max-width:560px){ .lstsort{display:flex} }

/* ── Flugliste auf dem Handy ──
   Fünf Spalten auf 390 Pixeln ergeben fünf zu schmale Spalten: Das
   Datum wird abgeschnitten, von der Strecke bleibt „Z…". Deshalb ist
   die Tabelle dort keine Tabelle mehr, sondern eine gestapelte Zeile:
   oben Datum und Flugnummer, darunter die Strecke groß, rechts die
   Kilometer. Sortiert wird über die Leiste darüber statt über die
   Spaltenköpfe. */
@media(max-width:560px){
  .ftab .hm, .ftab td.hm{display:none}

  .tablewrap{border:0; background:transparent; overflow:visible}
  #ftab, #ftab tbody, #ftab tr, #ftab td{display:block; width:auto}
  #ftab thead{display:none}
  #ftab{table-layout:auto; font-size:13px}

  #ftab tbody tr{
    position:relative; background:var(--panel);
    border:1px solid var(--line-soft); border-bottom-width:0;
    padding:11px 40px 11px 13px;
  }
  #ftab tbody tr:last-child{border-bottom-width:1px}
  #ftab tbody tr.open{background:var(--ink-2)}
  #ftab tbody tr.det{padding:0 13px 13px; border-top:0}

  /* Die per Klasse ausgeblendeten Spalten müssen ausgeblendet BLEIBEN.
     Die Regeln oben stehen mit „.ftab td.hc" da; ein Selektor mit #ftab
     wiegt schwerer und hätte sie sonst wieder sichtbar gemacht —
     dann liegen Dauer und Kilometer übereinander. */
  #ftab td.hm, #ftab td.hc, #ftab td.hs,
  #ftab th.hm, #ftab th.hc, #ftab th.hs{display:none}

  #ftab td{
    border:0; padding:0; white-space:normal; overflow:visible;
    text-overflow:clip; background:none!important;
  }
  /* Datum und Flugnummer teilen sich die erste Zeile */
  #ftab td.d{
    display:inline-block; color:var(--muted); font-size:11px; letter-spacing:.06em;
  }
  #ftab td.d + td{display:inline-block; margin-left:10px; font-size:11.5px}
  #ftab td:nth-child(4){margin-top:5px}          /* Strecke */
  #ftab .rt{font-size:15px; letter-spacing:.1em}
  #ftab .rc{font-size:11px; max-width:none; margin-top:2px}
  /* Kilometer rechts oben in der Zeile */
  #ftab td.num{
    position:absolute; top:11px; right:38px;
    font-size:12px; color:var(--text-2);
  }
  #ftab td.num::after{content:" km"; color:var(--muted); font-size:10px}
  /* Der Pfeil sitzt am rechten Rand der Zeile, nicht in einer Spalte */
  #ftab tbody tr:not(.det) td:last-child{
    position:absolute; top:50%; right:12px; transform:translateY(-50%);
    width:auto; background:none!important; box-shadow:none;
  }
  #ftab tr.det td{position:static; background:none!important; box-shadow:none}

  /* Aufgeklappt: zwei Spalten sind auf dem Handy eine zu viel */
  .detgrid{grid-template-columns:1fr 1fr; gap:9px 14px}
}

/* ---------- Hinweis bei abweichenden Ständen ---------- */
.conflict{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 16px; background:var(--panel-2); border-bottom:2px solid var(--route);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text);
}
.conflict button{flex:none}

/* ---------- Öffentliche Ansicht: nichts zum Anfassen ---------- */
.nurlesen #btnCfg,
.nurlesen #cfgBox,
.nurlesen #fltReset,
.nurlesen #impPanel,
.nurlesen #btnImpOpen,
.nurlesen #btnExport, .nurlesen #btnImport,
.nurlesen #syncBar,
.nurlesen [data-edit], .nurlesen [data-del-flight], .nurlesen .city .rm,
.nurlesen #sumFlights .go2, .nurlesen #sumCities .go2{display:none!important}
.nurlesen #view-flights > .panel:nth-of-type(1),
.nurlesen #view-world > .panel:nth-of-type(1){display:none}
.nurlesen #sumFlights, .nurlesen #sumCities{cursor:default}
.nurlesen .foot .sr-only{display:none}

/* ═══════════ Handy ═══════════
   Safari vergrößert die Seite, sobald ein Feld mit weniger als 16 px
   Schrift angetippt wird. Deshalb sind alle Eingaben dort 16 px groß.
   Datumsfelder brauchen zusätzlich eine eigene Behandlung, weil iOS
   sie sonst mittig ausrichtet und in der Höhe springen lässt. */
@media (max-width: 720px){
  #app{font-size:16px; padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .hdr-in, .wrap, .foot{padding-left:max(14px, env(safe-area-inset-left));
                        padding-right:max(14px, env(safe-area-inset-right))}

  .inp, .filters select, .filterbar select{
    font-size:16px; min-height:46px; padding:11px 12px;
  }
  select.inp, .filterbar select{
    appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 49%, var(--muted) 50%),
                     linear-gradient(-45deg, transparent 49%, var(--muted) 50%);
    background-size:6px 6px, 6px 6px;
    background-position:calc(100% - 16px) 21px, calc(100% - 10px) 21px;
    background-repeat:no-repeat;
    padding-right:32px;
  }
  input[type="date"].inp{
    -webkit-appearance:none; appearance:none;
    text-align:left; min-height:46px; line-height:1.2;
  }
  input[type="date"].inp::-webkit-date-and-time-value{text-align:left; margin:0}

  /* Eingabe untereinander statt gequetscht nebeneinander */
  .lookup-row{grid-template-columns:1fr; gap:12px}
  .lookup-row .btn-go{grid-column:auto; width:100%; min-height:50px; font-size:12px}
  .grid2, .grid3{grid-template-columns:1fr 1fr; gap:12px}
  .filterbar{gap:12px}
  .filterbar .field{flex:1 1 100%; min-width:0}
  .filterbar select{width:100%}

  /* Finger statt Mauszeiger */
  .btn{min-height:44px; padding:12px 16px}
  .btn-sm{min-height:38px; padding:9px 13px; font-size:11px}
  .chan{margin-right:20px; padding:11px 2px 13px; font-size:12.5px}
  .toolbar{gap:10px}
  .pick{padding:9px 13px 9px 11px; font-size:12px}
  .mapctl button, .mapfit button{width:40px; height:40px; font-size:17px}
  .sheet-hd .x{width:38px; height:38px}

  /* Karte höher, sie ist der Blickfang */
  .mapbox{min-height:62vh}
  #mapGL{min-height:62vh}

  .panel-hd{flex-wrap:wrap; gap:8px 10px}
  .panel-hd .tag{margin-left:0; flex-basis:100%; order:9}
  .sum dd{font-size:24px}
}

@media (max-width: 420px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .summary{grid-template-columns:repeat(2,1fr)}
}

.viewtgl{
  background:none; border:1px solid var(--line-soft); border-radius:var(--r);
  color:var(--muted); cursor:pointer; padding:5px 9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
}
.viewtgl:hover{color:var(--text-2); border-color:var(--line)}
.viewtgl:focus-visible{outline:2px solid var(--route); outline-offset:2px}

/* ---------- Ortsvorschläge ---------- */
.inline-add{display:flex; gap:8px; align-items:flex-start; margin:2px 0 12px}
.inline-add .field{flex:1; min-width:0}
.inline-add .inp{font-size:13px; min-height:36px}
.inl-jahr{width:74px; flex:none; text-align:center}

.acbox{
  position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:3px;
  max-height:290px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 14px 32px -12px rgba(3,10,17,.9);
}
.acrow{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  padding:9px 11px; background:none; border:0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; font-family:var(--mono); font-size:12px; color:var(--text-2);
}
.acrow:last-child{border-bottom:0}
.acrow:hover, .acrow.an{background:var(--ink-2)}
.acrow b{color:var(--text); font-weight:600}
.acrow span{color:var(--muted); font-size:10.5px; margin-left:auto; white-space:nowrap}
.acrow i{font-style:normal; color:var(--muted); font-size:10.5px}
.ackopf{
  padding:6px 11px; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); background:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
}

.hidden{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Fußzeile */
/* Links die Schalter und die Wortmarke, rechts der Zustand. Der
   Abstandhalter dazwischen schiebt beide Gruppen auseinander. */
.fspacer{flex:1}
.fmarke{color:var(--text-2); letter-spacing:.18em}
#fassung{color:var(--line)}

.foot{
  max-width:1560px; margin:26px auto 0; border-top:1px solid var(--line-soft);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}

/* Vollbildbetrieb vom Startbild aus */
@media(display-mode:standalone), (display-mode:fullscreen){
  /* Deckende Kopfzeile statt Milchglas: Unter der Statusleiste würde
     sonst der durchscheinende Seiteninhalt verschwimmen und Uhrzeit
     und Akku unruhig unterlegen. */
  .hdr{
    background:var(--ink);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Deckender Streifen hinter der Statusleiste, auch beim Scrollen */
  .hdr::before{
    content:''; position:fixed; top:0; left:0; right:0;
    /* etwas höher als die Statusleiste, damit auch der weiche Übergang
       darunter noch auf deckendem Grund liegt */
    height:calc(env(safe-area-inset-top, 0px) + 6px);
    background:var(--ink);
    pointer-events:none;
    z-index:1;
  }
  /* iOS legt unter der Statusleiste eine eigene Unschärfe über den
     Seiteninhalt. Deshalb bleibt dieser Streifen leer — die Kopfzeile
     beginnt darunter. */
  .hdr-in{padding-top:14px}
  /* Kein Textmarkieren beim Wischen — fühlt sich sonst nicht wie eine App an */
  .chan, .brand, .sum dt, .metric dt{-webkit-user-select:none; user-select:none}
  /* Überziehen beim Scrollen unterdrücken */
  body{overscroll-behavior-y:none}
}

/* ═══════════════ Handy und Tablet ═══════════════ */

/* Safari bläht Text bei Drehung des Geräts auf */
#app{-webkit-text-size-adjust:100%}

/* Ränder am Rand des Bildschirms respektieren (Notch, abgerundete Ecken) */
.wrap, .hdr-in, .foot{
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}

/* Kopfzeilen der Bereiche dürfen umbrechen, sonst laufen sie
   mit Umschalter und Knöpfen aus dem Bild */
.panel-hd{flex-wrap:wrap; row-gap:8px}

/* Die Reiter bleiben in einer Zeile und lassen sich schieben */
.channels{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.channels::-webkit-scrollbar{display:none}

@media(max-width:640px){
  /* iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als
     16 px ist. Das reißt das Layout auseinander. */
  .inp, .filters select, .filterbar select, .editgrid .inp{font-size:16px}
  select.inp{font-size:16px}

  .chan{margin-right:16px; font-size:10.5px; letter-spacing:.10em; padding:8px 1px 10px}
  .chan .cnt{font-size:9px; padding:1px 5px}
  .panel-hd h2{font-size:10px; letter-spacing:.14em}
  .panel-hd .tag{display:none}          /* Nebensache, macht nur Platz weg */
  /* Auf dem Handy bricht die Kopfzeile um: Überschrift oben, darunter
     die Bedienelemente in einer Reihe. Der Umschalter nimmt den Platz,
     der übrig bleibt, „Karten" bleibt so schmal wie sein Wort — sonst
     wirkt er neben dem feinen Umschalter wie ein Fremdkörper. */
  .panel-hd{align-items:center}
  .panel-hd h2{flex:1 1 100%}
  .panel-hd .seg{flex:1 1 auto; margin-left:0; min-width:0}
  .panel-hd .seg button{flex:1 1 0; min-width:0; padding:7px 6px; font-size:9px;
                        letter-spacing:.08em; white-space:nowrap}
  .panel-hd > .btn{
    margin-left:0; flex:0 0 auto;
    padding:7px 11px; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  }

  .pickbar{gap:7px}
  .pickbar .btn-go{margin-left:0; width:100%}

  .filterbar{gap:8px}
  .filterbar .field{flex:1 1 130px; min-width:0}
  .filterbar select{max-width:none; width:100%}

  .toolbar .btn{flex:1 1 auto}

  /* ── Rückblick auf dem Handy ──
     Ein Diagramm je Reihe, sonst wird jede Säule zum Strich. Dafür sind
     sie flacher, damit noch etwas anderes ins Bild passt. */
  .charts{grid-template-columns:1fr}
  .chartbox{padding:12px 10px 4px}


  /* Zwei Kennzahlen nebeneinander statt sechs gequetschter Spalten */
  .rgrid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rk{padding:11px 11px}
  .rk dd{font-size:20px}
  .rv{font-size:9.5px; gap:2px 6px}

  /* Die Jahresleiste bleibt einzeilig und lässt sich schieben —
     dreizehn Jahre in mehreren Reihen kosten den halben Bildschirm. */
  .rjahre{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; margin:0 -14px 14px; padding:0 14px 2px;
  }
  .rjahre::-webkit-scrollbar{display:none}
  .rjahr-btn{flex:none}

  .rliste{font-size:11px}
  .fakten{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fakt{padding:11px}
  .fakt dd{font-size:12.5px}

  /* Im Bordkartenbereich untereinander und gleich breit — der Abstandhalter
     dazwischen würde sonst den zweiten Knopf schmaler machen */
  .passbox .toolbar{flex-direction:column; align-items:stretch}
  .passbox .toolbar .spacer{display:none}
  .passbox .toolbar .btn{width:100%; flex:none}
  .listbar .inp{font-size:16px}

  /* Hochkant ist die Karte im Seitenverhältnis 2:1 nur ein flacher
     Streifen. Deshalb bekommt der Kartenbereich eine eigene Höhe und
     die Zeichnung füllt ihn aus. */
  .mapbox{
    height:min(64vh, 540px);
    min-height:320px;
  }
  .mapbox > svg{
    position:absolute; inset:0;
    width:100%; height:100%;
  }

  /* Quer liegt das Gerät ohnehin breiter — dort reicht weniger Höhe,
     sonst schiebt die Karte alles andere aus dem Bild. */
  @media(orientation:landscape){
    .mapbox{height:min(78vh, 420px); min-height:220px}
  }
  .sum dd{font-size:19px}
}

@media(max-width:560px){
  .brand{font-size:34px}
}

@media(max-width:420px){
  .wrap{padding-top:14px}
  .brand{font-size:30px; letter-spacing:.1em}
  .brand-wort{letter-spacing:.1em}
  .brand-sub{display:none}
  .panel-bd{padding:12px}
  .pickbar{padding:10px 12px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}
/* ══ Nachfliegen ══
   Fenster über der Seite, Karte im Bild, unten eine Tafel mit Werten,
   Höhenprofil und Zeitleiste. Die Farben kommen aus der eingestellten
   Farbwelt — feste Werte gibt es nur dort, wo etwas über dem
   Satellitenbild lesbar bleiben muss. */
.rp{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); padding:16px;
}
.rp.hidden{display:none}
.rp-rahmen{
  position:relative; width:min(1180px, 100%); height:min(74vh, 760px);
  background:var(--ink); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.75);
  display:flex; flex-direction:column;
}
.rp-rahmen:fullscreen{width:100%; height:100%; border:0; border-radius:0}
.rp-karte{position:absolute; inset:0; touch-action:none; cursor:grab}
.rp-karte:active{cursor:grabbing}
.rp-karte canvas{outline:none}

/* Über der Karte: dunkler Verlauf und Schattenwurf, damit die Schrift
   auch auf hellem Satellitenbild lesbar bleibt — unabhängig von der
   Farbwelt. */
.rp-kopf{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:8px; padding:10px 12px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.rp-titel{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.rp-titel b{color:var(--route); font-weight:700}
.rp-x{
  pointer-events:auto; width:28px; height:28px; flex:none; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  color:var(--text); font-size:12px;
}
.rp-x:hover{border-color:var(--muted)}
.rp-lage{
  position:absolute; left:12px; top:46px; right:12px; z-index:2;
  font-family:var(--mono); font-size:9px; color:var(--route); pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}

/* ── Tafel unten ── */
.rp-blatt{
  position:relative; z-index:2; margin-top:auto;
  background:var(--ink-2); border-top:1px solid var(--line-soft);
  padding:10px 14px 12px; display:grid; gap:8px;
}
.rp-werte{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.rp-werte dt{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.rp-werte dd{
  margin:0; font-family:var(--mono); font-size:16px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.rp-werte dd small{font-size:10px; color:var(--muted); font-weight:400; margin-left:3px}
.rp-profil{display:block; width:100%; height:48px}

.rp-zeile{display:flex; align-items:center; gap:10px}
.rp-zeile-schalter{gap:6px; flex-wrap:wrap}
.rp-play{
  width:34px; height:34px; flex:none; cursor:pointer; border-radius:50%;
  border:0; background:var(--route); color:var(--on-route);
  font-size:13px; line-height:1; display:grid; place-items:center;
}
.rp-play:hover{filter:brightness(1.1)}
.rp-uhr{
  font-family:var(--mono); font-size:10.5px; color:var(--text-2); flex:none;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.rp-schiene{
  flex:1 1 80px; min-width:60px; height:18px; margin:0; padding:0;
  appearance:none; background:none; cursor:pointer;
}
.rp-schiene::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:var(--line)}
.rp-schiene::-moz-range-track{height:3px; border-radius:2px; background:var(--line)}
.rp-schiene::-webkit-slider-thumb{
  appearance:none; width:13px; height:13px; margin-top:-5px; border-radius:50%;
  background:var(--route); border:2px solid var(--ink-2);
}
.rp-schiene::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--route); border:2px solid var(--ink-2);
}
.rp-schalter{display:flex; gap:1px; background:var(--line-soft); border-radius:6px; overflow:hidden}
.rp-schalter button{
  cursor:pointer; border:0; background:var(--panel-2); color:var(--text-2);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; min-height:24px;
}
.rp-schalter button:hover{color:var(--text)}
.rp-schalter button.an{background:var(--route); color:var(--on-route); font-weight:700}
#rpTempo button{padding:6px 8px; letter-spacing:.04em}
.rp-fuss{
  font-family:var(--mono); font-size:8px; line-height:1.5; letter-spacing:.03em;
  color:var(--muted);
}
.rp .maplibregl-ctrl-bottom-right,
.rp .maplibregl-ctrl-bottom-left{display:none}

@media(max-width:560px){
  .rp{padding:0}
  .rp-rahmen{width:100%; height:100%; border:0; border-radius:0}
  /* Das Fenster füllt hier schon den Bildschirm — ein Vollbildknopf
     hätte nichts mehr zu vergrößern. */
  #rpVoll{display:none}
  .rp-blatt{padding:9px 11px 11px; gap:7px}
  .rp-werte{gap:6px}
  .rp-werte dd{font-size:14px}
  .rp-profil{height:40px}
  .rp-uhr{font-size:9.5px}
  .rp-zeile-schalter .spacer{display:none}
  .rp-fuss{font-size:7.5px}
}

/* Steckbrief und Bild */
a.btn{text-decoration:none; display:inline-flex; align-items:center}
.reglink{
  appearance:none; background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; color:inherit; border-bottom:1px dotted var(--muted);
}
.reglink:hover{color:var(--route); border-bottom-color:var(--route)}
.frow.regflug{grid-template-columns:90px 80px 1fr auto; cursor:pointer}
.frow.regflug:hover .n{color:var(--route)}
.frow.reghist{grid-template-columns:100px 1fr auto; cursor:default}
.frow.regflug.gewaehlt .n{color:var(--route); font-weight:600}
.rubrik{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 4px;
}
.regfakten{display:grid; gap:1px; background:var(--line-soft); margin:0 0 12px}
.rfakt{
  display:flex; align-items:baseline; gap:10px; background:var(--panel);
  padding:8px 10px; font-family:var(--mono); font-size:11.5px;
}
.rfakt span{color:var(--muted); flex:none; min-width:150px}
.rfakt b{color:var(--text); font-weight:600}
.regklapp{border:1px solid var(--line-soft); margin-bottom:6px; background:var(--panel)}
.regklapp>summary{
  cursor:pointer; padding:10px 12px; list-style:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2);
}
.regklapp>summary::-webkit-details-marker{display:none}
.regklapp>summary::before{content:"+ "; color:var(--route)}
.regklapp[open]>summary::before{content:"− "}
.regklapp>summary:hover{color:var(--text)}
.regklapp>summary i{color:var(--muted); font-style:normal; text-transform:none; letter-spacing:0}
.regklapp-bd{padding:0 12px 12px}
.regfoto{display:block; width:100%; height:auto; border:1px solid var(--line)}
.rk.co2 dd{color:var(--text-2)}
.bild-in{max-width:520px}
.bild-bd{padding:14px 15px 16px}
.bild-bd img{display:block; width:100%; height:auto; border:1px solid var(--line)}

/* ── Geplante Flüge ──
   Eigene Tafel über den Kennzahlen. Bewusst schlicht: eine Zeile je
   Flug, links die Strecke, rechts der Countdown. */
.planrow{
  display:grid; grid-template-columns:96px 74px 1fr auto auto; gap:12px;
  align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12.5px;
}
.planrow:last-child{border-bottom:0}
.planrow .datum{color:var(--text-2)}
.planrow .no{color:var(--route); font-weight:700}
.planrow .strecke b{letter-spacing:.06em}
.planrow .strecke em{font-style:normal; color:var(--muted); margin:0 6px}
.planrow .ort{font-size:10.5px; color:var(--muted); margin-top:2px}
.planrow .bis{
  font-size:11px; letter-spacing:.06em; color:var(--visit); white-space:nowrap;
}
.planrow .bis.faellig{color:var(--route); font-weight:700}
.planrow .werkzeug{display:flex; gap:6px}
.planrow .btn{min-height:28px; padding:4px 10px; font-size:9.5px}
@media(max-width:640px){
  .planrow{grid-template-columns:1fr auto; row-gap:6px}
  .planrow .datum{grid-column:1}
  .planrow .no{grid-column:2; text-align:right}
  .planrow .strecke{grid-column:1 / -1}
  .planrow .bis{grid-column:1}
  .planrow .werkzeug{grid-column:2; justify-content:flex-end}
}

/* ── Rückfrage ──
   Ersetzt confirm(). Die Browsermeldung sieht auf jedem Gerät anders
   aus, nennt die Domain und ignoriert die Farbwelt. */
.frage{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); padding:18px;
}
.frage.hidden{display:none}
.frage-in{
  width:min(420px, 100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 20px 16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.frage-in h3{
  margin:0 0 8px; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text);
}
.frage-in p{
  margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--text-2);
  white-space:pre-line;
}
.frage-knoepfe{display:flex; justify-content:flex-end; gap:8px}
.frage-in .btn-gefahr{
  background:transparent; border-color:var(--warn, #ff6b6b); color:var(--warn, #ff6b6b);
}