/* MX-Archive - die Statusseite (STAT-1, 08.11.2026; app/status.js, app/status.html, app/status-statisch.html, mx/status.py). Das Kleid ist
   Kinosaal: Tokens, Schriften und Marke aus app/kinosaal.css (die eigenstaendige Seite setzt data-stil fest wie die Seite eines geteilten
   Downloads), hier steht nur der Aufbau. Keine eigenen Farben: jede Regel nimmt var(). Zustand immer in Wort, Zeichen und Farbe (gut, warnung,
   fehler; unbekannt in Text 3). Am Handy (bis 640 px) werden die Segmente schmaler, Wort und Name stehen untereinander. Klassen mit stat-, damit
   nichts mit der Startseite (st-) zusammenstoesst. Im Archiv (#/status) gelten dieselben Regeln unter .stat-im-archiv;
   dort kann auch das klassische Kleid gelten, darum traegt jedes Token des Kinosaals den Namen von app/app.css als Rueckfall
   (var(--gut,var(--ok))), unter Kinosaal zeigen beide auf denselben Wert. */
.status-eigen{margin:0;min-height:100vh;min-height:100dvh;background:var(--grund);color:var(--text);font-family:var(--sans)}
.stat-seite{box-sizing:border-box;width:min(100%,1040px);margin-inline:auto;padding:var(--s6) var(--s5) var(--s8,var(--s7));overflow-wrap:anywhere}
.stat-im-archiv{padding-top:var(--s4)}
.stat-seite h1,.stat-seite h2,.stat-seite h3,.stat-seite h4,.stat-seite p{margin:0}
.stat-klein{font-size:var(--t-13,var(--t-s));line-height:var(--z-13,1.4);color:var(--text-3,var(--text3))}

/* Kopf: Marke, dann der Gesamtzustand in einem Satz mit Zeichen */
.stat-kopf{display:flex;flex-direction:column;gap:var(--s5);padding-bottom:var(--s6);border-bottom:var(--rand-b,1px) solid var(--linie-2,var(--linie2))}
.stat-marke{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--kond);font-weight:var(--g-titel,700);font-size:var(--t-24,var(--t-xl));line-height:1;letter-spacing:.01em;color:var(--text)}
.stat-marke span{font-weight:var(--g-kopf,700);color:var(--text-3,var(--text3));letter-spacing:.04em}
.stat-lage{display:flex;align-items:flex-start;gap:var(--s4)}
.stat-lage>.stat-zeichen{flex:none;width:40px;height:40px;margin-top:2px}
.stat-lage h1{font-family:var(--kond);font-weight:var(--g-kopf,700);font-size:var(--t-36,var(--t-3xl));line-height:var(--z-36,1.15);color:var(--text)}
.stat-lage p{margin-top:var(--s2)}
.stat-zeichen{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-kopf.stat-gruen .stat-lage>.stat-zeichen{color:var(--gut,var(--ok))}
.stat-kopf.stat-gelb .stat-lage>.stat-zeichen{color:var(--warnung,var(--warn))}
.stat-kopf.stat-rot .stat-lage>.stat-zeichen{color:var(--fehler,var(--krit))}
.stat-kopf.stat-unbekannt .stat-lage>.stat-zeichen{color:var(--text-3,var(--text3))}

/* Wort eines Zustands */
.stat-wort{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-14,var(--t-s));line-height:var(--z-14,1.4);font-weight:var(--g-mittel,600);white-space:nowrap}
.stat-wort.stat-gruen,.stat-phase.stat-gruen{color:var(--gut,var(--ok))}
.stat-wort.stat-gelb,.stat-phase.stat-gelb{color:var(--warnung,var(--warn))}
.stat-wort.stat-rot,.stat-phase.stat-rot{color:var(--fehler,var(--krit))}
.stat-wort.stat-unbekannt{color:var(--text-3,var(--text3))}
.stat-legende{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s4)}

/* Vorfaelle oben: offen zuerst, mit Rand in der Farbe der Phase */
.stat-abschnitt-vorfaelle{display:flex;flex-direction:column;gap:var(--s4);margin-block:var(--s6)}
.stat-ruhig{font-size:var(--t-16,var(--t-m));line-height:var(--z-16,1.5);color:var(--text-2,var(--text2))}
.stat-vorfall{padding:var(--s5);background:var(--flaeche);border:var(--rand-b,1px) solid var(--linie-2,var(--linie2));border-radius:var(--r-flaeche,var(--r-m))}
.stat-vorfall.stat-offen{border-color:var(--warnung-rand,var(--warn-rand));background:var(--warnung-tief,var(--warn-tief))}
.stat-vorfall-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.stat-vorfall h3{font-family:var(--kond);font-weight:var(--g-kopf,700);font-size:var(--t-24,var(--t-xl));line-height:var(--z-24,1.2);color:var(--text)}
.stat-phase{font-size:var(--t-14,var(--t-s));line-height:var(--z-14,1.4);font-weight:var(--g-mittel,600)}
.stat-vorfall>.stat-klein{margin-top:var(--s1)}
.stat-schritte{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s4);border-left:var(--rand-b,1px) solid var(--linie-2,var(--linie2))}
.stat-schritte li{padding-left:var(--s4)}
.stat-schritte b{font-weight:var(--g-mittel,600);color:var(--text)}
.stat-schritte time{font-size:var(--t-13,var(--t-s));color:var(--text-3,var(--text3))}
.stat-schritte p{margin-top:var(--s1);font-size:var(--t-16,var(--t-m));line-height:var(--z-16,1.5);color:var(--text-2,var(--text2));white-space:pre-wrap}

