/* TrackPilot — Vollflächenkarte mit schwebender Bedienung
   Farben laufen über Custom Properties, damit Hell/Dunkel an einer Stelle sitzt. */

:root {
  /* Messwerk · Nacht. Die Signalfarbe steht hier nur als Rückfallwert:
     gesetzt wird sie aus PALETTEN in app.js als Inline-Wert auf <html>,
     weil sie je Thema einen eigenen Ton braucht und umschaltbar ist.
     Standard ist Lapis, der Blauton des Logos. */
  --bg: #06070b;
  --glass: rgba(13, 15, 21, .94);
  --panel-2: #12151d;
  --line: rgba(255, 255, 255, .22);
  --text: #e9ebf1;
  --muted: #8a90a3;
  --muted-2: rgba(255, 255, 255, .52);
  --accent: #55a5e7;
  --accent-ink: #06070b;
  --ok: #34d399;
  --warn: #f5a524;
  --bad: #fb7185;
  /* Harte Kante statt weichem Schein: über einem hellen Luftbild muss sich
     die schwebende Bedienung abgrenzen, ohne zu leuchten. */
  --shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .35);
  /* Leicht abgerundet, in drei Stufen: große Flächen (Leisten, Menüs,
     Sprechblasen), Knöpfe und Felder darin, kleine Schilder. Bis Oktober 2026
     waren es überall 2 px — das wirkte hart; die runden Kartenknöpfe bleiben rund. */
  --r: 10px;
  --r-knopf: 6px;
  --r-klein: 4px;
  --bh: 6px;              /* Grundlinie der Knöpfe rechts, von JS gesetzt (updateBH) */
  --gap: 10px;
  /* Rechte Kante der Knopfsäule. Bis 1010 px die Kante der Bedienspalte (Leisten
     bis 640 px, mittig) — auf dem Handy fällt sie mit dem Fensterrand zusammen,
     auf dem Tablet hinge die Säule sonst abgelöst draußen. Darüber stehen
     Knöpfe und ©-Kasten in den Ecken, siehe „Große Bildschirme". */
  --saeule: max(var(--gap), calc((100vw - 640px) / 2));
  /* Grundlinie der Knopfsäule: bis 1010 px über der Leiste (--bh), darüber im Eck */
  --grund: var(--bh);
}

html[data-theme="light"] {
  --bg: #eef1f5;
  --glass: rgba(255, 255, 255, .94);
  --panel-2: #eef1f5;
  --line: #d5dbe3;
  --text: #17202a;
  --muted: #58636f;
  --muted-2: #7b8794;
  --accent: #1761a3;
  --accent-ink: #ffffff;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #c62828;
  --shadow: 0 6px 22px rgba(25, 35, 50, .16), 0 1px 2px rgba(25, 35, 50, .1);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --bg: #eef1f5;
    --glass: rgba(255, 255, 255, .94);
    --panel-2: #eef1f5;
    --line: #d5dbe3;
    --text: #17202a;
    --muted: #58636f;
    --muted-2: #7b8794;
    --accent: #1761a3;
    --accent-ink: #ffffff;
    --ok: #15803d;
    --warn: #b45309;
    --bad: #c62828;
    --shadow: 0 6px 22px rgba(25, 35, 50, .16), 0 1px 2px rgba(25, 35, 50, .1);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Das hidden-Attribut ist nur eine Browserregel und verliert gegen jedes eigene
 * display: -- ohne diese Zeile stehen als versteckt markierte Bloecke wie die
 * Farbwahl je Datei, das XML-Feld beim WMS oder der Nordknopf trotzdem offen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

.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;
}

/* ---------- Karte ---------- */

#map {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 0;
}

.leaflet-container { font: inherit; font-size: .8rem; background: var(--bg); }

/* Dunkle Grundkarte: MapLibre zeichnet hinter Leaflet, Leaflet wird dafür
   durchsichtig. !important schlägt den Inline-Wert, den applyBaseOpacity
   beim Verblassen setzt — das Weiß gehört dann unter die GL-Karte. */
/* Über die ID: maplibre-gl.css setzt auf .maplibregl-map position: relative,
   und damit hatte die Fläche die Höhe 0 */
#glKarte { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); }
#glKarte[hidden] { display: none; }
#map.gl-grund { background: transparent !important; }

/* Maßstab und Attribution stehen nicht mehr in der Karte, sondern in der
   Quellenzeile ganz unten. In den Kartenecken bleibt nichts. */

/* Maßstab — links im Kasten unten. Innen die Zahl über einem Winkel ⊔, dessen
   Breite Leaflet als Inline-Wert setzt. Alles auf ganzen Pixeln (Kasten:
   Rahmen 1 + Inhalt 20 + 1): Zahl 3–13, Winkel 13–18, Unterkante 17–18.
   text-shadow: none, weil leaflet.css der Zahl „1px 1px #fff" mitgibt — auf
   dunklem Grund franste sie davon aus. Eine Kontur braucht es nicht, die
   Fläche des Kastens deckt. */
.quellen .leaflet-control-scale {
  float: none; margin: 0; height: 20px; box-sizing: border-box;
  padding: 0 8px; background: none; border: 0;
}
.quellen .leaflet-control-scale-line {
  position: relative; box-sizing: border-box; height: 20px;
  border: 0; background: none; text-shadow: none;
  padding: 3px 0 0; color: var(--muted);
  font-size: 10px; font-weight: 600; line-height: 10px; text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quellen .leaflet-control-scale-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 5px;
  box-sizing: border-box; border: 1px solid currentColor; border-top: 0;
}

/* ---------- Quellenzeile: ein Kasten links ----------
   (Ab 1010 px Breite steht der Kasten stattdessen im Eck, siehe „Große
   Bildschirme".) Ohne Ergebnisleiste ganz unten, mit ihr 8 px darüber — auf derselben
   Grundlinie wie Standort- und Messknopf rechts (updateBH). Im Quelltext
   steht die Zeile hinter #ziel und #bottom, damit „#ziel[hidden] +
   #bottom[hidden] + .quellen" greift; order zieht sie im Bild über beide.
   Die Zeile ist immer 22 px hoch. Sie selbst nimmt keine Tipps an, nur der
   Kasten darin — sonst schluckte der leere Streifen daneben jeden Griff auf
   die Karte. Der aufgeklappte Quellentext legt sich 4 px darüber und lässt
   rechts 50 px frei: Dort stehen Standort- und Messknopf (42 px + 8 Luft). */
.quellen {
  position: relative; flex: none; order: 1;
  width: min(640px, calc(100% - 2 * var(--gap)));
  height: 22px;
  margin: auto auto 8px;
  display: flex;
}
.bar-bottom, .bar-ziel { order: 2; }
#ziel[hidden] + #bottom[hidden] + .quellen { margin-bottom: calc(6px + env(safe-area-inset-bottom)); }
/* Bei offenem Menü treten die Leisten zurück (openSheet) — wie ohne Leiste */
.menue-offen .bar-bottom, .menue-offen .bar-ziel { display: none; }
.menue-offen .quellen { margin-bottom: calc(6px + env(safe-area-inset-bottom)); }
.ui > .quellen { pointer-events: none; }
.quellen-kasten, .quellen-text { pointer-events: auto; }
.quellen-kasten {
  display: flex; height: 22px; box-sizing: border-box;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-knopf);
}
.quellen-text { position: absolute; left: 0; right: 50px; bottom: calc(100% + 4px); display: flex; }
.quellen.zu .quellen-text { display: none; }
/* Aus der Karte herausgehängt greifen die .leaflet-container-Regeln nicht mehr;
   was von .leaflet-control bleibt, wird hier festgelegt. */
