:root {
  --bg: #f6f7f9; --karte: #ffffff; --text: #1b2230; --text2: #4a5568; --rand: #c5ccd8;
  --primaer: #1f4fbf; --primaer-text: #ffffff; --fokus: #b45309; --gut: #146c3a; --warn: #8a5300; --schlecht: #a12626;
  --chip: #e8edf6; font-size: 100%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151c; --karte: #1a202b; --text: #eef1f6; --text2: #b4bdcc; --rand: #3b4558;
    --primaer: #8cb2ff; --primaer-text: #0b1220; --fokus: #ffb454; --gut: #6fd39a; --warn: #f2c06b; --schlecht: #ff9b9b;
    --chip: #263044;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--karte); padding: .5rem; z-index: 5; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--karte); border-bottom: 1px solid var(--rand); }
.kopf h1 { margin: 0; flex: 1 1 auto; }
.nutzer { margin: 0; color: var(--text2); }
main { max-width: 1280px; margin: 0 auto; padding: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
.meldung { margin: .75rem 1rem 0; padding: .75rem 1rem; border-radius: .5rem; border: 2px solid var(--warn); background: var(--karte); }
.meldung.fehler { border-color: var(--schlecht); }
.spalten { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .spalten { grid-template-columns: minmax(300px, 2fr) 3fr; align-items: start; } .zurueck { display: none; } .detail[hidden] { display: block; visibility: hidden; } }
.filter { display: grid; grid-template-columns: 1fr; gap: .25rem; margin-bottom: .75rem; }
label { font-weight: 600; font-size: .9rem; }
input, select, textarea, button { font: inherit; color: var(--text); }
input, select, textarea { width: 100%; padding: .55rem .6rem; border: 1px solid var(--rand); border-radius: .4rem; background: var(--karte); min-height: 2.75rem; }
textarea { min-height: 5rem; resize: vertical; }
.knopf { display: inline-block; min-height: 2.75rem; padding: .5rem 1rem; border-radius: .4rem; border: 2px solid var(--primaer); background: var(--primaer); color: var(--primaer-text); font-weight: 600; cursor: pointer; }
.knopf.zweit { background: transparent; color: var(--primaer); }
.knopf.gefahr { background: transparent; border-color: var(--schlecht); color: var(--schlecht); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { margin: 0 0 .5rem; }
.eintrag { display: block; width: 100%; text-align: left; background: var(--karte); border: 1px solid var(--rand); border-radius: .5rem; padding: .6rem .75rem; cursor: pointer; }
.eintrag[aria-current="true"] { border: 2px solid var(--primaer); }
.eintrag .titel { font-weight: 700; }
.eintrag .zeile { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--chip); font-size: .8rem; color: var(--text); border: 1px solid var(--rand); }
.chip.gut { color: var(--gut); border-color: var(--gut); } .chip.warn { color: var(--warn); border-color: var(--warn); } .chip.schlecht { color: var(--schlecht); border-color: var(--schlecht); }
.klein { color: var(--text2); font-size: .9rem; margin: .25rem 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
progress { width: 100%; height: 1rem; accent-color: var(--primaer); }
.feld { margin-bottom: .75rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
dl.werte { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: 0 0 1rem; }
dl.werte dt { font-weight: 600; color: var(--text2); } dl.werte dd { margin: 0; overflow-wrap: anywhere; }
.verlauf, .kommentare { list-style: none; padding: 0; margin: 0; }
.verlauf li, .kommentare li { padding: .4rem 0; border-top: 1px solid var(--rand); font-size: .92rem; overflow-wrap: anywhere; }
.rtl { direction: rtl; text-align: right; }
.fuss { max-width: 1280px; margin: 1rem auto; padding: 0 1rem; color: var(--text2); font-size: .85rem; }
@media (max-width: 899px) { body.detail-offen .liste-bereich, body.detail-offen .fortschritt { display: none; } }
@media (min-width: 900px) { .knopf.zurueck { display: none; } }