/* UFO Manager Pro – Arbeitsoberfläche für die Unterkunftsverwaltung
   Typo: Bahnschrift (DIN-Charakter, auf Windows vorhanden) für Titel & Zahlen, Segoe UI/System für Text. */
:root {
  --papier: #f3f5f4;
  --flaeche: #ffffff;
  --flaeche-2: #f8faf9;
  --tinte: #17302e;
  --tinte-2: #4b605d;
  --tinte-3: #7a8b88;
  --linie: #d3dcda;
  --linie-2: #e6ecea;
  --petrol: #2f5d62;
  --petrol-dunkel: #234649;
  --petrol-hell: #dde9e8;
  --frei: #3e8a62;
  --frei-hell: #e1f0e7;
  --boje: #e3a92b;
  --boje-hell: #fbf0d6;
  --signal: #b23a2e;
  --signal-hell: #f6e1de;
  --schatten: 0 1px 2px rgba(23, 48, 46, .06);
  --display: "Bahnschrift", "DIN Alternate", "DIN 2014", "Roboto Condensed", "Arial Narrow", sans-serif;
  --text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #111a19; --flaeche: #172321; --flaeche-2: #1b2826; --tinte: #e3ebe9; --tinte-2: #a9bab7;
    --tinte-3: #7d908d; --linie: #2c3d3b; --linie-2: #223230; --petrol: #6fa7ad; --petrol-dunkel: #8cc0c5;
    --petrol-hell: #1f3638; --frei: #6cc093; --frei-hell: #1b3327; --boje: #e9b949; --boje-hell: #3a301a;
    --signal: #e57a6e; --signal-hell: #3d2220; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #111a19; --flaeche: #172321; --flaeche-2: #1b2826; --tinte: #e3ebe9; --tinte-2: #a9bab7;
  --tinte-3: #7d908d; --linie: #2c3d3b; --linie-2: #223230; --petrol: #6fa7ad; --petrol-dunkel: #8cc0c5;
  --petrol-hell: #1f3638; --frei: #6cc093; --frei-hell: #1b3327; --boje: #e9b949; --boje-hell: #3a301a;
  --signal: #e57a6e; --signal-hell: #3d2220; color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--text); line-height: 1.45; }
a { color: var(--petrol); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--boje); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .005em; margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
.zahl, td.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.leise { color: var(--tinte-3); }
.klein { font-size: .87rem; }

/* ---------- Rahmen ---------- */
.rahmen { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.seitenleiste { background: var(--tinte); color: #dce6e4; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seitenleiste { background: #0b1312; } }
.marke { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marke b { display: block; font-family: var(--display); font-size: 1.2rem; color: #fff; letter-spacing: .01em; }
.marke span { font-size: .8rem; color: #93a8a5; }
.nav { list-style: none; margin: 10px 0; padding: 0; flex: 1; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: #c7d5d2; border-left: 3px solid transparent; }
.nav a:hover { background: rgba(255,255,255,.05); text-decoration: none; color: #fff; }
.nav a.aktiv { border-left-color: var(--boje); background: rgba(255,255,255,.07); color: #fff; }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav .trenner { margin: 12px 18px 4px; font-size: .78rem; color: #7f9592; }
.wer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.wer b { color: #fff; font-weight: 600; display: block; }
.wer .zeile { display: flex; gap: 12px; margin-top: 6px; }
.wer a, .wer button { color: #a9c3bf; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.wer a:hover, .wer button:hover { color: #fff; text-decoration: underline; }

.inhalt { min-width: 0; }
.kopf { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--linie); background: var(--flaeche); position: sticky; top: 0; z-index: 5; }
.kopf form { flex: 1; max-width: 460px; }
.kopf input[type=search] { width: 100%; }
.kopf .menue-knopf { display: none; padding: 6px 8px; }
.menue-knopf svg { width: 20px; height: 20px; }
.seite { padding: 24px 28px 48px; max-width: 1400px; }
.seitentitel { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.seitentitel p { margin: 4px 0 0; color: var(--tinte-2); }
.brotkrumen { font-size: .85rem; color: var(--tinte-3); margin-bottom: 6px; }
.hinweisband { background: var(--boje-hell); color: var(--tinte); padding: 6px 28px; font-size: .85rem; border-bottom: 1px solid var(--linie); }

/* ---------- Bausteine ---------- */
.box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); }
.box > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie-2); }
.box > .rumpf { padding: 16px; }
.box + .box { margin-top: 16px; }
.raster { display: grid; gap: 16px; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stapel > * + * { margin-top: 16px; }

.knopf, button.knopf { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r);
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.knopf:hover { border-color: var(--petrol); text-decoration: none; }
.knopf.haupt { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.knopf.haupt:hover { background: var(--petrol-dunkel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf.haupt { color: #0d1716; } }
.knopf.gefahr { color: var(--signal); }
.knopf.gefahr:hover { border-color: var(--signal); }
.knopf.klein { padding: 4px 10px; font-size: .87rem; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button[disabled], .knopf[aria-disabled=true] { opacity: .45; pointer-events: none; }

input, select, textarea { font: inherit; color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 7px 10px; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--petrol); outline: 2px solid var(--petrol-hell); outline-offset: 0; }
textarea { min-height: 90px; resize: vertical; width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--petrol); vertical-align: -3px; }

/* Formulare */
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld label { font-size: .85rem; color: var(--tinte-2); font-weight: 500; }
.feld.breit, .felder > .breit { grid-column: 1 / -1; }
.feld.check { flex-direction: row; align-items: center; gap: 8px; padding-top: 22px; }
.feld.check label { color: var(--tinte); font-size: .95rem; }
.feld.check label .hilfe { display: block; margin-top: 2px; }
.feld .hilfe { font-size: .8rem; color: var(--tinte-3); }
.feld input, .feld select { width: 100%; }
.pflicht::after { content: " *"; color: var(--signal); }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend { font-family: var(--display); font-size: 1.05rem; font-weight: 600; padding: 0 0 10px; }
.formfuss { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--linie-2); }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tab th { text-align: left; font-weight: 600; font-size: .82rem; color: var(--tinte-2); padding: 8px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); white-space: nowrap; }
.tab td { padding: 8px 12px; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.tab tbody tr:hover { background: var(--flaeche-2); }
.tab tr.klickbar { cursor: pointer; }
.tab td.aktion { text-align: right; white-space: nowrap; }
.leer { padding: 28px 16px; text-align: center; color: var(--tinte-3); }
.leer .knopf { margin-top: 10px; }

/* Marken */
.marke-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--petrol-hell); color: var(--petrol-dunkel); white-space: nowrap; }
.marke-chip.gelb { background: var(--boje-hell); color: #7a5404; }
.marke-chip.rot { background: var(--signal-hell); color: var(--signal); }
.marke-chip.gruen { background: var(--frei-hell); color: var(--frei); }
.marke-chip.grau { background: var(--linie-2); color: var(--tinte-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke-chip.gelb { color: var(--boje); } }

/* Meldungen */
.meldungen { margin-bottom: 18px; display: grid; gap: 8px; }
.meldung { padding: 10px 14px; border-radius: var(--r); border: 1px solid; font-size: .95rem; }
.meldung.ok { background: var(--frei-hell); border-color: color-mix(in srgb, var(--frei) 35%, transparent); }
.meldung.fehler { background: var(--signal-hell); border-color: color-mix(in srgb, var(--signal) 35%, transparent); }

/* Register */
.register { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin; }
.register a { padding: 9px 14px; color: var(--tinte-2); border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.register a:hover { color: var(--tinte); text-decoration: none; }
.register a.aktiv { color: var(--tinte); border-bottom-color: var(--petrol); font-weight: 600; }
.register .zaehler { font-size: .78rem; color: var(--tinte-3); margin-left: 4px; }

/* Datenliste (Stammdaten in Akten) */
dl.daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; margin: 0; }
dl.daten div { min-width: 0; }
dl.daten dt { font-size: .8rem; color: var(--tinte-3); }
dl.daten dd { margin: 2px 0 0; overflow-wrap: anywhere; }
dl.daten dd:empty::before { content: "–"; color: var(--tinte-3); }

/* ---------- Belegung: ein Kästchen je Bett ---------- */
.belegung { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.uk { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten); }
.uk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.uk-kopf h2 { font-size: 1.35rem; }
.uk-kopf h2 a { color: inherit; }
.uk-kopf .adresse { font-size: .85rem; color: var(--tinte-3); }
.uk-zahlen { display: flex; gap: 22px; align-items: baseline; }
.uk-zahlen .gross { font-family: var(--display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.uk-zahlen .gross small { font-size: 1.1rem; color: var(--tinte-3); }
.uk-zahlen .wert { font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.uk-zahlen .lbl { display: block; font-size: .78rem; color: var(--tinte-3); }
.betten { display: flex; flex-wrap: wrap; gap: 3px 3px; }
.betten .zimmer { display: flex; gap: 2px; padding-right: 5px; margin-right: 2px; border-right: 1px solid var(--linie-2); }
.betten .zimmer:last-child { border-right: 0; }
.betten-wgs { display: flex; flex-direction: column; gap: 6px; }
.betten-wg { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 8px; border-left: 3px solid var(--linie-2); background: var(--flaeche-2); border-radius: 3px; }
.betten-wg .wg-name { font-size: .78rem; font-weight: 600; min-width: 7.5em; color: var(--tinte-2); }
.bett { width: 13px; height: 18px; border-radius: 2px; border: 1.5px solid var(--frei); background: var(--frei-hell); display: block; }
.bett.belegt { background: var(--petrol); border-color: var(--petrol); }
.bett.abwesend { background: repeating-linear-gradient(135deg, var(--petrol) 0 3px, var(--petrol-hell) 3px 6px); border-color: var(--petrol); }
a.bett:hover { outline: 2px solid var(--boje); outline-offset: 1px; }
.uk-fuss { display: flex; gap: 14px; align-items: center; font-size: .85rem; color: var(--tinte-2); border-top: 1px solid var(--linie-2); padding-top: 10px; flex-wrap: wrap; }
.ampel { display: inline-flex; align-items: center; gap: 6px; }
.ampel i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ampel.gruen i { background: var(--frei); } .ampel.gelb i { background: var(--boje); } .ampel.rot i { background: var(--signal); }
.legende { display: flex; gap: 16px; font-size: .82rem; color: var(--tinte-2); align-items: center; flex-wrap: wrap; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }

/* Belegungsplan groß (Unterkunft) */
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.plan .raum { border: 1px solid var(--linie); border-radius: var(--r); padding: 10px 12px; background: var(--flaeche); }
.plan .raum h3 { font-size: .95rem; display: flex; justify-content: space-between; }
.plan .platz { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .9rem; border-top: 1px dashed var(--linie-2); }
.plan .platz:first-of-type { border-top: 0; }
.plan .platz .bett { flex: none; }
.plan .platz.frei { color: var(--frei); }

/* Startseite */
.start-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; margin-top: 24px; }
.liste-kompakt { list-style: none; margin: 0; padding: 0; }
.liste-kompakt li { padding: 9px 16px; border-bottom: 1px solid var(--linie-2); display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: .92rem; }
.liste-kompakt li:last-child { border-bottom: 0; }
.liste-kompakt .datum { color: var(--tinte-3); font-family: var(--display); font-variant-numeric: tabular-nums; }

/* Personenakte */
.akte-kopf { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.akte-kopf h1 { font-size: 2rem; }
.akte-kopf .unter { color: var(--tinte-2); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.platzkarte { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r); background: var(--petrol-hell); }
.platzkarte .bett { width: 16px; height: 22px; }
.platzkarte b { font-family: var(--display); font-size: 1.15rem; display: block; }
.platzkarte.ohne { background: var(--linie-2); }
.az { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; }
.az a, .az span { width: 30px; text-align: center; padding: 4px 0; border-radius: 4px; font-family: var(--display); }
.az a.aktiv { background: var(--petrol); color: #fff; }
.az span { color: var(--linie); }
.filterzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.segment { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.segment a { padding: 6px 12px; color: var(--tinte-2); border-right: 1px solid var(--linie); background: var(--flaeche); }
.segment a:last-child { border-right: 0; }
.segment a.aktiv { background: var(--petrol); color: #fff; }
.segment a:hover { text-decoration: none; }

.dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dateien li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--linie-2); border-radius: var(--r); }
.dateien img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.dateien .name { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }

.bettwahl { display: grid; gap: 14px; }
.bettwahl details { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.bettwahl summary { padding: 10px 14px; cursor: pointer; font-family: var(--display); font-size: 1.05rem; }
.bettwahl .optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 0 14px 14px; }
.bettwahl label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: var(--r); cursor: pointer; }
.bettwahl label:has(input:checked) { border-color: var(--petrol); background: var(--petrol-hell); }

.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--tinte); }
.anmelden .karte { width: 100%; max-width: 380px; background: var(--flaeche); border-radius: 8px; padding: 32px 30px; }
.anmelden h1 { font-size: 1.6rem; }
.anmelden p { color: var(--tinte-2); margin: 6px 0 22px; }
.anmelden .feld + .feld { margin-top: 14px; }
.anmelden .knopf { width: 100%; justify-content: center; margin-top: 20px; padding: 10px; }

/* Druck */
.druck-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
@media print {
  .seitenleiste, .kopf, .nicht-drucken, .meldungen, .hinweisband { display: none !important; }
  .rahmen { display: block; }
  .seite { padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .box { border: 0; box-shadow: none; }
  .tab th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tab td, .tab th { padding: 4px 6px; }
  a { color: #000; }
}

/* ---------- Mobil ---------- */
@media (max-width: 980px) {
  .start-raster, .raster-2, .raster-3 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .rahmen { display: block; }
  .seitenleiste { position: fixed; inset: 0 auto 0 0; width: 250px; transform: translateX(-100%); transition: transform .2s ease; z-index: 30; }
  body.menue-offen .seitenleiste { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .kopf .menue-knopf { display: inline-flex; }
  .kopf { padding: 10px 16px; }
  .seite { padding: 18px 16px 40px; }
  h1, .akte-kopf h1 { font-size: 1.45rem; }
  .belegung { grid-template-columns: 1fr; }
  .tab th, .tab td { padding: 7px 8px; }
  .verstecken-mobil { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Familie (2.2.0) */
.familie-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.familie-kopf h3 { margin: 0; }
.familie-liste, .familie-treffer { border: 1px solid var(--linie-2); border-radius: var(--r); }
.familie-liste li { grid-template-columns: 92px 1fr auto; align-items: center; }
.familie-liste li.selbst { box-shadow: inset 3px 0 0 var(--petrol); }
.familie-treffer li { grid-template-columns: 1fr auto; align-items: center; }
.familie-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.familie-aktionen form { display: contents; }
@media (max-width: 640px) {
  .familie-liste li { grid-template-columns: 80px 1fr; }
  .familie-liste .familie-aktionen, .familie-treffer .familie-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
  .familie-treffer li { grid-template-columns: 1fr; }
}

/* Termine & Müllabfuhr (2.3.0) */
:root { --m-rest: #4b5157; --m-bio: #8a5a2b; --m-papier: #2f6fb3; --m-gelb: #e2b007; --m-glas: #3e8a62;
        --m-sperr: #7b5ea7; --m-schadstoff: #c0392b; --m-baum: #2e7d32; --m-sonst: #7d8b8d; --m-termin: var(--petrol); }
.tonne { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--m-sonst); vertical-align: -1px; flex: none; }
.tonne.rest { background: var(--m-rest); } .tonne.bio { background: var(--m-bio); } .tonne.papier { background: var(--m-papier); }
.tonne.gelb { background: var(--m-gelb); } .tonne.glas { background: var(--m-glas); } .tonne.sperr { background: var(--m-sperr); }
.tonne.schadstoff { background: var(--m-schadstoff); } .tonne.baum { background: var(--m-baum); } .tonne.termin { background: var(--m-termin); border-radius: 50%; }
.legende .tonne { margin-right: 5px; }

.abfuhr ul { list-style: none; margin: 0; padding: 0; }
.abfuhr li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie-2); }
.abfuhr li:last-child { border-bottom: 0; }
.abfuhr .tonne { width: 14px; height: 18px; border-radius: 3px 3px 4px 4px; }
.abfuhr-art { font-weight: 600; }
.abfuhr-wann { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.abfuhr-wann b { font-variant-numeric: tabular-nums; }
.abfuhr li.bald .abfuhr-wann b { background: var(--boje-hell); color: #7a5404; padding: 0 8px; border-radius: 999px; }
.abfuhr-uk { font-size: .8rem; font-weight: 600; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 2px; }
.abfuhr-uk:first-child { margin-top: 0; }

.termine-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.kal-kopf { flex-wrap: wrap; }
.kal-kopf h2 { min-width: 9.5em; text-align: center; }
.kal-filter select { max-width: 220px; }
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-wt { padding: 6px 8px; font-size: .78rem; font-weight: 600; color: var(--tinte-3); text-transform: uppercase; border-bottom: 1px solid var(--linie-2); }
.kal-tag { min-height: 104px; padding: 4px 4px 6px; border-right: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-tag:nth-child(7n) { border-right: 0; }
.kal-tag.we { background: color-mix(in srgb, var(--linie-2) 35%, transparent); }
.kal-tag.fremd .kal-nr, .kal-tag.fremd .kal-ev { opacity: .45; }
.kal-nr { font-size: .85rem; font-variant-numeric: tabular-nums; padding: 2px 4px; }
.kal-nr a { color: var(--tinte-2); display: inline-block; min-width: 1.8em; text-align: center; border-radius: 999px; }
.kal-nr a:hover { background: var(--petrol-hell); text-decoration: none; }
.kal-tag.heute .kal-nr a, .kal-tag.heute .kal-nr { font-weight: 700; color: var(--petrol); }
.kal-tag.heute { box-shadow: inset 0 3px 0 var(--petrol); }
.kal-ev { display: block; font-size: .76rem; line-height: 1.3; padding: 2px 6px; border-radius: 4px; color: #fff; background: var(--m-sonst);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-ev:hover { text-decoration: none; filter: brightness(1.1); }
.kal-ev.rest { background: var(--m-rest); } .kal-ev.bio { background: var(--m-bio); } .kal-ev.papier { background: var(--m-papier); }
.kal-ev.gelb { background: var(--m-gelb); color: #3b2e00; } .kal-ev.glas { background: var(--m-glas); } .kal-ev.sperr { background: var(--m-sperr); }
.kal-ev.schadstoff { background: var(--m-schadstoff); } .kal-ev.baum { background: var(--m-baum); }
.kal-ev.termin { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.kal-mehr { font-size: .74rem; color: var(--tinte-3); padding: 0 6px; }
.kal-legende { padding: 10px 16px; border-top: 1px solid var(--linie-2); margin: 0; }
.agenda li { grid-template-columns: 92px 1fr; }
.agenda li.vorbei { opacity: .55; }
.art-wahl { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.art-wahl label { cursor: pointer; }
.art-wahl input { position: absolute; opacity: 0; }
.art-wahl span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linie); border-radius: var(--r); }
.art-wahl input:checked + span { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); font-weight: 600; }
.art-wahl input:focus-visible + span { outline: 2px solid var(--petrol); outline-offset: 2px; }
@media (max-width: 1000px) { .termine-raster { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .kal-tag { min-height: 58px; padding: 2px; }
  .kal-ev { font-size: 0; height: 6px; padding: 0; border-radius: 3px; }
  .kal-mehr { font-size: .65rem; padding: 0; }
  .kal-wt { padding: 4px 2px; text-align: center; }
  .kal-nr { text-align: center; }
  .kal-kopf h2 { min-width: 0; }
}
.uk-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.uk-wahl label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--linie-2); border-radius: var(--r); cursor: pointer; }
.uk-wahl label:has(input:checked) { border-color: var(--petrol); background: var(--petrol-hell); }
.plan-felder[hidden] { display: none; }
.abfuhr-plan { font-weight: 400; text-transform: none; letter-spacing: 0; }
.uk-wahl label, .feld.check { justify-content: flex-start; text-align: left; }
.uk-wahl input, .feld.check input[type=checkbox] { width: auto; flex: none; margin: 0; }
.uk-wahl label span, .feld.check label { flex: 1 1 auto; }
.meldung.warnung { background: var(--boje-hell); border-color: color-mix(in srgb, var(--boje) 45%, transparent); color: var(--tinte); font-size: .88rem; margin-top: 6px; }
.meldung[hidden] { display: none; }
.ohne-plan li { grid-template-columns: 1fr auto; align-items: center; padding-left: 0; padding-right: 0; }
.ohne-plan select { width: auto; max-width: 200px; }
.warnbox { border-color: color-mix(in srgb, var(--boje) 55%, var(--linie)); }

/* Gebäude (Hausmeister) */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.kachel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie);
          border-radius: var(--r); box-shadow: var(--schatten); color: var(--tinte); }
.kachel:hover { text-decoration: none; border-color: var(--petrol); }
.kachel b { font-size: 1.6rem; font-family: var(--display); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.kachel span { font-size: .88rem; color: var(--tinte-2); line-height: 1.3; }
.kachel.warn { border-left: 4px solid var(--boje); }
.kachel.rot { border-left: 4px solid var(--signal); }
.rot-text { color: var(--signal); }
.brand-liste li { grid-template-columns: 92px 1fr; align-items: center; }
.verwaltung-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.verwaltung-kacheln a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--linie-2);
                        border-radius: var(--r); color: var(--tinte); }
.verwaltung-kacheln a:hover { border-color: var(--petrol); text-decoration: none; }
.verwaltung-kacheln b { color: var(--tinte-3); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Assistenten (2.5.0) */
.schritte { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; counter-reset: s; }
.schritte li { flex: 1 1 120px; }
.schritte li > span, .schritte li > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--linie);
  border-radius: var(--r); background: var(--flaeche); font: inherit; font-size: .9rem; color: var(--tinte-3); text-align: left; }
.schritte li > button { cursor: pointer; color: var(--tinte); }
.schritte li > button:hover { border-color: var(--petrol); }
.schritte b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--linie-2); color: var(--tinte-2); font-size: .8rem; flex: none; }
.schritte li.fertig b { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.schritte li.aktiv > span { border-color: var(--petrol); color: var(--tinte); font-weight: 600; box-shadow: inset 0 -3px 0 var(--petrol); }
.schritte li.aktiv b { background: var(--petrol); color: #fff; }
.assistent h2 { font-size: 1.25rem; }
.assistent .leise { margin: 6px 0 0; }
.assistent-fuss { margin-top: 14px; justify-content: space-between; }
.assistent-fuss #hinweis { flex: 1; text-align: center; color: var(--signal); }
.frage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.frage > label, .frage-titel { font-weight: 600; }
.zaehler-feld { display: inline-flex; align-items: stretch; }
.zaehler-feld input { width: 72px; text-align: center; border-radius: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.zaehler-feld input::-webkit-inner-spin-button { -webkit-appearance: none; }
.zaehler-feld .knopf { border-radius: 0; padding: 7px 12px; }
.zaehler-feld .knopf:first-child { border-radius: var(--r) 0 0 var(--r); }
.zaehler-feld .knopf:last-child { border-radius: 0 var(--r) var(--r) 0; }
.schalter { display: inline-flex; align-items: center; gap: 8px; margin: 8px 14px 8px 0; cursor: pointer; }
.sammel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.sammel .frage { margin: 0; }
.tab.eingabe td { padding: 5px 8px; vertical-align: middle; }
.tab.eingabe input:not([type=checkbox]), .tab.eingabe select { width: 100%; min-width: 120px; }
.tab.eingabe input.schmal { min-width: 70px; max-width: 110px; }
.tab.eingabe td.mitte { text-align: center; }
.baum { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.baum-wg { border: 1px solid var(--linie-2); border-radius: var(--r); padding: 10px 12px; }
.baum-wg ul { list-style: none; margin: 6px 0 0; padding: 0; }
.baum-wg li { padding: 5px 0; border-top: 1px solid var(--linie-2); }
@media (max-width: 640px) { .schritte li { flex-basis: 30px; } .schritte li > span, .schritte li > button { font-size: 0; justify-content: center; } .schritte b { font-size: .8rem; } }
[hidden] { display: none !important; }
.zusammenfassung section { padding: 10px 0; border-top: 1px solid var(--linie-2); }
.zusammenfassung section:first-child { border-top: 0; }
.zusammenfassung h3 { font-size: 1rem; margin-bottom: 8px; }

/* Bett belegen (2.5.1) */
.belegen-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.belegen-karte { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten); color: var(--tinte); }
.belegen-karte:hover { border-color: var(--petrol); text-decoration: none; }
.belegen-karte b { font-family: var(--display); font-size: 1.1rem; color: var(--petrol-dunkel); }
.belegen-karte span { font-size: .88rem; color: var(--tinte-2); }
.datum-klein { width: 150px; padding: 4px 8px; font-size: .87rem; }
a.bett { cursor: pointer; }
a.bett:not(.belegt):hover { outline: 2px solid var(--petrol); outline-offset: 1px; }
@media (max-width: 800px) { .belegen-wahl { grid-template-columns: 1fr; } }
.ansicht-umschalter { padding: 4px 14px 10px; }
.ansicht-umschalter button { background: none; border: 0; color: rgba(255,255,255,.55); font: inherit; font-size: .82rem; cursor: pointer; padding: 4px 6px; }
.ansicht-umschalter button:hover { color: #fff; text-decoration: underline; }
.rechte-tab td.mitte, .rechte-tab th.mitte { text-align: center; width: 13%; }
.rechte-tab tr.gruppe th { text-align: left; background: var(--linie-2); font-family: var(--display); font-size: .95rem; padding: 8px 12px; }
.rechte-tab td { padding: 7px 12px; }
.geaendert { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--boje); margin-left: 6px; vertical-align: 2px; }

/* Statistik (2.7.0) – Reihenfarben aus geprüfter Palette (hell/dunkel getrennt geprüft) */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-1: #3987e5; --serie-2: #d95926; } }
:root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; }
.stat-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.stat-filter .feld { min-width: 150px; }
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.stat-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--schatten); }
.stat-kachel b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinte); }
.stat-kachel span { font-size: .85rem; color: var(--tinte-2); }
.stat-kachel small { display: block; font-size: .75rem; color: var(--tinte-3); margin-top: 2px; }
.stat-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat-raster .box + .box { margin-top: 0; }
.stat-raster .breit { grid-column: 1 / -1; }
.stat-hinweis { font-size: .8rem; color: var(--tinte-3); margin: 10px 0 0; }
/* horizontale Balken */
.hbalken { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 6px 10px; align-items: center; }
.hbalken > .zeile { display: contents; color: inherit; }
.hbalken .lbl { font-size: .88rem; color: var(--tinte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbalken .spur { height: 14px; position: relative; }
.hbalken .balken { position: absolute; inset: 0 auto 0 0; background: var(--serie-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbalken .wert { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--tinte-2); text-align: right; white-space: nowrap; }
.hbalken a.zeile:hover .balken, .saeulen a.saeule:hover .balken { filter: brightness(1.15); }
.hbalken a.zeile:hover .lbl { text-decoration: underline; }
/* Säulen */
.saeulen { display: flex; align-items: stretch; gap: 4px; height: 190px; padding-top: 18px; border-bottom: 1px solid var(--linie); }
.saeule { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; color: inherit; position: relative; }
.saeule .paar { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; justify-content: center; }
.saeule .balken { width: 100%; max-width: 38px; background: var(--serie-1); border-radius: 4px 4px 0 0; min-height: 1px; position: relative; }
.saeule .paar .balken { max-width: 18px; }
.saeule .balken.s2 { background: var(--serie-2); }
.saeule .zahl-oben { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: .72rem; color: var(--tinte-2); white-space: nowrap; }
.saeulen-achse { display: flex; gap: 4px; margin-top: 4px; }
.saeulen-achse span { flex: 1 1 0; text-align: center; font-size: .72rem; color: var(--tinte-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.stat-legende { display: flex; gap: 14px; font-size: .82rem; color: var(--tinte-2); margin-bottom: 8px; }
.stat-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* Linie */
.linie svg { width: 100%; height: 200px; display: block; overflow: visible; }
.linie .gitter { stroke: var(--linie-2); stroke-width: 1; }
.linie .kurve { fill: none; stroke: var(--serie-1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.linie .flaeche-unter { fill: var(--serie-1); opacity: .08; }
.linie .punkt { fill: var(--serie-1); stroke: var(--flaeche); stroke-width: 2; }
.linie a:hover .punkt { r: 6; }
.linie text { font-size: 11px; fill: var(--tinte-3); }
.stat-tabelle summary { cursor: pointer; font-size: .82rem; color: var(--tinte-3); margin-top: 10px; }
.stat-tabelle table { margin-top: 6px; }
@media (max-width: 900px) { .stat-raster { grid-template-columns: 1fr; } }
/* Balken sind Hintergrundfarben – Browser lassen die beim Drucken/PDF sonst weg */
.balken, .stat-legende i, .ampel i, .bett, .marke-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print {
  .stat-filter, .stat-aktionen, .register { display: none !important; }
  .hbalken .balken { background: #2a78d6 !important; }
  .saeule .balken { background: #2a78d6 !important; }
  .saeule .balken.s2 { background: #eb6834 !important; }
  .stat-legende i:nth-child(1) { background: #2a78d6 !important; }
  .stat-raster { grid-template-columns: 1fr 1fr; }
  .stat-tabelle { display: none; }
  .box { break-inside: avoid; }
}

/* Gebührenbescheid: Beilagen, Ausgabe-Mappe, Gebühren-Einstellungen (2.10.0) */
.frage.beilagen { flex-direction: column; align-items: flex-start; gap: 0; }
.frage.beilagen > label, .frage.beilagen > span.schalter { font-weight: 400; margin: 5px 0; }
.schalter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 2px 0; }
.schalter-gruppe .schalter { margin: 4px 12px 4px 0; font-weight: 400; }
.feld .schalter input[type=radio], .feld .schalter input[type=checkbox] { width: auto; flex: none; }
.mappe li { align-items: baseline; }
.saetze { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.saetze .box.aktiv { outline: 2px solid var(--akzent, #2f5d62); }

/* Drucken: Listen, Prüfbögen, Karteikarte, Ausweis (2.11.0) */
.listen-gruppe { margin: 26px 0 12px; font-size: 1.15rem; }
@page quer { size: A4 landscape; margin: 10mm; }
@page { size: A4; margin: 12mm; }
@media print {
  .querformat { page: quer; }
  .marke-chip { border: 1px solid #999; background: none !important; color: #000 !important; }
}
/* Papier-Seiten: immer schwarz auf weiß, auch im dunklen Design */
.bogen, .kartei { background: #fff; color: #1a1a1a; padding: 10px 12px; border-radius: 4px; }
.bogen .leise, .bogen .klein, .kartei .leise, .kartei .klein { color: #444; }
.bogen a, .kartei a { color: #1a1a1a; }
@media print { .bogen, .kartei { padding: 0; } }
.bogen-seite + .bogen-seite { margin-top: 32px; }
@media print { .bogen-seite + .bogen-seite { break-before: page; margin-top: 0; } }
.bogen-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.bogen-kopf h1 { font-size: 1.3rem; margin: 0; }
.bogen-kopf .bogen-uk { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.bogen-felder { display: flex; gap: 22px; flex-wrap: wrap; margin: 8px 0 10px; font-size: .9rem; }
.bogen-felder span { display: inline-block; min-width: 150px; border-bottom: 1px solid #000; height: 1.2em; margin-left: 6px; vertical-align: bottom; }
table.bogen-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .82rem; }
.bogen-tab th, .bogen-tab td { border: 1px solid #555; padding: 3px 5px; vertical-align: middle; overflow: hidden; }
.bogen-tab th { background: #eee; color: #1a1a1a; font-weight: 600; white-space: pre-line; line-height: 1.15; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bogen-tab td { height: 9mm; }
.bogen-tab td.ankreuz { text-align: center; font-size: 1.15rem; }
.bogen-tab tr { break-inside: avoid; }
.bogen-fuss { display: flex; justify-content: space-between; font-size: .75rem; color: #444; margin-top: 6px; }
/* Karteikarte */
.kartei { max-width: 190mm; }
.kartei-kopf { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
.kartei-kopf h1 { margin: 0 0 2px; font-size: 1.45rem; }
.kartei-foto { width: 30mm; height: 38mm; border: 1px solid #888; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #777; text-align: center; }
.kartei h2 { font-size: .95rem; margin: 14px 0 4px; border-bottom: 1px solid #999; padding-bottom: 2px; text-transform: uppercase; letter-spacing: .03em; }
.kartei dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; margin: 0; font-size: .88rem; }
.kartei dl div { display: grid; grid-template-columns: 42% 1fr; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #ccc; }
.kartei dl dt { color: #555; }
.kartei dl dd { margin: 0; font-weight: 500; }
.kartei table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.kartei table th, .kartei table td { text-align: left; border-bottom: 1px solid #ccc; padding: 3px 4px; vertical-align: top; }
.kartei .notiz { border: 1px solid #999; min-height: 30mm; }
@media print { .kartei h2 { break-after: avoid; } .kartei section { break-inside: avoid; } }
/* Berechtigungskonzept */
.konzept ul { margin: 4px 0; padding-left: 18px; }
.konzept .konzept-matrix td.mitte, .konzept .konzept-matrix th.mitte { text-align: center; white-space: nowrap; }
.konzept .konzept-felder td { height: 9mm; }
.konzept .konzept-felder td + td { border-bottom: 1px solid #555; }
.konzept .konzept-unterschrift td { height: 14mm; vertical-align: bottom; }
.konzept .konzept-unterschrift td.linie { border-bottom: 1px solid #000; color: #888; font-size: .7rem; }
@media print { .konzept .konzept-matrix { break-inside: auto; } .konzept section:has(.konzept-matrix) { break-inside: auto; } }
/* Bewohnerausweis: Scheckkarte 85,6 × 54 mm, Vorder- und Rückseite nebeneinander zum Falten */
.ausweise { display: block; }
.ausweis-paar { display: flex; width: max-content; margin-bottom: 6mm; break-inside: avoid; page-break-inside: avoid; }
.ausweis { width: 85.6mm; height: 54mm; box-sizing: border-box; border: 1px dashed #888; padding: 3mm 3.5mm; background: #fff; color: #000;
  font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; line-height: 1.25; position: relative; overflow: hidden; }
.ausweis + .ausweis { border-left: 1px dotted #bbb; }
.ausweis .a-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #2f5d62; padding-bottom: 1mm; margin-bottom: 1.8mm; }
.ausweis .a-stadt { font-weight: 700; font-size: 8.5pt; }
.ausweis .a-titel { font-weight: 700; font-size: 8pt; color: #2f5d62; text-transform: uppercase; letter-spacing: .04em; }
.ausweis .a-rumpf { display: flex; gap: 3mm; }
.ausweis .a-foto { width: 22mm; height: 28mm; flex: none; border: 1px solid #999; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #888; font-size: 6pt; text-align: center; }
.ausweis .a-name { font-size: 10pt; font-weight: 700; line-height: 1.1; margin-bottom: .6mm; }
.ausweis .a-zeile { margin: .5mm 0; }
.ausweis .a-lbl { color: #555; font-size: 6pt; text-transform: uppercase; letter-spacing: .03em; display: block; }
.ausweis .a-fuss { position: absolute; left: 3.5mm; right: 3.5mm; bottom: 2.2mm; display: flex; justify-content: space-between; font-size: 6.5pt; color: #333; }
.ausweis.rueck { font-size: 7pt; }
.ausweis.rueck p { margin: 0 0 1.5mm; }
.ausweis .a-linie { border-bottom: 1px solid #000; height: 5mm; margin-top: 3mm; }
.ausweis-optionen { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 16px; }
@media print { .ausweis { border: 1px dashed #999; } .ausweis-paar { margin-bottom: 4mm; } }

/* E-Mail (2.12.0) */
.mail-wahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0; font-weight: 400; }
.mail-wahl input { flex: none; align-self: center; }
.mail-wahl .leise { overflow-wrap: anywhere; }
.tab select { max-width: 100%; }
.version { display: block; font-size: .72rem; opacity: .75; margin-top: 8px; letter-spacing: .02em; }
.umbruch { overflow-wrap: anywhere; word-break: break-all; }

/* Sicherheit: Wiederherstellungsschlüssel, Statuskacheln */
.schluessel-code { font-size: 1.35rem; letter-spacing: .06em; margin: 12px 0; }
.schluessel-code code { background: var(--flaeche-2, #f3f4f6); padding: 10px 14px; border-radius: 8px; display: inline-block; word-break: break-all; }
@media print { .schluessel-blatt { border: 0; box-shadow: none; } .schluessel-code code { background: #fff; color: #000; border: 1px solid #000; } }
.status-zeile { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 10px; }
.version .krypt { white-space: nowrap; }
.version .krypt.an { color: var(--frei); font-weight: 600; opacity: 1; }
.version .krypt.aus { color: var(--signal); font-weight: 600; }
.ordner-browser { border: 1px solid var(--linie-2); border-radius: 8px; margin-top: 8px; max-height: 260px; overflow: auto; }
.ordner-browser .ordner-kopf { position: sticky; top: 0; background: var(--flaeche, #fff); padding: 6px 8px; border-bottom: 1px solid var(--linie-2); display: flex; gap: 8px; align-items: center; }
.ordner-browser ul { list-style: none; margin: 0; padding: 4px 0; }
.ordner-eintrag { background: none; border: 0; width: 100%; text-align: left; padding: 4px 10px; cursor: pointer; color: inherit; font: inherit; }
.ordner-eintrag:hover { background: var(--petrol-hell); }

/* ---------- Verwaltung (Übersicht) ---------- */
.verw-suche input { width: 280px; max-width: 100%; }
.verw-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.verw-status-feld { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; min-width: 120px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten); }
.verw-status-feld:hover { border-color: var(--petrol); }
.verw-status-feld span { font-size: .75rem; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .04em; }
.verw-status-feld b { font-family: var(--display); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--tinte-3); }
.punkt.gruen { background: var(--frei); } .punkt.gelb { background: var(--boje); } .punkt.rot { background: var(--signal); }
.verw-bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.verw-bereich h2, .verw-listen h2 { display: flex; align-items: center; gap: 10px; }
.verw-icon { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center;
  background: var(--petrol-hell); color: var(--petrol-dunkel); flex: none; }
.verw-icon svg { width: 18px; height: 18px; }
.verw-links { list-style: none; margin: 0; padding: 0; }
.verw-links li { border-bottom: 1px solid var(--linie-2); }
.verw-links li:last-child { border-bottom: 0; }
.verw-links a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 10px 16px;
  color: var(--tinte); text-decoration: none; }
.verw-links a::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--tinte-3); font-size: 1.3rem; }
.verw-links a:hover { background: var(--flaeche-2); }
.verw-links a:hover b { color: var(--petrol); }
.verw-links b { font-weight: 600; }
.verw-links span { font-size: .85rem; color: var(--tinte-2); grid-column: 1; }
.verw-listen { margin-bottom: 16px; }
.verw-themen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 24px; padding: 12px 16px 14px; }
.verw-thema h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-3); margin: 4px 0 6px; }
.verw-thema ul { list-style: none; margin: 0; padding: 0; }
.verw-thema ul.spalten { columns: 3 200px; column-gap: 24px; }
.verw-thema li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--linie-2); break-inside: avoid; }
.verw-thema li a { text-decoration: none; }
.verw-thema .zahl { font-family: var(--display); font-size: .82rem; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .verw-bereiche { grid-template-columns: 1fr; } .verw-suche input { width: 100%; } }
.verw-bereiche > .box, .verw-listen { margin-top: 0; } .verw-listen + .verw-listen { margin-top: 0; }

/* ---------- Masken mit Abschnitten ---------- */
.abschnitt { border-top: 1px solid var(--linie-2); padding-top: 16px; margin: 0 0 20px; }
.abschnitt.abschnitt-erste { border-top: 0; padding-top: 0; }
.abschnitt > legend { float: left; width: 100%; padding: 0 0 4px; }
.abschnitt > legend + * { clear: both; }
.abschnitt-hinweis { margin: 0 0 10px; clear: both; }
.abschnitt .felder { clear: both; }
.reno-tab { margin-bottom: 10px; }
.reno-hand > summary { cursor: pointer; color: var(--petrol); font-size: .9rem; }
[data-wenn][hidden] { display: none !important; }

/* ---------- Hinweis auf Drucksachen: Chrome/Edge über @page (base.html), Firefox über diese Fußzeile ---------- */
.druck-hinweis { display: none; }
@media print {
  html.ff .druck-hinweis { display: block; position: fixed; left: 0; right: 0; bottom: 0; font: 7.5pt/1.3 var(--text);
    color: #333 !important; text-align: left; border-top: .3pt solid #999; padding-top: 1mm; background: #fff; }
}

/* ---------- Masken mit Reitern ---------- */
.maske-liste { border: 1px solid var(--linie-2); border-radius: var(--r); margin: 4px 0 20px; overflow: hidden; }
.maske-liste > header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie-2); }
.maske-liste > header h3 { margin: 0; font-size: 1rem; }
.maske-liste .leer { padding: 12px; margin: 0; }
.reiter .register { margin-bottom: 14px; }
.reiter-feld { min-height: 120px; }
.reiter-feld[hidden] { display: none; }
.raster > .box + .box, .raster > form.box + form.box { margin-top: 0; }
/* Dokumentschutz: Schalterzeilen mit Erklärung */
.schalter-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linie-2); cursor: pointer; }
.schalter-zeile:last-of-type { border-bottom: 0; }
.schalter-zeile input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.schalter-zeile input:disabled + span { opacity: .6; }
/* Umsetzen/Zuweisen: „Neues Bett anlegen in …“ über die ganze Breite */
.bettwahl .optionen label.bett-neu { grid-column: 1 / -1; border-style: dashed; }
.bettwahl .optionen label.bett-neu select { max-width: 100%; margin-top: 4px; }
/* Zwei-Faktor-Anmeldung */
.zf-schritte { padding-left: 20px; margin: 0 0 14px; }
.zf-schritte li { margin: 8px 0; }
.zf-qr { margin: 10px 0; padding: 10px; background: #fff; display: inline-block; border-radius: 6px; }
.zf-qr img { display: block; image-rendering: pixelated; }
.zf-codes { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.zf-codes code { font-size: 1.1rem; letter-spacing: .05em; }
.zf-schritt { margin: 0 0 10px; }
.zf-qr { display: block; width: fit-content; margin: 4px 0 12px; }

/* Reinigungspläne */
.reinigung-tab tr.aktuell td { background: color-mix(in srgb, var(--akzent, #2f5d62) 9%, transparent); }
.reinigung-tab tr.vergangen td { opacity: .8; }
.reinigung-tab select { min-width: 8em; }
.reinigung-aushang .bogen-tab td.reinigung-zelle { font-size: 1.05rem; font-weight: 600; }
.reinigung-aushang .bogen-tab td { height: 9mm; vertical-align: middle; }
.reinigung-aushang .bogen-tab th.leer-kopf { height: 9mm; }
.reinigung-tab select.stand-1 { border-color: #3e8a62; }
.reinigung-tab select.stand-2, .reinigung-tab select.stand-3 { border-color: #c9a227; }
.version a { color: inherit; text-decoration: none; } .version a:hover { text-decoration: underline; }

/* Namensvorschläge beim Tippen (Familienmitglied hinzufügen) */
.vorschlag-feld { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r); box-shadow: var(--schatten);
  max-height: 320px; overflow-y: auto; }
.vorschlaege li { padding: 7px 10px; border-radius: calc(var(--r) - 2px); cursor: pointer; line-height: 1.35; }
.vorschlaege li[role=option]:hover, .vorschlaege li.aktiv { background: var(--petrol-hell); }
.vorschlaege li[aria-disabled] { cursor: default; }
.auswahl-zeile { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 4px 2px; }
@media (max-width: 700px) { .auswahl-zeile { grid-template-columns: 1fr; } .auswahl-zeile .familie-aktionen { justify-content: flex-start; } }

/* Personenliste: Einzelperson / Familienoberhaupt / Familienmitglied */
.fam-icon { display: inline-flex; flex: none; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: var(--petrol); }
.fam-icon svg { width: 18px; height: 18px; }
.fam-icon.fam-kopf { color: var(--petrol-dunkel); }
.fam-icon.fam-aus { color: var(--tinte-3); opacity: .65; }
@media print { .fam-icon { color: #333 !important; } .fam-icon.fam-aus { color: #999 !important; } }
.fam-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--tinte-2); margin: 0 0 8px; }
.fam-legende span { display: inline-flex; align-items: center; }
.vorschlaege li[role=option] { display: flex; gap: 10px; align-items: flex-start; }
.vorschlaege li[role=option] > input { margin-top: 3px; flex: none; pointer-events: none; }
.vorschlaege li[aria-disabled=true] { opacity: .6; cursor: default; }
.aw-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.aw-check > input { margin-top: 3px; flex: none; }
.vorschlaege li[role=option] > input, .feld .vorschlaege input { width: 18px; height: 18px; }
.vorschlaege li[role=option] > span { flex: 1; min-width: 0; }
.aw-check > input { width: 18px; height: 18px; }
.aw-check > span { flex: 1; min-width: 0; }
#aw_liste { margin: 12px 16px 0; }
#auswahl .rumpf { padding: 12px 16px 16px; }
.fam-legende { padding: 10px 14px 0; }

/* Symbole für Sachdaten (Unterkünfte, Räume, Betten, Technik …) */
.ent-icon { display: inline-flex; flex: none; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: var(--petrol); opacity: .85; }
.ent-icon svg { width: 18px; height: 18px; }
.ent-icon.ent-feuerloescher, .ent-icon.ent-rauchmelder, .ent-icon.ent-schaden { color: var(--signal); opacity: .8; }
.ent-icon.gross { width: 22px; height: 22px; vertical-align: -4px; }
.ent-icon.gross svg { width: 22px; height: 22px; }
@media print { .ent-icon { color: #333 !important; opacity: 1; } }
.ent-icon.ent-aus { color: var(--tinte-3); opacity: .6; }
.tab td:has(> .ent-icon:first-child), .tab td:has(> .fam-icon:first-child) { white-space: nowrap; }

/* Unterkunft: zusammengefasste Reiter (2.17.7) */
.plan-wg{margin:18px 0 10px;font-size:1.05rem}
#belegung .plan-wg:first-of-type{margin-top:8px}
.abschnitte{margin:-4px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.abschnitte a{padding:3px 10px;border:1px solid var(--linie-2);border-radius:999px;background:var(--flaeche);color:var(--tinte-2);text-decoration:none}
.abschnitte a:hover{border-color:var(--petrol);color:var(--petrol)}
.uk-teil{margin-top:16px}
.plaene{padding:14px 16px;gap:18px 24px}
.plaene > .rumpf{padding:0}
.plaene h3{margin:0 0 6px;font-size:.95rem}
.uk-zahlen a.wert{color:inherit;text-decoration:none}
.uk-zahlen a.wert:hover{color:var(--petrol);text-decoration:underline}
.ho-neu{border-top:1px solid var(--linie, #e3e6ea)}
.ho-neu summary{cursor:pointer;color:var(--petrol, #0f6b74);font-weight:600;padding:2px 0}
.ho-neu[open] summary{margin-bottom:10px}
section[id],div[id].uk-teil,#schluessel{scroll-margin-top:16px}
.unterreiter a.aktiv{background:var(--petrol);border-color:var(--petrol);color:#fff}
.druckreihe{align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.box > .druckreihe{margin:12px 16px 4px}
/* 2.17.8: Stammdaten der Unterkunft über die volle Breite */
dl.daten.daten-breit{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){dl.daten.daten-breit{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2.17.8: Reiter dezent farbig hervorgehoben (Unterkunft, Personenakte, Listen, Statistik, Masken) */
.register { gap: 4px; border-bottom: 2px solid var(--petrol-hell); padding-top: 2px; }
.register a { background: var(--flaeche-2); border: 1px solid var(--linie-2); border-bottom: 0; border-radius: 8px 8px 0 0;
  margin-bottom: 0; padding: 8px 16px; color: var(--tinte-2); }
.register a:hover { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.register a.aktiv { background: var(--petrol-hell); border-color: var(--petrol-hell); color: var(--petrol-dunkel);
  box-shadow: inset 0 -3px 0 var(--petrol); font-weight: 600; }
.register a.aktiv .zaehler { color: var(--petrol); }
.abschnitte.unterreiter a { background: var(--flaeche-2); }
.abschnitte.unterreiter a:hover { background: var(--petrol-hell); }
.abschnitte.unterreiter a.aktiv { background: var(--petrol); border-color: var(--petrol); color: var(--flaeche); }
/* Gebäude-Assistent: Wohnraum ohne Bett */
.tab.eingabe tr.ohne-bett td { background: var(--signal-hell); }
.pflicht-hinweis { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: .78rem;
  background: var(--signal-hell); color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); }
#fehlerbox { margin-bottom: 12px; }
.rechts { text-align: right; white-space: nowrap; }

.testband{background:#c00000;color:#fff;font-weight:700;text-align:center;padding:.35rem .75rem;letter-spacing:.03em}
@media print{.testband{background:none;color:#c00000;border-bottom:2px solid #c00000}}

/* ---------- Farbige Oberfläche (Stil der Vorstellungsseite) ---------- */
.seitenleiste { background: linear-gradient(180deg, #1b4f9e 0%, #14786f 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seitenleiste { background: linear-gradient(180deg, #12305f 0%, #0b4a45 100%); } }
:root[data-theme="dark"] .seitenleiste { background: linear-gradient(180deg, #12305f 0%, #0b4a45 100%); }
.marke { display: flex; align-items: center; gap: 12px; }
.marke-logo { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.marke span { color: #cfe6f2; }
.nav a { color: #e3eef6; }
.nav a:hover { background: rgba(255,255,255,.12); }
.nav a.aktiv { border-left-color: #ffd166; background: rgba(255,255,255,.18); }
.nav svg { opacity: 1; }
.nav li:nth-child(6n+1) svg { color: #ffd166; } .nav li:nth-child(6n+2) svg { color: #8ee0d0; } .nav li:nth-child(6n+3) svg { color: #ffb3c1; }
.nav li:nth-child(6n+4) svg { color: #c9b2ff; } .nav li:nth-child(6n+5) svg { color: #9fd0ff; } .nav li:nth-child(6n) svg { color: #b9e7a5; }
.nav .trenner { color: #b5d3e6; }
.wer { border-top-color: rgba(255,255,255,.18); }
.wer a, .wer button { color: #d6e8f5; }
.anmelden { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); }
.anmelden .karte { border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); text-align: left; }
.login-logo { width: 64px; height: 64px; display: block; margin: 0 0 12px; filter: drop-shadow(0 4px 10px rgba(31,95,191,.35)); }
.anmelden .knopf.haupt { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); border-color: transparent; color: #fff; }
.box > header { border-top: 3px solid var(--kopf-farbe, #1f5fbf); border-top-left-radius: inherit; border-top-right-radius: inherit; }
@media print { .marke-logo, .login-logo { display: none; } }
.knopf.haupt { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); border-color: transparent; color: #fff; }
.knopf.haupt:hover { filter: brightness(1.08); }
.seitentitel h1 { background: linear-gradient(90deg, #1f5fbf, #0f9d8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media print { .seitentitel h1 { color: #000; background: none; } }
.wer span, .wer .leise, .seitenleiste .version { color: #cfe3f1 !important; }
.seitenleiste .krypt.aus { color: #ffd1d1 !important; }
.seitenleiste .krypt.an { color: #c9f5d8 !important; }
/* Felder mit farbigem Streifen an der Seite */
.box > header { border-top: 0 !important; }
.box { border-left: 5px solid #1f5fbf; }
.box:nth-of-type(5n+2), .box:nth-child(5n+2) { border-left-color: #0f9d8a; }
.box:nth-of-type(5n+3), .box:nth-child(5n+3) { border-left-color: #e08a00; }
.box:nth-of-type(5n+4), .box:nth-child(5n+4) { border-left-color: #8a4fd1; }
.box:nth-of-type(5n), .box:nth-child(5n) { border-left-color: #d9455f; }
@media print { .box { border-left-width: 1px; } }
.stat-kachel { border-left: 5px solid #1f5fbf; }
.stat-kachel:nth-child(5n+2) { border-left-color: #0f9d8a; } .stat-kachel:nth-child(5n+3) { border-left-color: #e08a00; }
.stat-kachel:nth-child(5n+4) { border-left-color: #8a4fd1; } .stat-kachel:nth-child(5n) { border-left-color: #d9455f; }
@media print { .stat-kachel { border-left-width: 1px; } }

/* Startseite: Kacheln und Unterkunftskarten im Stil der Vorstellungsseite */
.start-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 4px 0 18px; }
.sk { --fa: #1f5fbf; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--fa); border-radius: 14px; box-shadow: var(--schatten); }
.sk.gruen { --fa: #3cb371; } .sk.lila { --fa: #a678f0; } .sk.rot { --fa: #ff6b81; }
.sk-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--fa); background: color-mix(in srgb, var(--fa) 16%, transparent); }
.sk b { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinte); }
.sk span { font-size: .85rem; color: var(--tinte-2); }
.belegung .uk { --fa: #1f5fbf; border-radius: 14px; border: 1px solid var(--linie); border-top: 4px solid var(--fa); box-shadow: var(--schatten); transition: transform .12s, box-shadow .12s; }
.belegung .uk:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,40,80,.14); }
.belegung .uk:nth-child(6n+2) { --fa: #3cb371; } .belegung .uk:nth-child(6n+3) { --fa: #a678f0; }
.belegung .uk:nth-child(6n+4) { --fa: #ff6b81; } .belegung .uk:nth-child(6n+5) { --fa: #f0a020; } .belegung .uk:nth-child(6n) { --fa: #0f9d8a; }
.belegung .uk .uk-kopf h2 a { color: var(--tinte); }
.belegung .uk .uk-zahlen .gross { color: var(--fa); }
.belegung .uk .bett.belegt { background: var(--fa); border-color: var(--fa); }
.belegung .uk .bett.abwesend { background: repeating-linear-gradient(135deg, var(--fa) 0 3px, transparent 3px 6px); border-color: var(--fa); }
.belegung .uk .bett { border-color: var(--fa); }
.seitentitel h1 { font-size: 1.7rem; }
input[type=search], .suche input { border-radius: 12px; }
.knopf { border-radius: 10px; }
@media print { .sk, .belegung .uk { border-top-width: 1px; box-shadow: none; transform: none; } }
/* Hintergrund der Seite getönt, Kacheln und Karten heben sich ab */
:root { --papier: #e6edf6; }
body { background: linear-gradient(180deg, #e3ecf7 0%, #e9f1f0 100%) fixed; }
.sk, .belegung .uk, .box, .stat-kachel { box-shadow: 0 2px 4px rgba(20,40,80,.08), 0 6px 18px rgba(20,40,80,.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #0c1413; }
  :root:not([data-theme="light"]) .sk, :root:not([data-theme="light"]) .belegung .uk, :root:not([data-theme="light"]) .box, :root:not([data-theme="light"]) .stat-kachel { box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); }
}
:root[data-theme="dark"] body { background: #0c1413; }
@media print { body { background: #fff; } }
html { background: #e6edf6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { background: #0c1413; } } :root[data-theme="dark"] { background: #0c1413; }
.wer .zeile { flex-wrap: wrap; row-gap: 2px; }
/* alte Grüntöne durch das Blau/Türkis der neuen Oberfläche ersetzen */
:root { --petrol: #1f5fbf; --petrol-dunkel: #174a96; --petrol-hell: #dce8fb; --frei: #0f9d8a; --frei-hell: #e0f5f1; --tinte: #1a2a3a; --tinte-2: #4a5d70; --linie: #d5dfeb; --linie-2: #e5ecf5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --petrol: #7fb0ff; --petrol-dunkel: #a3c6ff; --petrol-hell: #1c2c4a; --frei: #4fd1bd; --frei-hell: #12332f; --tinte: #e3ebf5; --tinte-2: #aab9cc; --linie: #2b3a52; --linie-2: #213046; } }
:root[data-theme="dark"] { --petrol: #7fb0ff; --petrol-dunkel: #a3c6ff; --petrol-hell: #1c2c4a; --frei: #4fd1bd; --frei-hell: #12332f; --tinte: #e3ebf5; --tinte-2: #aab9cc; --linie: #2b3a52; --linie-2: #213046; }
.register a.aktiv { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); color: #fff; border-color: transparent; }
.register a.aktiv .zaehler { color: #e6f3ff; }

/* Zimmer mit Rahmen, Wohngruppen-Symbol */
.betten { gap: 8px 8px; }
.betten .zimmer { padding: 4px 6px; margin: 0; border: 1.5px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); gap: 3px; }
.betten .zimmer:last-child { border: 1.5px solid var(--linie); }
.betten-wg { border-left: 3px solid var(--fa, var(--linie)); border-radius: 8px; padding: 6px 8px; gap: 6px 12px; }
.betten-wg .wg-name { display: inline-flex; align-items: center; gap: 6px; min-width: 9em; }
.wg-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--wc, #888); flex: none; }
@media print { .wg-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Aktionen bei Personen-Details: gruppiert und farbig */
.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 18px; }
.akt-gruppe { background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--fa); border-radius: 12px; padding: 8px 12px 12px; box-shadow: var(--schatten); }
.akt-gruppe h3 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fa); }
.akt-gruppe .knopf { border-color: color-mix(in srgb, var(--fa) 45%, var(--linie)); background: color-mix(in srgb, var(--fa) 8%, var(--flaeche)); }
.akt-gruppe .knopf:hover { background: color-mix(in srgb, var(--fa) 18%, var(--flaeche)); text-decoration: none; }
.akt-gruppe .knopf.haupt { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); color: #fff; border-color: transparent; }
@media print { .aktionen { display: none; } }
.aktionen { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; } .akt-gruppe .knopf { padding: 5px 10px; font-size: .88rem; }
/* Aktionsgruppen enger */
.aktionen { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 8px; margin: 0 0 10px; }
.akt-gruppe { padding: 5px 9px 8px; border-radius: 10px; }
.akt-gruppe h3 { margin: 0 0 5px; font-size: .7rem; }
.akt-gruppe .knopfreihe { gap: 5px; }
.akt-gruppe .knopf { padding: 3px 9px; font-size: .84rem; }
.aktionen + .register, .aktionen + .reiter { margin-top: 0; }
.aktionen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.aktionen .akt-gruppe .knopfreihe { gap: 6px; }
/* Knöpfe in Kästen-Kopfzeilen: farbig abgesetzt */
.box > header .knopf, .box > header .knopfreihe .knopf { --kc: #1f5fbf; background: color-mix(in srgb, var(--kc) 12%, var(--flaeche)); border-color: color-mix(in srgb, var(--kc) 55%, transparent); color: var(--kc); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--kc) 25%, transparent); }
.box > header .knopf:nth-child(3n+2) { --kc: #0f9d8a; }
.box > header .knopf:nth-child(3n) { --kc: #a05fd8; }
.box > header .knopf:hover { background: color-mix(in srgb, var(--kc) 24%, var(--flaeche)); text-decoration: none; }
.box > header .knopf.haupt { background: linear-gradient(135deg, #1f5fbf, #0f9d8a); color: #fff; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .box > header .knopf { --kc: #8cb8ff; } :root:not([data-theme="light"]) .box > header .knopf:nth-child(3n+2) { --kc: #5fe0cc; } :root:not([data-theme="light"]) .box > header .knopf:nth-child(3n) { --kc: #c9a2f5; } }

/* Hilfe-Knopf und Hilfefenster */
.kopf { display: flex; align-items: center; gap: 12px; }
.hilfe-knopf { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  color: #fff; background: linear-gradient(135deg, #1f5fbf, #0f9d8a); box-shadow: 0 2px 8px rgba(31,95,191,.35); text-decoration: none; }
.hilfe-knopf:hover { filter: brightness(1.1); text-decoration: none; }
.hilfe-fenster { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); z-index: 60; background: var(--flaeche); border-left: 4px solid #1f5fbf;
  box-shadow: -8px 0 30px rgba(20,40,80,.25); display: flex; flex-direction: column; }
.hilfe-fenster[hidden] { display: none; }
.hilfe-fenster > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, #1f5fbf, #0f9d8a); color: #fff; }
.hilfe-fenster > header .knopf { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
.hilfe-fenster .hilfetext { flex: 1; overflow: auto; padding: 12px 16px; }
.hilfe-fenster > footer { padding: 8px 14px; border-top: 1px solid var(--linie); font-size: .85rem; }
.hilfetext h4 { margin: 14px 0 4px; } .hilfetext table { width: 100%; border-collapse: collapse; font-size: .88rem; } .hilfetext th, .hilfetext td { border: 1px solid var(--linie); padding: 3px 6px; text-align: left; }
.hilfe-nachbarn a { display: inline-block; margin: 2px 8px 2px 0; }
@media print { .hilfe-knopf, .hilfe-fenster { display: none !important; } }