.quellen .leaflet-control-attribution {
  float: none; margin: 0; padding: 3px 7px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-knopf);
  color: var(--muted); font-size: .62rem; line-height: 1.45; text-align: left;
}
.quellen .leaflet-control-attribution a { color: var(--muted); text-decoration: none; }
/* Links im Kasten, vom Maßstab durch einen 1-px-Strich getrennt */
.quellen-knopf {
  flex: none; width: 21px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-right: 1px solid var(--line);
  background: none; color: var(--accent);        /* Signalfarbe aus den Einstellungen */
  font: inherit; font-size: .74rem; font-weight: 600; line-height: 1; cursor: pointer;
}
/* Aufgeklappt wie ein eingeschalteter Knopf; padding-box, damit die Tönung
   nicht auch unter dem Trennstrich liegt und der doppelt deckt */
.quellen-knopf[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
}

/* Nordknopf — oben auf der Knopfsäule rechts: Standort 0–42, Messen 48–90,
   Abstecken 96–138, Nord darüber über der Grundlinie. Er erscheint nur bei
   gedrehter Karte und sitzt dann oben auf, ohne dass die darunter rutschen.
   Fehlt der Absteckknopf (keine Punkte geladen), rückt Nord auf 96 herunter.
   Links unten bleibt allein der Kasten mit © und Maßstab. */
.north {
  position: fixed;
  right: var(--saeule);
  bottom: calc(var(--grund) + 96px + env(safe-area-inset-bottom));
  z-index: 450;
  width: 42px; height: 42px;
  display: grid; place-items: center; gap: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--glass); color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.north svg { width: 27px; height: 27px; }
.north .nord { fill: var(--bad); }
.north .sued { fill: var(--muted-2); }
.north text { fill: var(--muted); font-family: inherit; font-size: 8px; font-weight: 700; }

/* Standortknopf — rechts, über den Zoomknöpfen */
.maploc {
  position: fixed;
  /* Unterkante auf der Grundlinie des Kastens unten links, bei offener Leiste
     8 px darüber (--bh aus updateBH) */
  right: var(--saeule);
  bottom: calc(var(--grund) + env(safe-area-inset-bottom));
  z-index: 450;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--glass); color: var(--muted);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.maploc svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.maploc svg circle:first-child { fill: currentColor; stroke: none; }
/* Der Knopf in der Signalfarbe wie alle übrigen Knöpfe. Der Standort selbst auf
   der Karte (.me-dot, Kreis, Lot) bleibt blau — die Signalfarbe trägt schon der
   gefundene Punkt, und beide sollen sich unterscheiden lassen. */
.maploc.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.maploc.busy { opacity: .6; }
.maploc.busy svg .ring { stroke-dasharray: 6 5; }

