/* ═══════════════════════════════════════════════
   RouteCast Mobile — mobile.css  (.pmp-save-btn: ☆-Merken-Button im
   Live-POI-Popup, Gold-Highlight wie Desktops Save-Button)
   (Phase B)
   Tokens: Dark = Standard (wie Desktop), Light = Outdoor-Kontrast.
   Kein Farbwert außerhalb der Tokens verwenden!
   ═══════════════════════════════════════════════ */

:root{
  --bg:#0B1620; --sf:#101824; --sf2:#0E1B27; --sf3:#182C3B; --bg2:var(--sf2);
  --bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.12);
  --txt:#E6E1D6; --dim:rgba(199,205,211,.68); --faint:rgba(255,255,255,.04);
  --acc:#6FA85A; --acc-strong:#86C56E; --acc-soft:rgba(111,168,90,.16);
  --info:#4CA3E2; --success:#78C96F; --warning:#FF8A2B;
  --gold:#E2B35C; --gold-soft:rgba(226,179,92,.16); --night:#6B66C8;
  --track:#C8A96E; --hl:#86C56E; --cursor:var(--gold); --geo:var(--info);
  --danger:#E74C3C;
  --warn:var(--warning); --warn-soft:#D9C24E;
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --fs-2xs:.66rem; --fs-xs:.73rem; --fs-sm:.82rem; --fs-md:.92rem;
  --fs-lg:1.05rem; --fs-xl:1.3rem;
  --ease:cubic-bezier(.22,.72,.24,1);
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --sf:#F0F3EE; --sf2:#E4EAE0; --sf3:#D8E0D2;
  --bd:rgba(10,25,15,.2); --bd2:rgba(10,25,15,.4);
  --txt:#0E1A12; --dim:#3E5244; --faint:rgba(10,25,15,.05);
  --acc:#2F6E1F; --acc-strong:#2F6E1F; --acc-soft:rgba(47,110,31,.14);
  --gold:#7A5A1C; --gold-soft:rgba(122,90,28,.14);
  --info:#176192; --success:#286A20; --warning:#9A4800; --night:#514BAA;
  --track:#8A4F0E; --hl:#1F6E14; --cursor:#8A4F0E;
  --danger:#A33F12;
  --warn:var(--warning); --warn-soft:#B79A1E;
  --shadow-lg:0 18px 44px rgba(20,35,20,.25);
  --shadow-sm:0 2px 8px rgba(20,35,20,.15);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
/* overflow-x:clip statt hidden — hidden macht body zum Scroll-Container und
   ZERSTÖRT position:sticky (Topbar)! clip schneidet nur ab. */
html,body{min-height:100dvh;overflow-x:hidden;overflow-x:clip}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Space Grotesk',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;
}
/* Hochformat (09.09.2026, dritter Anlauf): #rightCol ist nur noch ein reines
   DOM-Gruppierungselement ohne eigene Optik — #emptyState/#tourBasis/
   #accordion sind jeweils eigenständige position:fixed-Ebenen (siehe "Pinned
   Map"-Abschnitt weiter unten), display:contents lässt #rightCol selbst dabei
   komplett verschwinden. Querformat/Tablet braucht #rightCol dagegen als
   echte Box (zwei-Spalten-Grid) und setzt das in der Media Query unten
   explizit zurück (display:flex statt contents). */
#rightCol{display:contents}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--acc-strong);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ── Topbar ── */
/* position:fixed statt sticky (09.09.2026) — Hochformat hat seitdem keinen
   body-Scroll mehr, der eine sticky-Positionierung bräuchte (Karte + Panel
   sind selbst position:fixed, siehe "Pinned Map" weiter unten); ein
   Konsistenz-Fix, nachdem sticky+dynamische iOS-Viewporthöhe (Adressleiste
   ein-/ausblenden) beim Scrollen im Panel offenbar kurzzeitig die Topbar aus
   dem Bild schieben konnte. left:0/right:0+max-width+margin:auto zentriert
   sie trotzdem im 520px-App-Rahmen — Querformat setzt das unten zurück. */
#topbar{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:10px 12px;position:fixed;top:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:100;
  background:var(--bg);border-bottom:1px solid var(--bd);
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;cursor:pointer}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(155deg,var(--acc),#5a8f47);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:var(--bg);
}
.brand-name{font-weight:700;font-size:var(--fs-md);line-height:1.1}
.brand-name small{display:block;font-family:'JetBrains Mono',monospace;font-size:.52rem;font-weight:400;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.tb-btn{
  min-width:44px;min-height:44px;border-radius:11px;border:1.5px solid var(--bd2);background:var(--sf);
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;
}
.tb-btn.icon{padding:0;font-size:1.1rem}
/* Nutzerfeedback 10.09.2026: mit dem neuen 4. Topbar-Button (🏔) wirkte der
   einheitliche 8px-Abstand zwischen ALLEN Elementen zu gleichförmig/weit —
   jetzt gruppiert: "Route laden" bleibt die abgesetzte Haupt-Aktion, die drei
   Icon-Buttons rücken als eigener, enger Cluster zusammen. Höhe/Touch-Target
   der Buttons bleiben unverändert (44px) — die Kartenposition der FAB-Säule
   (.map-fab-col, siehe "Pinned Map") hängt an der Tour-Karten-Höhe, nicht an
   der Topbar-Breite, und muss deshalb hier NICHT mitverschoben werden. */
.tb-icon-group{display:flex;gap:5px;flex-shrink:0}
.tb-btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}

/* Speichern-Button in der Topbar — nur sichtbar bei ungespeicherten Änderungen
   (auch wenn Tour-Basis eingeklappt/außer Sicht ist), Amber wie das Web-Pendant
   (.tb-action-btn.dirty in style.css), damit die Farbsprache konsistent bleibt */
.dirty-btn{
  background:rgba(255,138,43,.1);border-color:rgba(255,138,43,.4);color:var(--warning);
  animation:rc-dirty-pulse 2s ease-in-out infinite;
}
.dirty-dot{width:6px;height:6px;border-radius:50%;background:var(--warning);box-shadow:0 0 6px rgba(255,138,43,.6);flex-shrink:0}
@keyframes rc-dirty-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,43,.35)}50%{box-shadow:0 0 0 5px rgba(255,138,43,0)}}
@media(prefers-reduced-motion:reduce){.dirty-btn{animation:none}}

/* ── Tour-Basis (fixes Band über der Karte) ── */
.band{
  background:var(--sf);border:1.5px solid var(--bd);border-radius:14px;overflow:hidden;flex-shrink:0;
}
.band.open{border-color:var(--bd2);box-shadow:var(--shadow-sm)}
/* Schwebt wie die Akkordeon-Bänder direkt auf der Karte (09.09.2026 —
   "einheitliches Bild"), reserviert keine eigene Zone mehr — #mapWrap/
   #accordion beginnen beide bei derselben Höhe (--content-top). z-index über
   beiden, damit ein aufgeklappter Bearbeiten-Modus (wächst über die normale
   Kopfzeilen-Höhe hinaus) alles darunter sauber überdeckt statt darunter zu
   verschwinden. */
/* +8px Abstand zur Topbar (Nutzerwunsch 10.09.2026 — vorher lag sie direkt an
   der Topbar-Kante). Bewusst eigener Offset statt --content-top direkt zu
   erhöhen, sonst würde auch die Karte tiefer anfangen. Die FAB-Säule
   (.map-fab-col) bekommt denselben +8px-Versatz mit, damit sie weiterhin
   exakt unter der Tour-Karte startet. */
#tourBasis{
  position:fixed;top:calc(var(--content-top) + 8px);left:10px;right:10px;max-width:500px;margin:0 auto 8px;
  z-index:210;
}
/* Automatisch ausgeblendet, solange unten ein Chip offen ist (Nutzerwunsch
   10.09.2026: "oben ausblenden, wenn unten etwas angezeigt wird" — gewinnt
   zusätzliche Kartenfläche, kommt von selbst zurück sobald wieder alles unten
   zu ist). #btnShowTour (Topbar) erzwingt sie trotzdem an, body.force-tour
   braucht !important, da die :has()-Regel sonst spezifischer ist. */
body:has(#chipPanel:not([hidden])) #tourBasis{display:none}
body.force-tour #tourBasis{display:block !important}
/* Das 🏔 erzwingt genau diese Karte — solange sie ohnehin dasteht, hat es
   nichts zu tun und macht nur den Platz neben 🧭/👤/⚙ eng (Nutzerwunsch
   15.09.2026). Bei force-tour bleibt es sichtbar: dort ist es der einzige Weg,
   die erzwungene Karte wieder loszuwerden. */
body:not(:has(#chipPanel:not([hidden]))) #btnShowTour{display:none}
.band-head{
  width:100%;display:flex;align-items:center;gap:10px;padding:12px 13px;
  background:none;border:none;text-align:left;min-height:52px;
}
.band-ico{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:var(--faint);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;color:var(--dim);
}
.band.open .band-ico{background:var(--acc-soft);color:var(--acc-strong);border-color:var(--acc)}
.band-ico svg{width:16px;height:16px}
.band-headtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.band-title{font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-meta{font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-meta b{color:var(--txt);font-weight:600}
.band-chev{flex-shrink:0;width:18px;height:18px;color:var(--dim);transition:transform .3s var(--ease)}
.band.open .band-chev{transform:rotate(180deg);color:var(--acc-strong)}
.band-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.band.open .band-collapse{grid-template-rows:1fr}
.band-collapse-inner{overflow:hidden}
.band-body{padding:0 13px 14px}

/* Formularfelder Tour-Basis */
.tf-row{display:flex;flex-direction:column;gap:12px}
.field-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;display:block}
.tf-input{
  width:100%;background:var(--sf2);border:1.5px solid var(--bd2);color:var(--txt);
  border-radius:9px;padding:11px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--fs-md);
  min-height:44px;
}
.tf-input:focus{border-color:var(--acc);outline:none}
.field-row-3{display:grid;grid-template-columns:1fr .9fr 1.15fr;gap:9px}
.field-row-3 .tf-input{padding:9px 7px;font-size:var(--fs-sm)}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* Read-Ansicht eines Feldwerts — gleiche Box-Optik wie .tf-input, aber ohne
   Eingabe-Semantik (kein Rand-Fokus-Zustand, reiner Text). */
.tb-view-val{
  width:100%;background:var(--sf2);border:1.5px solid var(--bd);color:var(--txt);
  border-radius:9px;padding:11px;font-weight:700;font-size:var(--fs-md);min-height:44px;
  box-sizing:border-box;display:flex;align-items:center;
}
.field-row-3 .tb-view-val{padding:9px 7px;font-size:var(--fs-sm);min-height:38px}
/* Tour-Basis Bearbeiten-Umschaltung (Prio-Liste T1/T3/T6, 21.07.) — Default
   ist Lesemodus (.tb-edit ausgeblendet); #tourBasis.editing dreht es um.
   Datum bleibt bewusst außen vor (immer editierbar, siehe T5). */
#tourBasis:not(.editing) .tb-edit{display:none}
#tourBasis.editing .tb-view{display:none}
.step-btn:disabled{opacity:.35}
.tb-mode-ico{font-size:1.1rem;flex-shrink:0;line-height:1}
.stepper{display:flex;align-items:center;gap:5px;justify-content:center;min-height:44px}
.step-btn{
  width:34px;height:34px;border-radius:9px;border:1.5px solid var(--bd2);background:var(--sf2);
  color:var(--txt);font-size:.95rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-val{font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);font-weight:700;min-width:20px;text-align:center}
/* 4 Kacheln in einer Zeile (Prio-Liste, 21.07.) — vorher 3-Spalten-Grid für
   inzwischen 4 Kacheln (Ø Dauer/Tag kam später dazu), 4. Kachel brach dadurch
   in eine eigene Zeile um. Etwas engere Innenabstände/Schrift, damit die
   Label-Texte ("Ø Dauer/Tag") auf schmalen Screens nicht zu sehr quetschen. */
.stat-row{display:grid;grid-template-columns:repeat(4, 1fr);gap:6px}
.stat-tile{
  background:var(--sf2);border:1px solid var(--bd);border-radius:10px;
  padding:8px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
}
.stat-tile .st-val{font-size:var(--fs-md);font-weight:700}
.stat-tile .st-label{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);line-height:1.25}
.action-row{display:flex;flex-wrap:wrap;gap:8px}
.action-btn{
  flex:1;min-width:104px;min-height:44px;border-radius:9px;border:1.5px solid var(--bd2);background:var(--sf2);
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;
}
.action-btn.danger{color:var(--danger)}

/* ── Pinned Map (Hochformat: permanenter Vollbild-Hintergrund) ──
   09.09.2026, vierter Anlauf: KEIN gemeinsamer #rightCol-Panel-Wrapper mehr.
   Drei unabhängige position:fixed-Ebenen genau übereinander, alle drei ab
   derselben Höhe (--content-top = nur noch Topbar-Höhe): #mapWrap ganz unten
   (Hintergrund, deckt den kompletten Bildschirm unter der Topbar ab),
   #tourBasis UND #accordion schweben beide direkt darüber — "ein einheitliches
   Bild" (Nutzerfeedback 09.09.2026): die Tour-Karte ist jetzt genau wie die
   anderen Bänder eine auf der Karte schwebende Karte, reserviert keine eigene
   Zone mehr, die Karte reicht überall bis direkt unter die Topbar. z-index
   hält die Reihenfolge zusammen: Karte (50) < Akkordeon-Bänder (200) <
   Tour-Basis (210) — bei aufgeklapptem Bearbeiten-Modus liegt sie also immer
   sichtbar über allem, ohne dass sich sonst etwas verschieben muss. */
:root{ --content-top:70px; }
#mapWrap{
  position:fixed;top:var(--content-top);bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  border:none;border-radius:0;overflow:hidden;
  background:var(--sf2);z-index:50;
}
/* Vollbild: Karte bricht aus dem 520px-Rahmen aus und deckt den ganzen
   physischen Bildschirm inkl. Topbar/Tour-Basis ab (z-index über allem) —
   Tour-Basis + Akkordeon werden dabei komplett ausgeblendet. */
#mapWrap.full{top:0;max-width:none;margin:0;z-index:500}
/* #tourBasis/#accordion sind KEINE direkten Geschwister von #mapWrap (sitzen
   in #rightCol) — display:none auf #rightCol selbst (dessen display:contents
   das überschreibt) nimmt beide zuverlässig mit, auch als position:fixed. */
#mapWrap.full+#rightCol{display:none}
/* Chip-Pager (09.09.2026, ersetzt das Ein-Band-offen-Akkordeon): KEIN eigener
   Hintergrund/Rahmen am Container selbst — die Karte bleibt in allen
   Zwischenräumen sichtbar. justify-content:flex-end hängt die Chip-Leiste
   unten an (Nutzerfeedback: "so viel Karte wie möglich"); ist ein Chip aktiv,
   erscheint der Inhalt direkt darüber (siehe #chipContent/#chipStrip weiter
   unten für die eigentlichen Bausteine — RCLayout.initChipPager() steuert
   deren Sichtbarkeit rein per JS, kein CSS-:has()-Trick mehr nötig).
   pointer-events:none auf dem Container + :auto auf den beiden Kindern lässt
   Taps/Drags in den leeren Zwischenräumen zur Karte durch — sonst würde der
   (unsichtbare, aber bis bottom:0 reichende) Container-Kasten alle
   Kartengesten abfangen ("Karte nicht mehr reaktiv"). */
#accordion{
  position:fixed;top:var(--content-top);bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  z-index:200;overflow-y:auto;overscroll-behavior:contain;
  justify-content:flex-end;pointer-events:none;
}
#accordion>.chip-strip,#accordion>.chip-panel{pointer-events:auto}
/* Kein Trip geladen (Leerzustand) — eigene, einfache zentrierte Fläche unter
   der Topbar statt der Akkordeon-Positionierung (die hier ja leer/hidden ist).
   display:flex/gap/padding/text-align kommen weiterhin aus der bestehenden
   "Leerzustand"-Regel weiter unten — hier nur die neue Fixed-Positionierung. */
