/* Womo-Reisetagebuch · app.css · v6.7 · 09.10.2026
   v6.7: Straßenlage Schweden: Meldungen als Dreieck auf der Karte und in der Umgebung, Popups der Meldungen
   v6.6: eigene Position als kleines Wohnmobil (.pos-womo statt .pos-marker); Demo: Leiste der Demofahrt
         über der Karte, „Folgen“ pulsiert, solange die Demofahrt nicht läuft
   v6.5: Demo-Modus: Marke „Demo“ in der Statusleiste, Begrüßung, Hinweise in den Einstellungen
   v6.4: Notizen zu neuen Fotos: Bild links neben dem Notizfeld (stand untereinander)
   v6.3: Tagesnotiz nach der Fahrt (eingerückt wie der Stellplatz), Notiz am Ort (Liste, Sprechblase
         auf der Karte, Dialog), Notizen zu neuen Fotos
   v6.2: Reiter „Planung“ (sechs Reiter unten), Liste der Routen als Seite
   v6.1: nur noch eine ?-Taste (rechts in der Statusleiste), die übrigen ?-Tasten entfallen
   v6.0: Handbuch in der App: ?-Tasten (Karte, Seitenköpfe, Einstellungskästen), Fenster mit dem Handbuch
   v5.9: Eingetragene Schlüssel anzeigen (Routenplanung und Verkehr)
   v5.8: Datenspeicher: Abschnitt Schreibschutz der Speicherkarte
   v5.7: Kasten „Datenspeicher“: Warnung „Datenstick fehlt“, Fortschrittsbalken
   v5.6: „Meine Plätze“: Auswahl Aktuelle Reise | Alle, Hinweis auf Umgebung und Karte
   v5.5: Zähler der Verkehrsabfragen in den Einstellungen (Warnfarbe, wenn das Kontingent knapp ist)
   v5.4: Tagesnotiz an der Tagesüberschrift, Notiz von heute über der Liste; Zwischenhalte
         (Listenzeile, Fähnchen auf der Karte, Dialog, kleines Schild im Reisefilm)
   v5.3: Taste „Satellit“ auf der Karte; Linien auf dem Satellitenbild mit hellem Rand
   v5.2: Reise abspielen: Fotos als runde Bilder, Satellitenbild, Hochformat 9:16
   v5.1: Reise abspielen: Aufnahmemodus (alle Bedienelemente aus), Titel- und Abspannkarte,
         Schilder, Steuerbalken
   v5.0: Stellplatz unter der Fahrt in der Liste „Reisen“
   v4.9: Kalender in der Etappenübersicht (Startdatum, Nächte je Etappenziel, Wetter)
   v4.8: Kompass auf der Karte (Nordpfeil und Fahrtrichtung)
   v4.7: Abschnitt „Über“ in den Einstellungen (Quellenliste)
   v4.6: Planungsliste mit Zeilen zum Aufklappen
   v4.5: Platzwahl mit Karte; Legendenkopf deckt beim Scrollen ganz ab, Titel einzeilig
   v4.4: Legende höchstens 45 % der Höhe (scrollt), damit sie die Tasten unten rechts nicht verdeckt
   v4.3: Übernachtungsplatz je Etappe
   v4.2: Hinweis „Name passt nicht“, verdeckte Zielschilder
   v4.1: Linienmuster der Pläne, Vergleich mehrerer Pläne
   v4.0: Pläne in der Routenliste, Planauswahl, Vergleich
   v3.9: Routenliste: Tasten unter Name und Angaben
   v3.8: Legende der Routen: Name und „aktuell“ zusammen
   v3.7: Tasten in Listeneinträgen brechen auf schmalen Bildschirmen um (Routenliste auf dem Handy)
   v3.6: mehrere Routen auf der Karte (Legende, Schilder), Kästchen in der Routenliste
   v3.5: Routendetails
   v3.4: Einstellungen auf dem Handy ohne seitliches Überstehen
   v3.3: gespeicherte Routen
   v3.2: Zwischenziel-Zeile auf dem Handy einzeilig
   v3.1: Zwischenziele, Etappen
   v3.0: Anzeige „vom VPS übernommen“
   v2.9: Fernzugang (QR-Code, Befehle)
   v2.8: Straßenkameras und Straßenlage Finnland
   v2.7: WLAN-Liste, Sicherungsziel
   v2.6: Verkehrslage (Routenleiste, Liste, Symbole)
   v2.5: Statusleiste mit sechstem Wert (Schnitt) auch auf dem Handy
   v2.4: Merkliste (goldener Rand, Stern), Statistik (Tabellen, Jahresfarben)
   v2.3: Live-Standort (Link)
   v2.2: Tage der Reise mit Notiz, Kosten, Tankbuch
   v2.1: Fotos (Galerie, Vollbild, Kartensymbole, Vorschau in der Stellplatzliste)
   v2.0: Reisen (Umschalter Fahrten/Reisen, Etappen, Fahrten der Reise)
   v1.9: kompaktere Kartenknöpfe und Routenleiste, Sehenswürdigkeiten
   v1.8: Von–Nach im Routendialog, Wetter (Knöpfe, Radarleiste, Vorhersage)
   v1.7: Routenplanung (Dialog, Routenleiste), Umgebung mit drei Arten
   v1.6: Sicherung (Warnfarbe, Fehlertext)
   v1.5: Standort-Knopf, Entfernen-Knopf und „unvollständig“ in der Länderliste
   v1.4: Plätze (Schilder, Umschalter, Umgebung, Details, Länderliste), fünf Reiter
   v1.3: Reiter Einstellungen (Formular, Kästen), vier Reiter
   v1.2: Stau-Taste, Fahrt-Details (Kennzahlen, Punkttabelle)
   v1.1: Nachtfilter nur noch für Online-Kacheln (Offline-Karte hat eigenes
         dunkles Kartenbild), Statusleiste mit fünf Werten
   Gestaltung: Statusleiste in Asphaltgrau, Stellplätze im Blau der
   Hinweisschilder, Fahrspur in Straßenkarten-Orange. Nur Systemschriften,
   damit alles auch ohne Internet funktioniert. */

:root {
  --asphalt: #23272b;
  --asphalt-hell: #3a4046;
  --schild: #1d5aa8;
  --schild-dunkel: #164682;
  --spur: #e0611f;
  --spur-auswahl: #7a3fb8;
  --grund: #f4f6f7;
  --flaeche: #ffffff;
  --linie: #d9dee2;
  --text: #1c1f22;
  --text-leise: #5d666e;
  --gruen: #2f9e44;
  --gelb: #f2a900;
  --rot: #d63a2f;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --leiste-h: 64px;
  --reiter-h: 56px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #15181b;
    --flaeche: #1f2327;
    --linie: #343a40;
    --text: #e9ecee;
    --text-leise: #9aa3ab;
    --schild: #3b7dd8;
    --schild-dunkel: #2d66b5;
  }
  /* Karte nachts abdunkeln, damit sie im Fahrerhaus nicht blendet */
  .osm-kacheln { filter: brightness(.62) contrast(1.1) saturate(.8); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

button, input, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------ Statusleiste */
#statusleiste {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--leiste-h);
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) 8px calc(env(safe-area-inset-left) + 16px);
  background: var(--asphalt);
  color: #f1f3f4;
}

.st-zustand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

#st-text {
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ampel {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--asphalt-hell);
  background: #6b737a;
}
.ampel.gruen { background: var(--gruen); }
.ampel.gelb  { background: var(--gelb); }
.ampel.rot   { background: var(--rot); }

