/* Profyntra – Statusseite status.profyntra.com (deploy/statusseite.py kopiert diese Datei als status.css in die Ausgabe).
   Tokens und Schriften wie die Produktseite (website/site.css); Lime = in Betrieb. Kein Inline-Style, kein fremder Inhalt. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --nacht:#0c0d0d; --nacht2:#141615; --nacht3:#1d201e; --linie:rgba(244,244,240,.12);
  --hell:#f4f4f0; --grau:#a3a59d; --grau2:#7c7f77;
  --lime:#d0d42f; --gelb:#e9a23b; --kosten:#ec7f68; --leer:#2c2f2c;
  --f-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:"Space Grotesk","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --r:14px; --kopfhoehe:68px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--hell);font:400 16px/1.55 var(--f-ui);overflow-x:hidden}
a{color:inherit;text-underline-offset:3px}
h1,h2{font-family:var(--f-display);line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.huelle{width:min(860px,100%);margin:0 auto;padding:0 16px}
@media (min-width:760px){.huelle{padding:0 32px}}

.kopf{border-bottom:1px solid var(--linie)}
.kopfzeile{display:flex;align-items:center;gap:14px;height:var(--kopfhoehe)}
.marke{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;color:var(--hell)}
.zeichen{width:32px;height:32px;border-radius:9px;display:block;box-shadow:0 0 0 1px var(--linie)}
.kopftitel{color:var(--grau);font-size:15px;padding-left:14px;border-left:1px solid var(--linie)}

main{padding:40px 16px 56px}
@media (min-width:760px){main{padding:56px 32px 72px}}

/* Gesamtstand */
.gesamt{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:var(--r);background:var(--nacht2);border:1px solid var(--linie)}
.gesamt h1{font-size:clamp(24px,4vw,34px)}
.gesamt p{color:var(--grau);font-size:14.5px;margin-top:4px}
.punkt{flex:none;width:18px;height:18px;border-radius:50%;background:var(--leer)}
.gesamt.ok .punkt{background:var(--lime);box-shadow:0 0 0 6px rgba(208,212,47,.16)}
.gesamt.eingeschraenkt{border-color:rgba(233,162,59,.5)}
.gesamt.eingeschraenkt .punkt{background:var(--gelb);box-shadow:0 0 0 6px rgba(233,162,59,.16)}
.gesamt.aus{border-color:rgba(236,127,104,.6)}
.gesamt.aus .punkt{background:var(--kosten);box-shadow:0 0 0 6px rgba(236,127,104,.18)}

/* Dienste */
.dienste{list-style:none;margin:28px 0 0;padding:0;border:1px solid var(--linie);border-radius:var(--r);background:var(--nacht2)}
.dienst{padding:20px 24px 18px}
.dienst+.dienst{border-top:1px solid var(--linie)}
.dienstkopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.dienst h2{font-size:19px}
.beschreibung{color:var(--grau);font-size:14px;margin-top:2px}
.zustand{font-size:14.5px;font-weight:600;color:var(--grau)}
.zustand.ok{color:var(--lime)}
.zustand.eingeschraenkt{color:var(--gelb)}
.zustand.aus{color:var(--kosten)}

.balken{list-style:none;display:flex;gap:2px;height:34px;margin:14px 0 0;padding:0}
.balken li{flex:1 1 0;min-width:0;border-radius:2px;background:var(--leer)}
@media (min-width:760px){.balken{gap:3px}}
.balken li.ok,.legende .ok{background:var(--lime)}
.balken li.eingeschraenkt,.legende .eingeschraenkt{background:var(--gelb)}
.balken li.aus,.legende .aus{background:var(--kosten)}
.balken li:hover{opacity:.75}
.achse{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--grau2);font-size:12.5px}
.achse span:nth-child(2){color:var(--grau)}

.legende{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;color:var(--grau);font-size:13.5px}
.legende li{display:flex;align-items:center;gap:8px}
.legende span{width:12px;height:12px;border-radius:3px;background:var(--leer)}
.hinweis{color:var(--grau2);font-size:13.5px;margin-top:16px;max-width:44em}

.fuss{border-top:1px solid var(--linie);padding:28px 0 40px;color:var(--grau);font-size:14px}
.fusszeile{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss a{text-decoration:none} .fuss a:hover{color:var(--hell)}