/* Gruppen mit 90 Tagen, darunter die Komponenten zum Aufklappen */
.stat-gruppen{display:flex;flex-direction:column;gap:var(--s4)}
.stat-gruppe{padding:var(--s5);background:var(--flaeche);border:var(--rand-b,1px) solid var(--linie-2,var(--linie2));border-radius:var(--r-flaeche,var(--r-m))}
.stat-gruppe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.stat-gruppe h2{font-family:var(--kond);font-weight:var(--g-kopf,700);font-size:var(--t-24,var(--t-xl));line-height:var(--z-24,1.2);color:var(--text)}
.stat-balken{display:flex;gap:2px;height:32px;margin-top:var(--s4)}
.stat-tag{flex:1 1 0;min-width:0;border-radius:var(--r-xs);background:var(--flaeche-3,var(--flaeche3))}
.stat-tag.stat-gruen,.stat-abschnitt.stat-gruen{background:var(--gut,var(--ok))}
.stat-tag.stat-gelb,.stat-abschnitt.stat-gelb{background:var(--warnung,var(--warn))}
.stat-tag.stat-rot,.stat-abschnitt.stat-rot{background:var(--fehler,var(--krit))}
.stat-tag.stat-unbekannt,.stat-abschnitt.stat-unbekannt{background:var(--flaeche-3,var(--flaeche3))}
.stat-tag:hover{outline:var(--rand-b,1px) solid var(--licht,var(--text));outline-offset:1px}
.stat-achse{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s2);font-size:var(--t-13,var(--t-s));line-height:var(--z-13,1.4);color:var(--text-3,var(--text3))}
.stat-komponenten{margin-top:var(--s4);border-top:var(--rand-b,1px) solid var(--linie)}
.stat-komponente{border-bottom:var(--rand-b,1px) solid var(--linie)}
.stat-komponente>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--ziel-min,44px);padding-block:var(--s3);cursor:pointer;list-style:none}
.stat-komponente>summary::-webkit-details-marker{display:none}
.stat-komponente>summary::before{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--text-3,var(--text3));border-bottom:1.5px solid var(--text-3,var(--text3));transform:rotate(-45deg);transition:transform var(--dauer-fokus,.15s)}
.stat-komponente[open]>summary::before{transform:rotate(45deg)}
.stat-komponente>summary:focus-visible{outline:var(--ring,2px) solid var(--licht,var(--text));outline-offset:var(--ring-abstand,2px)}
.stat-name{flex:1 1 0;min-width:0;font-size:var(--t-16,var(--t-m));line-height:var(--z-16,1.5);color:var(--text)}
.stat-komponente>p,.stat-komponente>h4{margin-top:var(--s2)}
.stat-komponente>h4{font-size:var(--t-13,var(--t-s));font-weight:var(--g-mittel,600);color:var(--text-3,var(--text3))}
.stat-komponente{padding-bottom:var(--s1)}
.stat-komponente[open]{padding-bottom:var(--s4)}
.stat-stunden{display:flex;height:16px;margin-top:var(--s2);border-radius:var(--r-xs);overflow:hidden}
.stat-abschnitt{min-width:1px}
.stat-komponente .stat-balken{height:24px}

.stat-vergangen{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s7)}
.stat-vergangen h2{font-family:var(--kond);font-weight:var(--g-kopf,700);font-size:var(--t-24,var(--t-xl));line-height:var(--z-24,1.2)}
.stat-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s5);border-top:var(--rand-b,1px) solid var(--linie-2,var(--linie2))}
.stat-fuss a{color:var(--text);text-underline-offset:3px}

@media (max-width:640px){
  .stat-seite{padding:var(--s5) var(--s4) var(--s7)}
  .stat-lage>.stat-zeichen{width:28px;height:28px}
  .stat-lage h1{font-size:var(--t-24,var(--t-xl));line-height:var(--z-24,1.2)}
  .stat-gruppe,.stat-vorfall{padding:var(--s4)}
  .stat-balken{gap:1px;height:28px}
  .stat-gruppe-kopf{flex-direction:column;gap:var(--s1)}
  .stat-komponente>summary{flex-wrap:wrap;gap:var(--s1) var(--s3)}
  .stat-komponente>summary .stat-wort{flex-basis:100%;padding-left:20px}
}
@media (prefers-reduced-motion:reduce){.stat-komponente>summary::before{transition:none}}