:root {
  --grund: #ffffff; --text: #1a1d21; --leise: #5b6572; --linie: #d8dde3;
  --flaeche: #f6f8fa; --akzent: #1f4e79; --warn: #8a4b00; --rot: #a02020;
  --gruen: #2e7d32; --gelb: #c9a227;
}
@media (prefers-color-scheme: dark) {
  :root { --grund:#14171a; --text:#e6e8ea; --leise:#9aa4b0; --linie:#2c3238;
          --flaeche:#1c2024; --akzent:#7fb3e0; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--grund); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1.2rem; border-bottom:1px solid var(--linie); flex-wrap:wrap; }
.marke { font-weight:600; letter-spacing:.02em; }
nav a { margin-left:1.1rem; color:var(--akzent); text-decoration:none; }
nav a:hover { text-decoration:underline; }
.hinweisband { background:var(--flaeche); border-bottom:1px solid var(--linie);
  padding:.35rem 1.2rem; font-size:13px; color:var(--leise); }
main { max-width:1100px; margin:0 auto; padding:1.4rem 1.2rem 4rem; }
h1 { font-size:1.5rem; margin:.4rem 0 1rem; }
h2 { font-size:1.15rem; margin:2rem 0 .6rem; }
h3 { font-size:1rem; margin:.2rem 0 .5rem; }
table { border-collapse:collapse; width:100%; margin:.4rem 0 1rem; font-size:14px; }
th, td { text-align:left; padding:.38rem .55rem; border-bottom:1px solid var(--linie); }
th { font-weight:600; color:var(--leise); font-size:13px; }
td.r, th.r { text-align:right; font-variant-numeric:tabular-nums; }
table.paare td { border:none; padding:.2rem .5rem .2rem 0; }
table.schmal { max-width:340px; }
.klein { font-size:12.5px; color:var(--leise); }
.karten { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:6px; padding:.8rem 1rem; }
.termin { border:1px solid var(--linie); border-radius:6px; padding:.8rem 1rem; margin-bottom:1rem; }
.termin.kuenftig { border-left:3px solid var(--akzent); }
.summe td { font-weight:600; border-top:1px solid var(--linie); }
.ergebnis { margin:.4rem 0 0; }
.fehlt { color:var(--warn); }
.tief { background:rgba(46,125,50,.14); font-weight:600; }
.ampel { display:inline-block; width:11px; height:11px; border-radius:50%; }
.ampel.gruen { background:var(--gruen); } .ampel.gelb { background:var(--gelb); }
.ampel.rot { background:var(--rot); } .ampel.ueberfaellig { background:var(--rot); outline:2px solid var(--rot); outline-offset:2px; }
form.formular { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:flex-end;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:6px; padding:.9rem 1rem; }
fieldset { border:1px solid var(--linie); border-radius:5px; padding:.4rem .7rem; display:flex; gap:.7rem; }
legend { font-size:12px; color:var(--leise); padding:0 .3rem; }
label { display:flex; flex-direction:column; gap:.2rem; font-size:12.5px; color:var(--leise); }
input, select { font:inherit; padding:.32rem .45rem; border:1px solid var(--linie);
  border-radius:4px; background:var(--grund); color:var(--text); }
button { font:inherit; padding:.42rem 1rem; border:1px solid var(--akzent); border-radius:4px;
  background:var(--akzent); color:#fff; cursor:pointer; }
form.schmal { max-width:300px; display:flex; flex-direction:column; gap:.7rem; }
.meldung { background:#fff4e5; border:1px solid #e0b070; color:#7a4a00;
  padding:.5rem .8rem; border-radius:5px; }
.scroll { overflow-x:auto; }
a { color:var(--akzent); }
.vorlaeufig { color:var(--leise); font-style:italic; }
form.lang { display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
form.lang fieldset { flex-wrap:wrap; gap:.6rem 1.1rem; width:100%; }
form.lang button { align-self:flex-start; }
label.breit { width:100%; }
label.waagerecht { flex-direction:row; align-items:center; gap:.4rem; color:var(--text); }
button.gefahr { background:var(--rot); border-color:var(--rot); }
.punkt { border:1px solid var(--linie); border-left:3px solid var(--leise); border-radius:6px;
  padding:.7rem .9rem; margin-bottom:.7rem; }
.punkt.offen { border-left-color:var(--warn); }
.punkt.in-Arbeit { border-left-color:var(--akzent); }
.punkt.erledigt { border-left-color:var(--gruen); }
.punkt.erledigt h3 { text-decoration:line-through; color:var(--leise); }
.punkt.verworfen { border-left-color:var(--linie); opacity:.55; }
.punkt.verworfen h3 { text-decoration:line-through; }
.punkt p { margin:.3rem 0 0; font-size:14px; }
.punkt-kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.punkt-kopf form { display:flex; gap:.4rem; align-items:center; }
.punkt-kopf button { padding:.25rem .7rem; font-size:13px; }

/* Diagramm. Farbfolge und Werte aus der geprüften Standardpalette, hell und dunkel
   getrennt gesetzt, nicht automatisch umgerechnet. */
.viz { --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  margin:.6rem 0 1rem; position:relative; }
@media (prefers-color-scheme: dark) {
  .viz { --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; }
}
.viz svg { width:100%; height:auto; display:block; overflow:visible; }
.viz .gitter { stroke:var(--linie); stroke-width:1; }
.viz .achslinie { stroke:var(--linie); stroke-width:1; }
.viz .achse { fill:var(--leise); font-size:11px; }
.viz .kurve { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.viz .faden { stroke:var(--leise); stroke-width:1; stroke-dasharray:3 3; }
.viz .punkt { stroke:var(--grund); stroke-width:2; }
.viz .endwert { font-size:12px; font-weight:600; }
.viz .series-1 { color:var(--series-1); }
.viz path.series-1 { stroke:var(--series-1); } .viz text.series-1 { fill:var(--series-1); }
.viz circle.series-1 { fill:var(--series-1); }
.viz path.series-2 { stroke:var(--series-2); } .viz text.series-2 { fill:var(--series-2); }
.viz circle.series-2 { fill:var(--series-2); }
.viz path.series-3 { stroke:var(--series-3); } .viz text.series-3 { fill:var(--series-3); }
.viz circle.series-3 { fill:var(--series-3); }
.viz path.series-4 { stroke:var(--series-4); } .viz text.series-4 { fill:var(--series-4); }
.viz circle.series-4 { fill:var(--series-4); }
.legende { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; align-items:center;
  margin-top:.5rem; font-size:13px; color:var(--text); }
.legende .eintrag { display:flex; align-items:center; gap:.35rem; }
.klecks { width:10px; height:10px; border-radius:2px; display:inline-block; flex:none; }
.klecks.series-1 { background:var(--series-1); } .klecks.series-2 { background:var(--series-2); }
.klecks.series-3 { background:var(--series-3); } .klecks.series-4 { background:var(--series-4); }
.tipp { position:absolute; top:8px; pointer-events:none; background:var(--grund);
  border:1px solid var(--linie); border-radius:5px; padding:.4rem .6rem; font-size:12.5px;
  box-shadow:0 2px 10px rgba(0,0,0,.16); min-width:140px; }
.tipp div { display:flex; align-items:center; gap:.4rem; margin-top:.15rem;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; }
@media (prefers-color-scheme: dark) {
  .tipp div { --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; }
}
.tipp b { margin-left:auto; font-variant-numeric:tabular-nums; }