:root {
  --grund: #f5f6f8; --flaeche: #ffffff; --text: #1d2330; --leise: #667085; --linie: #e3e6eb;
  --rot: #c62828; --rot-hell: #fdecea; --gelb: #b26a00; --gelb-hell: #fff4e0; --gruen: #2e7d32; --gruen-hell: #e9f5ea;
  --blau: #1f5fae; --blau-hell: #e8f0fb; --grau-hell: #eef0f3; --akzent: #0b5cad;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45; color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12151b; --flaeche: #1b2029; --text: #e6e9ef; --leise: #9aa3b2; --linie: #2b323e;
    --rot: #ef6b6b; --rot-hell: #3a1d1f; --gelb: #f0b45a; --gelb-hell: #352a17; --gruen: #6cc070; --gruen-hell: #18301b;
    --blau: #7aa7e6; --blau-hell: #19263a; --grau-hell: #232934; --akzent: #7aa7e6;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
.leise { color: var(--leise); }
.leer { color: var(--leise); font-style: italic; }

.kopf { display: flex; align-items: center; gap: 24px; padding: 10px 16px; background: var(--flaeche);
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.marke { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); }
.kopf nav { display: flex; gap: 4px; flex: 1; }
.kopf nav a { padding: 6px 10px; border-radius: 6px; color: var(--text); }
.kopf nav a[aria-current] { background: var(--grau-hell); font-weight: 600; }
.abmelden { display: flex; align-items: center; gap: 10px; margin: 0; }
.fuss { text-align: center; color: var(--leise); font-size: .8rem; padding: 0 0 24px; }

.knopf { display: inline-block; border: 1px solid var(--akzent); background: var(--akzent); color: #fff; border-radius: 6px;
  padding: 6px 12px; font: inherit; cursor: pointer; }
.knopf.leicht { background: transparent; color: var(--akzent); }
.knopf:hover { text-decoration: none; filter: brightness(1.08); }

.hinweis { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--linie); }
.hinweis.rot { background: var(--rot-hell); border-color: var(--rot); }
.hinweis.grau { background: var(--grau-hell); }

.lage { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 10px; margin-bottom: 18px; border-left: 6px solid; background: var(--flaeche); }
.lage p { margin: 0; }
.lage.rot { border-color: var(--rot); background: var(--rot-hell); }
.lage.gelb { border-color: var(--gelb); background: var(--gelb-hell); }
.lage.gruen { border-color: var(--gruen); background: var(--gruen-hell); }
.lage.blau { border-color: var(--blau); background: var(--blau-hell); }
.lage.klein h1 { font-size: 1.3rem; }
.zahlen { display: flex; gap: 22px; }
.zahlen div { display: flex; flex-direction: column; align-items: center; }
.zahl { font-size: 1.6rem; font-weight: 700; }

.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
.liste { margin: 0; padding-left: 18px; }

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-weight: 600; color: var(--leise); font-size: .85rem; border-bottom: 1px solid var(--linie); padding: 6px 8px; }
.tabelle td { border-bottom: 1px solid var(--linie); padding: 7px 8px; vertical-align: top; }
.tabelle.eng td { padding: 4px 8px; font-size: .92rem; }
.tabelle tr.blass { opacity: .6; }
.tabelle td.zeit { white-space: nowrap; color: var(--leise); }
.tabelle td.inhalt { white-space: pre-wrap; word-break: break-word; }
.marke-stufe { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.marke-stufe.kritisch { background: var(--rot); color: #fff; }
.marke-stufe.warnung { background: var(--gelb); color: #fff; }
.marke-stufe.wartung { background: var(--blau); color: #fff; }
.art { font-size: .8rem; padding: 1px 6px; border-radius: 4px; background: var(--grau-hell); white-space: nowrap; }
.art-alarm_beginn, .art-mail_fehler, .art-anmeldung_fehler { background: var(--rot-hell); }
.art-alarm_ende { background: var(--gruen-hell); }
.art-selbstheilung, .art-wartung, .art-ereignis { background: var(--blau-hell); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kachel { display: block; border: 1px solid var(--linie); border-left: 5px solid var(--gruen); border-radius: 8px; padding: 12px 14px;
  color: var(--text); background: var(--flaeche); }
.kachel:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kachel.kritisch { border-left-color: var(--rot); }
.kachel.warnung { border-left-color: var(--gelb); }
.kachel.wartung { border-left-color: var(--blau); }
.kachel-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kachel-status { margin: 4px 0 8px; font-size: .92rem; }
.kachel-fuss { font-size: .8rem; margin-top: 8px; }
.gruppe { font-size: .72rem; padding: 0 6px; border-radius: 4px; background: var(--grau-hell); color: var(--leise); }
.werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; }
.werte dt { font-size: .72rem; color: var(--leise); }
.werte dd { margin: 0; font-weight: 600; }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); flex: none; }
.ampel.kritisch { background: var(--rot); }
.ampel.warnung { background: var(--gelb); }
.ampel.wartung { background: var(--blau); }

.eckdaten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.eckdaten dt { font-size: .8rem; color: var(--leise); }
.eckdaten dd { margin: 0; }

.pruefung { border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 8px; }
.pruefung summary { padding: 8px 12px; cursor: pointer; list-style: none; }
.pruefung summary::-webkit-details-marker { display: none; }
.pruefung summary .rechts { float: right; font-size: .85rem; }
.pruefung.fehler { border-color: var(--rot); }
.pruefung .meldung { font-size: .88rem; margin: 4px 0 0 18px; }
.pruefung .meldung.rot { color: var(--rot); }
.pruefung table { margin: 0 0 8px; }

.filter, .formular { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.formular label, .filter label { display: flex; flex-direction: column; font-size: .85rem; color: var(--leise); gap: 4px; }
.formular label.breit { flex: 1; min-width: 260px; }
.formular.senkrecht { flex-direction: column; align-items: stretch; }
input, select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--text); }

.anmeldung { max-width: 360px; margin: 10vh auto 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 26px; }
.anmeldung h1 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }

@media (max-width: 700px) {
  .tabelle thead { display: none; }
  .tabelle td { display: block; border: none; padding: 2px 4px; }
  .tabelle tr { display: block; border-bottom: 1px solid var(--linie); padding: 6px 0; }
  .werte { grid-template-columns: repeat(2, 1fr); }
}