#emptyState{position:fixed;top:70px;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:60}
/* touch-action:none — verhindert natives Seiten-Pinch-Zoom auf iOS (touch-
   action:auto ließ den Browser die Geste schon auf Compositor-Ebene starten,
   bevor gesturestart/JS überhaupt greifen konnte). Leaflets eigenes
   Pinch-Zoom läuft über JS-Touch-Handling und bleibt davon unberührt —
   gleiches Muster wie #elevCanvas. */
#map{width:100%;height:100%;touch-action:none}
#mapWrap.tile-filter .leaflet-tile-pane{filter:brightness(.7) invert(1) hue-rotate(180deg) saturate(.7) contrast(.9)}
/* POI-Symbole auf der Karte (divIcon aus mobile_map.setPoiMarkers) —
   heller Chip, damit SVG wie Emoji auf jedem Kartenstil lesbar bleibt */
.poi-mk{
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.3);border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:flex !important;align-items:center;justify-content:center;
}
.poi-mk .mk-svg{width:14px;height:14px}
.poi-mk .mk-em{font-size:13px;line-height:1}
/* Größere POI-Symbole in den drei höchsten Zoomstufen (07.10.2026; mobile_map.js setzt poi-zs-1..3
   an die Karte). Größe UND Versatz zusammen überschreiben — Leaflet setzt beides inline (iconSize 22,
   iconAnchor 11), der Mittelpunkt bleibt so auf der Koordinate. */
.poi-zs-1 .poi-mk{width:26px !important;height:26px !important;margin-left:-13px !important;margin-top:-13px !important}
.poi-zs-2 .poi-mk{width:30px !important;height:30px !important;margin-left:-15px !important;margin-top:-15px !important}
.poi-zs-3 .poi-mk{width:34px !important;height:34px !important;margin-left:-17px !important;margin-top:-17px !important}
.poi-zs-1 .poi-mk .mk-svg{width:17px;height:17px} .poi-zs-1 .poi-mk .mk-em{font-size:16px}
.poi-zs-2 .poi-mk .mk-svg{width:20px;height:20px} .poi-zs-2 .poi-mk .mk-em{font-size:19px}
.poi-zs-3 .poi-mk .mk-svg{width:23px;height:23px} .poi-zs-3 .poi-mk .mk-em{font-size:22px}

/* POI-Cluster-Bubbles (Live-Overlay, >1 Typ aktiv) — Farbe/Icon/Zähler kommen
   inline aus mobile_map.js iconCreateFunction. Die drei Overrides darunter
   verhindern, dass leaflet.markercluster zusätzlich seine eigenen
   Default-Farbkreise rendert (gleiches Muster wie Desktop, css/style.css:344-346). */
.poi-cluster{
  border-radius:50%;display:flex !important;align-items:center;justify-content:center;
  border:2.5px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.5);position:relative;
}
.poi-cluster .pc-ico{font-size:.55rem;position:absolute;top:-1px;left:50%;transform:translateX(-50%)}
.poi-cluster .pc-count{
  font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:700;color:#fff;
  margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:none !important}
.marker-cluster div{background:none !important}
.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .3s ease-out,opacity .3s ease-in}

/* Debug-Overlay (Einblenden-Sheet, temporär fürs Perf-Debugging) — unten
   links, da oben links der Zoom-Control und oben rechts die Icon-Säule sitzt. */
.map-debug-info{
  position:absolute;left:8px;bottom:8px;z-index:600;
  background:rgba(11,22,32,.85);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.25);
  color:var(--txt);border-radius:8px;padding:5px 8px;font-size:.62rem;line-height:1.5;
  pointer-events:none;white-space:pre;
}
:root[data-theme="light"] .map-debug-info{background:rgba(255,255,255,.92);border-color:rgba(10,25,15,.4);color:#0E1A12}

/* Tagespunkte-Marker (Einblenden-Sheet) — Etappen-Start/-Ende als nummerierter Chip */
.day-point-mk{
  background:var(--acc);border:2px solid rgba(255,255,255,.9);border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.4);color:#fff;font-size:11px;font-weight:700;
  display:flex !important;align-items:center;justify-content:center;
}

/* Elevation-Zoom-Marker (Nutzerwunsch 11.09.2026) — markiert nur Anfang/Ende
   des im Chart gezoomten Ausschnitts als kleines Dreieck, statt einer Linie
   über dem Track: liegt neben der Route statt auf ihr, überdeckt also nie die
   Höhen-/Untergrund-/Straßenart-Einfärbung. Reiner CSS-Border-Trick fürs
   Dreieck, weißer Umriss per drop-shadow (funktioniert auch bei einer
   Border-Form, anders als ein normaler CSS-border/outline). */