/* Messen — über dem Knopf für das Ablesen */
.mapmess {
  position: fixed;
  right: var(--saeule);
  bottom: calc(var(--grund) + 48px + env(safe-area-inset-bottom));      /* 42 px Knopf + 6 Luft */
  z-index: 450;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--glass); color: var(--muted-2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.mapmess svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mapmess.is-on, .mapmess[aria-expanded="true"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Messmenü — links neben dem Messknopf, Unterkante auf dessen Unterkante */
.mess-menue {
  position: fixed;
  right: calc(var(--saeule) + 48px);
  bottom: calc(var(--grund) + 48px + env(safe-area-inset-bottom));
  z-index: 460;
  width: min(250px, calc(100vw - 2 * var(--gap) - 48px));
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;      /* die Tönung beim Antippen bleibt in den runden Ecken */
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mess-menue button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.mess-menue button:first-child { border-top: 0; }
.mess-menue button:active { background: color-mix(in srgb, var(--warn) 13%, transparent); }
.mess-menue svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--warn); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mess-menue svg .voll { fill: var(--warn); stroke: none; }
.mess-menue b { display: block; font-size: .9rem; font-weight: 650; }
.mess-menue small { display: block; font-size: .74rem; color: var(--muted); }

/* Abstecken — über dem Messen. Nur da, wenn eine sichtbare KML-Datei Punkte
   hat; dann rückt der Nordknopf eine Stufe höher. Der Knopf steht im Quelltext
   vor dem Nordknopf, sonst griffe der Geschwisterwähler nicht. */
.mapziel {
  position: fixed;
  right: var(--saeule);
  bottom: calc(var(--grund) + 96px + env(safe-area-inset-bottom));
  z-index: 450;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--glass); color: var(--muted-2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.mapziel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mapziel.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mapziel:not([hidden]) ~ .north { bottom: calc(var(--grund) + 144px + env(safe-area-inset-bottom)); }

/* ---------- Große Bildschirme: ©-Kasten und Knöpfe in die Ecken ----------
   Neben der 640 px breiten Bedienspalte ist dann Platz. Der ©-Kasten steht
   unten links, die Knopfsäule unten rechts, beide mit der Unterkante auf der
   der Leiste, 6 px über dem Rand. So springen sie auch nicht mehr mit, wenn
   eine Leiste auf- oder zugeht. Die Grenze: Mit voll langem Maßstab und dem ?
   der Tour wird der Kasten 159 px breit (über alle Zoomstufen nachgemessen);
   ab 1010 px bleiben neben der Spalte dann mindestens 16 px Luft. */
@media (min-width: 1010px) {
  :root { --saeule: var(--gap); --grund: 6px; }
  /* Die Zeile bleibt als Abstandhalter im Fluss — ihr margin-top: auto hält die
     Leisten unten —, ihr Inhalt wandert ins Eck */
  .quellen, #ziel[hidden] + #bottom[hidden] + .quellen { height: 0; margin-bottom: 0; }
  .quellen-kasten { position: fixed; left: var(--gap); bottom: calc(6px + env(safe-area-inset-bottom)); }
  /* Der aufgeklappte Quellentext bleibt in seiner Ecke, höchstens so breit wie
     der Platz neben der Spalte */
  .quellen-text {
    position: fixed; left: var(--gap); right: auto;
    bottom: calc(6px + 22px + 4px + env(safe-area-inset-bottom));
    max-width: calc((100vw - 640px) / 2 - var(--gap) - 8px);
  }
  /* Das Messmenü reicht dann über die Spalte — es gehört über eine offene Leiste */
  .mess-menue { z-index: 510; }
}

/* ---------- schwebende Bedienung ---------- */

.ui {
  position: fixed; inset: 0;
  z-index: 500;
  pointer-events: none;
  display: flex; flex-direction: column;
}
.ui > * { pointer-events: auto; }

.bar {
  width: min(640px, calc(100% - 2 * var(--gap)));
  margin: 0 auto;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bar-top { margin-top: calc(var(--gap) + env(safe-area-inset-top)); flex: none; }
.bar-bottom {
  position: relative;
  margin-top: 0;             /* den Abstand nach oben trägt die Quellenzeile darüber */
  margin-bottom: calc(6px + env(safe-area-inset-bottom));
  padding: 12px 14px 13px;
  flex: none;
}
/* Abstecken: über der unteren Leiste, 8 px Luft dazwischen. Ist die untere zu,
   steht sie selbst ganz unten. */
.bar-ziel {
  position: relative;
  margin-top: 0; margin-bottom: 8px;
  padding: 12px 14px 13px;
  flex: none;
}
.bar-ziel:has(+ #bottom[hidden]) { margin-bottom: calc(6px + env(safe-area-inset-bottom)); }

/* ---------- Suchzeile ---------- */

/* Die obere Leiste ist im Ruhezustand nur eine Zeile. Die Aufteilung in Strecke
   und Kilometer klappt erst auf, wenn man die Zeile antippt -- und faellt danach
   wieder zusammen, damit von der Karte moeglichst wenig verdeckt bleibt. */

.search { padding: 6px; }

.qrow { display: flex; align-items: center; gap: 4px; }

/* Die Lupe ist der Suchknopf. Sie sieht aus wie das Zeichen, das in jeder
   Suchzeile links steht -- und genau deshalb braucht es daneben keinen zweiten
   Knopf mehr, der dasselbe tut. */
.qgo {
  flex: none; width: 34px; height: 34px; padding: 0; margin-left: 2px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r-knopf); background: none; cursor: pointer;
}
/* In der Signalfarbe, wie das ©: Die Lupe ist der Einstieg in die App und darf
   auffallen, nicht erst, wenn die Suche schon offen ist. */
.qgo svg {
  width: 19px; height: 19px;
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
}
.qgo:active svg { stroke: var(--text); }
/* Laeuft gerade eine Abfrage, ist die Lupe nicht noch einmal ausloesbar. */
.qgo.busy { pointer-events: none; opacity: .5; }

#q {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 2px; border: none; background: none; outline: none;
  font: inherit; font-size: 1.06rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#q::placeholder { color: var(--muted-2); font-weight: 500; opacity: 1; }

/* Das Kreuz steht nur da, wenn auch etwas in der Zeile steht. */
/* Das × leert und klappt zu — es steht da, sobald etwas drinsteht oder die Leiste offen ist */
.search:not(.hat-text):not(.offen) .qclear { display: none; }

.qclear {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: var(--r-knopf); cursor: pointer;
  background: none; color: var(--muted-2);
}
.qclear svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.qclear:active { color: var(--text); }

/* Aufgeklappter Teil. Die Hoehe ist fest genug angesetzt, dass beide Felder
   samt Beschriftung hineinpassen; ueber max-height laesst sich das anders als
   ueber auto sauber schieben.

   Bei einer Orts- oder Koordinatensuche bleibt er zu: dort gibt es keinen
   Kilometer, und die Trefferliste soll den Platz haben. */
.detail {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .2s ease, opacity .16s ease;
}
.search.offen:not(.frei) .detail { max-height: 100px; opacity: 1; }

.detail-in {
  display: flex; align-items: stretch; gap: 2px;
  margin-top: 6px; padding-top: 7px;
  border-top: 1px solid var(--line);
}

.field { position: relative; flex: 1 1 0; min-width: 0; padding: 4px 10px 5px; border-radius: var(--r-knopf); }
.field:focus-within { background: var(--panel-2); }
.field-ref { flex-grow: 1.15; }
.field + .field { box-shadow: inset 1px 0 0 var(--line); }

.field label {
  display: block;
  font-size: .64rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: -1px;
}

.field input {
  width: 100%; padding: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 1.12rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.field input::placeholder {
  color: color-mix(in srgb, var(--muted-2) 62%, transparent);
  font-weight: 500; opacity: 1;
}

.more {
  flex: none;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  border-radius: var(--r-knopf);
  width: 38px; height: 40px; background: none; color: var(--muted);
}
.more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.more:active, .more.is-on { color: var(--accent); }

.progress {
  height: 2px; margin: 0 6px 4px;
  border-radius: var(--r-knopf); overflow: hidden;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.progress::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--accent);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---------- Live-Zeile beim Verfolgen des Standorts ---------- */

.live {
  width: min(640px, calc(100% - 2 * var(--gap)));
  margin: 8px auto 0;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-knopf);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .8rem;
}
.live .tag { flex: none; }
.live-teil { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.live-teil b { font-weight: 650; font-variant-numeric: tabular-nums; }
.live-teil small { color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Kilometer an der eigenen Stelle ist ein Knopf -- ein Tipp haelt ihn fest.
   Er soll aber wie die uebrigen Stuecke der Zeile aussehen und nicht wie eine
   Schaltflaeche, deshalb erbt er Schrift und Farbe und bringt nur die
   groessere Zahl mit. */
.live-km {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.live-km b { font-size: 1.02rem; letter-spacing: -.01em; }
.live-km-aus b { color: var(--muted-2); font-weight: 600; }

/* ---------- Regenradar ---------- */

.radar {
  flex: none;
  width: min(640px, calc(100% - 2 * var(--gap)));
  margin: 8px auto 0;
  padding: 6px 8px 7px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-knopf);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* Bei offenem Menü steht sie nicht zwischen Suchzeile und Menü */
.ui:has(> .sheet:not([hidden])) > .radar { display: none; }

.radar-zeile { display: flex; align-items: center; gap: 8px; }
.radar-knopf {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.radar-knopf svg { width: 14px; height: 14px; fill: currentColor; }
.radar-knopf .strich { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.radar-knopf .pause { display: none; }
.radar-knopf.is-on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
}
.radar-knopf.is-on .spiel { display: none; }
.radar-knopf.is-on .pause { display: inline; }
#radarZu { border-color: transparent; background: none; color: var(--muted-2); }
#radarZu svg { width: 15px; height: 15px; }

.radar-text { flex: none; width: 6.6em; margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.radar-text b { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-text small { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.radar-text.vorhersage small { color: var(--warn); }
.radar-text.laedt b { color: var(--muted); }

/* Zeitleiste. Links eine Stunde Messung (durchgezogen), rechts zwei Stunden
   Vorhersage (gestrichelt), dazwischen die Marke der letzten Messung. Die Marke
   steht dort, wo die Mitte des Läufers bei 0 steht: Der Läufer (10 px) läuft
   von 5 px bis Breite − 5 px, nicht über die ganze Breite. */
.radar-zeit {
  --jetzt: calc(5px + (100% - 10px) / 3);
  flex: 1; min-width: 0; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(90deg, transparent calc(var(--jetzt) - 1px), var(--muted) calc(var(--jetzt) - 1px)
    calc(var(--jetzt) + 1px), transparent calc(var(--jetzt) + 1px)) center / 100% 14px no-repeat;
}
/* Die beiden Teile liegen nebeneinander, nicht übereinander: --muted-2 ist
   halb durchsichtig, und über der Strichelung deckte die Fläche doppelt — die
   Striche schienen links durch. */
.radar-zeit::-webkit-slider-runnable-track {
  height: 4px;
  background:
    linear-gradient(var(--muted-2), var(--muted-2)) left / var(--jetzt) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--muted-2) 0 5px, transparent 5px 8px) right / calc(100% - var(--jetzt)) 100% no-repeat;
}
.radar-zeit::-moz-range-track {
  height: 4px;
  background:
    linear-gradient(var(--muted-2), var(--muted-2)) left / var(--jetzt) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--muted-2) 0 5px, transparent 5px 8px) right / calc(100% - var(--jetzt)) 100% no-repeat;
}
.radar-zeit::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 20px; margin-top: -8px;
  border: 0; border-radius: 0; background: var(--accent);
  box-shadow: 0 0 0 1px var(--bg);
}
.radar-zeit::-moz-range-thumb {
  width: 10px; height: 20px; border: 0; border-radius: 0;
  background: var(--accent); box-shadow: 0 0 0 1px var(--bg);
}
.radar-zeit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Farbskala in mm/h — die Stufen des Dienstes, je ein gleich breites Feld */
.radar-legende { display: flex; align-items: flex-end; gap: 6px; margin-top: 5px; }
.radar-skala { flex: 1; min-width: 0; }
/* Volle Farben, obwohl die Fläche auf der Karte nur 45 % deckt: Auf dem dunklen
   Grund der Leiste wurden die Stufen mit 45 % trüb und kaum unterscheidbar. */
.radar-stufen { display: flex; height: 6px; }
.radar-stufen i { flex: 1; background: var(--f); }
.radar-werte { position: relative; height: 12px; margin-top: 2px; }
.radar-werte span, .radar-einheit {
  font-size: .6rem; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.radar-werte span { position: absolute; top: 0; }
.radar-einheit { flex: none; }

/* Fadenkreuz in der Kartenmitte beim Messen */
.mittekreuz {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  z-index: 440; pointer-events: none;
}
.mittekreuz svg {
  width: 40px; height: 40px;
  fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 3px var(--bg));
}

/* Laufende Entfernung neben dem Fadenkreuz */
.mitte-zahl {
  position: absolute; left: 46px; top: 50%; transform: translateY(-50%);
  font-size: .84rem; font-weight: 700; color: var(--warn);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg);
}
.mitte-zahl:empty { display: none; }

/* ---------- Verlauf beim Tippen ---------- */

.suggest {
  border-top: 1px solid var(--line);
  padding: 6px;
  max-height: 46vh; overflow-y: auto;
}
.suggest-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 10px 11px; border: none; border-radius: var(--r-knopf);
  background: none; color: var(--text); font: inherit; font-size: .92rem;
  text-align: left; cursor: pointer;
}
.suggest-item:hover, .suggest-item:focus-visible { background: var(--panel-2); }
.suggest-item b { font-weight: 650; font-variant-numeric: tabular-nums; }
.suggest-item span { color: var(--muted); font-size: .82rem; }
.suggest-item .tail { margin-left: auto; color: var(--muted-2); font-size: .74rem; }

/* Ort oder Betriebsstelle -- das Zeichen links sagt, was einen beim Antippen
   erwartet: eine Ortschaft auf der Karte oder ein Bahnhof mit DS100. */
.suggest-item .s-ikon {
  flex: none; width: 17px; height: 17px; align-self: center;
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.suggest-item .s-ikon.bahn { stroke: var(--accent); }
.s-treffer { align-items: center; }
.suggest-item .s-text {
  min-width: 0; display: flex; flex-direction: column; gap: 1px;
  color: var(--text); font-size: .92rem;
}
.suggest-item .s-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suggest-info { margin: 0; padding: 9px 11px; color: var(--muted); font-size: .84rem; }

/* Mit den Pfeiltasten durch die Liste: die markierte Zeile muss sich vom
   blossen Ueberfahren mit der Maus unterscheiden, sonst weiss man nach einem
   Tastendruck nicht, wo man steht. */
.suggest-item.aktiv {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ---------- Menü ---------- */

.sheet {
  width: min(640px, calc(100% - 2 * var(--gap)));
  margin: 8px auto 0;
  padding: 4px 16px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
  max-height: calc(100dvh - 150px);
}

.sheet-sec { padding: 12px 0; }
.sheet-sec + .sheet-sec { border-top: 1px solid var(--line); }
.sheet-sec h2 {
  font-size: .68rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted-2); margin: 0;
}

/* Jeder Abschnitt klappt zu: Das Menü ist sonst eine sehr lange Rolle, und die
 * Farb- und Symbolwahl je Datei bringt noch einmal reichlich Bedienelemente mit. */
.sheet-sec > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; cursor: pointer;
  list-style: none;
}
.sheet-sec > summary::-webkit-details-marker { display: none; }
/* Pfeil rechtsbündig: zu nach unten (aufklappen), offen nach oben (zuklappen).
   Der Winkel ist ein um 45° gedrehtes Quadrat von 8,6 px mit Rand. Sein
   sichtbarer Teil reicht von der Mitte bis 6,1 px darunter (bzw. darüber) —
   3 px Versatz setzen ihn in beiden Lagen auf die Textmitte. */
.sheet-sec > summary::after {
  content: ""; flex: none;
  width: 7px; height: 7px; margin: 0 4px 0 auto;
  border-right: 1.6px solid var(--muted-2); border-bottom: 1.6px solid var(--muted-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .15s;
}
.sheet-sec[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.sheet-sec[open] > summary { margin-bottom: 9px; }
.sheet-sec[open] > summary h2 { color: var(--muted); }
.sheet-sec > summary:hover h2 { color: var(--text); }

/* Symbol je Abschnitt, in derselben Farbe wie die Überschrift daneben */
.sec-ikon {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: var(--muted-2); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sec-ikon .voll { fill: var(--muted-2); stroke: none; }
.sheet-sec[open] > summary .sec-ikon { stroke: var(--muted); }
.sheet-sec[open] > summary .sec-ikon .voll { fill: var(--muted); }
.sheet-sec > summary:hover .sec-ikon { stroke: var(--text); }
.sheet-sec > summary:hover .sec-ikon .voll { fill: var(--text); }

.stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.stack input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--text); outline: none;
}
.stack input:focus { border-color: var(--accent); }

.slider-row {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  font-size: .8rem; color: var(--muted);
}
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.slider-val { flex: none; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }

.stack textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .82rem;
  border: 1px solid var(--line); border-radius: var(--r-knopf); resize: vertical;
  background: var(--panel-2); color: var(--text); outline: none;
}
.stack textarea:focus { border-color: var(--accent); }


.seg { display: flex; gap: 7px; flex-wrap: wrap; }
.seg-btn {
  flex: 1 1 auto; padding: 9px 12px;
  font: inherit; font-size: .84rem; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
/* Zwei gleich breite Knöpfe je Reihe (Auswahl der Festpunkte) */
.seg-paar .seg-btn { flex: 1 1 0; }
/* Rückmeldung beim Tippen — vor allem für die Aktionsknöpfe (Layer laden, Aktualisieren) */
.seg-btn:active { filter: brightness(1.12); }
.seg-btn.is-on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

/* Signalfarbe. Jedes Feld zeigt beide Töne der Farbe — links den fürs
 * Dunkle, rechts den fürs Helle. Quadratisch wie alles hier. */
.pal-label {
  margin: 14px 0 7px; font-size: .78rem; font-weight: 600; color: var(--muted);
}
/* Steht die Gruppenzeile gleich unter der Überschrift, reicht deren Abstand */
.sheet-sec > summary + .pal-label { margin-top: 0; }
/* Zehn Farben in zwei gleichen Reihen statt einer, die irgendwo umbricht */
.pal { display: grid; grid-template-columns: repeat(5, 40px); gap: 7px; }
.pal-btn {
  width: 40px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: linear-gradient(100deg, var(--pal-dark) 0 50%, var(--pal-light) 50% 100%);
  cursor: pointer;
}
.pal-btn.is-on { box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--text); }
.pal-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Überall, wo ein langer Druck etwas tut, darf das Handy weder Text markieren
 * noch sein Kontextmenü zeigen: die Knöpfe Parzellen, DB-Netz und Festpunkte
 * (Auswahl), „In Google Maps öffnen" (Street View) und die Karte selbst (Punkt
 * setzen — dort markierte es sonst die Schilder). Wer eine neue Geste einbaut,
 * hängt sie hier an. Die Sprechblasen bleiben markierbar, damit man Koordinaten
 * herauskopieren kann. */
.parz-knopf, a[data-sv], .leaflet-container {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.leaflet-container .leaflet-popup-content { -webkit-user-select: text; user-select: text; }
.parz-jetzt {
  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border: 1px solid var(--muted-2); background: var(--parz, #000);
}
.parz-pal { gap: 6px; }
/* DB-Netz: drei Striche vor dem Wort, gleich groß wie das Farbfeld der Parzellen */
.ifg-wahl-zeichen {
  display: inline-block; width: 10px; height: 9px; margin-right: 7px;
  stroke: currentColor; stroke-width: 1.4; fill: none;
}
/* Zwischen zwei Knopfreihen oben und unten je 10 px. Unten fällt der Rand mit
   den 7 px der nächsten Reihe zusammen — es gilt der größere, nicht die Summe. */
.parz-wahl { margin-bottom: 10px; }
.parz-wahl .pal-label { margin-top: 10px; }
.parz-btn {
  position: relative; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--parz); cursor: pointer;
}
.parz-btn.is-on { box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--text); }
.parz-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Auto ist ein Wort, kein Farbfeld — eingeschaltet wie die Knöpfe darüber */
.parz-auto {
  width: auto; padding: 0 9px;
  background: var(--panel-2); color: var(--muted);
  font: inherit; font-size: .76rem; font-weight: 600;
}
.parz-auto.is-on {
  border-color: var(--accent); color: var(--accent); box-shadow: none;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
}
/* Eigene Farbe: das Farbfeld des Systems liegt unsichtbar über dem Plus */
.parz-eigen {
  display: grid; place-items: center; overflow: hidden;
  background: var(--parz, var(--panel-2)); color: var(--muted);
  font-size: 1.05rem; font-weight: 500; line-height: 1;
}
.parz-eigen.is-on span { visibility: hidden; }
.parz-eigen input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}

.fac-out:not(:empty) { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fac-item {
  width: 100%; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer;
}
.fac-item small { display: block; color: var(--muted); font-size: .76rem; margin-top: 1px; }

/* ---------- Liste der geladenen KML-Dateien ---------- */

.kml-list:not(:empty) { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }

.kml-zeile { display: flex; flex-direction: column; gap: 6px; }
.kml-item { display: flex; gap: 6px; }

.kml-tog {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer;
}
.kml-tog.is-on {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

/* Zeigt Farbe und Form, mit denen die Datei auf der Karte liegt — und öffnet die Wahl */
.kml-dot {
  flex: none; width: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); cursor: pointer;
}
.kml-dot:active { filter: brightness(1.15); }

.kml-edit-kopf { display: flex; align-items: baseline; gap: 8px; }
.kml-edit-kopf .kml-lab { flex: 1; }
.kml-zu {
  flex: none; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--glass); color: var(--muted);
  font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
}

.kml-edit {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2);
}
.kml-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.kml-farbe {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
}
.kml-farbe.is-on { border-color: var(--text); }
.kml-form {
  width: 34px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--glass); color: var(--muted); cursor: pointer;
}
.kml-form.is-on, .kml-feld.is-on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.kml-auto { width: auto; padding: 0 10px; font: inherit; font-size: .76rem; font-weight: 600; }

