/* Helfer-App (/einsatz/) – dunkelblauer Handy-Look wie im Entwurf „Angehörigen-Portal“.
   Schriften liegen auf unserem eigenen Server (core/static/core/fonts, SIL OFL) – nie extern laden (Datenschutz). */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400.f1f8a8210104.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 600 800; font-display: swap; src: url("../fonts/atkinson-700.13a58e05dfd2.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-weight: 400 700; font-display: swap; src: url("../fonts/noto-serif.c919254265f0.woff2") format("woff2"); }

:root {
  /* --navy ist hier die „starke“ Schriftfarbe (Überschriften), --navy2 die Farbe für Links und Kalenderblöcke */
  --navy: #f6f2e8; --navy2: #9fb4e6; --navy-2: #9fb4e6; --tief: #0b1120; --block: #2f4577;
  --gold: #e9c05a; --gold-licht: #e9c05a; --gold-hell: #f6e7c1; --gold-dunkel: #e9c05a; --accent: #e9c05a; --auf-gold: #1d1606;
  --bg: #0e1424; --bg-2: #0b1120; --surface: #172036; --surface-2: #1d2740; --line: #2c3854;
  --fg: #e9e6de; --muted: #a3a9b8; --grau: #a3a9b8; --leise: #a3a9b8;
  --ok: #6fcf9a; --ok-bg: #1b3a2c; --warn: #f0b860; --warn-bg: #3d2e14; --crit: #f08a8a; --crit-bg: #432222;
  --info: #b9c8ee; --info-bg: #22304f; --info-line: #34467a;
  --feld: #10182b; --feld-linie: #36446a;
  --gold-flaeche: #2a2616; --gold-chip: #3a3220; --gold-chip-text: #e9c05a;
  --f-display: "Noto Serif", Georgia, "Times New Roman", serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

/* ---------- Grundgerüst ---------- */
* { box-sizing: border-box; }
html { background-color: var(--bg); -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
body { margin: 0; font-family: var(--f-body); font-size: 15px; line-height: 1.5; color: var(--fg); background: var(--bg);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); -webkit-text-size-adjust: 100%; }
main { padding: 14px 16px 20px; max-width: 640px; margin: 0 auto; }
/* Zurück-Knopf auf Unterseiten der Helfer-App (termine/base_mobil.html) */
.zurueck { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 .4rem -6px; padding: 8px 12px 8px 6px; border-radius: 10px;
  color: var(--accent); font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.zurueck svg { width: 20px; height: 20px; }
.zurueck:active { background: var(--surface); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; color: var(--navy); text-wrap: balance; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: .3rem 0 .5rem; }
h2 { font-size: 1.12rem; line-height: 1.3; margin: 1.3rem 0 .55rem; }
h2.warn { color: var(--warn); }
a { color: var(--navy2); }
p { margin: 0 0 .7rem; }
.leise { color: var(--muted); font-size: .92rem; }
.klein { font-size: .82rem; }
.warn { color: var(--warn); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; margin-top: .4rem; }
.stunden { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.warnung { background: var(--warn-bg); color: #f6dcae; padding: .6rem .8rem; border-radius: 8px; }
details summary { cursor: pointer; margin-top: .7rem; color: var(--navy); }
details.karte > summary { margin-top: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.av-aus { display: none !important; }

/* ---------- Kopf: dunkles Band, beim Scrollen fest ---------- */
.kopf { background: rgba(11, 17, 32, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 9; }
.kopf .logo { width: 30px; height: auto; flex: none; display: block; }
.kopf-text { min-width: 0; }
.kopf .t { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: #fff; }
.kopf .s { font-size: .76rem; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abmelden { margin-left: auto; flex: none; }
.abmelden button { background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 10px; font-size: .78rem; font-weight: 600; }
.abmelden button:hover, .abmelden button:active { border-color: var(--gold); color: #fff; }
/* Testsystem „Ansicht als …“: statt Abmelden ein goldener Knopf zurück zur eigenen Ansicht */
.ansicht-als button, .ansicht-als button:hover { background: var(--gold); border-color: var(--gold); color: #15233e; }

/* ---------- Karten ---------- */
.karte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
a.karte { color: inherit; text-decoration: none; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.karte.einsatz > div + div { margin-top: 1px; }
.karte.vertretung, a.karte.uebergabe-hinweis { background: var(--info-bg); border-color: var(--info-line); }
a.karte.uebergabe-hinweis { display: block; position: relative; padding-right: 34px; }
a.karte.uebergabe-hinweis::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--info); border-bottom: 2px solid var(--info); transform: rotate(-45deg); }
.karte.vertretung strong, a.karte.uebergabe-hinweis strong { color: var(--navy); }
form.karte.zeile { gap: .5rem; }
form.karte.zeile button { padding: .4rem .7rem; font-size: .85rem; white-space: nowrap; }

/* Mein Monat: dezent goldgetönte Karte mit drei Werten */
.karte.mein-monat { background: linear-gradient(135deg, #2a2616, #1d2740); border-color: #4a4026; }
.mein-monat > strong { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.mein-monat .kacheln3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: .5rem 0; text-align: center; }
.mein-monat .kacheln3 div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .2rem; min-width: 0; }
.mein-monat .zahl { display: block; font-size: 1.1rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.mein-monat small { display: block; font-size: .74rem; line-height: 1.3; color: var(--muted); font-weight: 600; }
.mein-monat .vormonat { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .35rem; }

/* ---------- Chips (Pillen wie .stimmung/.pegel im Entwurf) ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; font-size: .75rem; font-weight: 700; line-height: 1.5;
  padding: 2px 9px; border-radius: 20px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ERL, .chip.GEN, .chip.GEL, .chip.UEB { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.GEP, .chip.BEA, .chip.OFF, .chip.ANG { background: #3a3220; color: var(--gold-licht); border-color: transparent; }
.chip.ABG, .chip.ABS, .chip.ZUR { background: #262f45; color: var(--muted); border-color: transparent; }
.chip.ABL { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.chip.NEU, .chip.VER, .chip.AUS, .chip.EIN { background: var(--info-bg); color: var(--info); border-color: transparent; }

/* ---------- Formulare ---------- */
label { display: block; font-size: .85rem; font-weight: 700; color: var(--fg); margin-bottom: .8rem; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), label.chk { font-weight: 400; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 400; color: var(--fg);
  background: var(--feld); border: 1px solid var(--feld-linie); border-radius: 8px; }
input[type="file"] { display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: .9rem; font-weight: 400; }
input[type="file"]::file-selector-button { font: inherit; font-size: .85rem; font-weight: 700; padding: 7px 12px; margin-right: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--fg); }
input::placeholder, textarea::placeholder { color: #6f7890; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 192, 90, .25); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gold-dunkel); flex: none; }
textarea { min-height: 7rem; resize: vertical; }
.formular label.chk { display: flex; gap: .55rem; align-items: center; }
.formular label.chk input { margin: 0; }
.formular .hilfe { font-size: .8rem; color: var(--muted); margin: -.5rem 0 .8rem; }
.radios { border: 0; padding: 0; margin: 0 0 .8rem; }
.radios legend { font-size: .85rem; font-weight: 700; color: var(--fg); margin-bottom: .35rem; padding: 0; }

/* ---------- Knöpfe ---------- */
button[hidden], .knopf[hidden] { display: none !important; }  /* .knopf setzt display – hidden sonst wirkungslos */
button, .knopf { font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3; border-radius: 10px; padding: 11px 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center; -webkit-tap-highlight-color: transparent; }
.gold { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); font-weight: 700; }
.gold:active { background: #d4aa45; border-color: #d4aa45; }
.hell, .hell.knopf { background: var(--surface); border-color: var(--line); color: var(--fg); }
.hell:active { background: var(--surface-2); }
.rot { background: #c94848; border-color: #c94848; color: #fff; font-weight: 700; }
.gross { width: 100%; margin-top: .6rem; }
.knopfreihe { display: flex; gap: 8px; }
.knopfreihe button, .knopfreihe .knopf, .knopfreihe > label { flex: 1; min-width: 0; }
.klein-knopf { padding: 7px 12px; font-size: .85rem; border-radius: 8px; }
.route-knopf { margin: .4rem 0 .2rem; }
.zurueck-knopf { margin-bottom: .8rem; padding: 8px 14px; font-size: .9rem; }
.papier { font-size: .85rem; margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; color: var(--muted); }
.papier a { color: var(--navy2); }
.kontakt { margin-top: .7rem; }
.kontakt .knopf { display: block; margin-top: .35rem; word-break: break-all; }

/* ---------- Meldungen ---------- */
.meldung { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; background: var(--info-bg); color: var(--fg); font-size: .92rem; }
.meldung.error { background: var(--crit-bg); color: #fcd4d4; }
.meldung.success { background: var(--ok-bg); color: #c8f0d8; }
.meldung.warning { background: var(--warn-bg); color: #f6dcae; }
.meldung.abw-URL { background: var(--info-bg); color: var(--info); }
.meldung.abw-KRA, .meldung.abw-KKR { background: var(--crit-bg); color: var(--crit); }
/* Offline-Modus der Helfer-App (core/js/offline.js) */
.meldung.warteschlange { background: var(--warn-bg); color: #f6dcae; }
.meldung.warteschlange .klein { margin-top: .4rem; }
.meldung.warteschlange button { margin-top: .5rem; width: auto; padding: 7px 14px; font-size: .9rem; }
.meldung.offline { background: #262f45; color: var(--fg); }

/* ---------- Unterschrift ---------- */
.signatur-rahmen { position: relative; background: #fbfaf6; border: 2px dashed #6f7890; border-radius: 12px; margin-bottom: .8rem; overflow: hidden; }
#sig { width: 100%; height: 220px; display: block; touch-action: none; }
.signatur-rahmen .linie { position: absolute; left: 1rem; right: 1rem; bottom: 2.2rem; border-top: 1px solid #b9bfca;
  font-size: .75rem; color: #5f6676; padding-top: .2rem; pointer-events: none; }

/* ---------- Kalender ---------- */
.wochenleiste { display: flex; gap: 4px; align-items: stretch; margin: .3rem 0 .6rem; }
.wochenleiste a { flex: 1; min-width: 0; text-align: center; text-decoration: none; color: var(--navy); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 5px 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; font-weight: 700; }
.wochenleiste a small { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.wochenleiste a i { font-style: normal; font-size: .65rem; color: var(--gold-dunkel); font-weight: 700; }
.wochenleiste a.heute { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.wochenleiste a.an { background: var(--gold); border-color: var(--gold); color: var(--auf-gold); }
.wochenleiste a.an small { color: #4a3a12; }
.wochenleiste a.an i { color: var(--auf-gold); }
.tagesraster { display: grid; grid-template-columns: 2rem 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.tagesraster .achse div { height: 52px; font-size: .7rem; color: var(--muted); text-align: right; padding-right: .25rem; border-top: 1px solid #232d45; }
.tagesraster .spalte { position: relative; border-left: 1px solid var(--line); }
.tagesraster .linie { height: 52px; border-top: 1px solid #232d45; }
.tagesraster .blk { position: absolute; border: 1px solid var(--surface); border-radius: 7px; padding: 3px 6px; color: #fff; text-decoration: none;
  font-size: .82rem; line-height: 1.3; overflow: hidden; background: var(--block); }
.tagesraster .blk small { display: block; opacity: .85; }
.blk.AB { background: #2c6a6e !important; }
.blk.DZ { background: #6a3d78 !important; }
.blk.EG { background: var(--gold) !important; color: var(--auf-gold) !important; }
.blk.ERL b::before { content: "✓ "; }
.leer-hinweis { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--muted); }

/* ---------- Kacheln (Melden) ---------- */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: .8rem 0; }
.kachel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 8px; text-align: center; text-decoration: none;
  color: var(--navy); font-weight: 700; font-size: .92rem; line-height: 1.3; }
.kachel:active { border-color: var(--gold); background: #222c46; }
.kachel span { display: block; font-size: 1.5rem; line-height: 1.2; margin-bottom: .3rem; }

/* ---------- Hinweis-Fenster (Mitteilungen, Deadline, Geburtstag) ---------- */
/* Fenster (Hinweis, Neuerungen, Deadline): das ganze Fenster scrollt – Mausrad/Touchpad wirkt auch neben der Karte –
   und der Knopf zum Schließen klebt unten im Bild. So ist er auch bei langem Text sofort sichtbar
   (Chromebook/Android blenden die Scrollleiste aus, man sieht sonst nicht, dass es weitergeht). */
.hinweis-fenster { position: fixed; inset: 0; z-index: 50; background: rgba(5, 9, 18, .7); display: flex; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hinweis-karte { background: var(--surface); border-radius: 14px; width: 100%; max-width: 460px; margin: auto; flex: none;
  padding: 16px 16px 0; border-top: 4px solid var(--gold); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); border: 1px solid var(--line); }
.hinweis-unten { position: sticky; bottom: -16px; margin: .4rem -16px 0; padding: 12px 16px 16px; background: var(--surface);
  border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; display: grid; gap: 8px; }
.hinweis-unten form { margin: 0; }
.hinweis-unten .gross { width: 100%; margin-top: 0; }
.hinweis-karte.wichtig { border-top-color: var(--crit); }
.hinweis-karte h2 { margin: .3rem 0 .5rem; font-size: 1.2rem; }
.hinweis-karte p { margin: 0 0 .6rem; line-height: 1.5; }
.hinweis-kopf { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-dunkel); font-weight: 700; }
.hinweis-karte.wichtig .hinweis-kopf { color: var(--crit); }

/* ---------- Untere Leiste ---------- */
.unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: rgba(15, 22, 40, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* höchstens 5 Punkte, Schrift mind. 13 px (ältere Helferinnen) – Bezirk, Idee, Regeln stehen im Menü ☰ oben */
.unten a { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 9px 2px 9px; color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.unten a svg { width: 24px; height: 24px; display: block; }
.unten a.an { color: var(--accent); font-weight: 700; }
.unten .sym-rahmen { position: relative; display: block; }
.unten .chat-punkt b { position: absolute; top: -5px; right: -11px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; box-sizing: border-box;
  background: var(--gold); color: var(--auf-gold); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }

/* ---------- Flüssiger Seitenwechsel: Kopf und Menüleiste unten bleiben stehen ---------- */
@view-transition { navigation: auto; }
.kopf { view-transition-name: av-kopf; }
nav.unten { view-transition-name: av-unten; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
::view-transition-group(av-kopf), ::view-transition-group(av-unten) { animation: none; }
::view-transition-old(av-kopf), ::view-transition-old(av-unten) { animation: none; opacity: 0; }
::view-transition-new(av-kopf), ::view-transition-new(av-unten) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* Ladebalken oben, während die nächste Seite im Hintergrund lädt (core/js/seitenwechsel.js) */
.av-ladebalken { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, #8a6420, #c69829 30%, #f6e7c1 55%, #e9c05a 70%, #c69829); box-shadow: 0 0 6px rgba(233, 192, 90, .7); }
.av-ladebalken.an { width: 85%; transition: width 4s cubic-bezier(.1, .7, .2, 1); }

/* Angehörigen-Portal (familie/): Nachricht der Familie / Einkaufswunsch auf der Einsatz-Karte */
.familie-notiz { background: var(--info-bg); border-radius: 8px; padding: 6px 9px; margin: 6px 0; font-size: .9rem; }

/* ---------- Helles Aussehen (Schalter oben im Kopf, Wahl bleibt auf dem Gerät gespeichert) ---------- */
html[data-thema="hell"] {
  color-scheme: light;
  --navy: #15233e; --navy2: #1c2d4d; --navy-2: #1c2d4d; --block: #1c2d4d;
  --gold: #c69829; --gold-dunkel: #8a6420; --accent: #8a6420; --auf-gold: #241a05;
  --bg: #f8f6f1; --bg-2: #f3f1ec; --surface: #ffffff; --surface-2: #f8f6f1; --line: #e2ddd2;
  --fg: #1d2433; --muted: #5f6676; --grau: #5f6676; --leise: #5f6676;
  --ok: #2f7d55; --ok-bg: #e3f2ea; --warn: #a3620e; --warn-bg: #fbeed6; --crit: #b23b3b; --crit-bg: #f8e1e1;
  --info: #2b4a7e; --info-bg: #e8edf6; --info-line: #cdd7ea;
  --feld: #ffffff; --feld-linie: #d5cfc2;
  --gold-flaeche: #fff8e6; --gold-chip: #f5e6b8; --gold-chip-text: #5c4a12;
}
html[data-thema="hell"] .kopf { background: #15233e; border-bottom: 3px solid var(--gold); }
html[data-thema="hell"] .kopf .s { color: #d9cfae; }
html[data-thema="hell"] .kopf > .abmelden button, html[data-thema="hell"] .thema-knopf,
html[data-thema="hell"] .menue-knopf { border-color: rgba(246, 231, 193, .35); color: #f6e7c1; }
html[data-thema="hell"] .menue[open] .menue-knopf { border-color: var(--gold); color: #e9c05a; }
html[data-thema="hell"] .menue-liste { box-shadow: 0 14px 40px rgba(21, 35, 62, .25); }
html[data-thema="hell"] .ansicht-als button { color: #15233e; }
html[data-thema="hell"] .warnung, html[data-thema="hell"] .meldung.warning, html[data-thema="hell"] .meldung.warteschlange { color: #6b4108; }
html[data-thema="hell"] .meldung.error { color: #8a2626; }
html[data-thema="hell"] .meldung.success { color: #235f40; }
html[data-thema="hell"] .meldung.offline { background: #e9e7e1; color: #3d4352; }
html[data-thema="hell"] .karte.mein-monat { background: #fcf8ee; border-color: #ecdfbd; }
html[data-thema="hell"] .chip.GEP, html[data-thema="hell"] .chip.BEA, html[data-thema="hell"] .chip.OFF, html[data-thema="hell"] .chip.ANG { background: #f6e7c1; color: #6e4f12; }
html[data-thema="hell"] .chip.ABG, html[data-thema="hell"] .chip.ABS, html[data-thema="hell"] .chip.ZUR { background: #ecebe7; }
html[data-thema="hell"] input::placeholder, html[data-thema="hell"] textarea::placeholder { color: #9aa0ab; }
html[data-thema="hell"] .rot { background: var(--crit); border-color: var(--crit); }
html[data-thema="hell"] .wochenleiste a.an { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-thema="hell"] .wochenleiste a.an small { color: #f6e7c1; }
html[data-thema="hell"] .wochenleiste a.an i { color: #e9c05a; }
html[data-thema="hell"] .tagesraster .achse div, html[data-thema="hell"] .tagesraster .linie { border-top-color: #efece5; }
html[data-thema="hell"] .tagesraster .blk { border-color: #fff; }
html[data-thema="hell"] .kachel:active { background: #fffcf4; }
html[data-thema="hell"] .hinweis-fenster { background: rgba(21, 35, 62, .55); }
html[data-thema="hell"] .hinweis-karte { box-shadow: 0 14px 40px rgba(21, 35, 62, .3); }
html[data-thema="hell"] .unten { background: rgba(255, 255, 255, .96); box-shadow: 0 -2px 10px rgba(21, 35, 62, .05); }

/* Hell/Dunkel-Schalter im Kopf */
.thema-knopf { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin-left: auto; border-radius: 8px;
  background: transparent; border: 1px solid var(--line); color: var(--muted); }
.thema-knopf svg { width: 18px; height: 18px; }
.thema-knopf + .abmelden { margin-left: 8px; }
/* Menü ☰ im Kopf (termine/base_mobil.html): Bezirk, Idee, Regeln, App, Abmelden */
.menue { position: relative; flex: none; margin-left: 8px; }
.menue-knopf { list-style: none; display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); color: var(--fg); }
.menue-knopf::-webkit-details-marker { display: none; }
.menue-knopf svg { width: 22px; height: 22px; }
.menue[open] .menue-knopf { border-color: var(--gold); color: var(--gold); }
.menue-liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); padding: 6px; z-index: 20; display: grid; }
.menue-liste a, .menue-liste .abmelden button { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; color: var(--fg);
  text-decoration: none; font-size: 16px; font-weight: 700; background: transparent; border: 0; width: 100%; text-align: left; }
.menue-liste .abmelden { margin: 4px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
.menue-liste .abmelden button { color: var(--muted); }
.menue-liste a:active, .menue-liste .abmelden button:active { background: var(--surface-2); }
.menue-liste svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.thema-knopf .sonne { display: none; }
html[data-thema="hell"] .thema-knopf .sonne { display: block; }
html[data-thema="hell"] .thema-knopf .mond { display: none; }

/* ---------- Als App aufs Handy (core/js/app.js) ---------- */
.app-hinweis:not([hidden]) { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px 12px;
  background: linear-gradient(135deg, var(--gold-flaeche), var(--surface-2)); border-color: #4a4026; }
html[data-thema="hell"] .app-hinweis:not([hidden]) { border-color: #ecdfbd; }
.app-hinweis img { border-radius: 11px; }
.app-hinweis b { display: block; color: var(--navy); }
.app-hinweis .leise { display: block; font-size: .85rem; }
.app-hinweis-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; }
.app-hinweis-knoepfe > * { flex: 1; padding: 9px 12px; }
.app-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.app-kopf img { border-radius: 16px; flex: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.app-kopf h1 { margin: 0 0 .2rem; }
.app-kopf p { margin: 0; }
.anleitung > summary { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; font-weight: 700; color: var(--navy); }
.anleitung > summary::-webkit-details-marker { display: none; }
.anleitung > summary::after { content: "›"; margin-left: auto; color: var(--accent); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.anleitung[open] > summary::after { transform: rotate(90deg); }
.anleitung .dein { display: none; font-size: .72rem; background: var(--gold); color: var(--auf-gold); border-radius: 10px; padding: 1px 8px; }
.anleitung.dein-geraet { border-color: var(--gold); }
.anleitung.dein-geraet .dein { display: inline-block; }
.schritte { margin: .6rem 0 .3rem; padding-left: 1.3rem; display: grid; gap: .5rem; }
.schritte li::marker { color: var(--accent); font-weight: 700; }
.sym { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
.nur-installierbar, .nur-als-app { display: none; }
.kann-installieren .nur-installierbar, .als-app .nur-als-app { display: block; }

/* ---------- Startseite „Heute“: nächster Einsatz groß ---------- */
h1.heute-titel { font-size: 1.75rem; margin-bottom: .1rem; }
.heute-zeile { color: var(--muted); font-size: 1.05rem; margin-bottom: .8rem; }
.karte.als-naechstes { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); padding: 14px 16px; }
.als-naechstes .wann { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--navy); }
.als-naechstes .wer { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.chip.naechstes { background: var(--gold-chip); color: var(--gold-chip-text); border-color: transparent; font-size: .85rem; }
.chip.naechstes::before { display: none; }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: .6rem 0 .3rem; }
.aktionen .aktion { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 10px 8px; margin: 0;
  font-size: 1rem; background: var(--surface-2); border: 2px solid var(--line); color: var(--fg); }
.aktionen .aktion.anruf { border-color: var(--ok); color: var(--ok); }
.aktionen .aktion:active { border-color: var(--gold); }
.als-naechstes .abschliessen { font-size: 1.1rem; padding: 15px 14px; }
.hinweis-zeit { margin: .5rem 0 0; }
/* „Ich komme später“: große Auswahl 10/20/30/45 Min. */
.spaeter-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spaeter-wahl legend { grid-column: 1 / -1; }
.spaeter-wahl label { margin: 0; }
.spaeter-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.spaeter-wahl span { display: block; text-align: center; padding: 14px 4px; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 1rem; background: var(--surface-2); }
.spaeter-wahl input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--auf-gold); }
.spaeter-wahl input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Abschließen: tatsächliche Zeit */
.zeit-karte .knopfreihe label { margin-bottom: .4rem; }