:root {
  --bg: #ffffff; --fg: #10212b; --muted: #5a6b75; --panel: rgba(255, 255, 255, .94);
  --accent: #0b6fa4; --accent-fg: #fff; --line: #d3dde3; --map: #f2f4f2; --warn: #a14a00;
  --gap: 8px; --btn: 52px;
  color-scheme: light dark;
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Dunkel: nach System (Automatisch) oder per Schalter (data-theme auf <html>) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  --bg: #111417; --fg: #e4ecf0; --muted: #93a4ad; --panel: rgba(20, 24, 28, .94);
  --accent: #4fb3e8; --accent-fg: #001a29; --line: #2c363d; --map: #16191c; --warn: #ffb066;
  color-scheme: dark;
}
/* Nachtansicht: Helligkeit invertieren, Farbtöne (Tiefenstufen) bleiben erhalten */
:root[data-theme="dark"] :is(.chart-tiles, .base-tiles) { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #111417; --fg: #e4ecf0; --muted: #93a4ad; --panel: rgba(20, 24, 28, .94);
    --accent: #4fb3e8; --accent-fg: #001a29; --line: #2c363d; --map: #16191c; --warn: #ffb066;
  }
  :root:not([data-theme]) :is(.chart-tiles, .base-tiles) { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.95); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
#map { position: fixed; inset: 0; background: var(--map); }

#top {   /* Ortsanzeige + Angel-Hinweis untereinander, wachsen ohne Überlappung */
  position: fixed; z-index: 1000; top: calc(env(safe-area-inset-top) + var(--gap));
  left: calc(env(safe-area-inset-left) + var(--gap)); right: calc(env(safe-area-inset-right) + var(--gap));
  display: flex; flex-direction: column; gap: var(--gap); pointer-events: none;
}
#top > * { pointer-events: auto; }
#readout { position: fixed; left: calc(env(safe-area-inset-left) + var(--gap)); right: calc(env(safe-area-inset-right) + var(--gap)); }
#where, #readout {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); backdrop-filter: blur(6px);
}
#where { min-height: 44px; font-size: 15px; }
#where .name { font-weight: 600; }
#where .out { color: var(--warn); }
#where button { all: unset; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 44px; }
#readout { bottom: calc(env(safe-area-inset-bottom) + var(--btn) + 3 * var(--gap)); font-size: 17px; }
#readout .big { font-size: 22px; font-weight: 700; }
#readout .muted { font-size: 14px; }

#bar {
  position: fixed; z-index: 1000; display: flex; gap: var(--gap); justify-content: center;
  left: calc(env(safe-area-inset-left) + var(--gap)); right: calc(env(safe-area-inset-right) + var(--gap));
  bottom: calc(env(safe-area-inset-bottom) + var(--gap));
}
#bar button {
  flex: 1 1 0; max-width: 96px; min-height: var(--btn); min-width: 44px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); cursor: pointer;
}
#bar button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
#bar svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: currentColor; stroke-linecap: round; }
#bar svg path[fill="none"], #bar svg circle[fill="none"] { fill: none; }

dialog {
  width: min(560px, calc(100vw - 2 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - 2 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px 16px;
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dlg-head { position: sticky; top: 0; background: var(--bg); display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.dlg-head h2 { margin: 12px 0; font-size: 20px; }
.close, .primary, .sec button {
  min-height: 44px; min-width: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: inherit; cursor: pointer;
}
.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); padding: 0 20px; width: 100%; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: 14px; }
.row-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.row-check input { width: 22px; height: 22px; }
h3.folder { margin: 18px 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sec { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.sec .jump { all: unset; cursor: pointer; min-height: 44px; display: block; }
.sec .jump strong { display: block; }
.sec .off { padding: 0 12px; white-space: nowrap; font-size: 14px; }
.sec .off.saved { border-color: var(--accent); color: var(--accent); }
.sec progress { grid-column: 1 / -1; width: 100%; height: 8px; }

.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
.leaflet-top.leaflet-right { top: calc(env(safe-area-inset-top) + 72px); right: env(safe-area-inset-right); }
.leaflet-bottom { bottom: calc(env(safe-area-inset-bottom) + var(--btn) + 2 * var(--gap)); }
.leaflet-control-attribution { font-size: 10px; line-height: 1.4; white-space: nowrap; max-width: 100vw; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.measure-label { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; font-weight: 600; white-space: nowrap; }

#angel-note {
  padding: 8px 12px; font-size: 13px; line-height: 1.3;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #e08a00; border-radius: 10px;
}
#angel-note .muted { font-size: 12px; }
#angel-note .g { color: #1e9e3a; font-weight: 700; } #angel-note .r { color: #d0021b; font-weight: 700; } #angel-note .o { color: #e08a00; font-weight: 700; } #angel-note .y { color: #f2d500; font-weight: 700; }
body.angel .leaflet-top.leaflet-right { top: calc(env(safe-area-inset-top) + 150px); }
#readout .rule { margin-top: 6px; padding-left: 8px; border-left: 4px solid var(--line); }
#readout .rule.rot { border-color: #d0021b; } #readout .rule.orange { border-color: #e08a00; } #readout .rule.gruen { border-color: #1e9e3a; } #readout .rule.gelb { border-color: #f2d500; }
.legend { list-style: none; padding: 0; margin: 0; columns: 2; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; break-inside: avoid; }
.legend i { width: 28px; height: 14px; border: 1px solid var(--line); }
.warnbox { padding: 8px 12px; border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 6px; }
#angel-note strong { display: block; }