/* ============================================================
   Steuerzentrale - Oberflaeche
   Anmutung: Schaltschrank am Relaisstandort. Dunkle Front,
   Skalenlampen-Bernstein als Akzent, Messwerte in Schreibmaschine.
   Bewusst ohne externe Schriften, das Geraet steht offline.
   ============================================================ */

:root{
  --bg:#0d151c;
  --panel:var(--panel);
  --panel2:#1c2a36;
  --line:#263844;
  --text:#cfdae3;
  --muted:#7d919f;
  --amber:#f0a830;
  --on:#3ecf8e;
  --off:var(--off);
  --red:#e8574a;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Schmalschnitt fuer Kanalnamen - die Anmutung gravierter
     Schilder am Schaltschrank, und auf jedem Geraet vorhanden.
     Keine Nachladung: die Steuerung steht ohne Internet. */
  --font-schild:"Arial Narrow","Roboto Condensed","Helvetica Neue Condensed",
                "Liberation Sans Narrow",var(--font-ui);
  --blink:600ms;
  /* Abgeleitete Farben, damit ein heller Modus moeglich ist */
  --field:#0b1319;
  --onAmber:#10181e;
  --onGreen:#0c1a14;
  --handBg:#3a2a10;
  --handText:#e4d3b4;
  --alarmBg:#3a1512;
  --alarmBgHi:#4a1a16;
  --alarmText:#f2c4bd;
  --alarmMuted:#c58c84;
  --shadow:rgba(0,0,0,.5);
  --veil:rgba(6,11,15,.68);
}

/* ---- Heller Modus ---------------------------------------- */
:root.light{
  --bg:#eef1f4;
  --panel:#ffffff;
  --panel2:#e7ecf1;
  --line:#cfd8e0;
  --text:#16202a;
  --muted:#5b6b78;
  --amber:#a86a06;
  --on:#0e8a58;
  --off:#c2ccd5;
  --red:#c0392b;
  --field:#f7f9fb;
  --onAmber:#ffffff;
  --onGreen:#ffffff;
  --handBg:#fdf3dd;
  --handText:#6b4d10;
  --alarmBg:#fbe4e1;
  --alarmBgHi:#f6d5d1;
  --alarmText:#7d2018;
  --alarmMuted:#9c4b41;
  --shadow:rgba(20,30,40,.18);
  --veil:rgba(120,132,144,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
/* Ganzflaechiger Untergrund. Wird die Seite in einen fremden
   Rahmen eingebettet, greifen Regeln auf html und body nicht
   immer - diese Ebene liegt sicher hinter allem. */
body::before{content:"";position:fixed;inset:0;background:var(--bg);z-index:-1}

body{
  background:var(--bg);
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;          /* kein Doppeltipp-Zoom beim schnellen Bedienen */
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* ---- Anmeldung ---- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.loginBox{
  width:min(360px,100%);background:var(--panel);
  border:1px solid var(--line);border-radius:4px;padding:28px 24px;
  box-shadow:0 20px 60px var(--shadow);
}
.loginBox h1{font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin:14px 0 2px}
.loginBox .sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.dial{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--panel2),var(--field))}
.dial span{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px var(--amber)}
label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
input,select{
  width:100%;margin-top:5px;background:var(--field);color:var(--text);
  border:1px solid var(--line);border-radius:3px;padding:9px 10px;
  font-family:var(--font-mono);font-size:14px;
}
input:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.err{color:var(--red);font-size:13px;min-height:18px;margin:10px 0 0}

/* ---- Rahmen ---- */
/* Kopfzeile: nur Titel und Zahnrad. Alles Weitere liegt im Menü. */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg)}
header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{flex:1;min-width:0}
.brand b{
  display:block;min-width:0;white-space:nowrap;overflow:hidden;
  line-height:1.3;padding-bottom:2px;      /* Platz für Unterlängen */
}
.iconBtn{
  width:40px;height:40px;flex:none;padding:0;border-radius:3px;position:relative;
  display:grid;place-items:center;line-height:1;
  background:none;border:1px solid var(--line);color:var(--muted);
}
.iconBtn svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Das Zahnrad ist eine Flaechengrafik, keine Strichzeichnung */
.iconBtn svg.filled{fill:currentColor;stroke:none}
.iconBtn.alarm{border-color:var(--red);color:var(--red)}
.iconBadge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
.iconBtn.on{border-color:var(--amber);color:var(--amber);background:rgba(240,168,48,.12)}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:.04em}
.hdrRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lamp{width:10px;height:10px;border-radius:50%;background:var(--off);flex:none}
.lamp.ok{background:var(--on);box-shadow:0 0 10px rgba(62,207,142,.7)}
.lamp.bad{background:var(--red);box-shadow:0 0 10px rgba(232,87,74,.7)}
:root.offline #hdrLamp{animation:blinkLamp 1s steps(1,end) infinite}
.chip{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:3px 8px;white-space:nowrap;
}

nav[hidden]{display:none}
nav button{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:11px 13px;font-size:13px;letter-spacing:.04em;cursor:pointer;white-space:nowrap;
  font-family:inherit;
}
nav button.active{color:var(--amber);border-bottom-color:var(--amber)}

main{padding:18px 18px 40px;max-width:1100px;margin:0 auto;background:var(--bg)}
#app{background:var(--bg);min-height:100dvh}
.tab{display:none}
.tab.active{display:block}
h2{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:30px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--line);font-weight:600;
}
h2:first-child{margin-top:2px}
h3{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:24px 0 10px;font-weight:600;
}
.hint{color:var(--muted);font-size:13px;max-width:66ch;margin:0 0 14px;line-height:1.55}
.warn{color:var(--amber);font-size:13px;max-width:66ch;border-left:2px solid var(--amber);
  padding-left:12px;margin:0 0 16px;line-height:1.55}
h2 + .hint, h2 + .warn, h3 + .hint{margin-top:-2px}
.formGrid + .hint, .tableWrap + .hint, .panel + .hint{margin-top:12px}
.hint + .actions, .warn + .actions{margin-top:0}

/* ---- Kanalstreifen: das Herzstueck ---- */
.strips{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* Links kein Rahmen, dort sitzt der dicke Streifen. Sonst
   stuenden bei ausgeschaltetem Ausgang ein gruener Rahmen und ein
   roter Streifen nebeneinander. */
.strip{
  background:var(--panel);border:1px solid var(--line);border-left:none;
  border-radius:4px;padding:12px 12px 12px 15px;
  display:flex;flex-direction:column;gap:10px;position:relative;
}
/* Streifen und Punkt zeigen dasselbe: rot bei 0, gruen bei 1 */
.strip::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  border-radius:4px 0 0 4px;
}
.strip.on{border-color:rgba(62,207,142,.45)}
.strip.on::before{background:var(--on)}
.stripTop{display:flex;align-items:center;gap:8px}
.stripState{flex:1;min-width:0}
.stripName{font-size:17px;line-height:1.3}
.stripMeta{font-family:var(--font-mono);font-size:11px;color:var(--muted);
  min-height:14px;overflow-wrap:anywhere}
.bigLamp{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--red);box-shadow:0 0 12px rgba(232,87,74,.55);
  border:1px solid var(--line);
}
.bigLamp.on{background:var(--on);box-shadow:0 0 14px rgba(62,207,142,.8)}
/* Punkt und Streifen haengen an derselben Klasse der Kachel und
   blinken damit zwangslaeufig im Gleichtakt. */
.strip.pending .bigLamp{transition:none;animation:blinkLamp var(--blink,600ms) steps(1,end) infinite}
.strip.pendOn .bigLamp{background:var(--on);box-shadow:0 0 14px rgba(62,207,142,.85)}
.strip.pendOff .bigLamp{background:var(--red);box-shadow:0 0 14px rgba(232,87,74,.85)}
/* Der Takt kommt vom Browser selbst: eine Animation laeuft
   gleichmaessig weiter, auch wenn der Hauptablauf gerade mit dem
   Neuzeichnen beschaeftigt ist. Ein Taktgeber im Skript wurde
   davon ausgebremst und lief unrhythmisch. */
@keyframes blinkLamp{0%,49%{opacity:1}50%,100%{opacity:.12}}

