/* lifeOS — eine Datei, keine Bibliothek. Farben nur über Tokens. */
:root {
  --bg: #f7f7f5; --fl: #ffffff; --tx: #1d1d1b; --ged: #6b6b66; --li: #dcdcd6;
  --akz: #2f5d8a; --rot: #b3261e; --gelb: #8a6100; --gruen: #2e7d32; --frage: #6a4c93;
  --rot-bg: #fbe9e7; --gelb-bg: #fff6dc; --gruen-bg: #e8f5e9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615; --fl: #20201e; --tx: #ececea; --ged: #a3a39c; --li: #3a3a36;
    --akz: #8fb8e3; --rot: #f2b8b5; --gelb: #f0c65a; --gruen: #9ad09d; --frage: #c9b3ec;
    --rot-bg: #3b1f1d; --gelb-bg: #3a3014; --gruen-bg: #1d3320;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 15px/1.45 system-ui, -apple-system, sans-serif; }
a { color: var(--akz); }
header.kopf { background: var(--fl); border-bottom: 1px solid var(--li); padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
header.kopf strong { margin-right: 8px; }
header.kopf a { text-decoration: none; }
header.kopf a.aktiv { font-weight: 600; text-decoration: underline; }
header.kopf form { margin-left: auto; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.flash { padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
.flash.notice { background: var(--gruen-bg); }
.flash.alert { background: var(--rot-bg); }
.tabelle { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--fl); }
th, td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--li); }
th { font-size: .85rem; color: var(--ged); font-weight: 600; white-space: nowrap; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.ged { color: var(--ged); font-size: .85rem; }
.rot { color: var(--rot); } .gelb { color: var(--gelb); } .gruen { color: var(--gruen); } .frage { color: var(--frage); }
.marke { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: .8rem; border: 1px solid var(--li); white-space: nowrap; }
form.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
label { display: block; font-size: .85rem; color: var(--ged); }
input, select, textarea, button { font: inherit; color: var(--tx); background: var(--fl); border: 1px solid var(--li); border-radius: 4px; padding: 4px 6px; }
textarea { width: 100%; min-height: 4em; }
button, input[type=submit] { cursor: pointer; background: var(--akz); color: var(--fl); border-color: var(--akz); }
button.leise { background: var(--fl); color: var(--akz); }
details { margin-top: 4px; }
summary { cursor: pointer; color: var(--akz); font-size: .85rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: end; }
.aktionen form { display: flex; flex-wrap: wrap; gap: 4px; align-items: end; }
.formular { background: var(--fl); padding: 12px; border: 1px solid var(--li); border-radius: 6px; max-width: 900px; }
.formular .feld { margin-bottom: 10px; }
.formular input:not([type=checkbox]):not([type=submit]), .formular select { width: 100%; }
.text { white-space: pre-wrap; max-width: 70ch; }
pre { white-space: pre-wrap; background: var(--fl); padding: 12px; border: 1px solid var(--li); border-radius: 6px; overflow-x: auto; }
.matrix { border-collapse: collapse; width: auto; }
.matrix td, .matrix th { width: 56px; height: 44px; text-align: center; border: 1px solid var(--li); }
.matrix .akzeptieren { background: var(--gruen-bg); } .matrix .beobachten { background: var(--gelb-bg); }
.matrix .mindern, .matrix .handeln { background: var(--rot-bg); }