:root {
  --bg: rgba(255, 255, 255, .93);
  --fg: #1c1f23;
  --dim: #6a7178;
  --line: rgba(0, 0, 0, .12);
  --accent: #2f6fb0;
  --shadow: 0 2px 14px rgba(0, 0, 0, .22);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgba(28, 31, 35, .94);
    --fg: #e9edf1;
    --dim: #9aa3ab;
    --line: rgba(255, 255, 255, .15);
    --accent: #6fa8dc;
    --shadow: 0 2px 16px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); }
#map { position: absolute; inset: 0; z-index: 0; }

/* Die Schummerung liegt als eigene Kachelebene über der Grundkarte (beide
   bekommen in app.js ein `className`, Leaflet gibt jeder einen eigenen
   Container). `multiply` statt bloßer Deckkraft: Grau dunkelt ab, Weiß
   lässt stehen — dadurch bleibt die Beschriftung der Grundkarte scharf,
   statt unter einem grauen Schleier zu verblassen. Das Blenden bleibt auf
   den Kachel-Pane beschränkt, die Datenlayer darüber sind nicht betroffen. */
.basemap-shade { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  /* Im Dunkelmodus die ganze Grundlage zurücknehmen, damit die Farbskalen
     der Prognose leuchten. */
  .basemap-plain { filter: brightness(.78) saturate(.85); }
}

.dim { color: var(--dim); }
.small { font-size: 12px; }
.err { color: #c0392b; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

#boot {
  position: absolute; inset: 0; z-index: 2000; display: grid; place-content: center;
  text-align: center; background: var(--bg); padding: 24px;
}
#boot code { background: rgba(127,127,127,.18); padding: 2px 6px; border-radius: 4px; }

/* Warteschlange (src/admission.js): liegt über allem, auch über #boot und
   einer schon geladenen Karte, die dahinter stehen bleibt. */
#queue {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  padding: 16px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(3px);
}
#queue .queue-card {
  max-width: 420px; padding: 22px 24px; text-align: center; background: var(--bg);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#queue h2 { margin: 0 0 10px; font-size: 19px; }
#queue .queue-pos { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--accent); }
#queue .queue-why { margin: 0 0 8px; }
#queue .queue-hint { margin: 0; color: var(--dim); font-size: 12px; }

/* ------------------------------------------------------------- Kopfzeile */
/* Die Kopfzeile trägt nur noch zwei Dinge: welche Ebene liegt auf der Karte,
   und wo will ich hin. Alles Weitere steckt im Ebenenpanel darunter — es
   gehört in dieselbe Spalte, damit es unter dem Knopf aufklappt, auch wenn
   die Leiste auf schmalen Anzeigen zweizeilig wird. */
/* Die Spalte reicht bis kurz über den Zeitregler. Das ist kein Selbstzweck:
   das Panel darunter bekommt damit eine echte Höhe zum Schrumpfen, statt
   dass eine geratene max-height auf schmalen Anzeigen in die Zeitleiste
   läuft. Die Fläche selbst nimmt keine Klicks an — die Karte bleibt
   überall greifbar, nur die Kinder fangen ab. */
#top {
  position: absolute; z-index: 1100; top: 10px; left: 10px; right: 68px; bottom: 116px;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
#top > * { pointer-events: auto; }
/* Die Leiste selbst ist nur ein Behälter — zwischen Knopf, Suchfeld und
   Zählung soll die Karte weiter zu fassen sein. */
#top > .bar { pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.layer-btn, .toggle, .control {
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-size: 13px; box-shadow: var(--shadow); white-space: nowrap;
}
.layer-btn.small { padding: 4px 9px; font-size: 12px; }
.layer-btn:hover, .toggle:hover, .control:hover { border-color: var(--accent); }
.layer-btn.active, .toggle.active {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.toggle:disabled { opacity: .5; cursor: default; border-color: var(--line); }

/* Ebenenknopf: trägt den Namen der Ebene, die gerade zu sehen ist. */
.control {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  max-width: min(280px, 60vw); font: inherit; font-size: 13px; padding: 6px 10px 6px 12px;
}
.control .ic { color: var(--accent); font-size: 12px; }
.control-label {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.control .caret { color: var(--dim); font-size: 10px; transition: transform .15s; }
.control.open { border-color: var(--accent); }
.control.open .caret { transform: rotate(180deg); }

/* Zählung der bewerteten Startplätze — verschwindet, solange nichts dasteht. */
.pill {
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; box-shadow: var(--shadow); white-space: nowrap;
}
.pill:empty { display: none; }

/* ------------------------------------------------------------ Ebenenpanel */
#layer-panel, #base-panel {
  width: min(320px, 100%); align-self: flex-start;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  /* Schrumpft in den Platz, den die Kopfzeile übrig lässt (siehe #top) */
  flex: 0 1 auto; min-height: 0; max-height: 560px;
}
#layer-panel[hidden], #base-panel[hidden] { display: none; }   /* sonst setzt sich das flex durch */

.lp-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; }
#layer-search {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: transparent;
  color: var(--fg); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px;
}
#layer-search:focus { outline: none; border-color: var(--accent); }
#layer-search::placeholder { color: var(--dim); }
#layer-panel-close, #base-close {
  border: 0; background: transparent; color: var(--dim);
  font-size: 21px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#layer-panel-close:hover, #base-close:hover { color: var(--fg); }

/* Ebenenliste und Überlagerungen scrollen getrennt.
   Vorher teilten sie sich einen Scrollbereich, in dem der Fuß unten klebte.
   Das trug, solange der Fuß aus zwei Schaltern bestand — mit Windpfeilen,
   Vektorhöhen und Luftraumsteuerung ist er auf über 400 px gewachsen und
   nahm sich davon so viel, dass von der Ebenenliste zwei Zeilen sichtbar
   blieben. Die Ebenenwahl ist der Zweck des Panels und bekommt deshalb den
   Vorrang; der Fuß ist gedeckelt und scrollt selbst, wenn er nicht passt.
   Auf niedrigen Anzeigen (Telefon quer) bleiben so beide erreichbar. */
