/* ============================================================================
   Paddle Web — Tourenplaner
   Layout nach Design-System (Design/ui_kits/paddle-web): karten-zentriert mit
   rechtem Panel. Farben/Radien/Abstände kommen aus ds/ (Tokens) — keine eigenen
   Werte. Dark ist der bevorzugte „Water Look".
   Substitution: die DS-Komponenten sind React; hier sind sie als CSS auf denselben
   Tokens nachgebaut (keine React-Abhängigkeit für eine Ein-Screen-App).
   ============================================================================ */

* { box-sizing: border-box; }

/* `hidden` muss gewinnen — .login/main setzen display und wuerden es sonst
   ueberschreiben (hoehere Spezifitaet als das UA-[hidden]). */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--sp-9);
  height: 56px; padding: 0 var(--sp-7);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0; z-index: 500;
}
.brand { font-weight: var(--w-semibold); letter-spacing: 0.01em; }
.tabs { display: flex; gap: var(--sp-2); }
.tab {
  background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: var(--fs-subhead);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
}
.tab.is-active { color: var(--accent-contrast); background: var(--accent); }
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.spacer { flex: 1; }

/* ── Layout ─────────────────────────────────────────────────────────── */
main { display: flex; height: calc(100vh - 56px); }
#map { flex: 1; background: var(--surface-sunken); }   /* liegt in #map-wrap */
.panel {
  width: 360px; flex: 0 0 360px; overflow-y: auto;
  padding: var(--sp-7);
  background: var(--surface-card);
  border-left: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

/* ── Panel-Inhalte ──────────────────────────────────────────────────── */
/* Gewitterlage. Drei Stufen, damit „hoch" auch wirklich heraussticht — und die
   Herkunft der Einschätzung steht dabei, weil es Potenzial ist und keine Blitzortung. */
.storm-warn {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); margin: var(--sp-3) 0;
  border-radius: var(--r-md, 12px);
  font-size: var(--fs-caption);
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  border: 1px solid transparent;
}
.storm-warn.is-niedrig { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); }
.storm-warn.is-mittel {
  background: color-mix(in srgb, var(--sem-stroke) 18%, transparent);
  border-color: color-mix(in srgb, var(--sem-stroke) 40%, transparent);
}
.storm-warn.is-hoch {
  background: color-mix(in srgb, var(--sem-energy) 22%, transparent);
  border-color: color-mix(in srgb, var(--sem-energy) 55%, transparent);
}
.storm-warn.is-hoch strong { color: var(--sem-energy); }
.sw-icon { font-size: 1.3em; line-height: 1.1; }
.sw-advice { margin-top: var(--sp-2); }
.sw-basis { margin-top: var(--sp-2); color: var(--text-tertiary); font-size: 0.92em; }

/* Sperrzonen-Warnung. Erscheint nur bei einem echten Treffer — deshalb darf sie
   deutlich sein, ohne zur Tapete zu werden. */
.zone-warn {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); margin: var(--sp-4) 0;
  border-radius: var(--r-md, 12px);
  background: color-mix(in srgb, var(--sem-energy) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--sem-energy) 45%, transparent);
  color: var(--text-primary); font-size: var(--fs-caption);
}
.zw-icon { font-size: 1.2em; line-height: 1.2; }
.zone-warn strong { color: var(--sem-energy); }
.zw-list { margin-top: var(--sp-2); color: var(--text-primary); }
.zw-hint { margin-top: var(--sp-2); color: var(--text-secondary); }

/* Zeitpunkt der Tour + Wetterlage. Man fährt selten sofort los — und was man
   anzieht, entscheidet die Wetterlage, nicht der Wind allein. */
.when-row { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-3) 0; }
.when-row .btn.is-active {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 18%, transparent);
}
.when-input {
  flex: 1; min-width: 0;
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-caption);
  color-scheme: dark;                       /* damit der native Picker dunkel bleibt */
}
.when-input:focus { outline: none; border-color: var(--accent); }