/* Halte-Taste: die Zeit laeuft sichtbar mit */
.holdBtn{
  width:100%;padding:16px 12px;font-size:14px;letter-spacing:.04em;
  background:var(--panel2);border:1px solid var(--line);border-radius:3px;
  touch-action:none;                    /* kein Scrollen waehrend des Haltens */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.strip.pendOn .holdBtn{color:var(--on)}
.strip.pendOff .holdBtn{color:var(--red)}
.strip.on .holdBtn{border-color:rgba(62,207,142,.5)}
.strip.pressing .holdBtn{background:var(--panel2)}
.holdBar{height:3px;background:var(--field);border-radius:2px;overflow:hidden}
.holdBar i{display:block;height:100%;width:0;transition:width .1s linear}
.strip.pendOn .holdBar i{background:var(--on)}
.strip.pendOff .holdBar i{background:var(--red)}

.strip.pending::before{transition:none;animation:blinkLamp var(--blink,600ms) steps(1,end) infinite}
.strip.pendOn::before{background:var(--on)}
.strip.pendOff::before{background:var(--red)}

/* Handbetrieb: unuebersehbar, weil dort keine Regel mehr greift */
.strip.hand{background:var(--handBg);border-color:var(--amber)}
.strip.hand::before{background:var(--amber)}
.strip.hand .stripMeta{color:var(--handText)}
.handNote{
  background:var(--amber);color:var(--onAmber);border-radius:2px;
  padding:5px 8px;font-size:11.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;
}
.handBanner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--handBg);border:1px solid var(--amber);border-left:4px solid var(--amber);
  border-radius:3px;padding:11px 14px;margin-bottom:18px;
}
.handBanner b{color:var(--amber);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.handBanner span{font-size:13px;color:var(--handText);flex:1;min-width:200px}
.handBanner button{margin-left:auto}
/* Alle Bedientasten gleich hoch, damit die Streifen ruhig wirken
   und der Daumen überall dieselbe Fläche trifft. */
.stripBtns{display:flex;gap:8px;flex-wrap:wrap}
.actBtn{
  flex:1 1 0;min-width:96px;padding:16px 12px;font-size:14px;letter-spacing:.04em;
  background:var(--panel2);border:1px solid var(--line);border-radius:3px;
}
.strip.on .actBtn[data-cmd="on"]{background:var(--on);border-color:var(--on);
  color:var(--onGreen);font-weight:600}

/* Kleiner Info-Knopf: Schaltzeitpunkt auf Anforderung */
.infoBtn{
  width:24px;height:24px;flex:none;padding:0;border-radius:50%;
  border:1px solid var(--line);background:none;color:var(--muted);
  font-family:var(--font-mono);font-size:12px;line-height:1;
}
.infoBtn.open{border-color:var(--amber);color:var(--amber);background:rgba(240,168,48,.12)}
/* Legt sich über die Kachel, statt sie auseinanderzuschieben -
   sonst rutscht die Taste beim Einblenden unter dem Finger weg. */
.stripInfo{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text);
  background:var(--panel2);border:1px solid var(--amber);border-radius:3px;
  padding:8px 10px;line-height:1.4;box-shadow:0 6px 18px var(--shadow);
}
.seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-left:auto}
.seg button{
  background:none;border:none;color:var(--muted);font-size:11px;letter-spacing:.08em;
  padding:4px 9px;cursor:pointer;font-family:inherit;
}
.seg button.sel{background:var(--amber);color:var(--onAmber);font-weight:600}
.holdTag{font-family:var(--font-mono);font-size:10px;color:var(--amber);
  border:1px solid rgba(240,168,48,.4);border-radius:2px;padding:1px 5px}

/* ---- Pillen fuer Eingaenge und Merker ---- */
.pills{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pill{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;padding:9px 11px;font-size:14px;
  min-width:0;
}
.pill .lamp{width:9px;height:9px;flex:none}
.pill > span.mono{min-width:0;overflow-wrap:anywhere}
.pill small{margin-left:auto;font-family:var(--font-mono);color:var(--muted);font-size:11px;
  white-space:nowrap}
.pill button{flex:none}
#scanResult{margin:14px 0}
#scanResult:empty{margin:0}

/* ---- Karten ---- */
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.card .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .v{font-family:var(--font-mono);font-size:26px;margin-top:4px;letter-spacing:-.02em}
.card .v.small{font-size:16px}
.card.alarm{border-color:var(--red)}
.card.alarm .v{color:var(--red)}
.card.fault .v{color:var(--muted)}

/* ---- Tabellen ---- */
.tableWrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
  margin-bottom:2px;
}
.tableWrap::-webkit-scrollbar{height:8px}
.tableWrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
#tblOut{min-width:960px}
#tblSensors{min-width:760px}
#apiExamples td.mono{overflow-wrap:anywhere}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:none}
td input,td select{margin-top:0;padding:6px 8px;font-size:13px}
td.num{width:44px;font-family:var(--font-mono);color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:12px}

/* ---- Formulare ---- */
.formGrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px;
  margin-bottom:14px}
.panel .formGrid{margin-bottom:0}
.formGrid label{margin-bottom:0}
.formGrid .full{grid-column:1/-1}
.formRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.formRow input,.formRow select{width:auto;flex:1 1 160px;margin-top:0}
/* Einstellungsblock: Titel sitzt in einer eigenen Leiste, nicht
   halb auf dem Rahmen wie bei fieldset/legend. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  margin:0 0 14px;overflow:hidden}
.panelTitle{
  padding:9px 14px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);font-weight:600;
}
.panel .formGrid{background:none;border:none;border-radius:0}
.panel .actions{margin:0 14px 14px}
.panel .hint{margin:0 14px 12px}

/* ---- Regeln ---- */
.rule{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:14px;margin-bottom:10px}
.ruleHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ruleHead input[type=text]{flex:1 1 180px;margin-top:0;width:auto}
.ruleHead select{width:auto;margin-top:0}
.condRow,.actRow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.condRow select,.condRow input,.actRow select,.actRow input{width:auto;flex:0 1 auto;margin-top:0}
.ruleLabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
  width:52px;flex:none}