.elev-zoom-mk{
  width:0;height:0;margin:0 auto;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:11px solid #000;
  filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* Zweite, unauffälligere Markerform (U01, 27.09.2026): markiert eine weitere
   Durchquerung derselben Kartenstelle, die NICHT im Elevation-Chart unten
   gezeigt wird — bewusst blass/grau statt schwarz, damit sie sich von den
   "aktiver Ausschnitt"-Dreiecken oben unterscheidet, gleicher Rand-Trick fürs
   Freistellen von der Track-Einfärbung. */
.elev-zoom-mk-other{
  width:8px;height:8px;margin:1px auto;border-radius:50%;
  background:rgba(140,150,160,.85);
  filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* POI-Namens-Label (Nutzerwunsch 28.08.2026) — permanenter Tooltip links neben
   dem Pin statt nur Hover, s. mobile_map.js buildPoiMarker()/_schedulePoiLabelRefresh()
   (Live-OSM-POIs, zoom-/anzahlabhängig) und mobile_app.js renderPoiMarkers()
   (Saved/UserPOIs, labelAlways:true). Pille/Kasten statt Halo-Text — Nutzer-
   feedback 28.08.2026: "in der mobilen Ansicht eher am Standard lassen, Halo
   macht es super unleserlich". */
.poi-name-label.leaflet-tooltip{background:var(--sf2);border:1px solid var(--bd2);color:var(--txt);font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;padding:2px 6px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.poi-name-label.leaflet-tooltip:before{display:none}

/* POI-Klick-Popup auf der Karte: Name / Typ / verfügbare Details — Leaflet-
   Popup ins Dark-/Light-Theme eingefärbt (Default ist immer weiß). */
.rc-poi-popup .leaflet-popup-content-wrapper{
  background:var(--sf);color:var(--txt);border:1.5px solid var(--bd2);
  border-radius:12px;box-shadow:var(--shadow-lg);
}
.rc-poi-popup .leaflet-popup-content{margin:10px 12px;font-family:'Space Grotesk',sans-serif;line-height:1.4}
.rc-poi-popup .leaflet-popup-tip{background:var(--sf);box-shadow:none;border:1.5px solid var(--bd2);border-top:none;border-left:none}
.rc-poi-popup .leaflet-popup-close-button{color:var(--dim) !important}
.pmp-head{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.pmp-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.pmp-ico .mk-svg{width:18px;height:18px}
.pmp-ico .mk-em{font-size:1rem;line-height:1}
.pmp-title{font-weight:700;font-size:var(--fs-sm)}
.pmp-type{font-size:var(--fs-2xs);color:var(--dim);margin-bottom:5px}
/* Merken-Button (Live-OSM-POI → Saved POI), gleiches Gold wie Desktops
   Save-Button (app.js buildPopupHTML) im "gespeichert"-Zustand. */
.pmp-save-btn{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:6px;padding:4px 9px;
  border-radius:8px;border:1.5px solid var(--bd2);background:var(--sf2);
  font-size:var(--fs-2xs);font-weight:700;color:var(--dim);cursor:pointer;
}
.pmp-save-btn.on{background:rgba(255,215,0,.15);border-color:#ffd700;color:#ffd700}
.pmp-detail{font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);margin-bottom:3px;line-height:1.4}
/* Kurzinfo oben im POI-Detail-Sheet (07.10.2026, poi_overlay.js poiFactsHTML): „Was ist das?“ + Faktenzeilen */
.pmp-facts{margin:0 0 10px}
.pmp-kind{font-weight:700;font-size:var(--fs-md);color:var(--acc-strong);line-height:1.3;margin-bottom:6px}
.pmp-facts-rows{display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;align-items:baseline;font-size:var(--fs-xs);line-height:1.35}
.pmp-fact{display:contents}
.pmp-fact-ico{text-align:center}
.pmp-fact-k{color:var(--dim);white-space:nowrap}
.pmp-fact-v{color:var(--txt);overflow-wrap:anywhere}
/* Schutzgebiets-Hinweis (Nutzer-Session 28.09.2026) — generischer, immer gültiger Warnhinweis bei nature_reserve-POIs. */
.pmp-warn{color:var(--warning)}
/* Saved-POI-Abgleich-Statuszeile (Plan 22.09.2026, Phase 4) — gleiche Bedeutung wie
   Web (app.js _poiStatusBadgeHTML): info=geändert, warn=nicht mehr gefunden, pending=wird ergänzt. */
.pmp-status{margin:4px 0;padding:5px 7px;border-radius:8px;background:var(--sf2);border:1.5px solid var(--bd2);font-size:var(--fs-2xs)}
.pmp-status-info{border-color:#e8c84a;color:#e8c84a}
.pmp-status-warn{border-color:var(--warning);color:var(--warning)}
.pmp-status-pending{color:var(--dim)}
.pmp-status-actions{display:flex;gap:6px;margin-top:5px}
.pmp-status-actions button{
  flex:1;padding:5px 0;border-radius:6px;border:1.5px solid var(--bd2);background:var(--sf1);
  font-size:var(--fs-2xs);font-weight:700;color:var(--txt);cursor:pointer;
}
.pmp-status-accept{border-color:var(--success)!important;color:var(--success)!important}
.pmp-img-slot:empty{display:none}
/* object-fit:contain statt cover — Bild wird nie beschnitten, skaliert nur
   auf die Breite; height:auto lässt das echte Seitenverhältnis wirken statt
   es in eine feste Höhe zu zwingen. max-height nur als Notbremse gegen sehr
   hochkantige Bilder. */
.pmp-img-slot img{
  display:block;width:100%;height:auto;max-height:260px;object-fit:contain;
  border-radius:10px;margin-bottom:8px;background:var(--sf2);
}
.pmp-text{font-size:var(--fs-xs);color:var(--txt);line-height:1.5;margin-bottom:6px;white-space:pre-wrap}
.pmp-text a{color:var(--acc-strong);font-weight:700}
.pmp-links{display:flex;flex-wrap:wrap;gap:6px}
.pmp-links a{
  display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:8px;
  border:1.5px solid var(--bd2);background:var(--sf2);font-size:var(--fs-2xs);font-weight:700;
  color:var(--acc-strong);text-decoration:none;
}

/* Such-/Karten-Link-Reihe wie im Web-POI-Popup (Maps/Street View/Google/Web/
   Wiki) — kompakte Pillen, in Tages-POI-Detail UND Karten-Popup gleich. */
.poi-action-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.poi-action-row .pact{
  display:inline-flex;align-items:center;gap:4px;min-height:0;padding:3px 8px;border-radius:7px;
  border:1.5px solid var(--bd2);background:var(--sf2);font-size:.55rem;font-weight:700;
  color:var(--acc-strong);text-decoration:none;
}
/* Karten-Icon-Säule: flex-Spalte statt hardcoded top-Werte pro FAB — neue
   Icons ergänzen sich einfach als weiteres Kind, kein Layout-Umbau nötig.
   top:78px (statt 10px) seit die Tour-Karte auf der Karte schwebt (09.09.2026)
   — sonst verdeckt die Tour-Karte den obersten FAB (⛶ Vollbild), da beide im
   selben Bereich direkt unter der Topbar liegen (Nutzerfeedback: "Tour-Band
   verdeckt die Vollbildoption"); +8px (10.09.2026) folgt dem neuen Abstand
   von #tourBasis zur Topbar, damit die Säule weiterhin exakt unter der
   Tour-Karte beginnt, nicht mit ihr überlappt. right:14px (statt 10px,
   10.09.2026) etwas mehr Luft zur Kante. Im echten Vollbild (.full) ist die
   Tour-Karte ausgeblendet — dort wieder eng an die Kante wie früher. */
.map-fab-col{
  position:absolute;top:78px;right:14px;z-index:600;
  display:flex;flex-direction:column;gap:10px;
}
#mapWrap.full .map-fab-col{top:10px}
/* Route-Modus: keine Tour-Karte über der Karte (body.route-mode #tourBasis ist aus),
   die Säule braucht den Platz darunter nicht freizuhalten. Passen trotzdem nicht alle
   Knöpfe bis zur Oberkante des Chip-Panels, setzt RCLayout.initFabFit() fab-wrap +
   --fab-rows: Grid, Spalten von rechts nach links — die ersten Knöpfe bleiben an der
   gewohnten Stelle, der Rest steht links daneben statt unter dem Panel (Q04, 09.10.2026). */
body.route-mode .map-fab-col{top:10px}
.map-fab-col.fab-wrap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--fab-rows),44px);direction:rtl}
.map-fab-col.fab-wrap>.map-fab{direction:ltr}
.map-fab{
  position:relative;width:44px;height:44px;border-radius:12px;
  background:rgba(11,22,32,.85);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.25);
  color:var(--txt);display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
:root[data-theme="light"] .map-fab{background:rgba(255,255,255,.92);border-color:rgba(10,25,15,.4);color:#0E1A12}
.map-fab.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* Helles Design: die Regel darüber für helle Knöpfe ist spezifischer und schluckte den „an“-Zustand (07.10.2026) */
:root[data-theme="light"] .map-fab.on{background:var(--acc);border-color:var(--acc);color:#fff}
.map-fab.pulse{animation:rc-pulse 1.1s infinite}
/* Kartenfarbe-FAB: nur im Vollbildmodus nötig — sonst steuert das offene
   Akkordeon-Band die Kartenfarbe direkt (setMapColorModeForBand(), mobile_app.js);
   im Vollbild liegt die Karte fest über den Bändern, die sind dann nicht klickbar. */
#btnColorMode{display:none}
#mapWrap.full #btnColorMode{display:flex}
@keyframes rc-pulse{50%{opacity:.45}}

/* Routenfarben-Legende (Vollbildmodus) — Nutzerwunsch 28.08.2026: "Passend zur
   Anzeige", d.h. Inhalt folgt _mapColorMode (Tage/Höhe/Untergrund/Straßenart,
   siehe #btnColorMode oben) und wird bei jedem Moduswechsel neu gerendert
   (renderMapLegend(), mobile_app.js). Öffnet sich automatisch beim Eintritt in
   den Vollbildmodus und bei jedem Farbmodus-Wechsel (auch nach manuellem
   Schließen über das ✕ unten) — kein separates Einblenden-FAB nötig
   (Nutzerfeedback 28.08.2026: "keine Option zum Einblenden"). Außerhalb des
   Vollbilds steuert das offene Akkordeon-Band die Kartenfarbe und zeigt seine
   eigene Balken-Legende (.surf-bar/.surf-cloud) im Band selbst. */
.map-legend{
  position:absolute;left:8px;right:64px;bottom:8px;z-index:600;
  background:rgba(11,22,32,.85);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.25);
  color:var(--txt);border-radius:10px;padding:8px 10px;max-height:28vh;overflow-y:auto;
}
:root[data-theme="light"] .map-legend{background:rgba(255,255,255,.92);border-color:rgba(10,25,15,.4);color:#0E1A12}
.map-legend-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.map-legend-title{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.75}
.map-legend-close{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(255,255,255,.12);color:inherit;font-size:.62rem;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
:root[data-theme="light"] .map-legend-close{background:rgba(0,0,0,.08)}
.map-legend-empty{font-size:.62rem;opacity:.6}
.map-legend-items{display:flex;flex-wrap:wrap;gap:5px 7px}
.map-legend-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;
  background:rgba(255,255,255,.1);font-size:.62rem;white-space:nowrap;border:none;color:inherit;font-family:inherit;
}
:root[data-theme="light"] .map-legend-chip{background:rgba(0,0,0,.06)}
.map-legend-chip.active{outline:1.5px solid currentColor}
.map-legend-chip:disabled{opacity:.35}
.map-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* POI-Overlay-FAB-Status (§6a Plan) — ersetzt die einfache .on-Einfärbung,
   sobald ein Ladezustand feststeht: Lädt (orange, pulsierend) / Treffer
   (grün) / leer (gelb) / Fehler (rot). */
#btnPoiOverlay.poi-loading{background:var(--warn);border-color:var(--warn);color:#1a1a1a}
#btnPoiOverlay.poi-ok{background:var(--acc);border-color:var(--acc);color:#fff}
#btnPoiOverlay.poi-empty{background:var(--warn-soft);border-color:var(--warn-soft);color:#1a1a1a}
#btnPoiOverlay.poi-error{background:var(--danger);border-color:var(--danger);color:#fff}
/* Knopf mit langem Drücken (📍 = POIs aus/an, mobile.html + locate.html): kein iOS-Kontextmenü;
   .fab-off = ausgeschaltet → blass + roter Schrägstrich */
.map-fab.fab-lp{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.map-fab.fab-off{opacity:.6}
.map-fab.fab-off::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--danger);transform:rotate(-45deg);border-radius:1px;pointer-events:none}
.fab-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;
  background:var(--sf3);color:var(--txt);font-size:.6rem;font-weight:700;line-height:16px;
  text-align:center;border:1.5px solid var(--bg);
}

/* Long-Press-Explore-Pin (§6a) — kurzer Puls am angetippten Punkt als
   Bestätigung, dass dort geladen wird; entfernt sich selbst. */
.poi-explore-pulse{
  width:26px;height:26px;border-radius:50%;background:var(--warn);opacity:.9;
  animation:poi-explore-pulse-anim .9s var(--ease) forwards;
}
@keyframes poi-explore-pulse-anim{
  0%{transform:scale(.3);opacity:.9}
  70%{transform:scale(1.6);opacity:.35}
  100%{transform:scale(2.1);opacity:0}
}

/* ── POI-Overlay-Sheet (Phase E1) ── */
.poi-ov-count{font-size:var(--fs-2xs);color:var(--dim);margin:2px 0 10px}
.poi-ov-active-row{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1.5px solid var(--bd);
}
.poi-ov-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.poi-ov-group{
  grid-column:1/-1;display:flex;flex-direction:column;gap:8px;border-radius:10px;
  border:1.5px solid var(--bd2);background:var(--sf2);padding:8px 10px;
}
.poi-ov-group-head{
  display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;
  text-align:left;min-height:36px;font-size:var(--fs-xs);font-weight:700;color:var(--txt);
}
.poi-ov-group-head .ovgi-svg{width:18px;height:18px;flex-shrink:0}
.poi-ov-group-head .ovgi-em{font-size:1rem;line-height:1;flex-shrink:0}
.poi-ov-group-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poi-ov-group-head .chev{width:18px;height:18px;transition:transform .2s var(--ease);color:var(--dim);flex-shrink:0}
.poi-ov-group.open .poi-ov-group-head .chev{transform:rotate(180deg)}
/* Gruppen-weiter An/Aus (schaltet alle Typen der Gruppe auf einmal, siehe
   toggleGroupTypes()) — bewusst kompakter als das große .tgl-Settings-Muster,
   damit es neben Icon/Label/Chevron in die Kopfzeile passt. */
.poi-ov-group-tgl{
  width:32px;height:18px;border-radius:9px;border:1.5px solid var(--bd2);background:var(--sf);
  position:relative;flex-shrink:0;
}
.poi-ov-group-tgl::after{
  content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:transform .18s var(--ease),background .18s var(--ease);
}
.poi-ov-group-tgl.on{background:var(--acc-soft);border-color:var(--acc)}
.poi-ov-group-tgl.on::after{transform:translateX(14px);background:var(--acc-strong)}
.poi-ov-types{display:none;flex-wrap:wrap;gap:6px}
.poi-ov-group.open .poi-ov-types{display:flex}
.poi-ov-type{
  min-height:34px;padding:0 11px;border-radius:9px;border:1.5px solid var(--bd2);background:var(--sf);
  font-size:var(--fs-2xs);font-weight:700;color:var(--dim);display:inline-flex;align-items:center;gap:4px;
}
.poi-ov-type.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-strong)}
.poi-ov-type:disabled{opacity:.35}
.poi-ov-type .ovty-svg{width:14px;height:14px;flex-shrink:0}
.poi-ov-type .ovty-em{font-size:.85rem;line-height:1;flex-shrink:0}

/* ── Chip-Pager (09.09.2026) ── */
/* Positionierung (position:fixed, eigener Scroll) siehe "Pinned Map"-Abschnitt
   weiter oben — hier nur noch die Innenausrichtung. Querformat setzt das
   unten explizit zurück — dort ist alles ganz normaler Inhaltsfluss. */
#accordion{
  padding:8px 10px 26px;display:flex;flex-direction:column;gap:8px;
}
/* Chip-Leiste: horizontal scrollbar, ersetzt die 5 Kopfzeilen-Reihen des
   alten Akkordeons komplett. */
.chip-strip{
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  flex-shrink:0;
  /* Weiche Kante statt hartem Schnitt (17.09.2026) — die Klassen setzt
     syncFade() in initChipPager() (js/mobile_layout.js), und zwar nur, wenn auf
     der jeweiligen Seite wirklich noch Chips folgen. Ohne Klasse sind beide
     Breiten 0: Der Verlauf hat dann keine Übergangszone und die Leiste sieht
     aus wie vorher. */
  --fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
                     #000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
             #000 calc(100% - var(--fade-r)),transparent 100%);
}
.chip-strip.fade-l{--fade-l:24px}
.chip-strip.fade-r{--fade-r:28px}
/* Tour-Basis im Bearbeiten-Modus (eigenes Collapse, siehe initCollapse() in
   mobile_layout.js) blendet die Chip-Leiste aus (Nutzerwunsch 10.09.2026) —
   die aufgeklappte Tour-Karte liegt ohnehin über allem (höherer z-index),
   die Leiste würde nur ablenken/dahinter verschwinden. */
/* Aufgeklappte Tour-Basis verdeckt die Chip-Leiste — im Route-Modus aber NICHT:
   Dort ist #tourBasis ohnehin ausgeblendet, behält seine Klasse `open` jedoch.
   Ohne das :not() blieb die Chip-Leiste nach jeder Umwandlung unsichtbar, weil
   der Weg dorthin über die aufgeklappte Tour-Basis führt (13.09.2026 beim Bauen
   der Import-Seite aufgefallen). */
