/* Status-Seite — schlicht, ruhig, fully responsive. Ein Banner sagt alles,
   darunter Meldungen und die Dienste-Liste. */

.st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 20px max(20px, env(safe-area-inset-left));
  min-width: 0; flex-wrap: wrap; }
.st-marke { font-weight: 800; text-decoration: none; color: var(--ink); }

.st-app { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; min-width: 0; }
.st-app h2 { font-size: 16px; margin: 26px 0 10px; }
.st-fuss { max-width: 760px; margin: 0 auto; padding: 0 20px 32px; font-size: 13px;
  color: var(--ink-muted); }
.st-fuss a { color: var(--ink-muted); }

.st-banner { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid var(--line-strong); font-weight: 700;
  font-size: 16px; min-width: 0; }
.st-ruhig { margin-top: 18px; }

.st-punkt { width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--ink-faint); }
.st--ok .st-punkt, .st-punkt.st--ok { background: var(--ok); }
.st--gestoert .st-punkt, .st-punkt.st--gestoert { background: var(--danger); }
.st--wartung .st-punkt, .st-punkt.st--wartung { background: var(--warn); }
.st--unbekannt { background: var(--ink-faint); }

.st-dienste { display: grid; gap: 10px; min-width: 0; }
.st-dienst { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  min-width: 0; }
.st-dienst .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.st-dienst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-wort { flex: none; font-size: 13px; font-weight: 650; color: var(--ink-muted);
  white-space: nowrap; }
.st-wort.st--ok { color: var(--ok); background: none; }
.st-wort.st--gestoert { color: var(--danger); background: none; }
.st-wort.st--unbekannt { color: var(--ink-faint); background: none; }

.st-meldung { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 10px;
  min-width: 0; border-left: 3px solid var(--warn); }
.st-meldung--gestoert { border-left-color: var(--danger); }
.st-meldung p { margin: 0; overflow-wrap: anywhere; }