.ruleActive{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.ruleActive.on{color:var(--on)}

/* ---- Knoepfe ---- */
/* iOS deutet langes Druecken sonst als Textauswahl und blendet
   Lupe und Kopieren-Menue ein. Das stoert genau bei den Tasten,
   die man halten soll. */
button, .seg, .fileBtn, .strip, .simBtn, nav button, .handBanner{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
button *, .holdBtn *{pointer-events:none}

button{
  background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:3px;padding:8px 14px;font-size:13px;font-family:inherit;cursor:pointer;
  letter-spacing:.03em;
}
/* Abgeschaltete Tasten duerfen nicht wie bedienbare aussehen.
   Ohne die zweite Regel bleibt auf Touchgeraeten der Hover-Rahmen
   nach dem Antippen stehen. */
button:disabled{opacity:.4;cursor:not-allowed}
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
button.primary{background:var(--amber);color:var(--onAmber);border-color:var(--amber);font-weight:600}
button.danger{border-color:rgba(232,87,74,.5);color:var(--red)}
button.ghost{background:none}
button.on{background:var(--on);border-color:var(--on);color:var(--onGreen);font-weight:600}
button.small{padding:4px 9px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.fileBtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:3px;
  padding:8px 14px;font-size:13px;cursor:pointer;text-transform:none;letter-spacing:.03em;
  color:var(--text);margin-bottom:0}
.fileBtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---- Meldung ---- */
/* Die Meldung schwebt unten am Rand. Falls die Umgebung feste
   Positionierung unterbindet - manche eingebetteten Ansichten tun
   das -, faellt sie in den normalen Fluss zurueck und sitzt dann
   mittig statt verrutscht. Deshalb kein translateX zum Zentrieren,
   sondern automatischer Rand. */
.toast{
  position:fixed;inset:auto 0 24px 0;
  margin:0 auto;width:max-content;max-width:min(90vw,420px);
  background:var(--panel2);border:1px solid var(--amber);color:var(--text);
  padding:11px 18px;border-radius:3px;font-size:14px;text-align:center;
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .2s,transform .2s;z-index:70;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.bad{border-color:var(--red)}
.toast:not(.show){visibility:hidden}

@media (max-width:640px){
  main{padding:14px 14px 32px}
  header{padding:10px 12px;gap:8px}
  .brand{font-size:15px}
  .strips{grid-template-columns:1fr}
  .pills{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .formGrid{padding:14px;gap:12px}
  h2{margin:24px 0 12px}
  .askBox{padding:18px}
  /* Tabellen mit vielen Spalten sind auf dem Handy nur seitlich
     scrollend lesbar - das ist gewollt, aber die Zellen sollen
     dabei nicht auf Briefmarkengroesse schrumpfen. */
  table{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  /* Uebergaenge aus. Das Blinken bleibt ausdruecklich erhalten:
     es ist eine Betriebsmeldung, keine Verzierung. */
  *{transition:none !important}
  *:not(.bigLamp):not(.strip)::before,
  *:not(.bigLamp){animation:none !important}
  .strip.pending .bigLamp,
  .strip.pending::before{
    animation:blinkLamp var(--blink,600ms) steps(1,end) infinite !important;
  }
}

/* ---- Eigene Rueckfrage ---- */
.askOverlay{
  position:fixed;inset:0;z-index:80;background:var(--veil);
  display:grid;place-items:center;padding:24px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.askBox{
  width:min(400px,100%);background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--amber);border-radius:4px;padding:22px;
  box-shadow:0 24px 60px var(--shadow);
}
.askBox p{margin:0 0 20px;font-size:15px;line-height:1.5}
.askBtns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ---- Verlauf ---- */
.chartHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.segRange{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.segRange button{
  background:none;border:none;border-right:1px solid var(--line);color:var(--muted);
  padding:7px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;
}
.segRange button:last-child{border-right:none}
.segRange button.sel{background:var(--amber);color:var(--onAmber);font-weight:600}
.liveBox{display:flex;align-items:center;gap:6px;margin:0;text-transform:none;
  letter-spacing:0;font-size:13px;color:var(--muted)}
.liveBox input{margin:0}

.chartWrap{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:4px;padding:10px 6px 6px;min-height:120px;
}
#chart{
  display:block;width:100%;touch-action:pan-y;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.chartEmpty{
  padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;
}

.readout{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin:12px 0 4px;font-size:13px;min-height:20px;
}
.roTime{font-family:var(--font-mono);font-size:12px;color:var(--amber)}
.roItem{display:flex;align-items:center;gap:6px;color:var(--muted)}
.roItem i{width:9px;height:9px;border-radius:2px;flex:none}
.roItem b{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:12.5px}

.seriesPick{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pickGroup{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.pickTitle{
  padding:7px 12px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.pickList{padding:8px 12px 10px}
.pickItem{
  display:flex;align-items:center;gap:8px;margin:0;padding:4px 0;
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);cursor:pointer;
}
.pickItem.on{color:var(--text)}
.pickItem input{width:auto;margin:0;flex:none}
.pickItem .swatch{width:11px;height:11px;border-radius:2px;border:1.5px solid;flex:none}

/* ---- Einstellkarten je Ausgang ---- */
.cfgCards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.cfgCard{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cfgHead{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--panel2);border-bottom:1px solid var(--line);
}
.cfgNum{
  font-family:var(--font-mono);font-size:11px;color:var(--amber);
  border:1px solid rgba(240,168,48,.35);border-radius:2px;padding:2px 6px;flex:none;
}
.cfgHead input{flex:1 1 120px;margin-top:0;min-width:0}
.cfgHead .modeSel{width:auto;margin-top:0;flex:none;max-width:46%}
.cfgHint{padding:8px 12px 0;font-size:12px;color:var(--muted)}
.cfgCard .formGrid{background:none;border:none;border-radius:0;margin-bottom:0;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chkLine{
  display:flex;align-items:center;gap:8px;grid-column:1/-1;
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--text);margin-bottom:0;
}
.chkLine input{width:auto;margin:0;flex:none}
@media (max-width:640px){
  .cfgCards{grid-template-columns:1fr}
  .cfgHead{flex-wrap:wrap}
  .cfgHead .modeSel{max-width:none;flex:1 1 100%}
}

/* Zustand als kurzes Kennzeichen statt ausgeschriebenem Wort */
.stateTag{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:1px 6px;
}
.stateTag.on{color:var(--on);border-color:rgba(62,207,142,.5)}

/* ---- Startseite: quadratische Kacheln ---- */
/* Kacheln sind zum Bedienen mit dem Daumen gedacht: großzügige
   Flächen, deutliche Schrift, keine Fummelei. */
.tiles{
  display:grid;gap:12px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.tile{
  aspect-ratio:1/1;                 /* immer quadratisch */
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  padding:14px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
}
.tileHead{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:600;flex:none;
}
.tileHead b{color:var(--red);font-family:var(--font-mono);letter-spacing:0}
.tileBody{flex:1;min-height:0;overflow-y:auto;font-size:14px}
.tileBody.center{display:grid;place-items:center}
.tileBody::-webkit-scrollbar{width:5px}
.tileBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}


/* Ausgänge als quadratische Kacheln */
#homeTiles{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.strip.tileOut{
  aspect-ratio:1/1;justify-content:flex-start;padding:14px 14px 14px 17px;gap:6px;
  overflow:hidden;
  container-type:inline-size;   /* Bezug für die Schriftskalierung */
}
.strip.tileOut .stripName{
  font-size:26px;line-height:1.2;color:var(--text);width:100%;
  display:block;overflow:hidden;white-space:nowrap;
  flex:1 1 0;min-height:0;
}
.strip.tileOut .stripMeta{margin-top:0;font-size:14px;line-height:1.25}
.strip.tileOut .bigLamp{width:32px;height:32px}
.strip.tileOut .holdBtn,
.strip.tileOut .actBtn{padding:21px 8px;font-size:18px;min-width:0;letter-spacing:.02em}
/* Die Taste sitzt unten und nimmt die volle Breite ein */
.strip.tileOut .stripBtns{margin-top:0}
.strip .holdBar{margin-bottom:-10px}
.strip.tileOut .holdBar{margin-bottom:-6px}

/* Der Balken belegt seinen Platz immer, auch im Ruhezustand.
   Sonst rutscht die Taste beim Drücken nach unten weg - genau
   unter dem Finger, der sie gerade hält. */
.strip .holdBar.hidden{display:block;visibility:hidden}
.strip.tileOut .stripBtns{gap:8px}
.strip.tileOut .infoBtn{width:32px;height:32px;font-size:16px}
.strip.tileOut .stripInfo{font-size:14px;padding:12px 14px;left:10px;right:10px;bottom:10px}

/* Sternchen */
.favBtn{
  background:none;border:none;padding:0 2px;color:var(--off);
  font-size:15px;line-height:1;cursor:pointer;flex:none;
}
.favBtn.on{color:var(--amber)}
.favBtn.small{font-size:13px;margin-left:4px}
.alarmBtn{font-weight:700;font-family:var(--font-mono)}
.alarmBtn.on{color:var(--red)}
.card .k .favBtn{float:right}

@media (max-width:640px){
  /* Zwei Kacheln nebeneinander. Der Platz darin wird dafuer voll
     ausgenutzt: wenig Rand, Name gross, Taste ueber die ganze
     Breite und hoch genug fuer den Daumen. */
  .tiles, #homeTiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .tile{padding:10px;gap:6px}
  .strip.tileOut{padding:10px 10px 10px 13px;gap:6px}
  .tileHead{font-size:10.5px;letter-spacing:.1em}
  .strip.tileOut .holdBtn,
  .strip.tileOut .actBtn{padding:20px 4px;font-size:16px;letter-spacing:0}
  .strip.tileOut .bigLamp{width:26px;height:26px}
  .strip.tileOut .infoBtn{width:26px;height:26px;font-size:14px}
  /* Die Zustandskachel darf ueber beide Spalten laufen - eine
     Liste in halber Breite waere nicht lesbar. */
  .tileSum{grid-column:1/-1}
}


/* ---- Alarmarchiv ---- */
.archBox{
  width:min(620px,100%);max-height:82dvh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:4px;box-shadow:0 24px 60px var(--shadow);
}
.archHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
.archHead b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.archBody{flex:1;overflow-y:auto;padding:4px 16px 12px}
.archFoot{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px;
  border-top:1px solid var(--line)}
.archSec{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line);
}
.archRow{
  display:grid;gap:2px 10px;padding:7px 0;border-bottom:1px solid rgba(38,56,68,.5);
  grid-template-columns:auto 1fr;align-items:baseline;
}
.archRow:last-child{border-bottom:none}
.archTime{font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.archKind{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  justify-self:start;
}
.archRow.came .archKind{color:var(--red)}
.archRow.went .archKind{color:var(--on)}
.archSec + .archRow.came .archKind{color:var(--amber)}
.archText{grid-column:1/-1;font-size:13px;color:var(--text)}
@media (max-width:640px){
  .archBox{max-height:88dvh}
  .archBody{padding:4px 12px 12px}
}

/* Erklärung der kleinen Bedienzeichen in der Übersicht */
.legend{
  color:var(--muted);font-size:12px;margin:-4px 0 12px;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
}
.legend span{font-weight:700}
.lgStar{color:var(--amber)}
.lgAlarm{color:var(--red)}
.lgInfo{
  display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--line);font-family:var(--font-mono);font-size:10px;font-weight:400;
}

/* Regel-Editor: Verknüpfung und Verzögerung */
.linkSel{
  width:auto !important;flex:none;margin-top:0;padding:5px 6px;font-size:12px;
  color:var(--amber);border-color:rgba(240,168,48,.4);background:var(--field);
  text-transform:uppercase;letter-spacing:.08em;
}
.delayBox{
  display:flex;align-items:center;gap:5px;margin:0;flex:none;
  text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);
}
.delayBox input{margin-top:0}
.ruleNote{font-size:12px;color:var(--muted);flex:none}

/* Startseite: ein gemeinsames Raster für alle Kacheln, damit sich
   feste und ausgewählte Kacheln zusammen sortieren lassen. */
#homeExtra, #homeTiles{display:contents}

/* Feld für die Reihenfolge, direkt neben dem Sternchen */

/* Schwellwert und Hysterese mit sichtbarer Beschriftung */
.valBox{
  display:flex;align-items:center;gap:5px;margin:0;flex:none;
  text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);
}
.valBox input{margin-top:0}
.actText{width:auto !important;flex:1 1 180px;min-width:140px;margin-top:0}

/* ---- Sammelkachel: reine Statusanzeige ---- */
/* Werte stehen rechts und fluchten untereinander */
/* Alle Angaben in dieser Kachel in einer Größe - Name, Messwert
   und Kennzeichen stehen gleichrangig nebeneinander. */

.sumBtn{font-size:13px}
.sumBtn.on{color:var(--on)}
.lgSum{color:var(--on)}

/* Kacheleinstellungen in der Konfiguration */
.tileCtl{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.cfgTile{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--panel2);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ---- Menü hinter dem Zahnrad ---- */

/* ---- Alarmleiste am oberen Rand ---- */
.alarmBar{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:11px 14px;background:var(--alarmBg);
  border-bottom:1px solid var(--red);
  box-shadow:inset 3px 0 0 var(--red), inset 0 -1px 0 rgba(232,87,74,.25);
  color:var(--alarmText);font-size:14px;min-height:48px;
}
.abItem{font-family:var(--font-ui)}
.abCount{
  flex:none;min-width:28px;height:28px;border-radius:14px;background:var(--red);
  font-variant-numeric:tabular-nums;
  color:#fff;font-family:var(--font-mono);font-size:14px;font-weight:700;
  display:grid;place-items:center;padding:0 8px;
}
.abList{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.abItem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.abItem i{
  font-style:normal;color:var(--red);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;margin-right:6px;
}
.abMore{color:var(--alarmMuted);font-size:12.5px}
.abHint{
  flex:none;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--alarmMuted);border:1px solid rgba(232,87,74,.5);border-radius:3px;padding:4px 8px;
}
@media (max-width:640px){
  .alarmBar{padding:10px 12px;gap:10px;font-size:13px}
  .abHint{display:none}
  .abList .abItem:nth-child(n+3){display:none}
}

/* ---- Zustandskachel: zwei Spalten, einklappbar ---- */
/* Zwei Spalten breit, Höhe nach Inhalt. Die Obergrenze setzt das
   Skript, siehe passeSumHoehe. */
.tileSum{grid-column:span 2;aspect-ratio:auto;min-height:0;align-self:start}
/* Die Zustandskachel waechst mit ihrem Inhalt, statt ihn
   abzuschneiden. Innen wird deshalb auch nicht gescrollt. */
.tileSum .tileBody{overflow:visible;max-height:none}
.tileSum.collapsed{max-height:none}
.tileSum.collapsed .tileBody{display:none}

.sumHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:none;border-radius:0;padding:0 0 2px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:600;text-align:left;
}
.sumChev{font-size:11px;color:var(--muted)}


@media (max-width:640px){
  /* Auch hier zwei Spalten: dafür brechen die Namen um. */
}

/* Zeile 1 Zustand, Zeile 2 Beschriftung über die ganze Breite,
   Zeile 3 der Rest. Die Taste sitzt darunter am Kachelrand. */
.strip.tileOut .stripTop{flex:none}
.strip.tileOut .stripState{display:flex;align-items:center}

/* Umschaltung hell/dunkel im Menü */

/* Im hellen Modus brauchen einzelne Flächen mehr Kontrast */
:root.light .bigLamp{border-color:var(--line)}
:root.light .askOverlay,
:root.light .menuOverlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}

/* ---- Keine Verbindung ---- */
.offlineBar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--alarmBg);border-bottom:1px solid var(--red);
  color:var(--alarmText);font-size:14px;min-height:48px;
}
.offDot{
  width:11px;height:11px;border-radius:50%;background:var(--red);flex:none;
  animation:blinkLamp 1s steps(1,end) infinite;
}
.offlineBar span:nth-child(2){flex:1;min-width:0;line-height:1.3}
.offAge{font-family:var(--font-mono);font-size:11.5px;color:var(--alarmMuted);flex:none}

/* Ohne Verbindung nichts vorgaukeln: alles Bedienbare wird
   gesperrt und sichtbar zurückgenommen. */
:root.offline .strip .stripBtns,
:root.offline .seg,
:root.offline #maintList{opacity:.35;pointer-events:none}
:root.offline .tile,
:root.offline .strip{filter:saturate(.5)}

/* Protokoll */
.wdh{
  font-family:var(--font-mono);font-size:11px;color:var(--amber);
  border:1px solid rgba(240,168,48,.4);border-radius:2px;padding:0 4px;margin-left:6px;
}
tr.lv1 td:nth-child(2){color:var(--amber)}
tr.lv2 td:nth-child(2){color:var(--red)}

/* Temperaturzeile führt in die Historie */

/* ---- Menügruppen ---- */

/* Hand/Auto auf der Wartungsseite: gleiche Tastenform wie in der
   Bedienung, die gewählte Seite hervorgehoben. */
.actBtn.sel{background:var(--amber);border-color:var(--amber);color:var(--onAmber);font-weight:600}

/* ---- Zeigerverhalten --------------------------------------
   Auf Touchgeraeten bleibt der Hover-Zustand nach dem Antippen
   haengen: die Taste behielt Rahmen und Schriftfarbe, als waere
   der Finger noch darauf. Deshalb gelten diese Regeln nur, wo es
   einen echten Zeiger gibt. */
@media (hover: hover) and (pointer: fine) {
  .iconBtn:hover{border-color:var(--amber);color:var(--amber)}
  nav button:hover{color:var(--text)}
  .strip.on .actBtn[data-cmd="on"]:hover{color:var(--onGreen)}
  .infoBtn:hover{border-color:var(--amber);color:var(--amber)}
  button:hover{border-color:var(--amber);color:var(--onAmber)}
  button:disabled:hover{border-color:var(--line);color:var(--text)}
  button.primary:hover{filter:brightness(1.1);color:var(--onAmber)}
  button.danger:hover{background:var(--red);color:var(--onAmber)}
  .fileBtn:hover{border-color:var(--amber)}
  .favBtn:hover{color:var(--amber);border-color:transparent}
  .alarmBtn:hover{color:var(--red)}
  .sumBtn:hover{color:var(--on)}
  .alarmBar:hover{background:var(--alarmBgHi)}
  .sumHead:hover{color:var(--amber);border-color:transparent}
  .sumHead:hover .sumChev{color:var(--amber)}
  .actBtn.sel:hover{color:var(--onAmber);filter:brightness(1.08)}
}

/* Ein Ziel, das nicht antwortet, faellt in der Zustandskachel auf */
.stateTag.off{color:var(--red);border-color:rgba(232,87,74,.55)}

/* Ein Ziel, das nicht antwortet, faellt auch in der Pillenliste auf */
.pill.bad{border-color:rgba(232,87,74,.45)}
.pill.bad small{color:var(--red)}

/* ---- Spaltenbreiten in Tabellen ----
   Wahrheitswerte und Zahlen brauchen nur so viel Platz wie ihre
   Überschrift. Der Rest geht an die Bezeichnungen, wo er nützt. */
th.w-chk, td.w-chk{width:1%;white-space:nowrap;text-align:center}
th.w-num, td.w-num{width:1%;white-space:nowrap}
th.w-zahl, td.w-zahl{width:1%;white-space:nowrap}
th.w-rom,  td.w-rom{width:1%;white-space:nowrap}
th.w-sel,  td.w-sel{width:1%;white-space:nowrap}
th.w-ctl,  td.w-ctl{width:1%;white-space:nowrap;text-align:center}
th.w-btn,  td.w-btn{width:1%;white-space:nowrap}

td.w-chk input[type=checkbox]{width:auto;min-width:0;margin:0}
td input[type=checkbox]{width:auto;min-width:0}

@media (max-width:640px){
  /* Die Mindestbreite gilt nur fuer Text- und Zahlenfelder,
     nicht fuer Haekchen - die blaehten die Spalte sonst auf. */
  /* Die Mindestbreite gilt für Text- und Zahlenfelder, nicht für
     Häkchen und nicht für die Reihenfolgezahl - die braucht nur
     drei Stellen. */
  td input:not([type=checkbox]):not(.ordBox), td select{min-width:90px}
  td.w-zahl input{min-width:64px}
}

/* Das Zustandskennzeichen in der Bedienkachel mitwachsen lassen */
.strip.tileOut .stripState .stateTag{font-size:16px;padding:5px 11px}
@media (max-width:640px){
  .strip.tileOut .stripState .stateTag{font-size:14px;padding:4px 9px}
    }

/* ---- Schrift skaliert mit der Kachel ----
   Die Kachel behält ihre Größe, der Inhalt richtet sich nach ihr.
   Die Werte sind auf die Kachelbreite bezogen (cqw) und nach oben
   wie unten begrenzt. Browser ohne Behälterabfragen verwerfen
   diese Zeilen und behalten die festen Größen darüber. */
/* Was man lesen und treffen muss, ist groß: Name, Zustand und
   Tastenbeschriftung. Die Zusatzangaben treten zurück. */
.strip.tileOut{
  padding:clamp(8px, 6cqw, 16px) clamp(8px, 6cqw, 16px)
          clamp(8px, 6cqw, 16px) clamp(11px, 7cqw, 19px);
  gap:clamp(5px, 3.5cqw, 11px);
}
.strip.tileOut .stripName > span{display:block;width:100%}
.strip.tileOut .stripName{
  font-size:clamp(16px, 11cqw, 26px);line-height:1.15;
  /* Grundmaß 0: der zugeteilte Platz haengt dann nicht davon ab,
     wie gross die Schrift gerade ist - sonst schaukelt sich die
     Anpassung im Skript auf.
     Kein Flexbehälter: bei zentriertem Inhalt laesst sich ein
     Ueberlauf nach oben nicht messen, und genau davon lebt die
     Anpassung. */
  flex:1 1 0;min-height:0;display:block;overflow:hidden;
  /* Eine Zeile, immer. Passt der Name nicht, wird die Schrift
     kleiner - ein Umbruch mitten im Namen liest sich schlechter
     als eine kleinere Zeile. */
  white-space:nowrap;
}
.strip.tileOut .stripTop,
.strip.tileOut .stripMeta,
.strip.tileOut .holdBar,
.strip.tileOut .stripBtns{flex:none}
.strip.tileOut .stripMeta{font-size:clamp(8px, 4.2cqw, 12px)}
.strip.tileOut .stripState .stateTag{
  font-size:clamp(12px, 8cqw, 20px);padding:clamp(3px,2.2cqw,6px) clamp(6px,5cqw,13px);
}
/* Lampe und Info-Zeichen: beide gleich groß, deutlich sichtbar.
   Sie sitzen in der obersten Zeile und dürfen dort Platz haben. */
.strip.tileOut .bigLamp{
  width:clamp(20px, 15cqw, 44px);height:clamp(20px, 15cqw, 44px);
}
.strip.tileOut .infoBtn{
  width:clamp(20px, 15cqw, 44px);height:clamp(20px, 15cqw, 44px);
  font-size:clamp(12px, 7.5cqw, 22px);
}
.strip.tileOut .holdBtn,
.strip.tileOut .actBtn{
  font-size:clamp(13px, 9.2cqw, 23px);
  padding:clamp(10px, 8cqw, 24px) 4px;
}
.strip.tileOut .stripInfo{
  font-size:clamp(8px, 4.2cqw, 12px);
  padding:clamp(4px,2.5cqw,7px) clamp(6px,3.5cqw,10px);
  bottom:auto;                  /* die Lage setzt das Skript */
}
.strip.tileOut .handNote{font-size:clamp(8px, 3.8cqw, 11px)}

/* ============================================================
   HOME - Meldetableau
   Vorbild ist die Meldetafel im Schaltschrank: beschriftete
   Leuchtfelder, die im Zustand aufleuchten. Die Kanalnamen
   stehen im Schmalschnitt wie auf gravierten Schildern, die
   Messwerte in Ziffern fester Breite.
   ============================================================ */

/* ---- Leuchtfeld ---- */
#homeGrid .strip.tileOut,
#homeGrid .tile{
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.25);
  border-color:var(--line);
  transition:box-shadow .18s ease, border-color .18s ease;
}