.lp-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.lp-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 8px 6px;
}
.lp-group + .lp-group { margin-top: 6px; }
.lp-group[hidden] { display: none; }
.lp-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); padding: 6px 4px 3px;
  position: sticky; top: 0; background: var(--bg);
}

.lp-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  border: 0; background: transparent; color: var(--fg); font: inherit;
  text-align: left; padding: 7px 9px; border-radius: 8px; cursor: pointer;
  /* Platz für den Haken der aktiven Ebene, damit beim Wechsel nichts springt */
  border-left: 3px solid transparent;
}
.lp-item[hidden] { display: none; }
.lp-item:hover, .lp-item.cursor { background: rgba(127, 127, 127, .14); }
.lp-item.cursor { outline: 1px solid var(--accent); outline-offset: -1px; }
.lp-item.active {
  border-left-color: var(--accent); background: rgba(47, 111, 176, .13); font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .lp-item.active { background: rgba(111, 168, 220, .18); }
}
.lp-item .lp-name { flex: 1; min-width: 0; }
.lp-item .lp-unit { flex: none; }
.lp-empty { padding: 12px 9px; }
.lp-empty[hidden] { display: none; }

/* Überlagerungen: liegen nicht *statt* der Ebene auf der Karte, sondern
   zusätzlich — deshalb Schalter statt Auswahlliste, deutlich abgesetzt. */
.lp-foot {
  flex: 0 0 auto; max-height: 45%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  border-top: 1px solid var(--line); padding: 6px 8px 8px;
}
.lp-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: var(--fg); font: inherit;
  text-align: left; padding: 6px 9px; border-radius: 8px; cursor: pointer;
}
.lp-row:hover { background: rgba(127, 127, 127, .14); }
.lp-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lp-row-text .dim { line-height: 1.3; }
.lp-row .knob {
  flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: rgba(127, 127, 127, .38); position: relative; transition: background .15s;
}
.lp-row .knob::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .15s;
}
.lp-row.active .knob { background: var(--accent); }
.lp-row.active .knob::after { transform: translateX(14px); }

#vectors { padding: 2px 9px 2px; }
/* Solange die Pfeile aus sind, sind die Höhen nur ein Angebot. Ein Klick
   darauf schaltet sie an (siehe app.js), deshalb bleiben sie bedienbar. */
#vectors.off { opacity: .55; }
/* Nicht jede Druckfläche führen beide Modelle: 975 hPa gibt es nur bis
   +48 h, 925 bis 775 hPa erst darüber. Zur jeweiligen Stunde leere Höhen
   stehen durchgestrichen da statt zu verschwinden — sonst spränge die Reihe
   bei jedem Schritt des Zeitreglers um. Bedienbar bleiben sie: ein Klick
   darauf und ein Schritt in den anderen Modellteil zeigt sie an. */
#vectors .layer-btn.unavailable { opacity: .4; text-decoration: line-through; }

/* Höhenfilter und Farbwahl der Lufträume — dieselbe Regel wie bei den
   Windhöhen: aus, aber bedienbar, denn ein Klick schaltet die Ebene mit ein. */
#airspace-controls.off { opacity: .55; }
/* Bei ausgeschalteter Ebene sagt die Legende nichts über die Karte aus. */
#airspace-controls.off .as-legend,
#airspace-controls.off .as-hint { display: none; }

/* Der Live-Verkehr trägt dieselben Reihen wie die Lufträume — es ist
   dieselbe Art Bedienung, und zwei Gestaltungen dafür wären eine zu viel. */
#ogn-controls.off { opacity: .55; }
#ogn-controls.off .as-legend,
#ogn-controls.off .as-hint { display: none; }
/* Rund statt Balken: die Punkte stehen für Luftfahrzeuge, nicht für
   Luftraumgrenzen. */
#ogn-legend .sw { width: 8px; height: 8px; border-radius: 50%; vertical-align: 0; }

.as-row { display: flex; align-items: center; gap: 7px; padding: 2px 9px; }
.as-label { flex: none; width: 38px; }

.as-legend { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
  padding: 4px 9px 2px; line-height: 1.5; }
.as-legend .sw { display: inline-block; width: 11px; height: 4px;
  border-radius: 2px; margin-right: 4px; vertical-align: 2px; }
.as-hint { padding: 0 9px 4px; line-height: 1.35; }

/* Die Lufträume unter dem Zeiger stehen unter dem Messwert; sie dürfen die
   Anzeige nicht zur Textwand machen. */
.as-hit { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35;
  border-top: 1px solid var(--line); padding-top: 3px; }

/* Der Verkehr unter dem Zeiger steht in derselben Anzeige. Der farbige Punkt
   davor ist die Verbindung zum Zeichen auf der Karte — ohne ihn müsste man
   raten, welches der drei Ziele gemeint ist. */
.ogn-hit { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35;
  border-top: 1px solid var(--line); padding-top: 3px; }
.ogn-hit .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px; }
.ogn-hit .up { color: #2e9e4f; font-weight: 600; }

/* ----------------------------------------------------------- Platzsuche */
/* Wächst neben dem Ebenenknopf mit, bricht erst um, wenn darunter wirklich
   kein Platz mehr ist. */
#search-wrap { position: relative; flex: 1 1 170px; min-width: 0; max-width: 300px; }

#site-search {
  width: 100%; border: 1px solid var(--line); background: var(--bg);
  color: var(--fg); border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 13px; box-shadow: var(--shadow);
}
#site-search:focus { outline: none; border-color: var(--accent); }
#site-search::placeholder { color: var(--dim); }

#site-results {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  max-height: min(46vh, 340px); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#site-results[hidden] { display: none; }
#site-results li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 9px; border-radius: 7px; cursor: pointer; line-height: 1.3;
}
#site-results li.active { background: var(--accent); color: #fff; }
#site-results li.active .dim { color: rgba(255, 255, 255, .8); }
#site-results li.msg { cursor: default; }
.hit-name { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.hit-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 5px;
  color: var(--dim);
}
#site-results li.active .hit-kind { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hit-detail { font-size: 11px; }

