/* Statusseite (Paket ui, docs/status-page-architecture.md 10.1).
   Klein und ohne Abhängigkeiten: lebt auf www.arevano.com neben arevano.min.css
   und wird in der Momentaufnahme der Edges inline eingesetzt
   (Arevano\Status\SnapshotRenderer). Farben je Theme über Variablen;
   Zustände tragen immer Symbol + Text, nie nur Farbe. */
.sp-root{--sp-green:#1e8e4e;--sp-yellow:#b98900;--sp-orange:#d4660a;--sp-red:#cf2f36;--sp-blue:#2a6fd6;--sp-grey:#a7b0bd;--sp-violet:#7b3fe4;--sp-accent:#00a3bd;
  --sp-fg:var(--bs-body-color,#0b1324);--sp-muted:var(--bs-secondary-color,#4a5466);--sp-card:var(--bs-body-bg,#fff);--sp-border:var(--bs-border-color,rgba(11,19,36,.14));
  --sp-soft:color-mix(in oklab,var(--sp-fg) 4%,transparent);color:var(--sp-fg);overflow-wrap:anywhere}
[data-bs-theme=dark] .sp-root{--sp-green:#34c27a;--sp-yellow:#f2c443;--sp-orange:#f59443;--sp-red:#f2646c;--sp-blue:#5c9dff;--sp-grey:#4c5566;--sp-violet:#a98bff;--sp-accent:#00b8d4}
.sp-container{max-width:980px}
.sp-defs{position:absolute;width:0;height:0;overflow:hidden}
.sp-hatch-line{fill:rgba(255,255,255,.55)}
[data-bs-theme=dark] .sp-hatch-line{fill:rgba(0,0,0,.45)}
.sp-head{margin-bottom:1.25rem}
.sp-title{margin:.35rem 0 .5rem}
.sp-lead{color:var(--sp-muted);max-width:62ch;margin:0}
.sp-h2{font-size:1.15rem;font-weight:700;margin:2rem 0 .75rem;letter-spacing:.01em}
.sp-h3{font-size:1rem;font-weight:700;margin:0 0 .5rem}
.sp-muted{color:var(--sp-muted)}
.sp-link{font-weight:600}
.sp-nowrap{white-space:nowrap}

/* Zustände */
.sp-ico{width:1.05em;height:1.05em;fill:currentColor;flex:none;vertical-align:-.15em}
.sp-state{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;white-space:nowrap}
.sp-state>span{color:var(--sp-fg)}
.sp-st-operational{color:var(--sp-green)}.sp-st-degraded{color:var(--sp-yellow)}.sp-st-outage{color:var(--sp-red)}
.sp-st-maintenance{color:var(--sp-blue)}.sp-st-no_data{color:var(--sp-grey)}

/* Gesamtbanner */
.sp-banner{border:1px solid var(--sp-border);border-left:6px solid var(--sp-grey);border-radius:12px;padding:1rem 1.25rem;background:var(--sp-card);margin:0 0 1rem}
.sp-bn-operational{border-left-color:var(--sp-green)}.sp-bn-degraded{border-left-color:var(--sp-yellow)}.sp-bn-outage{border-left-color:var(--sp-red)}.sp-bn-maintenance{border-left-color:var(--sp-blue)}
.sp-banner-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.sp-banner-state{font-size:1.25rem}
.sp-banner-asof{color:var(--sp-muted);font-size:.92rem}
.sp-banner-note{margin:.35rem 0 0;color:var(--sp-muted);font-size:.88rem}
.sp-alert{border:1px solid var(--sp-border);border-left:4px solid var(--sp-blue);border-radius:10px;padding:.75rem 1rem;background:var(--sp-soft)}
.sp-alert-warn{border-left-color:var(--sp-yellow)}

/* Gruppen und Dienste */
.sp-group{border:1px solid var(--sp-border);border-radius:12px;background:var(--sp-card);margin:0 0 1rem;overflow:hidden}
.sp-group>summary{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:.85rem 1.1rem;cursor:pointer;list-style:none;background:var(--sp-soft)}
.sp-group>summary::-webkit-details-marker{display:none}
.sp-group>summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--sp-muted);border-bottom:2px solid var(--sp-muted);transform:rotate(-45deg);transition:transform .15s}
.sp-group[open]>summary::before{transform:rotate(45deg)}
.sp-group-name{font-weight:700;font-size:1.05rem;margin-right:auto}
.sp-group-count{color:var(--sp-muted);font-size:.9rem;width:100%;padding-left:1.4rem}
.sp-item{padding:1rem 1.1rem;border-top:1px solid var(--sp-border)}
.sp-group-body>.sp-item:first-child{border-top:0}
.sp-item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.sp-item-name{font-size:1rem;font-weight:700;margin:0;margin-right:auto}
.sp-item-avail{font-variant-numeric:tabular-nums;font-weight:600}
.sp-item-avail small{color:var(--sp-muted);font-weight:400}
.sp-item-desc,.sp-item-count{margin:.25rem 0 0;color:var(--sp-muted);font-size:.9rem}
.sp-children{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;padding:0;margin:.5rem 0 0;font-size:.9rem}
.sp-children li{display:inline-flex;align-items:center;gap:.3rem}
.sp-child-state{color:var(--sp-muted)}

