:root {
  --menue: #002850; --menue-hover: #0a4080; --aktiv: #2563eb;
  --seite: #EBF5FF; --karte: #ffffff; --rand: #d3e2f3; --text: #1f2937; --grau: #64748b;
  --titel: #EB0005; --gruen: #1a7f37; --rot: #c62828; --gelb: #d99a00;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--seite);
       color: var(--text); font-size: 15px; }
a { color: var(--aktiv); text-decoration: none; }
h1, h2, h3 { color: var(--titel); margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.2rem; }
.layout { display: flex; min-height: 100vh; }
.menue { width: 210px; background: var(--menue); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.menue .logo { font-size: 1.4rem; font-weight: 700; text-align: center; padding: 22px 0; letter-spacing: .05em; }
.menue a.punkt { display: block; color: #fff; padding: 13px 22px; font-size: 1.05rem; }
.menue a.punkt:hover { background: var(--menue-hover); }
.menue a.punkt.aktiv { background: var(--aktiv); }
.menue .fuss { margin-top: auto; padding: 14px 22px; font-size: .85rem; color: #9db7d5; }
.menue .fuss a, .menue .fuss button { color: #fff; text-decoration: underline; background: none; border: 0; padding: 3px 0;
       font: inherit; cursor: pointer; display: block; }
.inhalt { flex: 1; padding: 22px 26px; min-width: 0; }
.kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.kopf .zaehler, .grau { color: var(--grau); font-size: .9rem; }
.leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.leiste .rechts { margin-left: auto; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-top: 4px solid var(--aktiv); border-radius: 4px;
         padding: 14px 16px; margin-bottom: 16px; }
.karte.gelb { border-top-color: var(--gelb); } .karte.gruen { border-top-color: var(--gruen); }
.karte.rot { border-top-color: var(--rot); }
.karte h2 { margin-bottom: 8px; }
.raster { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.raster2 { display: grid; gap: 14px; grid-template-columns: 2fr 3fr; align-items: start; }
.kpi .titel { font-size: .75rem; font-weight: 700; color: var(--titel); text-transform: uppercase; }
.kpi .zahl { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.zahl.gruen, .gruen { color: var(--gruen); } .zahl.rot, .rot { color: var(--rot); } .zahl.gelb { color: var(--gelb); }
.zahl.blau { color: var(--aktiv); }
.tabelle-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; background: #e8f0fb; color: var(--grau); font-size: .8rem; padding: 8px 10px; white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #eef3fa; vertical-align: middle; }
tr:nth-child(even) td { background: #f6faff; }
td.zahl, th.zahl { text-align: right; }
tr.gelb td { background: #fff3a8; } tr.rot td { background: #ffd6d6; } tr.grau td { background: #d9d9d9; color: #555; }
tr.defekt td { color: var(--rot); }
.knopf, button.knopf { display: inline-block; padding: 7px 14px; border: 1px solid #b8c7da; background: #f1f4f8; color: var(--text);
       border-radius: 4px; font: inherit; cursor: pointer; }
.knopf:hover { background: #e4eaf2; }
.knopf.haupt { background: var(--aktiv); border-color: var(--aktiv); color: #fff; font-weight: 600; }
.knopf.haupt:hover { background: #1d4ed8; }
.knopf.gefahr { color: var(--rot); }
.knopf.klein { padding: 3px 9px; font-size: .85rem; }
.knopf.chip { background: #fff; } .knopf.chip.an { background: var(--aktiv); border-color: var(--aktiv); color: #fff; font-weight: 600; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #b8c7da; border-radius: 4px; font: inherit; background: #fff; }
.suche { width: 220px; }
.zeile-check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 12px 0; }
.zeile-check input { width: auto; }
.formular { max-width: 640px; }
.formular .aktionen { margin-top: 20px; display: flex; gap: 8px; }
.meldungen { margin-bottom: 12px; }
.meldung { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; border: 1px solid; }
.meldung.ok { background: #e6f6ea; border-color: #9ad3a8; color: #14532d; }
.meldung.fehler { background: #fdecea; border-color: #f1a9a4; color: #7f1d1d; }
.hinweis { color: var(--grau); font-size: .88rem; margin: 6px 0; }
.punkt { white-space: nowrap; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rand); margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 4px 4px 0 0; background: #dde8f5; color: var(--text); }
.tabs a.aktiv { background: var(--aktiv); color: #fff; font-weight: 600; }
.mitte { max-width: 380px; margin: 9vh auto; }
.mitte h1 { text-align: center; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .8rem; background: #e8f0fb; }
.leer { color: var(--gruen); padding: 14px 0; }
.liste-check td:first-child { width: 100%; }
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .menue { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .menue .logo { padding: 10px 16px; }
  .menue a.punkt { padding: 10px 12px; font-size: .95rem; }
  .menue .fuss { margin: 0 0 0 auto; padding: 6px 12px; display: flex; gap: 12px; align-items: center; }
  .inhalt { padding: 14px 12px; }
  .raster { grid-template-columns: 1fr 1fr; }
  .raster2 { grid-template-columns: 1fr; }
  .suche { width: 100%; }
}