/* =========================================================
   Statusseite (status.html)

   Stand vorher: 69 Zeilen `<style>` im `<head>` des Templates. Dort greift
   keine der Prüfungen aus `test_designsystem.py` – entsprechend standen die
   Abstände als rohe Pixel da (26 neben 28 neben 40), die Schriftgrößen als
   rohe rem (.72 neben .8 neben .82 neben .88 neben .9 neben .93 neben .95),
   und `.badge` war zum zweiten Mal im Repo definiert: dieselbe Pille, andere
   Werte, eigene Varianten (`badge-sev`, `badge-resolved`) für Zustände, für
   die es im Dashboard längst Namen gab.

   Geladen nach `tokens.css` und `landing.css`; die Grundlagen (body, Schrift,
   Logo-Zeile) kommen von dort.
   ========================================================= */

.status-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-5) var(--sp-9);
}

.status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}
.status-top .logo { letter-spacing: .28em; font-weight: 800; }
.status-back { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.status-back:hover { color: var(--text); }

/* ---- Gesamtlage -------------------------------------------------------
   Die Farbe des Streifens steht in `--lvl`, gesetzt von der Zustandsklasse.
   Ein Zustand trägt die Farbe, nicht ein Zeichen – dieselbe Regel wie bei
   den Abzeichen im Dashboard. */
.status-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 5px solid var(--lvl);
}
.status-banner .dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--lvl);
    box-shadow: 0 0 12px var(--lvl);
    flex: none;
}
/* Eine Schlagzeile, die mit dem Fenster wächst, ist keine Stufe der
   Textskala – wie die beiden `clamp()`-Überschriften der Verkaufsseite. */
.status-banner h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; }
.status-banner p { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-0); }

.lvl-operational { --lvl: var(--success); }
.lvl-minor       { --lvl: var(--warning); }
.lvl-major       { --lvl: var(--danger); }
.lvl-maintenance { --lvl: var(--info); }

.status-meta {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin: var(--sp-5) var(--sp-1) 0;
    color: var(--muted);
    font-size: var(--fs-sm);
}
.status-meta b { color: var(--text); }

.status-section-title {
    margin: var(--sp-7) 0 var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    text-align: left;
}

/* ---- Störungen -------------------------------------------------------- */
.incident {
    padding: var(--sp-5);
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--surface-2);
    margin-bottom: var(--sp-3);
    border-left: 4px solid var(--sev);
}
.incident.is-resolved { opacity: .62; --sev: var(--success); }
.sev-major       { --sev: var(--danger); }
.sev-minor       { --sev: var(--warning); }
.sev-maintenance { --sev: var(--info); }

.incident-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.incident-head h3 { font-size: var(--fs-lg); margin: 0; }
.incident-body { color: var(--muted); font-size: var(--fs-sm); white-space: pre-line; }
.incident-date { color: var(--muted); font-size: var(--fs-xs); margin-top: var(--sp-2); }

/* ---- Abzeichen: `components.css`.
   Sie standen hier Zeichen für Zeichen wie im Dashboard – die dritte
   Kopie derselben Pille. Davor gab es sogar einen eigenen Satz Namen
   (`badge-sev`, `badge-resolved`) für Zustände, die es drüben längst
   gab. Jetzt lädt diese Seite das gemeinsame Blatt. */

.status-empty {
    text-align: center;
    color: var(--muted);
    padding: var(--sp-6) 0;
    font-size: var(--fs-sm);
}
.status-foot {
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-xs);
    margin-top: var(--sp-8);
}