/* Merkmalsknoepfe: welches Feld unterscheidet, was in der Beschriftung steht */
.kml-feld {
  padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--glass); color: var(--muted);
  font: inherit; font-size: .76rem; cursor: pointer;
}
.kml-feld small { color: var(--muted-2); font-size: .68rem; }

.kml-lab {
  margin: 2px 0 0;
  font-size: .64rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted-2);
}

/* Legende: welcher Merkmalswert traegt welche Form */
.kml-legende { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kml-mehr { align-self: center; font-size: .72rem; color: var(--muted-2); }
.kml-legende span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Fläche eines geschlossenen Polygons, in seiner Mitte */
.mess-lbl.mess-flaeche { font-size: .86rem; transform: translate(-50%, -50%); }

/* Große Zahl beim Messen; im Live sagt der Zusatz, wohin gemessen wird */
.mess-zahl small { font-size: .74rem; font-weight: 500; color: var(--muted); }

/* Die laufende Zahl zum Standort steht schwächer als die festen Abschnitte */
.mess-lbl.mess-live { opacity: .85; font-weight: 600; }

/* A und B im freien Profil: 26 px Griff zum Ziehen, sichtbar nur der Punkt wie
   sonst beim Messen; das Schild steht wie dort 7 px rechts oberhalb */
.prof-griff { cursor: grab; }
.prof-griff.leaflet-drag-target, .prof-griff:active { cursor: grabbing; }
.prof-griff i {
  position: absolute; left: 7px; top: 7px; width: 12px; height: 12px; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 50%; background: #f59e0b;
}
.prof-griff .mess-lbl { position: absolute; left: 20px; top: 6px; }

/* Maßzahl an der gemessenen Strecke */
.mess-lbl {
  display: block;
  font-size: .72rem; font-weight: 700; line-height: 1;
  color: var(--warn);
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg);
  white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* inline würde die Grundlinie mitrechnen und das Symbol um ein Haar versetzen */
.kml-sym svg { display: block; }
/* Festpunkte (fpSymbolSvg): ein leichter Schatten hebt sie vom Luftbild ab */
.fp-sym svg { display: block; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55)); }

