:root {
  /* Die Namen sind historisch – „teal“ trägt jetzt Indigo. Umbenennen würde
     jede Fundstelle in app.js anfassen, ohne dass sich etwas ändert. */
  --teal: #241a7d; --teal-d: #150e52; --teal-l: #E4E4FB; --auf-teal: #ffffff;
  --bg: #F5F5FC; --card: #ffffff; --flaeche-2: #F3F3FB; --line: #E4E4F4;
  --text: #04040D; --muted: #6A6483;
  /* Jede Semantikfarbe kommt als Dreiklang: Schrift, Flaeche, Rand. Ohne den
     Rand laesst sich im Dunkeln keine Flaeche vom Grund abheben. */
  --warn: #8F5009; --warn-d: #6E3D06; --warn-bg: #FBF0DF; --warn-rand: #F0DCBC;
  --danger: #A82B43; --danger-bg: #FBE3E7; --danger-rand: #F0C4CC;
  --ok: #0F6B4B; --ok-bg: #E2F4ED; --ok-rand: #C4E6DA;
  --info: #3D2FA8; --info-bg: #E7E7FA;
  /* Materialien und Flaechen, die im Dunkeln etwas anderes bedeuten */
  --kopf-material: rgba(36,26,125,.84);
  --leiste-material: rgba(255,255,255,.72);
  --menue-material: rgba(21,14,82,.92);
  --abdunklung: rgba(15,23,42,.45);
  --nav-aktiv-flaeche: #ffffff; --nav-aktiv-text: var(--teal);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 14px;
  /* Karte, schwebende Flaeche und Dialog sind drei verschiedene Hoehen ueber
     der Seite. Vorher trugen alle denselben Schatten. */
  --schatten-1: 0 1px 2px rgba(19,14,81,.06), 0 1px 3px rgba(19,14,81,.07);
  --schatten-2: 0 4px 14px rgba(19,14,81,.10);
  --schatten-3: 0 18px 44px rgba(19,14,81,.22), 0 2px 6px rgba(19,14,81,.08);
  --shadow: var(--schatten-1);
  --fokus: #241a7d; --fokus-ring: rgba(36,26,125,.20);
  /* Feste Kopfhoehe, damit die Navigation darunter rechnen kann. */
  /* Abstandsskala. Vorher standen 166 Abstaende in fuenf willkuerlichen
     Werten (4/6/8/10/12 px) direkt im Markup. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --kopf: 56px; --seitenleiste: 236px;
  --breite-schmal: 820px; --breite-weit: 1320px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5;
}
.center-screen { min-height: 100vh; display: grid; place-items: center; }
/* Wartebild innerhalb einer Ansicht. Es steht sofort im Dokument, ist aber
   180 ms lang unsichtbar: kommt die Antwort vorher – aus dem Zwischenspeicher
   oder ueber ein schnelles Netz –, hat es nie jemand gesehen. Und es nimmt
   nicht die volle Bildschirmhoehe ein, also springt das Layout nicht. */
.ladet { min-height: 220px; display: grid; place-items: center;
  opacity: 0; animation: ladet-ein 0s linear 180ms forwards; }
@keyframes ladet-ein { to { opacity: 1; } }
.spinner { width: 34px; height: 34px; border: 3px solid var(--teal-l); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Layout */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Sticky Header: oben Logo + Login, darunter die Navigation (umbrechend, kein Scrollen) */
header.topbar {
  background: var(--teal); color: #fff; position: sticky; top: 0; z-index: 1000;
  padding-top: env(safe-area-inset-top); box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* Die Leiste als durchscheinendes Material statt als undurchsichtiger Streifen:
   der Inhalt scrollt sichtbar darunter durch, statt an einer harten Kante zu
   verschwinden. Die helle Innenlinie oben ist das Licht, das sich im Material
   faengt – ohne sie wirkt die Flaeche flach aufgeklebt. Nur dort, wo der
   Browser `backdrop-filter` kann; sonst bleibt der volle Farbton stehen. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.topbar {
    background: var(--kopf-material);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 18px rgba(15,23,42,.10);
  }
}
.topbar-top {
  width: 100%; min-height: var(--kopf);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px;
}
.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.user-btn { background: rgba(255,255,255,.16); color: #fff; border: 0; padding: 7px 12px; font-size: .85rem; border-radius: 8px; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .user-btn:hover { background: rgba(255,255,255,.26); } }
.hamburger { display: none; background: rgba(255,255,255,.16); color: #fff; border: 0; font-size: 1.15rem; padding: 6px 12px; border-radius: 8px; }
/* Unterhalb der Seitenleisten-Schwelle klappt die Navigation aus dem ☰ auf. */
@media (max-width: 999.98px) { .hamburger { display: inline-flex; align-items: center; } }
@media (hover: hover) { .hamburger:hover { background: rgba(255,255,255,.26); } }

/* Die Navigation ist ein Geschwister der Kopfzeile, kein Kind: die Kopfzeile
   traegt `backdrop-filter` und wuerde als Bezugsrahmen fuer eine feste
   Positionierung dienen — die Seitenleiste haenge sonst am Kopf statt am
   Fenster. */
.mainnav {
  display: none;
  position: fixed; left: 0; right: 0; z-index: 1001;
  top: calc(env(safe-area-inset-top) + var(--kopf));
  max-height: calc(100dvh - env(safe-area-inset-top) - var(--kopf));
  overflow-y: auto;
  /* Platz unten, damit die Daumenleiste den letzten Eintrag nicht verdeckt. */
  padding: 10px 10px calc(84px + env(safe-area-inset-bottom));
  background: var(--teal-d); box-shadow: var(--schatten-2);
  border-radius: 0 0 14px 14px;
}
.mainnav.open { display: block; }
.nav-bereich { margin-top: 10px; }
.nav-bereich:first-of-type { margin-top: 6px; }
.nav-titel {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(228,228,251,.55); padding: 0 12px 5px;
}
.mainnav a {
  display: flex; align-items: center; gap: 11px;
  color: rgba(255,255,255,.92); text-decoration: none;
  padding: 11px 12px; border-radius: 9px; font-size: .95rem; font-weight: 500;
}
.mainnav a .sym { width: 19px; height: 19px; opacity: .85; }
.mainnav a.active .sym { opacity: 1; }
.mainnav .nav-text { flex: 1; min-width: 0; }
.mainnav .nav-badge { margin-left: auto; }

/* Umschalter breit/schmal. Er steht oben in der Leiste, weil man ihn einmal
   einstellt und danach nicht mehr sucht. */
.nav-schmaler {
  display: none; width: 100%; align-items: center; gap: 11px;
  background: rgba(255,255,255,.08); border: 0; color: rgba(228,228,251,.72);
  padding: 9px 12px; border-radius: 9px; margin-bottom: 10px;
  font: 500 .82rem var(--sans, inherit); text-align: left; cursor: pointer;
}
.nav-schmaler .sym { width: 17px; height: 17px; }
@media (hover: hover) { .mainnav a:hover { background: rgba(255,255,255,.12); } }
.mainnav a.active { background: var(--nav-aktiv-flaeche); color: var(--nav-aktiv-text); font-weight: 700; }

/* Zwei Breiten: Formulare und Listen schmal, Tabellen und Karten weit. Eine
   Zeile ueber die volle Breite eines Schreibtischbildschirms liest sich
   schlecht, eine zehnspaltige Tabelle in 900 px aber auch nicht. */
main.content { flex: 1; padding: 16px; max-width: var(--breite-schmal); margin: 0 auto; width: 100%; padding-bottom: 40px; }
main.content.breit { max-width: var(--breite-weit); }

/* Ab hier ist Platz fuer eine stehende Leiste. Sie ersetzt das Hamburger-Menue
   und zeigt alle vier Bereiche gleichzeitig. */
@media (min-width: 1000px) {
  .nav-schmaler { display: flex; }
  .mainnav {
    display: block;
    top: calc(env(safe-area-inset-top) + var(--kopf)); bottom: 0; right: auto;
    width: var(--seitenleiste); max-height: none;
    background: linear-gradient(180deg, #1d1466, #120c47);
    border-radius: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.07);
    padding: 14px 10px 24px;
  }
  main.content, .ausgang-banner { margin-left: var(--seitenleiste); }
  main.content { width: auto; }
  .hamburger { display: none !important; }
}

/* Schmale Darstellung: Navigation ins Hamburger-Menü einklappen */
@media (max-width: 720px) {
  .user-btn span { max-width: 24vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
}
/* Das aufgeklappte Menue schwebt ueber dem Inhalt – ein schwereres, dunkleres
   Material als die Leiste darueber, damit die beiden Ebenen unterscheidbar
   bleiben. */
/* Bis zur Seitenleisten-Schwelle, nicht nur bis 720 px: dazwischen klappt die
   Navigation ebenfalls aus dem ☰ auf. */
@media (max-width: 999.98px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mainnav {
      background: var(--menue-material);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      backdrop-filter: blur(24px) saturate(160%);
    }
  }
}

/* Feste Leiste am unteren Bildschirmrand für die drei Wege, die im Feld
   ständig gebraucht werden. Am unteren Rand, weil dort der Daumen liegt –
   das Hamburger-Menü oben rechts ist einhändig kaum zu erreichen. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px; text-decoration: none; color: var(--muted);
    font-size: .72rem; font-weight: 600; letter-spacing: .015em; border-radius: 10px; min-height: 52px;
  }
  .tabbar a .tb-icon { font-size: 1.25rem; line-height: 1; }
  .tabbar a.active { color: var(--teal); background: var(--teal-l); }
  /* Platz schaffen, damit die Leiste nichts verdeckt – auch keine Modal-Knöpfe. */
  main.content { padding-bottom: 84px; }
  .modal { margin-bottom: 68px; }
}
/* Auch die Daumenleiste laesst den Inhalt durchscheinen. Statt der harten
   1px-Kante ein weicher Uebergang: man sieht, dass da noch etwas weitergeht. */
@media (max-width: 720px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar {
      background: var(--leiste-material);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border-top: 1px solid rgba(255,255,255,.55);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 -6px 20px rgba(15,23,42,.08);
    }
    .tabbar a.active { background: var(--teal-l); }
  }
}

/* Cards / lists */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h2 { margin: 0 0 4px; font-size: 1.1rem; }
.card h3 { margin: 0 0 8px; font-size: 1rem; }
/* Spur und Zeilenhoehe haengen an der Schriftgroesse: grosse Zeilen wirken
   sonst auseinandergezogen, kleine zusammengedraengt. Ueberschriften enger,
   Kleintext (Tabellenkoepfe, Pillen, Leistenbeschriftung) etwas weiter. */
h1, h2, h3, h4 { letter-spacing: -.015em; line-height: 1.25; }
h1 { letter-spacing: -.025em; line-height: 1.15; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
/* Eine Knopfgruppe in einer Filterzeile. Als gewoehnliche Zelle bekaeme sie
   die halbe Breite, und vier Knoepfe staenden dort untereinander, waehrend
   daneben Platz frei bleibt. Sie nimmt deshalb eine eigene Zeile, sobald es
   eng wird. */
.row-aktionen { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.row-aktionen > button { flex: 0 0 auto; }
@media (max-width: 720px) { .row > .row-aktionen { flex-basis: 100%; } }
.muted { color: var(--muted); font-size: .88rem; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; }
.pill.offen { background: var(--info-bg); color: var(--info); }
.pill.abgeschlossen { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.needs-fill { background: var(--warn-bg); border-left: 4px solid var(--warn); }

/* Forms */
label { display: block; font-size: .82rem; color: var(--text); margin: 10px 0 4px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; background: var(--card); color: var(--text);
  /* Ohne diese Zeile setzt der Browser `textarea` und die Datumsfelder in
     seine eigene Schrift – meist Schreibmaschine. Im selben Formular stuenden
     dann zwei Schriften nebeneinander. Der Vorlagen-Editor (.mv-eingabe) waehlt
     seine Schreibmaschinenschrift ausdruecklich und bleibt davon unberuehrt. */
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--fokus-ring);
}
textarea { min-height: 70px; resize: vertical; }

/* Der Dateiwaehler kommt sonst als grauer Systemknopf in der Schrift des
   Browsers – an zehn Stellen der Anwendung, mitten zwischen eigenen Knoepfen.
   `::file-selector-button` gibt ihm dasselbe Aussehen wie `button.ghost`. */
input[type="file"] { padding: 7px 10px; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .92rem;
  margin: 0 10px 0 0; padding: 7px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--flaeche-2); color: var(--text);
  transition: background-color .16s ease-out, border-color .16s ease-out;
}
@media (hover: hover) {
  input[type="file"]:not(:disabled)::file-selector-button:hover {
    background: var(--card); border-color: var(--teal); color: var(--teal);
  }
}

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--teal); color: var(--auf-teal); border: 0; padding: 12px 16px; border-radius: 10px;
  font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
@media (hover: hover) { button:hover, .btn:hover { background: var(--teal-d); } }
@media (hover: hover) { .btn.ghost:hover { background: var(--flaeche-2); color: var(--text); } }
button.secondary, .btn.secondary { background: var(--card); color: var(--teal); border: 1px solid var(--teal); }
button.ghost, .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.danger, .btn.danger { background: var(--danger); }
button:disabled { background: var(--line); color: var(--muted); border-color: var(--line);
  opacity: 1; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; }
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo .badge { width: 56px; height: 56px; border-radius: 14px; background: var(--teal); color: #fff;
  display: grid; place-items: center; font-size: 1.6rem; margin: 0 auto 8px; }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-family: var(--mono); font-weight: 500; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .13em; }
/* Eine abgeschnittene Tabelle sah bisher aus wie eine vollstaendige. Der
   Verlauf am rechten Rand verschwindet erst, wenn ans Ende gescrollt ist –
   `background-attachment: local` blendet ihn beim Scrollen selbst aus.
   Die eigentliche Loesung waere eine Kartenliste unter 640 px; bis dahin
   sagt wenigstens etwas, dass es weitergeht. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
    linear-gradient(to right, rgba(19,14,81,.16), rgba(19,14,81,0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(19,14,81,.16), rgba(19,14,81,0)) right center / 14px 100% no-repeat scroll;
}
/* Betraege und Mengen liest man von rechts; tabellarische Ziffern lassen die
   Kommata untereinander fluchten, sonst springt die Spalte je Zeile. */
th.zahl, td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
th.mitte, td.mitte { text-align: center; }

/* Camera / foto */
.foto-box { border: 2px dashed var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.foto-box.dragover { border-color: var(--teal); background: var(--teal-l); }
.foto-preview { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; object-fit: contain; border-radius: 10px; margin-top: 10px; }

/* Großes Zählerstand-Eingabefeld (Vorkomma schwarz / Nachkomma rot getrennt) */
.stand-input { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.stand-input input { font-size: 1.7rem; font-weight: 700; letter-spacing: 2px; text-align: center; padding: 12px 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.stand-input .stand-whole { flex: 1 1 auto; min-width: 0; text-align: right; padding-right: 12px; }
.stand-input .stand-dec { flex: 0 0 88px; width: 88px; color: #745A99; border-color: var(--line);
  background: var(--flaeche-2); text-align: left; padding-left: 12px; }
.stand-input .stand-comma { font-size: 1.7rem; font-weight: 700; color: #745A99; }

/* Alerts */
.alert { padding: 10px 12px; border-radius: 10px; margin: 10px 0; font-size: .9rem; }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.err { background: var(--danger-bg); color: var(--danger); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }

.section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 4px 2px 16px; }
.section-title h1 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin: 0; letter-spacing: -.03em; line-height: 1.1; }
/* Hat eine Ansicht eine eigene Aussage als Überschrift, tritt der
   Ansichtsname zurück — zwei große Überschriften konkurrieren. */
.section-title.leise h1 { font-size: 1.15rem; letter-spacing: -.01em; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stat .stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--teal);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .stat-label { font-size: .8rem; color: var(--muted); margin-top: 3px; }

/* Eine feste Region statt lose angehaengter Elemente: zwei Meldungen kurz
   nacheinander lagen bisher exakt uebereinander, man sah nur die letzte.
   `aria-live` sagt sie zusaetzlich an. */
#toasts {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  /* column-reverse: die neueste Meldung erscheint unten, dort wo sie
     hereinkommt; aeltere werden nach oben weggeschoben. */
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  z-index: 4000; pointer-events: none; max-width: 92vw;
}
.toast {
  display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer;
  background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: .9rem; box-shadow: var(--schatten-2); max-width: 100%;
  text-align: left; animation: toast-ein .18s ease-out both;
}
.toast.zu { animation: toast-aus .18s ease-in both; }
@keyframes toast-ein { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-aus { to { opacity: 0; transform: translateY(4px); } }
/* Vier Arten, die sich nicht nur in der Farbe unterscheiden – das Zeichen
   davor trennt sie auch dort, wo Farbe nicht ankommt. */
.toast::before { font-weight: 700; flex: 0 0 auto; }
.toast-ok { background: #14532d; }
.toast-ok::before { content: '✓'; }
.toast-warn { background: #7c4a06; }
.toast-warn::before { content: '!'; }
.toast-err { background: #8f1d1d; }
.toast-err::before { content: '✕'; }

h4 { font-size: .95rem; }

/* Mindestgroesse fuer Tippziele: 44 px, wie es die Qualitaetskontrolle dieses
   Projekts verlangt. Gemessen fehlten vorher ueberall nur Kleinigkeiten – der
   Ortungsknopf lag bei 43 px, der Hamburger bei 33, der Kontoknopf bei 30.
   Die Kopfleiste ist 56 px hoch bei 6 px Innenabstand, ihre 44 px Innenraum
   nehmen die beiden also auf, ohne dass sie waechst.

   Bewusst nicht auf `.ghost` in Tabellen: die dortigen Knoepfe („Endwert",
   „Anfang erfassen") stehen in dichten Zeilen, und 44 px je Zeile blaehen die
   Liste auf, ohne dass jemand danebentippt – sie stehen weit auseinander. */
button, .btn, .seg button, .hamburger, .user-btn { min-height: 44px; }
table button, table .btn, .stat button { min-height: 0; }

/* Segmented control */
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--flaeche-2); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.seg button { flex: 1 1 auto; min-width: 0; white-space: nowrap; background: transparent; color: var(--muted);
  border: 0; padding: 9px 10px; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.seg button.active { background: var(--card); color: var(--teal); box-shadow: var(--shadow); }

/* Drei deutsche Reiterbeschriftungen passen auf dem Telefon nicht in eine
   Zeile. Bisher rutschte der letzte allein in eine zweite und stand dort
   mittig – das liest sich wie ein Fehler. Stattdessen teilen sich alle die
   Zeile und brechen im Knopf um: gleich breit, gleich hoch, keine Waise. */
@media (max-width: 640px) {
  .seg { flex-wrap: nowrap; }
  .seg button {
    flex: 1 1 0; white-space: normal; hyphens: auto;
    padding: 8px 6px; font-size: .82rem; line-height: 1.25;
  }
}

/* Vier Reiter sind für eine Zeile zu viel: Unter „Pflege" stehen seit den
   Abnahmestellen vier nebeneinander, und „Vorschläge" brach in drei Zeilen
   um. Genau vier stehen deshalb zwei über zwei – gleich breit, keine Waise.
   Wer nicht freigeben darf, sieht dort nur drei und behält die eine Zeile.
   Ohne :has() bleibt es bei der Regel darüber: eng, aber vollständig. */
@media (max-width: 640px) {
  .seg:has(> button:nth-child(4):last-child) { flex-wrap: wrap; }
  .seg:has(> button:nth-child(4):last-child) > button { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
}

/* Modal */
.modal-wrap { position: fixed; inset: 0; background: var(--abdunklung); z-index: 3000; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal { background: var(--card); width: 100%; max-width: 640px; border-radius: 16px 16px 0 0; max-height: 92vh;
  display: flex; flex-direction: column; box-shadow: var(--schatten-3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
@media (min-width: 780px) {
  .modal-wrap { align-items: center; }
  .modal { border-radius: 16px; }
}
/* Hinein und hinaus auf demselben Weg: auf dem Telefon faehrt der Dialog von
   unten herein und nach unten wieder hinaus, auf breiten Schirmen waechst er
   aus sich heraus und schrumpft dorthin zurueck. Die Kurve ist die flache
   Sheet-Kurve – schneller Start, langes Ausschwingen, kein Nachfedern. */
@keyframes grund-ein { from { opacity: 0; } }
@keyframes grund-aus { to { opacity: 0; } }
@keyframes sheet-ein { from { transform: translateY(100%); } }
@keyframes sheet-aus { to { transform: translateY(100%); } }
@keyframes dialog-ein { from { transform: scale(.96); opacity: 0; } }
@keyframes dialog-aus { to { transform: scale(.97); opacity: 0; } }

.modal-wrap { animation: grund-ein .18s ease-out both; }
.modal { animation: sheet-ein .34s cubic-bezier(.32,.72,0,1) both; }
.modal-wrap.zu { animation: grund-aus .2s ease-in both; pointer-events: none; }
.modal-wrap.zu .modal { animation: sheet-aus .22s cubic-bezier(.4,0,1,1) both; }
@media (min-width: 780px) {
  .modal { animation: dialog-ein .22s cubic-bezier(.32,.72,0,1) both; }
  .modal-wrap.zu .modal { animation: dialog-aus .16s ease-in both; }
}

/* Aufklappbares Modul */
details.collapsible { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; }
details.collapsible > summary { cursor: pointer; font-weight: 600; color: var(--teal); list-style: none; display: flex; align-items: center; gap: 6px; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::after { content: '▸'; margin-left: auto; transition: transform .2s; color: var(--muted); }
details.collapsible[open] > summary::after { transform: rotate(90deg); }

/* Karte */
.map { height: 60vh; min-height: 320px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
#dash-map { height: 46vh; min-height: 280px; }
/* Karte im Freigabe-Dialog: klein genug, dass Gegenueberstellung und Fotos
   darunter noch sichtbar bleiben - sie ist ein Beleg, nicht der Inhalt. */
.map-klein { height: 220px; min-height: 0; }
.leaflet-container { font: inherit; }

/* OCR-Auswahl (verschiebbar/größenveränderbar, touch-tauglich) */
.ocr-sel { position: absolute; box-sizing: border-box; border: 2px solid #8f8cff;
  background: rgba(143,140,255,.20); box-shadow: 0 0 0 9999px rgba(15,23,42,.55); cursor: move; touch-action: none; }
.ocr-h { position: absolute; width: 26px; height: 26px; background: #8f8cff; border: 2px solid #fff;
  border-radius: 50%; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ocr-h[data-h="nw"] { left: -13px; top: -13px; cursor: nwse-resize; }
.ocr-h[data-h="ne"] { right: -13px; top: -13px; cursor: nesw-resize; }
.ocr-h[data-h="sw"] { left: -13px; bottom: -13px; cursor: nesw-resize; }
.ocr-h[data-h="se"] { right: -13px; bottom: -13px; cursor: nwse-resize; }

/* Einführungs-Tour */
.tour-catch { position: fixed; inset: 0; z-index: 4998; }
.tour-ring { position: fixed; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(15,23,42,.6); z-index: 4999; pointer-events: none; transition: top .2s, left .2s, width .2s, height .2s; }
.tour-box { position: fixed; z-index: 5000; background: var(--card); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 14px; }
.tour-h { font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.tour-d { font-size: .9rem; margin-bottom: 12px; line-height: 1.45; }
.tour-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-box button { padding: 8px 12px; font-size: .88rem; }

/* Anleitung */
.help p { margin: 6px 0; }
.help ul, .help ol { margin: 6px 0 8px 20px; }
.help li { margin: 4px 0; }
/* Blöcke aus der Mail-Auszeichnung (services/mailVorlage.js), wiederverwendet
   für den in der Anwendung bearbeitbaren Datenschutzhinweis (#/datenschutz) –
   dieselben Namen wie in den E-Mail-Vorlagen, damit ein Werkzeug für beides
   gilt. Bewusst eigene, einfachere Farben statt der E-Mail-Vorlage: Hier
   gelten die App-Variablen, kein style-Attribut-Export nötig. */
.help .hinweis { background: var(--teal-l); border-left: 4px solid var(--teal); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.help .warnung { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: 6px; padding: 10px 14px; margin: 10px 0; color: var(--warn); }
.help .box, .help .kasten { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.help .dezent { color: var(--muted); font-size: .85rem; }
.help .code { font-family: var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.help h1, .help h2 { margin: 14px 0 6px; }
.help h1:first-child, .help h2:first-child { margin-top: 0; }

/* Anleitung als Wiki: Sidebar + Suche + Artikel mit Bild/Video rechts neben
   dem Text. Nutzt ausschließlich bestehende Variablen, keine neuen Farben. */
.anl-wrap { display: flex; align-items: flex-start; gap: var(--s5); }
.anl-side { width: var(--seitenleiste); flex: none; position: sticky; top: calc(var(--kopf) + var(--s3)); }
.anl-search { margin-bottom: var(--s3); }
.anl-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); font: inherit; }
.anl-gruppe { font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; font-size: .68rem;
  color: var(--muted); padding: 10px 10px 4px; }
.anl-link { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent;
  border-radius: 8px; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; }
.anl-link:hover { background: var(--flaeche-2); }
.anl-link.active { background: var(--teal-l); color: var(--teal); font-weight: 600; }
.anl-leer { font-size: .82rem; color: var(--muted); font-style: italic; padding: 8px 10px; }
.anl-main { flex: 1; min-width: 0; }
.anl-crumb { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.anl-main h1 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 0 0 6px; letter-spacing: -.02em; }
.anl-lede { color: var(--muted); font-size: .95rem; max-width: 66ch; margin: 0 0 var(--s5); }
.anl-schritt { display: grid; grid-template-columns: 32px 1fr 200px; column-gap: var(--s4); row-gap: var(--s2);
  margin-bottom: var(--s5); align-items: start; }
.anl-num { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-l); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; font-family: var(--mono); }
.anl-text p { margin: 0; max-width: 68ch; }
.anl-media { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--schatten-1); }
.anl-media img, .anl-media video { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .anl-schritt { grid-template-columns: 32px 1fr; }
  .anl-media { grid-column: 2; width: 170px; }
}
.anl-verwandt { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.anl-verwandt h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem;
  color: var(--muted); margin: 0 0 var(--s3); }
.anl-verwandt button { font: inherit; font-size: .82rem; background: var(--flaeche-2); border: 1px solid var(--line);
  color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 0 var(--s2) var(--s2) 0; }
.anl-verwandt button:hover { border-color: var(--teal); color: var(--teal); }
.anl-ergebnisse { display: flex; flex-direction: column; gap: var(--s3); max-width: 74ch; }
.anl-ergebnis { display: block; width: 100%; text-align: left; font: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--schatten-1); cursor: pointer; }
.anl-ergebnis:hover { border-color: var(--teal); }
.anl-ergebnis-bereich { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--muted); margin-bottom: 3px; }
.anl-ergebnis-titel { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.anl-ergebnis-snippet { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.anl-ergebnis-snippet mark, .anl-link mark { color: var(--text); }
mark { background: var(--teal-l); color: var(--teal); padding: 0 2px; border-radius: 3px; }
.anl-toc-toggle { display: none; }
@media (max-width: 720px) {
  .anl-wrap { flex-direction: column; }
  .anl-side { position: static; width: 100%; }
  .anl-toc-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: var(--s3);
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
  #anl-nav { display: none; }
  #anl-nav.anl-offen { display: block; }
}

/* Fotogalerie */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gal-item { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); }
.gal-item img { width: 100%; height: 150px; object-fit: contain; display: block; background: var(--flaeche-2); }
.gal-item figcaption { padding: 8px 10px; font-size: .82rem; }

/* Diagramme */
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Große, gut tippbare Primär-Buttons */
button.big, .btn.big { padding: 15px 18px; font-size: 1.05rem; border-radius: 12px; }

/* Anklickbare Kennzahlen-Karten */
.stat-grid.two { grid-template-columns: 1fr 1fr; }
/* Eine Kachel ist ein Knopf – ohne diese Regel gewinnt das globale
   `button { display: inline-flex }` und Zahl und Beschriftung landen
   nebeneinander statt uebereinander. */
button.stat { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 0; text-align: left; font: inherit; }
button.stat.tappable { cursor: pointer; border: 1px solid var(--line); background: var(--card); }
@media (hover: hover) { button.stat.tappable:hover { background: var(--flaeche-2); } }
.alert.warn[onclick] { cursor: pointer; }

/* Sticky Speichern-Leiste (mobil) */
.save-bar { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); margin-top: 14px; z-index: 15; }
.save-bar button { box-shadow: 0 4px 14px rgba(36,26,125,.32); }

/* Größere Touch-Ziele für Formulareingaben auf dem Smartphone */
@media (max-width: 780px) {
  input, select, textarea { padding: 13px 12px; font-size: 16px; } /* 16px verhindert iOS-Zoom */
  .seg button { padding: 11px 8px; }
  .card { padding: 14px; }
  table th, table td { padding: 10px 6px; }
}


/* Schrittanzeige (z. B. Turnusablesung: Termin wählen -> Ablesungen erfassen) */
.schritte { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.schritte span {
  flex: 1; min-width: 120px; text-align: center; padding: 8px 10px; border-radius: 10px;
  background: var(--flaeche-2); color: var(--muted); font-size: .84rem; font-weight: 600;
  border: 1px solid var(--line);
}
.schritte span.aktiv { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Anschlusspositionen: Bezeichnung links, Anzahl rechts */
.anschluss-grid { display: flex; flex-direction: column; gap: 6px; }
.anschluss-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--flaeche-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
  margin: 0; font-weight: 500;
}
.anschluss-zeile input { width: 88px; margin: 0; text-align: right; }



/* Ausgang: Offline-Erfassungen (Banner + Zähler) */
.ausgang-banner {
  display: block; background: var(--warn); color: #fff; text-decoration: none;
  padding: 10px 16px; font-size: .9rem; text-align: center;
}
@media (hover: hover) { .ausgang-banner:hover { background: var(--warn-d); } }
.nav-badge, [data-ausgang-badge] {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--warn); color: #fff; border-radius: 9px; font-size: .72rem;
  font-weight: 700; text-align: center; line-height: 18px;
}
.pill.err { background: var(--danger-bg); color: var(--danger); }
/* Wartend ist ein Zustand, haengend ein Vorfall – nur Letzteres ruft. */
.nav-badge-haengt { background: var(--danger); }

/* ---- E-Mail-Vorlagen bearbeiten ---- */
/* Zwei Spalten: links schreiben, rechts sehen, was ankommt. Auf schmalen
   Geräten untereinander – die Vorschau ist dort nur zum Nachsehen da. */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mv-werkzeuge button { flex: 0 0 auto; min-width: 0; padding: 5px 10px; font-size: .82rem; }
.mv-eingabe { min-height: 420px; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: .86rem; line-height: 1.5; }
.mv-vorschau { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mv-tab.active { background: var(--line); }

/* ---- Tastaturfokus ----
   Bis hierher war Fokus genau einmal definiert (fuer Eingabefelder, in einem
   Mintton, der auf Weiss praktisch unsichtbar war). Diese drei Regeln machen
   jede Schaltflaeche, jeden Reiter und jede Kachel mit der Tastatur auffindbar.
   `:focus-visible` heisst: nur bei Tastatur, nicht nach einem Mausklick. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 6px;
}
.topbar :focus-visible, .ausgang-banner:focus-visible, .tabbar a:focus-visible { outline-color: #fff; }
.tabbar a:focus-visible { outline-color: var(--fokus); }

/* Karten und Hinweisbänder, die zu einer Adresse springen, sind Links statt
   div mit onclick – sonst sind sie mit der Tastatur nicht erreichbar und ein
   Klick mit gedrückter Befehlstaste öffnet keinen neuen Tab. Die Farbe der
   Hinweisbänder bleibt: `.alert.warn` ist spezifischer als `a.alert`. */
a.card, a.alert { display: block; text-decoration: none; }
a.card { color: inherit; }

/* ---- Prüfansicht: Messuhr, Befundzeilen, Belegvergleich ----
   Bausteine für die Jahreskontrolle. Sie arbeiten mit den Daten, die der
   Server ohnehin liefert – Abweichung, Ampel, beide Vergleichswerte. */
.stat.dunkel {
  background: linear-gradient(155deg, #3a2aa8, #1b1266 60%, #100b45);
  border-color: #241a7d; color: #fff; position: relative; overflow: hidden;
  /* Diese Kachel ist in beiden Erscheinungsbildern dunkel. Die hellen
     Ampelfarben gelten sonst nur im Dunkelmodus – hier gelten sie immer,
     sonst stuende ein gruener Betrag mit Kontrast 1,6 auf dem Indigo. */
  --ok: #5FD3A6; --danger: #F08497; --warn: #E5A93F;
}
.stat.dunkel::after {
  content: ''; position: absolute; width: 200px; height: 200px; right: -70px; top: -90px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(178,182,252,.30), transparent 68%);
}
.stat.dunkel > * { position: relative; z-index: 1; }
.stat.dunkel .stat-label { color: rgba(228,228,251,.66); }
.messuhr { display: block; width: 100%; max-width: 200px; margin: 4px auto 0; }

/* Eine Zeile je Zähler, der ein Urteil braucht. Aufklappbar: darin stehen die
   beiden Werte, aus denen sich die Abweichung ergibt. */
details.befund-block { margin-bottom: 8px; }
details.befund-block > summary { list-style: none; cursor: pointer; }
details.befund-block > summary::-webkit-details-marker { display: none; }
.befund {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; min-height: 56px;
}
details.befund-block[open] > summary .befund { border-radius: 11px 11px 0 0; border-bottom: 0; }
.befund .mk {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  flex: 0 0 auto; font-weight: 700; font-size: .8rem;
}
.mk-warn { background: var(--warn-bg); color: var(--warn); }
.mk-err { background: var(--danger-bg); color: var(--danger); }
.befund .txt { flex: 1; min-width: 0; }
.befund .txt b { display: block; font-weight: 600; }
.befund .txt span { color: var(--muted); font-size: .85rem; }
.befund .pfeil { color: var(--muted); transition: transform .2s; }
details.befund-block[open] > summary .pfeil { transform: rotate(90deg); }

.beleg-auf {
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px;
  background: var(--card); padding: 14px;
}
.quellen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
@media (max-width: 700px) { .quellen { grid-template-columns: 1fr; gap: 10px; } }
.quelle { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; background: var(--flaeche-2); }
.quelle .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }
.quelle .w { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; margin-top: 5px; }
.quelle .n { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.bruecke { display: grid; place-items: center; padding: 0 8px; }
@media (max-width: 700px) { .bruecke { padding: 0; } }

/* ---- Hilfsklassen ----
   Nur so viele, wie tatsaechlich gebraucht werden. Sie ersetzen keine
   Bauteilregel — sie nehmen den wiederkehrenden Abstaenden das Ausdenken ab.
   Neue Ansichten benutzen diese Klassen statt eines style-Attributs. */
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.m-0  { margin: 0; }
/* Kleintext gab es in .78, .8 und .82 rem — drei Werte innerhalb von 0,04 rem.
   Der gemeinsame ist der groesste davon: draussen wird bei Sonnenlicht
   gelesen. */
.klein { font-size: .82rem; }

/* ---- Symbole ----
   Sie folgen der Schriftgroesse und der Farbe ihres Elternelements. Dadurch
   faerbt sich das Symbol in der Daumenleiste mit, sobald der Reiter aktiv ist —
   was ein Emoji nie konnte. */
.sym {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  vertical-align: -.2em; display: inline-block;
}
button .sym, .btn .sym { margin-right: -1px; }
.brand .sym { width: 1.25em; height: 1.25em; }
.tabbar a .sym { width: 22px; height: 22px; }
.login-logo .badge .sym { width: 28px; height: 28px; }
.p-av .sym { width: 18px; height: 18px; }
h1 .sym { width: .9em; height: .9em; }
/* In den Hinweisbaendern steht das Symbol vor dem Text und soll ihn nicht
   nach unten druecken. */
.alert .sym { vertical-align: -.16em; margin-right: 2px; }

/* ---- Kontextkopf ----
   Sagt vor allen Bedienelementen, wo man ist: welcher Zähler, welcher
   Standort, der wievielte von wie vielen. Im Feld ist das die erste Frage,
   und bisher stand die Antwort nur im zugeklappten Auswahlfeld. */
.kontext {
  background: linear-gradient(150deg, #2d1f8f, #160f57);
  color: #fff; border-radius: var(--radius); padding: 15px 18px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.kontext::after {
  content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(178,182,252,.32), transparent 68%);
}
.kontext > * { position: relative; z-index: 1; }
.kontext-oben { display: flex; align-items: center; gap: 10px; }
.kontext .etikett { color: rgba(228,228,251,.62); }
.kontext h2 {
  margin: 5px 0 0; font-size: clamp(1.15rem, 4.4vw, 1.4rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
}
.kontext .unten { display: block; margin-top: 5px; }
.kontext .netz {
  margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(224,168,60,.24); border: 1px solid rgba(240,190,110,.42);
  padding: 4px 10px; border-radius: 999px;
}
.kontext .netz .etikett { color: #F5CFA0; }
.kontext .netz .sym { width: 13px; height: 13px; color: #F5CFA0; }
.fortschritt { display: flex; gap: 3px; margin-top: 13px; }
.fortschritt i { flex: 1; height: 5px; border-radius: 3px; background: rgba(228,228,251,.20); }
.fortschritt i.fertig { background: #B2B6FC; }
.fortschritt i.jetzt { background: #fff; }
.fortschritt-fuss { display: flex; justify-content: space-between; margin-top: 8px; }
.fortschritt-fuss .etikett { color: rgba(228,228,251,.62); }

/* ---- Feldweg: Zählerliste, Antworten, Tabellen als Karten ---- */
.feld-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--schatten-1); padding: 12px 14px; margin-bottom: 10px;
}
.feld-karte.unvollstaendig { border-left: 3px solid var(--warn); }
.feld-kopf { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.feld-kopf .txt { flex: 1; min-width: 0; }
.feld-kopf .txt b { display: block; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.feld-kopf .txt > span { display: block; color: var(--muted); font-size: .84rem; }
.e-ring { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; }
.e-ring .m {
  position: absolute; font-family: var(--mono); font-size: .62rem; font-weight: 600; color: var(--text);
}
.fehlt {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-rand);
  padding: 5px 9px; border-radius: 7px; text-align: right; max-width: 40%;
}
.fehlt.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-rand); }
.feld-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Antworten unter einer Warnung: sie schreiben sich als Notiz mit, damit der
   Wert gespeichert werden kann und der Fall begründet ist. */
.plausi-antworten { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.plausi-antworten .etikett { color: var(--muted); margin-bottom: 2px; }
.plausi-antworten button { justify-content: flex-start; text-align: left; min-height: 48px; }
.plausi-antworten button.gewaehlt {
  border-color: var(--teal); color: var(--teal); background: var(--teal-l); font-weight: 600;
}

/* Unter 640 px wird aus jeder Datentabelle eine Liste von Karten. Die
   Spaltennamen stehen als `data-spalte` an den Zellen — gesetzt von
   `tabellenBeschriften()`, damit keine Ansicht sie von Hand mitschreiben muss. */
@media (max-width: 640px) {
  /* Erst umschalten, wenn die Tabelle beschriftet ist. Sonst kann die Seite
     fuer den einen Frame davor seitlich rutschen. */
  .table-scroll:has(table[data-beschriftet="ja"]) { overflow-x: visible; background: none; }
  table[data-beschriftet="ja"] { display: block; }
  /* Der Browser schiebt zwischen `table` und `tr` ein `tbody` ein, auch wenn im
     Markup keines steht. Bleibt es `table-row-group`, schrumpft es auf die
     Breite seines Inhalts und die Karten stehen halb so breit wie die Seite,
     mit einer toten Spalte daneben. */
  table[data-beschriftet="ja"] > tbody { display: block; }
  table[data-beschriftet="ja"] tr:first-child { display: none; }   /* Kopfzeile entfällt */
  table[data-beschriftet="ja"] tr {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 4px 12px; margin-bottom: 8px;
  }
  table[data-beschriftet="ja"] tr.needs-fill { border-left: 3px solid var(--warn); }
  table[data-beschriftet="ja"] td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; text-align: right;
  }
  table[data-beschriftet="ja"] tr td:last-child { border-bottom: 0; }
  table[data-beschriftet="ja"] td::before {
    content: attr(data-spalte);
    font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted); text-align: left; flex: 0 0 auto; padding-top: 2px;
  }
  table[data-beschriftet="ja"] td:empty { display: none; }
}

/* Fußzeile einer Kennzahl: woran die Zahl hängt. */
.stat-fuss {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
/* In gesperrten Versalien fasst eine Haelfte nur rund dreizehn Zeichen.
   „Einnahmen 17,9k €" passt also nicht neben „Kosten 17,7k €". Abschneiden
   waere hier falsch – es traefe die Zahl, und genau die ist der Bezug.
   Deshalb darf die Zeile umbrechen; der Platz dafuer ist fest reserviert,
   damit die Kacheln einer Reihe trotzdem gleich hoch stehen. */
.stat-fuss { flex-wrap: wrap; min-height: 2.35em; align-content: flex-start; }
/* Nicht `margin-left: auto` – das schluckt den freien Platz und erzwingt den
   Umbruch auch dort, wo beide Haelften nebeneinander passen wuerden.
   `flex: 1 1 auto` nimmt nur den Rest und richtet den Text rechts aus; bricht
   die Zeile doch um, fuellt die zweite Haelfte die Zeile und steht rechts. */
.stat-fuss > span:last-child { flex: 1 1 auto; text-align: right; }
.stat.dunkel .stat-fuss { color: rgba(228,228,251,.5); }

/* Verteilung der Abweichungen über alle Zähler. */
.verteilung {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin-top: 14px;
}
.verteilung-text { flex: 1; min-width: 150px; }
.verteilung-text b { display: block; font-weight: 600; }
.verteilung-text .etikett { color: var(--muted); }
.mk-ok { background: var(--ok-bg); color: var(--ok); }
.verteilung svg { flex: 0 0 auto; }

/* Aktionen unter einem aufgeklappten Beleg. Bewusst nur, was es gibt: der
   Verlauf und die Ablesungen desselben Zählers helfen beim Urteil. */
.beleg-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---- Prüfansicht: Krume, Leitband, Empfehlung ---- */
.krume {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.krume b { color: var(--text); font-weight: 600; }
.krume-pfeil { opacity: .5; }
.krume-jahr { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.krume-jahr select { width: auto; padding: 6px 10px; font-size: .9rem; }

.leitband {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: 12px; margin-bottom: 18px;
  background: linear-gradient(100deg, var(--flaeche-2), var(--card) 62%, var(--warn-bg));
  border: 1px solid var(--line);
}
.leitband p { margin: 0; flex: 1; min-width: 220px; color: var(--muted); }
.leitband b { color: var(--text); font-weight: 600; }
.chip-hoch {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; white-space: nowrap;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-rand);
  padding: 5px 11px; border-radius: 999px;
}
.vorschlag { display: flex; align-items: center; gap: 8px; color: var(--teal); margin-bottom: 8px; }
.vorschlag .sym { width: 15px; height: 15px; }
h1.empfehlung {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em;
  font-weight: 600; margin: 0 0 22px; max-width: 22ch;
}

/* Toleranz im Panel statt vor dem Ergebnis */
.p-toleranz { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(178,182,252,.14); }
.p-tol-felder { display: flex; gap: 8px; margin-top: 8px; }
.p-tol-felder label { flex: 1; margin: 0; }
.p-tol-felder .etikett { display: block; color: rgba(178,182,252,.58); margin-bottom: 4px; }
.p-tol-felder input {
  background: rgba(4,4,13,.5); border-color: rgba(178,182,252,.20); color: #fff; padding: 8px 10px;
}
.p-toleranz .muted { color: rgba(228,228,251,.55); }
.p-toleranz .btn-block { border-color: rgba(178,182,252,.25); color: rgba(228,228,251,.9); }

/* ---- Prüfansicht: Arbeitsbereich und dunkles Panel ----
   Zwei Spalten erst, wenn wirklich Platz ist. Darunter steht das Panel unter
   dem Arbeitsbereich statt daneben – gequetscht liest es sich schlechter als
   gestapelt. */
.pruef-raster { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1280px) {
  .pruef-raster { grid-template-columns: minmax(0, 1fr) 360px; }
}
.pruef-arbeit { min-width: 0; }

.pruef-panel {
  background: linear-gradient(170deg, #1d1560, #0b0830 62%, #04040D);
  color: rgba(228,228,251,.85); border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
}
.pruef-panel::before {
  content: ''; position: absolute; width: 360px; height: 360px; left: -130px; top: -110px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(116,90,153,.38), transparent 66%);
}
.pruef-panel > * { position: relative; z-index: 1; }
.pruef-panel .etikett, .p-etikett { color: rgba(178,182,252,.58); }

.p-kopf { display: flex; align-items: center; gap: 11px; }
.p-av {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, #8f8cff, #3f2fb0); color: #fff; font-size: 1rem; flex: 0 0 auto;
}
.p-kopf b { display: block; color: #fff; font-size: 1rem; font-weight: 600; }
.p-kopf .etikett { display: block; margin-top: 2px; }

.p-ring { display: flex; gap: 14px; align-items: center; }
.p-ring svg { flex: 0 0 auto; }
.p-ring p { margin: 0; font-size: .84rem; line-height: 1.5; }
.p-ring b { color: #fff; }

.p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chip {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 7px; color: rgba(228,228,251,.85);
  background: rgba(178,182,252,.10); border: 1px solid rgba(178,182,252,.16);
}
.p-chip b { color: #fff; }

.p-schritte { display: flex; flex-direction: column; gap: 10px; font-size: .84rem; line-height: 1.5; }
.p-schritt { display: flex; gap: 9px; }
.p-schritt .pk { width: 5px; height: 5px; border-radius: 50%; background: var(--indigo-hell, #B2B6FC); margin-top: 7px; flex: 0 0 auto; }
.p-schritt em { color: #fff; font-style: normal; font-weight: 600; }

.p-fall { background: rgba(4,4,13,.5); border: 1px solid rgba(178,182,252,.14); border-radius: 12px; padding: 13px 14px; }
.p-fall > b { display: block; color: #fff; font-size: .96rem; }
.p-fall > span { display: block; font-size: .82rem; color: rgba(228,228,251,.6); margin-top: 2px; }
.p-werte { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.p-werte span { display: flex; justify-content: space-between; font-size: .85rem; color: #fff; }
.p-werte i {
  font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(178,182,252,.6); align-self: center;
}
.p-grenze { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(178,182,252,.14); }
.p-grenze b { display: block; color: #fff; font-size: .86rem; margin-bottom: 5px; }
.p-grenze p { margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(228,228,251,.72); }

/* Fußleiste zum Durchgehen der Fälle. Ab der zweispaltigen Schwelle schwebt
   sie über dem Arbeitsbereich, darunter steht sie im Fluss. */
.fall-leiste {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 9px 10px 9px 16px; box-shadow: var(--schatten-1);
}
.fall-leiste .wer { flex: 1; min-width: 0; }
.fall-leiste .wer b { display: block; font-weight: 600; font-size: .92rem; }
.fall-leiste .wer span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fall-leiste .blaettern {
  display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .74rem;
  color: var(--schiefer, var(--text)); border-left: 1px solid var(--line); padding-left: 14px;
}
.fall-leiste .blaettern button {
  width: 34px; height: 34px; min-height: 0; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0;
}
@media (min-width: 1280px) {
  .pruef-arbeit .fall-leiste {
    position: sticky; bottom: 16px; z-index: 20;
    box-shadow: var(--schatten-2); margin-right: 376px;
  }
}
/* Im Dialog: die Entscheidung rechts, der Gegenstand links, und beide dürfen
   umbrechen statt sich zu zerdrücken. */
.modal .fall-leiste { flex-wrap: wrap; padding: 12px 14px; }
.modal .fall-leiste .wer { flex: 1 1 190px; }
.modal .fall-leiste button { flex: 0 0 auto; }
.fall-leiste .wer b { overflow-wrap: anywhere; }
/* ---- Stammdaten: einklappbare Bereiche ---- */
details.bereich { padding: 0; }
details.bereich > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; min-height: 56px;
}
details.bereich > summary::-webkit-details-marker { display: none; }
details.bereich > summary > .section-title { flex: 1; min-width: 0; margin: 0; }
details.bereich > summary > .pfeil { color: var(--muted); transition: transform .2s; flex: 0 0 auto; }
details.bereich[open] > summary > .pfeil { transform: rotate(90deg); }
details.bereich[open] > summary { border-bottom: 1px solid var(--line); }
.bereich-inhalt { padding: 14px 16px 16px; }
@media (prefers-reduced-motion: reduce) { details.bereich > summary > .pfeil { transition: none; } }

/* ---- Schmale Leiste: nur Symbole ----
   Die Breite haengt an `--seitenleiste`; weil sowohl die Leiste als auch der
   Inhalt darauf zugreifen, genuegt es, die Variable auf der Schale zu setzen. */
@media (min-width: 1000px) {
  .app-shell.leiste-schmal { --seitenleiste: 68px; }
  .leiste-schmal .mainnav { padding: 14px 8px 24px; }
  .leiste-schmal .mainnav a { justify-content: center; padding: 12px 0; gap: 0; }
  .leiste-schmal .nav-text { display: none; }
  .leiste-schmal .nav-titel {
    /* Aus der Bereichsueberschrift wird ein Trennstrich – die Gruppierung
       bleibt sichtbar, ohne Platz zu brauchen. */
    height: 1px; padding: 0; margin: 12px 8px; overflow: hidden;
    background: rgba(255,255,255,.14); color: transparent;
  }
  .leiste-schmal .nav-schmaler { justify-content: center; padding: 9px 0; }
  .leiste-schmal .mainnav a .sym { width: 21px; height: 21px; }
  /* Der Zaehler haette in der schmalen Leiste keinen Platz mehr neben der
     Beschriftung – er sitzt deshalb am Symbol. */
  .leiste-schmal .mainnav a { position: relative; }
  .leiste-schmal .mainnav .nav-badge {
    position: absolute; top: 4px; right: 12px; margin: 0;
  }
}

.befund.gewaehlt { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(36,26,125,.10); }

/* Erst hier, nach der Grundregel: sonst gewinnt deren `position: relative`.
   Das Panel bleibt beim Scrollen stehen und scrollt notfalls in sich. */
@media (min-width: 1280px) {
  .pruef-panel {
    position: sticky; top: 16px;
    max-height: calc(100dvh - 32px); overflow-y: auto;
  }
}

/* ---- Plausibilität am Erfassungspunkt ----
   Drei Zustände: berechnet (dunkel, ruhig), nachsehen (Warnfarbe), stimmt nicht
   (Fehlerfarbe). Die Zahl steht links und groß, weil sie das Erste ist, worauf
   man schaut. */
.plausi {
  display: flex; gap: 13px; align-items: center;
  border-radius: 12px; padding: 13px 15px; margin-top: 12px;
}
.plausi .w {
  font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; line-height: 1.05; flex: 0 0 auto;
}
.plausi-uhr { flex: 0 0 auto; margin: -4px 0 -8px -4px; }
.plausi-text { min-width: 0; }
/* Die Balken sitzen unter der Karte und teilen deren Grund, damit beides als
   ein Block liest. */
.plausi-balken {
  display: flex; align-items: flex-end; gap: 3px; height: 34px;
  margin-top: -12px; padding: 0 15px 13px; border-radius: 0 0 12px 12px;
}
.plausi-balken i { flex: 1; border-radius: 2px 2px 0 0; display: block; }
.plausi.plausi-ok + .plausi-balken { margin-top: -1px; }
.plausi b { display: block; font-weight: 600; font-size: .98rem; }
.plausi span { display: block; font-size: .85rem; margin-top: 2px; line-height: 1.4; }
.plausi-ok {
  background: linear-gradient(155deg, #241a7d, #100b45 70%); color: rgba(228,228,251,.82);
}
.plausi:has(+ .plausi-balken) { border-radius: 12px 12px 0 0; margin-bottom: 0; }
.plausi-ok b, .plausi-ok .w { color: #fff; }
.plausi-warn { background: var(--warn-bg); color: #7a5518; border: 1px solid var(--warn-rand); }
.plausi-warn b, .plausi-warn .w { color: var(--warn); }
.plausi-err { background: var(--danger-bg); color: #8f1d2e; border: 1px solid var(--danger-rand); }
.plausi-err b, .plausi-err .w { color: var(--danger); }

/* ---- Knöpfe: Verhalten ----
   Vier Entscheidungen, alle aus derselben Regel: Rückmeldung gehört auf das
   Drücken, nicht auf das Loslassen.

   1. Zwei Dauern statt einer. Hinein 60 ms — der Knopf hat unter dem Daumen
      schon nachgegeben, bevor man es bemerkt. Zurück 260 ms auf einer Kurve
      ohne Nachfedern. Eine einzige Dauer für beide Richtungen wirkt entweder
      träge beim Drücken oder schnippisch beim Loslassen.
   2. Abdunkeln statt nur verkleinern. Ein Knopf über die volle Breite bewegt
      beim Verkleinern seine Kante um wenige Pixel und sieht damit fast
      unverändert aus. Die Abdunklung sieht man in jeder Größe.
   3. Je größer die Fläche, desto weniger Weg — sonst wackelt der Rand
      sichtbar. Kleine Ziele dürfen deutlicher nachgeben.
   4. `touch-action: manipulation` nimmt die rund 300 ms, die der Browser sonst
      auf einen möglichen Doppeltipp wartet. Das ist die spürbarste Änderung
      dieser ganzen Datei und kostet ein Wort.
   Die Hover-Zustände stehen weiter oben an ihrer jeweiligen Regel hinter
   `hover: hover`. */
button, .btn, .tabbar a, .user-btn, .hamburger, .mainnav a, .ausgang-banner, a.card, a.alert {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .26s cubic-bezier(.32,.72,0,1),
              background-color .16s ease-out, color .16s ease-out;
}
button::after, .btn::after, .tabbar a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #000; opacity: 0; transition: opacity .26s cubic-bezier(.32,.72,0,1);
}
button:not(:disabled):active, .btn:active, .tabbar a:active,
.user-btn:active, .hamburger:active, .mainnav a:active, .ausgang-banner:active,
a.card:active, a.alert:active {
  transform: scale(var(--druck, .965)); transition-duration: .06s;
}
button:not(:disabled):active::after, .btn:active::after, .tabbar a:active::after {
  opacity: .10; transition-duration: .06s;
}
.btn-block, button.big, .btn.big, button.stat, .ausgang-banner, a.card, a.alert { --druck: .985; }
.mv-werkzeuge button, .hamburger, .user-btn, .mainnav a, .tabbar a { --druck: .94; }
.seg button { --druck: .95; }

/* Arbeitet gerade: die Beschriftung bleibt stehen, nur unsichtbar – so springt
   der Knopf nicht in der Breite und niemand tippt ein zweites Mal. */
button[aria-busy="true"] { color: transparent; pointer-events: none; }
button[aria-busy="true"]::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.32); border-top-color: #fff; border-radius: 50%;
  animation: knopf-dreht .7s linear infinite;
}
button.secondary[aria-busy="true"]::before, button.ghost[aria-busy="true"]::before {
  border-color: rgba(0,0,0,.14); border-top-color: var(--teal);
}
@keyframes knopf-dreht { to { transform: rotate(360deg); } }

/* Weniger Bewegung: die Abdunklung bleibt. Sie bewegt nichts und trägt die
   Rückmeldung auch dann. */
@media (prefers-reduced-motion: reduce) {
  button, .btn, .tabbar a, .user-btn, .hamburger, .mainnav a, .ausgang-banner {
    transition: background-color .16s ease-out, color .16s ease-out;
  }
  button:active, .btn:active, .tabbar a:active,
  .user-btn:active, .hamburger:active, .mainnav a:active, .ausgang-banner:active { transform: none; }
  button[aria-busy="true"]::before { animation-duration: 1.6s; }
}

/* ================= Dunkelmodus =================
   Draussen am Zaehler ist es abends dunkel, in einem Kellerraum immer. Ein
   weisses Vollbild auf voller Helligkeit blendet dort und verraet die Position.

   Es gibt keinen Schalter: die Systemeinstellung entscheidet. Ein eigener
   Schalter waere eine dritte Sache, die jemand pflegen muss, und die
   Betriebssysteme koennen das laengst — samt Zeitsteuerung.

   Umgestellt werden nur die Token. Kein Bauteil kennt hier eine Farbe. */
@media (prefers-color-scheme: dark) {
  :root {
    --teal: #8f8cff; --teal-d: #a5a3ff; --teal-l: #2A2260; --auf-teal: #12102b;
    --bg: #0D0A20; --card: #181633; --flaeche-2: #221E45; --line: #2E2A5C;
    --text: #E9E8F6; --muted: #A6A2C4;

    --warn: #E5A93F; --warn-d: #F0BE68; --warn-bg: #3A2A12; --warn-rand: #5C4520;
    --danger: #F08497; --danger-bg: #3A1622; --danger-rand: #5E2537;
    --ok: #5FD3A6; --ok-bg: #123329; --ok-rand: #1D5442;
    --info: #B2B6FC; --info-bg: #22205A;

    --kopf-material: rgba(18,12,58,.86);
    --leiste-material: rgba(24,22,51,.80);
    --menue-material: rgba(13,10,32,.94);
    --abdunklung: rgba(4,3,14,.66);
    --nav-aktiv-flaeche: #8f8cff; --nav-aktiv-text: #12102b;

    --fokus: #8f8cff; --fokus-ring: rgba(143,140,255,.28);
    --schatten-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
    --schatten-2: 0 4px 14px rgba(0,0,0,.45);
    --schatten-3: 0 18px 44px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.40);
    --shadow: var(--schatten-1);
  }
  /* Der Kopf ist im Hellen ein farbiger Streifen, im Dunkeln ein dunkler. Die
     Marke und die Knoepfe darin bleiben hell. */
  header.topbar { background: #150F42; }
  .mainnav { background: #100C33; }
  @media (min-width: 1000px) { .mainnav { background: linear-gradient(180deg, #171150, #0D0A26); } }

  /* Die Vorschau einer E-Mail bleibt hell: die Mail kommt beim Empfaenger
     hell an, und eine dunkle Vorschau wuerde etwas anderes zeigen als das,
     was verschickt wird. */
  .mv-vorschau { background: #ffffff; }

  /* Kartenkacheln von Leaflet sind hell. Ohne Daempfung leuchtet die Karte
     als einzige Flaeche aus der Seite heraus. */
  .leaflet-tile { filter: brightness(.82) saturate(.9); }
}