.weather-now {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  border-radius: var(--r-md, 12px);
  background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
  font-size: var(--fs-caption);
}
.weather-now.is-wet    { background: color-mix(in srgb, var(--sem-stroke) 16%, transparent); }
.weather-now.is-danger {
  background: color-mix(in srgb, var(--sem-energy) 22%, transparent);
  color: var(--sem-energy); font-weight: var(--w-semibold);
}
.weather-icon { font-size: 1.4em; line-height: 1; }
.weather-text { color: inherit; }

/* Einklappbare Listen (Wegpunkte, Wind-Abschnitte): zugeklappt zeigt die Kopfzeile
   die Zusammenfassung, aufgeklappt die Details. Nativ per <details>, kein JS. */
.fold > summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-3) 0;
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
  color: var(--text-secondary);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸ "; color: var(--text-tertiary); }
.fold[open] > summary::before { content: "▾ "; }
.fold > summary:hover { color: var(--text-primary); }

/* Wind-Zusammenfassung: die drei Zahlen, die man wirklich liest. */
.wind-summary { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.ws-part {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
/* Dieselben Farben wie in der Abschnittsliste unten (.wl-label.is-*) — dieselbe
   Sache darf nicht zweimal verschieden aussehen. */
.ws-part.is-tail  { color: var(--sem-elevation); }
.ws-part.is-cross { color: var(--text-secondary); }
.ws-part.is-head  { color: var(--sem-stroke); }
.ws-km { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.ws-label { color: inherit; opacity: 0.85; }
.ws-pct { opacity: 0.6; font-variant-numeric: tabular-nums; }

.head-actions { display: inline-flex; gap: var(--sp-2); align-items: center; }
.head-actions .btn[disabled] { opacity: 0.35; cursor: default; }

.field-label {
  display: block; font-size: var(--fs-caption); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.route-name {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border-hairline);
  color: var(--text-primary); font: inherit; font-size: var(--fs-title3); font-weight: var(--w-semibold);
  padding: var(--sp-2) 0 var(--sp-4);
}
.route-name:focus { outline: none; border-color: var(--accent); }

/* Gewässerwahl ganz oben: sie steuert Zonen, Ein-/Ausstiege und Vorschläge.
   Der Status daneben sagt, was daraus wurde — „91 Ein-/Ausstiege", „keine
   Einstiege bekannt" oder die Fehlermeldung des Servers. Ohne ihn tippt man
   einen unbekannten See ein und nichts passiert sichtbar. */
.water-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.water-row .route-name { flex: 1 1 auto; }
.water-status {
  flex: 0 0 auto; font-size: var(--fs-caption); color: var(--text-tertiary);
  white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.suggest-for {
  margin: 0; font-size: var(--fs-caption); color: var(--text-tertiary);
}
.suggest-for strong { color: var(--text-secondary); font-weight: var(--w-semibold); }

.chips { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
}
.chip-accent  { color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 16%, transparent); }
.chip-neutral { color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 16%, transparent); }
.chip input {
  width: 44px; background: transparent; border: 0; color: inherit;
  font: inherit; font-family: var(--font-rounded); text-align: right;
}
.chip input:focus { outline: none; }

.metrics { display: flex; gap: var(--sp-5); }
.metric { flex: 1; }
.metric-cap {
  font-size: var(--fs-caption2); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary);
}
.metric-val {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--font-rounded); font-weight: var(--w-semibold);
  font-size: var(--fs-metric); font-variant-numeric: tabular-nums; line-height: var(--lh-tight);
}
.metric-val.is-accent { color: var(--accent-strong); }
.metric-val .unit {
  font-family: var(--font-text); font-size: var(--fs-subhead);
  font-weight: var(--w-medium); color: var(--text-secondary);
}

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary);
  margin-top: var(--sp-2);
}