body:has(#tourBasis.open):not(.route-mode) .chip-strip{display:none}
.chip-strip::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;display:flex;align-items:center;gap:7px;padding:11px 15px;border-radius:999px;
  background:var(--sf);border:1.5px solid var(--bd);color:var(--txt);font-family:inherit;
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-sm);
}
.chip svg{width:15px;height:15px;color:var(--dim);flex-shrink:0}
.chip.active{background:var(--acc-soft);border-color:var(--acc)}
.chip.active svg{color:var(--acc-strong)}
/* Höhe frei ziehbar (Nutzerfeedback 09.09.2026: "Karte müsste man nach unten
   schieben können" — feste Höhe blendet zu viel Karte aus, egal was gerade
   gezeigt wird). .chip-grip ist der Ziehgriff, JS (initChipPager() in
   mobile_layout.js) setzt --chip-panel-h per Pointer-Drag ODER automatisch
   bei jedem Tab-Wechsel (preferredHeight(), Nutzerwunsch 10.09.2026:
   "grundsätzlich beim Tab-Wechsel die richtige Größe annehmen, für alle") —
   Elevation bekommt fest 290px (endet unter der Werte-Zeile, der Index/die
   Tabelle kommt per Hochziehen), Etappen/Wetter zeigen max. 3 Zeilen
   (weniger bei kürzeren Touren), alles andere misst seine tatsächliche
   Inhaltshöhe. 290px unten ist nur der CSS-Fallback vor dem ersten
   JS-Rendern. Kopfzeillos bleibt trotzdem — der aktive Chip unten trägt
   weiterhin die Header-Rolle, der Griff selbst zeigt keine Kategorie an. */
.chip-panel{
  flex-shrink:0;display:flex;flex-direction:column;
  height:var(--chip-panel-h, 290px);
  background:var(--sf);border-top:2.5px solid var(--acc-strong);border-radius:14px;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.chip-grip{
  flex-shrink:0;display:flex;justify-content:center;padding:8px 0 5px;
  cursor:ns-resize;touch-action:none;
}
.chip-grip-bar{width:36px;height:4px;border-radius:2px;background:var(--bd2)}
/* Inhalt: kopfzeillose, seitlich wischbare Seite pro Kategorie (natives
   CSS-Scroll-Snapping statt eigener Touch-Gesten-Logik) — der aktive Chip
   unten trägt die Header-Rolle (Nutzerfeedback 09.09.2026: "Kopfzeile
   weglassen, aktiver Chip reicht als Orientierung"). flex:1+min-height:0
   sorgt dafür, dass jede .chip-page ihr eigenes overflow-y:auto innerhalb
   der (jetzt ziehbaren) .chip-panel-Höhe greifen kann. */
.chip-content{
  flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.chip-content::-webkit-scrollbar{display:none}
.chip-page{flex:0 0 100%;scroll-snap-align:start;padding:4px 13px 14px;overflow-y:auto}
.chip-meta{display:block;font-size:var(--fs-2xs);color:var(--dim);margin-bottom:6px}
.chip-meta b{color:var(--txt);font-weight:600}

/* Etappenliste (Phase C: Tages-Akkordeon) */
.stage-item{border-top:1px solid var(--bd)}
.stage-item:first-child{border-top:none}
.stage-row{
  display:flex;align-items:center;gap:9px;row-gap:3px;flex-wrap:wrap;
  padding:12px 2px;min-height:48px;
  width:100%;background:none;border:none;text-align:left;
}
.stage-row.active .stage-num{background:var(--acc-soft);color:var(--acc-strong);border-color:var(--acc)}
.stage-row.active .stage-city{color:var(--acc-strong)}
/* Größen an die Wetter-Liste angeglichen (Nutzerwunsch 10.09.2026: "beim
   pur Tourdaten die Schriftgröße an die vom Wetter anpassen") — .stage-num
   entspricht .wxr-day, .stage-meta den vergrößerten .wxr-simple-Werten. */
.stage-num{
  width:34px;height:34px;border-radius:9px;background:var(--faint);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;color:var(--dim);flex-shrink:0;
}
.stage-pin{flex-shrink:0;font-size:.8rem;margin-left:-3px}
.stage-city{font-weight:700;font-size:var(--fs-sm);flex:1;min-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-km{font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);color:var(--dim);flex-shrink:0}
.stage-km b{color:var(--txt)}
.stage-rest{
  flex-shrink:0;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold);
  border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:.65rem;padding:2px 8px;font-weight:700;
}
/* TourtageZeile rechts: nur die vier Werte-Spalten (km / ↑hm / ◆POIs / Wetter) —
   Datum + Gesamt-km stehen erst im aufgeklappten Detail (Zeile 2), sonst wird
   die Liste zu voll. Feste Spaltenbreiten, damit alle Tage exakt untereinander
   ausgerichtet sind wie eine Tabelle (rechtsbündig). Breiten mit der größeren
   Schrift mitgewachsen (10.09.2026), sonst würde Text rechts abgeschnitten. */
.stage-meta{
  display:flex;align-items:center;gap:0;margin-left:auto;flex-shrink:0;
  font-size:.72rem;color:var(--dim);white-space:nowrap;
}
.stage-meta b{color:var(--txt)}
/* flex-shrink:0 auf jeder Spalte — sonst kann eine zu enge Zeile die Box unter
   ihren Inhalt quetschen und Text läuft rechts aus dem Screen (overflow-x:clip
   auf body schneidet ihn dann sichtbar ab, z.B. „nur halbe Temperatur“) */
.stage-meta > span{display:inline-block;text-align:right;padding-left:8px;flex-shrink:0}
.sm-km{width:68px}
.sm-hm{width:44px;color:var(--acc-strong)}
.sm-poi{width:30px;color:var(--gold);font-weight:700}
.sm-wx{width:52px;color:var(--txt)}
.sm-start{color:var(--acc-strong);font-weight:700;letter-spacing:.08em;width:auto;padding-left:0}

/* Tages-Detail (Phase C) */
.stage-detail{display:none;padding:0 2px 13px 38px}
.stage-item.open .stage-detail{display:block}

/* Zeile 2 (nur aufgeklappt): Datum · Gesamt-km [· Ruhetage] — Notiz-Stift ganz
   rechts, nur sichtbar wenn noch keine Notiz existiert (renderStageNoteBlock) */
.sd-line2{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--fs-2xs);color:var(--dim);margin-bottom:8px;
}
.sdl2-date{color:var(--txt);font-weight:700}
.sdl2-sep{opacity:.4}
.sdl2-tot{color:var(--dim)}
.sdl2-rest{margin-left:2px}
.sdl2-pen{margin-left:auto;flex-shrink:0}
.sd-pen-btn{
  background:none;border:none;color:var(--dim);opacity:.6;
  font-size:.85rem;padding:4px 6px;cursor:pointer;min-height:0;
}

.sd-pois{display:flex;flex-direction:column;margin-bottom:9px}
.sd-poi-head{
  display:flex;gap:8px;align-items:center;width:100%;min-height:40px;
  background:none;border:none;padding:6px 0;text-align:left;font-size:var(--fs-xs);font-weight:600;
}
.sd-poi-ico{width:22px;text-align:center;flex-shrink:0}
.sd-poi-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Typ-Label im Kopf (Name · Typ · km) — klein, gedimmt, eigene Spalte rechts von Name */
.sd-poi-type{flex-shrink:0;font-size:.56rem;color:var(--dim);max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-poi-body{display:none;padding:0 0 10px 30px}
.sd-poi.open .sd-poi-body{display:block}
.sd-poi-text{font-size:var(--fs-xs);line-height:1.55;margin-bottom:8px;white-space:pre-wrap}
.sd-poi-text a{color:var(--acc-strong);font-weight:700}
/* Adresse + Telefon: gleiche Button-Optik, beide klickbar (Maps-Link bzw. tel:) */
.sd-poi-links{display:flex;flex-wrap:wrap;gap:0}
.sd-poi-telbtn,.sd-poi-addrbtn{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 11px;margin:0 8px 6px 0;
  border:1.5px solid var(--bd2);border-radius:9px;background:var(--sf2);
  font-size:var(--fs-xs);font-weight:700;color:var(--acc-strong);text-decoration:none;
}
.sd-poi-map{
  min-height:38px;padding:0 11px;border:1.5px solid var(--bd2);border-radius:9px;
  background:var(--sf2);font-size:var(--fs-xs);font-weight:700;
}
.sd-poi-km{flex-shrink:0;font-size:.62rem;color:var(--dim)}
/* POI-Symbole: RouteCast-SVG oder Emoji (Setting poiEmoji) */
.sd-poi-ico{display:inline-flex;align-items:center;justify-content:center}
.pico-svg{width:16px;height:16px;vertical-align:middle}
.pico-em{font-size:.85rem;line-height:1}

/* Wetterzeile im Tages-Detail: eine Zeile, Details ausklappbar */
.sd-wx{margin-bottom:9px}
.sd-wx-line{
  display:flex;align-items:center;gap:9px;width:100%;min-height:38px;
  background:var(--sf2);border:1px solid var(--bd);border-radius:9px;padding:6px 10px;
  font-size:var(--fs-xs);text-align:left;color:var(--txt);
}
.sd-wx-line[disabled]{cursor:default}
.sd-wx-dim{color:var(--dim);background:none;border:none;padding:6px 0;min-height:0}
.wxl-ico{font-size:1rem;flex-shrink:0}
.wxl-t{flex-shrink:0}
.wxl-t b{font-weight:700}
.wxl-w{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--dim)}
.wxl-w small{font-size:.75em;opacity:.7}
.wxl-chev{width:14px;height:14px;color:var(--dim);flex-shrink:0;transition:transform .2s;margin-left:4px}
.sd-wx-line.open .wxl-chev{transform:rotate(180deg)}
.sd-wx-det{padding:7px 10px 2px;display:flex;flex-direction:column;gap:2px}
.wxd-row{font-size:var(--fs-xs);color:var(--dim);padding:3px 0;line-height:1.5}
.wxd-src{opacity:.7}

/* Zeitpunkt-/Stunden-Zeilen im Wetter-Detail (Morgen/Mittag/Abend/Nacht bzw.
   Stunden bei Eintages-/Schnelltouren) — Web-Ansicht: Zeitmarke, Wetter-Icon,
   Temp, Wind-Pfeil+Speed, Regen-Badge; Nachtzeile abgesetzt und gedimmt */
.wxd-prow{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:.78rem;color:var(--txt)}
.wxd-prow-night{opacity:.65;border-top:1px solid var(--bd);margin-top:3px;padding-top:7px}
.wxd-pico{width:18px;text-align:center;flex-shrink:0;font-size:.8rem}
.wxd-plbl{width:38px;color:var(--dim);flex-shrink:0}
.wxd-pwxico{width:22px;text-align:center;flex-shrink:0}
.wxd-ptemp{width:42px;font-weight:700;flex-shrink:0}
.wxd-pwind{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--dim);flex-shrink:0}
.wxd-pwind small{font-size:.75em;opacity:.7}
.wxd-prain{flex-shrink:0;font-size:.95em}

/* Notizen (Tag + Tour): Anzeige als Text, Editor erst nach Antippen; ohne Notiz nur Stift.
   Tagesnotiz steht über Wetter/POIs (sd-note-area kommt vor sd-wx im Markup) —
   margin-bottom setzt sie sichtbar davon ab. */