/* Der Zustand leuchtet aus dem linken Rand heraus, wie das
   Fenster einer Meldeleuchte - kein aufgesetzter Streifen. */
#homeGrid .strip::before{width:5px;border-radius:10px 0 0 10px;opacity:.9}
#homeGrid .strip.on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 4px 0 18px -8px var(--on),
    0 1px 2px rgba(0,0,0,.25);
  border-color:rgba(62,207,142,.34);
}
#homeGrid .strip:not(.on):not(.hand){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 4px 0 18px -8px var(--red),
    0 1px 2px rgba(0,0,0,.25);
}

/* ---- Schild ---- */
/* Die Beschriftung steht im Schmalschnitt und leicht gesperrt -
   die Anmutung eines gravierten Schildes. Mit Vorrang, damit
   keine allgemeine Regel für Kanalstreifen sie überschreibt. */
/* Grundschrift statt Schmalschnitt: der wirkte in die Höhe
   gezogen. Halbfett und leicht gesperrt reicht für die Wirkung
   eines Schildes. */
#homeGrid .strip.tileOut .stripName{
  font-family:var(--font-ui) !important;
  letter-spacing:.01em;
  font-weight:600;
  font-stretch:normal;
}

/* ---- Zustandsfeld oben ---- */
#homeGrid .stripState .stateTag{
  border-radius:999px;border-width:1px;
  font-family:var(--font-ui);font-weight:700;letter-spacing:.06em;
  background:rgba(125,145,159,.14);
}
#homeGrid .stripState .stateTag.on{
  background:rgba(62,207,142,.16);border-color:rgba(62,207,142,.5);
}