.waypoints, .routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.waypoints li, .routes li {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-footnote); color: var(--text-secondary); cursor: pointer;
}
.waypoints li:hover, .routes li:hover { background: var(--surface-elevated); }
.waypoints li.is-selected { background: var(--surface-elevated); color: var(--text-primary); }
.wp-index {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-rounded); font-size: 11px; font-weight: var(--w-semibold);
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-strong);
}
.wp-index.is-start { background: color-mix(in srgb, var(--marker-start) 22%, transparent); color: var(--marker-start); }
.wp-index.is-end   { background: color-mix(in srgb, var(--marker-finish) 22%, transparent); color: var(--marker-finish); }
.wp-coords { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; }
.routes li .r-name { flex: 1; color: var(--text-primary); }
.routes li .r-dist { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; }
.routes li .r-del { color: var(--text-tertiary); background: none; border: 0; cursor: pointer; font-size: 14px; }
.routes li .r-del:hover { color: var(--sem-energy); }

.hint { font-size: var(--fs-footnote); color: var(--text-tertiary); margin: 0; line-height: var(--lh-body); }
.status { font-size: var(--fs-footnote); color: var(--accent-strong); margin: 0; min-height: 1.2em; }

/* ── Buttons (Pill, ≥44px, Press-Scale 0.97) ────────────────────────── */
.actions { display: flex; flex-direction: column; gap: var(--sp-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: var(--tap-min); padding: 0 var(--sp-8);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: var(--fs-headline); font-weight: var(--w-semibold);
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(0.97); filter: brightness(1.06); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary   { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-btn); }
.btn-secondary { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }
.btn-ghost     { background: transparent; color: var(--accent-strong); box-shadow: none; }
.btn-sm        { min-height: 30px; padding: 0 var(--sp-5); font-size: var(--fs-caption); }

/* ── Login ──────────────────────────────────────────────────────────── */
/* z-index über Leaflets Control-Ecken (.leaflet-top/.leaflet-bottom = 1000),
   sonst stanzen Zoom-Buttons und Attribution durch das Overlay. */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg-base); z-index: 1200; }
.login-card {
  text-align: center; padding: var(--sp-10); border-radius: var(--r-xl);
  background: var(--surface-card); box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: var(--sp-5); align-items: center;
}
.brand-big { font-size: var(--fs-title); font-weight: var(--w-bold); }
.login-sub { color: var(--text-secondary); margin: 0; }
.login-note { color: var(--sem-energy); font-size: var(--fs-footnote); margin: 0; min-height: 1.2em; }

/* ── Leaflet-Anpassung (Karte ruhig, Route in Aqua mit Glow) ────────── */
.leaflet-container { background: var(--surface-sunken); font-family: var(--font-text); }
.leaflet-control-attribution { background: var(--glass-fill) !important; color: var(--text-tertiary) !important; }
.leaflet-control-attribution a { color: var(--text-secondary) !important; }
.wp-marker {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--water-surf); border: 3px solid #fff; box-shadow: var(--shadow-card);
}
.wp-marker.is-start { background: var(--marker-start); }
.wp-marker.is-end   { background: var(--marker-finish); }

/* ── Ein-/Ausstiege ───────────────────────────────────────────────────────
   Rauten, keine Kreise: die Wegpunkte sind rund, und auf 12 px trennt die Form
   zuverlässiger als der Farbton — auch für Augen, die Rot und Grün nicht
   auseinanderhalten. Kleiner als ein Wegpunkt, weil sie Angebot sind und nicht
   Teil der Route. Die drei Farben sind hier lokal definiert: sie beschreiben
   OSM-Macharten und haben in DesignSystem.swift keine Entsprechung. */
.ap-marker, .ap-dot {
  --ap-slipway: #0b96ab;   /* zum Einsetzen gebaut — die erste Wahl */
  --ap-beach:   #e0a92e;   /* Sand: geht fast immer, wenn man hinkommt */
  --ap-rental:  #8a97a0;   /* Verleih: man kommt ans Wasser, mehr nicht */
  display: inline-block; transform: rotate(45deg);
}
.ap-marker {
  width: 12px; height: 12px; border-radius: 2px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: pointer; transition: transform 0.12s ease;
}
.ap-marker:hover { transform: rotate(45deg) scale(1.35); }
.ap-marker.is-slipway,     .ap-dot.is-slipway     { background: var(--ap-slipway); }
.ap-marker.is-beach,       .ap-dot.is-beach       { background: var(--ap-beach); }
.ap-marker.is-boat_rental, .ap-dot.is-boat_rental { background: var(--ap-rental); }