.st-werte {
  display: flex;
  gap: 22px;
  margin: 0;
  flex: none;
}
.st-werte div { display: flex; flex-direction: column; align-items: flex-end; }
.st-werte dt { font-size: 12px; color: #a9b1b8; }
.st-werte dd {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* schmale Geräte: Werte unter den Zustand */
@media (max-width: 720px) {
  #statusleiste { flex-wrap: wrap; row-gap: 6px; }
  .st-zustand { flex-basis: 100%; }
  .st-werte { width: 100%; justify-content: space-between; gap: 8px; }
  .st-werte div { align-items: flex-start; }
  .st-werte dd { font-size: 16px; }
  .st-werte dt { font-size: 11px; }
}

/* ------------------------------------------------------------ Seiten */
main { position: relative; min-height: 0; }

.seite { display: none; height: 100%; }
.seite.aktiv { display: block; }

#seite-karte { position: relative; }
#karte { position: absolute; inset: 0; background: #dfe3e6; }

#seite-fahrten, #seite-stellplaetze, #seite-umgebung, #seite-planung {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(env(safe-area-inset-right) + 16px) 24px calc(env(safe-area-inset-left) + 16px);
}

/* ------------------------------------------------------------ Knöpfe */
.kn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kn:active { transform: translateY(1px); }
.kn:focus-visible, #reiter button:focus-visible { outline: 3px solid var(--schild); outline-offset: 2px; }
.kn.aktiv, .kn.haupt { background: var(--schild); border-color: var(--schild-dunkel); color: #fff; }
.kn.gefahr { color: var(--rot); }
.kn.klein { min-height: 38px; padding: 0 12px; font-size: 15px; }
.kn[disabled] { opacity: .5; pointer-events: none; }

.karten-knoepfe {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 12px);
  bottom: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.karten-knoepfe .kn { box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

.karten-hinweis {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 10px;
  background: var(--flaeche);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  font-weight: 600;
}
.karten-hinweis[hidden] { display: none; }

/* ------------------------------------------------------------ Reiter */
#reiter {
  display: flex;
  background: var(--asphalt);
  padding-bottom: env(safe-area-inset-bottom);
}
#reiter button {
  flex: 1;
  min-height: var(--reiter-h);
  border: 0;
  border-top: 4px solid transparent;
  background: none;
  color: #c3c9ce;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
#reiter button.aktiv { color: #fff; border-top-color: var(--schild); }

/* ------------------------------------------------------------ Listen */
.liste-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 0 12px;
  background: var(--grund);
}
.liste-kopf h2 { margin: 0; font-size: 26px; }

.liste { max-width: 760px; margin: 0 auto; }

.tag {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-leise);
}

.eintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--spur);
  border-radius: 6px;
}
.eintrag.sp { border-left-color: var(--schild); }
.eintrag-titel { font-weight: 650; font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.eintrag-info { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.eintrag-notiz { grid-column: 1 / -1; color: var(--text-leise); font-size: 15px; white-space: pre-line; }
.eintrag-knoepfe { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 8px; }
.laeuft { color: var(--spur); font-weight: 700; }
.sterne-anzeige { color: #c98a00; letter-spacing: 1px; }

.leer {
  margin-top: 40px;
  text-align: center;
  color: var(--text-leise);
}

/* ------------------------------------------------------------ Karte: Marker */
/* eigene Position: kleines Wohnmobil; .links = fährt nach Westen (gespiegelt), .alt = keine aktuelle Position */
.pos-womo { width: 38px; height: 26px; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.pos-womo svg { display: block; transition: transform .25s; }
.pos-womo.links svg { transform: scaleX(-1); }
.pos-womo.alt { filter: grayscale(1) drop-shadow(0 0 1.5px #fff); opacity: .65; }

/* Stellplatz wie ein blaues Hinweisschild mit weißem P */
.sp-schild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--schild);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  color: #fff;
  font: 800 18px/1 var(--schrift);
}
.sp-schild.offen { box-shadow: 0 0 0 3px var(--spur), 0 1px 4px rgba(0, 0, 0, .45); }

.leaflet-popup-content { font: 15px/1.4 var(--schrift); }
.leaflet-popup-content b { font-size: 16px; }
.popup-kn { margin-top: 8px; }

/* ------------------------------------------------------------ Dialog */
dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
dialog::backdrop { background: rgba(10, 12, 14, .55); }

.dlg { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.dlg h3 { margin: 0; font-size: 22px; }
.dlg-info { margin: -8px 0 0; color: var(--text-leise); }
.dlg label, .dlg .feld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.dlg input, .dlg textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
  font-size: 17px;
  font-weight: 400;
}
.dlg textarea { resize: vertical; }
.dlg-fehler { margin: 0; color: var(--rot); font-weight: 600; }
.dlg-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.dlg-knoepfe .abstand { flex: 1; }

.sterne { display: flex; gap: 4px; }
.sterne button {
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  font-size: 32px;
  line-height: 1;
  color: var(--linie);
  cursor: pointer;
}
.sterne button.an { color: #e0a000; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* schmale Geräte: Knöpfe unter den Eintrag, Dialogknöpfe kompakter */
@media (max-width: 560px) {
  .eintrag { grid-template-columns: 1fr; }
  .eintrag-knoepfe { grid-row: auto; grid-column: 1; order: 5; margin-top: 6px; }
  .dlg { padding: 16px; }
  .dlg-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dlg-knoepfe .abstand { display: none; }
  .dlg-knoepfe .kn { padding: 0 6px; }
}

/* ------------------------------------------------------------ v1.2: Stau */
.kn.stau-an { background: var(--gelb); border-color: #c98a00; color: #1c1f22; }

/* ------------------------------------------------------------ v1.2: Fahrt-Details */
dialog.breit { width: min(960px, calc(100vw - 24px)); }
dialog.breit .dlg { max-height: calc(100dvh - 24px); }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.kennzahlen div { display: flex; flex-direction: column; }
.kennzahlen dt { font-size: 13px; color: var(--text-leise); }
.kennzahlen dd { margin: 0; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }

.tabelle-rahmen {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 50dvh;
  overflow: auto;
  border: 1px solid var(--linie);
  border-radius: 8px;
}
table.punkte { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.punkte th {
  position: sticky;
  top: 0;
  background: var(--grund);
  text-align: right;
  font-weight: 650;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.punkte td { text-align: right; padding: 5px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.punkte th:first-child, table.punkte td:first-child,
table.punkte th:last-child, table.punkte td:last-child { text-align: left; }
table.punkte tr.langsam td { color: var(--text-leise); }

.eintrag-knoepfe .kn.gefahr { color: var(--rot); }

/* ------------------------------------------------------------ v1.3: Einstellungen */
#seite-einstellungen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(env(safe-area-inset-right) + 16px) 32px calc(env(safe-area-inset-left) + 16px);
}
.kasten {
  padding: 14px 16px;
  margin: 0 0 8px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.kasten .kn { margin-top: 4px; }
.kennzahlen .breit { grid-column: 1 / -1; }
.kennzahlen dd.klein { font-size: 15px; font-weight: 400; overflow-wrap: anywhere; }
.kennzahlen dd.mittel { font-size: 17px; }

#es-formular fieldset {
  margin: 0 0 12px;
  padding: 6px 16px 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
#es-formular legend { padding: 0 6px; font-weight: 700; font-size: 17px; }
.es-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}
.es-zeile:last-child { border-bottom: 0; }
.es-zeile label { font-weight: 600; }
.es-eingabe { display: flex; align-items: center; gap: 8px; }
.es-eingabe input {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
  font-size: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.es-eingabe input.geaendert { border-color: var(--schild); box-shadow: 0 0 0 2px var(--schild); }
.es-einheit { width: 44px; color: var(--text-leise); }
.es-hilfe { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; color: var(--text-leise); }
.es-hilfe.warnung { color: #b07800; font-weight: 600; }
.es-standard { white-space: nowrap; }
.es-meldung { margin: 8px 0; font-weight: 600; color: var(--gruen); }
.es-meldung.fehler { color: var(--rot); }
.es-knoepfe { margin-top: 8px; }

#reiter button { font-size: 16px; padding: 0 4px; }
@media (max-width: 420px) { #reiter button { font-size: 14px; } }

/* ------------------------------------------------------------ v1.4: Plätze */
.pl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font: 800 13px/1 var(--schrift);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  vertical-align: -5px;
}
.pl-stellplatz { background: #fff; color: var(--schild); border: 2px solid var(--schild); }
.pl-camping { background: #2f7d32; color: #fff; border: 2px solid #fff; font-size: 11px; }
.pl-entsorgung { background: #6d4c41; color: #fff; border: 2px solid #fff; }

.pl-schalter {
  position: absolute;
  top: 12px;
  left: 56px;
  z-index: 500;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 70px);
}
.pl-schalter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--linie);
  border-radius: 19px;
  background: var(--flaeche);
  color: var(--text-leise);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: pointer;
  opacity: .75;
}
.pl-schalter button.an { color: var(--text); opacity: 1; border-color: var(--schild); }
.pl-schalter button:not(.an) .pl-icon { filter: grayscale(1); opacity: .5; }
@media (max-width: 560px) {
  .pl-schalter button { font-size: 0; gap: 0; padding: 0 6px; }
}

.umgebung-kopf select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
  font-size: 16px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.chips button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: 19px;
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.chips button.an { background: var(--schild); border-color: var(--schild-dunkel); color: #fff; }
.chips-trenner { width: 100%; height: 0; }

.pl-eintrag { border-left-color: var(--schild); }
.pl-rand-camping { border-left-color: #2f7d32; }
.pl-rand-entsorgung { border-left-color: #6d4c41; }

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.angaben div { display: contents; }
dl.angaben dt { color: var(--text-leise); }
dl.angaben dd { margin: 0; overflow-wrap: anywhere; }
dl.angaben.klein { font-size: 14px; margin-top: 8px; }
.osm-angaben summary { cursor: pointer; font-weight: 600; color: var(--schild); }
#pl-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }

.laender-liste { display: flex; flex-direction: column; margin: 8px 0; }
.land-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
}
.land-zeile input { width: 22px; height: 22px; }
.land-name { font-weight: 600; }
.land-stand { color: var(--text-leise); font-size: 14px; text-align: right; }
.land-stand.fehler { color: var(--rot); }
.marke {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--grund);
  border: 1px solid var(--linie);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

/* fünf Reiter */
@media (max-width: 560px) {
  #reiter button { font-size: 13px; padding: 0 2px; }
}

/* ------------------------------------------------------------ v1.5 */
.land-stand.teilweise { color: #b07800; }
.land-zeile .kn.klein { min-height: 34px; padding: 0 10px; font-size: 14px; }
@media (max-width: 560px) {
  .land-zeile { grid-template-columns: auto 1fr auto; }
  .land-zeile .land-stand { grid-column: 2; text-align: left; }
  .land-zeile .kn.klein, .land-zeile > span:last-child { grid-column: 3; grid-row: 1 / span 2; }
}
.standort-kn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #fff;
  color: var(--schild);
  cursor: pointer;
}
.standort-kn:active { background: #e8eef7; }
.leaflet-popup-content .marke { vertical-align: 1px; }

/* ------------------------------------------------------------ v1.6: Sicherung */
.kennzahlen dd.warnung { color: #b07800; }
.kennzahlen dd.fehlertext { color: var(--rot); }

/* ------------------------------------------------------------ v1.7: Route */
.routen-leiste {
  position: absolute;
  left: calc(env(safe-area-inset-left) + 12px);
  bottom: 24px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 200px);
  padding: 8px 8px 8px 14px;
  border-radius: 10px;
  border-left: 5px solid var(--schild);
  background: var(--flaeche);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.routen-leiste[hidden] { display: none; }
#rl-text { font-weight: 650; flex: 1 1 100%; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .routen-leiste { max-width: calc(100% - 175px); }
}

.rt-suche { display: flex; gap: 8px; }
.rt-suche input { flex: 1; }
#rt-treffer { display: flex; flex-direction: column; gap: 6px; max-height: 36dvh; overflow-y: auto; }
.rt-ort {
  text-align: left;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
  cursor: pointer;
}
.rt-ort:active { background: var(--linie); }
#rt-ziel { font-weight: 650; }
.rt-optionen { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rt-optionen label { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 600; }
.rt-optionen input { width: 22px !important; height: 22px; }

.segment { display: flex; margin: 0 0 10px; border: 1px solid var(--schild); border-radius: 10px; overflow: hidden; }
.segment button {
  flex: 1;
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--schild);
  background: var(--flaeche);
  color: var(--schild);
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
}
.segment button:last-child { border-right: 0; }
.segment button.an { background: var(--schild); color: #fff; }
.ors-eingabe { display: flex; gap: 8px; margin-top: 6px; }
.ors-eingabe input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
}

/* ------------------------------------------------------------ v1.8: Von–Nach */
.rt-feld { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; }
.rt-label { font-size: 13px; font-weight: 700; color: var(--text-leise); }
.rt-wahl { margin: 0; font-weight: 650; }
.rt-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-zeile .kn[hidden] { display: none; }
.rt-treffer { display: flex; flex-direction: column; gap: 6px; max-height: 26dvh; overflow-y: auto; }
#rt-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* ------------------------------------------------------------ v1.8: Wetter */
.wetter-knoepfe { display: flex; flex-direction: column; background: #fff; }
.wetter-kn {
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 0;
  border-bottom: 1px solid #ccc;
  background: #fff;
  color: var(--schild);
  font: 700 13px/1 var(--schrift);
  cursor: pointer;
}
.wetter-kn:last-child { border-bottom: 0; }
.wetter-kn.an { background: var(--schild); color: #fff; }
.wetter-kn.warnung { background: var(--gelb); color: #1c1f22; }

.radar-leiste {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 10px;
  background: var(--flaeche);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.radar-leiste[hidden] { display: none; }
@media (max-width: 560px) { .radar-leiste { top: 60px; } }

#wt-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.wt-warnung { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--gelb); color: #1c1f22; font-weight: 700; }
#wt-inhalt h4, #pl-wetter h4 { margin: 8px 0 4px; font-size: 15px; color: var(--text-leise); }
.wt-verlauf { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.wt-std {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 4px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.wt-sym { font-size: 22px; line-height: 1.1; }
.wt-klein { font-size: 12px; color: var(--text-leise); }
.wt-tage { display: flex; flex-direction: column; gap: 4px; }
.wt-tag {
  display: grid;
  grid-template-columns: 5.5em 2em 6em 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--grund);
  font-variant-numeric: tabular-nums;
}
.wt-name { font-weight: 650; }
.wt-regen, .wt-boe { font-size: 14px; color: var(--text-leise); }
.wt-wind { box-shadow: inset 4px 0 0 var(--gelb); }
.wt-wind .wt-boe { color: #b07800; font-weight: 700; }
.wt-quelle { margin: 6px 0 0; font-size: 12px; color: var(--text-leise); }
@media (max-width: 560px) {
  .wt-tag { grid-template-columns: 4.5em 2em 1fr; }
  .wt-regen, .wt-boe { grid-column: 2 / -1; }
}

/* ------------------------------------------------------------ v1.9: kompakt */
.karten-knoepfe { gap: 6px; bottom: 18px; }
.karten-knoepfe .kn { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 7px; }

.routen-leiste {
  flex-wrap: nowrap;
  gap: 4px;
  bottom: 18px;
  max-width: calc(100% - 150px);
  padding: 4px 4px 4px 4px;
  border-left-width: 4px;
}
#rl-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  padding: 0 4px;
}
.rl-kn {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--schild);
  font: 700 15px/1 var(--schrift);
  cursor: pointer;
}
.rl-kn.gefahr { color: var(--rot); }
.routen-leiste.eingeklappt #rl-plaetze,
.routen-leiste.eingeklappt #rl-zeigen,
.routen-leiste.eingeklappt #rl-loeschen { display: none; }
@media (max-width: 560px) {
  .routen-leiste { max-width: calc(100% - 140px); }
  .karten-knoepfe .kn { padding: 0 10px; font-size: 13px; min-height: 34px; }
}

/* ------------------------------------------------------------ v1.9: Sehenswürdigkeiten */
.pl-sehenswert { background: #6a3fa0; color: #fff; border: 2px solid #fff; font-size: 13px; }
.pl-rand-sehenswert { border-left-color: #6a3fa0; }

/* hidden muss immer gewinnen (sonst überschreibt z. B. .kn { display: inline-flex } es) */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ v2.0: Reisen */
.fa-kopf { margin: 0 auto 4px; }
.sp-kopf { margin: 0 auto 6px; }
.rs-kopf { margin: 0 auto 8px; }
.rs-kopf .es-hilfe { margin: 0 0 8px; }
#seite-planung #rs-liste { padding-bottom: 24px; }
#seite-planung .rs-kopf .dlg-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
#seite-planung .rs-kopf .dlg-knoepfe .kn { flex: 1 1 auto; padding: 0 12px; }
@media (max-width: 480px) { #reiter button { font-size: 12px; padding: 0 1px; hyphens: manual; -webkit-hyphens: manual; } }
.ds-warnung { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rot); color: var(--rot); font-weight: 600; }
.ds-warnung[hidden], .ds-fortschritt[hidden] { display: none; }
.ds-fortschritt { margin: 10px 0 4px; }
.ds-balken { height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.ds-balken span { display: block; height: 100%; width: 0; background: var(--schild); transition: width .4s; }
#ds-knoepfe, #ds-schutz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#ds-knoepfe:empty, #ds-schutz-knoepfe:empty { display: none; }
#ds-knoepfe .kn, #ds-schutz-knoepfe .kn { flex: 1 1 240px; margin: 0; white-space: normal; }
.st-hilfe { flex: none; width: 34px; height: 34px; padding: 0; border: 2px solid #8a939b; border-radius: 50%;
  background: transparent; color: #f1f3f4; font: 700 18px/1 var(--schrift); cursor: pointer; }
.st-hilfe:active { background: var(--asphalt-hell); }
@media (max-width: 720px) {
  .st-werte { width: auto; flex: 1 1 0; min-width: 0; }
  .st-hilfe { align-self: center; }
}
.hb-oeffnen { margin-top: 10px; }
#hb-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; }
#hb-dialog[open] { display: flex; flex-direction: column; }
.hb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top)); background: var(--asphalt); color: #fff; }
.hb-kopf b { font-size: 17px; }
#hb-rahmen { flex: 1; width: 100%; border: 0; background: var(--grund); }
.sl-zeile { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; margin-top: 10px; }
.sl-name { grid-column: 1 / -1; font-size: 14px; color: var(--text-leise); }
.sl-wert { font-size: 13px; word-break: break-all; background: var(--grund); padding: 6px 8px; border-radius: 6px; user-select: all; -webkit-user-select: all; }
.ds-schutz { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.ds-schutz .es-hilfe { margin: 0; }
.ds-tausch { margin-top: 10px; }
.ds-tausch ol { margin: 6px 0 0; padding-left: 22px; }
.segment[hidden] { display: none; }
.sp-kopf .es-hilfe { margin: 0 0 8px; }
.sp-kopf #sp-reise { font-weight: 600; color: var(--text); }
.reise-knoepfe { display: flex; gap: 8px; margin: 4px 0 10px; }
.eintrag.reise { border-left-color: #6a3fa0; }
.eintrag.reise.laeuft-gerade { border-left-color: var(--gruen); }
#rd-notiz { margin: 0; white-space: pre-wrap; }
.etappe { padding: 8px 10px; border-radius: 8px; background: var(--grund); margin-bottom: 6px; }
.etappe-kopf { font-size: 14px; color: var(--text-leise); }
.etappe-weg { font-weight: 650; }
.etappe-zahlen { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.sterne { color: #c98a00; letter-spacing: 1px; font-weight: 400; }
.rd-fahrt { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.rd-fahrt input { width: 22px; height: 22px; }
.rd-fahrt.aus span { color: var(--text-leise); text-decoration: line-through; }
#rd-dialog .dlg, #re-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.re-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.re-felder label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.re-felder input { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
.re-laeuft { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; grid-column: 1 / -1; }
.re-laeuft input { width: 22px; height: 22px; }

/* ------------------------------------------------------------ v2.1: Fotos */
.fo-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.fo-vorschau { padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--linie); cursor: pointer; }
.fo-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-marker {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  background-size: cover; background-position: center; background-color: #ccc;
}
.foto-kn { margin-top: 6px !important; }
.sp-vorschau { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.fo-fortschritt {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 2000;
  padding: 10px 16px; border-radius: 10px; background: #1c1f22; color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
#fv-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #000; }
#fv-dialog::backdrop { background: #000; }
.fv { display: flex; flex-direction: column; height: 100%; color: #fff; }
.fv-bildrahmen { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
#fv-bild { max-width: 100%; max-height: 100%; object-fit: contain; }
.fv-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 8px;
  background: rgba(0,0,0,.35); color: #fff; font-size: 28px; cursor: pointer; }
#fv-zurueck { left: 8px; } #fv-vor { right: 8px; }
.fv-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px); background: #111; }
#fv-text { flex: 1 1 100%; font-size: 15px; }
#fv-zahl { color: #aaa; font-variant-numeric: tabular-nums; }
.fv-leiste .kn { background: #2a2e33; color: #fff; border-color: #444; }
.fv-leiste .kn.gefahr { color: #ff8a80; }
.pl-fotos { background: #455a64; color: #fff; border: 2px solid #fff; font-size: 12px; }

.es-eingabe input[data-schalter] { width: 26px; height: 26px; padding: 0; }

/* ------------------------------------------------------------ v2.2: Tage, Kosten, Tankbuch */
.etappe-weg.leise { color: var(--text-leise); font-weight: 600; }
.etappe-notiz { margin: 4px 0; white-space: pre-wrap; font-style: italic; }
.etappe-knoepfe { display: inline-flex; gap: 6px; }
.kb-eintrag { border-left-color: #455a64; }
.kb-diesel { border-left-color: #c0541f; }
.kb-abschnitt { padding: 6px 0; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
#ko-art button.an { background: var(--schild); border-color: var(--schild-dunkel); color: #fff; }
#ko-dialog select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
#ko-dialog .dlg, #nt-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
#nt-text { width: 100%; }

.lv-link { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--grund); font-family: ui-monospace, monospace;
           font-size: 14px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* ------------------------------------------------------------ v2.4: Merkliste */
.pl-icon.gemerkt { width: 28px; height: 28px; font-size: 14px; border: 3px solid #f2b300; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5); }
.ist-gemerkt { box-shadow: inset 0 0 0 2px #f2b300; }
.stern { color: #d99a00; }
.eintrag-notiz { grid-column: 1 / -1; font-style: italic; color: var(--text-leise); }
.gemerkt-kn { background: #fff4cc; border-color: #f2b300; }

/* ------------------------------------------------------------ v2.4: Statistik */
#st-jahre { margin: 4px 0 10px; }
#st-jahre button.an { background: var(--schild); border-color: var(--schild-dunkel); color: #fff; }
.st-rahmen { max-height: none; min-height: 0; }
.st-tabelle th { text-align: right; }
.st-tabelle tbody th { font-weight: 700; }
.st-tabelle .links, .st-tabelle th.links { text-align: left; white-space: normal; min-width: 120px; }
.st-tabelle tr.summe th, .st-tabelle tr.summe td { border-top: 2px solid var(--text); font-weight: 700; }
.st-tabelle .kn.klein { min-height: 28px; padding: 0 8px; }
.jahr-farbe { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin: 0 4px 2px 8px; vertical-align: middle; }
#fg-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.st-fotos-wahl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.st-fotos-wahl input { width: 22px; height: 22px; }

/* ------------------------------------------------------------ v2.5: Schnitt in der Statusleiste */
.st-werte .kurz { display: none; }
@media (max-width: 480px) {
  .st-werte .lang { display: none; }
  .st-werte .kurz { display: inline; }
  .st-werte dt { white-space: nowrap; }
  .st-werte { gap: 4px; }
  .st-werte dd { font-size: 15px; }
  .st-werte dt { font-size: 10px; }
}

/* ------------------------------------------------------------ v2.6: Verkehr */
.rl-verkehr { flex: none; padding: 4px 8px; border: 0; border-radius: 6px; font: 700 13px/1.2 var(--schrift);
              cursor: pointer; white-space: nowrap; }
.rl-verkehr.vk-gut { background: #e3f2e5; color: #1b5e20; }
.rl-verkehr.vk-mittel { background: #fff3cd; color: #7a5300; }
.rl-verkehr.vk-schlecht { background: #fde0e0; color: #b71c1c; }
.routen-leiste.eingeklappt .rl-verkehr { display: none; }
#um-verkehr { margin-bottom: 8px; }
.vk-zeile { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px;
            border: 1px solid var(--linie); border-left: 5px solid #6d4c41; border-radius: 8px; background: var(--flaeche);
            font: inherit; color: inherit; cursor: pointer; }
.vk-s1 { border-left-color: #f9a825; } .vk-s2 { border-left-color: #ef6c00; } .vk-s3 { border-left-color: #c62828; }
.vk-sx { border-left-color: #b71c1c; background: #fff5f5; }
.vk-km { flex: none; min-width: 72px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vk-plus { color: #c62828; font-weight: 700; }
.vk-marker { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; color: #fff; font: 800 15px/20px var(--schrift);
             text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

.rl-verkehr .kurz { display: none; }
@media (max-width: 480px) {
  .rl-verkehr .lang { display: none; }
  .rl-verkehr .kurz { display: inline; }
  .rl-verkehr { padding: 3px 6px; font-size: 12px; }
  .routen-leiste { max-width: calc(100% - 136px); }
  .routen-leiste .rl-kn { width: 30px; height: 30px; }
}

/* ------------------------------------------------------------ v2.7: WLAN, Sicherungsziel */
.wl-zeile { display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.wl-zeile.verbunden .wl-nr { background: var(--gruen); }
.wl-nr { width: 22px; height: 22px; border-radius: 11px; background: var(--schild); color: #fff; font: 700 12px/22px var(--schrift); text-align: center; }
.wl-knoepfe { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.marke.gruen { background: #e3f2e5; color: #1b5e20; }
.wl-netz { display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--linie);
           border-radius: 8px; background: var(--flaeche); font: inherit; color: inherit; cursor: pointer; }
.wl-netz:disabled { opacity: .5; cursor: default; }
#wl-treffer { max-height: 32dvh; overflow-y: auto; margin: 6px 0; }
#wl-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.sz-felder { display: grid; grid-template-columns: 2fr 1fr; gap: 8px 10px; margin: 8px 0; }
.sz-felder label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 14px; }
.sz-felder input, .sz-felder select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
.sz-felder .ganz { grid-column: 1 / -1; }
.sz-schalter { flex-direction: row !important; align-items: center; gap: 8px; }
.sz-schalter input { width: 22px; height: 22px; }
#sz-oeffentlich { margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: var(--grund); font: 12px/1.4 ui-monospace, monospace;
                  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.fehlertext { color: var(--rot); }

/* ------------------------------------------------------------ v2.8: Straßenlage Finnland */
.km-marker { width: 26px; height: 26px; border-radius: 6px; background: #37474f; border: 2px solid #fff;
             box-shadow: 0 1px 4px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
#km-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; width: min(960px, 100%); }
#km-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.km-bild { margin: 0; }
.km-bild img { width: 100%; height: auto; display: block; border-radius: 6px; background: var(--linie); aspect-ratio: 16 / 9; object-fit: cover; }
.km-bild figcaption { font-size: 14px; margin-top: 3px; }
#um-strasse { margin-bottom: 10px; }
.sl-warnung { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: #fff3cd; border-left: 5px solid #ef6c00; }
.sl-warnung.sehr { background: #fde0e0; border-left-color: #b71c1c; }
.sl-kameras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sl-kamera { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden;
             background: var(--flaeche); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sl-kamera img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--linie); display: block; }
.sl-text { padding: 6px 8px; font-size: 14px; }
#sl-alle, [data-alle] { margin-top: 8px; }
.km-fehlt { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 6px;
            background: var(--grund); color: var(--text-leise); font-size: 14px; }

/* ------------------------------------------------------------ v2.9: Fernzugang */
.vp-qr { display: block; width: min(320px, 80vw); height: auto; margin: 8px auto; background: #fff; padding: 8px; border-radius: 8px; }
.vp-befehle { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: #fff; font: 13px/1.5 ui-monospace, monospace; overflow-x: auto; }
.vp-ok { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: #e3f2e5; color: #1b5e20; }

/* ------------------------------------------------------------ v3.1: Zwischenziele */
.rt-ueber-feld { border-style: dashed; }
.rt-zeile .abstand { flex: 1; }
#rt-ueber-neu { align-self: flex-start; }
.rt-stopp { width: 24px; height: 24px; border-radius: 12px; background: #fff; border: 3px solid var(--schild);
            color: var(--schild); font: 800 12px/18px var(--schrift); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#rl-text { cursor: pointer; }
#et-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
#wt-etappe { width: 100%; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }

.rt-zeile .kurz { display: none; }
@media (max-width: 480px) {
  .rt-zeile .lang { display: none; }
  .rt-zeile .kurz { display: inline; }
}

/* ------------------------------------------------------------ v3.3: gespeicherte Routen */
.rt-namensfeld { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.rt-namensfeld input { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
#rs-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.rs-eintrag { border-left-color: var(--linie); }
.rs-aktiv { border-left-color: var(--gruen); background: #f3faf4; }

/* ------------------------------------------------------------ v3.4: Einstellungen schmal */
#seite-einstellungen .liste, #seite-einstellungen .kasten, #es-formular, #es-formular fieldset { min-width: 0; }
#seite-einstellungen .kennzahlen { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
#seite-einstellungen .kennzahlen dd { overflow-wrap: anywhere; }
.es-zeile { grid-template-columns: minmax(0, 1fr) auto; }
.sz-felder { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sz-felder input, .sz-felder select { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
  .sz-felder { grid-template-columns: minmax(0, 1fr); }
}
/* breiter Inhalt (z. B. Befehlszeilen) darf die Seite nicht verbreitern */
main { min-width: 0; width: 100%; }
main > section { min-width: 0; max-width: 100%; box-sizing: border-box; }
#fa-modus button, #um-modus button { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ v3.5: Routendetails */
#det-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.rd-strassen { border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.rd-strasse { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--linie); font-size: 15px; }
.rd-strasse:last-child { border-bottom: 0; }
.rd-strasse.faehre { background: #e8f1fb; font-weight: 600; }
.rd-name { overflow-wrap: anywhere; }
.rd-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 56px; }
.rd-hinweise summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.rd-schritt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; width: 100%; text-align: left; padding: 6px 4px;
              border: 0; border-bottom: 1px solid var(--linie); background: none; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.rd-km { font-variant-numeric: tabular-nums; color: var(--text-leise); }

/* ------------------------------------------------------------ v3.6: Routen-Übersicht */
.rs-sicht { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin: 2px 0 4px; cursor: pointer; }
.rs-sicht input { width: 20px; height: 20px; }
.ue-legende { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.25);
              padding: 4px; max-width: min(260px, 60vw); font-size: 13px; }
.ue-kopf { display: flex; gap: 4px; }
.ue-kopf button { flex: 1; border: 0; background: var(--grund); border-radius: 6px; padding: 5px 8px; font: inherit; font-weight: 700; cursor: pointer; color: inherit; }
.ue-zeile { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 5px 6px;
            font: inherit; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.ue-farbe { flex: none; width: 18px; height: 5px; border-radius: 3px; }
.ue-schild { display: inline-block; white-space: nowrap; background: #fff; border: 2px solid #888; border-radius: 6px; padding: 1px 6px;
             font: 700 12px/1.4 var(--schrift); box-shadow: 0 1px 3px rgba(0,0,0,.3); transform: translate(6px, -50%); }
.popup-knoepfe { display: flex; gap: 6px; margin-top: 6px; }
.det-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.det-nav .abstand { flex: 1; }
.popup-trenner { border: 0; border-top: 1px solid var(--linie); margin: 8px 0; }

/* ------------------------------------------------------------ v3.7: Listeneinträge schmal */
.eintrag { min-width: 0; }
.eintrag > * { min-width: 0; }
.eintrag-knoepfe { flex-wrap: wrap; }
.rs-sicht { flex-direction: row !important; justify-content: flex-start !important; justify-self: start; text-align: left; }

/* ------------------------------------------------------------ v3.8: Legende */
.ue-name { flex: 1; min-width: 0; }
.ue-aktuell { color: var(--text-leise); white-space: nowrap; font-weight: 600; }

/* ------------------------------------------------------------ v3.9: Routenliste einspaltig */
.rs-eintrag { grid-template-columns: minmax(0, 1fr); }
.rs-eintrag .eintrag-knoepfe { grid-row: auto; grid-column: 1; margin-top: 6px; }

/* ------------------------------------------------------------ v4.0: Pläne */
.plan { margin-bottom: 12px; }
.plan-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px;
             border: 1px solid var(--linie); border-left: 6px solid var(--schild); border-radius: 8px; background: var(--grund); }
.plan-kopf .rs-sicht, .plan-kopf .eintrag-knoepfe { grid-column: 2; }
.plan-kopf .eintrag-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; grid-row: auto; }
.plan-kopf .plan-auf { grid-column: 1; grid-row: 1; }
.plan-kopf .plan-text { grid-column: 2; grid-row: 1; }
.plan-kopf .rs-sicht { justify-self: start; }
.plan-auf { border: 0; background: none; font-size: 18px; line-height: 1; padding: 2px 4px; cursor: pointer; color: inherit; }
.plan-text { min-width: 0; overflow-wrap: anywhere; }
.plan-routen { margin: 6px 0 0 18px; }
.plan-ohne { margin-top: 14px; }
.pw-plan { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--linie);
           border-left: 6px solid var(--linie); border-radius: 8px; background: var(--flaeche); font: inherit; color: inherit; cursor: pointer; }
#vg-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.vg-rahmen { max-height: none; }
.vg-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.vg-tabelle th, .vg-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.vg-tabelle thead th { font-size: 15px; }
.vg-tabelle tbody th { color: var(--text-leise); font-weight: 600; white-space: nowrap; }
.vg-besser { color: #1b5e20; font-weight: 700; white-space: nowrap; }
.vg-mehr { color: #b71c1c; font-weight: 700; white-space: nowrap; }
.vg-gleich { color: var(--text-leise); }
.vg-routen { margin: 0; padding-left: 18px; }
.vg-routen li { margin-bottom: 4px; }
.ue-plan { font-size: 11px; font-weight: 700; color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em; padding: 6px 6px 0; }
.pw-gefahr { border-left-color: var(--rot); }
.pw-gefahr b { color: var(--rot); }

/* ------------------------------------------------------------ v4.1: Linienart, Vergleich */
.ue-muster { vertical-align: middle; margin-right: 6px; color: var(--text); }
.ue-plan { display: flex; align-items: center; }
.vg-tabelle thead .ue-muster { margin: 0 0 2px; }
.vg-beste { color: #1b5e20; font-weight: 700; background: #e3f2e5; }
.vg-rahmen { overflow-x: auto; }
.vg-tabelle { min-width: 520px; }
.pw-wahl { display: flex; gap: 10px; align-items: flex-start; }
.pw-wahl input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
#pw-vergleichen { margin-top: 6px; }

/* ------------------------------------------------------------ v4.2 */
.rs-hinweis { font-size: 14px; color: #7a5300; background: #fff3cd; border-radius: 6px; padding: 6px 8px; margin: 4px 0; }
.rs-hinweis .kn { margin-left: 6px; }
.ue-schild.ue-verdeckt { visibility: hidden; }

/* ------------------------------------------------------------ v4.3: Übernachtung */
.etappe-platz { margin-top: 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ueb-zeichen { color: #2e7d32; font-weight: 800; }
.link-knopf { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--schild); text-decoration: underline; cursor: pointer; }
.ueb-marker { display: flex; align-items: center; justify-content: center; gap: 2px; width: 34px; height: 24px; border-radius: 12px; background: #2e7d32;
              color: #fff; font: 700 12px/1 var(--schrift); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
#ub-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
.ub-kopf { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ub-kopf input { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
.ub-kopf select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: 16px; }
#ub-liste { max-height: 46dvh; overflow-y: auto; }
.ub-platz { display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--linie); border-radius: 8px;
            background: var(--flaeche); font: inherit; color: inherit; cursor: pointer; }
#ub-wahl { margin-top: 8px; padding: 10px; border-radius: 8px; background: #e3f2e5; }
#ub-wahl .dlg-knoepfe { margin-top: 6px; }

/* ------------------------------------------------------------ v4.4: Legende begrenzt */
.ue-legende { max-height: 45vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ue-kopf { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }

/* ------------------------------------------------------------ v4.5 */
#ub-karte { flex: none; height: 42vh; min-height: 220px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--linie); }
#ub-filter { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund);
             font-size: 16px; margin: 8px 0 6px; }
#ub-liste { max-height: 26vh; flex: none; }
#ub-dialog .dlg > * { flex-shrink: 0; }
.ub-platz.gewaehlt { border-color: #2e7d32; background: #e3f2e5; }
.ub-kopf { align-items: center; justify-content: space-between; }
.ub-kopf .es-hilfe { flex: 1; min-width: 200px; }
/* Legende: Kopf liegt beim Scrollen ganz oben ohne Spalt, Titel in einer Zeile */
.ue-legende { padding: 0 4px 4px; }
.ue-kopf { top: -1px; padding: 5px 0 4px; margin: 0; box-shadow: 0 -4px 0 var(--flaeche), 0 2px 0 var(--flaeche); }
.ue-kopf button { white-space: nowrap; }

/* ------------------------------------------------------------ v4.6: Pläne als Zeilen */
.plan-zeile { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none;
              padding: 2px 0; font: inherit; color: inherit; cursor: pointer; }
.plan-pfeil { flex: none; width: 18px; font-size: 16px; line-height: 1.4; color: var(--text-leise); }
.plan-zeile .plan-text { flex: 1; min-width: 0; }
.plan-kopf { grid-template-columns: minmax(0, 1fr); }
.plan-kopf .rs-sicht, .plan-kopf .eintrag-knoepfe { grid-column: 1; margin-left: 28px; }
.plan:not(.offen) .plan-kopf { padding-top: 8px; padding-bottom: 8px; }
.plan.offen > .plan-kopf { border-left-color: var(--schild); }
.ue-zeile { touch-action: manipulation; }   /* kein Doppeltipp-Zoom des Browsers auf der Legende */

/* ---------- Einstellungen: Über (v4.7) ---------- */
.es-hilfe.ueber-hinweis { margin-top: 10px; }
.ueber-quellen { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-leise); }
.ueber-quellen li { padding: 5px 0; border-top: 1px solid var(--linie); overflow-wrap: anywhere; }
.ueber-quellen b { color: var(--text); font-weight: 600; }
.ueber-quellen a { color: inherit; }

/* ---------- Karte: Kompass (v4.8) ---------- */
.kompass { width: 60px; padding: 2px 0 3px; background: #fff; text-align: center; cursor: default; }
.kp-rose { position: relative; width: 56px; height: 56px; margin: 0 auto; }
.kp-rose svg { position: absolute; left: 0; top: 0; display: block; }
.kp-kurs { transform-origin: 50% 50%; transition: transform .6s ease, opacity .3s; }
.kompass.alt .kp-kurs { opacity: .35; }
.kompass.ohne .kp-kurs { display: none; }
.kp-text { font-size: 12px; font-weight: 700; line-height: 1.2; color: #1c1f22; white-space: nowrap; }
.kompass.alt .kp-text { color: #7a838b; }
@media (max-height: 520px) { .kompass { display: none; } }

/* ---------- Etappen: Kalender (v4.9) ---------- */
.et-kalender { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.et-kalender label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.et-kalender input[type="date"] { min-height: 38px; padding: 0 8px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--flaeche); color: var(--text); font: inherit; max-width: 100%; }
.et-kalender .es-hilfe { flex: 1 1 220px; margin: 0; }
.etappe-naechte { margin-top: 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.etappe-naechte .kn.klein { min-width: 38px; }
.et-wetter { white-space: nowrap; }

/* ---------- Reisen: Stellplatz unter der Fahrt (v5.0) ---------- */
.eintrag.fa-platz { margin-left: 22px; margin-top: -4px; }

/* ---------- Reise abspielen (v5.1) ---------- */
/* Aufnahmemodus: nur Karte, Film und die Quellenangabe der Karte bleiben sichtbar */
body.ab-laeuft { grid-template-rows: 1fr; background: #000; }
body.ab-laeuft #statusleiste, body.ab-laeuft #reiter { display: none; }
body.ab-laeuft #seite-karte > .pl-schalter, body.ab-laeuft #seite-karte > .radar-leiste,
body.ab-laeuft #seite-karte > .routen-leiste, body.ab-laeuft #seite-karte > .karten-knoepfe,
body.ab-laeuft #seite-karte > .karten-hinweis { display: none !important; }
body.ab-laeuft #karte { background: #14171a; }
/* alles, was sonst auf der Karte liegt (Grundkarte, Routen, Reisen, Plätze, Standort), ist aus;
   der Film zeichnet in eigenen Ebenen (abGrund, abLinie, abSchild) */
body.ab-laeuft #karte .leaflet-tile-pane, body.ab-laeuft #karte .leaflet-overlay-pane,
body.ab-laeuft #karte .leaflet-shadow-pane, body.ab-laeuft #karte .leaflet-marker-pane,
body.ab-laeuft #karte .leaflet-tooltip-pane, body.ab-laeuft #karte .leaflet-popup-pane { display: none; }
body.ab-laeuft #karte .leaflet-control:not(.leaflet-control-attribution) { display: none !important; }
body.ab-laeuft #karte .leaflet-control-attribution { background: rgba(20, 23, 26, .55); color: #cfd5da; font-size: 10px; }
body.ab-laeuft #karte .leaflet-control-attribution a { color: #cfd5da; }
/* Online-Karte (keine oder unvollständige Offline-Karte) abdunkeln, damit die weiße Linie steht:
   halb durchscheinend über dem dunklen Kartengrund (ein Filter greift in Safari hier nicht verlässlich) */
body.ab-osm #karte .leaflet-abGrund-pane .osm-kacheln { opacity: .58 !important; filter: none; }

#ab-buehne { position: absolute; inset: 0; z-index: 1100; overflow: hidden; color: #fff; cursor: default;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#ab-buehne[hidden] { display: none; }
#ab-feld { position: absolute; inset: 0; }
/* Hochformat 9:16: Karte und Feld hochkant in der Mitte, der Rest bleibt schwarz */
body.ab-hoch #karte, body.ab-hoch #ab-feld {
  --ab-b: min(100vw, calc(100dvh * 9 / 16)); --ab-h: min(100dvh, calc(100vw * 16 / 9));
  inset: auto; width: var(--ab-b); height: var(--ab-h);
  left: calc((100% - var(--ab-b)) / 2); top: calc((100% - var(--ab-h)) / 2); }
body.ab-hoch #seite-karte { background: #000; }
/* Satellitenbild etwas abdunkeln (halb durchscheinend über dem dunklen Kartengrund) */
body.ab-laeuft #karte .leaflet-abGrund-pane .ab-satbild { opacity: .82 !important; }
.ab-warten { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px;
  border-radius: 22px; background: rgba(20, 23, 26, .85); font-weight: 600; white-space: nowrap; }
.ab-karte { position: absolute; left: 50%; transform: translateX(-50%); box-sizing: border-box;
  width: max-content; max-width: min(560px, calc(100% - 32px)); padding: 18px 26px; border-radius: 16px;
  background: rgba(20, 23, 26, .84); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); text-align: center;
  transition: opacity .5s; animation: ab-ein .6s ease-out backwards; }
.ab-karte[hidden] { display: none; }
.ab-karte.weg { opacity: 0; }
.ab-titel { top: 34%; transform: translate(-50%, -50%); }
.ab-abspann { bottom: calc(env(safe-area-inset-bottom) + 44px); }
body.ab-hoch .ab-abspann { bottom: 44px; }
body.ab-hoch .ab-balken { top: 14px; }
.ab-k-name { font-size: clamp(22px, 5vw, 36px); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ab-k-zeit { margin-top: 6px; font-size: 16px; opacity: .85; }
.ab-k-zeit:empty, .ab-k-flaggen:empty { display: none; }
.ab-k-zahlen { margin-top: 12px; font-size: clamp(17px, 3.6vw, 22px); font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-k-flaggen { margin-top: 8px; font-size: 26px; letter-spacing: 2px; }
.ab-k-fuss { margin-top: 14px; font-size: 12px; opacity: .7; }
@keyframes ab-ein { from { opacity: 0; } to { opacity: 1; } }

.ab-balken { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 14px); transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(20, 23, 26, .9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.ab-balken[hidden] { display: none; }
.ab-balken button { min-height: 42px; min-width: 84px; padding: 0 14px; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; cursor: pointer; }
.ab-balken button:active { background: rgba(255, 255, 255, .3); }

/* Schild am Übernachtungsplatz: weißes Feld mit Spitze nach unten, darunter der Ortspunkt */
.ab-marke { overflow: visible; }
.ab-schild { position: absolute; left: 0; bottom: 12px; transform: translateX(-50%); transform-origin: 50% 100%;
  padding: 6px 11px; border-radius: 10px; background: #fff; color: #1c1f22; font-size: 15px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); animation: ab-auf .35s ease-out both; }
.ab-schild::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.ab-schild small { margin-left: 7px; font-size: 12px; font-weight: 600; color: #5d666e; }
.ab-flagge { margin-right: 6px; }
.ab-ort { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 2px solid #0b0d0f; }
/* ältere Schilder treten zurück; in der Schlussübersicht bleiben nur die Ortspunkte */
.ab-marke.alt .ab-schild { font-size: 12px; padding: 4px 8px; opacity: .88; }
.ab-marke.alt .ab-schild small { display: none; }
#karte.ab-ende .ab-schild { display: none; }
@keyframes ab-auf {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.7); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Fotos im Film: runde Bilder mit weißem Rand. Unterwegs mittig auf dem Aufnahmeort, Platzfotos
   in einer Reihe unter dem Übernachtungsplatz (--i = Platz in der Reihe, 0 = Mitte) */
.ab-foto { --g: clamp(58px, 8vmin, 86px); position: absolute; left: calc(var(--g) / -2); top: calc(var(--g) / -2);
  width: var(--g); height: var(--g); box-sizing: border-box; border-radius: 50%; border: 3px solid #fff;
  overflow: hidden; background: #2a2f34; box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
  animation: ab-bild .45s cubic-bezier(.2, 1.5, .4, 1) backwards; transition: transform .5s, opacity .5s; }
.ab-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-foto.platz { left: calc(var(--i) * (var(--g) + 6px) - var(--g) / 2); top: 14px; transform-origin: 50% 0; }
/* Bilder früherer Tage werden kleiner, in der Schlussübersicht noch kleiner */
.ab-marke.alt .ab-foto { transform: scale(.6); }
#karte.ab-ende .ab-foto { transform: scale(.46); }
#karte.ab-ende .ab-foto.platz { top: 8px; }
@keyframes ab-bild { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------------------ v5.3: Satellitenbild auf der Karte */
.sat-kn { margin-top: 6px !important; }
.sat-kn.an { background: var(--schild); color: #fff; }
.sat-kn.an:active { background: var(--schild); opacity: .85; }
/* Strecken und Routen heben sich auf dem Luftbild sonst kaum ab (nicht im Reisefilm) */
body.sat-an:not(.ab-laeuft) #karte .leaflet-overlay-pane svg {
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}
/* Probebild wird geladen */
.sat-kn.prueft { opacity: .55; }
/* fehlende Bilder bleiben dunkel, damit die helle Schrift lesbar ist */
body.sat-an:not(.ab-laeuft) #karte { background: #1c2126; }
.sat-meldung { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; font-weight: 500; }

/* ------------------------------------------------------------ v5.4: Tagesnotiz in der Liste „Reisen“ */
.tag-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tag-kopf .tag { flex: 1; min-width: 0; }
.tag-kopf .kn { margin-bottom: 6px; flex: none; }
.tag-notiz { margin: -2px 0 8px; padding: 8px 12px; border-left: 3px solid var(--gelb); border-radius: 0 8px 8px 0;
  background: var(--flaeche); color: var(--text); font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.heute-notiz { display: block; width: 100%; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--linie);
  border-left: 4px solid var(--gelb); border-radius: 10px; background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 15px; text-align: left; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.heute-notiz b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--text-leise); }
.reise-knoepfe { flex-wrap: wrap; }

/* ------------------------------------------------------------ v5.4: Zwischenhalte */
:root { --halt: #0f766e; }
.eintrag.halt { border-left-color: var(--halt); }
.ha-schild { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--halt); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); color: #fff;
  font: 700 13px/1 var(--schrift); }
.ha-zeiten, .ha-kosten { display: grid; gap: 10px; }
.ha-zeiten { grid-template-columns: 1fr 1fr; }
.ha-kosten { grid-template-columns: 1fr auto auto; align-items: end; }
.ha-zeiten label, .ha-kosten label { min-width: 0; }
.ha-zeiten input, .ha-kosten input { width: 100%; min-width: 0; box-sizing: border-box; }
/* Datumsfelder sind in Safari sonst breiter als ihre Spalte */
.ha-zeiten input { -webkit-appearance: none; appearance: none; min-height: 46px; }
.ha-kosten select { min-height: 46px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--grund); color: var(--text); font: inherit; font-size: 16px; }
#ha-bis-hilfe { margin: -8px 0 0; }
#ha-bis-hilfe:empty { display: none; }
@media (max-width: 480px) {
  .ha-zeiten { grid-template-columns: 1fr; }
  .ha-kosten { grid-template-columns: 1fr 1fr; }
  .ha-kosten label:first-child { grid-column: 1 / -1; }
}
/* Reisefilm: kleiner als die Schilder der Übernachtungsplätze */
.ab-schild.halt { bottom: 10px; padding: 4px 9px; border-radius: 8px; background: #e6f4f1; font-size: 12.5px; font-weight: 650; }
.ab-schild.halt::after { bottom: -6px; margin-left: -6px; border-width: 6px; border-bottom: 0; border-top-color: #e6f4f1; }
.ab-ort.halt { left: -4px; top: -4px; width: 8px; height: 8px; background: #5eead4; }

/* ------------------------------------------------------------ v6.3: Notizen */
:root { --ortsnotiz: #7c3aed; }
.tag-notiz.nach-fahrt { margin: -4px 0 8px 22px; }
.eintrag.ortsnotiz { border-left-color: var(--ortsnotiz); }
.eintrag.ortsnotiz .eintrag-notiz { font-style: normal; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.on-schild { background: var(--ortsnotiz); }
#on-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; }
.fn-liste { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; margin: 8px 0; }
.dlg label.fn-zeile { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 400; }
.fn-zeile > span { display: block; min-width: 0; }
.fn-zeile img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--linie); }
.fn-zeile small { display: block; color: var(--text-leise); font-size: 13px; margin-bottom: 4px; }
.dlg .fn-zeile textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; }

/* ------------------------------------------------------------ v6.5: Demo-Modus */
.demo-marke { flex: none; margin-left: auto; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--gelb);
  color: #1c1f22; font: 700 13px/1.4 var(--schrift); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.demo-liste { margin: 8px 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.demo-liste li { margin-bottom: 6px; }
.demo-hinweis { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: #fff3cd; border-left: 5px solid var(--gelb);
  font-size: 14px; color: #3b3200; }
#demo-dialog .dlg-knoepfe a.kn { text-decoration: none; }
body.demo .demo-weg { display: none !important; }

/* ------------------------------------------------------------ v6.6: Demofahrt */
.demo-leiste {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 510;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 6px 6px 6px 14px; border-radius: 10px; border-left: 5px solid var(--gelb);
  background: var(--asphalt); color: #f1f3f4; font-weight: 600; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.demo-leiste #dl-text { min-width: 0; }
.karten-hinweis:not([hidden]) ~ .demo-leiste { top: 120px; }
@keyframes demo-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 179, 0, .9); } 50% { box-shadow: 0 0 0 9px rgba(242, 179, 0, 0); } }
.kn.demo-puls { animation: demo-puls 1.6s ease-in-out infinite; outline: 3px solid var(--gelb); outline-offset: 1px; }
#demo-fahrt-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
#demo-dialog .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-width: 600px) {
  .demo-leiste { top: 58px; left: 56px; right: 12px; transform: none; max-width: none; font-size: 13px; gap: 6px; padding-left: 10px; }
  .demo-leiste #dl-text { flex: 1; }
  .karten-hinweis:not([hidden]) ~ .demo-leiste { top: 116px; }
}

/* ------------------------------------------------------------ v6.7: Straßenlage Schweden */
.ml-marker { display: inline-flex; align-items: flex-end; justify-content: center; flex: none; width: 22px; height: 20px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #f2b300; color: #1c1f22; font: 800 12px/1 var(--schrift);
  padding-bottom: 2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.ml-baustelle { background: #ef6c00; color: #fff; }
.ml-gesperrt, .ml-unfall { background: #d32f2f; color: #fff; }
.ml-popup { font-size: 14px; line-height: 1.4; }
.ml-popup > div { margin-top: 3px; }
.ml-sv { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--linie); font-style: italic; white-space: pre-line; }
.ml-quelle { font-size: 11px; }
.sl-meldungen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sl-meldung { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sl-meldung .ml-marker { margin-top: 4px; }
.sl-meldung .sl-text { padding: 0; }