:root {
  --bg: #f4f6f9;
  --karte: #ffffff;
  --text: #1b2230;
  --leise: #556070;
  --kontur: #d9dfe8;
  --akzent: #2455c3;
  --up: #17803d;
  --down: #c62828;
  --unknown: #5b6573;
  --radius: 10px;
  --abstand: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111620;
    --karte: #1a212e;
    --text: #e8ecf3;
    --leise: #9aa5b6;
    --kontur: #2b3547;
    --akzent: #7ba3ff;
    --up: #4cc27a;
    --down: #ff7b7b;
    --unknown: #9aa5b6;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; font-size: 1rem; min-height: 100vh; display: flex; flex-direction: column; }
main { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--abstand) 32px; flex: 1; }
a { color: var(--akzent); }
a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.kopf { max-width: 72rem; width: 100%; margin: 0 auto; padding: 20px var(--abstand) 0; }
.marke { color: var(--leise); text-decoration: none; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; min-height: 44px; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 8px 0 4px; line-height: 1.15; }
h2 { font-size: 1.15rem; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.stand { color: var(--leise); margin: 0 0 24px; font-size: .9rem; }
.hinweis { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--radius); padding: var(--abstand); max-width: 40rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.karte { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--radius); padding: var(--abstand); display: flex; flex-direction: column; gap: 10px; }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.lampe { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status-up { color: var(--up); }
.status-down { color: var(--down); }
.status-unknown { color: var(--unknown); }
.status-unknown .lampe { background: transparent; border: 2px solid currentColor; }
.status-down .lampe { border-radius: 2px; }
.text { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.text.leer { color: var(--leise); font-style: italic; }
.uptime { margin: 0; color: var(--leise); font-size: .9rem; }
.zahl { font-variant-numeric: tabular-nums; }
.links { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--kontur); font-size: .95rem; }
.links a { display: inline-block; padding: 10px 0; min-height: 44px; }
.links .haupt { font-weight: 700; }
.links .zahl { color: var(--leise); font-size: .85rem; }
.text-seite { max-width: 40rem; padding-top: 8px; }
.text-seite h2 { margin-top: 24px; margin-bottom: 4px; }
.entwurf { background: var(--karte); border: 1px solid var(--down); border-radius: var(--radius); padding: 8px 12px; }
.fuss { max-width: 72rem; width: 100%; margin: 0 auto; padding: 16px var(--abstand) 24px; border-top: 1px solid var(--kontur); display: flex; flex-wrap: wrap; gap: 0 20px; font-size: .9rem; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }
@media (prefers-reduced-motion: no-preference) { .karte { transition: border-color .15s; } .karte:hover { border-color: var(--akzent); } }