/* ERZEUGT von tools/status_seite_bauen.py — nicht von Hand aendern.
   Quellen: techq.ch/assets/site.css (:root und .status-*) sowie der
   <style>-Block in techq.ch/status.html. */

/* ── Farbwerte, woertlich aus techq.ch/assets/site.css ─────────────────── */
:root{--bg:#ffffff;--bg-alt:#F6F6F2;--surface:#ffffff;
  --bg-elev:#ffffff;--bg-soft:#F4F6F9;--bg-strong:#ECEFF4;
  --text:#14181C;--text-body:#3A424B;--text-muted:#5B6570;--text-faint:#68717A;--text-soft:#627288;
  --border:#ECECE6;--border-strong:#E1E1DA;--border-faint:#F1F1EC;
  /* Akzent = Logo-Blau (04.08.). Vorher #0B3A6E, ein anderes und viel dunkleres
     Navy als die Wortmarke — und die steht auf JEDER Seite, oben links neben
     dem blauen Text. Fabio: „die schrift die blau ist ist nicht das gleiche
     blau wie das logo, das ist nicht gut."

     05.08.2026, Auftrag Fabio: site-weit auf #3f7fdf — das Logo-Blau der
     DUNKELvariante (Ring), bisher stand hier die Hellvariante #1E5FBF.

       Logo dunkel   #3f7fdf (Schweif #8bb2ea)   <- ab jetzt ueberall
       Logo hell     #1E5FBF (Schweif #6A97DC)   <- vorher
       alt/Navy      #0B3A6E

     WARUM ZWEI TOKEN. #3f7fdf ist heller und faellt als Textfarbe durch:
       #3f7fdf auf #ffffff   3.95:1   FAELLT (noetig 4.5)
       #3f7fdf auf #F6F6F2   3.65:1   FAELLT
       weiss auf #3f7fdf     3.95:1   FAELLT
     Fuer Flaechen, Rahmen, Symbole und Grafik reicht es (Schwelle 3.0), fuer
     Text nicht. Deshalb:
       --accent       #3f7fdf   Flaechen, Rahmen, Symbole, Verlaeufe, Punkte
       --accent-text  #1c4f9e   blauer TEXT und blaue Flaechen MIT weisser Schrift
     Gemessen: #1c4f9e auf #ffffff 7.89:1, auf #e9f0fe 6.90:1, weiss darauf 7.89:1.
     Beide Werte sind derselbe Farbton (216°), nur zwei Helligkeiten — nebeneinander
     liest es sich als eine Farbe.

     Nicht weiter aufhellen: der helle Logo-Zweiton #6A97DC kaeme auf 2.74:1 und
     faellt auch fuer grosse Schrift durch (SHOP-22, 29.07.: „Nicht aufhellen.").

     Zwei Seiten fuehren eigene Token und wurden mitgezogen: index.html und
     pakete.html (beide self-contained, laden site.css nicht). assets/styles.css
     trug ein drittes Blau (#2F80ED); es ist am 05.08. mitgezogen worden, weil
     die Datei auf my.techq.ch sehr wohl geladen wird (22 Seiten).

     --marke-blau-* sind die Verlaufstufen fuer ueberuns-exp.css. Sie standen bis
     04.08. in einer eigenen Datei ueberuns-marke.css; die ist mit dieser
     Umstellung ueberfluessig geworden und geloescht. */
  --accent:#3f7fdf;--accent-text:#1c4f9e;--accent-hover:#2267cd;--accent-soft:#e9f0fe;--row-hover:#FAFAF6;
  --marke-blau-1:#3f7fdf;--marke-blau-2:#5a92e6;--marke-blau-3:#8bb2ea;
  --btn-bg:#14181C;--btn-bg-hover:#000000;--btn-text:#ffffff;
  --header-bg:rgba(255,255,255,0.85);
  --success:#10825A;--success-soft:#E8F6F0;
  --danger:#C2410C;--danger-bg:#FDF1EB;--danger-bd:#F3D6C6;
  --info:#1c4f9e;--info-bg:#e9f0fe;--info-bd:#cfe0f7;
  --warn:#B45309;--warn-soft:#FBF1E6;
  --radius-sm:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;
  --shadow-lg:0 18px 40px -20px rgba(20,24,28,0.25);
  --ring:0 0 0 3px rgba(63,127,223,0.22);}
/* Systemschriftsatz statt Webschrift: eine Schrift, die erst geladen werden
   muss, ist eine weitere Sache, die im Stoerungsfall fehlen kann. */
:root{
  --tq-ui: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --tq-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:var(--tq-ui);font-size:16px;line-height:1.55;
     -webkit-font-smoothing:antialiased;}
