:root {
  --teal: #1D9D9E; --teal-tief: #157F80; --gelb: #FFD41F; --orange: #e8891a; --lila: #7c5cc4; --grau: #6b7280; --rot: #c0392b;
  --bg: #f6f8f8; --panel: #ffffff; --fg: #1f2a2a; --muted: #5b6566; --line: #d9e0e0; --chip: #eef3f3; --chip-ok: #1D9D9E; --chip-ok-fg: #ffffff;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141b1b; --panel: #1d2626; --fg: #e8eeee; --muted: #a3b0b0; --line: #334040; --chip: #273232; --chip-ok: #1D9D9E; --chip-ok-fg: #ffffff; --teal-tief: #5cc4c5;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #141b1b; --panel: #1d2626; --fg: #e8eeee; --muted: #a3b0b0; --line: #334040; --chip: #273232; --chip-ok: #1D9D9E; --chip-ok-fg: #ffffff; --teal-tief: #5cc4c5;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.45 var(--font); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
a { color: var(--teal-tief); }
h1 { font-size: 1.35rem; margin: .4rem 0 .3rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.klein { font-size: .88rem; color: var(--muted); margin: .2rem 0 .6rem; }
[hidden] { display: none !important; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 1000; background: var(--teal); color: #fff; padding: .5rem 16px .55rem; padding-top: calc(.5rem + env(safe-area-inset-top)); }
.kopf-zeile { display: flex; align-items: baseline; gap: .7rem; max-width: 960px; margin: 0 auto; }
.marke { color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: .01em; }
.marke::after { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gelb); margin-left: .25rem; vertical-align: .1rem; }
.umlauf { font-size: .88rem; opacity: .95; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich { font-size: .85rem; opacity: .9; white-space: nowrap; }
.hilfe { color: #1f2a2a; background: var(--gelb); text-decoration: none; font-weight: 800; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .95rem; flex: none; }
.kopf .fortschritt { max-width: 960px; margin: .35rem auto 0; }
.kopf .balken { background: rgba(255,255,255,.3); }
.kopf .balken span { background: var(--gelb); }
.netz { max-width: 960px; margin: .4rem auto 0; background: var(--gelb); color: #1f2a2a; border-radius: 6px; padding: .3rem .6rem; font-size: .85rem; font-weight: 600; }

main { max-width: 960px; margin: 0 auto; padding: .5rem 16px 1.5rem; }
.fortschritt { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.balken { flex: 1; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.balken span { display: block; height: 100%; width: 0; background: var(--teal); transition: width .3s; }

/* Karten */
.karte { height: 52vh; min-height: 300px; border-radius: 10px; border: 1px solid var(--line); margin: .6rem 0; background: #e9eeee; }
#karte-zone { height: 44vh; }
.leaflet-container { font-family: var(--font); }
.znr { background: none; border: 0; }
.znr span { display: inline-block; transform: translate(-50%, -50%); background: rgba(255,255,255,.9); color: #1f2a2a; border-radius: 9px; padding: 0 5px; font: 700 12px/18px var(--font); white-space: nowrap; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
/* Nummernschild zeigt den Status (die Fläche trägt die Zonenfarbe) */
.znr.st-vorgemerkt span { background: #d9cdf3; box-shadow: 0 0 0 1.5px var(--lila); }
.znr.st-vergeben span { background: var(--gelb); }
.znr.st-in_arbeit span { background: var(--orange); color: #fff; }
.znr.st-fertig span { background: var(--teal); color: #fff; }
.znr.meins span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f2a2a; }
.znr span small { display: block; font: 600 10px/12px var(--font); padding-bottom: 2px; text-align: center; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.namen-aus .znr span small { display: none; }
.ich-punkt { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.4); }
.leiste { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: .3rem; }
.legende { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .8rem; color: var(--muted); }
.legende i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .25rem; vertical-align: -.1rem; }
.st-frei { background: #c9d1d1; border: 1px solid var(--grau); }
.st-vorgemerkt { background: #d9cdf3; border: 1px dashed var(--lila); }
.st-vergeben { background: var(--gelb); }
.st-in_arbeit { background: var(--orange); }
.st-fertig { background: var(--teal); }

/* Knöpfe und Formulare */
button, .knopf { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: .6rem 1rem; background: var(--teal); color: #fff; cursor: pointer; min-height: 44px; }
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .5; cursor: default; }
button.zweit { background: var(--chip); color: var(--fg); border: 1px solid var(--line); }
button.warn { background: var(--rot); }
button.klein-knopf { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.formular { display: grid; gap: .35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem 1rem; margin: .6rem 0; }
.formular h2 { margin-top: .2rem; }
.formular label { font-size: .88rem; color: var(--muted); margin-top: .3rem; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; width: 100%; }
input[type="checkbox"] { width: auto; }
.haken-label { display: flex; gap: .5rem; align-items: center; color: var(--fg) !important; }
textarea#t-text { font-family: var(--font); background: var(--panel); min-height: 18rem; }

/* Listen */
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.liste li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: flex; gap: .7rem; align-items: center; }
.liste li .text { flex: 1; min-width: 0; }
.liste li .text b { display: block; }
.liste li .text small { color: var(--muted); }
.liste a.zeile { color: inherit; text-decoration: none; display: flex; gap: .7rem; align-items: center; flex: 1; min-width: 0; }
.nr { font-weight: 800; min-width: 2.2rem; height: 2.2rem; border-radius: 8px; display: grid; place-items: center; background: var(--chip); }
.nr.st-vergeben { color: #1f2a2a; } .nr.st-in_arbeit, .nr.st-fertig { color: #fff; } .nr.st-frei, .nr.st-vorgemerkt { color: #1f2a2a; }
.filter, .reiter { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .7rem; }
.filter button, .reiter button { background: var(--chip); color: var(--fg); border: 1px solid var(--line); min-height: 38px; padding: .35rem .8rem; }
.filter button[aria-pressed="true"], .reiter button[aria-selected="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Zone */
.zurueck { display: inline-block; margin: .3rem 0; text-decoration: none; font-weight: 600; }
.status-zeile { margin: .5rem 0; }
.badge { display: inline-block; border-radius: 999px; padding: .05rem .6rem; font-size: .82rem; font-weight: 700; }
.badge.st-frei, .badge.st-vorgemerkt, .badge.st-vergeben { color: #1f2a2a; } .badge.st-in_arbeit, .badge.st-fertig { color: #fff; }
.hinweis { background: var(--panel); border-left: 4px solid var(--gelb); padding: .6rem .8rem; border-radius: 6px; }
.strasse { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: .55rem 0; }
.strasse > summary { list-style: none; cursor: pointer; padding: .65rem .8rem; display: flex; gap: .6rem; align-items: center; }
.strasse > summary::-webkit-details-marker { display: none; }
.strasse > summary .name { flex: 1; font-weight: 700; }
.strasse > summary .zahl { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.strasse > summary::before { content: "▸"; color: var(--muted); }
.strasse[open] > summary::before { content: "▾"; }
.strasse.fertig > summary .name::after { content: " ✓"; color: var(--teal-tief); }
.block { border-top: 1px solid var(--line); padding: .5rem .8rem .7rem; }
.block-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.block-kopf label { flex: 1; display: flex; align-items: center; gap: .55rem; font-weight: 600; cursor: pointer; min-height: 36px; }
.block-kopf input { width: 22px; height: 22px; accent-color: var(--teal); }
.block-kopf small { color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { min-height: 40px; min-width: 48px; padding: .3rem .55rem; border-radius: 8px; background: var(--chip); color: var(--fg); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; line-height: 1.1; }
.chip small { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
.chip.ok { background: var(--chip-ok); color: var(--chip-ok-fg); border-color: var(--chip-ok); }
.chip.ok small { color: rgba(255,255,255,.85); }
.chip:disabled { opacity: 1; cursor: default; }
.notizen { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.notizen li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; white-space: pre-wrap; }
.notizen small { display: block; color: var(--muted); }

/* Tabellen (Flyerwehr-Organisation) */
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tabelle { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabelle th, .tabelle td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tabelle tr.gesperrt td { opacity: .55; }
.link-feld { display: flex; gap: .3rem; align-items: center; min-width: 240px; }
.link-feld input { font-size: .78rem; padding: .3rem .4rem; }
.team-wahl { min-width: 180px; min-height: 5.5rem; font-size: .85rem; }
.karte-hinweis { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem; }
.warnliste { background: var(--panel); border: 2px solid var(--rot); border-radius: 10px; padding: .7rem 1rem; margin: .6rem 0; }

/* unten */
.unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.unten a { flex: 1; text-align: center; padding: .75rem .2rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .85rem; min-height: 52px; }
.unten a[aria-current="page"] { color: var(--teal-tief); box-shadow: inset 0 3px 0 var(--teal); }
.unten b { display: inline-block; background: var(--rot); color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 .4rem; margin-left: .15rem; }
.fuss { max-width: 960px; margin: 0 auto; padding: .5rem 16px 1rem; font-size: .75rem; color: var(--muted); }
.meldung { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000; background: var(--fg); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; max-width: calc(100vw - 32px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.meldung.fehler { background: var(--rot); color: #fff; }
@media (min-width: 760px) { .karte { height: 60vh; } #karte-zone { height: 50vh; } }
@media (prefers-reduced-motion: reduce) { .balken span { transition: none; } }