.note-view{
  font-size:var(--fs-xs);color:var(--dim);line-height:1.55;padding:8px 10px;
  background:var(--sf2);border:1px solid var(--bd);border-radius:9px;cursor:pointer;
  white-space:pre-wrap;word-break:break-word;margin-bottom:9px;
}
.note-pen{opacity:.5;font-size:.8em}
.note-pen-btn{
  min-height:38px;padding:0 11px;border:1.5px dashed var(--bd2);border-radius:9px;
  background:none;font-size:var(--fs-xs);font-weight:600;color:var(--dim);
}
.sd-note{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.sd-note-ta{
  width:100%;background:var(--sf2);border:1.5px solid var(--bd2);border-radius:9px;color:var(--txt);
  padding:9px 11px;font-family:inherit;font-size:var(--fs-xs);line-height:1.5;resize:vertical;min-height:44px;
}
.sd-note-ta:focus{border-color:var(--acc);outline:none}
.sd-note .sd-note-save{align-self:flex-end;flex:0 0 auto;min-width:0}

/* Ungespeicherte Änderungen: Speichern-Button hervorheben */
.action-btn.attn{border-color:var(--acc);color:var(--acc-strong);box-shadow:0 0 0 2px var(--acc-soft)}

/* Platzhalter (Insights Phase B) */
.placeholder-card{
  border:1.5px dashed var(--bd2);border-radius:12px;padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;color:var(--dim);
}
.placeholder-card .p-title{font-weight:700;font-size:var(--fs-sm);color:var(--txt)}
.placeholder-card .p-text{font-size:var(--fs-xs);line-height:1.6;max-width:290px}

/* ── Insights: Elevation / Wetter / Oberfläche — eigene Akkordeon-Bänder (Phase D) ── */
/* Elevation-Canvas — touch-action:none NUR hier, sonst blockiert es das Seiten-Scrollen */
#elevCanvas{width:100%;height:190px;display:block;touch-action:none;background:var(--sf2);border-radius:12px}

/* Wetter-Liste: gleiches Muster wie Tour-Daten (.stage-item/.stage-row/
   .stage-detail) — Zeile antippen klappt Detail nach unten auf, statt Kacheln.
   Nutzerfeedback 10.09.2026: Tag+Datum größer, Wettersymbol/Min/Max größer
   und nicht mehr bündig an der Kante (padding-right statt margin-left:auto
   ohne Gegenpart), Detailzeilen größer. */
.wx-list{display:flex;flex-direction:column}
.wx-item{border-top:1px solid var(--bd)}
.wx-item:first-child{border-top:none}
.wx-row{
  display:flex;align-items:center;gap:11px;padding:12px 14px 12px 2px;min-height:48px;
  width:100%;background:none;border:none;text-align:left;
}
.wx-row.active .wxr-day{background:var(--acc-soft);color:var(--acc-strong);border-color:var(--acc)}
.wxr-day{
  width:34px;height:34px;border-radius:9px;background:var(--faint);border:1.5px solid var(--bd);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;
}
.wxr-date{font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);color:var(--dim);flex-shrink:0}
/* Primäransicht: Zeitverlauf morgens–abends (Mini-Pillen) */
.wxr-line{display:flex;align-items:center;gap:11px;margin-left:auto;overflow:hidden}
.wxr-pt{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
.wxr-pt-ico{font-size:.95rem;line-height:1}
.wxr-pt-t{font-size:.7rem;color:var(--dim)}
/* Fallback ohne Intraday-Daten: nur Icon + Min/Max */
.wxr-simple{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:var(--fs-md);color:var(--txt);flex-shrink:0}

/* Detail (aufgeklappt): gleiche Zeitpunkt-Zeilen wie Tour-Daten (wxd-prow etc.)
   + Genauigkeit+Quelle als EINE Zeile am Ende (Nutzerwunsch 10.09.2026) */
.wx-detail{display:none;padding:0 2px 13px 38px}
.wx-item.open .wx-detail{display:block}
.wxd-conf{color:var(--gold) !important}

/* Oberfläche/Straßenart/Elevation: gestapelter Balken + "Index" (mobile_app.js
   _renderCatBar()/renderElevBar()) — nach Anteil sortiert (Elevation: feste
   Steigungsreihenfolge), Tap auf Segment/Chip hebt den passenden
   Trackabschnitt auf der Karte hervor (RCMap.setCatHighlight). Grid statt
   Flex-Wrap (Nutzerfeedback 10.09.2026: "sieht unsortiert aus, mal größer
   mal kleiner") — jede Spalte gleich breit, unabhängig vom Textinhalt. */
.surf-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;margin-bottom:10px;background:var(--sf2)}
.surf-bar-seg{display:block;height:100%;cursor:pointer;transition:filter .15s;box-sizing:border-box}
.surf-bar-seg.active{outline:2px solid #fff;outline-offset:-2px;filter:brightness(1.2)}
.surf-dot{width:9px;height:9px;border-radius:50%}
/* Ovale Kacheln zurück (Nutzerfeedback 10.09.2026: "das mit den Ovalen war
   toll"), aber innerhalb jeder Kachel wie eine Tabelle ausgerichtet
   (Farbkreis/Bezeichnung/km/% als feste Spalten, statt frei fließendem Text)
   — jede Kachel nutzt dieselbe .surf-chip-Spaltenvorlage, dadurch sieht jede
   Zeile gleichmäßig aus, auch wenn die Kacheln selbst (auto-fit) nicht exakt
   gleich breit sind. */
.surf-cloud{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.surf-chip{
  display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;column-gap:6px;
  padding:8px 12px;border-radius:999px;text-align:left;
  border:1.5px solid var(--bd2);background:var(--sf2);color:var(--dim);
  font-size:var(--fs-2xs);font-family:inherit;cursor:pointer;
}
.surf-label{color:var(--txt);font-weight:700;font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.surf-km{font-variant-numeric:tabular-nums;white-space:nowrap}
.surf-pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--txt);white-space:nowrap}
.surf-chip.active{border-color:#fff;background:var(--sf3);color:var(--txt)}

/* Elevation-Werte: groß + zentriert statt kleiner Kopfzeile (Nutzerwunsch
   10.09.2026: "Elevation-Wort oben weg, Werte größer/zentriert weiter unten,
   Reihenfolge Grafik→Verteilung→Werte→Index"). .elev-zoom (Zoom-Ausschnitt)
   ist nur beim Reinzoomen gefüllt, sonst leer und ausgeblendet — dann auch
   deutlich größer als vorher (Nutzerwunsch 10.09.2026), mit </>-Pfeilen als
   Hinweis "das ist ein Ausschnitt", direkt über der Gesamtstrecken-Zeile. */
.elev-stats{text-align:center;padding:8px 0 10px}
.elev-zoom{display:block;font-size:1.05rem;font-weight:600;color:var(--txt);margin-bottom:4px}
.elev-zoom:empty{display:none}
.elev-zoom::before{content:"< ";color:var(--dim)}
.elev-zoom::after{content:" >";color:var(--dim)}
.elev-total{display:block;font-size:1.2rem;font-weight:500;color:var(--dim)}
.elev-total b{color:var(--txt);font-weight:700}

/* ── Leerzustand ── */
#emptyState{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:34px 26px;text-align:center;
}
#emptyState .e-ico{
  width:54px;height:54px;border-radius:16px;background:var(--sf);border:1.5px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;color:var(--acc-strong);font-size:1.4rem;
}
#emptyState h2{font-size:var(--fs-lg);font-weight:700}
#emptyState p{font-size:var(--fs-xs);color:var(--dim);max-width:280px;line-height:1.65}

/* ── Sheets (Route laden / Einstellungen) ── */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(5,10,15,.6);backdrop-filter:blur(3px);
  z-index:700;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.sheet-backdrop.show{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:520px;background:var(--sf);border-top-left-radius:20px;border-top-right-radius:20px;
  border:1.5px solid var(--bd2);border-bottom:none;max-height:86dvh;display:flex;flex-direction:column;
  transform:translateY(16px);transition:transform .3s var(--ease);box-shadow:var(--shadow-lg);
}
.sheet-backdrop.show .sheet{transform:translateY(0)}
.sheet-head{padding:16px 16px 12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-shrink:0}
.sheet-title{font-weight:700;font-size:var(--fs-lg)}
.sheet-close{
  margin-left:auto;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--bd2);background:var(--sf2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;
}
.sheet-body{
  overflow-y:auto;overflow-x:hidden;padding:10px 16px 24px;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;touch-action:pan-y;   /* kein horizontales Wackeln, kein Scroll-Durchreichen */
}

/* POI-Detail-Sheet: Hintergrund bleibt klickdurchlässig (Karte dahinter
   bleibt bedienbar) — nächsten POI antippen aktualisiert das Sheet direkt,
   ohne vorher schließen zu müssen. Nur die Sheet-Karte selbst fängt Klicks.
   Kein abgedunkelter/milchiger Hintergrund mehr (überschreibt die geerbte
   .sheet-backdrop-Optik) — die Karte soll klar sichtbar bleiben. */
#poiDetailBackdrop{background:transparent;backdrop-filter:none}
#poiDetailBackdrop.show{pointer-events:none}
/* FIX 21.07.: fehlte .show-Scoping — die unsichtbare Sheet-Box war dadurch
   IMMER klickbar (auch geschlossen), position:fixed übers ganze Fenster,
   unten mittig zentriert (max-width:520px). Im Querformat (breiteres
   Fenster) blockierte das die linke Hälfte der rechten Spalte, z.B. die
   Wetter-Kopfzeile — im Hochformat kaum bemerkbar, da die Seite eh nur
   520px breit ist. */
#poiDetailBackdrop.show .sheet{pointer-events:auto}

/* Sortier-/Filterleiste über der Tourenliste (wie Web: Sort links grün, Filter rechts blau) */
.list-tools{
  display:flex;gap:5px;align-items:center;padding:2px 0 10px;
  position:sticky;top:0;background:var(--sf);z-index:2;border-bottom:1px solid var(--bd);
}
.lt-spacer{flex:1}
.list-sort,.list-filter{flex-shrink:0;flex-wrap:nowrap;gap:5px}
.list-sort .seg,.list-filter .seg{padding:0 9px;min-height:40px;font-size:var(--fs-2xs)}
.list-filter .seg.on{background:rgba(76,163,226,.12);border-color:var(--info);color:var(--info)}

/* Route-laden-Liste */
.load-opt{
  width:100%;display:flex;align-items:center;gap:12px;padding:13px 4px;background:none;border:none;
  border-bottom:1px solid var(--bd);text-align:left;min-height:56px;
}
.load-opt:last-child{border-bottom:none}
.load-opt-ico{
  width:36px;height:36px;border-radius:10px;background:var(--sf2);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;color:var(--acc-strong);flex-shrink:0;font-size:1rem;
}
.load-opt-text{flex:1;min-width:0}
.load-opt-text .t{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.load-opt-text .s{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--dim);margin-top:2px}
#gpxExportList .load-opt-text>span{display:block}   /* GPX-Export: Titel über Strecke */
.load-empty{padding:22px 4px;color:var(--dim);font-size:var(--fs-xs);text-align:center}

/* Einstellungen: Akkordeon-Sektionen */
.set-group{border:1px solid var(--bd);border-radius:12px;background:var(--sf2);overflow:hidden;margin-bottom:8px}
.set-group.open{border-color:var(--bd2)}
.set-head{
  width:100%;display:flex;align-items:center;gap:10px;padding:13px;background:none;border:none;
  text-align:left;min-height:50px;font-weight:700;font-size:var(--fs-sm);
}
.set-head .band-chev{margin-left:auto}
.set-group.open .set-head .band-chev{transform:rotate(180deg);color:var(--acc-strong)}
.set-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.set-group.open .set-collapse{grid-template-rows:1fr}
.set-collapse-inner{overflow:hidden}
.set-body{padding:2px 13px 13px;display:flex;flex-direction:column;gap:12px}
.set-item{display:flex;align-items:center;gap:10px;min-height:44px}
.set-item .si-label{flex:1;font-size:var(--fs-xs);font-weight:600}
/* Einblenden-Sheet: kleiner Vorschau-Chip pro Zeile, damit klar ist, wonach
   man sucht — gleiche Optik wie die echten Marker auf der Karte (.poi-mk). */
.si-swatch{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.si-swatch-track{width:20px;height:6px;border-radius:3px;background:var(--acc) !important;border:none;box-shadow:none}
.si-swatch-day{background:var(--acc) !important;border:2px solid rgba(255,255,255,.9);color:#fff;font-weight:700;font-size:10px}
.seg-row{display:flex;flex-wrap:wrap;gap:6px}
.seg{
  min-height:40px;padding:0 13px;border-radius:10px;border:1.5px solid var(--bd2);background:var(--bg);
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;
}
.seg.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-strong)}
/* Kartenstil-Auswahl: 3×3-Grid mit Emoji + Label */
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.style-grid .seg{
  flex-direction:column;justify-content:center;gap:2px;
  min-height:56px;padding:6px 2px;font-size:var(--fs-2xs);text-align:center;
}
.style-grid .seg .ico{font-size:1.05rem;line-height:1}
/* Toggle-Switch */
.tgl{position:relative;width:50px;height:29px;flex-shrink:0}
.tgl input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2;margin:0}
.tgl .knob{
  position:absolute;inset:0;border-radius:99px;background:var(--sf3);border:1.5px solid var(--bd2);transition:background .2s;
}
.tgl .knob::after{
  content:'';position:absolute;top:2.5px;left:3px;width:20px;height:20px;border-radius:99px;
  background:var(--dim);transition:transform .2s,background .2s;
}
.tgl input:checked + .knob{background:var(--acc-soft);border-color:var(--acc)}
.tgl input:checked + .knob::after{transform:translateX(20px);background:var(--acc-strong)}
.set-note{font-size:var(--fs-2xs);color:var(--dim);line-height:1.5;font-family:'JetBrains Mono',monospace}

/* ── Toast ── */
#toastHost{position:fixed;left:0;right:0;bottom:22px;display:flex;justify-content:center;z-index:900;pointer-events:none;padding:0 16px}
#toast{
  background:var(--sf3);border:1.5px solid var(--bd2);color:var(--txt);border-radius:11px;
  padding:12px 18px;font-size:var(--fs-xs);font-weight:600;box-shadow:var(--shadow-lg);
  transform:translateY(18px);opacity:0;transition:all .3s var(--ease);max-width:400px;text-align:center;
}
#toast.show{transform:translateY(0);opacity:1}

