/* Terminwache – ruhig, luftig, mobil zuerst.
   Schrift: System-UI (iPhone: SF Pro, Windows: Segoe UI) – keine externen Schriften (Datenschutz).
   Zwei Gewichte (400/600), zwei Überschriftenstufen. Dunkelmodus folgt später. */

:root {
  /* Palette */
  --bg: #F1F0EC;          /* Warmweiß */
  --karte: #ffffff;
  --text: #343A40;        /* Anthrazit: Text und Überschriften */
  --leise: #6C737A;
  --linie: #E6E5E0;
  --akzent: #343A40;      /* Links und Knöpfe in Anthrazit – Farbe bleibt der Ampel vorbehalten */
  --akzent-hell: #F1F0EC;
  --schatten: 0 1px 2px rgba(52, 58, 64, .05), 0 1px 3px rgba(52, 58, 64, .04);
  --radius: 12px;
  --rand-aussen: 24px;
  --abstand-karten: 16px;
  --innen: 20px;

  /* Ampel in voller Sättigung: Streifen, Kalenderpunkte, Zähler-Zahlen */
  --gruen: #285B4A;
  --gelb: #E87935;        /* „orange“ in der Oberfläche */
  --rot: #A63D40;
  --grau: #B5B9B6;        /* offen */
  --grau-hell: #D9DDDA;   /* gestrichen, leere Zähler, Ränder */

  /* Chips: ca. 12 % der Farbe auf Weiß, Text und Icon in voller Farbe */
  --gruen-bg: #E5EBE9; --gruen-fg: #285B4A;
  --gelb-bg: #FCEFE7;  --gelb-fg: #E87935;
  --rot-bg: #F4E8E8;   --rot-fg: #A63D40;
  /* offen: Grau #D9DDDA ist als Schriftfarbe zu hell → dunkleres Grau für Text */
  --grau-bg: #EEF0EE;  --grau-fg: #6C737A;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 400;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 22px; line-height: 1.3; }
h2 { font-size: 17px; line-height: 1.4; }
p { margin: 0; }
a { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--grau); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
strong, b { font-weight: 600; }
small, .klein { font-size: 13px; }
.leise { color: var(--leise); }
.icon { flex: none; display: inline-block; vertical-align: -3px; }

/* Kopfzeile */
.kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--rand-aussen); background: var(--karte); box-shadow: var(--schatten);
}
.marke { font-weight: 600; color: var(--text); }
.marke, .marke:hover { text-decoration: none; }
.navi { display: flex; gap: 16px; align-items: center; font-size: 15px; }
.navi a { text-decoration: none; }
.navi a:not(.initialen) { color: var(--leise); }
.kanzlei { color: var(--leise); font-size: 14px; }

/* Seitenrahmen */
.inhalt { max-width: 1120px; margin: 0 auto; padding: var(--rand-aussen); }
.inhalt > * + * { margin-top: var(--abstand-karten); }
.inhalt--schmal { max-width: 440px; }
.kopfbereich { display: flex; flex-direction: column; gap: 4px; }
.brotkrumen { font-size: 14px; color: var(--leise); }
.brotkrumen a { color: var(--leise); text-decoration: none; }

/* Karten */
.karte {
  position: relative; overflow: hidden;
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: var(--innen);
}
.karte > * + * { margin-top: 12px; }
.karte--ampel { padding-left: calc(var(--innen) + 4px); }
.karte--ampel::before, .zeile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grau);
}
.karte--rot::before, .zeile--rot::before { background: var(--rot); }
.karte--gelb::before, .zeile--gelb::before { background: var(--gelb); }
.karte--gruen::before, .zeile--gruen::before { background: var(--gruen); }
.karte--offen::before, .zeile--offen::before { background: var(--grau); }
.zeile--gestrichen::before { background: transparent; }