/* Suchtreffer auf der Karte: gestrichelter Ring, damit er sich von den
   bewerteten Startplatzmarkern unterscheidet. */
.search-hit-label {
  background: var(--bg); color: var(--fg); border: 1px solid var(--accent);
  border-radius: 6px; box-shadow: var(--shadow); font-size: 12px;
  font-weight: 600; padding: 2px 6px;
}
.search-hit-label::before { display: none; }

/* -------------------------------------------------------------- Anzeigen */
#readout {
  position: absolute; z-index: 1000; right: 10px; top: 108px;
  background: var(--bg); border-radius: var(--radius); padding: 8px 11px;
  box-shadow: var(--shadow); min-width: 172px; font-size: 13px;
  /* Mit eingeschalteten Lufträumen stehen hier bis zu drei Namen — ohne
     Deckel wüchse der Kasten sonst quer über die Karte. */
  max-width: min(330px, 44vw);
}

#legend {
  position: absolute; z-index: 1000; left: 10px; bottom: 124px;
  width: 258px; background: var(--bg); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: var(--shadow);
}
#legend-title { font-weight: 600; margin-bottom: 6px; }
#legend-bar { height: 13px; border-radius: 3px; border: 1px solid var(--line); }
.ticks { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--dim); margin-top: 3px; }
#legend-note { margin-top: 6px; line-height: 1.35; }
#legend-tip { display: inline-block; margin-top: 5px; color: var(--accent); text-decoration: none; }
#legend-tip:hover { text-decoration: underline; }
/* Tipps: ein Link, der wie die anderen Knöpfe der Kopfzeile aussieht */
a.control { text-decoration: none; }
.mg-help { margin-left: auto; margin-right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--line); color: var(--accent); font-weight: 700; font-size: 13px;
  text-decoration: none; }
.mg-help:hover { border-color: var(--accent); }
.mg-3d { margin-left: auto; margin-right: 6px; padding: 2px 9px; border-radius: 11px; flex: none;
  border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 12px;
  text-decoration: none; white-space: nowrap; }
.mg-3d:hover { background: var(--accent); color: #fff; }
.mg-3d:not([hidden]) + .mg-help { margin-left: 0; }
.lp-tip { display: block; padding: 2px 12px 8px; color: var(--accent); text-decoration: none; }
.lp-tip:hover { text-decoration: underline; }
#welcome a { color: var(--accent); font-weight: 600; }
.opacity { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; color: var(--dim); }
.opacity input { flex: 1; }
#runinfo { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }

/* ----------------------------------------------------------- Zeitregler */
#timebar {
  position: absolute; z-index: 1000; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: var(--radius);
  padding: 8px 12px; box-shadow: var(--shadow);
}
#play {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font-size: 15px; cursor: pointer;
}
#play.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.time-wrap { flex: 1; min-width: 0; }
.time-head { display: flex; align-items: center; gap: 9px; margin-bottom: 1px; }
#time-label { font-weight: 600; font-variant-numeric: tabular-nums; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.badge.fine { background: rgba(60, 150, 90, .18); color: #2e8b52; border-color: transparent; }
.badge.coarse { background: rgba(200, 140, 40, .2); color: #b57d20; border-color: transparent; }
/* Interpolierte Zwischenzeiten werden gekennzeichnet — sie sind kein
   eigener Modellzeitpunkt, und das soll man sehen können. */
.badge.interp { outline: 1px dashed var(--dim); outline-offset: 1px; }

#timeline-canvas {
  display: block; width: 100%; height: 62px;
  cursor: ew-resize; touch-action: none;
}

.sunkey { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sunkey i { display: inline-block; }
.sunkey .band { width: 13px; height: 9px; border-radius: 2px; margin-left: 6px; }
.sunkey .band.day { background: rgba(255, 205, 90, .55); }
.sunkey .band.twilight { background: rgba(240, 140, 70, .55); }
.sunkey .band.night { background: rgba(45, 60, 100, .55); }
.sunkey .dot { width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; }
.sunkey .dot.rise { background: rgb(230, 175, 50); }
.sunkey .dot.set { background: rgb(205, 85, 55); }

/* ---------------------------------------------------------- Meteogramm */
/* So groß, wie der Bildschirm über der Zeitleiste hergibt: die Höhenachse
   reicht bis 6000 m und trägt jede Druckfläche des Zyklus mit Windfahnen,
   bis zu dreizehn — je mehr Fläche das Diagramm bekommt, desto weiter
   liegen sie auseinander und desto größer bleiben die Fahnen.
   Darum keine feste Größe, sondern aufgespannt zwischen Kopfzeile und
   Zeitleiste: das Canvas wächst über den ResizeObserver in app.js mit. */
#meteogram {
  position: absolute; z-index: 1200;
  left: 10px; right: 10px; top: 52px; bottom: 106px;
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: none; flex-direction: column;
}
#meteogram.open { display: flex; }
.mg-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 4px; }
#meteogram-close { border: 0; background: transparent; color: var(--fg);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
/* flex-basis 0 statt auto: das Canvas hat über sein height-Attribut eine
   Intrinsic-Höhe (Breite × devicePixelRatio), die sonst als Basis zählt und
   die Legende aus dem Rahmen drückt. min-height: 0 erlaubt das Schrumpfen. */
#meteogram-canvas { flex: 1 1 0; min-height: 0; width: 100%; }

/* Ladeanzeige: liegt über Diagramm, Tagesreitern und Legende, bis die
   Zeitreihe da ist. Ein Mini-Meteogramm, das sich füllt, und darüber ein
   Schirm, der die Kurve abfliegt. */
.mg-loading {
  position: absolute; left: 12px; right: 12px; top: 44px; bottom: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: var(--bg); border-radius: 6px; text-align: left;
}
.mg-loading[hidden] { display: none; }
/* Was vom vorigen Punkt noch dasteht, schimmerte durch den halbtransparenten
   Hintergrund — beim Laden ganz weg damit. */
