/* NACHTSTROM ELEKTROTECHNIK — Leitstelle.
   Die Seite ist das Werkzeug des Disponenten, nicht der Prospekt darüber.
   Deshalb: hochweißer, kühler Grund, Haarlinien statt Schatten, alles auf einer
   Spalte ausgerichtet, Zahlen tabellarisch. Eine einzige Signalfarbe, und die
   bedeutet immer Gefahr — nie Zierde, nie "Fortschritt", nie ein Knopf, den
   man gern gedrückt hätte. Keine Fotos: alles hier ist Type, Linie und SVG. */

/* ---------------------------------------------------------------- Schrift */
/* Instrument Sans, variabel, latin-Subset, selbst gehostet.
   Eine Familie. Die Hierarchie kommt aus Gewicht, Größe und Laufweite. */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrumentsans-var-latin.woff2?v=d4be1b60") format("woff2-variations"),
       url("fonts/instrumentsans-var-latin.woff2?v=d4be1b60") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  /* optional, nicht swap. Der Ersatz unten ist metrisch angeglichen, aber
     nicht identisch: der Hinweistext im Kasten bricht mit Arial eine Zeile
     tiefer um, und der Tausch verschob danach die ganze Modulreihe. Mit
     optional gibt es keinen Tausch — die Datei liegt vorgeladen daneben und
     ist praktisch immer rechtzeitig da; ist sie es einmal nicht, bleibt es
     für diesen Aufruf beim Ersatz, statt die Seite unter dem Finger
     springen zu lassen. Gemessen: CLS 0 statt 0,0066. */
  font-display: optional;
}
/* Metrisch angeglichener Ersatz. Gemessen aus der Datei:
   upem 1000, Ascender 970, Descender 250, x-Höhe 510, Versalhöhe 720,
   mittlere Dickte der Kleinbuchstaben 0,5249 em. Arial liegt bei 0,4895 em,
   ist also 7 % schmaler — ohne size-adjust bricht der Text beim Tausch anders
   um und der Absatz springt um eine Zeile. Die Overrides sind durch dieselben
   7 % geteilt, weil size-adjust auch sie skaliert. */
@font-face {
  font-family: "IS-fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90.7%;
  descent-override: 23.4%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------- Werte */
:root {
  --u: 8px;
  --g: clamp(20px, 3vw, 40px);

  /* zwei Grundtöne */
  --paper:   #f6f8f9;   /* Helligkeit ~248, neutral-kühl */
  --surface: #ffffff;
  --ink:     #10151a;
  --ink-2:   #3c4650;
  --ink-3:   #5a646e;   /* 5,3:1 auf --wash, 5,0:1 auf --panel */
  --rule:    #d3dae0;
  --rule-2:  #e7ecef;
  --wash:    #eef2f4;

  /* eine Signalfarbe, vier Abstufungen für Kontrastzwecke */
  --signal:      #cc2b06;   /* Flächen mit weißer Schrift, Kontrast 5,4:1 */
  --signal-hot:  #ec3a06;   /* nur Kanten und Marken */
  --signal-ink:  #a82305;   /* Signalfarbe als Text auf Papier, 6,5:1 */
  --signal-wash: #fdf1ed;
  --signal-glas: #ff6b3d;   /* dieselbe Farbe auf Glas, 6,3:1 auf --glas */

  /* Vier Materialien, kein weiterer Farbton.
     GEHÄUSE: der Kasten, in dem alles sitzt, eine Spur dunkler als das Papier,
     mit einer echten Kante statt eines weichen Schattens.
     GLAS: die Anzeigefelder. Dunkel, eingelassen, tabellarische Ziffern.
     DRUCK: der Beschriftungsstreifen, weißes Papier mit gesperrten Versalien.
     LAMPE: die eine helle Marke, die sagt, dass Strom drauf ist. */
  --panel:    #e4e9ed;
  --panel-lo: #d6dde2;
  --panel-hi: #ffffff;
  --panel-sh: rgba(16, 21, 26, 0.11);
  --glas:     #131a20;
  --glas-2:   #1d252c;
  --glas-ink: #eaf0f4;   /* 15,3:1 auf --glas */
  --glas-dim: #97a4ae;   /* 6,9:1 auf --glas */
  --glas-hair: rgba(255, 255, 255, 0.11);
  --lampe:    #f4f8fa;

  --sans: "Instrument Sans", "IS-fallback", system-ui, sans-serif;
  --board-h: 660px;
  --t: 140ms;
}
html[data-ns="order"] { --board-h: 840px; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* Getippte Adressen und Beschreibungen dürfen die Tafel nicht aufreißen. */
  overflow-wrap: break-word;
}
/* Flex- und Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen, sonst
   schiebt ein langes Wort bei 390 px die Seite seitlich hinaus. */
.v-head, .o-head, .bar-in, .foot-in, .v-headtext, .o-nr, .o-status,
.symb-t, .symb-s, .optb-t, .jobb-t, .jobb-s, .pr-a, .mi-t { min-width: 0; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.012em; margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }

/* Zahlen laufen überall tabellarisch: Uhrzeiten, Beträge, Nummern. */
time, .num, .num *, .o-nrv, .v-code, .o-prio, .tl-key, .eta-time,
.ptab .num, .jobb-m, .jobb-p, .dayb-d, .slotb time, .pr-t, .stp-t, .clockwrap {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.alarm :focus-visible, .btn:focus-visible, .demo-note :focus-visible {
  outline-color: currentColor;
}
/* Nach jedem Ansichtswechsel wandert der Fokus auf die neue Überschrift, damit
   Screenreader sie vorlesen. Diese Elemente sind aber nichts zum Anklicken —
   ein Rahmen darum liest sich wie ein Fehler. Bedienelemente behalten ihren. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus, p[tabindex="-1"]:focus { outline: none; }

.wrap {
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* =============================================================== Kopfleiste */

.demo-note {
  background: var(--ink);
  color: #cdd4da;
  font-size: 12.5px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: var(--u);
  padding: 10px clamp(16px, 4vw, 40px);
}
.demo-note[hidden] { display: none; }
.demo-note p { margin: 0; max-width: 92ch; }
.demo-note strong { color: #fff; font-weight: 600; }
.demo-note a { color: #fff; text-underline-offset: 2px; }
.demo-x {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; padding: 6px;
  background: none; border: 1px solid #39424b; border-radius: 2px;
  color: #cdd4da; cursor: pointer;
}
.demo-x:hover { border-color: #6d7883; color: #fff; }
.demo-x svg { display: block; width: 100%; height: 100%; }

/* Die zwei Nummern, die vor uns kommen. Steht auf jeder Seite, oberhalb von
   allem, was mit der Firma zu tun hat. */
.emerg {
  background: var(--signal-wash);
  border-bottom: 2px solid var(--signal);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px clamp(14px, 4vw, 38px);
}
.emerg a {
  color: var(--signal-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.bar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.bar-in {
  display: flex; align-items: baseline; gap: var(--g);
  padding-block: 14px;
  flex-wrap: wrap;
}
.mark {
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  margin-right: auto;
}
.mark a { text-decoration: none; }
.mark a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mark span {
  display: block;
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--ink-3);
  margin-top: 2px;
}
.bar-live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--wash);
}
.clockwrap {
  display: inline-block; min-width: 5ch; text-align: right;
  color: var(--ink); letter-spacing: 0.04em;
}
/* TYPENSCHILD ---------------------------------------------------------------
   An dieser Stelle stand die Nummer des erfundenen Notdienstes, direkt neben
   "Leitstelle besetzt" und der Uhr. Die Seite steht jetzt im Index, also darf
   dort keine wählbare Nummer eines Betriebs stehen, den es nicht gibt.

   Die Nummer des Studios einfach hineinzutauschen wäre schlimmer gewesen: sie
   hätte an derselben Stelle, in derselben Zeile, dieselbe Rolle übernommen und
   wie die Notrufnummer der Leitstelle gewirkt.

   Deshalb ein anderes Bauteil statt eines anderen Textes. Auf einem Gerät
   steht die Nummer des Herstellers nie auf dem Anzeigefeld des Betreibers,
   sondern auf einer geschraubten Platte am Gehäuse: eigene Reihe unter der
   Leiste, Gehäusematerial statt Papier, gesperrte Versalie als Bezeichnung,
   Fließtext daneben, der ausspricht, wofür die Nummer da ist. Keine
   Signalfarbe, kein Knopf, keine Nähe zur Uhr. */
.plate-in {
  display: flex; align-items: baseline;
  gap: 10px var(--g);
  flex-wrap: wrap;
  padding-block: 9px;
  border-top: 1px dashed var(--rule);
}
.plate {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  padding: 7px 12px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--panel-hi), inset 0 -1px 0 var(--panel-sh);
  border: 1px solid var(--panel-lo);
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
}
.plate-k {
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--panel-lo);
  padding-right: 12px;
}
.plate-t { flex: 1 1 20ch; min-width: 0; }
.plate-t strong { color: var(--ink); font-weight: 700; }
.plate-n {
  flex: 0 0 auto;
  font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* Dieselbe Aussage in Fließtext, überall dort, wo kein Schild hinpasst:
   im noscript-Kasten, im Fuß und unter einem angelegten Auftrag. Eine
   Formulierung auf der ganzen Seite, damit sie als Regel des Studios liest
   und nicht als Fußnote. */
.wdmnum {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}
.wdmnum strong { color: var(--ink); font-weight: 700; }
.wdmnum a {
  color: var(--ink); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.noscript .wdmnum { margin-top: 10px; color: var(--ink-2); }
.order .wdmnum {
  margin-top: calc(var(--u) * 2);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--rule-2);
}

/* ==================================================================== Tafel */

/* Die Leiste ueber der Tafel ist das Anzeigefeld: ein Glasstreifen mit vier
   Feldern, darunter der Segmentbalken der Stufen. Sie steht in jeder Ansicht
   und ist der Beleg, dass das Geraet laeuft. Feste Hoehen, damit nichts
   springt, wenn ein Feld beschrieben wird. */
.rail { margin-top: var(--g); }

.rail-read {
  display: flex; align-items: stretch;
  background: var(--glas);
  position: relative;
}
.rail-read + .board { border-top: 0; }
/* Reflex auf der Scheibe: eine Haarlinie, kein Verlauf ueber die Flaeche. */
.rail-read::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, 0.17);
}
.rail-sys {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px; flex: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--glas-dim); white-space: nowrap;
  border-right: 1px solid var(--glas-hair);
}
.lamp {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--lampe);
  box-shadow: 0 0 0 3px rgba(244, 248, 250, 0.13);
  animation: lampe 3.4s steps(1, end) infinite;
}
/* Kein Pulsieren, kein Glimmen: die Lampe steht und macht einmal je gut drei
   Sekunden einen harten Schlag. So sieht eine Betriebsanzeige aus. */
