:root {
  --grund: #f6f7f9; --karte: #ffffff; --text: #1d2330; --leise: #5b6475; --linie: #e3e6eb;
  --gut: #2f9e5b; --mittel: #d99a1c; --schlecht: #d0453a; --leer: #d5d9e0; --wartung: #3b7dd8;
  --ok-grund: #e8f6ee; --ok-text: #1e6b3d; --st-grund: #fdecea; --st-text: #9b2a21;
  --wa-grund: #e8f0fc; --wa-text: #23549c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12151b; --karte: #1b1f27; --text: #e7eaf0; --leise: #9aa3b2; --linie: #2b313c;
    --gut: #3fbf72; --mittel: #e2ab3a; --schlecht: #ef6458; --leer: #3a414d; --wartung: #5b9cf0;
    --ok-grund: #173323; --ok-text: #8fe0b0; --st-grund: #3a1d1b; --st-text: #ffb2aa;
    --wa-grund: #1b2a42; --wa-text: #a9c8f5;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
a { color: inherit; }
h2 { font-size: 1.05rem; margin: 32px 0 12px; }
h2 span { font-weight: 400; color: var(--leise); font-size: .9rem; margin-left: 6px; }
h3 { font-size: 1rem; margin: 0; }
.kopf .marke { font-weight: 700; font-size: 1.25rem; margin: 0 0 20px; }
.kopf .marke span { font-weight: 400; color: var(--leise); }
.lage { border-radius: 12px; padding: 18px 20px; }
.lage.ok { background: var(--ok-grund); color: var(--ok-text); }
.lage.stoerung { background: var(--st-grund); color: var(--st-text); }
.lage.wartung { background: var(--wa-grund); color: var(--wa-text); }
.lage-titel { font-size: 1.2rem; font-weight: 650; margin: 0; }
.lage-seit { margin: 4px 0 0; font-size: .95rem; }
.wartung, .dienst { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.wartung.laeuft { border-color: var(--wartung); }
.wartung p { margin: 6px 0 0; }
.wartung .wann { font-weight: 600; }
.wartung .betroffen { color: var(--leise); font-size: .95rem; }
.zeile { display: flex; align-items: center; gap: 10px; }
.zeile h3 { flex: 1; }
.punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--leer); flex: none; }
.punkt.ok { background: var(--gut); }
.punkt.stoerung { background: var(--schlecht); }
.punkt.wartung { background: var(--wartung); }
.zustand { font-size: .9rem; color: var(--leise); }
.zustand.stoerung { color: var(--schlecht); font-weight: 600; }
.zustand.wartung { color: var(--wartung); font-weight: 600; }
.grundlage { color: var(--leise); font-size: .85rem; margin: 4px 0 10px 22px; }
.balken { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; height: 32px; }
.balken li { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--leer); }
.balken li.gut { background: var(--gut); }
.balken li.mittel { background: var(--mittel); }
.balken li.schlecht { background: var(--schlecht); }
.balken li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.achse { display: flex; justify-content: space-between; color: var(--leise); font-size: .8rem; margin: 6px 0 0; }
.achse .kurz { display: none; }
footer { margin-top: 32px; color: var(--leise); font-size: .85rem; }
footer p { margin: 6px 0; }
@media (max-width: 600px) {
  .balken li:nth-child(-n+60) { display: none; }
  .balken { gap: 2px; }
  .achse .lang { display: none; }
  .achse .kurz { display: inline; }
  .grundlage { margin-left: 0; }
}