/* Wartungswerkzeug — Gestaltung.
   Kein Leitstandbild, sondern ein Werkzeug fuer den Techniker: ruhiger
   Grund, weiche Karten, ruhige Typografie.

   ZWEI DARSTELLUNGEN. Alle Farben stehen hier als Marken; hell ist die
   Grundlage, dunkel ist eigens gewaehlt und nicht einfach umgedreht.
   Die Ampelfarben behalten in beiden Faellen ihre Bedeutung, und beide
   Serienpaletten sind gegen ihre eigene Diagrammflaeche geprueft
   (Helligkeitsband, Chroma, Farbfehlsichtigkeit, Kontrast).
   Welche gilt, entscheidet data-theme am Wurzelelement — gesetzt vom
   kleinen Skript im Kopf der Seite und vom Knopf in der Menuezeile. */

:root {
  color-scheme: light;

  --bg: #f4f6f8;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafb;
  --linie: #e3e8ec;
  --linie-stark: #cfd7dd;

  --ink: #15202b;
  --ink-2: #4a5b68;
  --ink-3: #7d8c98;

  --akzent: #1b6ca8;
  --akzent-hell: #eaf2f9;
  --akzent-dunkel: #14507d;

  --ok: #0f8f3d;
  --ok-bg: #e8f6ec;
  --warn: #b57c00;
  --warn-bg: #fdf4e3;
  --alert: #cf2a2a;
  --alert-bg: #fdeceb;
  --neutral: #8b9aa6;

  /* Diagrammchrome und Serienfarben — das Programm liest sie von hier. */
  --gitter: #e1e0d9;
  --achse: #c3c2b7;
  --muted: #898781;
  --balken-grau: #b9c4cc;
  --band-1: #f2f4f5;
  --band-2: #d9dee2;
  --band-3: #bcc4ca;

  /* Raender auf den Ampelflaechen, Dringlichkeit, Werteanzeige */
  --ok-rand: #cfe7d6;
  --warn-rand: #efdcb4;
  --alert-rand: #f3cdc9;
  --akzent-rand: #d6e5f2;
  --warn-ink: #7a5400;
  --prio-hoch: #3c4f5e;
  --prio-mittel: #9aa9b4;
  --tt-bg: rgba(21, 32, 43, 0.94);
  --tt-ink: #ffffff;
  --tt-dauer: #e7c46a;

  /* Anlagenbild */
  --sch-flaeche: #eef1f4;
  --sch-flaeche-2: #dfe4e8;
  --sch-rand: #8e9aa3;
  --sch-rand-2: #9aa6ae;
  --sch-metall: #c3ccd3;
  --sch-wasser: #cfe4f5;
  --sch-wasser-rand: #6f9dc4;
  --sch-blau: #2f6fb5;
  --sch-blau-rand: #1c4f86;
  --sch-blau-hell: #d7e4f2;
  --sch-gold: #e0b23c;
  --sch-gold-rand: #a8811f;

  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;

  --r: 10px;
  --r-s: 6px;
  --schatten: 0 1px 2px rgba(21, 32, 43, 0.06), 0 2px 8px rgba(21, 32, 43, 0.05);
  --schatten-hoch: 0 4px 16px rgba(21, 32, 43, 0.12);

  --h-top: 60px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #10161c;
  --flaeche: #18212b;
  --flaeche-2: #1e2833;
  --linie: #2a3641;
  --linie-stark: #3c4a57;

  --ink: #e9eef3;
  --ink-2: #b4c1cc;
  --ink-3: #8899a6;

  /* "dunkel" heisst hier: der staerkere Ton fuer Text auf der Flaeche —
     in dunkler Darstellung ist das der hellere. */
  --akzent: #4b9fe0;
  --akzent-hell: #16303f;
  --akzent-dunkel: #86c4f0;

  --ok: #4cc06f;
  --ok-bg: #14301e;
  --warn: #e0a52c;
  --warn-bg: #33270e;
  --alert: #f2726a;
  --alert-bg: #3a191b;
  --neutral: #8899a6;

  --gitter: #2b3540;
  --achse: #46535f;
  --muted: #8b99a4;
  --balken-grau: #46535f;
  --band-1: #2b3540;
  --band-2: #3a4551;
  --band-3: #4b5764;

  --ok-rand: #2b5638;
  --warn-rand: #574421;
  --alert-rand: #5d2f2f;
  --akzent-rand: #2a4a61;
  --warn-ink: #e0a52c;
  --prio-hoch: #cdd8e1;
  --prio-mittel: #6c7b88;
  --tt-bg: rgba(9, 14, 19, 0.96);
  --tt-ink: #eef3f7;
  --tt-dauer: #e0b258;

  --sch-flaeche: #26313c;
  --sch-flaeche-2: #2e3a46;
  --sch-rand: #55636f;
  --sch-rand-2: #4a5763;
  --sch-metall: #3e4a56;
  --sch-wasser: #1d3c52;
  --sch-wasser-rand: #3f7191;
  --sch-blau: #2c5f96;
  --sch-blau-rand: #1a3c5e;
  --sch-blau-hell: #2b4d6c;
  --sch-gold: #9c7a2a;
  --sch-gold-rand: #6d5419;

  --serie-1: #4693f3;
  --serie-2: #e76530;
  --serie-3: #14ac77;
  --serie-4: #ca8000;
  --serie-5: #d56a93;
  --serie-6: #42ac3c;
  --serie-7: #8780f4;
  --serie-8: #f15653;

  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --schatten-hoch: 0 4px 18px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; }

/* ============================== Kopfzeile ============================== */
.topbar {
  flex: none;
  height: var(--h-top);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
}
.logo {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--akzent); color: #fff;
  border-radius: var(--r-s);
}
.logo svg { width: 21px; height: 21px; }
.topbar h1 { margin: 0; font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }

.tabs { display: flex; gap: 2px; margin-left: 10px; }
.tabs button {
  padding: 7px 14px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; border-radius: var(--r-s);
  cursor: pointer;
}
.tabs button:hover { background: var(--flaeche-2); color: var(--ink); }
.tabs button[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 650; }

/* Menuegruppen: ein Knopf in der Zeile, darunter die Seiten der Gruppe mit
   je einem Halbsatz, wozu sie da sind. */
.tabs .gruppe { position: relative; }
.tabs .gruppe-knopf { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tabs .gruppe-knopf::after {
  content: ""; width: 6px; height: 6px; flex: none; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}
.tabs .gruppe.auf .gruppe-knopf::after { transform: rotate(-135deg); margin-top: 3px; }
.tabs .gruppe-knopf.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 650; }
.tabs .gruppe.auf .gruppe-knopf { background: var(--flaeche-2); color: var(--ink); }
.gruppe-menue {
  display: none; position: absolute; top: calc(100% + 7px); left: 0; z-index: 250;
  min-width: 300px; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r); box-shadow: var(--schatten-hoch);
}
.gruppe-menue.rechts { left: auto; right: 0; }
.tabs .gruppe.auf .gruppe-menue { display: grid; gap: 2px; }
.tabs .gruppe-menue button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border-radius: var(--r-s);
}
.tabs .gruppe-menue button b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.tabs .gruppe-menue button small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.tabs .gruppe-menue button:hover { background: var(--akzent-hell); }
.tabs .gruppe-menue button[aria-current="page"] b { color: var(--akzent-dunkel); }

/* Umschalter für die Darstellung: drei Stellungen, ein Symbol je Stellung. */
.thema {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--ink-2); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  cursor: pointer;
}
.thema:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: var(--akzent); }
.thema svg { width: 18px; height: 18px; display: none; }
.thema[data-wahl="system"] .t-system,
.thema[data-wahl="hell"] .t-hell,
.thema[data-wahl="dunkel"] .t-dunkel { display: block; }

.src {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.clock { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--neutral); }
.led.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(15, 143, 61, 0.15); }
.led.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(181, 124, 0, 0.15); }
.led.alert { background: var(--alert); box-shadow: 0 0 0 3px rgba(207, 42, 42, 0.15); }
.led.busy { background: var(--warn); animation: puls 1.1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.3; } }

/* =============================== Inhalt =============================== */
/* ------------------------------- Helfer -------------------------------- */
/* Unten rechts, auf jeder Seite erreichbar, ohne etwas zu verdecken. */
.hilfe-knopf {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 17px 0 14px;
  font: 13.5px/1 inherit; font-weight: 650; color: #fff;
  background: var(--akzent); border: 0; border-radius: 999px;
  box-shadow: var(--schatten-hoch); cursor: pointer;
}
.hilfe-knopf:hover { background: var(--akzent-dunkel); }
.hilfe-knopf svg { width: 19px; height: 19px; }
.hilfe-knopf.aktiv { background: var(--ink-2); }

.hilfe {
  position: fixed; right: 20px; bottom: 74px; z-index: 300;
  width: min(420px, calc(100vw - 40px)); max-height: min(620px, calc(100vh - 140px));
  display: none; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}
.hilfe.auf { display: flex; }
.hilfe-kopf {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px 11px 16px;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.hilfe-kopf b { font-size: 14.5px; font-weight: 650; }
.hilfe-kopf small { font-size: 11.5px; color: var(--ink-3); }
.hilfe-kopf .mp-zu { margin-left: auto; }

.hilfe-verlauf { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.hilfe-mensch {
  align-self: flex-end; max-width: 85%;
  padding: 7px 12px; border-radius: 14px 14px 3px 14px;
  font-size: 13px; color: #fff; background: var(--akzent);
}
.hilfe-antwort {
  align-self: flex-start; max-width: 96%;
  padding: 10px 13px; border-radius: 14px 14px 14px 3px;
  font-size: 13px; line-height: 1.5;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.hilfe-antwort b { display: block; font-weight: 650; margin-bottom: 6px; }
.hilfe-antwort p { margin: 0 0 8px; }
.hilfe-antwort p:last-of-type { margin-bottom: 0; }
.hilfe-quelle { display: block; margin-top: 7px; font-size: 11px; color: var(--ink-3); font-style: italic; }
.hilfe-gehe {
  margin-top: 9px; height: 28px; padding: 0 12px;
  font: 12.5px/1 inherit; font-weight: 600; color: var(--akzent-dunkel);
  background: var(--flaeche); border: 1px solid var(--akzent);
  border-radius: 999px; cursor: pointer;
}
.hilfe-gehe:hover { background: var(--akzent-hell); }
.hilfe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hilfe-chip {
  padding: 5px 11px;
  font: 12px/1.3 inherit; font-weight: 550; color: var(--ink-2); text-align: left;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer;
}
.hilfe-chip:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); }

.hilfe-fuss { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--linie); background: var(--flaeche-2); }
.hilfe-fuss input {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px;
  font: 13px inherit; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 999px;
}
.hilfe-fuss input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.hilfe-fuss button {
  height: 34px; padding: 0 15px; flex: none;
  font: 13px/1 inherit; font-weight: 650; color: #fff;
  background: var(--akzent); border: 0; border-radius: 999px; cursor: pointer;
}
.hilfe-fuss button:hover { background: var(--akzent-dunkel); }

