:root {
  --bg: #f4f5f7; --karte: #fff; --text: #1d2330; --leise: #6b7280; --linie: #e3e6eb;
  --primaer: #0f4c81; --primaer-text: #fff;
  --blau: #dbe8f6; --blau-t: #0f4c81; --gruen: #dcf2e3; --gruen-t: #17663a;
  --gelb: #fdf1d6; --gelb-t: #8a5a00; --rot: #fbe0e0; --rot-t: #a02121; --grau: #eceef1; --grau-t: #4b5563;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --karte: #1d2128; --text: #e7e9ee; --leise: #9aa3af; --linie: #2e333c;
    --primaer: #4e9be0; --primaer-text: #0b1420;
    --blau: #1b2f45; --blau-t: #9cc6ef; --gruen: #173426; --gruen-t: #8fd8aa; --gelb: #3a2e13; --gelb-t: #f2c96b;
    --rot: #3d1d1d; --rot-t: #f3a3a3; --grau: #2a2f37; --grau-t: #c3c8d0;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primaer); }
main { max-width: 1000px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
code { font-size: .9em; }

.kopf { background: var(--karte); border-bottom: 1px solid var(--linie); padding: 10px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.kopf nav a { text-decoration: none; color: var(--text); }
.band { background: var(--gelb); color: var(--gelb-t); text-align: center; padding: 6px 12px; font-size: .9rem; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 16px; margin: 0 0 14px; }
.karte.schmal { max-width: 380px; margin: 60px auto; }
.zeile-titel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.leise { color: var(--leise); font-size: .9rem; }
.leer { color: var(--leise); }

label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; margin-bottom: 10px; }
label small { color: var(--leise); }
label.haken { flex-direction: row; align-items: center; gap: 8px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--linie);
  border-radius: 7px; padding: 9px 10px; width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { width: auto; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { opacity: .75; }
.stern { color: var(--rot-t); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }

button, .knopf { font: inherit; border-radius: 7px; padding: 9px 14px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button.primaer, .knopf.primaer { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); font-weight: 600; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.link { border: 0; background: none; padding: 0; color: var(--primaer); }
button.link.rot { color: var(--rot-t); }
form.inline { display: inline; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.speichern { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 40%); }
.speichern button { width: 100%; }

.meldung { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; }
.meldung.ok { background: var(--gruen); color: var(--gruen-t); }
.meldung.fehler { background: var(--rot); color: var(--rot-t); }
.umbruch { white-space: pre-line; }

.pille { font-size: .78rem; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pille.gross { font-size: .9rem; padding: 5px 12px; }
.blau { background: var(--blau); color: var(--blau-t); } .gruen { background: var(--gruen); color: var(--gruen-t); }
.gelb { background: var(--gelb); color: var(--gelb-t); } .rot { background: var(--rot); color: var(--rot-t); }
.grau { background: var(--grau); color: var(--grau-t); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kachel { border-radius: 10px; padding: 12px; text-decoration: none; display: flex; flex-direction: column; }
.kachel .zahl { font-size: 1.4rem; font-weight: 700; }

.filter { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-bottom: 14px; }
@media (max-width: 700px) { .filter { grid-template-columns: 1fr; } }

.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px;
  text-decoration: none; color: var(--text); }
.eintrag:hover { border-color: var(--primaer); }
.eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

.arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.art-knopf { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.art-knopf strong { font-size: 1.1rem; color: var(--primaer); }

.punkt { padding: 4px 10px; border-radius: 6px; margin-bottom: 4px; font-size: .92rem; }
.dok { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.hochladen { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
@media (max-width: 700px) { .hochladen { grid-template-columns: 1fr; } }
.nachricht { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.nachricht.fehler div, .nachricht.ablehnung div { color: var(--rot-t); }
.nachricht.bescheid div { color: var(--gruen-t); }
.verlauf { padding: 3px 0; font-size: .9rem; }

.tabelle-rahmen { overflow-x: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--linie); text-align: left; font-size: .92rem; }
th { color: var(--leise); font-weight: 600; }
.r { text-align: right; } .nw { white-space: nowrap; }