#meteogram.loading > :not(.mg-head, .mg-loading) { visibility: hidden; }
.mg-ld-art { width: min(320px, 80%); height: auto; overflow: visible; }
.mg-ld-bars rect {
  transform-box: fill-box; transform-origin: bottom;
  animation: mg-ld-grow 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes mg-ld-grow {
  0%, 100% { transform: scaleY(.25); opacity: .45; }
  50% { transform: scaleY(1); opacity: .9; }
}
.mg-ld-curve { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 300; animation: mg-ld-draw 3.2s linear infinite; }
@keyframes mg-ld-draw { from { stroke-dashoffset: 300; } 60%, to { stroke-dashoffset: 0; } }
.mg-ld-glider { fill: var(--fg); }
.mg-ld-wing { fill: none; stroke: #d0453a; stroke-width: 3; stroke-linecap: round; }
.mg-ld-lines { fill: none; stroke: var(--dim); stroke-width: .7; }
.mg-ld-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mg-ld-steps li { display: flex; align-items: baseline; gap: 8px; color: var(--dim);
  transition: color .2s; }
.mg-ld-steps li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--line); align-self: center; box-sizing: border-box; }
.mg-ld-steps li.active { color: var(--fg); font-weight: 600; }
.mg-ld-steps li.active::before { border-color: var(--accent); border-right-color: transparent;
  animation: mg-ld-spin .8s linear infinite; }
.mg-ld-steps li.done { color: var(--fg); }
.mg-ld-steps li.done::before { content: '✓'; border: 0; width: 10px; height: auto;
  color: #4a8f5b; font-weight: 700; font-size: 12px; line-height: 1; }
@keyframes mg-ld-spin { to { transform: rotate(360deg); } }
.mg-ld-hint { max-width: 420px; margin: 0; text-align: center; text-wrap: balance;
  animation: mg-ld-fade .4s ease-out; }
.mg-ld-hint[hidden] { display: none; }
.mg-ld-hint a { color: var(--accent); font-weight: 600; }
@keyframes mg-ld-fade { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .mg-ld-bars rect, .mg-ld-curve, .mg-ld-hint { animation: none; }
  .mg-ld-bars rect { transform: none; opacity: .7; }
  .mg-ld-glider { display: none; }
}

/* Platzinfo als Untermenue: eingeklappt steht nur die Zusammenfassung da
   (die freigegebenen Richtungen), aufgeklappt der Rest. Zugeklappt kostet
   das Diagramm damit eine Zeile statt dreien. */
.mg-site {
  flex: none; line-height: 1.5; margin: 1px 0 3px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.mg-site[hidden] { display: none; }
.mg-site > summary { cursor: pointer; }
.mg-site > summary::marker { color: var(--accent); }
.mg-site > summary:hover { color: var(--accent); }
.mg-site a { color: var(--accent); }
/* Auflagen koennen sehr lang sein — gekuerzt anzeigen, vollstaendig im Tooltip */
.mg-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mg-days { flex: none; display: flex; gap: 4px; margin: 2px 0 4px; flex-wrap: wrap; }
.day-btn {
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer;
  display: flex; gap: 4px; align-items: baseline;
}
.day-btn:hover { border-color: var(--accent); }
.day-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.day-btn.active .dim { color: rgba(255, 255, 255, .75); }
/* Schalter für den Höhenwind: rechts abgesetzt, damit er nicht als
   weiterer Tag gelesen wird. */
.mg-high { margin-left: auto; color: var(--dim); }
.mg-high.on { color: var(--accent); border-color: var(--accent); }

/* Werteanzeige am Zeiger. Sie schwebt ueber dem Diagramm und ist aus dem
   Fluss genommen — vorher stand hier eine Zeile mit allen siebzehn
   Druckflaechen, fuer die dauerhaft 49 Pixel reserviert waren, auch wenn
   niemand hinfuhr. Die Hoehe gehoert jetzt dem Diagramm.
   pointer-events: none, damit das Faehnchen nicht dem Canvas die
   Zeigerereignisse wegnimmt und unter sich selbst flackert. */
.mg-tip {
  position: absolute; z-index: 3; pointer-events: none;
  /* So breit wie der laengste Zeileninhalt, gedeckelt fuer schmale Fenster.
     Feste 260 px brachen die Zeilen um und machten aus fuenf Angaben acht
     Zeilen — das Faehnchen war hoeher als noetig und schwerer zu ueberfliegen. */
  width: max-content; max-width: min(340px, 74vw); padding: 6px 9px;
  /* Deckend, nicht wie die uebrigen Kaesten leicht durchscheinend: das
     Faehnchen liegt unmittelbar auf den Fahnen, und durch --bg schienen sie
     mitten durch die Zahlen, die man gerade abliest. */
  background: #fff; color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.4; font-variant-numeric: tabular-nums;
}
.mg-tip[hidden] { display: none; }
.mg-tip > div:empty { display: none; }
.mg-tip-head { font-weight: 600; display: flex; gap: 7px; align-items: baseline; }
.mg-tip-head .dim { font-weight: 400; }
/* Der abgelesene Wert eine Spur groesser als der Zusammenhang darunter:
   er ist der Grund, aus dem man hingefahren ist. */
.mg-tip-wind { display: flex; align-items: baseline; gap: 5px; margin: 1px 0 2px; }
.mg-tip-wind b { font-size: 15px; }
/* Die Zusammenhangszeilen brechen nicht mitten in einer Angabe um; passt eine
   nicht mehr, bricht sie am Trenner, nicht zwischen Zahl und Einheit. */
.mg-tip .dim { text-wrap: balance; }
.mg-tip-wind i { width: 9px; height: 9px; border-radius: 2px; flex: none;
  align-self: center; }

/* Senkrechte Marke auf der abgelesenen Stunde. */
#mg-cursor {
  position: absolute; z-index: 2; width: 1px; pointer-events: none;
  background: var(--accent); opacity: .45;
}
#mg-cursor[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  .mg-tip { background: #1b1e22; }
}