@keyframes lampe {
  0%, 84% { opacity: 1; }
  85%, 100% { opacity: 0.32; }
}
.rail-fields { display: flex; flex: 1 1 auto; min-width: 0; }
.rail-f {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 8px 16px 9px;
  border-right: 1px solid var(--glas-hair);
  transition: background var(--t);
}
.rail-f--w { flex: 1.35 1 0; }
.rail-f:last-child { border-right: 0; }
.rail-k {
  display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--glas-dim);
}
.rail-v {
  display: block; height: 20px; line-height: 20px;
  font-size: 14px; font-weight: 600; color: var(--glas-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  transform-origin: top center;
}
.rail-v[data-empty] { color: #6a7883; font-weight: 400; }
.rail-v[data-sig] { color: var(--signal-glas); }
/* Ein Feld faellt ein wie eine Klappe an der Anzeigetafel: eine Drehung, kein
   Nachfedern, kein Flattern. Nur wenn sich der Wert wirklich aendert. */
.rail-v.is-flip { animation: klappe 190ms cubic-bezier(0.3, 0, 0.12, 1) both; }
@keyframes klappe {
  from { transform: rotateX(-88deg); opacity: 0.25; }
  to   { transform: none; opacity: 1; }
}

/* Die Stufe wird nicht daneben angezeigt, sie wird am Feld angezeigt: das
   Feld, an dem die Leitstelle gerade arbeitet, bekommt seinen Balken und eine
   helle Beschriftung. Eine Leiste, zwei Aufgaben, keine doppelten Woerter.
   Die Leitstelle hat vier Felder, die Terminseite drei. */
.rail-f::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: transparent;
}
[data-view="entry"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1),
[data-view="q"]       .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1),
[data-view="verdict"] .rail-fields:not(.rail-fields--3) .rail-f:nth-child(2),
[data-view="form"]    .rail-fields:not(.rail-fields--3) .rail-f:nth-child(3),
[data-view="order"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(4),
[data-view="job"]     .rail-fields--3 .rail-f:nth-child(1),
[data-view="slots"]   .rail-fields--3 .rail-f:nth-child(2),
[data-view="form"]    .rail-fields--3 .rail-f:nth-child(3),
[data-view="order"]   .rail-fields--3 .rail-f:nth-child(3) { background: var(--glas-2); }

[data-view="entry"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1)::after,
[data-view="q"]       .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1)::after,
[data-view="verdict"] .rail-fields:not(.rail-fields--3) .rail-f:nth-child(2)::after,
[data-view="form"]    .rail-fields:not(.rail-fields--3) .rail-f:nth-child(3)::after,
[data-view="order"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(4)::after,
[data-view="job"]     .rail-fields--3 .rail-f:nth-child(1)::after,
[data-view="slots"]   .rail-fields--3 .rail-f:nth-child(2)::after,
[data-view="form"]    .rail-fields--3 .rail-f:nth-child(3)::after,
[data-view="order"]   .rail-fields--3 .rail-f:nth-child(3)::after { background: var(--glas-ink); }

[data-view="entry"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1) .rail-k,
[data-view="q"]       .rail-fields:not(.rail-fields--3) .rail-f:nth-child(1) .rail-k,
[data-view="verdict"] .rail-fields:not(.rail-fields--3) .rail-f:nth-child(2) .rail-k,
[data-view="form"]    .rail-fields:not(.rail-fields--3) .rail-f:nth-child(3) .rail-k,
[data-view="order"]   .rail-fields:not(.rail-fields--3) .rail-f:nth-child(4) .rail-k,
[data-view="job"]     .rail-fields--3 .rail-f:nth-child(1) .rail-k,
[data-view="slots"]   .rail-fields--3 .rail-f:nth-child(2) .rail-k,
[data-view="form"]    .rail-fields--3 .rail-f:nth-child(3) .rail-k,
[data-view="order"]   .rail-fields--3 .rail-f:nth-child(3) .rail-k { color: var(--glas-ink); }

.noscript {
  border: 1px solid var(--signal);
  background: var(--signal-wash);
  padding: var(--g);
  margin-top: var(--g);
  color: var(--ink);
}
.noscript a { color: var(--signal-ink); font-weight: 600; }

.board {
  background: var(--surface);
  border: 1px solid var(--rule);
  min-height: var(--board-h);
  display: flex; flex-direction: column;
}
.board > * { flex: 1 1 auto; }
html[data-ns="order"] #entry,
html[data-ns="order"] .board--termin > .tv { display: none; }

/* ------------------------------------------------- Einstieg: das Feld */

/* Der Einstieg ist der Verteiler selbst. Gehaeuse, Hutschiene, Module,
   darunter der bedruckte Streifen. Eine Schaltflaeche je Bauteil, die das
   Modul und seine Beschriftung zusammenfasst: eine Tabulatorstation, ein
   Ziel fuer die Maus, kein doppelter Bedienweg. */

.entry { display: grid; grid-template-columns: minmax(0, 1fr); }

.lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}
.lbl-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--ink); color: #fff;
  font-size: 11px; letter-spacing: 0.02em;
}
.entry-h {
  font-size: clamp(20px, 1.1rem + 0.9vw, 28px);
  margin: calc(var(--u) * 1.5) 0 0;
  letter-spacing: -0.02em; max-width: 24ch;
}

