/* =========================================================
   cloudnetz – Statusseite (/status)
   ========================================================= */
.st-overall { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.st-overall strong { display: block; font-size: 1.25rem; color: var(--text); }
.st-overall span { color: var(--muted); font-size: .9rem; }
.st-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.st-operational .st-dot, .st-dot.st-operational { background: #22c55e; box-shadow: 0 0 14px rgba(34, 197, 94, .7); }
.st-maintenance .st-dot, .st-dot.st-maintenance { background: #38bdf8; box-shadow: 0 0 14px rgba(56, 189, 248, .7); }
.st-degraded .st-dot, .st-dot.st-degraded { background: #facc15; box-shadow: 0 0 14px rgba(250, 204, 21, .6); }
.st-partial .st-dot, .st-dot.st-partial { background: #fb923c; box-shadow: 0 0 14px rgba(251, 146, 60, .6); }
.st-outage .st-dot, .st-dot.st-outage { background: #ef4444; box-shadow: 0 0 14px rgba(239, 68, 68, .7); }
.st-components { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface); }
.st-component { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--border); }
.st-component:first-child { border-top: 0; }
.st-component p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.st-component strong { color: var(--text); }
.st-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--text); }
.st-pill .st-dot { width: 10px; height: 10px; }
.st-list { display: grid; gap: 14px; }
.st-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.st-card h3 { margin: 6px 0 4px; font-size: 1.1rem; color: var(--text); }
.st-meta { margin: 0; color: var(--muted); font-size: .85rem; }
.st-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.st-updates { margin: 14px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--border); }
.st-updates li { position: relative; margin: 0 0 12px; padding-left: 16px; }
.st-updates li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.st-updates p { margin: 2px 0 0; color: var(--text); white-space: pre-line; }
.st-updates small { color: var(--muted); }
.st-empty { color: var(--muted); }
.st-feed { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: .9rem; color: var(--accent); text-decoration: none; }
@media (max-width: 560px) { .st-component { align-items: flex-start; flex-direction: column; gap: 6px; } }