/* ---- Taster: der Fortschritt fuellt die Taste selbst ----
   Das ist die Signatur dieser Oberflaeche. Statt eines Balkens
   darueber laeuft die Zielfarbe durch die Taste - man sieht dem
   Knopf an, wie weit man ist, und schaut nicht daneben. */
#homeGrid .holdBar{display:none}
#homeGrid .strip.tileOut .holdBtn{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);
  font-weight:600;isolation:isolate;
}
#homeGrid .strip.tileOut .holdBtn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  width:var(--p,0%);
  background:var(--fuellfarbe,transparent);
  transition:width .08s linear;
}
#homeGrid .strip.pendOn .holdBtn{--fuellfarbe:rgba(62,207,142,.35);border-color:var(--on)}
#homeGrid .strip.pendOff .holdBtn{--fuellfarbe:rgba(232,87,74,.35);border-color:var(--red)}

/* ---- Zustandskachel ---- */
#homeGrid .tileSum .tileHead,
#homeGrid .sumHead{
  font-family:var(--font-schild);letter-spacing:.18em;font-weight:700;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px;
}

/* Im hellen Modus tragen die Verlaeufe zu dick auf */
:root.light #homeGrid .strip.tileOut,
:root.light #homeGrid .tile{
  background:var(--panel);
  box-shadow:0 1px 2px rgba(20,30,40,.08);
}
:root.light #homeGrid .strip.on{box-shadow:0 1px 2px rgba(20,30,40,.08)}
:root.light #homeGrid .strip:not(.on):not(.hand){box-shadow:0 1px 2px rgba(20,30,40,.08)}

/* Gerätezeit in der Kopfzeile */

/* ---- Zustandskachel: Zeilen beider Spalten auf gleicher Höhe ----
   Die Spalten stehen unabhängig nebeneinander. Nur wenn jede
   Zeile dieselbe Höhe hat, fluchten sie miteinander. */

/* Messwerte tragen denselben Rahmen wie die Zustände - beides
   sind Werte, beide gehören optisch in dieselbe Spalte. */

/* ---- Kachelinneres: feste Aufteilung ----
   Alle Tasten gleich hoch, gleich wie viele nebeneinander
   stehen. Der Zusatztext bekommt den Raum darüber. */
#homeGrid .strip.tileOut .stripBtns{
  min-height:clamp(52px, 30cqw, 92px);
  align-items:stretch;
}
#homeGrid .strip.tileOut .holdBtn,
#homeGrid .strip.tileOut .actBtn{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:6px 8px;line-height:1.15;
}