/* ── Querformat / Tablet: Karte links volle Höhe (hart), rechts Topbar + eigener Scroll ──
   Media Query muss mit sideBySide() in mobile_app.js übereinstimmen! Setzt
   alle Hochformat-Fixed-Positionierungen (#mapWrap/#rightCol/#tourBasis/
   #accordion/#emptyState, siehe "Pinned Map" weiter oben) explizit zurück —
   #rightCol wird hier (anders als im Hochformat, wo es display:contents ist)
   wieder eine echte Flex-Box, #tourBasis+#accordion wieder ganz normale
   Flex-Kinder darin, die zusammen als EIN Block scrollen, unverändert wie vor
   der ganzen Hochformat-Umbau-Serie. */
@media (orientation: landscape) and (min-width: 640px), (min-width: 760px){
  body{
    max-width:none;height:100dvh;overflow:hidden;
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);
  }
  #topbar{grid-column:2;grid-row:1;position:static;max-width:none;margin:0}
  #mapWrap:not(.full){
    grid-column:1;grid-row:1/span 2;
    position:relative;top:auto;bottom:auto;height:auto;    /* Grid streckt auf volle Höhe */
    left:auto;right:auto;max-width:none;margin:0;
    border:none;border-right:1.5px solid var(--bd2);border-radius:0;
  }
  /* Rechte Spalte: #rightCol wieder eine echte, allein scrollende Box */
  #rightCol{
    display:flex;flex-direction:column;grid-column:2;grid-row:2;
    overflow-y:auto;overscroll-behavior:contain;min-height:0;
  }
  #tourBasis{
    position:static;top:auto;left:auto;right:auto;max-width:none;margin:10px 10px 8px;z-index:auto;
  }
  /* Auto-Ausblenden der Tour-Karte ist ein reines Hochformat-Platzproblem
     (Karte + Panel teilen sich denselben Bereich) — im Querformat hat die
     Liste ihre eigene Spalte, kein Grund zum Verstecken. Gleiche Selektor-
     Spezifität wie die Basisregel nötig, damit die Regel hier wirklich zieht. */
  body:has(#chipPanel:not([hidden])) #tourBasis{display:block}
  #btnShowTour{display:none}
  /* Die Basisregel blendet die Pillen-Leiste aus, sobald die Tour-Karte
     aufgeklappt ist — das ist wie beim Auto-Ausblenden oben ein reines
     Hochformat-Platzproblem (aufgeklappte Karte liegt über der Leiste).
     Im Querformat hat die rechte Spalte eigenen Platz für beides
     gleichzeitig, ganz gleich ob schmales Handy-quer oder breiter Bildschirm
     (Nutzerfund 19.09.2026: Leiste verschwand hier unnötig). Selektor MUSS
     exakt wie die Basisregel lauten (gleiche Spezifität nötig, siehe
     #tourBasis-Override direkt darüber) — ein schwächerer Selektor (z.B. ohne
     :not(.route-mode)) verliert gegen die Basisregel und zieht nicht.*/
  body:has(#tourBasis.open):not(.route-mode) .chip-strip{display:flex}
  #accordion{
    position:static;top:auto;bottom:auto;left:auto;right:auto;max-width:none;margin:0;
    flex:1;overflow:visible;min-height:auto;z-index:auto;
    justify-content:flex-start;pointer-events:auto;
  }
  /* Chip-Leiste wandert optisch nach oben (order:-1) — im Querformat gibt es
     keinen Platzgrund mehr, den Inhalt darüber zu zeigen, eine Leiste über
     dem Inhalt ist die konventionellere Lesart in einer vollen Spalte.
     max-height entfällt, da hier die ganze rechte Spalte scrollt statt einer
     einzelnen begrenzten Inhaltsfläche. */
  .chip-strip{order:-1}
  .chip-panel{height:auto}
  .chip-grip{display:none}
  /* Kein Wisch-Scroll-Snapping im Querformat (Nutzerfeedback 09.09.2026:
     "nicht richtig reaktiv, Fokus springt hin und her, zeigt nicht das
     Geklickte") — die feste Panel-Höhe fehlt hier (height:auto), wodurch
     flex:1 auf #chip-content keine stabile Breite/Höhe zum Berechnen hat und
     scrollTo()/die Scroll-Positions-Erkennung ins Schwimmen gerieten. Fix:
     im Querformat einfacher Sichtbarkeits-Wechsel über .current (von
     markActive() in initChipPager() gesetzt) statt Scroll-basiertem Paging —
     robust unabhängig von Layout-Timing. */
  .chip-content{display:block;overflow-x:visible;scroll-snap-type:none}
  .chip-page{display:none;flex:none}
  .chip-page.current{display:block}
  #emptyState{
    position:static;top:auto;bottom:auto;left:auto;right:auto;max-width:none;margin:0;
    flex:1;z-index:auto;
  }
  /* Ohne Tour (Karte versteckt) volle Breite für Topbar + Leerzustand */
  #mapWrap[hidden]+#rightCol{grid-column:1/-1}
  body:has(#mapWrap[hidden]) #topbar{grid-column:1/-1}
}

/* ── Karte läuft unter der Menüspalte durch — NUR bei genug Höhe ───────────
   17.09.2026, Nutzerwunsch: „Seit wir die Pillen nutzen, braucht das nicht mehr
   die ganze rechte Seite — könnte man dort nicht die Karte im Hintergrund
   zeigen? Aber so, dass die Route im linken Bereich bleibt und nur der Nutzer
   sie beim Zoomen unter die Menüs schieben kann."

   Die zusätzliche min-height-Bedingung kam aus dem Betrieb (Nutzerbefund
   17.09.2026): „Auf dem Handy quer ist es nicht gut — die Höhe reicht nicht,
   um den rechten Bereich sinnvoll zu nutzen. Auf dem iPad/Rechner ist es gut."
   Ein Handy im Querformat ist rund 390–430 px hoch; dort bleiben Karte und
   Spalte getrennt wie bisher. iPad (768+) und Rechner bekommen die
   durchlaufende Karte.

   Die Route bleibt trotzdem links: Jedes Einpassen legt rechts eine Polsterung
   in Breite der Überlappung an (_fitOpts()/_rightOverlapPx() in mobile_map.js).
   Die misst die tatsächliche Geometrie, greift hier also von selbst und im
   Handy-Querformat von selbst nicht. */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 600px),
       (min-width: 760px) and (min-height: 600px){
  /* position:relative + z-index: Auf einem statisch positionierten Element
     wirkt z-index nicht, die Topbar läge sonst unter der Karte. */
  #topbar{
    position:relative;z-index:2;
    /* Runde Ecken, weil die Leiste jetzt auf der Karte schwebt statt in einer
       eigenen Fläche zu sitzen (Nutzerwunsch 17.09.2026). Gleiche Radien und
       Abstände wie die Bänder darunter, damit es eine Familie bleibt. */
    margin:10px 10px 0;border:1.5px solid var(--bd);border-radius:14px;
    box-shadow:var(--shadow-sm);
  }
  #mapWrap:not(.full){
    grid-column:1/-1;z-index:0;
    border-right:none;
  }
  /* Durchlässig: Nur die Karten selbst nehmen Eingaben an, die Lücken dazwischen
     gehören der Karte darunter. Dasselbe Muster wie im Hochformat für #accordion
     (siehe „Pinned Map" weiter oben). */
  #rightCol{position:relative;z-index:2;background:transparent;pointer-events:none}
  #rightCol>*{pointer-events:auto}
  #accordion{pointer-events:none}
  /* Karten-Bedienelemente nach LINKS (Nutzerwunsch 17.09.2026). Rechts hingen
     sie am Rand von #mapWrap — und der ist hier der Bildschirmrand, sie lägen
     also hinter den Menüs. Links stehen sie am freien Rand und kommen der
     Route nicht in die Quere.
     BEWUSST OHNE :not(.full) (Nutzerbefund 17.09.2026: „beim Vollbild springt
     die Knopfleiste nach rechts — bleiben wäre besser"): Der Wechsel ins
     Vollbild soll die Bedienelemente nicht woanders hinsetzen. */
  .map-fab-col{right:auto;left:14px}
  /* Legende und Debug-Zeile rücken mit: Platz für die Säule jetzt links.
     Rechts deckelt die Menüspalte — im Vollbild gibt es die nicht. */
  #mapWrap:not(.full) .map-legend{left:72px;right:calc(50% + 10px)}
  #mapWrap:not(.full) .map-debug-info{left:72px;max-width:calc(50% - 90px)}
  #mapWrap.full .map-legend{left:72px;right:8px}
  #mapWrap.full .map-debug-info{left:72px}
}