@media print { .hilfe, .hilfe-knopf { display: none !important; } }

/* ----------------------------- Betriebsart ----------------------------- */
/* Übung muss man sehen, ohne hinzuschauen: ein Zeichen in der Menüzeile,
   ein Streifen über die ganze Breite und ein anderer Anstrich der
   Kopfzeile. Im Betrieb ist davon nichts zu sehen. */
.uebung {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px 4px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: #6a4a00; background: #ffd75e;
  border: 1px solid #d9a800; border-radius: 999px;
}
.uebung svg { width: 14px; height: 14px; }

:root[data-modus="demo"] .topbar {
  background: linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
              repeating-linear-gradient(135deg, #ffd75e 0 12px, #1c2733 12px 24px) border-box;
  border-bottom: 3px solid transparent;
}

.uebungsband {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  font-size: 13.5px; font-weight: 600; color: #5d4100;
  background: #ffe9a3;
  border-bottom: 1px solid #d9a800;
}
.uebungsband button {
  margin-left: auto;
  height: 28px; padding: 0 13px;
  font: 12.5px/1 inherit; font-weight: 650; color: #5d4100;
  background: #fff6d8; border: 1px solid #d9a800;
  border-radius: 999px; cursor: pointer;
}
.uebungsband button:hover { background: #fff; }

.modus-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
.modus-karte {
  display: block; text-align: left;
  padding: 13px 15px;
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: var(--r); cursor: pointer; color: inherit; font: inherit;
}
.modus-karte:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.modus-karte.an { border-color: var(--akzent); border-width: 2px; padding: 12px 14px; cursor: default; }
.modus-karte.an:hover { background: var(--flaeche-2); }
.modus-karte b { display: block; font-size: 15px; font-weight: 650; margin-bottom: 7px; }
.modus-karte ul { margin: 0 0 10px; padding-left: 17px; }
.modus-karte li { font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.modus-lage { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.modus-karte.an .modus-lage { color: var(--akzent-dunkel); }
.modus-fuss {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 16px 14px; font-size: 12.5px; color: var(--ink-3);
}
.modus-fuss .btn { margin-left: auto; }

/* Angaben zur zentralen Datenbank */
.db-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; padding: 0 16px 12px;
}
.db-form .fld input {
  height: 34px; width: 100%; padding: 0 10px;
  font-size: 13.5px; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-s);
}
.db-form .fld input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
#vDbForm > .note { margin: 0 16px 12px; }

/* ------------------------------ Alarmzeile ----------------------------- */
/* Direkt unter dem Menue: der dringendste Alarm, immer sichtbar. */
.alarmleiste {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px;
  font-size: 13.5px; color: var(--ink);
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
}
.alarmleiste:hover { background: var(--akzent-hell); }
.alarmleiste b { font-weight: 650; }
.alarmleiste span:not(.al-punkt):not(.al-mehr) { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarmleiste .al-mehr {
  margin-left: auto; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--akzent-dunkel);
}
.al-punkt { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--neutral); }
.alarmleiste.alert { background: var(--alert-bg); border-bottom-color: var(--alert-rand); }
.alarmleiste.alert .al-punkt { background: var(--alert); }
.alarmleiste.warn { background: var(--warn-bg); border-bottom-color: var(--warn-rand); }
.alarmleiste.warn .al-punkt { background: var(--warn); }
.alarmleiste.info .al-punkt { background: var(--akzent); }

/* Alarmliste auf der Uebersicht */
.al-filter {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 11px 16px; border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.al-fknopf {
  display: inline-flex; align-items: center; gap: 7px;
  height: 27px; padding: 0 6px 0 11px;
  font: 12.5px/1 inherit; font-weight: 600; color: var(--ink-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer;
}
.al-fknopf:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.al-fknopf.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.al-fknopf i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--flaeche-2); color: var(--ink-2);
}
.al-fknopf.an i { background: rgba(255, 255, 255, 0.24); color: #fff; }

.al-liste { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; }
.al-zeile {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 16px; border-bottom: 1px solid var(--linie);
}
.al-zeile:last-child { border-bottom: 0; }
.al-zeile .al-punkt { margin-top: 5px; }
.al-zeile.alert .al-punkt { background: var(--alert); }
.al-zeile.warn .al-punkt { background: var(--warn); }
.al-zeile.info .al-punkt { background: var(--akzent); }
.al-text { flex: 1; min-width: 0; }
.al-text b { font-size: 13.5px; font-weight: 600; }
.al-text small { display: block; font-size: 12px; color: var(--ink-3); }
.al-motor {
  padding: 0; margin-right: 8px; border: 0; background: none;
  font: inherit; font-weight: 650; color: var(--akzent-dunkel);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.al-motor:hover { color: var(--akzent); }
.al-art {
  flex: none; font-size: 11.5px; color: var(--ink-3);
  padding: 2px 9px; border: 1px solid var(--linie); border-radius: 999px;
}
.al-leer { padding: 16px; font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------- Tendenz ------------------------------- */
.tagbalken { display: block; }
.tz-prozent {
  display: inline-block; min-width: 62px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink-2);
}
.tz-prozent.alert { color: var(--alert); }
.tz-prozent.warn { color: var(--warn); }
.tz-prozent.ok { color: var(--ok); }

.tz-kacheln { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tz-kachel {
  flex: 1; min-width: 112px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r-s); padding: 7px 11px;
}
.tz-kachel .v { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tz-kachel .k { font-size: 11px; color: var(--ink-3); }

.tz-note {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--linie); border-radius: var(--r-s);
  background: var(--flaeche-2); font-size: 13.5px;
}
.tz-note b { font-weight: 650; }
.tz-note span { color: var(--ink-2); }
.tz-note .tz-prozent { margin-left: auto; font-size: 15px; }
.tz-note.alert { background: var(--alert-bg); border-color: var(--alert-rand); }
.tz-note.warn { background: var(--warn-bg); border-color: var(--warn-rand); }
.tz-note.ok { background: var(--ok-bg); border-color: var(--ok-rand); }

.tz-verlauf { border: 1px solid var(--linie); border-radius: var(--r-s); padding: 12px 14px; }
.tz-verlauf h4 { margin: 0 0 10px; font-size: 13px; font-weight: 650; }
.tz-verlauf svg { width: 100%; height: auto; }
.tz-verlauf p { margin: 8px 0 0; }

main { flex: 1; overflow: auto; }
.screen { padding: 20px 22px 28px; max-width: 1900px; margin: 0 auto; }
/* Seiten ohne Überschrift rücken nach oben — sonst klafft dort eine Lücke. */
.screen.schmal-oben { padding-top: 12px; }
.screen-title { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 16px; }
.screen-title small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------ Bedienleiste --------------------------- */
.bar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
}
.bar button, .btn {
  padding: 8px 15px; height: 36px;
  font-size: 13.5px; font-weight: 550; color: #fff;
  background: var(--akzent); border: 1px solid var(--akzent);
  border-radius: var(--r-s); cursor: pointer;
  transition: background 0.12s;
}
.bar button:hover, .btn:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.bar button.ghost, .btn.ghost { background: var(--flaeche); color: var(--ink-2); border-color: var(--linie-stark); }
.bar button.ghost:hover, .btn.ghost:hover { background: var(--flaeche-2); color: var(--ink); }
.bar button:disabled { opacity: 0.45; cursor: default; }
.bar .msg { margin-left: auto; align-self: center; font-size: 13px; font-weight: 550; color: var(--ink-2); }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--alert); }
.msg.warn { color: var(--warn); }

.fld { display: grid; gap: 5px; min-width: 0; }
.fld > label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.fld input, .fld select {
  height: 36px; width: 100%; padding: 0 10px;
  font-size: 13.5px; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-s);
}
.fld input:focus, .fld select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
.fld.w { width: 220px; }
.fld.s { width: 128px; }
.fld.grow { flex: 1; min-width: 170px; }

