:root {
  --ground:#F1F3F2; --surface:#FFFFFF; --sunken:#E7ECEA;
  --ink:#16201E; --muted:#5C6A66; --line:#D2DAD7;
  --accent:#0F5C55; --accent-soft:#DAEAE7; --accent-ink:#0F5C55;
  --ok:#2F6B3A; --ok-soft:#DFEDE1;
  --frei:#125E7A; --frei-soft:#D6E8F0;
  --fail:#A33224; --fail-soft:#F6E0DC;
  --warn:#8A5A12; --warn-soft:#F5E8D2;
  --radius:10px;
  --shadow:0 1px 2px rgba(22,32,30,.06), 0 4px 14px rgba(22,32,30,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#111614; --surface:#1A201E; --sunken:#232B28;
    --ink:#E7ECE9; --muted:#95A39E; --line:#2F3936;
    --accent:#5CBAAC; --accent-soft:#17322E; --accent-ink:#7FCEC2;
    --ok:#7FC58C; --ok-soft:#182C1C;
    --frei:#6FB6D4; --frei-soft:#152A33;
    --fail:#E2907F; --fail-soft:#34211D;
    --warn:#D9A85A; --warn-soft:#2F2616;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --ground:#111614; --surface:#1A201E; --sunken:#232B28;
  --ink:#E7ECE9; --muted:#95A39E; --line:#2F3936;
  --accent:#5CBAAC; --accent-soft:#17322E; --accent-ink:#7FCEC2;
  --ok:#7FC58C; --ok-soft:#182C1C;
  --frei:#6FB6D4; --frei-soft:#152A33;
  --fail:#E2907F; --fail-soft:#34211D;
  --warn:#D9A85A; --warn-soft:#2F2616;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.28);
}

* { box-sizing:border-box; }
body {
  background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:"Archivo", system-ui, sans-serif; text-wrap:balance; margin:0; }
.shell { max-width:1000px; margin:0 auto; padding:0 20px 64px; }

/* ---------- Kopf ---------- */
.kopf {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.kopf-innen { max-width:1000px; margin:0 auto; padding:14px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.marke { display:flex; flex-direction:column; gap:1px; margin-right:auto; }
.marke h1 { font-size:19px; font-weight:700; letter-spacing:-.015em; }
.marke .datum { font-size:12.5px; color:var(--muted); }

.fortschritt { display:flex; align-items:center; gap:10px; }
.balken { width:150px; height:7px; border-radius:99px; background:var(--sunken); overflow:hidden; display:flex; }
.balken i { display:block; height:100%; width:0; transition:width .35s ease; }
.balken i.eins { background:var(--ok); }
.balken i.zwei { background:var(--frei); }
.zaehler { font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.pruefer-feld { display:flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--line); border-radius:99px; padding:4px 4px 4px 12px; }
.pruefer-feld label { font-size:12px; color:var(--muted); white-space:nowrap; }
.pruefer-feld select { font:inherit; font-size:13px; border:0; background:transparent;
  color:var(--ink); padding:3px 8px; border-radius:99px; cursor:pointer; }
.pruefer-feld select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.pruefer-feld.fehlt { border-color:var(--fail); }

/* ---------- Einleitung ---------- */
.intro { padding-top:28px; }
.intro > p { max-width:64ch; color:var(--muted); margin:0 0 20px; }
.intro strong { color:var(--ink); font-weight:600; }

.stufen { display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:22px; }
@media (min-width:720px) { .stufen { grid-template-columns:1fr 1fr; } }
.stufe-erkl { background:var(--surface); padding:15px 17px; display:flex; gap:12px; }
.stufe-nr { font-family:"Archivo",sans-serif; font-weight:700; font-size:15px;
  width:26px; height:26px; flex:none; border-radius:99px;
  display:grid; place-items:center; }
.stufe-erkl.a .stufe-nr { background:var(--ok-soft); color:var(--ok); }
.stufe-erkl.b .stufe-nr { background:var(--frei-soft); color:var(--frei); }
.stufe-erkl b { display:block; font-family:"Archivo",sans-serif; font-size:13.5px; font-weight:600; margin-bottom:2px; }
.stufe-erkl span { font-size:13px; color:var(--muted); }

.regeln { display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:34px; }
@media (min-width:720px) { .regeln { grid-template-columns:repeat(3,1fr); } }
.regel { background:var(--surface); padding:14px 16px; }
.regel b { display:block; font-family:"Archivo",sans-serif; font-size:13px; font-weight:600; margin-bottom:3px; }
.regel span { font-size:13px; color:var(--muted); }
.regel.stopp b { color:var(--fail); }

/* ---------- Abschnitt ---------- */
.abschnitt { margin-bottom:38px; }
.abschnitt-kopf { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.abschnitt-kopf h2 { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.abschnitt-kopf .anzahl { font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--muted); background:var(--sunken); border-radius:99px; padding:1px 8px; }
.abschnitt > p.hinweis { font-size:13.5px; color:var(--muted); margin:0 0 16px; max-width:66ch; }

/* ---------- Karten ---------- */
.liste { display:flex; flex-direction:column; gap:10px; }
.karte { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  border-left:3px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.karte[data-status="geprueft"] { border-left-color:var(--ok); }
.karte[data-status="frei"]     { border-left-color:var(--frei); }
.karte[data-status="problem"]  { border-left-color:var(--fail); }

.karte-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:13px 16px; }
.karte-name { display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:0; }
.karte-name .dom { font-family:"IBM Plex Mono",monospace; font-size:14.5px; font-weight:500; word-break:break-all; }
.karte-name .meta { font-size:12px; color:var(--muted); }
.karte-name .meta em { font-style:normal; color:var(--accent-ink); }

.pille { font-size:11.5px; font-weight:600; border-radius:99px; padding:2px 9px;
  white-space:nowrap; font-family:"Archivo",sans-serif; }
.pille.offen    { background:var(--sunken); color:var(--muted); }
.pille.geprueft { background:var(--ok-soft); color:var(--ok); }
.pille.frei     { background:var(--frei-soft); color:var(--frei); }
.pille.problem  { background:var(--fail-soft); color:var(--fail); }

.knopf { font:inherit; font-size:13px; font-family:"Archivo",sans-serif; font-weight:500;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:7px; padding:5px 11px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.knopf:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-ink); }
.knopf:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.knopf:disabled { opacity:.42; cursor:not-allowed; }
.knopf.haupt { background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:600; }
.knopf.aufklapp { border:0; background:transparent; color:var(--muted); padding:5px 7px; }
.knopf .pfeil { transition:transform .2s ease; display:inline-block; }
.karte.offen-auf .knopf .pfeil { transform:rotate(90deg); }

.karte-koerper { display:none; padding:0 16px 15px; border-top:1px solid var(--line); }
.karte.offen-auf .karte-koerper { display:block; }

.befund { font-size:13px; background:var(--warn-soft); color:var(--warn);
  border-radius:7px; padding:10px 12px; margin-top:13px; }
.befund b { font-family:"Archivo",sans-serif; font-weight:600; display:block; margin-bottom:2px; }

.pruefpunkte { display:grid; gap:2px; margin:13px 0 4px; }
@media (min-width:620px) { .pruefpunkte { grid-template-columns:1fr 1fr; column-gap:18px; } }
.punkt { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; padding:4px 0; cursor:pointer; }
.punkt input { margin:3px 0 0; accent-color:var(--accent); width:15px; height:15px; flex:none; cursor:pointer; }
.punkt input:checked + span { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
/* ---------- Namenszeile am Befundfeld ---------- */
.namenszeile { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.namenszeile label { font-size:12px; color:var(--muted); font-weight:500; white-space:nowrap; }
.namenszeile select {
  font:inherit; font-size:13.5px; flex:1 1 190px; min-width:0;
  background:var(--surface); color:var(--ink); cursor:pointer;
  border:1px solid var(--line); border-radius:7px; padding:7px 10px;
}
.namenszeile select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.namenszeile select.fehlt {
  border-color:var(--fail); background:var(--fail-soft);
  animation:ruckeln .4s ease;
}
.namenszeile select option:disabled { color:var(--muted); }
@keyframes ruckeln {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}

/* Die Regel steht ueber dem zweiten Namensfeld, damit sie vor der
   Eingabe gelesen wird und nicht erst als Fehlermeldung danach. */
.namensregel {
  font-size:12.5px; color:var(--frei); background:var(--frei-soft);
  border-radius:7px; padding:7px 11px; margin-bottom:9px;
}
.namenszeile select:disabled { opacity:.45; cursor:not-allowed; }
.sperrgrund.warnung { color:var(--fail); font-weight:600; }

/* ---------- Freigegebene Seiten ausblenden ---------- */
.karte.erledigt { display:none; }
body.zeige-erledigt .karte.erledigt { display:block; opacity:.72; }
.erledigt-schalter {
  font:inherit; font-family:"Archivo",sans-serif; font-size:13px; font-weight:500;
  margin-top:12px; width:100%; text-align:left;
  background:var(--sunken); color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:11px 15px; cursor:pointer;
}
.erledigt-schalter:hover { color:var(--accent-ink); border-color:var(--accent); }
.erledigt-schalter:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.punkt.aufgabe { background:var(--warn-soft); border-radius:7px; padding:8px 10px; margin:0 0 10px; }
.punkt.aufgabe span { color:var(--warn); font-weight:600; }
.punkt.aufgabe input:checked + span { color:var(--muted); font-weight:400; }

.notiz-feld { display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.notiz-feld label { font-size:12px; color:var(--muted); font-weight:500; }
.notiz-feld textarea { font:inherit; font-size:13.5px; width:100%; min-height:58px; resize:vertical;
  background:var(--sunken); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:9px 11px; }
.notiz-feld textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- Abnahmestufen ---------- */
.stufe { border-top:1px solid var(--line); margin-top:15px; padding-top:13px; }
.stufe-kopf { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.stufe-kopf .nr { font-family:"Archivo",sans-serif; font-weight:700; font-size:12px;
  width:21px; height:21px; border-radius:99px; display:grid; place-items:center; flex:none; }
.stufe.a .nr { background:var(--ok-soft); color:var(--ok); }
.stufe.b .nr { background:var(--frei-soft); color:var(--frei); }
.stufe-kopf h4 { font-family:"Archivo",sans-serif; font-size:13.5px; font-weight:600; margin:0; }
.stufe-kopf .wer { font-size:12px; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; }
.stufe-knoepfe { display:flex; flex-wrap:wrap; gap:8px; }
.knopf.gut[aria-pressed="true"]      { background:var(--ok-soft); color:var(--ok); border-color:transparent; font-weight:600; }
.knopf.frei[aria-pressed="true"]     { background:var(--frei-soft); color:var(--frei); border-color:transparent; font-weight:600; }
.knopf.schlecht[aria-pressed="true"] { background:var(--fail-soft); color:var(--fail); border-color:transparent; font-weight:600; }
.stufe .sperrgrund { font-size:12px; color:var(--muted); margin-top:7px; }

/* ---------- Fuss ---------- */
.verbindung { font-size:12.5px; color:var(--muted); text-align:center;
  padding:16px 0 0; border-top:1px solid var(--line); margin-top:32px; }
.verbindung b { color:var(--ink); font-weight:600; }
.punkt-an { display:inline-block; width:7px; height:7px; border-radius:99px;
  background:var(--muted); margin-right:6px; vertical-align:middle; }
.punkt-an.live { background:var(--ok); }


/* ---------- Stand des Umzugs (einklappbar) ---------- */
.stand { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin:0 0 24px; overflow:hidden; }
.stand > summary { cursor:pointer; padding:14px 17px; list-style:none;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.stand > summary::-webkit-details-marker { display:none; }
.stand > summary::before { content:"\25B8"; color:var(--muted); margin-right:2px;
  transition:transform .2s ease; display:inline-block; }
.stand[open] > summary::before { transform:rotate(90deg); }
.stand > summary:hover .stand-titel { color:var(--accent-ink); }
.stand-titel { font-family:"Archivo",sans-serif; font-size:14.5px; font-weight:600; }
.stand-hinweis { font-size:12.5px; color:var(--muted); }
.stand-inhalt { padding:0 17px 17px; border-top:1px solid var(--line); }
.stand-kern { font-size:13.5px; color:var(--muted); margin:14px 0 16px; max-width:72ch; }
.stand-kern strong { color:var(--ink); font-weight:600; }
.stand-tabelle { width:100%; border-collapse:collapse; font-size:13px; display:block;
  overflow-x:auto; white-space:normal; }
.stand-tabelle th { text-align:left; font-family:"Archivo",sans-serif; font-size:12px;
  font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  padding:6px 12px 6px 0; border-bottom:1px solid var(--line); }
.stand-tabelle td { padding:9px 12px 9px 0; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--muted); }
.stand-tabelle td:first-child { color:var(--ink); font-weight:500; white-space:nowrap; }
.stand-tabelle b.gut { color:var(--ok); font-weight:600; }
.stand-tabelle b.offen { color:var(--warn); font-weight:600; }


/* ---------- Hintergruende (unten) ---------- */
.hg-verweis { display:inline-flex; align-items:center; gap:6px;
  font-family:"Archivo",sans-serif; font-size:13px; font-weight:500;
  color:var(--accent-ink); text-decoration:none;
  background:var(--accent-soft); border-radius:99px; padding:6px 14px;
  margin:0 0 26px; }
.hg-verweis:hover { text-decoration:underline; }
.hg-verweis:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.hintergrund { border-top:2px solid var(--line); margin-top:44px; padding-top:26px;
  scroll-margin-top:84px; }
.hintergrund h2 { font-size:18px; font-weight:700; letter-spacing:-.015em; margin-bottom:14px; }
.hintergrund h3 { font-size:14px; font-weight:600; margin:26px 0 8px; color:var(--ink); }
.hintergrund p { font-size:14px; color:var(--muted); max-width:70ch; margin:0 0 13px; }
.hintergrund strong { color:var(--ink); font-weight:600; }
.hg-kern { font-size:15px !important; }
.hg-warnung { background:var(--fail-soft); border-radius:var(--radius);
  padding:13px 16px; color:var(--fail) !important; max-width:none !important; }
.hg-warnung strong { color:var(--fail); }
.hg-fuss { font-style:italic; margin-top:20px !important; }
.hg-tabelle { width:100%; border-collapse:collapse; font-size:13.5px;
  display:block; overflow-x:auto; }
.hg-tabelle th { text-align:left; font-family:"Archivo",sans-serif; font-size:11.5px;
  font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  padding:6px 14px 6px 0; border-bottom:1px solid var(--line); }
.hg-tabelle td { padding:10px 14px 10px 0; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--muted); }
.hg-tabelle td:first-child { color:var(--ink); font-weight:500; white-space:nowrap; }
.hg-tabelle b.gut { color:var(--ok); font-weight:600; }
.hg-tabelle b.offen { color:var(--warn); font-weight:600; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ---------- Serverfassung: Ergaenzungen ---------- */
.karte-koerper { display:block; }           /* immer offen, kein Aufklappen noetig */
.fehler { background:var(--fail-soft); color:var(--fail); border-radius:7px;
  padding:10px 13px; margin-top:13px; font-size:13.5px; font-weight:600; }
.zwischen { margin-top:14px; }
.knopf.an { font-weight:600; border-color:transparent; }
.knopf.gut.an      { background:var(--ok-soft);   color:var(--ok); }
.knopf.frei.an     { background:var(--frei-soft); color:var(--frei); }
.knopf.schlecht.an { background:var(--fail-soft); color:var(--fail); }
button.knopf { font:inherit; font-family:"Archivo",sans-serif; font-size:13px; font-weight:500; }
.erledigt-schalter { display:block; text-decoration:none; }
.kopf-innen .knopf { white-space:nowrap; }
.namenszeile select { min-width:220px; }


/* ---------- Rueckmeldung auf einen Befund ---------- */
.pille.behoben { background:var(--accent-soft); color:var(--accent-ink); }

.antwort { font-size:13.5px; background:var(--accent-soft); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left:3px solid var(--accent); border-radius:7px; padding:10px 12px; }
.antwort b { font-family:"Archivo",sans-serif; font-weight:600; font-size:13px;
  color:var(--accent-ink); display:block; }
.antwort .antwort-wer { font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  color:var(--muted); display:block; margin-bottom:6px; }
.antwort .antwort-text { white-space:normal; }
.antwort .antwort-regel { font-size:12px; color:var(--muted); margin-top:8px; }
.antwort.offen { box-shadow:var(--shadow); }
.antwort .stufe-knoepfe { margin-top:8px; }

/* Eine Karte, die auf die Nachpruefung wartet, soll sofort auffallen. */
.karte[data-status="behoben"] { outline:2px solid var(--accent); outline-offset:-2px; }