/* Legende als Untermenue. Zugeklappt steht eine Zeile da: die Windskala und
   die Farben des Startfensters — die beiden Schluessel, nach denen man
   waehrend des Lesens greift. Der Rest liest sich einmal und liegt danach
   einen Klick tiefer, statt drei Zeilen zu belegen. */
.mg-legend { flex: none; margin-top: 5px; }
/* Die Schluessel stehen in einem eigenen Kasten und nicht direkt im
   <summary>: ein Flex-Container als <summary> verliert in Chrome sein
   Aufklappdreieck, und ohne das sieht niemand, dass darunter noch etwas
   liegt. So bleibt der Marker, wie ihn auch die Platzinfo darueber hat. */
.mg-legend > summary { cursor: pointer; }
.mg-legend > summary::marker { color: var(--accent); }
.mg-legend > summary:hover { color: var(--accent); }
.mg-keys {
  display: inline-flex; flex-wrap: wrap; vertical-align: middle;
  column-gap: 8px; row-gap: 3px; align-items: center;
}
/* Durchgehende Farbleiste statt einzelner Kaestchen mit Text daneben: die
   Stufen grenzen aneinander, also soll man sie auch aneinander sehen. */
.mg-scale { display: inline-flex; border-radius: 3px; overflow: hidden; }
.mg-scale i {
  font-style: normal; font-size: 10px; line-height: 1;
  color: #fff; padding: 3px 6px; white-space: nowrap;
}
.mg-legend-more { display: flex; flex-wrap: wrap;
  column-gap: 12px; row-gap: 2px; margin-top: 5px; }