.feld {
  background: var(--panel);
  padding: 0 var(--g) calc(var(--u) * 4);
  box-shadow: inset 0 1px 0 var(--panel-hi), inset 0 -1px 0 var(--panel-sh);
  border-bottom: 1px solid var(--rule);
}

/* Kopfschild des Kastens: Typenbezeichnung links, Zaehlerstand rechts. Der
   Zaehler laeuft aus der Uhrzeit, nicht aus Zufall, und ist der einfachste
   ehrliche Beleg, dass hier etwas eingeschaltet ist. */
/* Typenschild: geaetztes Blech, kein zweiter schwarzer Balken. Das Zaehlwerk
   ist das Einzige, was hier Glas ist, und zwar ein kleines Fenster darin. */
.feld-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--u);
  margin-inline: calc(var(--g) * -1);
  padding: 9px var(--g);
  background: var(--panel); color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--panel-hi);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
}
.feld-meter {
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
  background: var(--glas); padding: 4px 11px 5px;
  position: relative; flex: none;
}
.feld-meter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, 0.17);
}
.feld-mv {
  font-size: 14px; color: var(--glas-ink); letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.feld-mu { color: var(--glas-dim); text-transform: none; font-size: 10px; letter-spacing: 0.04em; }
.feld-ask { padding-top: calc(var(--u) * 3.5); }
.feld-hint { font-size: 13.5px; color: var(--ink-2); margin-top: var(--u); max-width: 58ch; }
.feld-foot {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: calc(var(--u) * 3); max-width: 68ch;
}

.rowlbl {
  display: flex; align-items: center; gap: 10px;
  margin-top: calc(var(--u) * 3.5);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.rowlbl > span { background: var(--ink); color: #fff; padding: 2px 7px; }
.rowlbl::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }

.mods {
  display: grid; gap: 0;
  margin-top: var(--u);
  border: 1px solid var(--rule);
  background: var(--surface);
}
.mods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mods li { border-right: 1px solid var(--rule-2); display: flex; }
.mods li:last-child { border-right: 0; }

.mod {
  display: flex; flex-direction: column; width: 100%;
  padding: 0; background: none; border: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mod:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Das Feld, in dem das Modul sitzt. Die Hutschiene liegt dahinter und laeuft
   durch alle Module durch, wie im Kasten. Feste Hoehe, damit die Schiene bei
   jeder Spaltenbreite auf derselben Linie liegt. */
.mod-face {
  height: 168px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-lo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Nur Reihe 1 sitzt auf der Hutschiene. Eine Steckdose in der Wand und eine
   Pfuetze vor dem Kasten sitzen auf gar nichts, und so werden sie auch
   gezeichnet: derselbe Rahmen, aber ohne Schiene dahinter. */
.mods--4 .mod-face::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 13px; margin-top: -6.5px;
  background: linear-gradient(#b4bec6, #e2e8ec 42%, #a7b3bc);
}
.modsvg { position: relative; width: 100px; height: 150px; display: block; }

.mod-strip {
  display: block; flex: 1 1 auto;
  padding: 11px 14px 14px;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  transition: background var(--t);
}
.mod-code {
  display: inline-block; margin-bottom: 7px; padding: 2px 6px;
  background: var(--wash); color: var(--ink-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  transition: background var(--t), color var(--t);
}
.mod-code--hot { background: var(--signal); color: #fff; }
.mod-t {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--ink); letter-spacing: -0.01em;
}
.mod-s { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* Modulzeichnung */
.m-body { fill: #fcfdfe; stroke: var(--ink-2); stroke-width: 1.2; transition: stroke var(--t); }
.m-body--fi { fill: #f1f5f7; }
.m-body--blind { fill: #e6ebee; stroke: var(--ink-3); }
.m-term { fill: var(--ink-3); }
.m-term--blind { fill: var(--rule); }
.m-slot { fill: #3d474f; }
.m-round { fill: #fbfcfd; stroke: var(--ink-2); stroke-width: 1.2; }
.m-hole { fill: #2a333a; }
.m-earth { stroke: var(--ink-2); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.m-lev {
  fill: #e7edf0; stroke: var(--ink); stroke-width: 1.2;
  transition: transform 130ms cubic-bezier(0.3, 0, 0.15, 1);
}
.m-test { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1; }
.m-tt { font-family: var(--sans); font-size: 9px; font-weight: 700; fill: var(--ink-2); }
/* Die Aufschrift sitzt auf dem dunkleren Grau des Schienenfeldes und braucht
   dort eine Stufe mehr als der Text auf dem Gehaeuse. */
.m-rate {
  font-family: var(--sans); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--ink-2);
}
.m-etch { stroke: var(--rule); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.m-split { stroke: var(--rule); stroke-width: 1; fill: none; }
.m-drop { fill: var(--ink-3); }
.m-rain { stroke: #8b9aa6; stroke-width: 2; fill: none; stroke-linecap: round; }
.m-heat { stroke: var(--signal); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.m-scorch { fill: #2b3238; opacity: 0.86; }
.m-pool { stroke: #8b9aa6; stroke-width: 3.4; fill: none; stroke-linecap: round; }
.m-smoke { stroke: var(--ink-3); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.m-fault { fill: var(--signal); opacity: 0; transition: opacity var(--t); }

/* Zeigen heisst ausloesen: der Hebel faellt, die Marke oben leuchtet auf, der
   Streifen darunter wird angestrichen. Genau ein Bauteil auf einmal. */
.mod:hover .m-lev, .mod:focus-visible .m-lev, .mod:active .m-lev { transform: translateY(13px); }
.mod:hover .m-fault, .mod:focus-visible .m-fault, .mod:active .m-fault { opacity: 1; }
.mod:hover .m-body, .mod:focus-visible .m-body, .mod:active .m-body { stroke: var(--signal); }
.mod:hover .mod-strip, .mod:focus-visible .mod-strip, .mod:active .mod-strip { background: var(--wash); }
.mod:hover .mod-code, .mod:focus-visible .mod-code, .mod:active .mod-code { background: var(--signal); color: #fff; }

/* ------------------------------------------------------ Einstieg: Spur B */

.trackb {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) 236px;
  gap: var(--g);
  padding: calc(var(--u) * 3.5) var(--g) calc(var(--u) * 4);
  background: var(--surface);
  align-items: start;
}
.trackb-t {
  font-size: clamp(18px, 1rem + 0.5vw, 22px); letter-spacing: -0.02em;
  margin: var(--u) 0 6px;
}
.trackb-p { font-size: 13px; color: var(--ink-3); max-width: 34ch; }
.trackb-go { display: flex; flex-direction: column; align-items: flex-start; }
.entry-list { border-top: 1px solid var(--rule); }
.entry-list > div {
  display: flex; justify-content: space-between; gap: var(--u);
  padding: 7px 0; border-bottom: 1px solid var(--rule-2);
  font-size: 13.5px;
}
.entry-list dt { color: var(--ink); }
.entry-list dd { margin: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nextfree {
  font-size: 13px; font-weight: 600; color: var(--ink);
  min-height: 3.4em; margin-bottom: var(--u);
}

/* ------------------------------------------------------------- Schalter */

.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 20px; min-height: 44px;
  font: inherit; font-weight: 600; font-size: 14.5px;
  border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn:hover { background: #000; }
.btn-ghost { background: none; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--ink); background: var(--wash); }
.btn--b { align-self: flex-start; }

/* ------------------------------------------------------------- Befragung */

.qv { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.qv-main { padding: calc(var(--u) * 3.5) var(--g); }
.qh {
  font-size: clamp(21px, 1.1rem + 1vw, 30px);
  letter-spacing: -0.022em;
  margin: calc(var(--u) * 1.5) 0 var(--u);
  max-width: 24ch;
}
.qhint { font-size: 13.5px; color: var(--ink-3); max-width: 58ch; margin-bottom: calc(var(--u) * 2.5); }

.optlist { border-top: 1px solid var(--rule); max-width: 640px; }
.optb {
  display: flex; align-items: center; justify-content: space-between; gap: var(--u);
  width: 100%; text-align: left;
  padding: 15px 6px 15px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: background var(--t);
}
.optb:hover { background: var(--wash); }
/* Der Text rueckt nach, nicht die Schaltflaeche: eine Verschiebung statt einer
   Innenabstands-Animation, damit kein Layout neu gerechnet wird. */
.optb-t {
  font-size: 15.5px; font-weight: 500;
  transition: transform var(--t);
}
.optb:hover .optb-t, .optb:focus-visible .optb-t { transform: translateX(6px); }
.optb-go { color: var(--ink-3); flex: none; }
.optb-go svg { display: block; width: 20px; height: 12px; }
.optb:hover .optb-go { color: var(--ink); }

.qtext { max-width: 640px; }
.qtext textarea {
  width: 100%; padding: 12px; font: inherit; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  resize: vertical;
}
.qtext textarea:focus-visible { border-color: var(--ink); }
.qtext .btn { margin-top: var(--u); }

.qv-nav { display: flex; gap: var(--u); margin-top: calc(var(--u) * 3); flex-wrap: wrap; }

.proto {
  padding: calc(var(--u) * 3.5) calc(var(--g) * 0.7);
  border-left: 1px solid var(--rule);
  background: var(--wash);
  font-size: 12px;
}
.pr-list { margin-top: var(--u); }
.pr-list li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 7px 0; border-bottom: 1px solid var(--rule-2);
}
.pr-t { grid-column: 1; grid-row: 1 / span 2; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pr-q { grid-column: 2; grid-row: 1; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 600; }
.pr-a { grid-column: 2; grid-row: 2; color: var(--ink); font-weight: 500; }
.pr-note { margin-top: var(--u); color: var(--ink-3); font-size: 11.5px; }

/* ----------------------------------------------------------- Notrufkarte */

.alarm {
  background: var(--signal);
  color: #fff;
  padding: calc(var(--u) * 3) var(--g);
  margin: 0 0 calc(var(--u) * 3);
}
.alarm--slim { margin-bottom: calc(var(--u) * 3); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
.alarm-h {
  font-size: clamp(19px, 1rem + 0.8vw, 25px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  max-width: 26ch;
}
.alarm-nums { display: flex; gap: var(--u); margin: calc(var(--u) * 2) 0; flex-wrap: wrap; }
.alarm-num {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 18px; min-width: 118px;
  background: #fff; color: var(--signal);
  text-decoration: none; border-radius: 2px;
  transition: transform var(--t);
}
.alarm-num:hover { transform: translateY(-2px); }
.alarm-n { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.alarm-l { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.alarm-num.is-first { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
.alarm-s { font-size: 13.5px; max-width: 62ch; color: #fff0ec; }

/* ---------------------------------------------------------- Einstufung */

.verdict { padding: calc(var(--u) * 3.5) 0 calc(var(--u) * 4); }
.verdict > *:not(.alarm) { padding-inline: var(--g); }
.verdict .alarm { margin-top: calc(var(--u) * -3.5); }

.v-head { display: flex; align-items: flex-start; gap: var(--g); }
.v-code {
  font-size: clamp(58px, 8vw, 104px);
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.82;
  color: var(--ink); flex: none;
}
.verdict[data-p="P1"] .v-code { color: var(--signal); }
.verdict[data-p="NETZ"] .v-code { font-size: clamp(30px, 3.4vw, 46px); color: var(--ink-3); }
.v-h { font-size: clamp(22px, 1.2rem + 1vw, 32px); letter-spacing: -0.025em; margin: 6px 0 var(--u); }
.v-reason { font-size: 15px; color: var(--ink); max-width: 56ch; }
.v-lead { font-size: 13.5px; color: var(--ink-3); max-width: 56ch; margin-top: 6px; }

.v-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--g);
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--rule);
}
.v-eta { border-left: 1px solid var(--rule); padding-left: var(--g); }
.eta-when {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: var(--u);
}
.eta-note { font-size: 12.5px; color: var(--ink-3); max-width: 42ch; margin-top: var(--u); }

/* ------------------------------------------------- Glasfenster und Skala */

/* Das Anfahrtsfenster ist kein Satz, sondern eine Anzeige: dunkle Scheibe,
   tabellarische Ziffern, darunter eine geteilte Skala mit Zeigern. Dieselbe
   Skala steht spaeter im Auftrag. Ein Geraet, zweimal abgelesen. */
.gw {
  background: var(--glas); color: var(--glas-ink);
  padding: 13px 16px 11px;
  margin-top: var(--u);
  position: relative;
}
.gw::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, 0.17);
}
.gw-k {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--glas-dim);
}
.eta-time {
  display: flex; align-items: baseline; gap: 10px;
  font-size: clamp(26px, 2.2vw, 36px); font-weight: 700; letter-spacing: -0.03em;
  color: var(--glas-ink); margin: 2px 0 0; line-height: 1.08;
}
.eta-time span { font-size: 13px; font-weight: 400; color: var(--glas-dim); letter-spacing: 0; }
.gw-key {
  display: flex; justify-content: space-between; gap: var(--u); flex-wrap: wrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--glas-dim); margin-top: 3px;
}
.gw-key b { color: var(--glas-ink); font-weight: 600; }

.sc { width: 100%; height: 40px; display: block; margin-top: 9px; }
.sc-rail { stroke: #4d5a64; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-t { stroke: #38434c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-t--maj { stroke: #6a7883; }
.sc-band { fill: var(--glas-ink); opacity: 0.15; }
.sc-bandline { stroke: var(--glas-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sc-disp { stroke: #6a7883; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.sc-nowline { stroke: var(--signal-glas); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sc-nowcap { fill: var(--signal-glas); }
/* Der Zeiger wandert, er springt nicht. Nur transform, 15 Sekunden Takt. */
.sc-now { transition: transform 900ms linear; }

.mlist { margin-top: var(--u); border-top: 1px solid var(--rule-2); }
.mi { border-bottom: 1px solid var(--rule-2); }
.mi label {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px; align-items: start;
  padding: 11px 0; cursor: pointer;
  font-size: 14px; color: var(--ink);
}
.mi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mi-box {
  width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--ink-3); border-radius: 2px; background: var(--surface);
  position: relative;
}
.mi input:checked + .mi-box { background: var(--ink); border-color: var(--ink); }
.mi input:checked + .mi-box::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.mi input:focus-visible + .mi-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.mi.is-done .mi-t { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.mnote { font-size: 11.5px; color: var(--ink-3); margin-top: var(--u); }

.v-cta { display: flex; gap: var(--u); flex-wrap: wrap; margin-top: calc(var(--u) * 4); }

/* -------------------------------------------------------------- Formular */

.fv { padding: calc(var(--u) * 3.5) var(--g) calc(var(--u) * 4); }
.fgrid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--u) * 2) var(--g);
  margin-top: calc(var(--u) * 2);
  max-width: 780px;
}
.fld { grid-column: span 3; display: flex; flex-direction: column; }
.fld--wide { grid-column: span 6; }
/* Name | Telefon — dann Straße | PLZ | Ort in einer Zeile, 3 + 1 + 2 = 6. */
.fgrid .fld:nth-child(4) { grid-column: span 1; }
.fgrid .fld:nth-child(5) { grid-column: span 2; }
.fld label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.fld-h { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 6px; min-height: 1em; }
.fld input {
  font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  width: 100%;
}
.fld input:focus-visible { border-color: var(--ink); }
.fld input[aria-invalid="true"] { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.fld-e { font-size: 12px; color: var(--signal-ink); font-weight: 500; min-height: 1.5em; margin-top: 3px; }
.fv-fine { font-size: 11.5px; color: var(--ink-3); margin-top: calc(var(--u) * 2); max-width: 70ch; }

/* --------------------------------------------------------------- Auftrag */

.order { padding: calc(var(--u) * 3.5) var(--g) calc(var(--u) * 4); min-height: 100%; display: flex; flex-direction: column; }
.o-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--g); align-items: start;
  padding-bottom: calc(var(--u) * 3); border-bottom: 1px solid var(--rule);
}
.o-nrv {
  display: inline-block; margin-top: 6px;
  padding: 7px 14px 8px;
  background: var(--glas); color: var(--glas-ink);
  font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; letter-spacing: 0.01em;
  position: relative;
}
.o-nrv::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, 0.17);
}
.o-statv {
  font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; color: var(--ink);
  margin-top: 4px; letter-spacing: -0.02em;
  transform-origin: top left;
}
.o-statv.is-flip { animation: klappe 190ms cubic-bezier(0.3, 0, 0.12, 1) both; }
.o-statn { font-size: 12.5px; color: var(--ink-3); }
.o-prio {
  font-size: clamp(40px, 5vw, 72px); font-weight: 700; letter-spacing: -0.05em;
  line-height: 0.8; color: var(--ink);
}
.order[data-p="P1"] .o-prio { color: var(--signal); }
.order[data-cancelled] .o-prio { color: var(--rule); }

.o-tl { padding-block: calc(var(--u) * 3); border-bottom: 1px solid var(--rule); }
.o-tl .gw { margin-top: var(--u); }

.stps { display: flex; gap: 0; margin-top: calc(var(--u) * 2); flex-wrap: wrap; }
.stp {
  flex: 1 1 140px; padding: 10px 12px 10px 0;
  border-top: 2px solid var(--rule);
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 8px;
  font-size: 13px;
}
.stp-dot {
  grid-column: 1; grid-row: 1 / span 2;
  width: 9px; height: 9px; margin-top: 5px;
  border: 1px solid var(--ink-3); border-radius: 50%;
}
.stp-l { grid-column: 2; grid-row: 1; }
.stp-t { grid-column: 2; grid-row: 2; }
.stp.is-done { border-top-color: var(--ink); }
.stp.is-done .stp-dot { background: var(--ink); border-color: var(--ink); }
.stp.is-now .stp-l { font-weight: 700; }
.stp-l { color: var(--ink-3); }
.stp.is-done .stp-l { color: var(--ink); }
.stp-t { color: var(--ink-3); font-size: 12px; }

.o-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--g);
  padding-block: calc(var(--u) * 3);
  border-bottom: 1px solid var(--rule);
}
.o-preis { border-left: 1px solid var(--rule); padding-left: var(--g); }
.o-mass { padding-block: calc(var(--u) * 3); border-bottom: 1px solid var(--rule); }
.o-fine { font-size: 11.5px; color: var(--ink-3); margin-top: auto; padding-top: calc(var(--u) * 3); max-width: 76ch; }

.dtab { width: 100%; border-collapse: collapse; margin-top: var(--u); font-size: 13.5px; }
.dtab th, .dtab td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.dtab th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); width: 34%; padding-right: var(--u);
}
.dtab td { color: var(--ink); }

.ptab { width: 100%; border-collapse: collapse; margin-top: var(--u); font-size: 13.5px; }
.ptab th, .ptab td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.ptab th { font-weight: 500; color: var(--ink); padding-right: var(--u); }
.ptab th span { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.ptab .num { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 500; }
.ptab-sum th, .ptab-sum td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 11px; }
.ptab-sum th { font-weight: 700; }
.ptab-sum .num { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.02em; }
.ptab-sum .dash { display: inline-block; padding-inline: 6px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pfine { font-size: 11.5px; color: var(--ink-3); margin-top: var(--u); max-width: 60ch; }
.tpreis { margin-top: calc(var(--u) * 3); max-width: 520px; }

/* --------------------------------------------------------------- Termine */

.tv { padding: calc(var(--u) * 3.5) var(--g) calc(var(--u) * 4); }
.carry {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  background: var(--wash);
  padding: 12px 14px; font-size: 13.5px; color: var(--ink);
  margin-bottom: calc(var(--u) * 3);
}
.joblist { border-top: 1px solid var(--rule); margin-top: calc(var(--u) * 2); }
.jobb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 104px 22px;
  align-items: center; column-gap: var(--u);
  width: 100%; text-align: left;
  padding: 13px 6px 13px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--t);
}
.jobb:hover { background: var(--wash); }
.jobb-t, .jobb-s { transition: transform var(--t); }
.jobb:hover .jobb-t, .jobb:hover .jobb-s,
.jobb:focus-visible .jobb-t, .jobb:focus-visible .jobb-s { transform: translateX(6px); }
.jobb-t  { grid-column: 1; grid-row: 1; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.jobb-s  { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--ink-3); }
.jobb-m  { grid-column: 2; grid-row: 1 / span 2; }
.jobb-p  { grid-column: 3; grid-row: 1 / span 2; color: var(--ink); font-weight: 600; }
.jobb-go { grid-column: 4; grid-row: 1 / span 2; color: var(--ink-3); }
.jobb-m, .jobb-p { text-align: right; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
.jobb-m b { font-weight: 600; color: var(--ink-2); }
.jobb-p { color: var(--ink); font-weight: 600; }
.jobb-go svg { display: block; width: 20px; height: 12px; }
.tv-fine { font-size: 12.5px; color: var(--ink-3); margin-top: calc(var(--u) * 3); }
.tv-fine a { color: var(--ink); font-weight: 600; }

.cal { margin-top: calc(var(--u) * 2); }
.dayrail {
  display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
}
.dayb {
  flex: 1 0 78px; min-width: 78px;
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 10px; background: var(--surface); border: 0;
  border-right: 1px solid var(--rule-2);
  font: inherit; color: var(--ink-3); cursor: pointer;
  transition: background var(--t);
}
.dayb:last-child { border-right: 0; }
.dayb:hover:not(:disabled) { background: var(--wash); }
.dayb-w { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dayb-d { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.dayb-f { font-size: 11px; }
.dayb:disabled { background: var(--wash); color: #a8b0b7; cursor: not-allowed; }
.dayb:disabled .dayb-d { color: #a8b0b7; }
.dayb.is-on { background: var(--ink); color: #c3ccd3; }
.dayb.is-on .dayb-d { color: #fff; }

.callbl {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); margin: calc(var(--u) * 2.5) 0 var(--u);
}
.slotgrid { display: flex; flex-wrap: wrap; gap: 6px; min-height: 96px; }
.slotb {
  padding: 10px 14px; min-height: 44px; min-width: 76px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.slotb:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.slotb.is-taken {
  color: #a8b0b7; background: var(--wash); cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.slot-none { font-size: 13.5px; color: var(--ink-3); padding: 12px 0; }

/* ============================================================== Abschnitte */

.sec {
  padding-block: calc(var(--u) * 8);
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--u) * 6);
}
.sec-lbl { margin-bottom: var(--u); }
.sec-h {
  font-size: clamp(22px, 1.2rem + 1.1vw, 33px);
  letter-spacing: -0.025em;
  margin-bottom: calc(var(--u) * 2);
  max-width: 22ch;
}
.sec-p { font-size: 15px; max-width: 62ch; margin-bottom: var(--u); }
.sec-p--tight { font-size: 13px; color: var(--ink-3); margin-top: calc(var(--u) * 2); }
.sec-p a, .studio-p a { color: var(--ink); font-weight: 600; }

@media (min-width: 1000px) {
  .sec { display: grid; grid-template-columns: 176px minmax(0, 1fr); column-gap: var(--g); }
  .sec > * { grid-column: 2; }
  .sec > .sec-lbl { grid-column: 1; grid-row: 1; margin: 6px 0 0; }
  .sec > .sec-h { grid-row: 1; }
}

/* -------------------------------------------------------------- Verteiler */

.vt {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--g); margin-top: calc(var(--u) * 3);
  /* Ohne das zieht die längere Legendenspalte den Zeichnungsrahmen auf ihre
     Höhe und darunter steht ein leeres weißes Feld. */
  align-items: start;
}
.vt-draw { border: 1px solid var(--rule); background: var(--surface); padding: var(--u); }
.vt-svg { display: block; width: 100%; height: auto; }
.vt-case { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.vt-hair { stroke: var(--rule); stroke-width: 1; }
.vt-rail { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 3; }
.vt-mod { fill: #fbfcfd; stroke: var(--ink-2); stroke-width: 1.2; }
.vt-mod--fi { fill: var(--wash); }
.vt-mod--off { fill: var(--signal-wash); stroke: var(--signal); }
.vt-win { fill: var(--wash); stroke: var(--ink-3); stroke-width: 1; }
.vt-klemm { fill: #fbfcfd; stroke: var(--ink-2); stroke-width: 1.2; }
.vt-test { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1; }
.vt-lever { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.vt-lever--off { stroke: var(--signal); }
.vt-pin { fill: var(--ink); }
.vt-cap, .vt-lab, .vt-num, .vt-t {
  font-family: var(--sans); fill: var(--ink-3);
  font-size: 9px; font-weight: 600; letter-spacing: 0.09em;
}
.vt-num { font-size: 12px; letter-spacing: 0.12em; fill: var(--ink); }
.vt-t { font-size: 9px; fill: var(--ink-2); letter-spacing: 0; }
.vt-lab--off { fill: var(--signal-ink); }
.vt-leader { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vt-svg [data-part] { transition: opacity var(--t); }
.vt-svg.is-live [data-part]:not(.is-lit) { opacity: 0.7; }
.vt-svg [data-part].is-lit .vt-mod,
.vt-svg [data-part].is-lit .vt-klemm,
.vt-svg [data-part].is-lit .vt-win { stroke-width: 2; }
.vt-flag {
  font-size: 11.5px; color: var(--ink-3); margin-top: 6px;
  display: flex; align-items: center; gap: 7px;
}
.vt-flagd { width: 9px; height: 9px; background: var(--signal); flex: none; }

.vt-side { display: flex; flex-direction: column; }
.vt-keys { margin: var(--u) 0 calc(var(--u) * 2); border-top: 1px solid var(--rule); }
.vt-key {
  display: block; width: 100%; text-align: left;
  padding: 9px 4px; background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-3); cursor: pointer;
  transition: color var(--t), transform var(--t), box-shadow var(--t);
  padding-left: 12px;
}
.vt-key:hover { color: var(--ink); transform: translateX(5px); }
.vt-key.is-on { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 var(--ink); }
.vt-cap-box { border-top: 1px solid var(--rule); padding-top: var(--u); min-height: 190px; }
.vt-cap-t { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.vt-cap-d { font-size: 13px; color: var(--ink-2); }
.vt-warn {
  margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 2);
  font-size: 12.5px; color: var(--signal-ink); font-weight: 500;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------- Tabellen */

.atab { width: 100%; border-collapse: collapse; font-size: 14px; }
.atab caption { text-align: left; }
.atab th, .atab td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.atab thead th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--ink);
}
.atab tbody th { font-weight: 600; color: var(--ink); width: 26%; padding-right: var(--g); }
.atab tbody th span { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.atab td { color: var(--ink-2); }
.atab td.num { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 600; width: 15%; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--g); }

.fgrid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--g); }
.fnot { border-left: 1px solid var(--rule); padding-left: var(--g); }
.flist { margin-top: var(--u); }
.flist li {
  padding: 9px 0 9px 20px; border-bottom: 1px solid var(--rule-2);
  font-size: 13.5px; color: var(--ink-2); position: relative;
}
.flist li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 11px; height: 1px; background: var(--ink-3);
}

/* --------------------------------------------------------------- Studio */

.studio {
  border-top: 2px solid var(--ink);
  margin-top: calc(var(--u) * 6);
  padding-block: calc(var(--u) * 7);
}
.studio-h { font-size: clamp(20px, 1.1rem + 1vw, 28px); letter-spacing: -0.025em; margin: var(--u) 0; max-width: 24ch; }
.studio-p { font-size: 14.5px; max-width: 64ch; }
.studio-cta { display: flex; gap: var(--u); flex-wrap: wrap; margin-top: calc(var(--u) * 3); }

.foot { border-top: 1px solid var(--rule); background: var(--surface); }
.foot-in {
  display: flex; flex-wrap: wrap; gap: var(--u) var(--g);
  padding-block: calc(var(--u) * 3);
  font-size: 12.5px; color: var(--ink-3);
}
.foot-brand { color: var(--ink-2); }
.foot-brand a, .foot-emerg a { color: var(--ink); font-weight: 600; }
.foot-emerg a { color: var(--signal-ink); }
.foot-wdm { margin-left: auto; }
.foot-wdm a { color: var(--ink-2); }
/* Der Studiosatz nimmt im Fuß eine eigene Zeile: er ist der einzige Satz dort,
   der von einer erreichbaren Nummer handelt, und darf nicht neben der
   Markenzeile des erfundenen Betriebs stehen. */
.foot-num {
  flex: 1 1 100%; order: 1;
  padding-top: var(--u);
  border-top: 1px solid var(--rule-2);
}

/* ================================================================== Schmal */

@media (max-width: 1080px) {
  .qv { grid-template-columns: minmax(0, 1fr); }
  .proto { border-left: 0; border-top: 1px solid var(--rule); }
  .vt { grid-template-columns: minmax(0, 1fr); }
  .vt-cap-box { min-height: 150px; }
}

/* Unter 1100 px passen keine vier Beschriftungen nebeneinander: der Kasten
   kippt in die Senkrechte. Das Modul sitzt links auf der Schiene, der
   bedruckte Streifen rechts daneben. Es bleibt derselbe Verteiler, nur so
   herum, wie man ihn am Telefon beschreibt. */
@media (max-width: 1100px) {
  .mods--4, .mods--3 { grid-template-columns: minmax(0, 1fr); }
  .mods li { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .mods li:last-child { border-bottom: 0; }
  .mod { flex-direction: row; align-items: stretch; }
  .mod-face {
    height: auto; width: 104px; flex: none; min-height: 132px;
    box-shadow: inset -1px 0 0 var(--panel-sh), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .mods--4 .mod-face::before {
    left: 50%; right: auto; top: 0; bottom: 0; height: auto;
    width: 12px; margin: 0 0 0 -6px;
    background: linear-gradient(90deg, #b4bec6, #e2e8ec 42%, #a7b3bc);
  }
  .modsvg { width: 62px; height: 93px; }
  .mod-strip { border-top: 0; padding: 14px 18px; align-self: center; }
  .mod-code { margin-bottom: 5px; }
  .trackb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trackb-h { grid-column: 1 / -1; }
  .rail-f--w { flex: 1 1 0; }
}

@media (max-width: 900px) {
  :root { --board-h: 720px; }
  html[data-ns="order"] { --board-h: 1000px; }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .v-grid, .o-grid { grid-template-columns: minmax(0, 1fr); }
  .v-eta, .o-preis { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 2); }
  .fgrid2 { grid-template-columns: minmax(0, 1fr); }
  .fnot { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 2); }
  .o-head { grid-template-columns: minmax(0, 1fr) auto; }
  .o-head .o-nr     { grid-column: 1; grid-row: 1; }
  .o-head .o-status { grid-column: 1; grid-row: 2; }
  .o-head .o-prio   { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 640px) {
  :root { --board-h: 780px; }
  html[data-ns="order"] { --board-h: 1220px; }
  body { font-size: 15px; }
  .bar-in { gap: 12px; }
  .mark { flex: 1 1 100%; margin-right: 0; }
  .bar-live { font-size: 11px; margin-left: auto; }
  /* Schmal steht die Bezeichnung über dem Satz statt daneben, sonst bleibt für
     den Satz eine Spalte von vier Zeichen. */
  .plate { gap: 6px 10px; padding: 8px 11px; }
  .plate-k { border-right: 0; padding-right: 0; flex-basis: 100%; }
  .plate-t { flex-basis: 100%; }
  .stagerail li { font-size: 10px; padding: 7px 8px; min-width: 0; letter-spacing: 0.06em; }
  /* Das Anzeigefeld wird zweizeilig, statt die Felder auf Buchstabenbreite
     zusammenzuquetschen. Betrieb und Uhr oben, die vier Werte darunter. */
  .rail-read { display: block; }
  .rail-sys { border-right: 0; border-bottom: 1px solid var(--glas-hair); padding: 8px 14px; }
  .rail-fields { flex-wrap: wrap; }
  .rail-f { flex: 1 1 44%; padding: 7px 14px; }
  .rail-f:nth-child(2n) { border-right: 0; }
  .rail-f:nth-child(-n+2) { border-bottom: 1px solid var(--glas-hair); }
  .feld-head { flex-wrap: wrap; row-gap: 4px; font-size: 10px; }
  .mod-face { width: 94px; min-height: 118px; }
  .modsvg { width: 68px; height: 102px; }
  .mod-strip { padding: 12px 14px; }
  .trackb { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 2); }
  .jobb { grid-template-columns: minmax(0, 1fr) 88px; }
  .jobb-t { grid-column: 1; grid-row: 1; }
  .jobb-s { grid-column: 1; grid-row: 2; }
  .jobb-m { grid-column: 2; grid-row: 1; }
  .jobb-p { grid-column: 2; grid-row: 2; }
  .jobb-go { display: none; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fld, .fgrid .fld:nth-child(4), .fgrid .fld:nth-child(5), .fld--wide { grid-column: span 2; }
  .fgrid .fld:nth-child(4) { grid-column: span 1; }
  .alarm-num { flex: 1 1 130px; min-width: 0; }
  .stps { display: block; }
  .stp { border-top: 1px solid var(--rule); padding-right: 0; }
  .stp.is-done { border-top-width: 2px; }
  .foot-wdm { margin-left: 0; }
  .o-fine, .pfine, .fv-fine { max-width: none; }
}

/* Sehr schmal: die Tafel darf nicht seitlich hinauslaufen. */
@media (max-width: 400px) {
  .feld, .trackb, .qv-main, .verdict > *:not(.alarm), .fv, .order, .tv, .alarm {
    padding-inline: 16px;
  }
  .feld-head { margin-inline: -16px; padding-inline: 16px; }
  .mod-face { width: 72px; }
  .modsvg { width: 46px; height: 69px; }
  .mod-strip { padding: 11px 12px; }
  .o-head { grid-template-columns: minmax(0, 1fr); }
  .o-head .o-nr, .o-head .o-status, .o-head .o-prio { grid-column: 1; grid-row: auto; }
}

/* ========================================================= Bewegung aus */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Ohne Bewegung bleibt jede Aussage stehen: der Hebel faellt sofort statt zu
     fallen, die Klappe erscheint fertig, der Zeiger steht an seiner Stelle,
     die Lampe leuchtet durch. Nichts davon war Schmuck, deshalb geht auch
     nichts verloren. */
  .lamp { animation: none; opacity: 1; }
  .rail-v.is-flip, .o-statv.is-flip { animation: none; }
  .optb:hover .optb-t, .optb:focus-visible .optb-t,
  .jobb:hover .jobb-t, .jobb:hover .jobb-s,
  .jobb:focus-visible .jobb-t, .jobb:focus-visible .jobb-s { transform: none; }
  .vt-key:hover { transform: none; }
  .alarm-num:hover { transform: none; }
}

/* ============================================================== Drucken */

@media print {
  /* Das Typenschild fällt weg, weil derselbe Satz im Fuß mitgedruckt wird.
     Der Auftragsausdruck behält ihn: dort ist er die einzige Stelle, an der
     steht, wen man wirklich erreicht. */
  .demo-note, .rail, .studio, .vt-side, .qv-nav, .v-cta, .plate-in { display: none; }
  .gw, .o-nrv { background: #fff; color: #000; }
  .gw-k, .gw-key, .eta-time span { color: #333; }
  body { background: #fff; font-size: 11pt; }
  .board { border: 1px solid #000; min-height: 0; }
  .order { min-height: 0; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ── SPRACHMENÜ ────────────────────────────────────────────────────────────
   js/i18n.js setzt das Menü erst nach DOMContentLoaded in [data-lang-host].
   Der Host hält den Platz vorher frei — ohne ihn rutscht die Kopfzeile beim
   Einsetzen (CLS). Heller Kopf: Waschfläche mit Lineal-Kante, kein Kontrast-
   sprung neben der Leitstellen-Zeile. */
.lang-host { display: inline-flex; align-items: center; min-width: 3.4em; min-height: 30px; margin-left: auto; }
.bar .wdm-lang {
  --wdm-lang-bg: var(--wash);
  --wdm-lang-fg: var(--ink);
  --wdm-lang-border: var(--rule);
  --wdm-lang-font: var(--sans);
}