:root { --grund: #f4f5f7; --karte: #fff; --schrift: #1b2430; --leise: #5c6773; --rand: #d9dee4; --knopf: #1e2a38; --knopfschrift: #fff;
        --hinweis: #4a7bd0; --warnung: #d99a1e; --fehler: #d2462f; --schwer: #9c1c1c; --gut: #2f8a4c; }
@media (prefers-color-scheme: dark) {
  :root { --grund: #121820; --karte: #1c2530; --schrift: #e6eaef; --leise: #9aa5b1; --rand: #2c3743; --knopf: #f5b942; --knopfschrift: #1b2430; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--schrift); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)) 16px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 8px 0; flex-wrap: wrap; }
h1 { font-size: 1.15em; margin: 0; }
h2 { font-size: 1em; margin: 18px 0 8px 0; }
#wer { color: var(--leise); font-size: .9em; }
main { max-width: 720px; margin: 0 auto; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-left: 5px solid var(--rand); padding: 12px 14px; margin: 0 0 10px 0; }
.karte.hinweis { border-left-color: var(--hinweis); } .karte.warnung { border-left-color: var(--warnung); }
.karte.fehler { border-left-color: var(--fehler); } .karte.schwer { border-left-color: var(--schwer); }
.karte.markiert { outline: 2px solid var(--knopf); }
.kopf { font-size: .85em; color: var(--leise); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.stufe { font-weight: 600; }
.karte.fehler .stufe { color: var(--fehler); } .karte.schwer .stufe { color: var(--schwer); } .karte.warnung .stufe { color: var(--warnung); }
.titel { font-weight: 600; margin: 4px 0 2px 0; }
.leise { color: var(--leise); font-size: .9em; }
.gut { color: var(--gut); }
.fehler-text { color: var(--fehler); }
button { font: inherit; border: 0; background: var(--knopf); color: var(--knopfschrift); padding: 9px 16px; margin-top: 8px; cursor: pointer; }
button.zweit { background: transparent; color: var(--schrift); border: 1px solid var(--rand); }
/* ui-eigenbau: Verteiler auf eigenem Webspace — ohne Core-Stylesheets und -Komponenten */
label { display: block; margin: 10px 0 0 0; font-size: .9em; color: var(--leise); }
input { display: block; width: 100%; font: inherit; padding: 9px 10px; margin-top: 4px; border: 1px solid var(--rand); background: var(--karte); color: var(--schrift); }
footer { max-width: 720px; margin: 24px auto 0 auto; }