:root {
  --grund: #f6f7f8; --flaeche: #ffffff; --text: #1d2329; --leise: #5f6b76; --linie: #dde2e7;
  --akzent: #1f6f9f; --ok: #2f8a4c; --warn: #b7791f; --fehler: #b3261e; --grau: #8a949e;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14181c; --flaeche: #1c2227; --text: #e6eaee; --leise: #9aa6b2; --linie: #2c343b;
    --akzent: #5fb0e0; --ok: #5cc27e; --warn: #e0a84a; --fehler: #ef6b62; --grau: #6f7a85;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--akzent); }
.kopfzeile { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 650; color: var(--text); text-decoration: none; }
.marke span { color: var(--leise); font-weight: 400; }
.inhalt { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: 8px 0 4px; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.leise { color: var(--leise); }
.fuss { display: flex; justify-content: space-between; max-width: 1100px; margin: 40px auto 0;
  padding: 16px; color: var(--leise); font-size: .85rem; border-top: 1px solid var(--linie); }
.knopf-leise { font-size: .9rem; text-decoration: none; }
.messstellen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.messstelle { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; font-size: .92rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; }
.kachel h3 { margin: 0 0 2px; font-size: 1rem; display: flex; justify-content: space-between; gap: 8px; }
.kachel .wert { font-size: 1.7rem; font-weight: 650; margin: 6px 0; font-variant-numeric: tabular-nums; }
.kachel dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: .88rem; }
.kachel dt { color: var(--leise); }
.kachel dd { margin: 0; font-variant-numeric: tabular-nums; }
.marker { font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.marker.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.marker.still, .marker.uebertragung { background: color-mix(in srgb, var(--fehler) 16%, transparent); color: var(--fehler); }
.marker.geplant, .marker.beendet { background: color-mix(in srgb, var(--grau) 18%, transparent); color: var(--grau); }
.zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.zeitwahl { display: flex; gap: 4px; }
.zeitwahl button { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  padding: 6px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: .88rem; }
.zeitwahl button.aktiv { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.grafik { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  margin: 0 0 12px; padding: 12px 12px 4px; }
.grafik figcaption { font-weight: 600; margin-bottom: 6px; }
.plot { min-height: 240px; }
.plot .leer { color: var(--leise); padding: 90px 0; text-align: center; }
.uplot, .u-legend { color: var(--text); font-family: inherit; }
.anmeldung { max-width: 380px; margin: 40px auto; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; }
.anmeldung form { display: grid; gap: 10px; margin-top: 14px; }
.anmeldung input { font: inherit; padding: 9px 10px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--grund); color: var(--text); }
.anmeldung button { font: inherit; font-weight: 600; padding: 10px; border: 0; border-radius: 8px;
  background: var(--akzent); color: #fff; cursor: pointer; }
.fehler { color: var(--fehler); margin: 0; }
.liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.liste li { display: grid; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; }
@media (max-width: 560px) { h1 { font-size: 1.35rem; } .kachel .wert { font-size: 1.45rem; } }
.projektliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.projektkarte { display: flex; flex-direction: column; gap: 6px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; transition: border-color .15s; }
.projektkarte:hover { border-color: var(--akzent); }
.projektkarte h2 { margin: 0; font-size: 1.1rem; }
.projektkarte p { margin: 0; font-size: .92rem; }
.projektkarte dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; font-size: .9rem; }
.projektkarte dt { color: var(--leise); }
.projektkarte dd { margin: 0; }
.zeile-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.weiter { color: var(--akzent); font-size: .9rem; margin-top: auto; }
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--leise); font-size: .8rem; padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .fehler { color: var(--fehler); font-weight: 600; }
.klein { font-size: .82rem; }
@media (max-width: 760px) {
  .tabelle-rahmen { background: none; border: 0; }
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 0; }
  .tabelle td { display: grid; grid-template-columns: 110px 1fr; gap: 8px; border: 0; padding: 5px 14px; }
  .tabelle td::before { content: attr(data-k); color: var(--leise); font-size: .82rem; }
}
@media (max-width: 760px) { .tabelle td > div { min-width: 0; } .tabelle td .marker { justify-self: start; } .tabelle td > div > .marker { display: inline-block; } }