/* Name neben dem Symbol auf der Karte — wie die Kilometerbeschriftung */
.kml-lbl {
  display: block;
  font-size: .66rem; font-weight: 600; line-height: 1;
  color: var(--text);
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg);
  white-space: nowrap;
  pointer-events: none;
}

.kml-txt { min-width: 0; }
.kml-nm, .kml-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kml-txt small { color: var(--muted-2); font-size: .74rem; }

.kml-ic {
  flex: none; width: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.kml-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kml-ic:active { filter: brightness(1.15); }
.kml-ic.del:active { color: var(--bad); }

/* ---------- Sprechblase eines KML-Objekts ---------- */

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--glass); color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: var(--r); }
.leaflet-popup-content { margin: 11px 13px; font-size: .82rem; line-height: 1.5; }
.leaflet-popup-close-button { color: var(--muted-2) !important; }

.kml-pop b { display: block; font-size: .92rem; font-weight: 650; margin-bottom: 2px; }
.kml-pop span { display: block; color: var(--muted); white-space: pre-line; }
.kml-pop i { font-style: normal; color: var(--muted-2); }
.kml-pop a { display: inline-block; margin-top: 6px; color: var(--accent); }
.kml-pop small { display: block; margin-top: 6px; color: var(--muted-2); font-size: .68rem; }
/* Street View hinter dem langen Druck auf „In Google Maps öffnen" (svBinden);
   gegen die Textauswahl siehe .parz-knopf */
.bb-actions .sv-hinweis { display: block; font-size: .68rem; font-weight: 500; opacity: .78; }
/* Street View in der Sprechblase: ein Link, der aussieht wie die Knöpfe darüber */
.kml-pop a.kml-km { box-sizing: border-box; color: var(--accent); text-decoration: none; }

/* Knopf in der Sprechblase — dieselbe Sprache wie die Feinrechnung unten,
   nur schmaler, weil die Blase wenig Platz hat. In der Signalfarbe: Das ist
   eine Handlung, kein „in Ordnung". padding-box, weil Fläche und Rahmen beide
   halb durchsichtig sind — sonst deckte der Rahmen doppelt. */
.kml-km {
  display: block; width: 100%; margin-top: 9px;
  padding: 7px 10px; border-radius: var(--r-knopf); text-align: left; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
  color: var(--accent);
}
.kml-km small { margin-top: 1px; color: var(--muted); font-weight: 400; }
.kml-km:active { filter: brightness(1.15); }

/* Von Hand gesetzter Punkt: bewusst anders als die Stecknadel des Ergebnisses,
   damit man sieht, was noch Rohmaterial ist und was schon gerechnet wurde. */
.merk-pin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

/* Wetter: drei Werte nebeneinander, groß und mit gleich breiten Ziffern */
.wetter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wetter-wert {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-knopf); background: var(--panel-2);
}
.wetter-wert small { display: block; font-size: .66rem; color: var(--muted); }
.wetter-wert b { display: block; margin-top: 2px; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wetter-ort { margin: 6px 0 0; font-size: .72rem; color: var(--muted); }
.wetter-ort:empty { display: none; }

/* „Erklärung": klappt die Texte eines Abschnitts auf, zu ist die Vorgabe */
.erkl-knopf {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 4px 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 600;
}
.erkl-knopf::before {
  content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}
.erkl-knopf[aria-expanded="true"]::before { transform: rotate(90deg); }
.erkl-knopf:hover, .erkl-knopf[aria-expanded="true"] { color: var(--text); }
.erkl { margin-top: 6px; }
.fine { font-size: .74rem; color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.fine:last-child { margin-bottom: 0; }
.fine strong { color: var(--text); }
.fine a { color: var(--accent); }

/* ---------- untere Leiste ---------- */

/* Wegdrücken, vor allem nach einem versehentlichen Tipp auf die Karte */
.bb-close {
  position: absolute; top: 5px; right: 6px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: none; color: var(--muted-2); cursor: pointer;
}
.bb-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.bb-close:active { color: var(--text); }

/* Das ? links neben dem ×: erklärt die Werkzeugleiste (HILFE in tour.js) */
.bb-hilfe {
  position: absolute; top: 5px; right: 38px;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: none; color: var(--muted-2); cursor: pointer;
}
.bb-hilfe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.bb-hilfe .voll { fill: currentColor; stroke: none; }
.bb-hilfe:active { color: var(--text); }
.bb-hilfe ~ .bb-head, .bb-hilfe ~ .ab-kopf { padding-right: 62px; }

.bb-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 30px; }
.bb-title { font-size: 1.02rem; font-weight: 650; margin: 0; }
.bb-sub { font-size: .76rem; color: var(--muted); margin: 2px 0 0; }

.tag {
  padding: 2px 8px; border-radius: var(--r-klein);
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel-2);
  /* Die farbigen Schilder tragen halbdurchsichtige Fläche und Rahmen: ohne
     padding-box läge die Fläche auch unter dem Rahmen, der dann doppelt deckt */
  background-clip: padding-box;
}
/* background-color, nicht background: Die Kurzform setzt background-clip
   stillschweigend auf border-box zurück, und der Rahmen deckte wieder doppelt. */
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background-color: color-mix(in srgb, var(--ok) 14%, transparent); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background-color: color-mix(in srgb, var(--warn) 14%, transparent); }
.tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background-color: color-mix(in srgb, var(--bad) 14%, transparent); }