/* --------------------------------- Karten ------------------------------ */
.card {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
  margin-bottom: 16px; overflow: hidden;
}
.card > h3 .kopf-hinweis {
  font-size: 11.5px; font-weight: 400; color: var(--ink-3);
}
.card > h3 {
  margin: 0; padding: 12px 16px;
  font-size: 14px; font-weight: 650;
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: 10px;
}
.card > h3 .rechts { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.card-body { padding: 14px 16px; }

.note {
  margin: 0 0 16px; padding: 11px 14px;
  background: var(--akzent-hell); border: 1px solid var(--akzent-rand);
  border-radius: var(--r-s);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.note.warn { background: var(--warn-bg); border-color: var(--warn-rand); color: var(--warn-ink); }

/* ============================== Übersicht ============================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; margin-bottom: 12px; }
.kpi {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
  padding: 9px 13px;
  display: flex; align-items: center; gap: 11px;
}
.kpi .ring {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--flaeche-2); color: var(--ink-3);
}
.kpi .ring svg { width: 17px; height: 17px; }
.kpi .z { font-size: 21px; font-weight: 680; line-height: 1.1; letter-spacing: -0.02em; }
.kpi .b { font-size: 11.5px; color: var(--ink-3); line-height: 1.25; }
.kpi.ok .ring { background: var(--ok-bg); color: var(--ok); }
.kpi.ok .z { color: var(--ok); }
.kpi.warn .ring { background: var(--warn-bg); color: var(--warn); }
.kpi.warn .z { color: var(--warn); }
.kpi.alert .ring { background: var(--alert-bg); color: var(--alert); }
.kpi.alert .z { color: var(--alert); }

.mtab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mtab th {
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  padding: 9px 14px; text-align: left;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 1;
}
.mtab th.num, .mtab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mtab td { border-bottom: 1px solid var(--linie); padding: 9px 14px; }
.mtab tr:last-child td { border-bottom: 0; }
.mtab tr.gruppe td {
  background: var(--flaeche-2); padding: 7px 14px;
  font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mtab tr.zeile:hover td { background: var(--flaeche-2); }
.mtab b { display: block; font-weight: 600; }
.mtab small { display: block; font-size: 11.5px; color: var(--ink-3); }

.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--flaeche-2); color: var(--ink-2);
}
.pille i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pille.ok { background: var(--ok-bg); color: var(--ok); }
.pille.warn { background: var(--warn-bg); color: var(--warn); }
.pille.alert { background: var(--alert-bg); color: var(--alert); }

.mtab td.fort { display: flex; align-items: center; gap: 10px; }
.balken { position: relative; height: 6px; flex: 1; min-width: 60px; background: var(--linie); border-radius: 999px; overflow: hidden; }
.balken i { position: absolute; inset: 0 auto 0 0; background: var(--ok); border-radius: 999px; }
.balken.warn i { background: var(--warn); }
.balken.alert i { background: var(--alert); }
.mtab .pz { flex: none; width: 38px; text-align: right; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Die Zelle bleibt eine Tabellenzelle: als Flexkasten verloere sie die
   Zeilenhoehe, und die Trennlinie saesse in mehrzeiligen Zeilen zu hoch.
   Balken und Zahl stehen darum als Inline-Bloecke nebeneinander. */
.mtab td.fort { display: table-cell; white-space: nowrap; }
.mtab td.fort .balken { display: inline-block; width: calc(100% - 50px); vertical-align: middle; }
.mtab td.fort .pz { display: inline-block; vertical-align: middle; margin-left: 10px; }
.mtab td.fort .balken:has(+ .u-pz-breit) { width: calc(100% - 72px); }

.mini {
  padding: 5px 11px; height: 30px;
  font-size: 12.5px; font-weight: 550;
  color: var(--ink-2); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  cursor: pointer; white-space: nowrap;
}
.mini:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: var(--akzent); }

/* ================================ Trend ================================ */
/* Motorauswahl immer links, Inhalt rechts — auf allen Seiten gleich. */
/* Die Motorauswahl braucht nicht viel Breite — das Diagramm schon. */
.trend-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; }

.plot {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten); overflow: hidden;
}
.plot.over { box-shadow: 0 0 0 2px var(--akzent), var(--schatten); }
.plot-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--linie); min-height: 50px; }
.plot-head .hinweis { font-size: 12.5px; color: var(--ink-3); }
.plot svg { display: block; width: 100%; }
.plot .leer { display: grid; place-items: center; height: 440px; color: var(--ink-3); font-size: 14px; text-align: center; padding: 24px; }
.plot-fuss {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--linie);
  font-size: 12px; color: var(--ink-3);
}

/* --------------------------- Dringlichkeit ----------------------------- */
/* Bewusst nicht in Ampelfarben: die sind fuer den Zustand reserviert.
   Die Dringlichkeit sagt, wie schwer ein Versaeumnis wiegt — abgestuft
   ueber Fuellung und Schrift, mit Text daneben. */
.prio {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.prio i {
  width: 9px; height: 9px; flex: none; border-radius: 2px;
  border: 1.5px solid var(--ink-3); background: none;
}
.prio-hoch { color: var(--ink); font-weight: 700; }
.prio-hoch i { background: var(--prio-hoch); border-color: var(--prio-hoch); }
.prio-mittel i { background: var(--prio-mittel); border-color: var(--prio-mittel); }
.prio-tief { color: var(--ink-3); font-weight: 550; }

/* Sortierbare Spaltenkoepfe. */
.sortknopf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
}
.sortknopf:hover { color: var(--akzent-dunkel); }
.sortknopf.aktiv { color: var(--akzent-dunkel); }
.sortknopf .pfeil { font-style: normal; font-size: 9px; }
.sortknopf .pfeil.blass { opacity: 0; transition: opacity 0.12s; }
.sortknopf:hover .pfeil.blass { opacity: 0.55; }

.hinweis-klein { font-size: 12px; color: var(--ink-3); padding-bottom: 9px; }

/* ---------------------------- Trend-Baustein --------------------------- */
/* Werkzeugleiste, Diagramm, Bildlaufleiste und Werteliste als ein Block —
   dieselbe Bedienung auf der Trendseite wie im Motorfenster. */
.tw-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 9px 12px; margin-bottom: 14px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
}
/* Grösse, Zeitraum, Mittelwert und Ende stehen nebeneinander auf einer
   Zeile — Beschriftung links im Feld, nicht darueber. */
.tw-felder { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.tw-knoepfe { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }

.tw-feld {
  display: flex; align-items: center; min-width: 0;
  height: 31px; padding-left: 10px;
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer;
}
.tw-feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.tw-feld > span {
  flex: none; padding-right: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
}
.tw-feld > select, .tw-feld > input {
  height: 29px; min-width: 0; padding: 0 9px 0 0;
  font: 12.5px/1 inherit; font-weight: 550; color: var(--ink);
  background: none; border: 0; outline: none; cursor: pointer;
}
.tw-feld.weit > input { font-variant-numeric: tabular-nums; }

/* Eine Form fuer alle Schaltflaechen der Leiste. */
.tw-btn {
  height: 31px; padding: 0 12px; white-space: nowrap;
  font: 12.5px/1 inherit; font-weight: 600; color: var(--ink-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tw-btn:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: var(--akzent); }
.tw-btn:disabled { opacity: 0.4; cursor: default; background: var(--flaeche); color: var(--ink-3); border-color: var(--linie); }
.tw-msg { margin-left: auto; font-size: 12.5px; font-weight: 550; color: var(--ink-3); white-space: nowrap; }

/* Bildlaufleiste unter dem Diagramm: einfache Pfeile kleine Schritte,
   doppelte ein ganzes Fenster. */
.tw-navi {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-top: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.tw-gruppe { display: flex; flex: none; }
.tw-pfeil {
  display: grid; place-items: center;
  width: 32px; height: 28px; padding: 0;
  color: var(--ink-2); background: var(--flaeche);
  border: 1px solid var(--linie-stark); cursor: pointer;
}
.tw-gruppe .tw-pfeil + .tw-pfeil { border-left: 0; }
.tw-gruppe .tw-pfeil:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.tw-gruppe .tw-pfeil:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.tw-pfeil:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.tw-pfeil:active { background: var(--akzent); color: #fff; }

.tw-schiene {
  flex: 1; min-width: 0; height: 22px; margin: 0;
  accent-color: var(--akzent); cursor: pointer;
  background: none; -webkit-appearance: none; appearance: none;
}
.tw-schiene::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--linie-stark);
}
.tw-schiene::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; background: var(--akzent);
  border: 2px solid var(--flaeche); box-shadow: 0 1px 3px rgba(21, 32, 43, 0.3);
}
.tw-schiene::-moz-range-track { height: 5px; border-radius: 999px; background: var(--linie-stark); }
.tw-schiene::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--akzent); border: 2px solid var(--flaeche);
}
.tw-zeit {
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 128px; text-align: right;
}
/* Grössenauswahl über dem Diagramm: kleine Vierecke zum Zu- und Abwählen.
   Angewaehlt tragen sie die Farbe der zugehoerigen Linie. */
.tw-sig {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding: 9px 14px; border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.tw-sigknopf {
  display: inline-flex; align-items: center; gap: 7px;
  height: 27px; padding: 0 11px 0 9px;
  font: 12.5px/1 inherit; font-weight: 600; color: var(--ink-3);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer;
}
.tw-sigknopf i {
  width: 11px; height: 11px; flex: none; border-radius: 3px;
  border: 1.5px solid var(--linie-stark); background: none;
}
.tw-sigknopf:hover { border-color: var(--akzent); color: var(--ink-2); }
.tw-sigknopf.an { color: var(--ink); border-color: var(--ink-3); background: var(--flaeche); }
.tw-sigknopf.an i { border-color: transparent; }

/* Je Grösse eine Tafel, untereinander unter derselben Zeitachse. */
.tw-tafeln { display: block; }
.tw-tafel + .tw-tafel { border-top: 1px dashed var(--linie); }
.tafel-leer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 12.5px; color: var(--ink-3);
}
.tafel-leer b { color: var(--ink-2); font-weight: 650; }

.tw-werte { margin-top: 16px; }

/* Im Motorfenster ist alles eine Nummer kleiner. */
.tw-klein .tw-leiste { padding: 8px 10px; gap: 7px 10px; margin-bottom: 10px; }
.tw-klein .tw-felder { gap: 6px; }
.tw-klein .tw-knoepfe { gap: 6px; }
.tw-klein .tw-feld { height: 29px; padding-left: 8px; }
.tw-klein .tw-feld > span { font-size: 9.5px; padding-right: 5px; }
.tw-klein .tw-feld > select, .tw-klein .tw-feld > input { height: 27px; font-size: 12px; padding-right: 7px; }
.tw-klein .tw-btn { height: 29px; padding: 0 10px; font-size: 12px; }
.tw-klein .plot .leer { height: 280px; }
.tw-klein .tw-werte { margin-top: 12px; margin-bottom: 0; }
.tw-klein .tw-zeit { min-width: 0; }

.serie {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 550;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.serie i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.serie button {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-3); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
}
.serie button:hover { background: var(--alert-bg); color: var(--alert); }

/* Motorauswahl rechts */
.picker { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); overflow: hidden; }
.picker h3 { margin: 0; padding: 8px 12px; font-size: 12.5px; font-weight: 650; border-bottom: 1px solid var(--linie); }
.picker .suche { padding: 7px 9px; border-bottom: 1px solid var(--linie); }
.picker .suche input {
  width: 100%; height: 28px; padding: 0 9px;
  font-size: 12.5px; border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  background: var(--flaeche-2);
}
.picker .suche input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
/* Name und Kennzeichen nebeneinander statt uebereinander: so sind doppelt
   so viele Motoren auf einen Blick da, ohne zu blaettern. */