/* Der Name steht einzeilig und braucht nur seine Zeilenhöhe.
   Der freie Raum darunter gehört dem Zusatztext - dort steht,
   was gerade führt oder wie lange ein Impuls noch läuft. */
#homeGrid .strip.tileOut .stripMeta{
  flex:1 1 0;min-height:0;overflow:hidden;
  white-space:normal;line-height:1.3;
}

/* Zustandsfelder in der Zustandskachel so breit wie in der
   Bedienkachel: nach Inhalt, nicht auf festes Maß gestreckt. */

/* ---- Gleiche Tastenhöhe in allen Kacheln ----
   Eine zweizeilige Beschriftung darf die Taste nicht höher
   machen als eine einzeilige - sonst sitzen die Bedienflächen
   nebeneinander auf verschiedener Höhe. */
#homeGrid .strip.tileOut .stripBtns{align-items:stretch}
#homeGrid .strip.tileOut .holdBtn,
#homeGrid .strip.tileOut .actBtn{
  height:clamp(46px, 30cqw, 84px);
  padding:2px 6px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  line-height:1.15;
}

/* ---- Zusatzzeile nutzt die freie Höhe ----
   Der Platz zwischen Beschreibung und Taste stand ungenutzt da.
   Jetzt bekommt ihn die Zusatzangabe und darf umbrechen. */
/* Der Name nimmt die freie Höhe auf, die Zusatzzeile bleibt
   dicht an der Taste. So ist der Abstand über der Taste derselbe
   wie der Rand darunter. */
#homeGrid .strip.tileOut .stripName{
  flex:1 1 0;min-height:0;
  display:flex;align-items:flex-start;   /* oben ansetzen */
}
#homeGrid .strip.tileOut .stripName > span{width:100%}
#homeGrid .strip.tileOut .stripMeta{
  flex:none;overflow:hidden;white-space:normal;line-height:1.3;
}

/* ---- Kennzeichen so breit wie in der Bedienkachel ---- */

/* ---- Ein Maß für alle Zustandskennzeichen ----
   Bisher skalierte das Feld in der Bedienkachel mit der Kachel-
   breite, das in der Zustandskachel nicht - gleich breit konnten
   sie damit nie werden. Jetzt gilt für beide dasselbe Maß. */
#homeGrid .strip.tileOut .stripState .stateTag,
@media (max-width:640px){
  #homeGrid .strip.tileOut .stripState .stateTag,
}

/* ---- Sinnbild je Art ---- */

/* ---- Hinweis in der Bedienkachel ----
   Er läuft im Fluss mit, statt zu überlagern. Der flexible
   Bereich darunter gibt den Platz her, die Taste bleibt stehen. */
#homeGrid .strip.tileOut .stripInfo{
  position:absolute;left:auto;right:auto;bottom:auto;z-index:3;
  left:clamp(8px,5cqw,14px);right:clamp(8px,5cqw,14px);
  border-radius:6px;white-space:normal;line-height:1.25;
}
/* Die Taste bleibt so groß, dass sie mit dem Hinweis zusammen
   in die Kachel passt. */
#homeGrid .strip.tileOut .holdBtn,
#homeGrid .strip.tileOut .actBtn{height:clamp(42px, 26cqw, 74px)}

/* Buchstabenkennzeichen für Eingang, Ausgang und Merker */

/* ---- Größen in der Bedienkachel neu gewichtet ----
   Groß ist der laufende Hinweis unter der Beschreibung: dort
   steht, was zu tun ist. Der abgerufene Schaltzeitpunkt bleibt
   klein, er wird nur bei Bedarf eingeblendet. */
#homeGrid .strip.tileOut .stripMeta{
  font-size:clamp(12px, 6.8cqw, 21px);
  font-family:var(--font-ui);color:var(--muted);
}
#homeGrid .strip.tileOut .stripInfo{
  font-size:clamp(9px, 4.4cqw, 13px);
  padding:clamp(4px,2.2cqw,7px) clamp(6px,3cqw,10px);
}
#homeGrid .strip.tileOut .holdBtn,
#homeGrid .strip.tileOut .actBtn{height:clamp(56px, 38cqw, 108px)}

/* Alle Werte rechtsbündig und in derselben Zeilenhöhe - der
   Messwert ist nichts anderes als ein Zustand. */

/* ---- Wertspalte als echte Spalte ----
   Bisher war jede Zeile für sich ausgerichtet: die Kennzeichen
   endeten zwar rechts, begannen aber je nach Inhalt woanders.
   Mit einem gemeinsamen Raster teilen sich alle Zeilen einer
   Spalte dieselbe Wertbreite - sie richtet sich nach dem
   breitesten Eintrag und bleibt damit so schmal wie möglich. */
/* Jede Zeile schiebt ihren Wert an den rechten Rand. Die rechten
   Kanten fluchten damit, und jedes Feld bleibt nur so breit wie
   sein Inhalt - der gewonnene Platz geht an die Bezeichnung. */

/* ---- Einheitliche Felder ----
   Die Zustandswörter bekommen ein gemeinsames Maß, damit EIN,
   AUS, OK und NOK gleich breit stehen. Messwerte bleiben davon
   frei, sie sind naturgemäß länger.
   Feste Höhe für beide: die Ziffernschrift baut höher als die
   Grundschrift, dadurch waren Temperaturzeilen höher als die
   übrigen. */

/* ============================================================
   ZUSTANDSKACHEL - eine Zeile, eine Stelle
   Diese Regeln waren über die Zeit auf 58 Einzelvorschriften
   angewachsen, die einander teils widersprachen. Sie stehen
   jetzt geschlossen hier. Wer etwas ändern will, ändert es hier
   und nirgends sonst.
   ============================================================ */

/* Die Kachel meldet ihre Breite an: die Zeilen richten sich
   danach, nicht nach der Bildschirmbreite. Zwei schmale Spalten
   in einer breiten Kachel brauchen dieselbe Behandlung wie eine
   schmale Kachel. */
.tileSum{container-type:inline-size}

/* Zwei Spalten, Zeilen laufen untereinander durch */
.sumCols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-content:start}
.sumCol{min-width:0;display:grid;grid-auto-rows:34px}
.sumCol:only-child{grid-column:1/-1}

/* Eine Zeile: Sinnbild, Bezeichnung, Wert - fest 34 px hoch,
   damit alle Zeilen unabhängig von der Schrift darin gleich
   hoch sind. */
.sumRow{
  display:flex;align-items:center;column-gap:8px;
  height:34px;
}
/* Kein Element darf die Zeile aufdrücken - weder ein längerer
   Text noch ein Feld mit anderer Schrift. */
.sumRow > *{align-self:center;max-height:100%}

.sumName{
  flex:1;min-width:0;
  font-family:var(--font-ui);font-size:16px;line-height:1.2;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sumRow.on .sumName,
.sumRow.temp .sumName{color:var(--text)}
.sumRow.bad .sumName{color:var(--red)}

/* Sinnbild: Buchstabe für Kanäle, Zeichnung für Fühler und Ping */
.sumIco{
  flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--muted);
}
.sumIco svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.sumBuchstabe{
  font-family:var(--font-schild);font-weight:700;font-size:14px;line-height:1;
  border:1px solid var(--line);border-radius:4px;
}
.sumRow.on .sumIco,
.sumRow.on .sumBuchstabe{color:var(--on);border-color:rgba(62,207,142,.45)}
.sumRow.bad .sumIco{color:var(--red)}

/* Wertfeld: gleiche Höhe für alle, gleiche Breite für die
   Zustandswörter, Messwerte nach Inhalt. Rechtsbündig. */
.sumRow .stateTag,
.sumRow .valTag{
  flex:none;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 10px;
  font-family:var(--font-ui);font-size:15px;font-weight:700;line-height:1;
  letter-spacing:.05em;text-transform:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(125,145,159,.14);color:var(--muted);
  box-sizing:border-box;
}
/* Ein Maß für alle Wertfelder. Möglich, seit die Einheit im
   Thermometer steckt und der Messwert nicht mehr länger ist als
   ein Zustandswort. */
