:root {
  --gruen: #003028;
  --gruen-hell: #244941;
  --hintergrund: #f7f5f3;
  --karte: #ffffff;
  --linie: #d9d4ce;
  --text: #1f2a28;
  --text-leise: #5f6b68;
  --rot: #b3261e;
  --gelb: #b26a00;
  --gruen-ok: #2e7d32;
  --grau: #7a8582;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--hintergrund); color: var(--text); font-size: 15px; }
a { color: var(--gruen); }
header { background: var(--gruen); color: #fff; padding: 0 20px; display: flex; align-items: center;
  gap: 24px; height: 54px; }
header .marke { font-weight: 600; font-size: 16px; letter-spacing: .2px; }
header nav a { color: #e6efec; text-decoration: none; margin-right: 16px; padding: 6px 0; }
header nav a.aktiv, header nav a:hover { color: #fff; border-bottom: 2px solid #fff; }
header .rechts { margin-left: auto; font-size: 13px; color: #cfdcd8; display: flex; gap: 12px; align-items: center; }
header form { margin: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.kachel .zahl { font-size: 28px; font-weight: 600; color: var(--gruen); }
.kachel .titel { color: var(--text-leise); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: #eef2f0; font-weight: 600; font-size: 13px; color: var(--gruen-hell); }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meldung { background: #e7f1ec; border: 1px solid #b9d5c6; color: var(--gruen); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.fehler { background: #fbe9e7; border: 1px solid #f0b4ae; color: var(--rot); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.hinweis { color: var(--text-leise); font-size: 13px; }
.ampel { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
.ampel.ok { background: var(--gruen-ok); }
.ampel.knapp { background: var(--gelb); }
.ampel.aufgebraucht, .ampel.ueberzogen { background: var(--rot); }
.ampel.unbestimmt { background: var(--grau); }
form.zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
label { display: block; font-size: 13px; color: var(--text-leise); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; min-width: 120px; }
textarea { width: 100%; min-height: 70px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.raster .voll { grid-column: 1 / -1; }
button, .knopf { font: inherit; background: var(--gruen); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button.leise, .knopf.leise { background: #fff; color: var(--gruen); border: 1px solid var(--gruen-hell); }
button.klein { padding: 3px 8px; font-size: 12px; }
button.gefahr { background: #fff; color: var(--rot); border: 1px solid var(--rot); }
.kopfzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kopfzeile h1 { margin: 0; }
.kopfzeile .rechts { margin-left: auto; }
.pfad { font-size: 13px; color: var(--text-leise); margin-bottom: 8px; }
.balken { height: 8px; background: #e6e2dd; border-radius: 4px; overflow: hidden; min-width: 90px; }
.balken > div { height: 100%; background: var(--gruen-ok); }
.balken.knapp > div { background: var(--gelb); }
.balken.aufgebraucht > div, .balken.ueberzogen > div { background: var(--rot); }
code { background: #eee; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
pre { background: #f1efec; padding: 10px; border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }
.tabelle-scroll { overflow-x: auto; }
@media (max-width: 700px) { header { height: auto; flex-wrap: wrap; padding: 10px 14px; } header .rechts { margin-left: 0; } main { padding: 16px 14px; } }