/* Gemeinsames Aussehen fuer alle Dialer-Seiten.
   Mert am 11.09.2026: der Dialer soll aussehen wie die Zentrale, gleiche
   Schrift, gleiche Farben, gleiche Knopfform. Deshalb liegen die Werte hier
   an EINER Stelle, statt in acht Seiten einzeln.
   Wird als LETZTES im Kopf geladen und setzt die alten Seitenwerte um. */
:root{
  --orange:#e8642a; --orange2:#d2551f;
  --ink:#0f1115; --mut:#767d88; --bg:#f7f8fa; --card:#ffffff;
  --line:#e3e6eb; --line2:#d3d8e0;
  --green:#0f9d58; --red:#d93025; --amber:#b26a00; --blue:#1a73e8;
  --r:8px; --r2:6px;
  --shadow:0 1px 2px rgba(15,17,21,.04);
}
body{background:var(--bg);color:#41474f;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.firma{color:var(--ink);letter-spacing:-.01em}

/* SEITENSPALTE, eine fuer alle Seiten.
   Mert am 11.09.2026: beim Seitenwechsel sprang die Leiste, weil jede Seite
   ihre eigene Navigation mitbrachte, mit unterschiedlich vielen Punkten, und
   zwei Seiten gar keine. Jetzt baut der Server genau eine (`navigation()` in
   setter_service.py), die Seiten tragen nur den Platzhalter __NAV__.
   Aussehen wie in der Zentrale: buendig, weiss, volle Hoehe, Haarlinie,
   heller aktiver Punkt, ein- und ausklappbar. */
:root{--spalte:216px; --spalte-schmal:58px}
body{padding:0!important;max-width:none!important;margin:0!important;
  padding-left:var(--spalte)!important;transition:padding-left .18s cubic-bezier(.22,1,.36,1)}
body.spalte-schmal{padding-left:var(--spalte-schmal)!important}
/* SEITEN OHNE SPALTE BEKOMMEN AUCH KEIN POLSTER (Mert 21.09.2026: "der
   Highlight beim Anmelden ist nicht mittig, der ist leicht rechts").
   Die Anmeldeseite hat keine Navigation, trug aber trotzdem die 216 Pixel
   Platz dafuer, also stand ihre Karte um gut hundert Pixel zu weit rechts.
   Zwei Wege, damit es auch eine kuenftige Seite nicht wieder trifft: die
   Klasse setzt die Seite selbst, die :has-Regel greift ohne Zutun. */
body.ohne-spalte,body.ohne-spalte.spalte-schmal{padding-left:0!important}
body:not(:has(#spalte)){padding-left:0!important}

#spalte{position:fixed;top:0;left:0;bottom:0;width:var(--spalte);z-index:30;
  display:flex;flex-direction:column;gap:1px;
  background:var(--card);border-right:1px solid var(--line);
  padding:56px 10px 14px;overflow-y:auto;overflow-x:hidden;
  transition:width .18s cubic-bezier(.22,1,.36,1)}
body.spalte-schmal #spalte{width:var(--spalte-schmal);padding-left:6px;padding-right:6px}
#spalte::before{content:"eviral.";position:absolute;top:15px;left:16px;
  font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
body.spalte-schmal #spalte::before{content:"e.";left:0;right:0;text-align:center}

#spalte-klapp{position:absolute;top:14px;right:8px;width:26px;height:24px;border:0;
  background:none;border-radius:var(--r2);cursor:pointer;color:var(--mut);font-size:14px;line-height:1}
#spalte-klapp:hover{background:#f1f2f5;color:var(--ink)}
body.spalte-schmal #spalte-klapp{position:static;margin:0 auto 8px}

#spalte a{display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--r2);text-decoration:none;
  font-size:13.5px;font-weight:600;color:#3d434c;white-space:nowrap;
  transition:background .13s,color .13s}
#spalte a svg{flex:none;color:var(--mut)}
#spalte a:hover{background:#f1f2f5;color:var(--ink)}
#spalte a:hover svg{color:var(--ink)}
#spalte a.an{background:#fdf1ec;color:var(--orange)}
#spalte a.an svg{color:var(--orange)}
#spalte a[href="/logout"]{margin-top:auto;color:var(--mut)}
#spalte a[href="/logout"]:hover{color:var(--red);background:#fdecea}
body.spalte-schmal #spalte a{justify-content:center;padding:9px 0}
body.spalte-schmal #spalte a span{display:none}