a{color:inherit;}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;}
h1,h2,h3{margin:0 0 .4em;line-height:1.2;letter-spacing:-.02em;}
h1{font-size:clamp(28px,3.4vw,40px);font-weight:600;}
.page-hero{padding:clamp(28px,4vw,52px) 0 0;}
.breadcrumbs{font-size:13.5px;color:var(--text-muted);margin-bottom:10px;}
.breadcrumbs a{text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}

/* ── Kopf und Fuss: schmal, ohne Anmeldung, ohne Chat ──────────────────── */
.tqs-kopf{border-bottom:1px solid var(--border);background:var(--surface);}
.tqs-kopf .container{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:60px;}
.tqs-marke{font-weight:600;font-size:19px;letter-spacing:-.02em;text-decoration:none;}
.tqs-marke i{font-style:normal;color:var(--success);}
.tqs-zurueck{font-size:14px;color:var(--text-muted);text-decoration:none;}
.tqs-zurueck:hover{color:var(--text);text-decoration:underline;}
.tqs-fuss{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--border);
  padding:22px 0 30px;font-size:13.5px;color:var(--text-muted);}
.tqs-fuss .container{display:flex;flex-wrap:wrap;gap:8px 20px;
  align-items:center;justify-content:space-between;}
.tqs-fuss a{text-decoration:none;}
.tqs-fuss a:hover{text-decoration:underline;}
.tqs-fuss nav{display:flex;flex-wrap:wrap;gap:8px 18px;}

/* ── Die statuseigenen Regeln aus site.css ─────────────────────────────── */
/* ============================================================================
   STATUS PAGE
   ============================================================================ */
.status-summary{display:flex;gap:16px;align-items:flex-start;padding:clamp(22px,2.6vw,30px);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);}
.status-summary h2{margin:0 0 5px;font-size:clamp(19px,2vw,23px);letter-spacing:-0.02em;font-weight:500;}
.status-summary p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5;}
.status-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.status-summary.ok .status-dot{background:var(--success);box-shadow:0 0 0 5px rgba(16,130,90,0.14);animation:statusPulse 2.4s ease-in-out infinite;}
.status-list{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(18px,2.4vw,26px);border-top:1px solid var(--border);}
.status-row:first-child{border-top:none;}
.status-row .name{font-size:15px;font-weight:500;color:var(--text);letter-spacing:-0.01em;}
.status-row .desc{display:block;font-size:13px;font-weight:400;color:var(--text-muted);margin-top:3px;}
.status-row .uptime{font-family:var(--tq-mono);font-size:12.5px;font-weight:400;color:var(--success);background:var(--success-soft);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.status-note{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(20px,2.4vw,26px);margin-top:20px;}
.status-note h3{font-size:14.5px;font-weight:500;margin:0 0 8px;}
.status-note p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin:0 0 10px;}
.status-note p:last-child{margin-bottom:0;}

/* ── Der <style>-Block aus techq.ch/status.html ────────────────────────────
   Das ist der GROESSERE Teil der Gestaltung: Punkte, Zustandsfarben, das
   Tagesraster, die Namensspalte, die Vorfallskarten. Er stand bis zum
   05.09.2026 versehentlich nicht hier. */