/* Tagesbalken */
.sp-bars-wrap{margin:.7rem 0 .2rem}
.sp-bars{display:block;width:100%;height:34px}
.sp-bars .g{fill:var(--sp-green)}.sp-bars .y{fill:var(--sp-yellow)}.sp-bars .o{fill:var(--sp-orange)}.sp-bars .r{fill:var(--sp-red)}
.sp-bars .b{fill:var(--sp-blue)}.sp-bars .n{fill:var(--sp-grey);opacity:.55}.sp-bars .h{fill:url(#sp-hatch)}
.sp-bars g:hover rect:first-child{opacity:.75}
.sp-bars-axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--sp-muted)}

/* Kennzahlen */
.sp-facts,.sp-avail{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin:.6rem 0 0;font-size:.9rem}
.sp-avail{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.sp-facts>div,.sp-avail>div{min-width:0}
.sp-facts dt,.sp-avail dt{font-weight:400;color:var(--sp-muted);display:inline}
.sp-facts dt::after{content:": "}
.sp-facts dd{display:inline;margin:0;font-weight:600}
.sp-avail dt{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.sp-avail dd{margin:0;font-variant-numeric:tabular-nums}
.sp-avail dd small{display:block;color:var(--sp-muted);font-size:.78rem;max-width:26ch}
.sp-none{color:var(--sp-muted)}

/* Antwortzeit (aufklappbar, Zeitraumwahl ohne JavaScript) */
.sp-more{margin-top:.7rem}
.sp-more>summary{cursor:pointer;color:var(--bs-link-color,var(--sp-accent));font-weight:600;font-size:.92rem}
.sp-tabs{position:relative;margin-top:.6rem}
.sp-tabs>input{position:absolute;opacity:0;width:1px;height:1px}
.sp-tabs>label{display:inline-block;padding:.2rem .7rem;margin:0 .25rem .4rem 0;border:1px solid var(--sp-border);border-radius:999px;font-size:.82rem;cursor:pointer}
.sp-tabs>input:checked+label{background:var(--sp-accent);border-color:var(--sp-accent);color:#04131a;font-weight:600}
.sp-tabs>input:focus-visible+label{outline:2px solid var(--sp-accent);outline-offset:2px}
.sp-panel{display:none}
.sp-tabs>.r24:checked~.sp-panels .p24,.sp-tabs>.r7:checked~.sp-panels .p7,.sp-tabs>.r30:checked~.sp-panels .p30,.sp-tabs>.r90:checked~.sp-panels .p90{display:block}
.sp-chart{display:block;width:100%;max-width:760px;height:auto}
.sp-chart .gl{stroke:var(--sp-border);stroke-width:1}
.sp-chart .gt{stroke:var(--sp-border);stroke-width:1;stroke-dasharray:2 4}
.sp-chart .ax{font-size:13px;fill:var(--sp-muted);font-family:inherit}
.sp-chart .em{font-size:14px;fill:var(--sp-muted)}
.sp-chart .b95{fill:var(--sp-accent);opacity:.18}
.sp-chart .l50{fill:none;stroke:var(--sp-accent);stroke-width:1.7;stroke-linejoin:round}
.sp-chart .l50.d{stroke-dasharray:5 3}
.sp-chart .p50{fill:var(--sp-accent)}
.sp-chart .bo{fill:var(--sp-red);opacity:.2}.sp-chart .bm{fill:var(--sp-blue);opacity:.2}.sp-chart .bd{fill:var(--sp-yellow);opacity:.2}
.sp-chart .mk line{stroke:var(--sp-violet);stroke-width:1.3}.sp-chart .mk path{fill:var(--sp-violet)}
.sp-chart .mk2 line{stroke:var(--sp-muted);stroke-dasharray:3 2}.sp-chart .mk2 path{fill:var(--sp-muted)}
.sp-notable{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.85rem;table-layout:fixed}
.sp-notable caption{caption-side:top;text-align:left;font-weight:600;color:var(--sp-fg);padding:0 0 .3rem}
.sp-notable th,.sp-notable td{text-align:left;padding:.3rem .4rem;border-bottom:1px solid var(--sp-border);vertical-align:top}
.sp-notable th:first-child{width:9.5rem}

/* Legende */
.sp-sw{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.4rem;vertical-align:-.1em;background:var(--sp-grey)}
.sp-sw-green{background:var(--sp-green)}.sp-sw-yellow{background:var(--sp-yellow)}.sp-sw-orange{background:var(--sp-orange)}.sp-sw-red{background:var(--sp-red)}
.sp-sw-blue{background:var(--sp-blue)}.sp-sw-grey{background:var(--sp-grey);opacity:.55}
.sp-sw-hatch{background:repeating-linear-gradient(45deg,var(--sp-green) 0 3px,rgba(255,255,255,.6) 3px 4.5px)}
.sp-sw-p95{background:color-mix(in oklab,var(--sp-accent) 25%,transparent)}
.sp-sw-bm{background:color-mix(in oklab,var(--sp-blue) 30%,transparent)}.sp-sw-bo{background:color-mix(in oklab,var(--sp-red) 30%,transparent)}
.sp-ln{display:inline-block;width:1rem;height:0;border-top:2px solid var(--sp-accent);margin-right:.4rem;vertical-align:.2em}
.sp-ln-upd{border-top-color:var(--sp-violet);width:2px;height:.9rem;border-top:0;border-left:2px solid var(--sp-violet);vertical-align:-.15em}
.sp-foot{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--sp-border);font-size:.9rem}
.sp-legend ul{list-style:none;padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.sp-states-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.sp-explain p{margin:0 0 .5rem;color:var(--sp-muted)}

/* Meldungen */
.sp-event{border:1px solid var(--sp-border);border-left:5px solid var(--sp-red);border-radius:10px;background:var(--sp-card);padding:.9rem 1.1rem;margin:0 0 .85rem}
.sp-ev-degraded{border-left-color:var(--sp-yellow)}.sp-ev-maintenance{border-left-color:var(--sp-blue)}.sp-ev-info{border-left-color:var(--sp-accent)}.sp-ev-done{border-left-color:var(--sp-grey)}
.sp-event-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem}
.sp-tag{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.03em;padding:.1rem .5rem;border-radius:999px;background:var(--sp-soft);border:1px solid var(--sp-border)}
.sp-event-title{font-size:1.02rem;font-weight:700;margin:0 0 .35rem}
.sp-period{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;margin:0 0 .35rem;font-size:.88rem}
.sp-period dt{display:inline;font-weight:400;color:var(--sp-muted)}.sp-period dt::after{content:": "}
.sp-period dd{display:inline;margin:0}
.sp-affected{margin:0 0 .35rem;font-size:.88rem}.sp-affected span{color:var(--sp-muted)}
.sp-updates{list-style:none;margin:.5rem 0 0;padding:0 0 0 .9rem;border-left:2px solid var(--sp-border)}
.sp-updates li{margin:0 0 .6rem}
.sp-up-meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-size:.82rem;color:var(--sp-muted)}
.sp-up-meta strong{color:var(--sp-fg)}
.sp-updates p{margin:.15rem 0 0;font-size:.92rem}
.sp-monthnav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:1rem 0}
.sp-month{margin:0;text-align:center}

@media (max-width:575.98px){
  .sp-banner,.sp-item,.sp-event{padding-left:.8rem;padding-right:.8rem}
  .sp-group>summary{padding:.75rem .8rem}
  .sp-banner-state{font-size:1.1rem}
  .sp-foot{grid-template-columns:1fr}
  .sp-notable th:first-child{width:7rem}
  .sp-avail{gap:.35rem 1rem}
  .sp-monthnav{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.sp-group>summary::before{transition:none}}
@media print{.sp-more{display:none}.sp-group{break-inside:avoid}}