/* ---------------------------------------------------------------------------
   Serverstatus (/status/ und /en/status/)
   Baut auf home.css + network-pages.css auf. Eigene Farben gibt es nur für
   die Zustände; sie wechseln wie alle anderen Tokens mit data-theme.
   --------------------------------------------------------------------------- */
:root {
  --status-online: #1f9d55;
  --status-down: #d23f36;
  --status-restart: #c97a0a;
  --status-maintenance: #3848d8;
  --status-unknown: #8a8f98;
  --status-empty: var(--surface-mute);
}
:root[data-theme="dark"] {
  --status-online: #3ccf7f;
  --status-down: #f06a61;
  --status-restart: #f0a83a;
  --status-maintenance: #7c88ff;
  --status-unknown: #8e939c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --status-online: #3ccf7f;
    --status-down: #f06a61;
    --status-restart: #f0a83a;
    --status-maintenance: #7c88ff;
    --status-unknown: #8e939c;
  }
}

.status-tone-online { --tone: var(--status-online); }
.status-tone-down { --tone: var(--status-down); }
.status-tone-restart { --tone: var(--status-restart); }
.status-tone-maintenance { --tone: var(--status-maintenance); }
.status-tone-unknown { --tone: var(--status-unknown); }

/* --- Hero-Panel ------------------------------------------------------------ */
.status-hero-panel > strong { font-size:clamp(32px,3.1vw,46px); line-height:1.05; }
.status-hero-panel .status-hero-state { display:flex; align-items:center; gap:10px; }
.status-hero-panel .status-dot { width:12px; height:12px; box-shadow:0 0 0 4px rgba(255,255,255,.16); }
.status-hero-panel .status-hero-meta { margin-top:14px; color:rgba(255,255,255,.72); font-size:13px; }

/* --- Punkt und Pill -------------------------------------------------------- */
.status-dot { flex:0 0 auto; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--tone, var(--status-unknown)); }
.status-tone-online .status-dot, .status-dot.status-tone-online { animation:status-pulse 2.4s ease-in-out infinite; }
@keyframes status-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation:none !important; } }

.status-pill {
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  background:color-mix(in srgb, var(--tone) 12%, transparent);
  color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap;
}

/* --- Abschnitte ------------------------------------------------------------ */
.status-section { padding-top:90px; padding-bottom:40px; }
.status-section + .status-section { padding-top:40px; }
.status-section:last-of-type { padding-bottom:120px; }
.status-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:-12px 0 28px; color:var(--muted); font-size:13px; }
.status-legend { display:flex; flex-wrap:wrap; gap:8px 18px; }
.status-legend span { display:inline-flex; align-items:center; gap:7px; }
.status-legend i { width:12px; height:12px; border-radius:4px; background:var(--tone); }
.status-legend .status-legend-empty { background:var(--status-empty); }

.status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.status-card-category { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

/* --- Server-Karte ---------------------------------------------------------- */
.status-card {
  display:flex; flex-direction:column; gap:22px; padding:26px 28px; border:1px solid var(--line); border-radius:26px;
  background:var(--surface); box-shadow:0 14px 36px rgba(20,24,34,.035);
}
.status-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.status-card-head h3 { margin:0; font-family:Lexend,Inter,sans-serif; font-size:clamp(22px,1.9vw,27px); line-height:1.1; letter-spacing:-.03em; overflow-wrap:anywhere; }
.status-card-meta { margin:7px 0 0; color:var(--muted); font-size:13px; }
.status-card-body { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:26px; }
.status-uptime strong { display:block; font-family:Lexend,Inter,sans-serif; font-size:32px; line-height:1; letter-spacing:-.04em; }
.status-uptime span { display:block; margin-top:7px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }

.status-days { display:grid; grid-template-columns:repeat(var(--days,7),minmax(0,1fr)); gap:6px; }
.status-day { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.status-day-bar { width:100%; height:38px; border-radius:7px; background:var(--tone, var(--status-empty)); }
.status-day-bar.is-empty { background:var(--status-empty); }
.status-day small { color:var(--muted-2); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* --- Ereignisse ------------------------------------------------------------ */
.status-events { margin:0; padding:8px 0; list-style:none; border:1px solid var(--line); border-radius:26px; background:var(--surface); }
.status-event { display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 26px; }
.status-event + .status-event { border-top:1px solid var(--line-soft); }
.status-event time { color:var(--muted); font-size:13px; }
.status-event strong { font-size:15px; overflow-wrap:anywhere; }
.status-empty-note { margin:0; padding:22px 26px; color:var(--muted); font-size:14px; }

/* --- Hinweise --------------------------------------------------------------- */
.status-notice { display:flex; align-items:center; gap:12px; margin-bottom:22px; padding:16px 20px; border:1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius:18px; background:color-mix(in srgb, var(--tone) 9%, var(--surface)); font-size:14px; }
.status-notice[hidden] { display:none; }
.status-skeleton { height:210px; border-radius:26px; background:var(--surface-soft); border:1px solid var(--line); animation:status-pulse 1.6s ease-in-out infinite; }

@media (max-width:1240px) {
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .status-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .status-section { padding-top:64px; }
  .status-card { padding:22px 20px; border-radius:22px; }
  .status-card-body { grid-template-columns:1fr; gap:18px; }
  .status-day-bar { height:32px; }
  .status-event { grid-template-columns:1fr auto; gap:6px 12px; padding:14px 18px; }
  .status-event time { grid-column:1 / -1; }
}