.bb-coord {
  font-size: .94rem; font-weight: 600; font-variant-numeric: tabular-nums;
  margin: 9px 0 0; color: var(--text);
}
/* Info-Feld über den Knöpfen, vom i-Knopf aufgeklappt. Der Strich trennt es
   von der Überschrift; die Koordinate ist mit einem Tipp ganz markiert. */
.bb-info { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.bb-info[hidden] { display: none; }
.bb-info .bb-coord { margin-top: 0; user-select: all; -webkit-user-select: all; }
.bb-note { font-size: .76rem; color: var(--warn); line-height: 1.5; margin: 7px 0 0; }
.bb-note.plain { color: var(--muted); }

.refine {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px 13px; border-radius: var(--r-knopf); text-align: left; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
  color: var(--accent);
}
.refine small {
  display: block; margin-top: 1px;
  font-size: .72rem; font-weight: 400; color: var(--muted);
}
.refine:active { filter: brightness(1.15); }

.bb-err { font-size: .86rem; color: var(--bad); margin: 0; }

.bb-actions { display: flex; gap: 8px; margin-top: 11px; }
/* Fünf kurze Knöpfe beim Messen: umbrechen statt die Beschriftung zerquetschen */
.bb-actions.wrap { flex-wrap: wrap; }
.bb-actions.wrap button { flex: 1 1 28%; padding: 10px 6px; }
.bb-actions a, .bb-actions button {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  padding: 12px 8px; border-radius: var(--r-knopf);
  font: inherit; font-size: .86rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
/* In der Signalfarbe aus den Einstellungen. Die Schrift darauf (--accent-ink)
   setzt applyPalette je Ton auf Schwarz oder Weiß — Grün ist hier nicht mehr
   „in Ordnung", sondern war bloß die frühere Festfarbe. */
.bb-actions .maps { flex: 1 1 0; background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.bb-actions .maps:active { filter: brightness(.92); }
.bb-actions .maps { padding-top: 7px; padding-bottom: 7px; }
/* Info und Teilen als quadratische Symbole, so hoch wie der Maps-Knopf daneben */
.bb-actions .bb-ikon { flex: none; width: 46px; padding: 0; }
.bb-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bb-ikon svg .voll { fill: currentColor; stroke: none; }
/* Offenes Info-Feld: wie ein eingeschalteter Knopf im Menü (.seg-btn.is-on) */
.bb-actions .bb-ikon.is-on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
/* Profil am Gleis: orange wie Messen und Profil auf der Karte */
.bb-actions .bb-ikon.gp { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Geländehöhe unter dem Ergebnis, in den Sprechblasen und beim Abstecken.
   Steht als Platzhalter da, bis der Wert kommt — die Leiste springt nicht. */
.hoehe {
  display: block; margin: 4px 0 0;
  font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.hoehe b { font-weight: 650; color: var(--text); }
.kml-pop .hoehe { margin-top: 2px; }
.kml-pop .hoehe b { display: inline; margin: 0; font-size: inherit; }
.ab-kopf-txt .hoehe { margin-top: 1px; }

.pick { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.pick button {
  flex: 1 1 auto; padding: 8px 14px; border-radius: var(--r-knopf);
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); font: inherit; font-size: .92rem; font-weight: 650; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pick small { display: block; font-size: .68rem; font-weight: 500; opacity: .75; }
.pick button.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Mehrere Achspunkte: die Zeile, die zwischen ihnen umschaltet */
.bb-reihe {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 8px; padding-right: 34px;      /* Platz für das Schließkreuz */
}
.bb-chip {
  padding: 4px 10px; border-radius: var(--r-knopf);
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font: inherit; font-size: .84rem; font-weight: 650;
  font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
}
.bb-chip.is-on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }

.bb-actions button:disabled { color: var(--muted-2); cursor: default; }

/* ---------- Tour durch die App (tour.js) ---------- */

/* Das ? im ©-Kasten, leicht getönt, damit man es findet. padding-box: Die
   Tönung soll nicht unter dem Trennstrich liegen, der sonst doppelt deckte. */
.tour-start {
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  background-clip: padding-box;
}

/* Die Ebene nimmt während der Tour alle Griffe ab */
.tour { position: fixed; inset: 0; z-index: 700; }
/* Das Loch: ein Rahmen in der Signalfarbe um das Ziel, dessen breiter Schatten
   den Rest abdunkelt — kein Schein, eine deckende Fläche mit Aussparung */
.tour-loch {
  position: absolute; pointer-events: none;
  border-radius: calc(var(--r) + 4px);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(0, 0, 0, .58);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tour-loch.kreis { border-radius: 50%; }
.tour-loch.leer { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .58); }

.tour-blase {
  position: absolute; width: min(340px, calc(100vw - 20px));
  padding: 12px 13px 11px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: left .25s ease, top .25s ease;
}
.tour-kopf { display: flex; align-items: baseline; gap: 8px; }
.tour-zahl { flex: none; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Während einer Vorführung steht es nur da — nichts blinkt */
.tour.laeuft .tour-zahl::after { content: " · läuft …"; }
.tour-titel { font-size: .95rem; font-weight: 650; }
.tour-zu {
  margin-left: auto; align-self: center; flex: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-knopf); background: none; color: var(--muted-2); cursor: pointer;
}
.tour-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.tour-text { margin: 6px 0 11px; font-size: .84rem; line-height: 1.5; color: var(--text); }

.tour-fuss { display: flex; align-items: center; gap: 6px; }
.tour-punkte { display: flex; gap: 4px; margin-right: auto; }
.tour-punkte i { width: 6px; height: 3px; border-radius: 2px; background: var(--line); }
.tour-punkte i.is-on { width: 14px; background: var(--accent); }
.tour-knopf-2, .tour-weiter {
  padding: 8px 14px; border-radius: var(--r-knopf);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
.tour-weiter { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.tour-knopf-2:disabled { color: var(--muted-2); cursor: default; }

/* Das Angebot beim ersten Start, über dem ©-Kasten (Lage aus tour.js) */
.tour-angebot {
  position: fixed; z-index: 650; width: min(300px, calc(100vw - 20px));
  padding: 11px 12px;
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--r); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tour-angebot p { margin: 0 0 10px; font-size: .84rem; line-height: 1.5; }
.tour-angebot-zeichen {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: var(--r-klein); font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.tour-angebot .tour-fuss { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .tour-loch, .tour-blase { transition: none; }
}

/* ---------- Querprofil ---------- */

/* Quer | Längs im Kopf, rechts vor dem Schließkreuz */
.prof-art {
  margin-left: auto; align-self: center; display: inline-flex;
  border: 1px solid var(--line); border-radius: var(--r-knopf); overflow: hidden;
}
.prof-art button {
  padding: 3px 9px; border: 0; background: var(--panel-2); color: var(--muted);
  font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
}
.prof-art button + button { border-left: 1px solid var(--line); }
.prof-art button.is-on { background: var(--accent); color: var(--accent-ink); }
/* Teilen als PDF, rechts im Kopf vor dem Schließkreuz */
.prof-teilen {
  flex: none; align-self: center; margin-left: auto; width: 30px; height: 26px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-knopf); background: var(--panel-2); color: var(--text);
}
.prof-art + .prof-teilen { margin-left: 6px; }
.prof-teilen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
/* Auswahl, Fortschritt und „fertig" des PDF-Exports */
.prof-pdf {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px;
  font-size: .78rem; color: var(--muted);
}
.prof-pdf button {
  padding: 5px 10px; border: 1px solid var(--accent); border-radius: var(--r-knopf);
  background: color-mix(in srgb, var(--accent) 13%, transparent); background-clip: padding-box;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.prof-pdf .prof-pdf-zu { margin-left: auto; border-color: var(--line); background: var(--panel-2); color: var(--muted); }
/* Die Mappe in einer eigenen Zeile darunter */
.prof-pdf-umbruch { flex-basis: 100%; height: 0; }

/* ---------- Profilmappe ---------- */

.mappe-text {
  display: block; width: 100%; box-sizing: border-box; margin-top: 9px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-knopf); background: var(--panel-2); color: var(--text);
  font: inherit; font-size: .9rem; line-height: 1.45; font-variant-numeric: tabular-nums; resize: vertical;
}
.mappe-text:focus { outline: none; border-color: var(--accent); }
.mappe-hilfe { margin: 5px 0 0; font-size: .72rem; color: var(--muted); }
.mappe-fehler { margin: 3px 0 0; font-size: .72rem; color: var(--warn); }
.mappe-fehler:empty { display: none; }
.mappe-stand { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }
/* Überhöhung als Block wie Quer | Längs: im PDF ist jede Stufe möglich, zu steil wird gestaucht und vermerkt */
.mappe-ueber {
  grid-column: 2 / 4; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-knopf); overflow: hidden;
}
.mappe-ueber button {
  padding: 5px 0; border: 0; background: var(--panel-2); color: var(--text); cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.mappe-ueber button + button { border-left: 1px solid var(--line); }
.mappe-ueber button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bb-actions .primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.bb-actions .primary:disabled { background: var(--panel-2); border-color: var(--line); color: var(--muted-2); }
/* Der Versatz im freien Profil: Angabe und Rücksetzer in einem */
.tag.prof-versatz {
  font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background-color: color-mix(in srgb, var(--accent) 13%, transparent);
}
/* −10 −5 −1 +1 +5 +10: sechs gleich breite Knöpfe, mittig ein Spalt zwischen zurück und vor */
.prof-sprung {
  display: grid; grid-template-columns: repeat(3, 1fr) 6px repeat(3, 1fr); gap: 5px; margin-top: 9px;
}
.prof-sprung button:nth-child(4) { grid-column: 5; }
.prof-sprung button {
  padding: 8px 0; border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 650; font-variant-numeric: tabular-nums;
  touch-action: manipulation;          /* zwei schnelle Tipps sind zwei Sprünge, kein Zoom */
}
.prof-sprung button:active { background: color-mix(in srgb, var(--warn) 18%, var(--panel-2)); }

/* Wischen im Diagramm führt den Zeiger, statt die Seite zu verschieben */
.prof-bild { margin-top: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.prof-bild svg { display: block; overflow: visible; font-size: 11px; font-variant-numeric: tabular-nums; cursor: crosshair; }
.prof-bild .gitter { fill: none; stroke: var(--line); }
.prof-bild .ecken { fill: none; stroke: var(--muted); stroke-dasharray: 2 3; }
.prof-bild .flaeche { fill: color-mix(in srgb, var(--warn) 14%, transparent); }
.prof-bild .dgm { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linejoin: round; }
/* Gebäude (LoD2): deckende graue Blöcke, Gelände und Oberfläche laufen darüber */
.prof-bild .geb { fill: color-mix(in srgb, var(--muted) 45%, var(--bg)); stroke: var(--text); stroke-width: .8; stroke-linejoin: miter; }
.prof-dom.prof-geb::before { height: 8px; width: 12px; background: color-mix(in srgb, var(--muted) 45%, var(--bg)); border: 1px solid var(--text); }
.prof-bild .dom {fill: none; stroke: var(--text); stroke-width: 1.1; stroke-dasharray: 3 2.5; opacity: .75; }
.prof-bild .beschr text { fill: var(--muted); }
.prof-bild .beschr .ecke { fill: var(--warn); font-weight: 650; }
/* Fadenkreuz: senkrecht durchgezogen, waagrecht gestrichelt bis an die Höhenachse */
.prof-bild .zeiger path { fill: none; stroke: var(--text); stroke-width: 1; }
.prof-bild .zeiger .waag { stroke-dasharray: 3 2; }
.prof-bild .zeiger circle { fill: var(--warn); stroke: var(--bg); stroke-width: 1.5; }
/* Freistellung wie bei den Beschriftungen auf der Karte, damit die Zahl über
   den Gitterlinien lesbar bleibt */
.prof-bild .zeiger text { fill: var(--text); font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }

/* Unter dem Bild: feste Zeilen, Name links, Bedienung rechts — Ebenen, Breite
   bzw. Länge, Überhöhung. Bricht auf keinem Handy halb um. */
.prof-regler {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.prof-rname {
  grid-column: 1; font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Die Ebenen über die ganze Breite, ohne Namen davor: neben „EBENEN" lief
   „+1,0 MB" auf dem Handy über den Rand */
.prof-ebenen { grid-column: 1 / 4; display: flex; gap: 6px; min-width: 0; }
.prof-ebenen .prof-dom { flex: 1 1 0; }
/* Der Legendeneintrag ist zugleich der Schalter der Ebene */
.prof-dom {
  display: flex; align-items: center; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); background-clip: padding-box; color: var(--muted);
  font: inherit; font-size: .76rem; text-align: left; white-space: nowrap; cursor: pointer;
  overflow: hidden;
}
.prof-dom::before {
  content: ""; flex: none; width: 14px; margin-right: 7px; border-top: 2px dashed var(--muted);
}
.prof-dom small { margin-left: auto; padding-left: 6px; font-size: .68rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.prof-dom.is-on {
  color: var(--text); border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
}
/* Regler über die festen Stufen: Striche wie auf einem Maßstab, eckiger Schieber */
.prof-weite { --d: 12px; grid-column: 2; position: relative; display: block; height: 26px; }
.prof-striche { position: absolute; inset: 0; pointer-events: none; }
.prof-striche i {
  position: absolute; top: 9px; width: 1px; height: 8px; background: var(--muted);
  left: calc(var(--d) / 2 - .5px + (100% - var(--d)) * var(--p));
}
.prof-weite input {
  position: relative; display: block; width: 100%; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.prof-weite input::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.prof-weite input::-moz-range-track { height: 2px; background: var(--line); }
.prof-weite input::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--d); height: 20px; margin-top: -9px;
  border: 1px solid var(--bg); border-radius: 2px; background: var(--accent);
}
.prof-weite input::-moz-range-thumb {
  width: var(--d); height: 20px; box-sizing: border-box;
  border: 1px solid var(--bg); border-radius: 2px; background: var(--accent);
}
.prof-weite input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prof-wert {
  grid-column: 3; min-width: 5.6em; text-align: right;
  font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text);
}
/* Steiler geht es nicht: Schieber grau, kein Zeiger */
.prof-weite input:disabled { cursor: default; }
.prof-weite input:disabled::-webkit-slider-thumb { background: var(--muted-2); }
.prof-weite input:disabled::-moz-range-thumb { background: var(--muted-2); }
/* Die Stelle unter dem Finger auf der Karte: Ring mit dunklem Rand und Mittelpunkt */
.prof-ring i {
  position: absolute; inset: 0; border: 3px solid #f59e0b; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(0, 0, 0, .8);
}
.prof-ring i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .8);
}
.prof-quelle { margin: 7px 0 0; font-size: .68rem; line-height: 1.45; color: var(--muted-2); }
.prof-quelle a { color: inherit; }
/* Im Profil braucht das Diagramm den Platz: flachere Knöpfe als in der Ergebnisleiste */
.bb-actions.knapp { margin-top: 9px; }
.bb-actions.knapp button { padding: 9px 6px; }

/* ---------- Abstecken ---------- */

/* Anzeige zum Ziel: Pfeil, Entfernung groß, darunter der Punkt. Der Pfeil zeigt
   auf dem Bildschirm dorthin, wo der Punkt liegt — die Kartendrehung ist drin. */
.ab-kopf { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
/* Der Pfeil ist der Schalter Karte/Kompass. Ein Rahmen zeigt, dass man ihn
   antippen kann; darunter steht, wonach er sich gerade richtet. */
.ab-richtung {
  flex: none; width: 50px; padding: 4px 0 3px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted-2); cursor: pointer;
  font: inherit;
}
.ab-richtung svg { display: block; width: 30px; height: 30px; fill: var(--accent); }
.ab-richtung span {
  font-size: .56rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; line-height: 1.2;
}
.ab-richtung.is-on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  background-clip: padding-box;
}
.ab-kopf-txt { flex: 1; min-width: 0; }
.ab-weite {
  margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.05;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ab-name {
  margin: 2px 0 0; font-size: .86rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-name small { margin-left: 7px; font-size: .74rem; font-weight: 400; color: var(--muted); }
.ab-kopf .tag { flex: none; align-self: flex-start; }

/* Zurück aus der Liste zur Anzeige, ohne neu zu wählen — wie „Fertig" an der Farbwahl */
.ab-zur {
  flex: none; margin-left: auto; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--muted);
  font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
}

.ab-filter {
  display: block; width: 100%; margin-top: 10px; padding: 9px 12px;
  font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: var(--r-knopf);
  background: var(--panel-2); color: var(--text); outline: none;
}
.ab-filter:focus { border-color: var(--accent); }
.ab-filter::placeholder { color: var(--muted-2); opacity: 1; }
.ab-sort { margin-top: 8px; }
.ab-sort .seg-btn { padding: 7px 10px; font-size: .8rem; }

.ab-liste {
  margin-top: 8px; max-height: min(34vh, 300px); overflow-y: auto;
  border-top: 1px solid var(--line);
}
.ab-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ab-zeile:hover, .ab-zeile:focus-visible { background: var(--panel-2); }
.ab-zeile.is-on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ab-zeile.war .ab-txt b { color: var(--muted); font-weight: 600; }
.ab-sym { flex: none; width: 16px; display: grid; place-items: center; }
.ab-sym svg { display: block; }
.ab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ab-txt b, .ab-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-txt b { font-size: .9rem; font-weight: 650; }
.ab-txt small { font-size: .74rem; color: var(--muted); }
.ab-weit { flex: none; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-pfeil { flex: none; width: 15px; height: 15px; fill: var(--accent); }
.ab-mehr { margin: 0; padding: 8px 6px; font-size: .76rem; color: var(--muted); }

/* Auf der Karte: Ring um den Zielpunkt und die Linie vom Standort dorthin, beide
   in der Signalfarbe. Die Linie nimmt sie über die Klasse, weil Leaflet sonst
   eine feste Farbe als Attribut setzt — CSS schlägt das Attribut. */
.ab-linie { stroke: var(--accent); }
.ab-marke svg { display: block; overflow: visible; }
.ab-marke .halo { stroke: #fff; stroke-width: 5; opacity: .9; }
.ab-marke .ring { stroke: var(--accent); stroke-width: 2.5; }

/* ---------- Marker ---------- */

.ms {
  display: block;
  font-size: .68rem; font-weight: 650; line-height: 1;
  color: var(--text);
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg);
  white-space: nowrap;
  pointer-events: none;
}

/* Auflage DB-Netz. Streckennummer als kleines Schild mit harter Kante, dunkel
   auf hell wie die Linie; Kilometer etwas kleiner als die der gesuchten Strecke. */
.ifg-nr {
  display: block; transform: translate(-50%, -50%);
  padding: 1px 4px; border: 1px solid #1d2733; border-radius: 2px;
  background: #ffffff; color: #1d2733;
  font-size: .66rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.ifg-km { font-size: .62rem; font-weight: 600; }
/* Betriebsstelle: 12 px Quadrat, die Schrift rechts daneben mittig auf seiner Höhe */
.ifg-bs {
  display: block; width: 12px; height: 12px;
  background: #ffffff; border: 2.5px solid #1d2733; cursor: pointer;
}
.ifg-bs-text {
  position: absolute; left: 16px; top: 6px; transform: translateY(-50%);
  font-size: .68rem; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap;
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg);
  pointer-events: none;
}
.ifg-bs-text b { font-weight: 750; }
.ifg-bue { display: block; cursor: pointer; }

.pin {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  /* Die Spitze ist die spitze Ecke unten links; −45° dreht sie nach unten.
     Mit +45° zeigte sie nach links und saß 18 px links, 11 px über der Stelle.
     Der Anker in pinZeichnen (13, 31) liegt genau auf ihr. */
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--accent);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.pin::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.pin.warn { background: var(--warn); }
.pin.bad { background: var(--bad); }
/* Die übrigen Punkte einer Reihe: derselbe Pin, nur zurückgenommen, damit
   erkennbar bleibt, welchen die untere Leiste gerade beschreibt. Die Größe
   bleibt gleich — ein kleinerer Pin sitzt im selben Rahmen versetzt und zeigt
   dann ein paar Pixel neben die Stelle. */
.pin.neben { opacity: .7; }

/* Kilometer am Pin — steht neben der Spitze, damit er auch ohne die untere
   Leiste und auf einem Bildschirmfoto ablesbar bleibt. */
.pin-km {
  display: block; padding: 2px 6px; border-radius: var(--r-klein);
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  border: 1.5px solid rgba(255, 255, 255, .85);
}
.pin-km.warn { background: var(--warn); color: #1a1206; }   /* Orange trägt keine weiße Schrift */
.pin-km.bad { background: var(--bad); }
.pin-km.neben { opacity: .82; }

/* 44 px Trefferfläche, der Punkt sitzt in ihrer Mitte (22 − 8 = 14 px Rand) */
.me-hit { display: grid; place-items: center; cursor: pointer; }
.me-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #2f81f7; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top));
  transform: translate(-50%, -12px);
  padding: 10px 17px; border-radius: var(--r-knopf);
  background: var(--text); color: var(--bg);
  font-size: .84rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 900; max-width: calc(100% - 28px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


@media (max-width: 380px) {
  .field label { font-size: .6rem; }
  .field input { font-size: 1.02rem; }
  #q { font-size: 1rem; }
  .qgo { width: 30px; }
  .more { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .progress::after { animation: none; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MESSWERK · Nachtrag
   Die Handschrift sitzt in den Tokens oben. Bewusst ohne Webfont: die App
   muss an der Strecke auch ohne Empfang starten, und ihr Worker cacht nur
   eigene Dateien.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kilometerangaben laufen tabellarisch. Eine Zahl, die beim Weiterfahren
   springt, weil die Ziffern unterschiedlich breit sind, ist hier ein
   Fehler und kein Detail. */
body { font-variant-numeric: tabular-nums; }

/* Das Strichmaß — große Teilung 48px, kleine 8px. Bei dieser App ist es
   kein Zierrat, sondern die Kilometrierung selbst. */
.rule {
  height: 14px;
  border-top: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 8px);
  background-size: 100% 13px, 100% 6px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}