.map-access-legend {
  position: absolute; bottom: var(--sp-4); left: var(--sp-4); z-index: 500;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  max-width: calc(100% - 2 * var(--sp-4));
  padding: 6px var(--sp-3); border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-footnote); color: var(--text-secondary);
}
.ma-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ma-toggle input { accent-color: var(--accent); cursor: pointer; }
.ma-key { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); }
.ap-dot { width: 9px; height: 9px; border-radius: 1px; }
.ma-note { color: var(--text-tertiary); font-style: italic; }

/* ── Wind auf der Route (M4) ─────────────────────────────────────────── */
.wind-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-elevated);
}

.wind-meta { text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }

.wind-now { display: flex; align-items: center; gap: var(--sp-4); }

.wind-dial {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  display: grid; place-items: center;
}
.wind-n {
  position: absolute; top: 1px; font-size: 8px; font-weight: var(--w-bold);
  color: var(--text-tertiary);
}
/* Der Pfeil zeigt, wohin der Wind blaest — die Rotation setzt das JS. */
.wind-arrow { font-size: 20px; line-height: 1; color: var(--accent-strong); }

.wind-sub { font-size: var(--fs-caption); color: var(--text-secondary); }

.wind-suggestion {
  margin: 0; font-size: var(--fs-caption); line-height: var(--lh-body);
}
.wind-suggestion.is-ok   { color: var(--sem-elevation); }
.wind-suggestion.is-warn { color: var(--sem-stroke); }

.wind-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.wind-legs li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-footnote);
}
.wl-index { color: var(--text-tertiary); width: 14px; flex: 0 0 auto; }
.wl-label { flex: 1 1 auto; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-value { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.wl-dist  { color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 52px; text-align: right; flex: 0 0 auto; }
.wl-value.is-head, .wl-label.is-head { color: var(--sem-stroke); }
.wl-value.is-tail, .wl-label.is-tail { color: var(--sem-elevation); }
.wl-value.is-cross { color: var(--text-secondary); }

/* Windfahne als feste Legende in der Kartenecke */
#map-wrap { position: relative; flex: 1; display: flex; }
.map-wind-legend {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 500;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3) 6px 6px; border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.mw-n {
  position: absolute; left: 17px; top: 3px; font-size: 7px;
  font-weight: var(--w-bold); color: var(--text-tertiary);
}
.mw-arrow {
  width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 15px; line-height: 1; color: var(--accent-strong);
}
.mw-text {
  font-size: var(--fs-footnote); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Tourenvorschläge (M3c) ──────────────────────────────────────────── */
.suggest {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--surface-elevated); overflow: hidden;
  /* Das Panel ist ein Flex-Container: ohne flex-shrink:0 staucht es die Box
     zusammen, und `overflow:hidden` schneidet die hinteren Vorschlaege weg. */
  flex: 0 0 auto;
}
.suggest > summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-subhead); font-weight: var(--w-semibold);
  color: var(--accent-strong);
}
.suggest > summary::-webkit-details-marker { display: none; }
.suggest > summary::after { content: " ▾"; color: var(--text-tertiary); }
.suggest[open] > summary::after { content: " ▴"; }

.suggest-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.field > span {
  font-size: var(--fs-caption); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.field input, .field select {
  background: var(--surface-sunken); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--r-sm, 8px);
  padding: 8px 10px; font: inherit; font-size: var(--fs-subhead);
  min-height: 38px;
}
.field-row { display: flex; gap: var(--sp-3); }
.check {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-footnote); color: var(--text-secondary);
}