.sumRow .stateTag,
.sumRow .valTag{min-width:72px}
.sumRow .valTag{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sumRow .valTag i{font-style:normal;font-size:.78em;opacity:.75;margin-left:1px}
.sumRow .stateTag.on{
  color:var(--on);border-color:rgba(62,207,142,.5);background:rgba(62,207,142,.16);
}
.sumRow .stateTag.off,
.sumRow .valTag.heiss{
  color:var(--red);border-color:rgba(232,87,74,.5);background:rgba(232,87,74,.14);
}

/* Ein Tipp auf eine Temperatur führt in die Historie */
.sumRow.temp{cursor:pointer;border-radius:4px}

@media (hover: hover) and (pointer: fine){
  .sumRow.temp:hover{background:var(--panel2)}
  .sumRow.temp:hover .sumName{color:var(--amber)}
}

@media (max-width:640px){
  .sumCols{gap:0 10px}
  .sumRow{height:30px;column-gap:6px}
  .sumName{font-size:14px}
  .sumRow .stateTag,
  .sumRow .valTag{height:25px;padding:0 8px;font-size:13px}
  .sumRow .stateTag,
  .sumRow .valTag{min-width:62px}
  .sumIco{width:17px;height:17px}
  .sumIco svg{width:15px;height:15px}
  .sumBuchstabe{font-size:12px}
}

/* Wird die Kachel schmal, rückt alles eine Stufe zusammen -
   lieber kleiner als abgeschnitten. */
@container (max-width: 560px){
  .sumName{font-size:14px}
  .sumRow .stateTag,
  .sumRow .valTag{font-size:13px;height:26px;padding:0 8px}
  .sumRow .stateTag,
  .sumRow .valTag{min-width:62px}
  .sumIco{width:18px;height:18px}
  .sumIco svg{width:15px;height:15px}
  .sumBuchstabe{font-size:12px}
  .sumCols{gap:0 12px}
}
@container (max-width: 480px){
  .sumName{font-size:13px}
  .sumRow .stateTag,
  .sumRow .valTag{font-size:12px;height:24px;padding:0 7px}
  .sumRow .stateTag,
  .sumRow .valTag{min-width:58px}
  .sumRow{height:30px;column-gap:6px}
}

/* Zeilenhöhe des Rasters in den engeren Stufen mitziehen */
@media (max-width:640px){ .sumCol{grid-auto-rows:30px} }
@container (max-width: 480px){ .sumCol{grid-auto-rows:30px} }

/* Eingangs- und Merkerkacheln tragen denselben Aufbau wie die
   Ausgangskachel - nur ohne Taste, weil sich hier nichts
   schalten lässt. Der Platz der Taste geht an die Beschriftung. */
.tileState .stripMeta{
  font-family:var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(9px, 4.4cqw, 13px);opacity:.75;
}

/* ============================================================
   GESTALTUNGSSPRACHE FÜR ALLE SEITEN
   Was auf der Startseite entstanden ist, gilt hier für die
   übrigen Seiten: gravierte Überschriften im Schmalschnitt,
   Flächen mit feiner Lichtkante, Pillen für Zustände, ruhige
   Tabellen. Ein Block, damit es eine Stelle bleibt.
   ============================================================ */

/* ---- Überschriften wie Schilder ---- */
h2{
  font-family:var(--font-schild);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
  padding-bottom:8px;border-bottom:1px solid var(--line);
  margin:26px 0 14px;
}
h2:first-child{margin-top:0}
h3{
  font-family:var(--font-schild);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
}

/* ---- Flächen mit derselben Lichtkante wie die Kacheln ---- */
:root.light .card, :root.light .panel, :root.light .rule,
:root.light .cfgCard, :root.light .tableWrap, :root.light .archBox{
  background:var(--panel);
  box-shadow:0 1px 2px rgba(20,30,40,.08);
}

/* ---- Tabellen ---- */
table{font-size:13.5px}
th{
  font-family:var(--font-schild);
  font-size:11px;letter-spacing:.14em;font-weight:700;
  padding-bottom:10px;
}
td{padding:9px 10px}
tbody tr, table tr + tr{border-top:1px solid rgba(38,56,68,.5)}
:root.light tbody tr, :root.light table tr + tr{border-top-color:rgba(20,30,40,.08)}

/* ---- Bedienelemente ---- */
button{border-radius:8px}
button.small{border-radius:6px}
input, select, textarea{
  border-radius:6px;background:var(--field);
}
input:focus, select:focus, textarea:focus{border-color:var(--amber);outline:none}

/* ---- Zustandspillen überall gleich ---- */
.stateTag{
  border-radius:999px;font-weight:700;letter-spacing:.05em;text-transform:none;
  background:rgba(125,145,159,.14);
}
.stateTag.on{background:rgba(62,207,142,.16);border-color:rgba(62,207,142,.5)}
.stateTag.off{background:rgba(232,87,74,.14);border-color:rgba(232,87,74,.5)}

/* ---- Pillenliste auf der Bedienseite ---- */
.pill{
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 50%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
:root.light .pill{background:var(--panel);box-shadow:none}

/* ---- Regeleditor ---- */
.rule{padding:14px 16px}
.ruleLabel{
  font-family:var(--font-schild);letter-spacing:.14em;font-weight:700;
}

/* ---- Kanalstreifen außerhalb der Startseite ---- */
.strips .strip{
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.25);
}
:root.light .strips .strip{background:var(--panel);box-shadow:0 1px 2px rgba(20,30,40,.08)}
.strips .stripName{font-family:var(--font-schild);font-weight:600;letter-spacing:.015em}

/* ---- Abschnittshinweise ---- */
.hint{line-height:1.6}
.legend{font-family:var(--font-schild);letter-spacing:.06em}

/* Der Kopf der Zustandskachel folgt derselben Regel wie die
   Überschriften der übrigen Seiten - dort war sie schon so,
   hier wird sie nur noch einmal festgehalten. */
.sumHead, .tileHead{
  font-family:var(--font-schild);
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}

/* Menü und Überlagerungen in derselben Sprache */
.askBox{
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    var(--panel);
}
:root.light .askBox{background:var(--panel)}

/* Anmeldeseite */
.loginBox{
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 45%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 60px var(--shadow);
}
:root.light .loginBox{background:var(--panel);box-shadow:0 12px 40px var(--shadow)}
.loginBox h1{font-family:var(--font-schild);letter-spacing:.14em;text-transform:uppercase}

/* ============================================================
   MENÜ
   Dieselbe Sprache wie die übrigen Seiten: gravierte
   Gruppentitel im Schmalschnitt, Flächen mit Lichtkante,
   klare Trennung zwischen Navigation und Fußbereich.
   ============================================================ */
.menuOverlay{
  position:fixed;inset:0;z-index:75;background:var(--veil);
  display:flex;justify-content:flex-end;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.menuBox{
  width:min(330px,88vw);height:100%;display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    var(--panel);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px var(--shadow);
  border-radius:0;
}
:root.light .menuBox{background:var(--panel)}

.menuHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);
}
.menuHead b{
  font-family:var(--font-schild);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}

.menuList{flex:1;overflow-y:auto;padding:6px 0 10px}

/* Gruppentitel wie eine Abschnittsüberschrift */
.menuGroup + .menuGroup{border-top:1px solid rgba(38,56,68,.45)}
:root.light .menuGroup + .menuGroup{border-top-color:rgba(20,30,40,.08)}
.menuHeadItem{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;background:none;border:none;border-radius:0;text-align:left;
  padding:14px 18px 12px;
  font-family:var(--font-schild);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.menuHeadItem.open{color:var(--amber)}
.menuChev{font-size:10px;opacity:.8}

.menuSub{padding:0 0 8px}
.menuSub .menuItem{
  display:flex;align-items:center;gap:11px;
  width:100%;text-align:left;background:none;border:none;border-radius:0;
  padding:11px 18px;font-size:15px;color:var(--text);font-family:var(--font-ui);
}
.menuSub .menuItem::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--off);
}
.menuItem.active::before{background:var(--amber)}