/* ── Einstellungen: Verweiszeilen (Desktop-Version, About) ────────────────── */
.set-linkrow{width:100%;background:none;border:none;padding:0;text-align:left;
  color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.set-linkrow .si-ico{width:22px;flex-shrink:0;text-align:center;font-size:1rem}
.set-linkrow .si-arrow{margin-left:auto;opacity:.4;font-size:1.1rem;line-height:1}
.set-linkrow:active{opacity:.6}

/* ── About-Sheet ──────────────────────────────────────────────────────────── */
.about-intro{font-size:var(--fs-xs);line-height:1.7;opacity:.85;margin-bottom:14px}
.about-sec{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55;
  margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid rgba(128,128,128,.25)}
.about-tbl{display:flex;flex-direction:column}
.about-row{display:flex;gap:12px;padding:5px 0;font-size:var(--fs-xs);
  border-bottom:1px solid rgba(128,128,128,.12)}
.about-row span{flex:0 0 42%;opacity:.6;word-break:break-word}
.about-row b{flex:1;font-weight:600;word-break:break-word;overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════
   Route-Modus (M1, info/obsolete/Plan_Mobile_Routing.md)
   Eigener Modus, kein Panel neben der Tour: die Route-Leiste ersetzt die
   Topbar, Tour-Basis und Tour-Chip-Pager treten ab, die Karte bekommt den
   ganzen Bildschirm. Alles hängt an body.route-mode (gesetzt von
   js/mobile_routing.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* #accordion bleibt im Route-Modus bewusst SICHTBAR: seit M1.5 teilen sich
   Tour und Route denselben Chip-Pager, nur die Chip-Sichtbarkeit unterscheidet
   die Modi (updateInsightBandsVisibility() in js/mobile_app.js). */
body.route-mode #topbar,
body.route-mode #tourBasis,
body.route-mode #emptyState{display:none !important}
/* Kartenaktionen, die zur TOUR gehören (Farbmodus, Einblenden), haben im
   Route-Modus nichts zu steuern und bleiben weg. Die KARTENAUSWAHL dagegen
   gehört dazu (Nutzerwunsch 12.09.2026): Topo, CyclOSM oder Satellit sind beim
   Planen oft wichtiger als beim Nachfahren, und das Sheet #mapLayersBackdrop
   schaltet ausschließlich den Basiskartenstil — nichts Tour-Spezifisches. */
body.route-mode #btnColorMode{display:none}
/* „Einblenden" (👁) bleibt im Route-Modus (Nutzerbefund 17.09.2026: „Karte
   einblenden Button fehlt"). Zwei seiner Schalter wirken hier sehr wohl: Die
   Vorschau-Route wird seit M1.5 über die Track-Maschinerie gezeichnet, „Track
   anzeigen" und „Richtungspfeile" schalten also die geplante Linie — nützlich,
   wenn man die Karte darunter sehen will. Die beiden tour-eigenen Schalter
   (Tagespunkte, gespeicherte POIs) hätten dagegen nichts zu tun, weil die
   Tour-Ebenen im Route-Modus ohnehin abgehängt sind — die bleiben weg. */
body.route-mode #visRowDayPoints,
body.route-mode #visRowSavedPois{display:none}
/* Zentrieren bleibt im Route-Modus (Nutzerwunsch 11.09.2026) — es zoomt dort
   auf die geplante Route statt auf die Tour, siehe #btnCenterRoute-Handler. */
/* POI-Overlay bleibt im Route-Modus AN (M2): POIs entlang der geplanten Route
   sind dort der halbe Zweck — aus ihnen werden Wegpunkte. Die Ortssuche ist
   seit 11.09.2026 in BEIDEN Modi erreichbar (im Tour-Modus nur zum
   Hinspringen), deshalb keine route-only-Regel mehr. */

/* ── Route-Leiste ── */
/* Geometrie bewusst identisch zu #topbar (gleiche Höhe/Position/Breite), damit
   der Moduswechsel den Inhalt darunter nicht springen lässt. */
#routebar{
  flex-shrink:0;display:flex;align-items:center;gap:9px;
  padding:10px 12px;position:fixed;top:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:100;
  background:var(--bg);border-bottom:2px solid var(--acc);
}
#routebar .rb-ico{font-size:1.05rem;flex-shrink:0}
.rb-txt{min-width:0;margin-right:auto}
.rb-title{font-weight:700;font-size:var(--fs-sm);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-state{
  display:flex;align-items:center;gap:5px;margin-top:2px;min-width:0;
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
  letter-spacing:.08em;text-transform:uppercase;
}
/* Zahlenzeile (Profil · km · Höhenmeter): Versalien und Sperrung machen sie zu
   breit fürs Handy — hier normale Schreibung, einzeilig, notfalls gekürzt. */
/* Die Zahlenzeile ist die wichtigste Information der Leiste — sie war mit
   --fs-2xs (0,66rem) zu klein (Nutzerwunsch 11.09.2026). Jetzt --fs-sm mit
   kräftigerem Gewicht; der Zustandspunkt davor bleibt klein. */
.rb-state.data{text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:600;color:var(--txt)}
.rb-state.data::before{width:7px;height:7px}
/* Der Titel darüber darf dafür etwas zurücktreten */
body.route-mode .rb-title{font-size:var(--fs-xs);font-weight:600;color:var(--dim)}
/* Der Profilname darf schrumpfen und notfalls mit … enden; km und Höhenmeter
   daneben stehen fest (17.09.2026). Vorher fiel bei Platzmangel der ganze Name
   weg — „Schotter & Waldwege" auf einem Handy killte damit die halbe Zeile. */
.rb-state-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.rb-state-num{white-space:nowrap;flex:0 0 auto}
.rb-state-num:not(:empty)::before{content:'·';margin:0 5px;opacity:.55}
.rb-state::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.rb-state.draft{color:var(--dim)}
.rb-state.changed{color:var(--warn)}
.rb-state.calc{color:var(--gold)}
.rb-state.done{color:var(--acc-strong)}
.rb-btn{
  width:44px;height:44px;border-radius:11px;border:1.5px solid var(--bd2);background:var(--sf);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
}
.rb-btn.adopt{background:var(--acc);border-color:var(--acc);color:#fff}
.rb-btn:disabled{opacity:.38}

/* Werkzeuge über der Wegpunktliste (Umkehren/Rundroute) */
#rWpTools{margin-top:10px}
#rWpTools:empty{display:none}
#rWpTools .action-btn{min-height:38px;font-size:var(--fs-2xs)}

/* ── Wegpunktliste ── */
.rwp-row{
  display:flex;align-items:center;gap:9px;padding:9px 2px;min-height:44px;
  border-top:1px solid var(--bd);width:100%;background:none;border-left:none;border-right:none;
  border-bottom:none;text-align:left;color:inherit;
}
.rwp-row:first-child{border-top:none}
.rwp-num{
  width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.rwp-row.poi .rwp-num{background:var(--gold);color:var(--bg)}
.rwp-name{flex:1;min-width:0;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwp-name small{display:block;font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:400;color:var(--dim)}
.rwp-km{font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);flex-shrink:0}
.rwp-empty{padding:14px 4px 8px;text-align:center}
.rwp-empty .big{font-size:1.5rem;margin-bottom:6px}
.rwp-empty b{display:block;font-size:var(--fs-xs);margin-bottom:3px}
.rwp-empty span{font-size:var(--fs-2xs);color:var(--dim)}

/* ── Profil-Kacheln ── */
.rmode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rmode-tile{
  border:1.5px solid var(--bd);border-radius:11px;background:var(--sf2);
  padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:inherit;min-height:64px;
}
.rmode-tile.on{border-color:var(--acc);background:var(--acc-soft)}
.rmode-tile .ico{font-size:1.15rem;line-height:1}
.rmode-tile .lbl{font-size:var(--fs-2xs);font-weight:700;text-align:center;line-height:1.2}
.rmode-tile .sub{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--dim)}

/* ── Optionen-Seite (M3) ── */
.ropt-list{display:flex;flex-direction:column}
.ropt-row{
  display:flex;align-items:center;gap:11px;padding:10px 2px;min-height:48px;
  border-top:1px solid var(--bd);
}
.ropt-row:first-child{border-top:none}
.ropt-txt{flex:1;min-width:0}
.ropt-txt b{font-size:var(--fs-xs);font-weight:600;line-height:1.3;display:block}
/* Abweichung vom Profilstandard sichtbar machen, ohne die Zeile zu überladen:
   schmaler Akzentstrich links statt Farbe auf dem Text. */
.ropt-row.dev{box-shadow:inset 3px 0 0 var(--acc)}
.ropt-row.dev .ropt-txt b{color:var(--acc-strong)}
.ropt-sel{flex:0 0 auto;max-width:52%;font-size:var(--fs-2xs);padding:6px 8px}
.ropt-row .stepper{flex:0 0 auto;min-height:0}
.ropt-row .tgl{flex:0 0 auto}
.ropt-badge{
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;border:1px solid var(--bd2);color:var(--dim);
}
.ropt-badge.on{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.badge-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.opt-bar{display:flex;gap:8px;margin-top:12px}
.opt-bar .action-btn{min-height:40px}
.opt-bar .action-btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.opt-bar .action-btn:disabled{opacity:.4}

/* Platzhalter-Seite (leeres Schema) */
.route-soon{padding:18px 6px;text-align:center;font-size:var(--fs-xs);color:var(--dim);line-height:1.6}

/* ── Wegpunkt-Marker auf der Karte ── */
.route-wp-mk{background:none;border:none}
.route-wp-mk span{
  display:flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;
  background:var(--acc);color:#fff;border:2.5px solid #fff;
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.route-wp-mk.poi span{background:var(--gold);color:var(--bg)}
/* Stützpunkt: gedämpfter Griff ohne Nummer — formt die Route, ist aber keine
   Station. Der sichtbare Punkt ist klein (18px), die GREIFBARE Fläche aber so
   groß wie bei einem Wegpunkt: Das Marker-Div misst 30px, die Regel zentriert
   den Punkt darin. Mit 13px Trefferfläche war am Daumen kein Punkt zu fassen
   (Nutzerbefund 13.09.2026: „man kann sie nicht verschieben"). */
.route-wp-mk.shape{display:flex;align-items:center;justify-content:center}
.route-wp-mk.shape span{
  width:18px;height:18px;border-width:2.5px;background:var(--sf3);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}
/* Beim Ziehen kurz aufleuchten, damit man sieht, dass man ihn hat. */
.route-wp-mk.shape.leaflet-drag-target span{
  width:24px;height:24px;background:var(--acc);
}
.route-wp-mk.stage span{border-style:double;border-width:4px}

/* ── Hinweis + Rechen-Overlay ── */
#routeHint{
  /* pointer-events:none — die Blase liegt über Zoom-Control und Vollbild-FAB;
     ein Tap darauf soll die Karte bzw. den Knopf darunter erreichen, nicht ins
     Leere gehen.
     Kompakte Pille statt breiter Karte (Nutzerbefund 12.09.2026: "sehr groß,
     überdeckt Teile des Bildschirms"): width:max-content lässt sie nur so breit
     werden wie ihr Text, und sie sitzt ÜBER der FAB-Säule (die beginnt bei 78px
     in #mapWrap), damit sie keinen Knopf verdeckt. Ausgeblendet wird sie per
     .fade von _updateHint() in js/mobile_routing.js — nach 6 s von selbst. */
  position:fixed;top:calc(var(--content-top) + 12px);left:16px;right:16px;z-index:150;
  width:max-content;max-width:min(340px, calc(100% - 32px));margin:0 auto;pointer-events:none;
  background:var(--sf);border:1px solid var(--bd2);border-radius:12px;
  padding:7px 13px;box-shadow:var(--shadow-sm);text-align:center;
  opacity:1;transition:opacity .45s ease;
}
#routeHint.fade{opacity:0}
#routeHint b{display:block;font-size:var(--fs-xs)}
#routeHint span{display:block;font-size:var(--fs-2xs);color:var(--dim);line-height:1.45}
#routeCalc{
  position:fixed;top:var(--content-top);bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  z-index:210;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  /* Feste rgba-Werte statt color-mix(): dieselbe Technik wie .map-fab —
     schlägt color-mix auf einem älteren Gerät fehl, wäre die Fläche komplett
     durchsichtig und der Text über der Karte unlesbar. */
  background:rgba(11,22,32,.62);
}
#routeCalc b{font-size:var(--fs-sm)}
#routeCalc .mono{font-size:var(--fs-2xs);color:var(--dim)}
:root[data-theme="light"] #routeCalc{background:rgba(255,255,255,.72)}
.rc-spin{
  width:38px;height:38px;border-radius:50%;
  border:3px solid var(--bd2);border-top-color:var(--acc-strong);
  animation:rc-spin 1s linear infinite;
}
@keyframes rc-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rc-spin{animation:none}}

/* ── Umwandlung fremder Tracks (K1, info/obsolete/Plan_Mobile_GPX_Konvertierung.md) ──
   Zwei Karten nach dem Muster, das Komoot beim GPX-Import benutzt: Überschrift,
   Erklärsatz, eigener Knopf je Karte. Die obere ist bis auf Weiteres
   ausgegraut (.off) — Off-Grid-Abschnitte können wir noch nicht erhalten. */
.conv-card{
  border:1.5px solid var(--bd2);border-radius:14px;padding:13px 14px;
  background:var(--sf2);margin-bottom:12px;
}
.conv-card.off{opacity:.55}
.conv-card-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.conv-card-title{font-size:var(--fs-sm);font-weight:700}
.conv-badge{
  font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--bd2);border-radius:999px;padding:1px 7px;
}
.conv-card-text{font-size:var(--fs-2xs);color:var(--dim);line-height:1.55;margin:0 0 11px}
.conv-btn{
  width:100%;min-height:44px;border-radius:11px;border:1.5px solid var(--bd2);
  background:var(--sf);color:var(--txt);font-size:var(--fs-xs);font-weight:700;
}
.conv-btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.conv-btn:disabled{opacity:.5}
/* Zustandszeile der Rechnung: Spinner + Text, nach dem Ergebnis ein farbiges
   Zeichen statt des Spinners. */
.conv-state{
  display:flex;align-items:center;gap:8px;margin:0 0 11px;
  font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--dim);
}
.conv-state.good{color:var(--acc-strong)}
.conv-state.warn{color:var(--warn)}
.conv-state.bad{color:var(--danger)}
.conv-spin{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--bd2);border-top-color:var(--acc-strong);
  animation:rc-spin 1s linear infinite;
}
.conv-spin.done{animation:none;border:0;width:auto;height:auto;font-size:.72rem}
@media(prefers-reduced-motion:reduce){.conv-spin{animation:none}}
/* Fortschritt je Schritt — bewusst kein durchlaufender Gesamtbalken. */
.conv-prog{margin:0 0 11px}
.conv-bar{
  height:6px;border-radius:999px;background:var(--faint);
  border:1px solid var(--bd);overflow:hidden;
}
.conv-bar > i{
  display:block;height:100%;width:0;background:var(--acc);
  border-radius:999px;transition:width .35s var(--ease);
}
.conv-prog-meta{
  display:flex;justify-content:space-between;gap:10px;margin-top:5px;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;color:var(--dim);
}
.conv-sub{
  font-family:'JetBrains Mono',monospace;font-size:.52rem;color:var(--dim);
  margin:0 0 11px;min-height:.8em;
}
/* Nummer an einer roten Stelle — dieselbe Zahl wie in der Import-Liste. */
.dev-nr{background:none;border:0}
.dev-nr span{
  display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--danger);color:#fff;
  font-size:.62rem;font-weight:700;border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}

/* ── Import-Seite (Abgleich-Ergebnis + offene Stellen) ── */
/* Schrift bewusst eine Stufe größer als auf den anderen Chip-Seiten
   (Nutzerwunsch 13.09.2026): Hier wird gelesen und abgearbeitet, nicht nur
   überflogen — Kilometerangabe und Abweichung muss man am Lenker erfassen
   können. */
.chip-page[data-band="imp"] .chip-meta{
  font-size:var(--fs-xs);line-height:1.5;margin-bottom:10px;
}
.imp-row{
  display:flex;align-items:center;gap:8px;width:100%;
  border-bottom:1px solid var(--bd);
}
.imp-row:last-of-type{border-bottom:0}
/* Zwei Tap-Ziele je Zeile (15.09.2026): hinspringen und wegnehmen. Der linke
   Teil nimmt den ganzen freien Platz, damit er auf dem Daumen gut zu treffen
   ist; der Haken bleibt schmal, aber mit 44px Höhe noch sicher greifbar. */