/* Der Inhalt braucht Luft nach links, und das Logo der Seite waere doppelt. */
body>*:not(#spalte):not(script){padding-left:20px;padding-right:20px}
.top,.kopf{padding:16px 0 0!important;margin:0 0 14px!important;
  background:transparent!important;border:0!important;min-height:0!important;box-shadow:none!important}
/* Rechts Platz für den festen Profilknopf (#ich-knopf), sonst lag er auf jeder Seite über den
   Knöpfen im Kopf, im Dialer über Power Hour und Pause (Probelauf 04.10.2026). Eine Stelle für alle Seiten. */
@media(min-width:861px){.top,.kopf{padding-right:200px!important}}
.top .logo,.kopf .logo{display:none!important}

@media(max-width:860px){
  body,body.spalte-schmal{padding:0!important}
  body>*:not(#spalte):not(script){padding-left:12px;padding-right:12px}
  #spalte,body.spalte-schmal #spalte{position:static;width:auto;height:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
  #spalte::before,body.spalte-schmal #spalte::before{position:static;content:"eviral.";
    margin-right:8px;text-align:left}
  #spalte-klapp{display:none}
  #spalte a,body.spalte-schmal #spalte a{padding:6px 10px;justify-content:flex-start}
  body.spalte-schmal #spalte a span{display:inline}
  #spalte a[href="/logout"]{margin-top:0;margin-left:auto}
  .top .logo,.kopf .logo{display:block!important}
}

/* Kantiger SaaS-Zuschnitt, dieselben vier Radien wie in der Zentrale:
   8 fuer Flaechen, 6 fuer Bedienteile, 999 fuer Pillen, 50% fuer Kreise.
   Mert am 11.09.2026: leicht eckig, aber nicht hart. */
nav,.tabs{border-radius:var(--r);padding:4px}
nav a,.tabs a{border-radius:var(--r2);padding:7px 12px}
.card,.kpi,.kamp,.box,.panel,.lead,.stueck{border-radius:var(--r)!important}
button,.knopf,.ob button,select,input,textarea{border-radius:var(--r2)!important}
.sprint button,.chip,.pill{border-radius:999px!important}
.dial{border-radius:var(--r)!important;box-shadow:0 6px 18px rgba(232,100,42,.26)!important}
.kpi .l{letter-spacing:.5px;color:var(--mut)}
h1,h2{letter-spacing:-.012em}

/* ---------- Chat, unten rechts, wie in der Zentrale ----------
   Uebernommen aus /var/www/eviral-vorschau/uebersicht/index.html, damit beide
   Oberflaechen sich gleich bedienen. Merts Regel vom 11.09.2026: sage ich
   "mach das wie bei X", wird X gelesen und uebernommen, und spaetere Zusaetze
   gelten fuer beide Seiten. Nur die Variablennamen sind die des Dialers. */
.verborgen{display:none!important}
#chat .feld{width:100%;height:36px;padding:0 11px;border:1px solid var(--line2);
  border-radius:var(--r2);background:#fff;font:inherit;color:inherit}
#chat textarea.feld{height:auto;padding:9px 11px;resize:vertical}
#chat .knopf.haupt{height:38px;border:0;background:var(--ink);color:#fff;border-radius:var(--r2);
  font-weight:650;cursor:pointer}
#chat .zu{width:32px;height:32px;border-radius:var(--r2);border:1px solid var(--line2);
  background:#fff;cursor:pointer;font-size:17px;line-height:1}
#chat .unter{font-size:12.5px;color:var(--mut)}
#chat-knopf{position:fixed;right:20px;bottom:20px;z-index:70;height:46px;padding:0 18px;border-radius:var(--r);
  background:var(--ink);color:#fff;border:0;font-weight:650;cursor:pointer;box-shadow:0 6px 22px rgba(16,24,40,.24);
  display:flex;align-items:center;gap:8px}
#chat-knopf b{min-width:19px;height:19px;border-radius:999px;background:var(--orange);font-size:11px;line-height:19px;text-align:center;padding:0 5px}
#chat{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);background:#fff;z-index:71;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .24s cubic-bezier(.22,1,.36,1);box-shadow:-8px 0 30px rgba(16,24,40,.14)}
#chat.an{transform:none}
#chat .kopf2{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
#chat .strom{flex:1;overflow-y:auto;padding:14px 16px;background:var(--bg)}
#chat .fuss{border-top:1px solid var(--line);padding:10px 12px;background:#fff}
.nach{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.nach .k{font-size:12px;color:var(--mut);margin-bottom:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nach .t{white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.nach .r{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.rknopf{border:1px solid var(--line2);background:#fff;border-radius:var(--r);padding:2px 9px;font-size:12.5px;cursor:pointer}
.rknopf.an{background:#eaf7ef;border-color:#a8ddbd;color:var(--green);font-weight:650}
.zwahl{position:absolute;background:#fff;border:1px solid var(--line2);border-radius:var(--r);padding:6px;
  box-shadow:0 8px 28px rgba(15,17,21,.10);display:flex;gap:3px;z-index:80}
.zwahl button{border:0;background:none;font-size:18px;cursor:pointer;padding:3px 5px;border-radius:6px;line-height:1}
.zwahl button:hover{background:#f2f3f5}
.nach .werkzeug{opacity:0;transition:opacity .12s;display:flex;gap:4px}
.nach:hover .werkzeug{opacity:1}
.antwort{margin:8px 0 0 12px;padding:8px 10px;border-left:2px solid var(--line2);background:#fafbfc;border-radius:0 8px 8px 0}
.erw{background:#eaf1fd;color:var(--blue);border-radius:4px;padding:0 3px;font-weight:600}

/* Statistik. Kacheln, Balkenlisten, freier Zeitraum. */
.zeitleiste{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.kachelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(184px,100%),1fr));gap:12px;margin-bottom:16px}
.kachel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.kachel .lab{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut)}
.kachel .zahl{font-size:27px;font-weight:800;color:var(--ink);line-height:1.15;margin:3px 0 0;letter-spacing:-.02em}
.kachel .sub{font-size:12.5px;color:var(--mut);margin-top:3px}
.kachel.warn .zahl{color:var(--red)}
.kachel.gut .zahl{color:var(--green)}
.bblock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;margin-bottom:14px}
.bblock h3{font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin-bottom:11px}
.bzeile{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:13.5px}
.bzeile .bn{flex:0 0 42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bzeile .bbar{flex:1;height:8px;background:#eef0f3;border-radius:999px;overflow:hidden}
.bzeile .bbar i{display:block;height:100%;background:var(--orange);border-radius:999px}
.bzeile .bw{flex:0 0 68px;text-align:right;font-weight:700;color:var(--ink)}
.szeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}
@media(max-width:560px){.bzeile .bn{flex-basis:38%}}