.picker ul { list-style: none; margin: 0; padding: 4px; max-height: 62vh; overflow: auto; }
.picker li {
  padding: 4px 8px; border-radius: var(--r-s);
  font-size: 12.5px; cursor: grab;
  display: flex; align-items: baseline; gap: 7px;
}
.picker li:hover { background: var(--akzent-hell); }
.picker li.dragging { opacity: 0.4; }
.picker li.drin { background: var(--flaeche-2); cursor: default; }
.picker li.drin:hover { background: var(--flaeche-2); }
.picker li .pkt { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--linie-stark); align-self: center; }
.picker li > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.picker li b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker li small { flex: none; color: var(--ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* Trennpunkt statt Zeilenumbruch — das Kennzeichen soll sich vom Namen
   absetzen, ohne eine zweite Zeile zu kosten. */
.picker li small::before { content: "·"; margin-right: 5px; opacity: 0.55; }
.picker li .a { margin-left: auto; flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.tt {
  position: absolute; pointer-events: none;
  background: var(--tt-bg); color: var(--tt-ink);
  font-size: 12px; padding: 8px 11px; border-radius: var(--r-s);
  white-space: nowrap; z-index: 5; box-shadow: var(--schatten-hoch);
}
.tt .k { font-weight: 650; margin-bottom: 4px; }
.tt .r { display: flex; align-items: center; gap: 7px; }
.tt .r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
/* Gemessene Spanne (Umschalt + ziehen) — nur waehrend des Ziehens. */
.plot .spanne-zieht { fill: var(--warn); opacity: 0.18; }
.tt .dauer {
  font-size: 11.5px; color: var(--tt-dauer);
  margin: -2px 0 5px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Beim Ziehen im Diagramm soll nichts markiert werden. */
.plot svg { user-select: none; }

/* Werteliste unter dem Diagramm: je Linie eine Spalte. */
.werte-tab th { white-space: nowrap; }
.werte-tab th b { display: block; font-weight: 650; }
.werte-tab th small { display: block; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.werte-tab td { font-variant-numeric: tabular-nums; }
.serie-pkt { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }

.tt .r b { font-weight: 450; }
.tt .r span { margin-left: auto; font-variant-numeric: tabular-nums; padding-left: 14px; font-weight: 650; }

/* =============================== Kalender ============================== */
/* Umschalter Tag / Woche / Monat / Jahr */
.stufen { display: flex; flex: none; }
.stufe {
  height: 36px; padding: 0 15px;
  font: 13.5px/1 inherit; font-weight: 600; color: var(--ink-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-right-width: 0; cursor: pointer;
}
.stufe:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.stufe:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-right-width: 1px; }
.stufe:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.stufe.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.stufe.an + .stufe { border-left-color: var(--akzent); }

/* Ein Monat soll ohne Blaettern auf den Schirm passen — die Kacheln
   tragen nur Tag, Betriebszeit und Spitzenstrom, dafuer braucht es keine
   Handflaeche. Je Stufe eine andere Spaltenzahl. */
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 1100px; }
.kal-grid.stufe-tag { grid-template-columns: repeat(12, 1fr); max-width: 1400px; }
.kal-grid.stufe-woche { grid-template-columns: repeat(7, 1fr); max-width: 1100px; }
.kal-grid.stufe-jahr { grid-template-columns: repeat(6, 1fr); max-width: 1100px; }
.kal-grid.stufe-woche .tag, .kal-grid.stufe-jahr .tag { min-height: 78px; padding: 8px 11px; }
.kal-grid.stufe-woche .tag .d, .kal-grid.stufe-jahr .tag .d { font-size: 13.5px; }
.kal-grid.stufe-woche .tag .l, .kal-grid.stufe-jahr .tag .l { font-size: 12px; }
.kal-grid .ev .mehr { font-size: 9.5px; color: var(--ink-3); font-weight: 650; }
.kal-grid .wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 1px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-s);
  min-height: 58px; padding: 5px 8px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; text-align: left; font: inherit;
  transition: box-shadow 0.12s;
}
.tag:hover { box-shadow: var(--schatten); border-color: var(--linie-stark); }
.tag.leer { background: transparent; border-color: transparent; cursor: default; }
.tag.leer:hover { box-shadow: none; }
.tag.ohne { background: var(--flaeche-2); }
.tag.sel { box-shadow: 0 0 0 2px var(--akzent); border-color: var(--akzent); }
.tag .d { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.tag .l { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.25; }
.tag .ev { display: flex; gap: 3px; margin-top: auto; flex-wrap: wrap; padding-top: 3px; }
.tag .ev i { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.tag .ev i.alert { background: var(--alert); }
.tag .ev i.ok { background: var(--ok); }
.tag .laufbalken { height: 4px; background: var(--linie); border-radius: 999px; overflow: hidden; }
.tag .laufbalken i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }

.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-list li { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linie); font-size: 13px; align-items: center; }
.ev-list li:last-child { border-bottom: 0; }
.ev-list time { flex: none; width: 130px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ev-list .art { flex: none; width: 160px; }

/* ============================== Motoren ============================== */
.mcfg { width: 100%; border-collapse: collapse; font-size: 13px; }
.mcfg th {
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 1;
}
.mcfg td { border-bottom: 1px solid var(--linie); padding: 6px 10px; vertical-align: middle; }
.mcfg input {
  width: 100%; height: 30px; padding: 0 8px;
  font-size: 12.5px; border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  background: var(--flaeche);
}
.mcfg input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.mcfg input.num { text-align: right; font-variant-numeric: tabular-nums; }
.mcfg tr.over td { background: var(--akzent-hell); }
.mcfg .node {
  font-size: 11px; color: var(--ink-2); word-break: break-all;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r-s); padding: 4px 7px;
}
.mcfg .node.leer { font-style: italic; color: var(--ink-3); border-style: dashed; background: none; }

/* Browse-Pfad statt Knoten-Id — bewusst gut lesbar, er ist die Adresse. */
.pfad {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-s);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  font-size: 12px; color: var(--ink-2); word-break: break-all;
}
.pfad.leer { font-style: italic; color: var(--ink-3); border-style: dashed; background: none; }

/* ============================ OPC-UA-Baum ============================ */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { max-height: 52vh; overflow: auto; padding: 6px; }
.tree ul { padding-left: 16px; border-left: 1px solid var(--linie); margin-left: 12px; }
.node-li > ul { display: none; }
.node-li.open > ul { display: block; }
.tree .row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-s); cursor: pointer; }
.tree .row:hover { background: var(--akzent-hell); }
.tree .row[draggable="true"] { cursor: grab; }
.tree .row.dragging { opacity: 0.4; }
.twisty { width: 16px; height: 16px; flex: none; border: 0; background: none; cursor: pointer; padding: 0; color: var(--ink-3); }
.twisty::before { content: '▸'; font-size: 11px; display: block; transition: transform 0.12s; }
.node-li.open > .row .twisty::before { transform: rotate(90deg); }
.twisty.empty { visibility: hidden; }
.kind { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--neutral); }
.kind.variable { background: var(--ok); border-radius: 50%; }
.kind.object { background: var(--akzent); }
.tree .name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .val { width: 110px; flex: none; font-size: 11.5px; color: var(--ink-3); text-align: right; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tree .hint { padding: 8px 12px; font-size: 12.5px; color: var(--ink-3); }
.tree .hint.bad { color: var(--alert); }

/* ================================ Dialog ================================ */
/* Der Dialog ist ein eigenes Fenster — beweglich, ohne Hintergrundschleier,
   damit das Motorfenster darunter sichtbar bleibt. */
.dlg {
  position: fixed;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
  /* Bewusst klein: ein Dialog soll die Seite dahinter nicht zudecken. */
  width: min(470px, 94vw); max-height: 78vh;
  display: flex; flex-direction: column;
}
.dlg.zieht { user-select: none; box-shadow: 0 10px 30px rgba(21, 32, 43, 0.28); }
.dlg-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px 7px 14px;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  border-radius: var(--r) var(--r) 0 0;
  cursor: grab;
}
.dlg.zieht .dlg-kopf { cursor: grabbing; }
.dlg-kopf h3 { margin: 0; padding: 0; font-size: 14px; font-weight: 650; border: 0; }
.dlg-kopf .mp-zu { margin-left: auto; }
.dlg-body { padding: 12px 14px; display: grid; gap: 10px; overflow: auto; font-size: 13px; }
.dlg-body textarea {
  width: 100%; padding: 9px 11px; min-height: 68px; resize: vertical;
  font: 13.5px/1.45 inherit; color: var(--ink);
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.dlg-body textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.dlg-info {
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r-s); padding: 10px 12px;
  font-size: 13px; color: var(--ink-2);
}
.dlg-fehler { color: var(--alert); font-size: 13px; font-weight: 600; }
.dlg-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--linie); }
.dlg-fuss button {
  height: 32px; padding: 0 14px;
  font-size: 13px; font-weight: 550; color: #fff;
  background: var(--akzent); border: 1px solid var(--akzent);
  border-radius: var(--r-s); cursor: pointer;
}
.dlg-fuss button.ghost { background: var(--flaeche); color: var(--ink-2); border-color: var(--linie-stark); }
.dlg-fuss button:disabled { opacity: 0.5; cursor: default; }

.motorwahl {
  max-height: 210px; overflow: auto;
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  padding: 6px;
}
.motorwahl label {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 7px; border-radius: var(--r-s);
  font-size: 13px; cursor: pointer;
}
.motorwahl label:hover { background: var(--akzent-hell); }
.motorwahl input { width: 16px; height: 16px; flex: none; }

/* ============================== Checkliste ============================== */
.cl-kopf { margin-bottom: 16px; }
.cl-kopf h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.cl-kopf div { font-size: 12.5px; color: var(--ink-3); }
.cl-unterschrift { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }

.cl-tab .kasten {
  display: block; width: 16px; height: 16px;
  border: 1.5px solid var(--ink-3); border-radius: 3px;
}
.cl-tab .linie { display: block; border-bottom: 1px dotted var(--linie-stark); height: 15px; }
.cl-tab .ueber { color: var(--alert); font-weight: 600; }
.cl-tab tr.alert .kasten { border-color: var(--alert); }
.cl-tab tr.warn .kasten { border-color: var(--warn); }

/* =============================== Anlagenschema =========================== */
.schema { padding: 14px; overflow: auto; }
.schema svg { display: block; width: 100%; height: auto; user-select: none; }