.imp-go-btn{
  flex:1 1 auto;display:flex;align-items:center;gap:12px;min-width:0;
  min-height:54px;padding:8px 4px;border:0;background:none;color:var(--txt);
  text-align:left;
}
.imp-ok{
  flex:0 0 auto;min-width:44px;min-height:44px;
  border:1px solid var(--bd);border-radius:8px;background:none;
  color:var(--dim);font-size:var(--fs-md);
}
.imp-ok:active{border-color:var(--acc);color:var(--acc)}
/* Off-Grid-Teilstücke (mobile_routing.js _impOffgridRows, 10.10.2026) */
.imp-og-row .imp-nr{background:var(--warn,#E8A838)}
.imp-og-apply{
  flex:0 0 auto;min-height:44px;padding:0 10px;
  border:1px solid var(--warn,#E8A838);border-radius:8px;background:none;
  color:var(--txt);font-size:var(--fs-xs);
}
.imp-og-apply:disabled{opacity:.6}
.imp-nr{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:var(--fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.imp-txt{flex:1 1 auto;min-width:0}
.imp-txt b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.35}
.imp-txt span{
  display:block;font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
  color:var(--dim);line-height:1.45;
}
.imp-go{flex:0 0 auto;color:var(--dim);font-size:1.1rem}
.imp-empty{
  padding:16px 4px;font-size:var(--fs-xs);color:var(--dim);line-height:1.6;
}
.imp-details{
  width:100%;min-height:42px;margin-top:10px;border:0;background:none;
  color:var(--dim);font-size:var(--fs-xs);text-align:left;
}
#impDetails{
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);
  line-height:1.8;padding:6px 2px 2px;
}
#impDetails table{width:100%;border-collapse:collapse}
#impDetails td{padding:1px 0}
#impDetails td:last-child{text-align:right}
.confirm-again{
  display:flex;align-items:center;gap:9px;margin:-4px 0 14px;
  font-size:var(--fs-2xs);color:var(--dim);min-height:38px;
}
.confirm-again input{width:19px;height:19px;accent-color:var(--acc)}
.conv-note-input{
  width:100%;box-sizing:border-box;margin-bottom:12px;padding:10px 12px;
  border-radius:11px;border:1.5px solid var(--bd2);background:var(--sf2);
  color:var(--txt);font:inherit;font-size:var(--fs-xs);resize:vertical;
}
/* Rückmelde-Zeile unter der Wegpunktliste — unaufdringlich, aber auffindbar. */
.conv-feedback{
  display:block;width:100%;margin-top:10px;min-height:38px;
  border:1px dashed var(--bd2);border-radius:11px;background:none;
  color:var(--dim);font-size:var(--fs-2xs);
}
.conv-cancel{
  width:100%;min-height:44px;border-radius:11px;border:0;background:none;
  color:var(--dim);font-size:var(--fs-xs);
}

/* ── Ortssuche + Wegpunkt-Aktionen (M2) ── */
/* "Als Wegpunkt" im POI-Popup — gleiche Form wie der ☆-Merken-Knopf daneben,
   aber in der Akzentfarbe: im Route-Modus ist das die Hauptaktion. */
.pmp-wp-btn{
  width:100%;min-height:36px;margin-top:6px;border-radius:9px;
  border:1.5px solid var(--acc);background:var(--acc-soft);color:var(--acc-strong);
  font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;
}
#rsInput{width:100%;margin-bottom:10px}
.rs-row{
  width:100%;display:flex;align-items:center;gap:11px;padding:11px 2px;min-height:46px;
  border-top:1px solid var(--bd);text-align:left;color:inherit;background:none;border-left:none;border-right:none;border-bottom:none;
}
.rs-row:first-of-type{border-top:none}
.rs-row .rs-ico{font-size:1rem;width:22px;text-align:center;flex-shrink:0;color:var(--dim)}
.rs-row .rs-txt{flex:1;min-width:0}
.rs-row .rs-txt .t{display:block;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row .rs-txt .s{display:block;font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row .rs-d{font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--dim);flex-shrink:0}
.rs-row.rs-here{border-top:none;border-bottom:1px solid var(--bd);margin-bottom:4px}
.rs-hint{padding:14px 2px;font-size:var(--fs-xs);color:var(--dim);text-align:center}
/* Suche läuft: alte Treffer bleiben sichtbar, nur abgeblendet (statt Liste leeren → Sheet springt) */
.rc-search-busy{opacity:.5;transition:opacity .15s}
/* Trefferzeile + "+": Antippen springt hin, das Plus übernimmt als Wegpunkt
   (nur im Route-Modus vorhanden). Zwei getrennte Ziele statt eines doppelt
   belegten — auf Touch die einzig zumutbare Lösung. */
.rs-wrap{display:flex;align-items:center;gap:6px;border-top:1px solid var(--bd)}
.rs-wrap:first-child{border-top:none}
.rs-wrap .rs-row{border-top:none;flex:1;min-width:0}
.rs-add{
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  border:1.5px solid var(--acc);background:var(--acc-soft);color:var(--acc-strong);
  font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
/* Aktionszeile im Sheet (Wegpunkt-Aktionen) — volle Breite, 48px Touch-Ziel,
   Trennlinie zwischen den Einträgen statt Rahmen um jeden. */
.act{
  width:100%;display:flex;align-items:center;gap:11px;padding:12px 2px;min-height:48px;
  border:none;border-top:1px solid var(--bd);background:none;color:inherit;
  font-size:var(--fs-xs);font-weight:600;text-align:left;
}
.act:disabled{opacity:.35}
.act.danger{color:var(--danger)}
.act .ico{width:22px;text-align:center;font-size:1rem;flex-shrink:0;color:var(--dim)}
.act.danger .ico{color:inherit}

.wp-rename-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.wp-rename-row .tf-input{flex:1;min-width:0}
.wp-rename-row .action-btn{flex:0 0 auto;min-width:0;padding:0 14px}
.rwp-wrap{display:flex;align-items:center;gap:6px;border-top:1px solid var(--bd)}
.rwp-wrap:first-child{border-top:none}
.rwp-wrap .rwp-row{border-top:none;flex:1;min-width:0}
.rwp-more{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);background:none;
  color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;
}

/* ── Tage-Stepper der Etappenvorschau (Route-Modus) ── */
#routeDaysBar{
  display:flex;align-items:center;gap:10px;padding:2px 0 9px;margin-bottom:4px;
  border-bottom:1px solid var(--bd);
}
#routeDaysBar .rd-label{font-size:var(--fs-xs);font-weight:700}
#routeDaysBar .rd-hint{margin-left:auto;font-size:var(--fs-2xs);color:var(--dim)}
#routeDaysBar .stepper{display:flex;align-items:center;gap:8px}

/* ── Rückfrage-Sheet + "Neue Route"-Zeile im Lade-Sheet ── */
.confirm-text{font-size:var(--fs-xs);color:var(--dim);line-height:1.6;margin-bottom:14px}
.load-opt.route-new{border-color:var(--acc);background:var(--acc-soft)}

/* Querformat/Tablet: das Route-Panel ist — wie der Tour-Chip-Pager — dort
   normaler Spalteninhalt statt schwebender Ebene. */
@media(min-width:900px) and (orientation:landscape){
  #routebar{position:static;max-width:none;margin:0}
}

/* Querformat: Rechen-Overlay und Kartenhinweis gehören über die KARTE.
   Beide sind direkte body-Kinder mit position:fixed + max-width:520px +
   margin:auto — im Hochformat genau richtig, im Querformat landeten sie
   zentriert quer über der Grenze zwischen Karten- und Listenspalte
   (Nutzerbefund 11.09.2026). Hier werden sie stattdessen in dieselbe
   Grid-Zelle wie #mapWrap gelegt (Spalte 1, beide Zeilen) und füllen damit
   exakt die Kartenfläche. Gleicher Media-Query-Ausdruck wie das
   Grundlayout oben, damit beide immer gemeinsam greifen. */
@media (orientation: landscape) and (min-width: 640px), (min-width: 760px){
  #routebar{grid-column:2;grid-row:1}
  #routeCalc,#routeHint{
    position:relative;grid-column:1;grid-row:1/span 2;
    top:auto;bottom:auto;left:auto;right:auto;max-width:none;margin:0;
  }
  /* justify-self:center statt stretch — die Blase ist seit 12.09.2026 nur so
     breit wie ihr Text (width:max-content); "stretch" würde sie im Grid wieder
     über die ganze Kartenspalte ziehen. */
  #routeHint{align-self:start;justify-self:center;margin:12px}
}

/* ── Wegpunktliste: Ziehgriff + Stützpunkt-Zeilen (15.09.2026) ──
   Gezogen wird ausschließlich am Griff — die Zeile bleibt antippbar, und ein
   Wischen durch die Liste sortiert nicht versehentlich um. touch-action:none
   ist Pflicht, sonst scrollt die Seite statt zu ziehen. */
.rwp-grip{
  flex:0 0 auto;width:34px;min-height:44px;display:flex;align-items:center;
  justify-content:center;color:var(--dim);font-size:1.05rem;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.rwp-wrap.dragging{opacity:.75;background:var(--bg2);border-radius:8px}
.rwp-wrap.dragging .rwp-grip{cursor:grabbing;color:var(--acc)}
/* Stützpunkt-Zeilen sind bewusst leiser als echte Wegpunkte: Sie formen nur
   den Verlauf und sollen die Stationen der Tour nicht optisch verdrängen. */
.rwp-row.shape .rwp-num{background:none;border:1px dashed var(--bd);color:var(--dim);font-weight:400}
.rwp-row.shape .rwp-name{color:var(--dim)}

/* ── Route-Leiste als schwebende Pille (nur bei genug Höhe) ────────────────
   Nutzerwunsch 17.09.2026: „Titelzeile zur Pille — ist ja der Gedanke, es
   grundsätzlich mobil als Pille zu machen." Gleiche Radien und Abstände wie
   #topbar und die Bänder darunter, damit es eine Familie bleibt; der grüne
   Balken unten weicht einem grünen Rand ringsum, sonst säße eine gerade Kante
   mitten in der abgerundeten Fläche.

   MUSS AM DATEIENDE STEHEN: Weiter oben setzen zwei spätere Media-Blöcke
   (`min-width:900px and landscape` sowie der Grundblock des Querformats)
   `#routebar{margin:0}` mit derselben Spezifität — dort platziert, gewann die
   Pille zwar ihre Radien, aber nicht ihren Abstand und klebte am Bildschirm-
   rand (17.09.2026 im Nachbau gesehen: rechte Kante bei genau 1024). */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 600px),
       (min-width: 760px) and (min-height: 600px){
  #routebar{
    margin:10px 10px 0;border:1.5px solid var(--acc);
    border-radius:14px;box-shadow:var(--shadow-sm);
  }
}

/* ── Einheitliche Knopfleiste im POI-Flyout und -Sheet (26.09.2026) ──
   Alle Knöpfe gleich hoch und gleich beschriftet, zwei Spalten; Wegpunkt, Adresse und „Alle OSM-Tags“ über die volle Breite. */
.rc-poi-pop .pmp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rc-poi-pop .pmp-btns > .pmp-save-btn,
.rc-poi-pop .pmp-btns > .pmp-wp-btn,
.rc-poi-pop .pmp-btns > a,
.rc-poi-pop .pmp-btns .rc-alltags-btn{
  box-sizing:border-box;width:100%;min-height:40px;margin:0;padding:0 10px;border-radius:9px;
  border:1.5px solid var(--bd2);background:var(--sf2);color:var(--acc-strong);
  font-family:inherit;font-size:var(--fs-xs);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rc-poi-pop .pmp-btns > .pmp-save-btn{color:var(--dim)}
.rc-poi-pop .pmp-btns > .pmp-save-btn.on{background:rgba(255,215,0,.15);border-color:#ffd700;color:#ffd700}
.rc-poi-pop .pmp-btns > .pmp-wp-btn{grid-column:1/-1;border-color:var(--acc);background:var(--acc-soft)}
.rc-poi-pop .pmp-btns > .pmp-lnk-addr,
.rc-poi-pop .pmp-btns > .rc-alltags{grid-column:1/-1}
.rc-poi-pop .pmp-btns .rc-alltags-btn{color:var(--txt)}
/* Alle OSM-Tags: Inhalt unter dem Knopf, theme-fähig (vorher feste Dunkelfarben → im hellen Popup unlesbar) */
.rc-alltags-body{margin-top:8px;padding:8px 10px;border:1.5px solid var(--bd2);border-radius:9px;background:var(--sf2);max-height:300px;overflow:auto;text-align:left}
.rc-at-tbl{width:100%;border-collapse:collapse}
.rc-at-k{width:42%;padding:3px 10px 3px 0;vertical-align:top;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);word-break:break-all}
.rc-at-v{padding:3px 0;vertical-align:top;color:var(--txt);font-size:var(--fs-xs);line-height:1.35;word-break:break-word}
.rc-at-v a,.rc-at-meta a{color:var(--acc-strong);font-weight:700}
.rc-at-meta{margin-top:8px;padding-top:6px;border-top:1px solid var(--bd);color:var(--dim);font-size:var(--fs-2xs);line-height:1.5}
.rc-at-note{margin-top:4px;color:var(--dim);font-size:var(--fs-2xs)}
.rc-at-names summary{margin-top:6px;cursor:pointer;color:var(--dim);font-size:var(--fs-2xs)}