.mg-legend-more .sw { display: inline-block; width: 11px; height: 11px;
  border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.mg-legend-more .sw.dash { border-top: 2px dashed #b00; height: 0; border-radius: 0; }
.mg-legend-more .sw.zero { border-top: 2px dashed #2b7bbd; height: 0; border-radius: 0; background: none; }
.mg-legend-more .sw.smooth {
  background: repeating-linear-gradient(135deg, rgba(120,90,60,.45) 0 1px, transparent 1px 4px);
}/* Die Hoehenstufen als gestapelte Saeule, nicht als fuenf einzelne
   Kaestchen: so steht in der Legende, was im Diagramm steht — untereinander,
   in derselben Reihenfolge, unten das Tal. */
.mg-belts {
  display: inline-flex; flex-direction: column-reverse;
  width: 10px; height: 17px; border-radius: 2px; overflow: hidden;
  margin-right: 5px; vertical-align: -4px;
}
.mg-belts i { flex: 1; }

/* Der Rasterlayer soll beim Zoomen nicht weichgezeichnet werden — die
   Zellgrenzen sind echte Information, keine Artefakte. */
.grid-overlay { image-rendering: pixelated; }

/* Startplatzmarker. Nah am Gelände (Klasse am Container, gesetzt in app.js
   ab derselben Zoomstufe, ab der die Sektoren erscheinen) bekommen sie den
   kräftigen dunklen Ring: aus ihm geht der Fächer hervor, und der Punkt
   bleibt darin als Träger der Bewertung erkennbar. Über die Klasse statt
   über setStyle, weil sonst bei jedem Zoomschritt 2500 Marker einzeln
   umgestellt werden müssten. */
.leaflet-container.zoom-near .site-dot {
  stroke: #16191d;
  stroke-width: 3.2;
  stroke-opacity: .88;
}
@media (prefers-color-scheme: dark) {
  .leaflet-container.zoom-near .site-dot { stroke: #0b0d10; }
}

.leaflet-popup-content { font-size: 13px; line-height: 1.45; }
.leaflet-popup-content b { font-size: 14px; }

/* Startplatz-Popup (sitePopup in app.js). Das Popup bleibt auch im
   Dunkelmodus hell (Leaflet-Standard), deshalb feste Farben statt --fg/--dim. */
.leaflet-popup-content:has(> .sp) { margin: 12px 14px 12px; min-width: 230px; }
.sp { color: #1c1f23; }
.sp .dim { color: #6a7178; }
.sp b { font-size: inherit; font-weight: 600; }
.sp-head { padding-right: 14px; }          /* Platz für das ✕ */
.sp-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.sp-sub { font-size: 12px; margin-top: 1px; }
.sp-verdict {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 0; font-size: 12px;
}
.sp-badge {
  background: var(--vc); color: #fff; font-weight: 700; font-size: 11px;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
}
.sp-reasons {
  margin: 7px 0 0; padding: 6px 8px 6px 22px; font-size: 12px; line-height: 1.4;
  background: #f4f5f7; border-left: 3px solid var(--vc); border-radius: 4px;
}
.sp-reasons li + li { margin-top: 2px; }
.sp-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid #e3e6ea;
}
.sp-grid dt { color: #6a7178; font-size: 12px; white-space: nowrap; padding-top: 1px; }
.sp-grid dd { margin: 0; }
.sp-btn {
  display: block; margin-top: 11px; padding: 6px 10px; text-align: center;
  border-radius: 7px; background: #2f6fb0; font-weight: 600;
  text-decoration: none;
}
.leaflet-container a.sp-btn, .leaflet-container a.sp-btn:hover { color: #fff; }
.sp-btn:hover { background: #255d96; }

/* ------------------------------------------------------------- Mobilgeräte */
@media (max-width: 720px) {
  #top { right: 10px; }
  #legend { display: none; }
  #readout { top: auto; bottom: 165px; right: 10px; left: 10px; min-width: 0; }
  /* Die Leiste oben bricht auf schmalen Anzeigen zweizeilig um — dafür etwas
     mehr Luft lassen, damit Ebenenknopf und Suchfeld sichtbar bleiben. */
  #meteogram { top: 92px; bottom: 84px; }
  .layer-btn { font-size: 12px; padding: 5px 9px; }

  /* Ebenenknopf und Suchfeld teilen sich die erste Zeile; der Knopf gibt
     nach, damit das Suchfeld nicht auf Briefmarkengröße schrumpft. */
  .control { max-width: 46vw; padding: 7px 9px 7px 11px; }
  #search-wrap { flex: 1 1 130px; }
  #sites-summary { font-size: 11px; padding: 3px 9px; }

  /* Volle Breite; die Höhe ergibt sich aus der Kopfzeilenspalte (#top) */
  #layer-panel, #base-panel { width: 100%; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #welcome { top: auto; bottom: 130px; transform: translateX(-50%); }
  /* Fingerbreite Ziele statt Mausziele */
  .lp-item, .lp-row { padding-top: 10px; padding-bottom: 10px; }
  #layer-search { padding: 9px 11px; }
  #vectors .layer-btn { padding: 6px 11px; font-size: 12px; }
  /* Auf schmalen Anzeigen hat die Sonnenlegende keinen Platz — die Bänder
     erklären sich in der Leiste selbst. */
  .sunkey { display: none; }
  #timeline-canvas { height: 54px; }
}

/* ------------------------------------------------------------- Flugbuch */
/* Eine Spalte am linken Rand, nicht die ganze Breite wie das Meteogramm:
   der ausgewählte Flug liegt als Track auf der Karte, und ein Fenster, das
   ihn verdeckt, nähme dem Flugbuch seinen Sinn. Die Liste oben, der
   gewählte Flug darunter — in der Reihenfolge, in der man sie liest. */
#flightlog {
  position: absolute; z-index: 1250;
  left: 10px; top: 52px; bottom: 106px;
  width: min(420px, calc(100vw - 20px));
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
#flightlog[hidden] { display: none; }   /* sonst setzt sich das flex durch */

.fl-head { display: flex; align-items: center; gap: 8px;
  font-weight: 600; flex: none; }
#fl-device { font-weight: 400; }
#flightlog-close { border: 0; background: transparent; color: var(--fg);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
  margin-left: auto; }

.fl-tabs { display: flex; gap: 6px; flex: none; }
.fl-tabs .toggle[aria-selected="true"] {
  border-color: var(--accent); color: var(--accent); }

.fl-form { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.fl-form[hidden] { display: none; }
#fl-number {
  width: 140px; font: inherit; font-variant-numeric: tabular-nums;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 8px; color: var(--fg);
  background: transparent; border: 1px solid var(--line);
}
#fl-number:focus { outline: none; border-color: var(--accent); }
.fl-status { flex: none; line-height: 1.4; min-height: 17px; }
.fl-status .ok { color: #2e8b52; }
.fl-live { color: #2e8b52; }

.fl-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  gap: 8px; }
/* Die Liste bekommt höchstens die halbe Höhe: sie ist der Weg zum Flug,
   nicht das Ziel. Sind erst drei Flüge da, schrumpft sie auf deren Höhe. */
.fl-list { flex: 0 1 auto; max-height: 45%; min-height: 0;
  overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.fl-empty { padding: 10px 2px; }

.fl-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 8px;
  background: transparent; color: var(--fg); font: inherit; cursor: pointer;
}
.fl-row:hover { background: rgba(127, 127, 127, .14); }
.fl-row.active { border-color: var(--accent); background: rgba(127, 127, 127, .1); }
.fl-when { display: flex; flex-direction: column; }
.fl-nums { display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.fl-nums span:first-child { min-width: 62px; }
/* Die eigene Nummer in der Österreich-Liste: derselbe Aufbau, nur
   hervorgehoben — sie ist der Grund, warum man die Liste aufmacht. */
.fl-row.mine { border-color: var(--accent); }
.fl-who { font-variant-numeric: tabular-nums; }
.fl-day { position: sticky; top: 0; z-index: 1; background: var(--bg);
  padding: 4px 2px 2px; font-size: 11px; color: var(--dim); }

.fl-detail { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; }
.fl-detail:empty::before {
  content: 'Einen Flug in der Liste wählen — der Track erscheint auf der Karte.';
  color: var(--dim); font-size: 12px;
}
.fl-detail-head { display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px; }
.fl-igc { color: var(--accent); font-size: 12px; margin-left: auto; }

/* Feste Höhe statt flex: das Barogramm steht in einer scrollenden Spalte
   und hätte dort keine Höhe, aus der es sich seine ableiten könnte. */
.fl-baro { width: 100%; height: 190px; display: block; touch-action: none; }
.fl-probe { min-height: 17px; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }

.fl-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.fl-stats dt { white-space: nowrap; }
.fl-stats dd { margin: 0; }

.fl-legend { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
  margin-bottom: 6px; }
.fl-legend .sw { display: inline-block; width: 11px; height: 4px;
  border-radius: 2px; margin-right: 4px; vertical-align: 3px; }
.fl-note { line-height: 1.4; margin: 0; }

/* Auf dem Telefon steht das Flugbuch über der ganzen Breite — dort ist
   nebeneinander ohnehin kein Platz, und der Track lässt sich nach dem
   Schließen ansehen: er bleibt liegen. */
@media (max-width: 560px) {
  #flightlog { right: 10px; width: auto; }
  .fl-baro { height: 150px; }
}

/* --------------------------------------------------------- Wartungsmenue */
/* Versteckt (siehe admin.js): oeffnet mit Strg+Alt+A oder ueber #admin.
   Liegt ueber dem Meteogramm, damit es beim Nachsehen nicht verschwindet. */
#admin {
  position: absolute; z-index: 1300; right: 10px; bottom: 106px;
  width: min(360px, calc(100vw - 20px));
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
#admin[hidden] { display: none; }   /* sonst setzt sich das flex durch */

.admin-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; }
#admin-close { border: 0; background: transparent; color: var(--fg);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#admin-state { line-height: 1.45; }

.admin-bar { height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(127, 127, 127, .22); }
.admin-bar > i { display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .4s ease; }
.admin-bar.error > i { background: #c0392b; }

/* Solange die Gesamtzahl der Schritte nicht feststeht - vor dem ersten
   Zeitschritt und im Moment, in dem der ICON-EU-Teil dazukommt - zeigt der
   Balken Bewegung statt einer erfundenen Zahl. */
.admin-bar.indeterminate > i { width: 35%; animation: admin-sweep 1.4s ease-in-out infinite; }
@keyframes admin-sweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(300%); }
}

/* ------------------------------------------------------------- Konto */
/* Dieselbe Spalte wie das Flugbuch: links, zwischen Kopf- und Zeitleiste. */
#account {
  position: absolute; z-index: 1250;
  left: 10px; top: 52px; bottom: 106px;
  width: min(460px, calc(100vw - 20px));
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
#account[hidden] { display: none; }
.ac-close { border: 0; background: transparent; color: var(--fg);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: auto; }
.ac-body { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; padding-right: 2px; }
.ac-tabs { flex-wrap: wrap; }

#account-btn { position: relative; }
.badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #d8952f; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.badge-count.over { background: #c0392b; }
.badge-count[hidden] { display: none; }

.ac-msg { padding: 6px 9px; border-radius: 8px; font-size: 13px; }
.ac-msg.ok { background: rgba(60, 150, 90, .15); color: #2e8b52; }
.ac-msg.err { background: rgba(192, 57, 43, .12); color: #c0392b; }

.ac-form { display: flex; flex-direction: column; gap: 7px; }
.ac-form + .ac-form { border-top: 1px solid var(--line); padding-top: 10px; }
.ac-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px;
  color: var(--dim); }
.ac-form input, .ac-form select, .ac-form textarea {
  font: inherit; font-size: 14px; color: var(--fg); background: transparent;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; min-width: 0; }
.ac-form select option { color: #1c1f23; }
.ac-form input:focus, .ac-form select:focus, .ac-form textarea:focus {
  outline: none; border-color: var(--accent); }
.ac-form input:disabled { opacity: .6; }
.ac-form label.ac-check { flex-direction: row; align-items: center; gap: 7px;
  color: var(--fg); font-size: 13px; }
.ac-inline-field { display: flex; align-items: center; gap: 6px; color: var(--fg); }
.ac-inline-field input { width: 80px; }
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-form-title { font-weight: 600; margin-top: 4px; }
.ac-note { padding: 6px 9px; border-radius: 8px; background: rgba(200, 140, 40, .13);
  line-height: 1.4; }
.ac-note.ok { background: rgba(60, 150, 90, .13); }
.ac-inline { border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  margin-top: 4px; }

.ac-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle.danger { color: #c0392b; }
.toggle.danger:hover { border-color: #c0392b; }
.ac-x { border: 0; background: transparent; color: var(--dim); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px; }
.ac-x:hover { color: #c0392b; }

.ac-task-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.ac-task-edit > input[data-t="name"] { flex: 1 1 100%; }
.ac-task-edit label { flex-direction: row; align-items: center; gap: 4px; }
.ac-task-edit input[type="number"] { width: 64px; padding: 4px 6px; }
.ac-task-edit input[type="date"] { padding: 4px 6px; }
.ac-task-edit .ac-x { margin-left: auto; }

.ac-list { display: flex; flex-direction: column; gap: 8px; }
.ac-item { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px; }
.ac-item.retired { opacity: .6; }
.ac-item-head { display: flex; align-items: center; gap: 8px; }
.ac-kind { width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(47, 111, 176, .12); color: var(--accent); font-size: 15px; }
.ac-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ac-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; }
.ac-task { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; }
.ac-task .dot, .ac-notes .dot { width: 9px; height: 9px; border-radius: 50%;
  flex: none; margin-top: 4px; display: inline-block; }

.st-over { background: #c0392b; color: #fff; }
.st-soon { background: #d8952f; color: #fff; }
.st-ok { background: #2e9e4f; color: #fff; }
.st-unknown { background: var(--dim); color: #fff; }
.st-retired { background: var(--line); color: var(--fg); }
.st-over-text { color: #c0392b; font-weight: 600; }
.st-soon-text { color: #b57d20; font-weight: 600; }
.st-ok-text, .st-unknown-text, .st-retired-text { color: var(--fg); }

.ac-notes, .ac-history { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.ac-notes li { display: flex; gap: 8px; font-size: 13px; }
.ac-notes li.read { opacity: .55; }
.ac-history li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ac-history .ac-x { margin-left: auto; }

.ac-users { width: 100%; border-collapse: collapse; }
.ac-users th { text-align: left; color: var(--dim); font-weight: 500;
  border-bottom: 1px solid var(--line); padding: 4px; }
.ac-users td { border-bottom: 1px solid var(--line); padding: 6px 4px; vertical-align: top; }
.ac-users tr.inactive td { opacity: .5; }
.ac-user-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Statistik (Administratoren): eine Farbe, dünne Säulen, Werte in Textfarbe */
.st-days { margin: 2px 0 4px; }
.st-h { font-size: 14px; margin: 14px 0 6px; }
.st-h4 { font-size: 12px; margin: 10px 0 4px; color: var(--dim); font-weight: 600; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.st-tile { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.st-tile b { display: block; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.st-tile span { display: block; font-size: 12px; }
.st-tile em { display: block; font-style: normal; font-size: 11px; line-height: 1.3; }
.st-chart { margin: 10px 0 4px; }
.st-chart svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.st-bars path { fill: var(--accent); }
.st-base { stroke: var(--line); stroke-width: 1; }
.st-hits rect { fill: transparent; cursor: crosshair; }
.st-hits rect.on { fill: var(--line); }
.st-axis { display: flex; justify-content: space-between; font-size: 11px;
  font-variant-numeric: tabular-nums; }
.st-read { margin-top: 3px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.st-table summary { cursor: pointer; }
.st-table table { border-collapse: collapse; margin-top: 4px; }
.st-table td { padding: 1px 10px 1px 0; font-variant-numeric: tabular-nums; }
/* Herkunftsarten: feste Reihenfolge, geprüft auf Farbsehschwäche (Kategorien 1–6) */
.st-chart, .st-legend { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; }
@media (prefers-color-scheme: dark) {
  .st-chart, .st-legend { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; }
}
.st-s1 { fill: var(--s1); background: var(--s1); } .st-s2 { fill: var(--s2); background: var(--s2); }
.st-s3 { fill: var(--s3); background: var(--s3); } .st-s4 { fill: var(--s4); background: var(--s4); }
.st-s5 { fill: var(--s5); background: var(--s5); } .st-s6 { fill: var(--s6); background: var(--s6); }
.st-legend { border-collapse: collapse; margin: 2px 0 6px; }
.st-legend td { padding: 1px 10px 1px 0; }
.st-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px;
  vertical-align: -1px; }
.st-trend { min-width: 3.2em; font-size: 11px; }
.st-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
@media (max-width: 520px) { .st-cols { grid-template-columns: 1fr; } }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; gap: 6px;
  align-items: center; padding: 1px 0; }
.st-list li:has(.st-trend) { grid-template-columns: minmax(0, 1.7fr) minmax(16px, .6fr) auto auto; }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 6px; }
.st-bar i { display: block; height: 100%; min-width: 2px; background: var(--accent);
  border-radius: 0 3px 3px 0; }
.st-n { font-variant-numeric: tabular-nums; text-align: right; }
.st-note { margin-top: 12px; line-height: 1.4; }
.ac-user-actions .toggle { padding: 3px 7px; font-size: 11px; }

@media (max-width: 720px) {
  #account { top: 92px; bottom: 84px; width: calc(100vw - 20px); }
  .ac-grid { grid-template-columns: 1fr; }
  #account-btn .control-label { display: none; }
  .ac-form input, .ac-form select, .ac-form textarea { font-size: 16px; }
}

/* ------------------------------------------------- Schnellwahl und Einstieg */
.quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.quick > * { flex: none; }
#base-panel { width: min(260px, 100%); }
#base-panel .lp-list { padding: 0 6px 4px; }
.base-note { margin: 0; padding: 4px 12px 10px; line-height: 1.35; }

/* Ohne Wetterebene bleibt von der Legende nur die Laufinfo */
#legend.no-layer #legend-title, #legend.no-layer #legend-bar,
#legend.no-layer #legend-ticks, #legend.no-layer #legend-note, #legend.no-layer #legend-tip,
#legend.no-layer .opacity { display: none; }
#legend.no-layer #runinfo { margin-top: 0; padding-top: 0; border-top: 0; }

#welcome {
  position: absolute; z-index: 1200; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 20px)); padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#welcome[hidden] { display: none; }
#welcome h2 { margin: 0 0 8px; font-size: 16px; }
#welcome ul { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.45; }
#welcome li + li { margin-top: 5px; }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------- Spende und Impressum */
#donate-btn .heart { color: #d0453a; font-size: 13px; }
#donate-nudge {
  position: absolute; z-index: 1150; right: 10px; bottom: 110px;
  width: min(330px, calc(100% - 20px)); padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  animation: nudge-in .35s ease-out;
}
#donate-nudge[hidden] { display: none; }
#donate-nudge h2 { margin: 0 22px 6px 0; font-size: 15px; }
#donate-nudge .heart { color: #d0453a; }
#donate-nudge p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
#nudge-close { position: absolute; top: 6px; right: 8px; }
@keyframes nudge-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { #donate-nudge { animation: none; } }
@media (max-width: 720px) {
  #donate-nudge { left: 10px; right: 10px; bottom: 140px; width: auto; }
}
.legal-links { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.legal-links a { color: var(--dim); }
#donate-dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto;
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  background: var(--bg); color: var(--fg);
}
#donate-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dn-head { display: flex; align-items: center; }
.dn-head h2 { font-size: 17px; margin: 0; flex: 1; }
.dn-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin: 10px 0; }
.dn-table { border-collapse: collapse; flex: 1 1 250px; font-size: 13px; }
.dn-table th { text-align: left; font-weight: 500; color: var(--dim); padding: 5px 12px 5px 0;
  vertical-align: top; white-space: nowrap; }
.dn-table td { padding: 5px 0; }
.dn-val { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600;
  user-select: all; }
.dn-copy { border: 0; background: transparent; color: var(--accent); cursor: pointer;
  font-size: 12px; padding: 0 0 0 6px; }
.dn-qr { margin: 0; text-align: center; flex: none; }
.dn-qr img { display: block; width: 168px; height: 168px; background: #fff; border-radius: 8px;
  image-rendering: pixelated; }
.dn-qr figcaption { max-width: 168px; margin-top: 4px; }
@media (max-width: 720px) {
  #donate-btn .control-label { display: none; }
}

/* Text nur für Suchmaschinen und Vorlesegeräte */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lang-select { appearance: none; -webkit-appearance: none; padding-right: 12px; font-weight: 600;
  text-align-last: center; }
@media (max-width: 720px) { .lang-select { max-width: 30vw; } }

/* ---- Vereins-Widgets (Kontomenü, nur Admins; siehe src/widgets.js) ---- */
.wd-swatch { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.wd-logo { height: 26px; max-width: 70px; object-fit: contain; flex: none; }
.wd-logo.big { height: 40px; max-width: 140px; }
.wd-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-file { cursor: pointer; }
.wd-places { display: flex; flex-direction: column; gap: 4px; }
.wd-place { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.wd-place input { flex: 1 1 160px; padding: 4px 6px; }
.wd-place .ac-x { margin-left: auto; }
.wd-hits { display: flex; flex-direction: column; gap: 2px; }
.wd-hit { text-align: left; border: 0; border-radius: 6px; padding: 4px 6px;
  background: transparent; color: var(--fg); font: inherit; font-size: 12px; cursor: pointer; }
.wd-hit:hover { background: rgba(47, 111, 176, .12); }
.wd-manual { margin: 6px 0; }
.wd-code { width: 100%; font: 11px/1.4 ui-monospace, Consolas, monospace; resize: vertical;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px; background: transparent;
  color: var(--fg); }
.wd-preview { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
a.toggle { text-decoration: none; display: inline-flex; align-items: center; }