:root { --text:#1f2933; --leise:#5f6c7b; --linie:#d9dfe6; --grund:#f4f6f8; --karte:#fff; --ja:#1a7f4b; --nein:#b3362b; --link:#1558b0; --hinweis:#eef4fc; --warnung:#fdecea; }
@media (prefers-color-scheme: dark) {
  :root { --text:#e4e8ec; --leise:#9aa5b1; --linie:#3a4450; --grund:#15191e; --karte:#1f252c; --ja:#2f9e66; --nein:#d0564b; --link:#7ab0f5; --hinweis:#1d2c40; --warnung:#4a2420; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--grund); color:var(--text); font:16px/1.5 system-ui, "Segoe UI", sans-serif; }
header { position:sticky; top:0; z-index:1; background:var(--karte); border-bottom:1px solid var(--linie); padding:10px 16px; }
header > * { max-width:760px; margin-left:auto; margin-right:auto; }
.kopf { display:flex; align-items:center; gap:12px; }
h1 { font-size:18px; margin:0; flex:1 1 auto; }
#zahlen { margin:4px auto 0; font-weight:600; font-variant-numeric:tabular-nums; }
#stand { margin:0 auto; }
.leise-text { color:var(--leise); font-size:14px; }
.warnung { margin:8px auto 0; padding:8px 12px; background:var(--warnung); border-radius:4px; font-weight:600; }
main { max-width:760px; margin:0 auto; padding:16px; }
h2 { font-size:18px; margin:24px 0 8px; }
summary h2 { display:inline; }
#archiv { margin-top:24px; }
#archiv summary { cursor:pointer; }
.frage { margin:0 0 12px; color:var(--leise); }
.filter { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; font-size:14px; }
select { font:inherit; padding:4px; background:var(--karte); color:var(--text); border:1px solid var(--linie); border-radius:4px; }
.karte { background:var(--karte); border:1px solid var(--linie); border-left:5px solid var(--linie); border-radius:6px; padding:16px; margin-bottom:12px; overflow-wrap:anywhere; }
.karte.ja { border-left-color:var(--ja); }
.karte.nein { border-left-color:var(--nein); }
.einordnung, .pruefung, .archivgrund { color:var(--leise); font-size:14px; margin:0 0 4px; }
.archivgrund { font-weight:600; }
h3 { font-size:17px; margin:0; }
.firma { color:var(--leise); margin:2px 0 8px; }
.kurz { margin:0 0 8px; }
.angebot { margin:0 0 8px; padding:8px 12px; background:var(--hinweis); border-radius:4px; }
a { color:var(--link); font-weight:600; }
details { margin:8px 0; }
.karte summary { cursor:pointer; color:var(--link); }
.volltext { white-space:pre-wrap; background:var(--grund); border-radius:4px; padding:12px; margin-top:8px; font-size:14px; max-height:420px; overflow:auto; }
.wahl { margin-top:12px; }
.knoepfe { display:flex; gap:8px; }
.knoepfe label { flex:0 0 96px; text-align:center; border:2px solid var(--linie); border-radius:6px; padding:8px; cursor:pointer; font-weight:600; position:relative; }
.knoepfe input { position:absolute; opacity:0; }
.knoepfe input:focus-visible + span { outline:2px solid var(--link); outline-offset:6px; }
.knoepfe label:has(input[value=ja]:checked) { background:var(--ja); border-color:var(--ja); color:#fff; }
.knoepfe label:has(input[value=nein]:checked) { background:var(--nein); border-color:var(--nein); color:#fff; }
.grund { width:100%; margin-top:8px; padding:8px; border:1px solid var(--linie); border-radius:6px; font:inherit; background:var(--karte); color:var(--text); }
.status { display:block; min-height:1.5em; font-size:14px; color:var(--leise); }
button { font:inherit; font-weight:600; padding:10px 16px; border:0; border-radius:6px; background:var(--link); color:#fff; cursor:pointer; }
button.leise { padding:6px 10px; background:transparent; color:var(--link); border:1px solid var(--linie); }
.anmeldung main { max-width:360px; padding-top:15vh; }
.anmeldung form { display:flex; flex-direction:column; gap:8px; }
.anmeldung input[type=password] { font:inherit; padding:10px; border:1px solid var(--linie); border-radius:6px; background:var(--karte); color:var(--text); }
.meldung { color:var(--nein); font-weight:600; }