.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--leise); font-size: 14px; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Meldungen und Warnbanner */
.meldung { padding: 14px var(--innen); border-radius: var(--radius); background: var(--karte); box-shadow: var(--schatten); }
.meldung--success { background: var(--gruen-bg); color: var(--gruen-fg); box-shadow: none; }
.meldung--error { background: var(--rot-bg); color: var(--rot-fg); box-shadow: none; }
/* Erfolgsmeldungen als Hinweis unten – bleiben sichtbar, auch wenn die Seite zu einem Termin springt */
.js .meldung--success {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20;
  width: min(480px, calc(100vw - 32px)); margin: 0 !important;
  background: var(--text); color: #fff; box-shadow: 0 10px 30px rgba(52, 58, 64, .3);
  transition: opacity .4s, transform .4s;
}
.js .meldung--success.weg { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.warnung {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--rot-bg); color: var(--rot-fg); border-radius: var(--radius); padding: 16px var(--innen);
}
.warnung ul { list-style: none; margin: 6px 0 0; padding: 0; }
.warnung li + li { margin-top: 2px; }
.warnung a { color: var(--rot-fg); }

/* Zähler-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kachel { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px; }
.kachel__zahl { display: block; font-size: 28px; line-height: 1.1; font-weight: 600; }
.kachel__label { display: block; font-size: 13px; color: var(--leise); margin-top: 4px; }
.kachel--rot .kachel__zahl { color: var(--rot); }
.kachel--gelb .kachel__zahl { color: var(--gelb); }
.kachel--offen .kachel__zahl { color: var(--leise); }
.kachel--null .kachel__zahl { color: var(--grau-hell); }
.kachel--rot .kachel__zahl, .kachel--gelb .kachel__zahl { font-weight: 600; }
.kacheln__hinweis { font-size: 13px; color: var(--leise); margin-top: 8px !important; }

/* Terminzeilen */
.liste { display: flex; flex-direction: column; gap: 8px; }
.liste__monat { font-size: 13px; font-weight: 600; color: var(--leise); margin: 16px 0 0 4px; }
.liste__monat:first-child { margin-top: 0; }
.zeile {
  position: relative; overflow: hidden; display: flex; gap: 16px; align-items: flex-start;
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 14px 16px 14px 20px; scroll-margin-top: 140px; scroll-margin-bottom: 24px;
  transition: box-shadow .3s ease, background-color .3s ease;
}
.zeile--kompakt { box-shadow: none; background: transparent; padding: 8px 0 8px 14px; border-radius: 0; }
.zeile--kompakt + .zeile--kompakt { border-top: 1px solid var(--linie); }
.zeile--kompakt::before { top: 10px; bottom: 10px; width: 4px; border-radius: 2px; }
.zeile__datum { flex: none; width: 108px; display: flex; flex-direction: column; }
.zeile__wochentag { font-size: 12px; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.zeile__tag { font-size: 18px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile__zeit { font-size: 12px; color: var(--leise); margin-top: 2px; }
.zeile--kompakt .zeile__datum { width: 92px; }
.zeile--kompakt .zeile__tag { font-size: 15px; }
.zeile__inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.zeile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zeile__notiz { font-size: 14px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__notiz .icon { margin-right: 4px; }
.zeile--gestrichen .zeile__tag, .zeile--gestrichen .zeile__wochentag { text-decoration: line-through; color: var(--leise); }
.zeile--gestrichen { background: transparent; box-shadow: none; border: 1px dashed var(--linie); }
.zeile--gestrichen .zeile__notiz { white-space: normal; }
.zeile.blink { box-shadow: 0 0 0 2px var(--text); background: #FAF9F6; }

/* Pillen */
.pille {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px;
}
.pille .icon { width: 14px; height: 14px; }
.pille small { font-weight: 400; font-size: 12px; }
.pille--anwesend { background: var(--gruen-bg); color: var(--gruen-fg); }
.pille--teilweise { background: var(--gelb-bg); color: var(--gelb-fg); }
.pille--verhindert { background: var(--rot-bg); color: var(--rot-fg); box-shadow: inset 0 0 0 1px var(--rot); }
.pille--offen { background: var(--grau-bg); color: var(--grau-fg); }
.pille--neutral { background: var(--grau-bg); color: var(--text); font-weight: 400; }
.pille--akzent { background: var(--akzent-hell); color: var(--akzent); font-weight: 400; }
.pille--kennzeichen { background: transparent; color: var(--grau-fg); border: 1px solid var(--grau-hell); font-weight: 400; padding: 5px 8px; }

/* Abschnitte, Umschalter, Tabs */
.abschnitt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.umschalter { display: inline-flex; background: #E6E5E0; border-radius: 10px; padding: 3px; }
.umschalter a, .umschalter button {
  border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--leise);
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.umschalter a, .umschalter a:hover { text-decoration: none; }
.umschalter .aktiv, .umschalter [aria-selected="true"] { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.klappe > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-weight: 600; padding: 4px 0;
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: "›"; font-size: 20px; line-height: 1; color: var(--leise); transition: transform .2s; }
.klappe[open] > summary::before { transform: rotate(90deg); }
.klappe[open] > summary { margin-bottom: 12px; }
.tabs { display: none; }
.js .tabs { display: flex; }
.tabs button { flex: 1; }

/* Zwei Spalten: Liste | Kalender */
.spalten { display: grid; grid-template-columns: 1fr; gap: var(--abstand-karten); align-items: start; }
.spalte { display: flex; flex-direction: column; gap: var(--abstand-karten); min-width: 0; }
.js [data-tab="liste"] .spalte--kalender, .js [data-tab="kalender"] .spalte--liste { display: none; }
@media (min-width: 1024px) {
  .spalten { grid-template-columns: minmax(0, 1fr) 340px; }
  .spalte--kalender { position: sticky; top: var(--rand-aussen); }
  .js .tabs { display: none; }
  .js [data-tab] .spalte--kalender, .js [data-tab] .spalte--liste { display: flex; }
}

/* Monatskalender */
.kalender__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kalender__titel { font-size: 17px; font-weight: 600; }
.kalender__nav { display: flex; gap: 4px; align-items: center; }
.kalender__nav button {
  border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
  min-width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
.kalender__nav button:hover:not(:disabled) { background: var(--bg); }
.kalender__nav button:disabled { color: var(--grau-hell); cursor: default; }
.kalender__heute { padding: 0 10px; }
.kalender__nav { display: none; }
.js .kalender__nav { display: flex; }
.monat + .monat { margin-top: 24px; }
.js .monat[hidden] { display: none; }
.monat__titel { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.js .monat__titel { display: none; }
.raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.raster__wt { font-size: 12px; color: var(--leise); padding: 4px 0 6px; }
.tag {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; padding: 0;
  border-radius: 999px; position: relative;
}
a.tag { text-decoration: none; }
.tag--we { color: var(--leise); }
.tag--heute { box-shadow: inset 0 0 0 1.5px var(--text); font-weight: 600; }
.tag--termin { cursor: pointer; font-weight: 600; }
.tag--rot { background: var(--rot); color: #fff; }
.tag--gelb { background: var(--gelb); color: #fff; }
.tag--gruen { background: var(--gruen); color: #fff; }
.tag--offen { background: var(--grau); color: var(--text); }
.tag--gestrichen { background: transparent; box-shadow: inset 0 0 0 1.5px var(--grau-hell); color: var(--leise); text-decoration: line-through; font-weight: 400; }
a.tag--termin:hover, button.tag--termin:hover { filter: brightness(.92); }
.tag--heute.tag--termin { box-shadow: 0 0 0 2px var(--karte), 0 0 0 3.5px var(--text); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--leise); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.punkt { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.punkt--rot { background: var(--rot); } .punkt--gelb { background: var(--gelb); }
.punkt--gruen { background: var(--gruen); } .punkt--offen { background: var(--grau); }

/* Startseite */
.start-raster { display: grid; grid-template-columns: 1fr; gap: var(--abstand-karten); align-items: start; }
@media (min-width: 1024px) {
  .start-raster { grid-template-columns: minmax(0, 1fr) 340px; }
  .start-raster .spalte--kalender { position: sticky; top: var(--rand-aussen); }
}
.verfahren-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.verfahren-kopf a { color: var(--text); text-decoration: none; }
.mini-zaehler { font-size: 13px; color: var(--leise); white-space: nowrap; }
.mini-zaehler b { font-weight: 600; }
.mini-zaehler .rot { color: var(--rot); }
.mini-zaehler .gelb { color: var(--gelb); }
.untertitel { font-size: 13px; font-weight: 600; color: var(--leise); }
.fuss-links { display: flex; gap: 20px; font-size: 15px; }

/* Initialen-Kreis */
.initialen {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 999px; background: #E6E5E0; color: var(--text);
  font-size: 13px; font-weight: 600;
}
.initialen, .initialen:hover { text-decoration: none; }
.initialen--gross { width: 52px; height: 52px; font-size: 17px; }
.person { display: flex; gap: 14px; align-items: center; }
.person__text { display: flex; flex-direction: column; }

/* Formulare */
.formular > * + * { margin-top: 16px; }
.feld label, .feld > .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.feld input[type=text], .feld input[type=password], .feld input[type=email], .feld select, .feld textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--karte); border: 1px solid #e2e0de; border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.feld--haken label, .feld--auswahl label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15px; margin: 0; }
.feld--auswahl > div { display: flex; flex-direction: column; gap: 8px; }
.feld input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--akzent); margin: 0; }
.hilfe { display: block; color: var(--leise); font-size: 13px; margin-top: 4px; }
.fehler { display: block; color: var(--rot-fg); font-size: 13px; margin-top: 4px; }
.knopf, .knopf:hover { text-decoration: none; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; font: inherit; font-weight: 600; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--akzent); color: #fff;
}
.knopf:hover { text-decoration: none; background: #23272B; }
.knopf--breit { width: 100%; }
.knopf--leise { background: var(--bg); color: var(--text); font-weight: 400; }
.knopf--leise:hover { background: #E6E5E0; }
.link { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; cursor: pointer; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.schritte { padding-left: 20px; margin: 0; }
.schritte li + li { margin-top: 4px; }
.qr { background: #fff; padding: 12px; border-radius: 12px; width: fit-content; box-shadow: var(--schatten); }
.qr svg { display: block; width: 200px; height: 200px; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; font-size: 15px; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 14px; word-break: break-all; }
.vorformatiert { white-space: pre-line; }
.ohne-umbruch { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inhalt--mittel { max-width: 640px; }
.rechts { text-align: right; }
.aktionen--rechts { justify-content: flex-end; }

/* Ganze Terminzeile anklickbar */
.zeile__link { color: inherit; text-decoration: none; }
.zeile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zeile a:not(.zeile__link) { position: relative; z-index: 2; }
.zeile:hover:not(.zeile--kompakt) { box-shadow: 0 2px 8px rgba(52, 58, 64, .08); }
.zeile--kompakt:hover .zeile__tag { text-decoration: underline; text-decoration-color: var(--grau); }

/* Termin-Detail */
.ampel-label { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.ampel-label--rot { background: var(--rot); color: #fff; }
.ampel-label--gelb { background: var(--gelb); color: #fff; }
.ampel-label--gruen { background: var(--gruen); color: #fff; }
.ampel-label--offen { background: var(--grau); color: var(--text); }
.personen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.personen__zeile { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.personen__zeile + .personen__zeile { border-top: 1px solid var(--linie); }
.personen__zeile .pille { flex: none; min-width: 96px; }
.personen__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; min-width: 0; }

/* Drei große Knöpfe Anwesend / Teilweise / Verhindert */
.wahl { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wahl__knopf {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; padding: 12px 6px; border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--bg); color: var(--leise); font-weight: 600; font-size: 15px;
  box-shadow: inset 0 0 0 1.5px transparent; transition: background-color .15s, box-shadow .15s, color .15s;
}
.wahl__knopf input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__knopf:hover { background: #E9E8E3; }
.wahl__knopf:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--text); }
.wahl__knopf--anwesend:has(input:checked) { background: var(--gruen-bg); color: var(--gruen); box-shadow: inset 0 0 0 2px var(--gruen); }
.wahl__knopf--teilweise:has(input:checked) { background: var(--gelb-bg); color: var(--gelb); box-shadow: inset 0 0 0 2px var(--gelb); }
.wahl__knopf--verhindert:has(input:checked) { background: var(--rot-bg); color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); }
.warnhinweis {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  background: var(--rot-bg); color: var(--rot); font-size: 15px;
}
.warnhinweis[hidden] { display: none; }
.js [data-nur-teilweise][hidden] { display: none; }
.hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--leise); }
.hinweis .icon { margin-top: 2px; }
.bestaetigung { background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.bestaetigung p { margin-top: 4px; }
.dialog {
  border: 0; border-radius: 16px; padding: 24px; width: min(420px, calc(100vw - 32px));
  box-shadow: 0 20px 50px rgba(52, 58, 64, .25); color: var(--text);
}
.dialog::backdrop { background: rgba(52, 58, 64, .35); }
.dialog > * + * { margin-top: 10px; }
.dialog .aktionen { margin-top: 20px; }
.anmerkung { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.anmerkung p { margin-bottom: 2px; }
.feld textarea { min-height: 0; resize: vertical; }
.feld input[type=date], .feld input[type=time] {
  width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--karte); border: 1px solid #e2e0de; border-radius: 10px;
}
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feld-reihe > .feld { margin-top: 0 !important; }
.titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.knopf--klein { min-height: 38px; padding: 0 14px; font-size: 15px; }
.umschalter--voll { display: flex; }
.umschalter--voll a { flex: 1; text-align: center; }

/* Vorschau der Massenanlage */
.vorschau { list-style: none; margin: 0; padding: 0; }
.vorschau__zeile { display: flex; gap: 14px; padding: 8px 0; align-items: baseline; font-size: 15px; }
.vorschau__zeile + .vorschau__zeile { border-top: 1px solid var(--linie); }
.vorschau__datum { flex: none; width: 128px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vorschau__text { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--leise); min-width: 0; }
.vorschau__text .pille { white-space: normal; line-height: 1.3; }
.vorschau__zeile--aus .vorschau__datum { color: var(--leise); text-decoration: line-through; }

/* Auswahl als Liste (Streichungsgrund) */
.wahl--liste { display: flex; flex-direction: column; gap: 8px; }
.wahl--liste legend { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.wahl__zeile {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px;
  background: var(--bg); cursor: pointer; font-size: 15px;
}
.wahl__zeile input { width: 20px; height: 20px; accent-color: var(--text); margin: 0; }
.wahl__zeile:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text); background: var(--karte); }
.js [data-nur-verlegung][hidden] { display: none; }

/* PDF-Ablage (Ladung) */
.ablage { display: none; }
.js .ablage { display: block; }
.ablage__flaeche {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-height: 110px; padding: 16px; border: 1.5px dashed var(--grau); border-radius: 12px; cursor: pointer;
  background: var(--bg); transition: background-color .15s, border-color .15s;
}
.ablage__flaeche:hover, .ablage__flaeche--ueber { border-color: var(--text); background: #E9E8E3; }
.ablage--aktiv .ablage__flaeche { opacity: .5; pointer-events: none; }
.ablage__status { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ablage__status[hidden] { display: none; }
.ablage--fehler .ablage__status { color: var(--rot); }
.fortschritt { height: 6px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.fortschritt__balken { height: 100%; width: 0; background: var(--text); border-radius: 999px; transition: width .4s ease; }
.ablage--aktiv .fortschritt__balken { background-image: linear-gradient(90deg, var(--text) 0%, #6C737A 50%, var(--text) 100%); background-size: 200% 100%; animation: laeuft 1.4s linear infinite; }
@keyframes laeuft { from { background-position: 200% 0; } to { background-position: 0 0; } }
.ohne-datum { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow: auto; font-size: 13px; }
/* Beweisprogramm */
.beweis-kurz { color: var(--text); }
.beweis { list-style: none; margin: 0; padding: 0; }
.beweis__eintrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0;
}
.beweis__eintrag + .beweis__eintrag { border-top: 1px solid var(--linie); }
.beweis__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; padding-top: 3px; }
.beweis__aktionen { display: flex; gap: 2px; align-items: center; }
.beweis__aktionen form { display: flex; gap: 2px; margin: 0; }
.symbol {
  border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--leise); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none !important;
}
.symbol:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.symbol:disabled { color: var(--grau-hell); cursor: default; }
.pille--art { flex: none; min-width: 112px; justify-content: center; font-weight: 600; background: var(--grau-bg); color: var(--text); }
@media (max-width: 560px) {
  /* Handy: Pille und Name oben, Aktionen darunter rechts */
  .beweis__eintrag { grid-template-columns: auto minmax(0, 1fr); }
  .beweis__aktionen { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
  .pille--art { min-width: 0; }
}
.pille--sachverstaendiger { background: #E8EAF0; }
.pille--urkunde { background: #F1EEE6; }
.pille--augenschein { background: #E9EEEC; }
.text-gelb { color: var(--gelb); font-weight: 600; }

/* Vorschau Beweisprogramm */
.bz-gruppe + .bz-gruppe { margin-top: 16px; }
.bz-gruppe__kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.bz { display: flex; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg); }
.bz + .bz { margin-top: 8px; }
.bz--unsicher { background: var(--gelb-bg); box-shadow: inset 3px 0 0 var(--gelb); }
.bz__haken input { width: 22px; height: 22px; accent-color: var(--text); margin: 4px 0 0; }
.bz__felder { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bz__felder input[type=text], .bz__felder input[type=time], .bz__felder select {
  font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid #e2e0de; border-radius: 8px;
  background: var(--karte); color: var(--text); min-width: 0;
}
.bz__name input { width: 100%; font-weight: 600; }
.bz__felder > input[type=text] { width: 100%; }
.bz__reihe { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 104px; gap: 6px; }
.bz__termin select { width: 100%; }
.bz__reihe select, .bz__reihe input { width: 100%; }
.bz__hinweis { font-size: 13px; color: var(--gelb-fg); display: flex; gap: 6px; align-items: center; }
.bz__quelle { font-size: 12px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .bz__reihe { grid-template-columns: minmax(0, 1fr) 104px; }
  .bz__termin { grid-column: 1 / -1; }
}

/* Einstellungen */
.einstellungen { list-style: none; margin: 0; padding: 0; }
.einstellungen__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; }
.einstellungen__zeile + .einstellungen__zeile { border-top: 1px solid var(--linie); }
.einstellungen__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.einstellungen__text .link { align-self: flex-start; }
.einstellungen__wert input, .einstellungen__wert select {
  font: inherit; padding: 8px 10px; border: 1px solid #e2e0de; border-radius: 10px; background: var(--karte); color: var(--text);
}
.haken { display: flex; gap: 10px; align-items: center; }
.haken input { width: 20px; height: 20px; accent-color: var(--text); margin: 0; }
.umschalter--radio label { position: relative; padding: 6px 12px; border-radius: 8px; font-size: 14px; color: var(--leise); cursor: pointer; }
.umschalter--radio input { position: absolute; opacity: 0; pointer-events: none; }
.umschalter--radio label:has(input:checked) { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.umschalter--radio label:has(input:focus-visible) { outline: 2px solid var(--text); }

/* Protokoll */
.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll__zeile { display: flex; gap: 14px; padding: 10px 0; font-size: 15px; }
.protokoll__zeile + .protokoll__zeile { border-top: 1px solid var(--linie); }
.protokoll__zeit { flex: none; width: 44px; color: var(--leise); font-variant-numeric: tabular-nums; }
.protokoll__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.protokoll__aenderung { color: var(--leise); overflow-wrap: anywhere; }
.protokoll__alt { text-decoration: line-through; text-decoration-color: var(--grau); }
.protokoll__tag { font-size: 15px; color: var(--leise); }
.feld select { appearance: auto; }
.filter > * + * { margin-top: 10px; }
.seiten { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ohne-datum li { padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlegen > * + * { margin-top: 12px; }
.abstand-oben { margin-top: var(--abstand-karten); }

/* Listenkopf klebt beim Scrollen; „Heute ↓“ oben rechts */
.abschnitt-kopf--klebend {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 10px 0; margin: -10px 0 0;
}
.abschnitt-kopf__rechts { display: flex; align-items: center; gap: 8px; }
.sprungmarke {
  font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap;
  background: var(--karte); box-shadow: var(--schatten); border-radius: 999px; padding: 6px 12px;
}
.sprungmarke:hover { text-decoration: none; background: #FAF9F6; }

@media (max-width: 380px) {
  :root { --rand-aussen: 16px; --innen: 16px; }
  .kachel { padding: 12px; }
}

/* Konto: gemerkte Geräte, Code-Seite */
.geraete { list-style: none; margin: 12px 0; padding: 0; }
.geraet { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; }
.geraet + .geraet { border-top: 1px solid var(--linie); }
.geraet__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geraet__text small { font-size: 13px; }
.geraet__dieses { white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--gruen, #285B4A); margin-left: 4px; }
.geraet form { margin: 0; flex-shrink: 0; }
.code-weitere { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.code-weitere form { margin: 0; }
.karte .angaben + .aktionen { margin-top: 14px; }
.karte h2 + .angaben { margin-top: 10px; }

/* Filter „Alle | Rot · Orange · Offen“: aktiver Knopf dunkel */
.umschalter--filter .aktiv { background: var(--text); color: #fff; box-shadow: none; font-weight: 600; }
.umschalter--filter .aktiv:hover { color: #fff; }
.filter-hinweis { margin: 0 0 12px; padding: 10px 14px; background: var(--karte); border-radius: 10px; color: var(--leise); font-size: 14px; box-shadow: var(--schatten); }