/* Nur was die Seite zus&auml;tzlich braucht; Rahmen, Farben und Abst&auml;nde kommen aus site.css. */
.st-punkt { width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:inline-block; background:#9aa2ab; }
.st-punkt.st-ok { background:#16794a; } .st-punkt.st-warn { background:#b45309; }
.st-punkt.st-stopp { background:#a4262c; } .st-punkt.st-grau { background:#9aa2ab; }
.st-zustand { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.status-row .uptime.z-gestoert  { background:rgba(164,38,44,.10);  color:#a4262c; }
.status-row .uptime.z-wartung   { background:rgba(180,83,9,.10);   color:#b45309; }
.status-row .uptime.z-unbekannt { background:rgba(154,162,171,.14); color:var(--text-muted); }

/* Statusfeld: links die Namen, rechts das Pixelfeld. Beide teilen dieselbe
   feste Zeilenhöhe (30px), sonst laufen Beschriftung und Raster auseinander. */
.st-feld-huelle { display:flex; gap:16px; align-items:flex-start; border:1px solid var(--border);
                  border-radius:14px; background:var(--bg); padding:18px 20px; margin-top:6px; }
.st-namen { flex:0 0 auto; min-width:216px; }
.st-name { height:34px; display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); }
.st-name-text { font-weight:400; }
.st-name-quote { margin-left:auto; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.st-feld { flex:1 1 auto; width:100%; display:block; }
@media (max-width:720px){
  .st-feld-huelle { flex-direction:column; gap:12px; }
  .st-namen { min-width:0; width:100%; }
  .st-name { height:26px; }
}

.st-legende { display:flex; justify-content:space-between; align-items:center; font-size:11.5px;
              color:var(--text-muted); margin:10px 4px 0; flex-wrap:wrap; gap:10px; }
.st-legende-mitte { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.st-legende-mitte i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.st-legende-mitte i.p-ok     { background:rgba(22,121,74,.95); }
.st-legende-mitte i.p-teil   { background:rgba(180,83,9,.95); }
.st-legende-mitte i.p-fehler { background:rgba(164,38,44,.95); }
.st-legende-mitte i.p-leer   { background:rgba(154,162,171,.28); }

/* Angetippte Zelle: eine Zeile Text unter der Legende, leer bis zum ersten Tippen. */
.st-zelle { min-height:1.4em; margin:8px 4px 0; font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
.st-zelle:empty { display:none; }

/* Tabelle: dieselben 30 Tage, als Text. Zusammengeklappt, weil das Feld die
   Geschichte fuer die meisten schon erzaehlt; wer Zahlen will, klappt auf. */
.st-tabelle { margin:14px 0 0; font-size:13px; color:var(--text-muted); }
.st-tabelle summary { cursor:pointer; color:var(--text); font-size:13.5px; }
.st-tabelle-huelle { overflow-x:auto; margin-top:10px; border:1px solid var(--border); border-radius:12px; }
.st-tab { border-collapse:collapse; font-size:12px; white-space:nowrap; }
.st-tab th, .st-tab td { padding:5px 7px; border-bottom:1px solid var(--border); text-align:center; }
.st-tab th { font-weight:500; color:var(--text-muted); }
.st-tab th:first-child, .st-tab td:first-child { text-align:left; position:sticky; left:0; background:var(--bg); color:var(--text); }
.st-tab td.t-ok     { color:#16794a; }
.st-tab td.t-teil   { color:#b45309; }
.st-tab td.t-fehler { color:#a4262c; font-weight:500; }
.st-tab td.t-leer   { color:var(--text-muted); }

/* Vergangene Stoerungen unter der Grafik. */
.st-verlauf { margin-top:28px; }
.st-verlauf h2 { font-size:17px; font-weight:500; margin:0 0 10px; }
.st-verlauf .st-vorfall { margin:0 0 10px; }
.st-verlauf .st-leer { font-size:13.5px; color:var(--text-muted); margin:0; }

/* Puls unter der Kopfzeile: läuft im echten Messtakt mit. */
.st-puls { display:flex; align-items:center; gap:14px; margin:16px 2px 10px; }
.st-puls-spur { flex:1 1 auto; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.st-puls-bar { height:100%; width:0; background:#16794a; border-radius:2px; transition:width 1s linear; }
.st-puls-bar.matt { background:var(--border-strong); }
.st-puls-text { font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; min-width:150px; text-align:right; }
.st-puls.blitz .st-puls-spur { animation:st-blitz .9s ease-out; }
@keyframes st-blitz {
  0%   { box-shadow:0 0 0 0 rgba(22,121,74,.45); }
  100% { box-shadow:0 0 0 7px rgba(22,121,74,0); }
}

@media (prefers-reduced-motion: reduce) {
  .st-puls.blitz .st-puls-spur { animation:none; }
  .st-puls-bar { transition:none; }
}
/* Die Pille aus site.css ist grün — richtig für "läuft", irreführend für alles
   andere. Deshalb je Zustand überschrieben, mit ruhigen Flächen statt Signalfarben. */
.status-row .uptime.z-gestoert  { background:rgba(164,38,44,.10);  color:#a4262c; }
.status-row .uptime.z-wartung   { background:rgba(180,83,9,.10);   color:#b45309; }
.status-row .uptime.z-unbekannt { background:rgba(154,162,171,.14); color:var(--text-muted); }
.st-vorfall { border:1px solid var(--border); border-left:3px solid #a4262c; border-radius:12px; padding:16px 18px; margin:0 0 12px; background:var(--bg); }
.st-vorfall.wartung { border-left-color:#b45309; }
.st-vorfall.erledigt { border-left-color:#16794a; }
.st-vorfall h3 { margin:0 0 4px; font-size:16px; font-weight:500; color:var(--text); }
.st-vorfall .st-zeit { font-size:12.5px; color:var(--text-muted); }
.st-update { border-top:1px solid var(--border); padding:9px 0 0; margin-top:10px; font-size:14px; color:var(--text); }
.st-update b { display:block; font-size:12px; font-weight:400; color:var(--text-muted); margin-bottom:2px; }