/* Fußbereich: Kennung und Abmeldung */
.menuFoot{
  padding:12px 18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.menuFoot + .menuFoot{border-top:none;padding-top:0}
.menuInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.menuInfo span{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Umschaltung hell und dunkel */
.themeItem{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;border-radius:0;text-align:left;
  padding:12px 18px;font-size:14.5px;color:var(--muted);font-family:var(--font-ui);
}
.themeItem::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;
  background:linear-gradient(90deg,var(--text) 0 50%,var(--panel2) 50% 100%);
  border:1px solid var(--line);
}

@media (hover: hover) and (pointer: fine){
  .menuHeadItem:hover{color:var(--amber);background:var(--panel2)}
  .menuSub .menuItem:hover{background:var(--panel2);color:var(--amber)}
  .menuSub .menuItem:hover::before{background:var(--amber)}
  .themeItem:hover{color:var(--amber);background:var(--panel2)}
}

/* Die Bezeichnung bekommt den Platz - gezielt über die Spalte,
   nicht über "jedes Feld in dieser Tabelle": daneben stehen die
   Zahlenfelder, und die sollen schmal bleiben. */

/* ---- Startseiten-Einstellungen in den Tabellen ----
   Zeichen und zugehörige Zahl bilden ein Paar. Ist das Zeichen
   aus, ist die Zahl gesperrt und zurückgenommen - sie hat dann
   keine Wirkung, und das soll man sehen. */
.tileCtl{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.ctlPaar{display:inline-flex;align-items:center;gap:3px}
/* Die Breite ist eine harte Vorgabe: drei Stellen, mehr nicht.
   Mit Vorrang festgeschrieben, damit keine allgemeine Regel für
   Tabellenfelder sie wieder aufziehen kann - genau das ist hier
   mehrfach passiert. */
.ordBox{
  width:38px !important;min-width:38px !important;max-width:38px !important;
  flex:none;margin:0;padding:3px 2px;
  font-family:var(--font-mono);font-size:11.5px;text-align:center;
  background:var(--field);border:1px solid var(--line);border-radius:4px;color:var(--muted);
}
.ordBox:focus{color:var(--text);border-color:var(--amber)}
.ordBox.aus{opacity:.3;pointer-events:none}
.ordBox:disabled{cursor:default}

/* ---- Spaltenbreiten der Konfigurationstabellen ----
   Die Bezeichnung bekommt allen Platz, der übrig bleibt; die
   Einstellspalte nur so viel, wie ihre Zeichen brauchen. */
/* Die Bezeichnungsspalte bekommt ein festes Maß statt "auto".
   Als einzige dehnbare Spalte hätte sie sonst den gesamten
   Rest der Tabellenbreite geschluckt - und der ist bei drei
   Spalten (Merker) viel größer als bei fünf (Eingänge). */
/* Die Spalte ist genau so breit wie das Feld darin. Bisher
   blieben 20 px ungenutzt, die als Abstand vor dem Stern
   erschienen. */
#tblIn td:nth-child(2), #tblFlags td:nth-child(2),
#tblIn th:nth-child(2), #tblFlags th:nth-child(2){width:1px}
th.w-ctl, td.w-ctl{width:1%;white-space:nowrap;text-align:left;padding-left:4px}
@media (max-width:640px){
    .tileCtl{gap:8px}
  .ordBox{width:36px !important;min-width:36px !important;max-width:36px !important}
}

/* Das Zeichen muss auch im eingeschalteten Zustand lesbar sein -
   grün auf grün war es nicht. Getönter Grund, farbiges Zeichen. */
.favBtn.on{
  background:rgba(240,168,48,.16);border-color:rgba(240,168,48,.55);color:var(--amber);
}
.favBtn.sumBtn.on{
  background:rgba(62,207,142,.16);border-color:rgba(62,207,142,.55);color:var(--on);
}

/* Die Auswahl der Bedienart braucht Platz für "verzögert" */
#tblIn td select, #tblIn th.w-sel{min-width:118px}
@media (max-width:640px){ #tblIn td select{min-width:104px} }

@media (max-width:640px){}@media (max-width:640px){}

/* ============================================================
   SPALTENBREITEN DER KONFIGURATIONSTABELLEN
   Mit fester Tabellenaufteilung. Bei der sonst üblichen
   inhaltsbezogenen Aufteilung behandelt der Browser eine
   Breitenangabe nur als Untergrenze und verteilt überschüssige
   Breite auf die Spalten - genau das hat die Bezeichnungsspalte
   immer wieder aufgezogen. Hier gilt jede Angabe genau.
   ============================================================ */
/* Volle Breite, feste Aufteilung: die vorderen Spalten haben in
   beiden Tabellen dieselben Maße, die letzte nimmt den Rest auf.
   Bei inhaltsbezogener Breite fielen die Tabellen unterschiedlich
   aus, weil sie verschieden viele Spalten haben. */
/* Mindestbreite, damit die letzte Spalte auf schmalen
   Bildschirmen nicht auf null gedrückt wird - dann würde die
   Tabelle lieber scrollen. */
/* Jede Spalte hat ihr Maß in der Tabelle selbst. Die Tabelle
   richtet sich danach - keine volle Breite, keine Mindestbreite,
   also auch nichts zu verteilen. Die Merkertabelle ist damit
   schmaler als die Eingangstabelle, aber Nummer, Bezeichnung und
   Einstellungen stehen in beiden an derselben Stelle. */
#tblIn, #tblFlags{table-layout:fixed;width:auto;min-width:0}



#tblIn th:nth-child(3), #tblIn td:nth-child(3){width:78px}
#tblIn th:nth-child(4), #tblIn td:nth-child(4){width:128px}
/* ohne Maß: nimmt die verbleibende Breite auf */

/* Nummer und Feld teilen sich eine Zelle: fester Vorspann für
   die Nummer, der Rest gehört dem Feld. Der linke Rand kann in
   beiden Tabellen gar nicht mehr abweichen. */
.nameZelle{display:flex;align-items:center;gap:5px;padding-left:3px;padding-right:2px}
.rowNr{
  flex:none;width:16px;text-align:right;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
}
.nameZelle input{
  width:172px !important;min-width:172px !important;max-width:172px !important;
}

@media (max-width:640px){

  #tblIn th:nth-child(3), #tblIn td:nth-child(3){width:62px}
  #tblIn th:nth-child(4), #tblIn td:nth-child(4){width:112px}


}

/* ---- Erklärungen hinter dem i-Zeichen ---- */
.hintBtn{
  width:20px;height:20px;flex:none;padding:0;margin-left:9px;
  display:inline-grid;place-items:center;vertical-align:middle;
  border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--muted);
  font-family:var(--font-ui);font-size:12px;font-weight:700;font-style:italic;
  line-height:1;letter-spacing:0;text-transform:none;
}
.hintBtn.on{border-color:var(--amber);color:var(--amber);background:rgba(240,168,48,.14)}
.hintBtn.achtung{border-color:rgba(240,168,48,.5);color:var(--amber)}
h2 .hintBtn, h3 .hintBtn{margin-left:10px}
@media (hover: hover) and (pointer: fine){
  .hintBtn:hover{border-color:var(--amber);color:var(--amber)}
}
/* Aufgeklappte Erklärung leicht abgesetzt */
p.hint[data-faltbar]:not(.hidden),
p.warn[data-faltbar]:not(.hidden){
  border-left:2px solid var(--line);padding-left:12px;margin-top:6px;
}
p.warn[data-faltbar]:not(.hidden){border-left-color:var(--amber)}

/* ---- Feinheiten ---- */

/* Sortierfelder ohne Pfeiltasten: die nehmen Platz weg, sodass
   von drei Stellen nur zwei sichtbar blieben. */
.ordBox{-moz-appearance:textfield;appearance:textfield}
.ordBox::-webkit-outer-spin-button,
.ordBox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Unterlängen wie beim g wurden abgeschnitten - die Zeile war
   genau so hoch wie die Versalhöhe. */
.strip.tileOut .stripName{line-height:1.4;padding-bottom:.22em}
.sumName{line-height:1.35;padding-bottom:2px}
.sumRow{overflow:visible}

/* Mehrere Leerzeichen in der Überschrift der Zustandskachel
   bleiben erhalten. */
.sumHead > span{white-space:pre-wrap}

/* Die Ausschalttaste ist rot hinterlegt - sie führt in den
   sicheren Zustand und darf sich abheben. */
#homeGrid .strip.tileOut .actBtn[data-cmd="off"]{
  background:rgba(232,87,74,.14);border-color:rgba(232,87,74,.45);color:var(--red);
}

/* Gesperrte Adressfelder bei DHCP */
label.adrFeld.aus{opacity:.4}
label.adrFeld input:disabled{cursor:default}

/* ---- Zustandskachel auf schmalen Bildschirmen ----
   Die Felder werden nur so breit wie ihr Inhalt, damit das
   Sinnbild der rechten Spalte nicht in das Feld der linken
   ragt. Der Spaltenabstand wächst dafür etwas. */
@container (max-width: 480px){
  /* Auf schmalen Bildschirmen zählt jeder Millimeter für den
     Namen - die Sinnbilder entfallen dort. */
  .sumIco{display:none}
  .sumRow .stateTag,
  .sumRow .valTag{min-width:0;padding:0 6px}
  .sumCols{gap:0 14px}
  .sumName{min-width:0}
}
@media (max-width:640px){
  .sumRow .stateTag,
  .sumRow .valTag{min-width:0}
}

/* Unterlängen in der Zustandskachel */
.sumName{line-height:1.4;padding-bottom:.16em}