.suggest-results { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-4); }
.sg-wind {
  font-size: var(--fs-footnote);
  color: var(--accent-strong);
  margin: 2px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sg-item {
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--surface-card); cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.sg-item:hover { border-color: var(--accent); }
.sg-item:active { transform: scale(.99); }
.sg-title { font-size: var(--fs-subhead); font-weight: var(--w-semibold); color: var(--text-primary); }
.sg-meta {
  font-size: var(--fs-caption); color: var(--accent-strong);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.sg-desc { font-size: var(--fs-footnote); color: var(--text-secondary); margin-top: 4px; line-height: var(--lh-body); }
.sg-hl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sg-hl span {
  font-size: var(--fs-caption); padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong);
}

/* ── Logbuch (M5) ────────────────────────────────────────────────────── */
#logbook { display: flex; height: calc(100vh - 56px); }
#log-map-wrap { position: relative; flex: 1; display: flex; }
#logMap { flex: 1; background: var(--surface-sunken); }

.log-empty {
  position: absolute; inset: 0; z-index: 400; display: grid; place-content: center;
  text-align: center; gap: var(--sp-2); pointer-events: none;
  background: color-mix(in srgb, var(--surface-sunken) 82%, transparent);
}
.log-empty p { margin: 0; color: var(--text-secondary); }

.log-summary { display: flex; gap: var(--sp-6); }
.log-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.log-item {
  padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: pointer;
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--surface-elevated);
  transition: border-color .15s ease;
}
.log-item:hover { border-color: var(--accent); }
.log-i-title { font-size: var(--fs-subhead); font-weight: var(--w-semibold); color: var(--text-primary); }
.log-i-meta { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 1px; }
.log-i-stats {
  font-size: var(--fs-footnote); color: var(--accent-strong);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.log-detail {
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 0 0 auto;
  padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-elevated);
}
.log-d-title { font-size: var(--fs-title3, 1.1rem); font-weight: var(--w-semibold); color: var(--text-primary); }
.log-d-meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.log-d-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3) var(--sp-2); margin-top: var(--sp-2); }
.log-s-cap {
  font-size: var(--fs-caption); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.log-s-val {
  font-family: var(--font-rounded); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.log-s-val .unit { font-family: var(--font-text); font-size: var(--fs-caption); color: var(--text-secondary); }

/* ── Öffentliche Live-Ansicht (M6) ───────────────────────────────────── */
#livepage { display: flex; height: calc(100vh - 56px); }
#live-map-wrap { position: relative; flex: 1; display: flex; }
#liveMap { flex: 1; background: var(--surface-sunken); }

.live-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.live-title { margin: 0; font-size: var(--fs-title2, 1.4rem); color: var(--text-primary); }
.live-state {
  align-self: flex-start; padding: 4px var(--sp-3); border-radius: 999px;
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.live-state.is-active { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-strong); }
.live-state.is-alert  { background: color-mix(in srgb, var(--sem-stroke) 20%, transparent); color: var(--sem-stroke); }
.live-state.is-done   { background: color-mix(in srgb, var(--sem-elevation) 20%, transparent); color: var(--sem-elevation); }

.live-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.live-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-subhead); }
.lr-cap { color: var(--text-tertiary); white-space: nowrap; }
.lr-val { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Letzte Position: pulsiert, damit klar ist, dass es live ist */
.live-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-strong); border: 3px solid #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 70%, transparent);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent-strong) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── Fahrtrichtung auf der Route ──────────────────────────────────────────
   Kleine Pfeile auf der Linie. Ohne sie ist „Richtung umkehren" bei einer
   Rundtour unsichtbar: Start und Ziel liegen Meter auseinander, die Linie sieht
   davor und danach gleich aus. */
.dir-arrow {
  font-size: 13px; line-height: 18px; text-align: center;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .5);
  pointer-events: none;
  user-select: none;
}

/* Der Verlaufs-Hinweis unter der Windbilanz — die Aussage, die beim Umkehren
   tatsächlich umspringt. Eigene Zeile, weil sie ein Satz ist und keine Zahl. */
.ws-note {
  flex-basis: 100%;
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.35;
}
.ws-note strong { color: var(--text-primary); font-weight: var(--w-semibold); }

/* Der Knopf in der Wind-Empfehlung. Auf einer Runde ist „andersherum" ein leerer
   Rat — dort hilft nur ein anderer Einstieg, und den soll man direkt setzen können. */
.wind-fix { margin-top: var(--sp-3); font-size: var(--fs-caption); }