/* Thomashof Distanz App – Farben der Website, große Tasten für draußen */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/BigShouldersDisplay-VariableFont_wght.ttf") format("truetype")}
:root{
  --bg:#f2f3ee; --surface:#ffffff; --sunk:#e6e8df; --fg:#1c2620; --muted:#56635a; --line:#cfd4c6;
  --pine:#0e4521; --pine-fg:#eef1e8; --accent:#ae1917; --on-accent:#ffffff; --accent-soft:#f8e4e2;
  --ok:#2f7a4a; --warn:#c66a12; --blue:#2f6fb8;
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif; --radius:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121814; --surface:#1a221d; --sunk:#0e130f; --fg:#e7ebe2; --muted:#9daa9f; --line:#2c3830;
  --pine:#0b2a16; --accent:#ec6b62; --on-accent:#1b0f18; --accent-soft:#3a1d1b; --ok:#6cc08a; --warn:#f0a050; --blue:#7fb0f0; color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:16px/1.45 var(--font)}
body{display:flex;flex-direction:column;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bar{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-top) + 8px) 12px 8px;background:var(--pine);color:var(--pine-fg);position:sticky;top:0;z-index:1000;min-height:56px}
.bar-title{flex:1;margin:0;font-size:1.15rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-back{background:none;border:0;font-size:2.2rem;line-height:1;padding:0 8px;color:inherit;cursor:pointer}
.sync{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);border-radius:99px;padding:5px 11px;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.sync .dot{width:9px;height:9px;border-radius:50%;background:#6cc08a}
.sync.offline .dot{background:#f0a050}
.sync.warten .dot{background:#f0a050;animation:puls 1.2s infinite}
.sync.fehler .dot{background:#ff6b5f}
@keyframes puls{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sync.warten .dot{animation:none}}

.app{flex:1;overflow:auto;padding:16px 16px calc(var(--safe-bottom) + 24px);display:flex;flex-direction:column;gap:14px;max-width:720px;width:100%;margin:0 auto}
.app.voll{padding:0;max-width:none}
h2{margin:6px 0 0;font-size:1.35rem;font-weight:800}
h3{margin:0;font-size:1.05rem}
p{margin:0}
.hint{color:var(--muted);font-size:.92rem}
.logo{display:block;width:180px;height:auto;margin:12px auto 4px}
.logo-d{display:none}
.claim{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;font-size:2.1rem;text-align:center;margin:2px 0 10px;letter-spacing:.005em}
.claim span{display:block;color:var(--accent)}
@media (prefers-color-scheme:dark){.logo-l{display:none}.logo-d{display:block}}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 18px;border-radius:var(--radius);border:2px solid var(--fg);background:transparent;font-weight:700;font-size:1.05rem;cursor:pointer;text-decoration:none;color:var(--fg);text-align:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.gruen{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{border-color:var(--accent);color:var(--accent)}
.btn.gross{min-height:72px;font-size:1.25rem}
.btn.klein{min-height:40px;padding:6px 12px;font-size:.92rem}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5}
.reihe{display:flex;gap:10px;flex-wrap:wrap}
.reihe > *{flex:1 1 0}

.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kachel{display:flex;flex-direction:column;gap:6px;justify-content:flex-end;min-height:118px;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);text-align:left;cursor:pointer}
.kachel b{font-size:1.15rem}
.kachel span{color:var(--muted);font-size:.88rem}
.kacheln.einspaltig{grid-template-columns:1fr}
.kacheln.einspaltig .kachel{min-height:96px}
.kachel.haupt{grid-column:1/-1;background:var(--pine);color:var(--pine-fg);border-color:var(--pine)}
.kachel.haupt span{color:color-mix(in srgb,var(--pine-fg) 75%,transparent)}
.kachel i{font-style:normal;font-size:1.6rem}

.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:10px}
.feld{display:grid;gap:6px}
.feld span{font-weight:600}
.feld input,.feld select{width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:1.1rem}
.feld input:focus{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--accent)}
.fehler{color:var(--accent);font-weight:600}

/* Nummernfeld */
.nr-anzeige{font:900 3.2rem/1 var(--font);text-align:center;padding:14px;border:3px solid var(--fg);border-radius:var(--radius);background:var(--surface);min-height:84px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.nr-anzeige.leer{color:var(--muted);font-weight:600;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{min-height:62px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);font-size:1.6rem;font-weight:700;cursor:pointer}
.pad button:active{background:var(--sunk)}
.pad .weg{font-size:1.1rem;color:var(--muted)}

.starter{display:grid;gap:4px;padding:14px;border-radius:var(--radius);background:var(--sunk)}
.starter b{font-size:1.2rem}
.pill{display:inline-block;font-size:.82rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--sunk);color:var(--fg)}
.pill.ok{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.pill.aus{background:var(--accent-soft);color:var(--accent)}
.vorschlag{outline:4px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}

.liste{display:grid;gap:8px}
.zeile{display:flex;gap:10px;align-items:center;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.zeile .nr{font:800 1.3rem var(--font);min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}
.zeile .mitte{flex:1;min-width:0}
.zeile .mitte small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.zeile .status{font-size:.8rem;font-weight:700;white-space:nowrap}
.zeile.wartet .status{color:var(--warn)}
.zeile.ok .status{color:var(--ok)}
.zeile.fehler{border-color:var(--accent)}
.zeile.fehler .status{color:var(--accent)}
.radar-z{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.radar-z .wert{display:flex;gap:8px;grid-column:1/-1}
.radar-z .wert input{width:5.5ch;min-height:52px;font-size:1.3rem;font-weight:700;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.cd{font-weight:800;font-variant-numeric:tabular-nums}
.cd.bald{color:var(--warn)} .cd.um{color:var(--accent)}

.banner{padding:12px 14px;border-radius:var(--radius);background:var(--accent-soft);border-left:4px solid var(--accent)}
.banner.ok{background:color-mix(in srgb,var(--ok) 14%,var(--bg));border-left-color:var(--ok)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--safe-bottom) + 16px);z-index:2000;padding:14px 16px;border-radius:var(--radius);background:var(--fg);color:var(--bg);font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:600px;margin:0 auto}
.toast.fehler{background:var(--accent);color:var(--on-accent)}

/* Karte */
.map-wrap{position:relative;flex:1;min-height:60vh}
#map{position:absolute;inset:0;background:var(--sunk)}
.map-leiste{position:absolute;left:10px;right:10px;bottom:calc(var(--safe-bottom) + 12px);z-index:500;display:flex;gap:8px;flex-wrap:wrap}
.map-leiste .btn{background:var(--surface);min-height:46px;flex:0 1 auto;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.map-info{position:absolute;left:10px;top:10px;z-index:500;background:var(--surface);color:var(--fg);padding:6px 10px;border-radius:8px;font-size:.82rem;box-shadow:0 2px 8px rgba(0,0,0,.2);max-width:calc(100% - 20px)}
.reiter-pin{background:var(--accent);color:#fff;border:3px solid #fff;border-radius:50%;font:800 13px/1 var(--font);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.reiter-pin.alt{background:#8a8f8b}
.ich-pin{background:var(--blue);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 30%,transparent)}
.leaflet-popup-content{font:14px/1.4 var(--font)}
.leaflet-popup-content b{font-size:15px}
.code{font:900 2rem ui-monospace,Menlo,monospace;letter-spacing:.18em;text-align:center;padding:10px;border:2px dashed var(--line);border-radius:var(--radius)}
.schalter{display:flex;align-items:center;justify-content:space-between;gap:12px}
.schalter input{width:52px;height:30px;accent-color:var(--ok)}

/* Ungefähre Ankunft und Tempo */
.eta{margin-left:auto;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.eta small{font-weight:600;color:var(--muted);font-size:.78rem}
.eta.bald{color:var(--pine)}
.eta.spaet{color:var(--warn)}
.eta.spaet small{color:var(--warn)}
.eta.leer{color:var(--muted);font-weight:400}
@media (prefers-color-scheme:dark){.eta.bald{color:var(--ok)}}
.prognose,.tempo-runden{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--radius);background:var(--sunk)}
.prognose ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.prognose li{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:6px}
.prognose small,.tempo-runden small{color:var(--muted)}

/* Gründe fürs Ausscheiden */
.gruende{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{border:1.5px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:10px 14px;font-weight:600;cursor:pointer}
.chip-btn.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Notfall */
.notfall-knopf{display:block;width:100%;min-height:72px;border:0;border-radius:var(--radius);background:#c8102e;color:#fff;font:900 1.5rem/1.1 var(--font);letter-spacing:.06em;cursor:pointer;box-shadow:0 4px 0 #8a0b20}
.notfall-knopf:active{transform:translateY(2px);box-shadow:0 2px 0 #8a0b20}
.notfall-knopf:disabled{opacity:.7}
.notfall-hinweis{border-color:#c8102e}
.notfall-status{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--radius);background:#c8102e;color:#fff}
.notfall-status b{font-size:1.4rem}
.notfall-status.ok{background:var(--pine);color:var(--pine-fg)}
.alarm{position:fixed;inset:0;z-index:9999;background:#c8102e;color:#fff;overflow:auto;padding:calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 16px)}
.alarm-kopf{font:900 1.6rem/1.1 var(--font);letter-spacing:.04em;animation:nf-puls 1s ease-in-out infinite}
.alarm-inhalt{background:var(--surface);color:var(--fg);border-radius:var(--radius);padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.alarm-nr{font:900 1.8rem/1 var(--font)}
.alarm-wer{font-weight:800}
.alarm-knoepfe{display:flex;flex-direction:column;gap:8px}
.alarm-knoepfe a.btn{text-align:center;text-decoration:none}
@keyframes nf-puls{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.alarm-kopf{animation:none}}
.nf-banner{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-bottom) + 12px);z-index:9000;border:0;border-radius:var(--radius);background:#c8102e;color:#fff;font-weight:800;padding:14px;text-align:left;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
/* Einsatzorte der Helfer: kompakte Zeilen in Ablauf-Reihenfolge */
.kacheln.bereiche{gap:8px}
.kacheln.bereiche .kachel{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;min-height:0;padding:12px 14px}
.kacheln.bereiche .kachel i{grid-row:1 / span 2;font-size:1.7rem;text-align:center}
.kacheln.bereiche .kachel b{font-size:1.1rem}
.kacheln.bereiche .kachel:disabled{opacity:.45}

/* Einsatzorte */
.ort-zeile{display:grid;grid-template-columns:18px 1fr;gap:4px 10px;align-items:center;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ort-zeile .wer{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.punkt{width:14px;height:14px;border-radius:50%;display:inline-block}
.punkt.an{background:#5cd17a;box-shadow:0 0 0 3px rgba(92,209,122,.25)}
.punkt.aus{background:#d9343a;box-shadow:0 0 0 3px rgba(217,52,58,.2)}
.helfer-chip{border:0;border-radius:999px;background:var(--sunk);color:var(--fg);padding:4px 12px;font-weight:700;cursor:pointer}
.helfer-chip.alt{color:var(--muted);font-weight:600}
.ort-zeile .frei{color:#d9343a;font-weight:700;font-size:.9rem}
/* Chat */
.chat-kontakt{align-items:center}
.avatar{position:relative;width:40px;height:40px;border-radius:50%;background:var(--pine);color:var(--pine-fg);display:grid;place-items:center;font-weight:800;flex:none}
.avatar .on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#5cd17a;border:2px solid var(--surface)}
.badge{min-width:24px;height:24px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:800;display:grid;place-items:center;padding:0 6px;font-size:.85rem}
.chat{display:flex;flex-direction:column;gap:6px;padding-bottom:84px}
.chat-tag{text-align:center;color:var(--muted);font-size:.8rem;margin:8px 0 2px}
.blase{max-width:82%;align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.blase.eigen{align-self:flex-end;background:var(--pine);color:var(--pine-fg);border-color:var(--pine);border-radius:14px 14px 4px 14px}
.blase.wartet{opacity:.6}
.blase b{font-size:.82rem;color:var(--accent)}
.blase small{font-size:.72rem;opacity:.7;align-self:flex-end}
.chat-eingabe{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px calc(var(--safe-bottom) + 10px);background:var(--bg);border-top:1px solid var(--line);z-index:50}
.chat-eingabe textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:10px 14px;font:inherit;background:var(--surface);color:var(--fg);max-height:140px}
.chat-eingabe .btn{border-radius:50%;width:46px;height:46px;padding:0;font-size:1.2rem}

/* Trosspunkte */
.tp-runde{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tp-runde.jetzt{border-color:var(--pine);box-shadow:0 0 0 2px color-mix(in srgb,var(--pine) 30%,transparent)}
.tp-runde.vorbei{opacity:.55}
.tp-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:var(--sunk)}
.tp-kopf .chip{display:inline-block;min-width:2.2em;text-align:center;padding:2px 6px;border-radius:5px;background:var(--c);color:#fff;font-weight:800;text-shadow:0 0 2px rgba(0,0,0,.45)}
.tp-punkt{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.tp-km{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.tp-km small,.tp-name small{color:var(--muted);font-size:.8rem}
.tp-name{display:flex;flex-direction:column;gap:2px}
.tp-name .tp-eta{color:var(--pine);font-weight:700}
.tp-knoepfe{display:flex;gap:6px}
.tp-knoepfe .btn{text-decoration:none;white-space:nowrap}
.tp-leer{padding:8px 12px}

.alarm-frage{margin-top:12px;background:#fff4d6;color:#3a2a00;border:2px solid #e0a100;border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.alarm-frage p{margin:0}

/* Nicht freigeschaltete Einsatzorte */
.kachel.gesperrt, .zeile.gesperrt { opacity: .4; filter: grayscale(1); cursor: not-allowed; }
.kachel.gesperrt span { font-size: .8em; }

/* Startseite: nächste Veranstaltung */
.naechste{display:grid;justify-items:center;gap:2px;text-align:center;margin:0 auto 14px;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:340px}
.naechste span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.naechste b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.35rem;line-height:1}
.naechste em{font-style:normal;font-weight:700;color:var(--accent)}

/* Aktueller Einsatzort des Helfers */
.mein-einsatz{display:grid;gap:8px;padding:14px;border-radius:var(--radius);background:var(--surface);border:2px solid #5cd17a}
.mein-einsatz span{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mein-einsatz b{font-size:1.25rem}

/* Grau: App länger nicht benutzt */
.punkt.alt{background:#a3a8a4;box-shadow:0 0 0 3px rgba(150,155,150,.25)}
.helfer-chip.alt{background:transparent;border:1px dashed var(--line);opacity:.75}

/* Rückfrage-Fenster */
.frage-overlay{position:fixed;inset:0;z-index:60;background:rgba(10,14,12,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.frage-box{background:var(--surface);color:var(--fg);border-radius:16px;padding:20px;width:100%;max-width:440px;display:grid;gap:10px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.frage-box h2{margin:0;font-size:1.2rem}
.frage-box p{margin:0 0 6px;color:var(--muted)}
.notfall-aus{display:grid;gap:6px}
.notfall-aus .notfall-knopf[disabled]{opacity:.35;filter:grayscale(1);cursor:not-allowed;animation:none}
/* Rückfrage "Für alle erledigt": feste Farben, damit beide Knöpfe auch im Darkmode gut lesbar sind */
.alarm-frage .btn{background:#ffffff;color:#2a1f00;border-color:#2a1f00}
.alarm-frage .btn.danger{background:#c8102e;border-color:#c8102e;color:#ffffff}
/* Notfall: mehrere Gründe wählbar */
.gruende.mehrfach .chip-btn.an::before{content:'✓ '}

/* Statuspunkte vor dem Reiterstatus */
.st-mit-punkten{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;max-width:100%}
.st-punkte{display:inline-flex;gap:4px;flex:none}
.st-punkte i{width:10px;height:10px;border-radius:50%;display:block}
.st-gruen-blink i{background:#2fbf4f;box-shadow:0 0 6px rgba(47,191,79,.8);animation:st-wechsel 1.2s steps(1,end) infinite}
.st-gelb-blink i{background:#f2c200;box-shadow:0 0 6px rgba(242,194,0,.85);animation:st-wechsel 1.2s steps(1,end) infinite}
.st-gruen-blink i:nth-child(2),.st-gelb-blink i:nth-child(2){animation-delay:-.6s}
.st-rot i{background:#ff2a2a;box-shadow:0 0 4px #ff2a2a,0 0 10px rgba(255,42,42,.7)}
.st-gruen i{background:#2ee05a;box-shadow:0 0 4px #2ee05a,0 0 10px rgba(46,224,90,.7)}
@keyframes st-wechsel{0%{opacity:1}50%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.st-gruen-blink i,.st-gelb-blink i{animation-duration:2.4s}}

/* Eingabe-Knopf unter dem Ziffernblock: mittig und etwas abgesetzt */
#nrOk{display:flex;width:min(100%,320px);margin:24px auto 8px;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* Ziffernblock: Anzeige der Startnummer etwas abgesetzt */
.nr-anzeige{margin-bottom:14px}
button.zeile{text-align:left;cursor:pointer;width:100%}

/* Start / Pause */
.sp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 10px}
.sp-tabs button{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--radius);padding:10px 6px;font-weight:700;font-size:.85rem;line-height:1.2;min-height:64px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.sp-tabs button b{font-size:1.2rem}
.sp-tabs button.an{background:var(--pine);border-color:var(--pine);color:var(--pine-fg)}
.sp-info{gap:6px}
.sp-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}
.sp-zeile span{color:var(--muted)}
.sp-zeile b{font-variant-numeric:tabular-nums;text-align:right}
.sp-zeile.gross b{font-size:1.4rem}
.sp-uhr{display:grid;justify-items:center;gap:4px;padding-top:8px}
.sp-jetzt{font:900 2.4rem/1 var(--font);font-variant-numeric:tabular-nums}
.sp-hinweis{font-weight:700;text-align:center;color:var(--accent)}
.sp-hinweis.warn{color:var(--warn,#c77700)}
.sp-hinweis.ok{color:var(--ok)}
.sp-warn{color:var(--accent);font-weight:700}
.sp-ok{color:var(--ok);font-weight:700}
.sp-haupt{width:min(100%,360px);margin:14px auto 6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.sp-mehr{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;background:var(--surface)}
.sp-mehr summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.sp-mehr[open]{display:grid;gap:10px}
.sp-zeit{font-size:2rem !important;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.reihe-btn{display:flex;flex-wrap:wrap;gap:8px}
.reihe-btn .btn{flex:1 1 140px}
.sp-zeile b .sp-warn{color:var(--accent)}
.sp-zeile b .sp-ok{color:var(--ok)}

/* Vet */
.vet-ta select{font-size:1.1rem;font-weight:700}
.vet-arten{grid-template-columns:repeat(2,1fr)}
.sp-tabs:not(.vet-arten){grid-template-columns:repeat(2,1fr)}
.vet-form{gap:12px}
.vet-form h3{margin:0}
.vet-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vet-wahl .btn{min-height:80px}
.vet-wahl .vet-ja.an{background:var(--ok);border-color:var(--ok);color:#fff}
.vet-wahl .vet-nein.an{background:#c8102e;border-color:#c8102e;color:#fff}
.btn.danger-voll{background:#c8102e;border-color:#c8102e;color:#fff}
.vet-wer{margin:0;text-align:center}
.nf-sperre{border-left-color:#c8102e;font-weight:800}
.sp-haupt,.vet-wahl .btn{box-sizing:border-box;max-width:100%}
.vet-wahl .btn{min-width:0;padding:10px 8px;font-size:1.1rem;overflow-wrap:anywhere}
.btn.gruen-voll{background:var(--ok);border-color:var(--ok);color:#fff}
/* Über die App */
.info-knopf{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.info-knopf svg{width:34px;height:34px}
.info-knopf:hover,.info-knopf:focus-visible{color:var(--accent)}
.info-knopf.gross{display:flex;margin:22px auto 0;width:64px;height:64px}
.info-knopf.gross svg{width:44px;height:44px}
.reihe .info-knopf{margin-left:auto}
.info-kopf{display:grid;justify-items:center;gap:6px;margin:4px 0 14px}
.info-version{display:inline-block;margin-top:4px;padding:5px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.info-karte{padding:0;gap:0;overflow:hidden}
.info-abschnitt{padding:16px 18px;border-top:1px solid var(--line)}
.info-abschnitt:first-child{border-top:0}
.info-abschnitt h3{margin:0 0 6px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info-abschnitt p{margin:0 0 6px;font-size:1.05rem;line-height:1.5}
.info-abschnitt p:last-child{margin-bottom:0}
.info-abschnitt a{color:var(--accent);font-weight:700}
.info-fuss{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.6;margin:18px 0 6px}
.vet-puls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.vet-puls input{width:110px;height:48px;font-size:1.3rem;font-weight:700;text-align:center;border:1px solid var(--line,#ccc);border-radius:10px;background:var(--bg,#fff);color:inherit}
.station-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:.9rem;color:var(--muted,#666)}
.station-kopf .reihe{display:flex;gap:6px;flex:none;margin:0}
.station-kopf .btn.klein{min-height:36px;padding:0 10px}
.chat-werkzeug{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.chat-werkzeug .hint{font-size:.8rem;margin:0}
.chat-werkzeug .btn.klein{min-height:34px;padding:0 10px;flex:none}
.blase[data-loesch]{cursor:pointer}
/* Navigation */
.reihe.zwei{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.navi-runden{display:grid;gap:8px}
.navi-runde{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-left:12px solid var(--c);gap:2px}
.navi-runde span{font-weight:800;font-size:1.15rem}
.navi-runde small{font-weight:400;color:var(--muted,#666)}
.navi-modi{display:grid;gap:8px;margin-bottom:10px}
.navi-modus{display:flex;gap:12px;align-items:center;padding:12px;border:2px solid var(--line,#ddd);border-radius:12px;background:var(--surface)}
.navi-modus:has(input:checked){border-color:var(--ok,#1b7a3a)}
.navi-modus input{width:22px;height:22px;accent-color:var(--ok,#1b7a3a)}
.navi-modus span{display:flex;flex-direction:column}
.navi-modus small{color:var(--muted,#666)}
.navi-panel{position:absolute;top:10px;left:10px;right:60px;z-index:600;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#0e4521;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.navi-panel.abseits{background:#ae1917}
.navi-pfeil{font-size:2.8rem;line-height:1;width:56px;text-align:center;font-weight:700}
.navi-text{display:flex;flex-direction:column}
.navi-text b{font-size:1.7rem;line-height:1.1}
.navi-text span{font-size:1.05rem;opacity:.95}
.navi-fuss{position:absolute;left:10px;right:10px;bottom:calc(var(--safe-bottom, 0px) + 12px);z-index:600;display:flex;gap:8px;align-items:center}
.navi-fuss #naviRest{flex:1;background:var(--surface);padding:10px 12px;border-radius:10px;font-weight:600;font-size:.92rem;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.navi-fuss .btn{min-height:46px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.navi-ich{width:24px!important;height:24px!important;border-width:4px!important}
.navi-folgen{background:var(--surface);min-width:44px;min-height:44px;margin-top:70px!important}
/* Login-Auswahl: Symbol vor der Überschrift, kompakte Kacheln mit Pfeil */
.login-wahl{gap:10px}
.login-wahl .kachel{display:grid;grid-template-columns:44px 1fr 18px;grid-template-areas:"ic ti pf" "tx tx pf";column-gap:12px;row-gap:4px;align-items:center;min-height:0;padding:14px 14px 14px 16px;position:relative}
.login-wahl .kachel i{grid-area:ic;width:44px;height:44px;display:grid;place-items:center;font-size:1.45rem;border-radius:50%;background:var(--sunk,rgba(0,0,0,.06))}
.login-wahl .kachel.haupt i{background:rgba(255,255,255,.16)}
.login-wahl .kachel b{grid-area:ti;font-size:1.2rem}
.login-wahl .kachel span{grid-area:tx;font-size:.86rem;line-height:1.35}
.login-wahl .kachel::after{content:'›';grid-area:pf;font-size:1.8rem;line-height:1;opacity:.55;justify-self:end}
.login-wahl .kachel:active{transform:scale(.99)}
.login-wahl .kachel i.ico{color:var(--pine);background:color-mix(in srgb,var(--pine) 10%,transparent);border:1.5px solid color-mix(in srgb,var(--pine) 35%,transparent)}
.login-wahl .kachel i.ico svg{width:26px;height:26px;display:block}
.login-wahl .kachel.haupt i.ico{color:var(--pine-fg);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.login-wahl .kachel.haupt i.ico circle[fill="var(--surface)"]{fill:var(--pine)}
@media (prefers-color-scheme:dark){.login-wahl .kachel:not(.haupt) i.ico{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}}
/* Startseite kompakter, damit die Auswahl ohne Scrollen passt */
.logo{width:140px;margin:6px auto 2px}
.claim{font-size:1.65rem;margin:0 0 8px}
.naechste{padding:6px 14px;margin-bottom:8px}
.naechste b{font-size:1.15rem}
.login-wahl .kachel{padding:11px 12px 11px 14px}
.login-wahl .kachel i{width:40px;height:40px}
.login-wahl + .info-knopf{margin-top:8px}
.navi-stimme{width:100%;min-height:48px;padding:0 12px;font:inherit;font-size:1rem;border:2px solid var(--line,#ddd);border-radius:12px;background:var(--surface);color:inherit}
.navi-offline{display:grid;gap:4px;margin-bottom:12px}
.navi-offline span{font-size:.9rem}
.navi-offline .btn{justify-self:start;margin-top:4px}
.navi-wb{display:grid;gap:6px;margin-bottom:10px}
.navi-wb small{color:var(--muted,#666)}
.badge-l{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:6px;background:var(--pine);color:var(--pine-fg);font-weight:800}
.navi-folge{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0}
.navi-folge i{opacity:.5;font-style:normal}
.navi-chip{padding:3px 9px;border-radius:99px;border:2px solid var(--c);font-weight:700;font-size:.85rem;background:color-mix(in srgb,var(--c) 14%,transparent)}
.navi-chip.jetzt{background:var(--c);color:#fff}
.navi-chip.fehlt{opacity:.45;border-style:dashed}
.navi-einzeln{margin-top:16px}
.navi-einzeln summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.pw-feld{position:relative;display:block}
.pw-feld input{padding-right:54px;width:100%;box-sizing:border-box}
.pw-auge{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:inherit}
.navi-pause{position:absolute;top:10px;left:10px;right:60px;z-index:600;display:grid;gap:8px;padding:14px;border-radius:14px;background:#7a4b00;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.navi-pause b{font-size:1.4rem}
.navi-pause span{font-size:.98rem;line-height:1.35}
.navi-pause .btn{justify-self:start;background:#fff;color:#7a4b00;border-color:#fff}