/* Motorknoten: Farbe traegt den Zustand, Text bleibt immer lesbar. */
.schema .knoten { cursor: pointer; }
.schema .knoten .kasten { fill: var(--flaeche); stroke: var(--neutral); stroke-width: 1.5; }
.schema .knoten .nr { font-size: 11.5px; font-weight: 700; fill: var(--ink); }
.schema .knoten .wert { font-size: 9.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.schema .knoten:hover .kasten { stroke-width: 2.5; }
.schema .knoten.ok .kasten { fill: var(--ok-bg); stroke: var(--ok); }
.schema .knoten.warn .kasten { fill: var(--warn-bg); stroke: var(--warn); }
.schema .knoten.alert .kasten { fill: var(--alert-bg); stroke: var(--alert); }
.schema svg.verschiebbar .knoten .kasten { stroke-dasharray: 4 2; }

/* Ankreuzfeld mit Beschriftung daneben — .fld ist ein Raster und wuerde
   die Beschriftung darueber setzen. */
.haken {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 4px;
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.haken input { width: 17px; height: 17px; flex: none; margin: 0; }

/* --- Verfahrensschema: der gezeichnete Plan als Unterlage --- */
/* Feste Hoehe, damit der grosse Plan die Seite nicht sprengt; gesehen wird
   er ueber Zoom und Schwenken. --planstrich ist der Kehrwert des Zooms:
   damit bleiben Rahmen und Schrift in jeder Vergroesserung gleich dick. */
.schema svg.plan {
  width: 100%;
  height: clamp(420px, calc(100vh - 300px), 1150px);
  background: #d9dadd;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  cursor: grab;
  touch-action: none;
}
.schema svg.plan.schwenkt { cursor: grabbing; }
.schema svg.plan.verschiebbar { cursor: default; }

/* Das Blatt bringt seinen grauen Grund selbst mit (wie das Bedienbild);
   die Luft daneben hat denselben Ton, damit kein Rand entsteht. Das gilt
   auch in der dunklen Darstellung — das Bild ist, was es ist. */
.schema .plan-blatt text { user-select: none; }

.schema .plan-bereich rect {
  fill: none;
  stroke: var(--akzent);
  stroke-width: calc(1.4px * var(--planstrich, 1));
  stroke-dasharray: calc(7px * var(--planstrich, 1)) calc(5px * var(--planstrich, 1));
  opacity: 0.55;
}
.schema .plan-titel {
  font-size: calc(12.5px * var(--planstrich, 1));
  font-weight: 700;
  fill: var(--akzent-dunkel);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: calc(3.2px * var(--planstrich, 1));
}
/* Die Silos bleiben grau wie im Bedienbild; die Farbe erscheint erst beim
   Zeigen darauf, damit man das Feld als Ziel erkennt. */
.schema .plan-silo rect {
  fill: var(--silo);
  fill-opacity: 0;
  stroke: var(--silo);
  stroke-opacity: 0;
  stroke-width: calc(1.6px * var(--planstrich, 1));
}
.schema .plan-silo:hover rect { fill-opacity: 0.3; stroke-opacity: 1; }

/* Motorknoten im Stil des Bedienbilds: kein Kasten, nur die M-Nummer
   kursiv mit einem Statuspunkt davor. Der Strom erscheint beim
   Hineinzoomen. Die Knoten sind gegenskaliert, Masse hier sind Schirm-px. */
.schema svg.plan .knoten .punkt { fill: var(--neutral); stroke: #fff; stroke-width: 1.2px; }
.schema svg.plan .knoten.ok .punkt { fill: var(--ok); }
.schema svg.plan .knoten.warn .punkt { fill: var(--warn); }
.schema svg.plan .knoten.alert .punkt { fill: var(--alert); }
.schema svg.plan .knoten .fang { fill: transparent; stroke: none; }
.schema svg.plan .knoten .nr {
  font-family: Arial, sans-serif;
  font-size: 11.5px;
  font-style: italic;
  fill: #222;
  paint-order: stroke;
  stroke: rgba(218, 220, 224, 0.9);
  stroke-width: 2.4px;
}
.schema svg.plan .knoten.warn .nr { fill: #7a5400; }
.schema svg.plan .knoten.alert .nr { fill: #a11d1d; font-weight: 700; }
.schema svg.plan .knoten .wert {
  display: none;
  font-size: 8.5px;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(218, 220, 224, 0.9);
  stroke-width: 2.4px;
}
.schema svg.plan.nah .knoten .wert { display: block; }
.schema svg.plan .knoten:hover .nr,
.schema svg.plan .knoten.zeigt .nr { fill: var(--akzent-dunkel); }
.schema svg.plan .knoten:hover .punkt,
.schema svg.plan .knoten.zeigt .punkt { stroke: var(--akzent); }

/* Die Motorsymbole im Blatt sind anklickbar. Beim Zeigen bekommen sie einen
   Rand; die Breite ist dank vector-effect eine Schirmbreite. */
.schema svg.plan .plan-blatt [data-symbol-von] { cursor: pointer; }
.schema svg.plan.zeigt-motor { cursor: pointer; }
.schema svg.plan .plan-blatt [data-zeigt] {
  stroke: var(--akzent);
  stroke-width: 2.5px;
  paint-order: stroke;
}
.schema svg.plan.verschiebbar .knoten .punkt { stroke: var(--akzent); stroke-dasharray: 2 1.5; }

.zoomzeile { display: flex; align-items: center; gap: 4px; }
.zoomzeile .zk { width: 30px; padding: 0; font-size: 16px; line-height: 1; }
.zoomzeile .zoomwert {
  min-width: 54px; text-align: center; font-size: 12.5px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.zoomzeile button[aria-pressed="true"] {
  background: var(--akzent-hell);
  border-color: var(--akzent-rand);
  color: var(--akzent-dunkel);
}

.legende { display: flex; gap: 14px; align-items: center; height: 36px; }
.legende .lg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.legende .lg i { width: 12px; height: 12px; border-radius: 3px; background: var(--flaeche); border: 1.5px solid var(--neutral); }
.legende .lg i.ok { background: var(--ok-bg); border-color: var(--ok); }
.legende .lg i.warn { background: var(--warn-bg); border-color: var(--warn); }
.legende .lg i.alert { background: var(--alert-bg); border-color: var(--alert); }

/* ============================== Motor-Popup ============================== */
.motor-link {
  display: block; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--akzent);
  cursor: pointer; text-align: left;
}
.motor-link:hover { text-decoration: underline; color: var(--akzent-dunkel); }

/* Freistehende Fenster: mehrere gleichzeitig, an der Titelleiste
   verschiebbar. Kein abdunkelnder Hintergrund — man soll daneben
   weiterarbeiten koennen. */
.mp {
  position: fixed;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
  /* Kompakt: das Fenster soll neben dem Anlagenbild Platz haben, nicht es
     zudecken. Die Werkzeugleiste des Trends bricht dafuer um. */
  width: min(820px, 94vw); max-height: 74vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.mp.zieht { user-select: none; box-shadow: 0 10px 30px rgba(21, 32, 43, 0.28); }

.mp-titel {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px 7px 14px;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  cursor: grab;
}
.mp.zieht .mp-titel { cursor: grabbing; }
.mp-titel .n { font-size: 14px; font-weight: 650; }
.mp-titel .mp-sub { font-size: 12px; color: var(--ink-3); }
.mp-titel .pille { margin-left: auto; }
.mp-zu {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--ink-2); cursor: pointer; font-size: 12px;
}
.mp-zu:hover { background: var(--alert-bg); color: var(--alert); border-color: var(--alert); }
/* Die Kopfwerte sind Beiwerk — sie sollen ablesbar sein, nicht die halbe
   Fensterhoehe belegen. Wert und Bezeichnung nebeneinander statt
   uebereinander spart die Haelfte. */
.mp-werte { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px; }
.mp-kachel {
  flex: 1; min-width: 96px;
  display: flex; align-items: baseline; gap: 6px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: 999px; padding: 4px 12px;
}
.mp-kachel .v { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-kachel .k { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.mp-reiter { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--linie); }
.mp-reiter button {
  padding: 7px 12px; border: 0; background: none;
  font-size: 13px; font-weight: 550; color: var(--ink-2);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.mp-reiter button:hover { color: var(--ink); }
.mp-reiter button.aktiv { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); font-weight: 650; }

.mp-body { padding: 12px 14px 14px; overflow: auto; font-size: 13px; }
.mp-body .dl { border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; }
.mp-body .dl .row { display: flex; font-size: 13px; border-bottom: 1px solid var(--linie); }
.mp-body .dl .row:last-child { border-bottom: 0; }
.mp-body .dl .k { flex: none; width: 170px; padding: 6px 10px; background: var(--flaeche-2); font-weight: 600; color: var(--ink-2); }
.mp-body .dl .v { flex: 1; padding: 6px 10px; word-break: break-word; }
.mp-body .note { margin: 0; }

.mp-leiste { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mp-plot { border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; position: relative; }
.mp-plot .leer { display: grid; place-items: center; height: 210px; color: var(--ink-3); font-size: 13.5px; }

.mp-logform { display: grid; gap: 9px; margin-bottom: 16px; }
.mp-logform textarea {
  width: 100%; padding: 9px 11px; resize: vertical;
  font: 13.5px/1.45 inherit; color: var(--ink);
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.mp-logform textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.mp-logform .btn { justify-self: start; }
.mp-body .log-list { max-height: 30vh; border: 1px solid var(--linie); border-radius: var(--r-s); }

/* ================================ Logbuch ================================ */
.log-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.log-list .leer { padding: 18px; color: var(--ink-3); font-size: 13.5px; }
.log-list .tagtrenner {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 16px; background: var(--flaeche-2);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.log-e { display: flex; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--linie); }
.log-e:hover { background: var(--flaeche-2); }
.log-e.anlage { background: linear-gradient(90deg, var(--flaeche-2), transparent 40%); }
.log-meta { flex: none; width: 150px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.log-meta time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-inhalt { flex: 1; min-width: 0; position: relative; padding-right: 26px; }
.log-inhalt .txt { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.log-inhalt small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.log-weg {
  position: absolute; top: 0; right: 0;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; line-height: 1;
}
.log-weg:hover { background: var(--alert-bg); color: var(--alert); }

/* ================================ Drucken ================================ */
/* ============================== Unterhalt ================================
   Zustand, Stillstand, Stoerungen, Ersatzteile, Energie, Planung, Bericht.
   Diagramme: eine Groesse, ein Farbton, eine Achse; Text traegt immer die
   Textfarbe, nie die Datenfarbe. */
.kpi-knopf { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kpi-knopf:hover { border-color: var(--akzent); background: var(--akzent-hell); }

.u-tt { position: fixed; z-index: 400; }
.u-diagramm { display: block; width: 100%; height: auto; user-select: none; }
.u-saeule { transition: opacity 0.1s; }
.u-saeule.blass { opacity: 0.35; }
.u-leer { padding: 14px 2px; font-size: 13.5px; color: var(--ink-3); }
.u-fussnote { padding: 10px 16px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.card-body > .u-fussnote { padding: 12px 0 0; }
.u-zwischentitel { font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; }
.u-link {
  padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--akzent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

.u-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.u-zwei-breit { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.u-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.u-kopf { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.u-kopf > .card { margin-bottom: 16px; }

/* Die eine grosse Zahl der Seite. */
.u-held { display: grid; align-content: center; justify-items: center; padding: 18px 16px; text-align: center; }
.u-held-label { font-size: 12px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.u-held-zahl { font-size: 64px; font-weight: 680; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.u-held-unter { font-size: 13.5px; color: var(--ink-2); }
.u-held.ok { border-top: 4px solid var(--ok); }
.u-held.warn { border-top: 4px solid var(--warn); }
.u-held.alert { border-top: 4px solid var(--alert); }
.u-verteilung { display: grid; gap: 11px; }
.u-vert-zeile { display: grid; grid-template-columns: 118px 40px 1fr; align-items: center; gap: 10px; }
.u-vert-zeile b { font-size: 19px; font-weight: 680; text-align: right; font-variant-numeric: tabular-nums; }
.u-vert-zeile small { font-size: 12.5px; color: var(--ink-3); }

/* Rangliste: Name, Balken, Wert. */
.u-rang { display: grid; gap: 7px; }
.u-rang-zeile {
  display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 11px;
  padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; width: 100%;
}
button.u-rang-zeile { cursor: pointer; border-radius: var(--r-s); }
button.u-rang-zeile:hover { background: var(--flaeche-2); }
.u-rang-zeile .n { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-rang-zeile .n small { margin-left: 7px; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.u-rang-zeile .spur { height: 10px; background: var(--flaeche-2); border-radius: 0 4px 4px 0; overflow: hidden; }
.u-rang-zeile .spur i { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.u-rang-zeile .w { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Anzeige mit Zustand: die Spur ist derselbe Ton in hell. */
.balken.u-meter { height: 8px; background: var(--flaeche-2); }
.balken.u-meter.ok { background: var(--ok-bg); }
.balken.u-meter.warn { background: var(--warn-bg); }
.balken.u-meter.alert { background: var(--alert-bg); }
.balken.u-neutral i { background: var(--serie-1); }
.mtab .pz.u-pz-breit { width: 58px; }
.u-meter-gross { height: 14px !important; overflow: visible !important; }
.u-meter-gross i { border-radius: 999px; }
.u-nennmarke { position: absolute; left: 83.33%; top: -4px; bottom: -4px; width: 2px; background: var(--ink-2); }

.u-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.u-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 9px; font-size: 12px; color: var(--ink-2);
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px;
}
.u-chip b { display: inline; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Betriebsprofil: Wochentag mal Stunde, ein Farbton von hell nach dunkel. */
.u-profil { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)); gap: 2px; max-width: 900px; }
.u-profil-h { font-size: 10.5px; color: var(--ink-3); text-align: left; }
.u-profil-wt { font-size: 12px; font-weight: 600; color: var(--ink-2); align-self: center; }
.u-profil i {
  display: block; height: 20px; border-radius: 3px;
  background: color-mix(in srgb, var(--serie-1) var(--anteil, 0%), var(--flaeche-2));
}
.u-profil i:hover { outline: 2px solid var(--ink-2); outline-offset: -1px; }

.u-akt { display: flex; gap: 6px; justify-content: flex-end; }
.u-zaehler { display: inline-flex; align-items: center; gap: 8px; }
.u-zaehler .mini { width: 30px; padding: 0; font-size: 15px; }
.u-zaehler .mini:disabled { opacity: 0.35; cursor: default; }
.u-zaehler b { display: inline; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

.u-dlg-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.u-dlg-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dlg-body .fld input, .dlg-body .fld select { width: 100%; }

/* Motorfenster, Register Technik */
.u-auslastung { margin-bottom: 14px; }
.u-aus-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.u-aus-kopf b { font-size: 24px; font-weight: 680; letter-spacing: -0.02em; }
.u-aus-kopf span { font-size: 13px; color: var(--ink-2); }
.u-aus-kopf .pille { margin-left: auto; }
.u-tk-karte { border: 1px solid var(--linie); border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 14px; }
.u-tk-karte h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; font-size: 13.5px; font-weight: 650; }
.u-tk-karte h4 .mini { margin-left: auto; }
.u-tk-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
.u-tk-form .fld input { width: 100%; }
.u-tk-breit { grid-column: 1 / -1; }
.u-tk-fuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.u-tk-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 7px 4px; border: 0; border-bottom: 1px solid var(--linie);
  background: none; font: inherit; color: inherit; text-align: left;
}
.u-tk-zeile:last-child { border-bottom: 0; }
.u-tk-zeile > div { flex: 1; min-width: 0; }
.u-tk-zeile b { display: block; font-size: 13px; font-weight: 600; }
.u-tk-zeile small { display: block; font-size: 11.5px; color: var(--ink-3); }
.u-tk-zahl { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-tk-klick { cursor: pointer; border-radius: var(--r-s); }
.u-tk-klick:hover { background: var(--flaeche-2); }

/* Bericht: ein Blatt, am Schirm wie auf Papier. */
.u-bericht { max-width: 1180px; margin: 0 auto; }
.u-bericht-kopf { margin-bottom: 16px; }
.u-bericht-kopf h2 { margin: 0 0 3px; font-size: 22px; font-weight: 680; letter-spacing: -0.015em; }
.u-bericht-kopf div { font-size: 13px; color: var(--ink-3); }
.u-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-bottom: 16px; }
.u-kz {
  padding: 11px 14px; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--linie-stark); border-radius: var(--r-s);
}
.u-kz b { display: block; font-size: 19px; font-weight: 680; letter-spacing: -0.015em; }
.u-kz span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.u-kz.ok { border-left-color: var(--ok); }
.u-kz.warn { border-left-color: var(--warn); }
.u-kz.alert { border-left-color: var(--alert); }

/* ================================ Zugang =================================
   Anmeldung, Wahl der Betriebsart, Benutzermenue, Matrizen der Einrichtung. */
.zg-blende {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; padding: 20px; overflow: auto;
  background: var(--bg);
}
.zg-karte {
  width: min(430px, 100%);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r); box-shadow: var(--schatten-hoch);
  padding: 26px 28px 22px;
}
.zg-blende.breit .zg-karte { width: min(720px, 100%); }
.zg-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.zg-kopf b { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.zg-karte h2 { margin: 0 0 6px; font-size: 21px; font-weight: 680; letter-spacing: -0.015em; }
.zg-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.zg-form { display: grid; gap: 12px; }
.zg-feld { display: grid; gap: 5px; }
.zg-feld span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.zg-feld input {
  height: 40px; padding: 0 12px; font: 15px inherit; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.zg-feld input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
.zg-knopf {
  height: 42px; margin-top: 4px; font: 15px/1 inherit; font-weight: 650; color: #fff;
  background: var(--akzent); border: 0; border-radius: var(--r-s); cursor: pointer;
}
.zg-knopf:hover { background: var(--akzent-dunkel); }
.zg-knopf:disabled { opacity: 0.6; cursor: default; }
.zg-link {
  justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 13px inherit; font-weight: 600; color: var(--akzent); text-decoration: underline; text-underline-offset: 2px;
}
.zg-fehler { padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--alert); background: var(--alert-bg); border: 1px solid var(--alert-rand); border-radius: var(--r-s); }
.zg-fuss { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.zg-fuss:empty { display: none; }
.zg-warn { color: var(--warn-ink); }
.zg-wahl { padding: 0; margin-bottom: 14px; }
.zg-art { padding: 0 0 12px; }
.modus-karte:disabled { opacity: 0.5; cursor: default; }
.modus-karte:disabled:hover { background: var(--flaeche-2); border-color: var(--linie-stark); }
.zg-form-zeile { padding: 0 0 10px; }

/* Benutzermenue in der Kopfzeile */
.ich { position: relative; flex: none; }
.ich-knopf {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 9px;
  font: 13px/1 inherit; font-weight: 600; color: var(--ink-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 999px; cursor: pointer;
}
.ich-knopf:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: var(--akzent); }
.ich-knopf svg { width: 17px; height: 17px; flex: none; }
.ich-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-marke { padding: 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-rand); border-radius: 999px; }
.ich.auf .ich-menue { display: grid; gap: 2px; }
.ich-menue button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: var(--r-s); cursor: pointer; font: inherit; color: inherit; }
.ich-menue button b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ich-menue button small { display: block; font-size: 12px; color: var(--ink-3); }
.ich-menue button:hover { background: var(--akzent-hell); }

/* Matrizen: Rechte, Bildschirme, Bedienprotokoll */
.zg-matrix th, .zg-matrix td { padding: 7px 12px; }
.zg-matrix th.mitte, .zg-matrix td.mitte { text-align: center; }
.zg-matrix th small { display: block; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.zg-matrix input[type="checkbox"], .zg-matrix input[type="radio"] { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--akzent); }
.zg-matrix td:first-child, .zg-matrix th:first-child { position: sticky; left: 0; z-index: 2; background: var(--flaeche); min-width: 250px; }
.zg-matrix th:first-child { background: var(--flaeche-2); z-index: 3; }
.zg-matrix tr.gruppe td:first-child { background: var(--flaeche-2); }
.zg-matrix tr.gruppe td { background: var(--flaeche-2); }
.zg-matrix tr.zg-stark td { background: var(--akzent-hell); }
.zg-matrix tr.zg-stark td:first-child { background: var(--akzent-hell); }
.zg-matrix tr.zg-frei td { color: var(--ink-3); font-style: italic; }
.zg-matrix .blass { opacity: 0.45; }
/* Rechte: nur so breit wie noetig — bei einem einzigen Benutzer stuende
   seine Spalte sonst am anderen Ende des Bildschirms. */
.zg-matrix.zg-schmal { width: auto; min-width: 560px; }
.zg-matrix.zg-schmal td:first-child, .zg-matrix.zg-schmal th:first-child { min-width: 380px; }
.zg-benutzer { min-width: 180px; vertical-align: top; text-transform: none !important; letter-spacing: 0 !important; }
.zg-benutzer b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.zg-benutzer .mini-wahl { display: block; width: 100%; margin-top: 5px; }
.zg-benutzer .u-akt { margin-top: 6px; justify-content: flex-start; }
.zg-alle { padding: 1px 8px; font: 11px inherit; font-weight: 600; color: var(--akzent-dunkel); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 999px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.zg-alle:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.zg-matrix th .zg-alle { display: block; margin: 5px auto 0; }
.mini-wahl { height: 28px; padding: 0 6px; font: 12.5px inherit; color: var(--ink); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s); max-width: 100%; }

/* Verbindungsliste */
.v-tab td { padding: 7px 8px; vertical-align: middle; }
.v-tab td input[type="text"], .v-tab td input[type="number"], .v-tab td input[type="password"] {
  width: 100%; height: 32px; padding: 0 9px; font: 13px inherit; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.v-tab td input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--akzent); }

/* Bildschirme massstaeblich */
.bs-bild { position: relative; margin: 4px 0 8px; }
.bs-schirm {
  position: absolute; display: grid; place-items: center; align-content: center;
  background: var(--flaeche-2); border: 2px solid var(--linie-stark); border-radius: 5px;
}
.bs-schirm.haupt { border-color: var(--akzent); background: var(--akzent-hell); }
.bs-schirm b { font-size: 22px; font-weight: 680; line-height: 1; }
.bs-schirm small { font-size: 10.5px; color: var(--ink-3); }

/* Berichte */
.be-reiter { display: flex; flex-wrap: wrap; gap: 4px; align-self: center; margin-right: 8px; }
.be-blatt { height: 32px; padding: 0 13px; font: 13px/1 inherit; font-weight: 600; color: var(--ink-2); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 999px; cursor: pointer; }
.be-blatt:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); }
.bar .be-blatt.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.bar button.be-blatt { height: 32px; padding: 0 13px; }
.bar button.be-blatt:not(.an) { background: var(--flaeche); color: var(--ink-2); border-color: var(--linie-stark); }
.u-kz-delta { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.u-kz-delta.gut { color: var(--ok); }
.u-kz-delta.schlecht { color: var(--alert); }
.be-fuss { padding: 0 2px 12px; margin-top: -8px; }
.be-daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; }
.be-daten > div { display: grid; gap: 1px; }
.be-daten span { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.be-daten b { font-size: 13.5px; font-weight: 600; }
.mtab tr.blass td { color: var(--ink-3); }

@media (max-width: 1300px) {
  .u-kopf { grid-template-columns: 1fr 1fr; }
  .u-kopf > .u-held { grid-column: 1 / -1; }
  .u-drei { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .u-zwei, .u-zwei-breit, .u-kopf { grid-template-columns: 1fr; }
}

@media print {
  .uebungsband, .alarmleiste, .mp, .dlg { display: none !important; }
  .u-zwei, .u-drei { grid-template-columns: 1fr 1fr; }
  .u-kz, .kpi { box-shadow: none; border-color: #999; }
  .u-bericht .card { break-inside: avoid-page; }
  .u-rang-zeile .spur, .u-rang-zeile .spur i, .balken, .balken i, .u-profil i {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  [style*="max-height"] { max-height: none !important; overflow: visible !important; }
}

@media print {
  body { overflow: visible; background: #fff; }
  .topbar, .nodruck, .bar { display: none !important; }
  main { overflow: visible; }
  .screen { padding: 0; max-width: none; }
  .screen-title { font-size: 16px; margin-bottom: 8px; }
  .screen-title small { display: none; }
  .card { box-shadow: none; border-color: #999; break-inside: auto; margin-bottom: 10px; }
  .card > h3 { background: #eee; padding: 6px 10px; }
  .mtab th { background: #eee !important; color: #000; }
  .mtab td, .mtab th { padding: 5px 8px; font-size: 11px; }
  .mtab tr { break-inside: avoid; }
  .pille { border: 1px solid #999; }
  .cl-kopf h3 { font-size: 15px; }
}

@media (max-width: 1200px) {
  .trend-grid { grid-template-columns: 1fr; }
  .tabs button { padding: 7px 10px; font-size: 13px; }
}

/* ====================== Nebenanlagen, Archiv, Leerlauf ==================== */
.u-hinweis { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
p.u-hinweis { margin: 0; padding: 0 16px 16px; font-size: 13.5px; color: var(--ink-2); max-width: 90ch; }
h4.u-unter, h4.be-lieferant {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0; padding: 14px 16px 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
}
h4.be-lieferant { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink); border-top: 1px solid var(--linie); }
h4.be-lieferant .rechts { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
td.na-lauf small { display: inline; margin-left: 8px; }

.ar-mail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 10px 0 4px; }
.ar-mail .fld:nth-child(1), .ar-mail .fld:nth-child(7) { grid-column: 1 / -1; }
a.ar-datei { color: var(--akzent-dunkel); font-weight: 600; text-decoration: none; }
a.ar-datei:hover { text-decoration: underline; }

/* Gruppenregeln: Gruppe -> Vorlage, eine Zeile je Regel. */
.zg-regeln { display: grid; gap: 8px; margin-top: 12px; max-width: 760px; }
.zg-regel { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.zg-regel:last-child { grid-template-columns: 22px minmax(0, 1fr) 18px minmax(0, 1fr) auto; padding-top: 8px; border-top: 1px dashed var(--linie-stark); }
.zg-regel-nr { font-size: 12px; font-weight: 650; color: var(--ink-3); text-align: right; }
.zg-pfeil { color: var(--ink-3); text-align: center; }
.zg-quelle { display: inline-block; margin: 2px 0 4px; padding: 1px 7px; font-size: 10.5px; font-weight: 650; color: var(--ink-2); background: var(--flaeche-2, var(--grund)); border: 1px solid var(--linie-stark); border-radius: 999px; }

/* Eine Minute vor der Abmeldung: ein Band am unteren Rand. */
.leerlauf-band {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5000;
  padding: 12px 18px; text-align: center; font-size: 14px; font-weight: 600;
  color: var(--warn-ink); background: var(--warn-bg); border-top: 2px solid var(--warn);
}

/* Firmenlogo anstelle des Zeichens. */
.logo.logo-bild { width: auto; height: 36px; padding: 0; background: none; border-radius: 0; }
/* Feste Hoehe, Breite aus dem Seitenverhaeltnis: ein SVG ohne eigene Masse
   schrumpft sonst auf ein paar Pixel. */
.logo.logo-bild img { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; }
.zg-kopf .logo.logo-bild, .zg-kopf .logo.logo-bild img { height: 44px; }
.zg-kopf .logo.logo-bild img { max-width: 220px; }

@media print { .leerlauf-band { display: none; } }

.zg-regel input, .zg-regel select {
  height: 34px; min-width: 0; padding: 0 10px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.zg-regel input:focus, .zg-regel select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
/* ============ Alarme der Steuerung, Aenderungsprotokoll, Mail, Verzeichnis ============ */
.btn.klein { height: 30px; padding: 0 12px; font-size: 12.5px; }
td .pille + .pille { margin-left: 6px; }
tr.al-offen td:first-child { box-shadow: inset 3px 0 0 var(--alert, #cf2a2a); }
.al-bar { margin: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; }

td.ae-feld { font-size: 12.5px; color: var(--ink-2); word-break: break-word; }
td.ae-wert { max-width: 340px; font-size: 12.5px; word-break: break-word; }
td.ae-wert.alt { color: var(--ink-3); }
td.ae-wert.neu { color: var(--ink); font-weight: 600; }

.ml-eingabe {
  width: 100%; height: 34px; min-width: 0; padding: 0 10px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.ml-eingabe.kurz { width: auto; margin: 0 4px; }
.ml-haken { display: flex; margin: 2px 0; }

/* Verzeichnis: links die Gruppen, rechts wer darin ist. */
.vz-dlg { width: min(760px, calc(100vw - 24px)); }
.vz-suche { display: flex; gap: 8px; margin-bottom: 8px; }
.vz-suche input { flex: 1; height: 36px; padding: 0 10px; font: inherit; color: var(--ink); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s); }
.vz-spalten { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px; margin-top: 8px; }
.vz-liste { max-height: 44vh; overflow: auto; border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); }
.vz-gruppe { display: block; width: 100%; padding: 8px 12px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.vz-gruppe:hover, .vz-gruppe.an { background: var(--akzent-hell); }
.vz-gruppe small, .vz-zeile small { display: block; font-size: 12px; color: var(--ink-3); }
.vz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linie-stark); background: var(--flaeche-2); position: sticky; top: 0; }
.vz-pfeil { color: var(--ink-3); }
.vz-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--linie); }
.vz-zeile.blass { opacity: 0.6; }

.na-ablese-liste { padding: 0 2px; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 3px; }
h4.na-ablesungen { padding-left: 0; }

td .pille { white-space: nowrap; }

.ml-meldung { min-height: 20px; margin: -6px 2px 8px; }

/* Lange Hakentexte im Dialog umbrechen statt den Dialog zu sprengen. */
.dlg-body .haken { align-items: flex-start; }
.dlg-body .haken span { white-space: normal; }

/* ================= Zugang zum Active Directory ================= */
.zg-ad { margin: 14px 0 10px; padding: 0 14px; border: 1px solid var(--linie-stark); border-radius: var(--r-s); background: var(--flaeche-2); }
.zg-ad[open] { padding-bottom: 14px; }
.zg-ad summary { padding: 11px 0; font-weight: 650; cursor: pointer; }
.zg-ad summary small { font-weight: 400; color: var(--ink-3); }
.zg-ad-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 8px; }
.zg-ad-ergebnis { margin-top: 12px; }
.zg-ad-liste { display: grid; gap: 6px; margin-bottom: 10px; }
.zg-ad-liste > div { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; font-size: 13.5px; }
.zg-ad-liste > div > span:first-child { color: var(--ink-2); }
.zg-ad-liste .pille { justify-self: start; white-space: normal; }
.zg-ad-rat { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }

.zg-ad .hinweis-klein { margin-top: 10px; padding-bottom: 0; }

/* Dialoge und Motorfenster kompakt: flachere Felder, engere Abstaende. */
.dlg-body { gap: 8px; }
.dlg-body .fld { gap: 3px; }
.dlg-body .fld > label { font-size: 10.5px; }
.dlg-body .fld input, .dlg-body .fld select { height: 31px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.dlg-body textarea { min-height: 44px; padding: 6px 9px; font-size: 13px; }
.dlg-body .u-dlg-drei { gap: 8px; }
.dlg-body .note, .dlg-body .dlg-info { padding: 7px 10px; font-size: 12.5px; }
.mp-body .fld input, .mp-body .fld select { height: 31px; font-size: 13px; }
/* Im schmalen Motorfenster sollen Takt und Rest nicht ueber mehrere Zeilen
   brechen — "30 Tage" gehoert zusammen. */
.mp-body .mtab td.takt, .mp-body .mtab td.num { white-space: nowrap; }

/* ===================== Fenster in der Groesse ziehen ===================== */
/* Griff unten rechts. touch-action: none, damit das Ziehen am Bedienpanel
   nicht als Wischen gilt. */
.fn-griff {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 3;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 44%, var(--linie-stark) 44% 56%,
    transparent 56% 68%, var(--linie-stark) 68% 80%, transparent 80%);
}
.fn-griff:hover {
  background: linear-gradient(135deg, transparent 0 44%, var(--akzent) 44% 56%,
    transparent 56% 68%, var(--akzent) 68% 80%, transparent 80%);
}
/* Beim Ziehen soll der Inhalt nicht mitmarkiert werden. */
.mp.zieht, .dlg.zieht { user-select: none; }

/* =============== Kennzahlen im Motorfenster: flacher =============== */
.tz-kacheln { gap: 6px; margin-bottom: 10px; }
.tz-kachel { min-width: 96px; padding: 5px 9px; }
.tz-kachel .v { font-size: 14px; }
.tz-kachel .k { font-size: 10.5px; }
.tz-note { padding: 8px 11px; margin-bottom: 10px; font-size: 13px; }
.tz-note .tz-prozent { font-size: 14px; }
.tz-verlauf { padding: 9px 11px; }
.tz-verlauf h4 { margin-bottom: 7px; font-size: 12.5px; }
/* Im Fenster noch etwas enger als auf der Seite "Tendenz". */
.mp-body .tz-kachel { min-width: 86px; padding: 4px 8px; }
.mp-body .tz-kachel .v { font-size: 13.5px; }
.mp-werte { padding: 7px 14px; }
.mp-kachel { min-width: 88px; padding: 3px 10px; }
.mp-kachel .v { font-size: 13px; }
.mp-kachel .k { font-size: 10.5px; }

/* Im breiten Fenster soll das Tagesdiagramm nicht ins Riesenhafte wachsen —
   es ist eine Nebenansicht, kein Hauptdiagramm. */
.tz-verlauf svg { max-height: 150px; }
/* Platz fuer den Griff, damit er nicht auf der Ecke von "Übernehmen" sitzt. */
.dlg-fuss { padding-right: 20px; }
/* Wird das Fenster groesser gezogen, soll der Inhalt die Hoehe fuellen und
   darin rollen — sonst bleibt unten ein leerer Streifen. Ohne feste Hoehe
   (Vorgabe) bleibt alles wie bisher: das Fenster waechst mit dem Inhalt. */
.mp-body, .dlg-body { flex: 1 1 auto; min-height: 0; }
/* Benutzer ohne Passwort: das Schluesselzeichen faellt auf. */
button.mini.fehlt { color: var(--alert); border-color: var(--alert); background: var(--alert-bg); }

/* ================================ Kennzahlen ===============================
   Produktion, Antriebe, Produktionstrend (kpi.js). */
.k-stat th.num b { display: block; font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.k-stat th.num small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.k-stat td:first-child { color: var(--ink-2); }
.k-stat td.num { font-weight: 600; white-space: nowrap; }
.k-stat td { padding-top: 7px; padding-bottom: 7px; }
.k-gross { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.k-unter { font-size: 12px; color: var(--ink-3); margin: 2px 0 6px; }
.k-abstand { margin-top: 12px; }
.k-abfrage { margin-bottom: 12px; align-items: flex-end; }
.k-abfrage .fld.w { width: 170px; }
.k-rot { color: var(--alert); font-weight: 650; }
.mtab tr.k-klick { cursor: pointer; }
.k-linien { display: block; max-width: 100%; }
.k-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.k-leg { display: inline-flex; align-items: center; gap: 6px; }
.k-leg i { width: 14px; height: 3px; border-radius: 2px; }
.k-leg i.band { height: 7px; width: 12px; }
.k-leg b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.dlg.k-breit { width: min(900px, 96vw); max-height: 86vh; }
.k-ein-kopf { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.k-ein-tab td { padding: 4px 6px; }
.k-ein-tab input:not([type="checkbox"]), .k-ein-tab select {
  width: 100%; height: 29px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-s);
}
.k-ein-tab select:disabled { color: var(--ink-3); background: var(--flaeche-2); }
.k-ein-tab button { height: 27px; padding: 0 8px; }
.k-einrichten .note { white-space: pre-line; }
.k-wechsel { max-height: 240px; overflow: auto; border: 1px solid var(--linie); border-radius: var(--r-s); }
@media (max-width: 900px) { .k-ein-kopf { grid-template-columns: 1fr; } }
.k-ein-neu { justify-self: start; height: 30px; padding: 0 12px; }

/* ================================= OPC UA ==================================
   Analyse, Browser, Beobachten, Protokoll, Server (opcua.js). */
.ua-kopf { align-items: center; }
.ua-verbindungen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ua-verb {
  display: inline-flex; align-items: center; gap: 9px; height: auto; padding: 6px 13px 6px 11px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink-2); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r);
}
.bar .ua-verb { background: var(--flaeche); color: var(--ink-2); border-color: var(--linie-stark); height: auto; }
.bar .ua-verb:hover { background: var(--akzent-hell); border-color: var(--akzent); color: var(--ink); }
.bar .ua-verb.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel); box-shadow: inset 0 0 0 1px var(--akzent); }
.ua-verb b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.2; }
.ua-verb small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.ua-verb .led { flex: none; }
.ua-hinweis { font-size: 12.5px; color: var(--ink-3); }
.ua-register { padding-top: 8px; padding-bottom: 8px; }
.ua-leiste { margin: 0; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; }
.ua-knoten { max-height: 62vh; overflow: auto; }
.ua-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.ua-klein { color: var(--ink-3); font-size: 11.5px; word-break: break-all; }
.ua-fehlt h4, .ua-unter { margin: 14px 0 6px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ua-fehlt h4:first-child { margin-top: 0; }
.ua-zeile { font-size: 13px; color: var(--ink-2); }
.ua-zeile.ok { color: var(--ok); font-weight: 600; margin-top: 8px; }
.ua-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.ua-marke { padding: 2px 9px; font-size: 12px; color: var(--ink-2); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; }
.ua-marke.alert { color: var(--alert); background: var(--alert-bg); border-color: var(--alert-rand); }
.ua-browser { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ua-baum { max-height: 66vh; }
.tree .row.gewaehlt { background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }
.tree .val.ua-schlecht, .ua-schlecht { color: var(--alert); }
.ua-baum .val { width: 170px; }
.ua-mini { height: 26px; padding: 0 10px; margin-left: 10px; font-size: 12px; }
.card > h3 .ua-mini { font-weight: 600; }
.ua-knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ua-knopfzeile .btn { height: 30px; padding: 0 12px; font-size: 13px; }
.ua-attribute .row .k { flex: none; width: 200px; }
.ua-attribute .row .v { word-break: break-word; }
.ua-blass { color: var(--ink-3); }
.ua-blass-text { color: var(--ink-3); font-style: italic; }
.ua-abstand { margin-top: 12px; }
.ua-wert { font-weight: 650; }
.ua-funke { display: block; }
.ua-log { max-height: 300px; overflow: auto; padding: 6px 0; font-size: 13px; }
.ua-log-gross { max-height: 68vh; }
.ua-logzeile { display: flex; gap: 12px; align-items: baseline; padding: 4px 16px; border-bottom: 1px solid var(--linie); }
.ua-logzeile:last-child { border-bottom: 0; }
.ua-logzeile .t { flex: none; width: 150px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ua-log:not(.ua-log-gross) .ua-logzeile .t { width: 70px; }
.ua-logzeile b { flex: none; min-width: 220px; font-weight: 600; }
.ua-logzeile.fehler { background: var(--alert-bg); }
.ua-logzeile.warn { background: var(--warn-bg); }
.ua-art { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); align-self: center; }
.ua-art.ok { background: var(--ok); } .ua-art.warn { background: var(--warn); } .ua-art.fehler { background: var(--alert); }
.ua-haken { font-weight: 700; text-align: center; color: var(--ink-3); }
.ua-haken.ok { color: var(--ok); } .ua-haken.fehler { color: var(--alert); }
@media (max-width: 1100px) { .ua-browser { grid-template-columns: 1fr; } }
.ua-attribute { border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; }
.ua-attribute .row { display: flex; font-size: 13px; border-bottom: 1px solid var(--linie); }
.ua-attribute .row:last-child { border-bottom: 0; }
.ua-attribute .row .k { padding: 6px 10px; background: var(--flaeche-2); font-weight: 600; color: var(--ink-2); }
.ua-attribute .row .v { flex: 1; min-width: 0; padding: 6px 10px; }
.ua-log .u-leer { padding: 12px 16px; }
.ua-urteil { padding: 9px 13px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; border-radius: var(--r-s); border: 1px solid var(--linie); }
.ua-urteil.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-rand); }
.ua-urteil.fehler { color: var(--alert); background: var(--alert-bg); border-color: var(--alert-rand); }

/* ========================== Datenbank und Ablage =========================== */
.db-ordner { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--linie); font-size: 13px; color: var(--ink-2); }
.db-ordner code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--ink); word-break: break-all; }
.db-ordner-fuss { padding: 11px 16px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--linie); }

.db-haken { display: flex; gap: 9px; align-items: flex-start; padding: 12px 16px 0; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.db-haken input { margin-top: 2px; flex: none; }
.db-pruefung { padding: 0 16px; }
.db-pruefung .note { margin-top: 10px; }
.db-fortschritt { margin: 14px 16px; font-weight: 600; }