:root {
  --bg: #f7f6f3; --karte: #ffffff; --text: #1d1d1f; --leise: #6b6b70; --linie: #e3e1dc;
  --akzent: #2f5d8a; --akzent-hell: #e6eef6; --gut: #2e7d4f; --warn: #b26a00; --schlecht: #b23a3a;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17181a; --karte: #212326; --text: #ececee; --leise: #a0a0a8; --linie: #34363a;
    --akzent: #7fb0e0; --akzent-hell: #243446; --gut: #6cc18f; --warn: #e0a64a; --schlecht: #e07b7b; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--akzent); }
header.kopf { padding: 1rem; border-bottom: 1px solid var(--linie); background: var(--karte); }
header.kopf h1 { margin: 0; font-size: 1.2rem; }
header.kopf p { margin: .25rem 0 0; color: var(--leise); font-size: .9rem; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.hinweis { font-size: .92rem; }
.hinweis summary { cursor: pointer; font-weight: 600; }
.leise { color: var(--leise); font-size: .9rem; }
.fortschritt { font-weight: 600; }
.filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.filter button { border: 1px solid var(--linie); background: var(--karte); color: var(--text); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font: inherit; font-size: .9rem; }
.filter button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--karte); }
ul.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
ul.liste a { display: flex; gap: .75rem; align-items: baseline; padding: .7rem .9rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text); }
ul.liste a:hover { border-color: var(--akzent); }
ul.liste .status { flex: 0 0 1.4rem; font-weight: 700; color: var(--gut); }
ul.liste .titel { flex: 1; }
ul.liste .meta { color: var(--leise); font-size: .85rem; text-align: right; }
@media (max-width: 40rem) { ul.liste a { flex-wrap: wrap; } ul.liste .meta { flex-basis: 100%; text-align: left; padding-left: 2.15rem; } }

.blatt { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .blatt { grid-template-columns: 1.15fr 1fr; align-items: start; } .pdf { position: sticky; top: 1rem; } }
.tabs { display: flex; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; align-items: center; }
.tabs button { border: 1px solid var(--linie); background: var(--karte); color: var(--text); border-radius: 8px; padding: .35rem .9rem; cursor: pointer; font: inherit; }
.tabs button[aria-selected="true"] { background: var(--akzent-hell); border-color: var(--akzent); font-weight: 600; }
.tabs a { margin-left: auto; font-size: .9rem; }
.seiten { height: 80vh; overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: #8a8a8f; padding: .5rem; display: grid; gap: .5rem; align-content: start; }
.seiten canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
@media (max-width: 40rem) { .seiten { height: 70vh; } }

fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.optionen { display: flex; flex-wrap: wrap; gap: .35rem; }
.optionen label { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--linie); border-radius: 8px; padding: .3rem .65rem; cursor: pointer; font-size: .95rem; }
.optionen label:has(input:checked) { background: var(--akzent-hell); border-color: var(--akzent); }
.optionen input { margin: 0; }
.aufgabe { border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .8rem; }
.aufgabe h3 { margin: 0 0 .2rem; font-size: 1rem; }
.aufgabe .zitat { color: var(--leise); font-size: .9rem; margin: 0 0 .5rem; }
.aufgabe .details { display: none; margin-top: .5rem; }
.aufgabe.mangel .details { display: block; }
.aufgabe .kats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.aufgabe .kats label { font-size: .85rem; border: 1px solid var(--linie); border-radius: 6px; padding: .15rem .5rem; display: inline-flex; gap: .25rem; align-items: center; cursor: pointer; }
.aufgabe .kats label:has(input:checked) { border-color: var(--warn); }
textarea { width: 100%; min-height: 3.5rem; font: inherit; font-size: .95rem; padding: .45rem .55rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg); color: var(--text); resize: vertical; }
label.feld { display: block; font-size: .88rem; color: var(--leise); margin: .4rem 0 .2rem; }
.aktionen { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
button.senden { background: var(--akzent); color: var(--karte); border: 0; border-radius: 8px; padding: .6rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }
button.senden:disabled { opacity: .6; cursor: default; }
.meldung { font-weight: 600; }
.meldung.ok { color: var(--gut); }
.meldung.fehler { color: var(--schlecht); }
.fehlt { outline: 2px solid var(--schlecht); outline-offset: 4px; border-radius: 6px; }

.nutzung { background: var(--akzent-hell); border-radius: 8px; padding: .6rem .8rem; margin: .75rem 0 0; }
.karte h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.zeile { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.zeile label.feld { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
select, input[type=text], input:not([type]) { font: inherit; font-size: .95rem; padding: .35rem .5rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--text); min-width: 12rem; }
button.leise-knopf { background: none; border: 0; color: var(--leise); font: inherit; text-decoration: underline; cursor: pointer; }
footer.fuss { max-width: 72rem; margin: 1rem auto 2rem; padding: 0 1rem; font-size: .85rem; color: var(--leise); }
.recht { max-width: 46rem; }
.recht h2 { font-size: 1.05rem; margin-top: 1.5rem; }