/* Anatomie-Layout — One-Fits-All (D-003/D-004), Cockpit (D-020).
   Zonen: Header · Side-Panel Links (Stepper) · Main Area · Action-Row · Side-Panel Rechts (Meta) · Footer */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  background: var(--surface-grey);
  -webkit-font-smoothing: antialiased;
}
#app { height: 100vh; }

/* App-Shell: Header (immer sichtbar, Figma 217:2637) + Content darunter */
.shell { height: 100vh; display: flex; flex-direction: column; background: var(--surface-grey); }
.shell > main, .shell > .cockpit { flex: 1; min-height: 0; }

.cockpit {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: var(--rail-left-w) 1fr var(--rail-right-w);
  grid-template-areas: "left main right";
  background: var(--surface-grey);
}
/* „Menüs"-Toggle aus: Panels links/rechts komplett entfernt → Main bekommt die volle Breite */
.cockpit--no-menus {
  grid-template-columns: 1fr;
  grid-template-areas: "main";
}

/* ---------- Header (Figma 217:2637 — Status running/standby/loggedout) ---------- */
.c-header { flex: 0 0 var(--header-h); height: var(--header-h); display: flex; align-items: center;
  gap: var(--sp-m); padding: 0 var(--sp-m) 0 var(--sp-xxs);
  background: var(--surface); border-bottom: 1px solid var(--divider); }
.c-header__left { display: flex; align-items: center; gap: var(--sp-l); flex: 1; min-width: 0; }
.c-header[data-status="loggedout"] .c-header__left { padding-left: var(--sp-l); }
.c-header__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-m); flex: 1; min-width: 0; }
.burger { width: 60px; height: 60px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--text-primary); border-radius: var(--radius-s); }
.burger:hover { background: var(--selected); }
.c-header__logo { height: var(--logo-h, 28px); width: auto; display: block; flex: 0 0 auto; }
.c-header__title { font-family: var(--font-header); font-size: 28px; letter-spacing: .08px; white-space: nowrap; flex: 0 0 auto; }
.c-header__sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--divider); }
.c-header__case { font-family: var(--font-header); font-size: 18px; letter-spacing: .08px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-header__user { color: var(--text-secondary); font-size: 18px; letter-spacing: .08px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn--door { color: var(--text-primary); width: 40px; height: 40px; }

/* segmented control / ToggleButtonGroup (Overview / Sequence) — Figma 218:2430 */
/* Umschaltung Übersicht/Sequenz — groß & zentriert mit Text (Figma 217:2638) */
.seg { display: inline-flex; align-items: center; height: 52px; background: var(--selected);
  border-radius: var(--radius-s); padding: 4px; gap: var(--sp-xxs); flex: 0 0 auto; }
.seg button { border: 0; background: transparent; height: 100%; padding: 4px var(--sp-1_5);
  border-radius: var(--radius-s); cursor: pointer; font: inherit; font-family: var(--font-header);
  font-size: var(--fs-h5); font-weight: 500; color: var(--text-secondary);
  display: inline-flex; gap: var(--sp-xs); align-items: center; justify-content: center; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); box-shadow: var(--elevation-1); }

.toggle { display: inline-flex; align-items: center; gap: var(--sp-xs); color: var(--text-secondary); font-size: 20px; }
.switch { width: 38px; height: 20px; border-radius: var(--radius-full); background: var(--outline);
  position: relative; border: 0; cursor: pointer; padding: 0; }
.switch[aria-checked="true"] { background: var(--claas-lime); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:#ffffff; border-radius:var(--radius-full); transition: left .15s; }
.switch[aria-checked="true"]::after { left: 20px; }

.icon-btn { border:0; background:transparent; cursor:pointer; color:var(--text-secondary);
  width:36px; height:36px; border-radius:var(--radius-s); display:grid; place-items:center; font-size:18px; }
.icon-btn:hover { background: var(--selected); }

/* ---------- Left rail: Sequence Panel — Drill-Down (Figma 365:6748 / 367:7149 / 367:7231) ---------- */
.c-left { grid-area: left; background: var(--surface); border-right: 1px solid var(--border-faint);
  overflow: hidden; padding: var(--sp-l) var(--sp-m); }
.seq { display:flex; flex-direction:column; min-height:0; }
/* Kopf: Testfall + laufende Zeit */
.seq-top { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-xs); margin-bottom: var(--sp-m); flex:0 0 auto; }
.seq-top__name { font-family: var(--font-header); font-size: 18px; letter-spacing:.08px; color: var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seq-top__time { font-family: var(--font-header); font-size: 18px; letter-spacing:.08px; color: var(--text-primary);
  font-variant-numeric: tabular-nums; flex:0 0 auto; }
/* Flash-Modus: Slot-Umschalter bleibt fix oben, die Schrittliste (seq-tree) scrollt darunter. */
.seq-pills { flex:0 0 auto; display:flex; flex-direction:column; gap: 6px; margin-bottom: 6px; }

/* Ahnen-Pfad-Pills mit ‹ ›-Geschwister-Navigation */
.seq-pill { display:flex; align-items:center; gap: var(--sp-xs); width:100%; min-height:48px; border:0; border-radius:0;
  cursor:pointer; text-align:left; font:inherit; padding: 0 var(--sp-xs); color: var(--text-primary); }
.seq-pill__lbl { flex:1; min-width:0; font-family: var(--font-header); font-weight:400; font-size: 18px; line-height: 26px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seq-pill__chev { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; color: var(--text-primary); border-radius: var(--radius-s); }
.seq-pill__chev:hover { background: rgba(0,0,0,0.08); }
.seq-pill__chev--hidden { visibility:hidden; pointer-events:none; }

/* (Alte flache Flash-Liste .seq-item / .seq-ring / .seq-empty entfernt — der Flash-Modus nutzt jetzt
   dieselbe seq-node/seq-dot-Knoten-Optik wie der Standard-Baum, s. StepperList Flash-Zweig, D-038.) */

/* Aktives Formularfeld (Eingabe/Dropdown/Textarea/Suche): grüner Rand, solange fokussiert/offen. */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: 2px solid var(--claas-lime);
  outline-offset: -1px;
  border-color: var(--claas-lime);
}

/* ---------- „Problem melden": simuliertes Mailfenster ---------- */
.mailmodal__backdrop { position:fixed; inset:0; background: rgba(0,0,0,0.45); display:grid; place-items:center; z-index:1000; }
.mailmodal { width:min(640px, 92vw); background: var(--surface); border-radius: var(--radius-m, 8px); box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  overflow:hidden; display:flex; flex-direction:column; }
.mailmodal__bar { display:flex; align-items:center; justify-content:space-between; background:#212121; color:#fff; padding: 12px 16px; }
.mailmodal__title { font-family: var(--font-header); font-size:18px; font-weight:700; }
.mailmodal__x { border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer; line-height:1; padding:4px 8px; border-radius: var(--radius-s); }
.mailmodal__x:hover { background: rgba(255,255,255,0.15); }
.mailmodal__row { display:flex; align-items:center; gap: var(--sp-m); padding: 12px 20px; border-bottom:1px solid var(--divider); }
.mailmodal__lbl { flex:0 0 70px; color: var(--text-secondary); font-size:16px; }
.mailmodal__to { font-size:18px; color: var(--text-primary); }
.mailmodal__subj { flex:1; border:0; font:inherit; font-size:18px; color: var(--text-primary); background:transparent; outline:none; }
.mailmodal__body { border:0; resize:vertical; font:inherit; font-size:18px; line-height:26px; color: var(--text-primary);
  padding: 16px 20px; min-height:140px; outline:none; }
.mailmodal__actions { display:flex; justify-content:flex-end; gap: var(--sp-m); padding: 16px 20px; border-top:1px solid var(--divider); }
.mailmodal__sent { display:flex; flex-direction:column; align-items:center; gap: var(--sp-m); padding: 48px 20px; text-align:center; font-size:20px; color: var(--text-primary); }

/* ---------- Sequencer-Baum (Standard-Modus) ---------- */
.seq-tree { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.seq-node { display:flex; align-items:center; gap: 10px; width:100%; min-height:40px; border:0; background:transparent;
  cursor:pointer; text-align:left; font:inherit; font-size:18px; line-height:24px; color: var(--text-primary);
  padding: 4px 8px; border-radius: var(--radius-s); }
.seq-node:hover { background: rgba(107,118,19,0.06); }
.seq-node--current { background: rgba(107,118,19,0.16); }
.seq-node--module { font-weight:700; }   /* Module/Submodule fett, einzelne Test-Steps regular */
.seq-node--irrelevant { color: #8f8f8f; cursor:default; }
.seq-node--irrelevant:hover { background:transparent; }
.seq-node--readonly { cursor:default; }   /* Flash-Schritte: reine Status-Anzeige, nicht navigierbar */
.seq-node--readonly:not(.seq-node--current):hover { background:transparent; }
.seq-chev { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; color: var(--text-secondary); border-radius: var(--radius-s); }
.seq-chev:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
.seq-chev svg { transition: transform .15s ease; }
.seq-chev--open svg { transform: rotate(90deg); }
.seq-chev--spacer { visibility:hidden; pointer-events:none; }
/* Status-Punkt: grün (i.O.) · rot (n.i.O.) · weiß (offen) · animierter Lime-Ring (aktuell) */
.seq-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; box-sizing:border-box; }
.seq-dot--ok { background: var(--status-ok); }   /* Notification-Grün #00853e auf hellem Grund (4.74:1) */
.seq-dot--nok { background: var(--status-nok); }
.seq-dot--pending { background:#fff; border:2px solid var(--outline); }
.seq-dot--none { background:transparent; }
/* aktueller Schritt: voller Lime-Punkt wie die anderen + blinkender Lime-Ring (Sekundentakt) */
.seq-dot--current { background: var(--claas-lime); border:0; position:relative; }
.seq-dot--current::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--claas-lime); animation: seq-ring-blink 1s ease-in-out infinite; }
.seq-lbl { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes seq-ring-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.15; } }
@media (prefers-reduced-motion: reduce) { .seq-dot--current::after { animation: none; } }   /* Ring-Blink aus (Baum + Flash) */

/* „Aktueller Schritt" — Fokus zurücksetzen */
.seq-current-btn { flex:0 0 auto; margin-top: var(--sp-m); align-self:center; display:inline-flex; align-items:center;
  gap: var(--sp-xs); border:0; background:transparent; cursor:pointer; font:inherit; font-family: var(--font-header);
  font-weight:700; font-size: var(--fs-body1); color: var(--text-primary); padding: var(--sp-xs); }
.seq-current-btn:hover { color: var(--claas-lime-dark); }

/* ---------- Main ---------- */
/* Inhalt füllt die verfügbare Höhe und scrollt NICHT — schrumpft bei kleinem Viewport (Tablet). */
.c-main { grid-area: main; padding: var(--sp-l); overflow: hidden; min-height: 0; min-width: 0; display:flex; flex-direction:column; }
.stage { background: var(--surface); border:1px solid var(--divider); border-radius: var(--radius-s);
  flex:1 1 auto; min-height: 0; box-shadow: var(--elevation-1); padding: var(--sp-xl); display:flex; flex-direction:column; }
.stage--attention { animation: pulse 1.2s ease-in-out 3; }
/* Fehlerzustand: roter Rahmen um den Content-Container */
.stage--error { border: 2px solid var(--status-nok); }
/* Flash-Schritt: kein weißer Karten-Rahmen — die Slots stehen direkt auf Grau */
.stage--flash { background: transparent; border: 0; box-shadow: none; padding: 0; }
@keyframes pulse { 0%,100%{ box-shadow: var(--elevation-1);} 50%{ box-shadow: 0 0 0 4px var(--claas-lime);} }
/* Kopf: Schrittname (Eyebrow) + Beschreibung (große Überschrift), zentriert */
.stage__head { display:flex; flex-direction:column; align-items:center; gap: var(--sp-xs); width:100%; }
/* „Automated test running"-Statuszeile unter dem Schrittkopf (Hintergrundschritte) */
.stage__autorun { font-family: var(--font-header); font-size: var(--fs-h3); line-height: var(--lh-h3);
  color: var(--text-secondary); text-align:center; margin: var(--sp-l) 0 0; }
.stage__name { font-family: var(--font-header); font-weight:400; font-size: var(--fs-h3); line-height: var(--lh-h3);
  color: var(--text-secondary); text-align:center; margin:0; }
.stage__heading { font-family: var(--font-header); font-weight:700; font-size: var(--fs-h1); line-height: var(--lh-h1);
  color: var(--text-primary); text-align: center; margin:0 auto; max-width: 36ch; }
/* Automatischer Wartelauf: zentrierte, langsam drehende Uhr (minimalistische Animation) */
.autowait { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
/* Ladeleiste (autoRun mit progress): füllt sich linear über durationSec, mittig wie die Uhr. Track DUNKEL
   (#212121) + Lime-Fill — analog zum Flash-Balken: Nicht-Text-Kontrast Track↔Fill ≥ 3:1 (WCAG 1.4.11,
   gemessen 3.85:1; ein heller Track lag vorher nur bei 2.16:1). D-021 (schwarz auf Lime) unberührt. */
.loadwrap { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.loadbar { width: min(520px, 70%); height: 12px; background: #212121; overflow:hidden; }
.loadbar > i { display:block; height:100%; width:0; background: var(--claas-lime);
  animation-name: loadfill; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes loadfill { from { width: 0; } to { width: 100%; } }
/* Warte-Template: Countdown-Ring mit verbleibenden Sekunden in der Mitte. */
.cdwrap { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.cdring-wrap { display:flex; flex-direction:column; align-items:center; gap: var(--sp-l); }
.cdring__cap { margin:0; font-family: var(--font-header); font-weight:700; font-size:30px; line-height:1.2; color: var(--text-primary); }
.cdring { position:relative; width:300px; height:300px; }
.cdring__svg { width:100%; height:100%; }
.cdring__num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-header); font-weight:700; font-size:96px; color: var(--text-primary); font-variant-numeric:tabular-nums; }
/* Range-Indicator: orange Gesamt-Range, grüner i.O.-Bereich, Ist-Wert als Tooltip (grün/rot). */
.rangewrap { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
/* Vertikale Indication Bar (z. B. Kühlmitteltemperatur): rote Enden, grüner i.O.-Bereich, seitlicher Wert-Badge. */
.rangev { flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.rangev__track { position:relative; width:18px; height: clamp(280px, 46vh, 460px); background: var(--status-nok); }
.rangev__ok { position:absolute; left:0; right:0; background: var(--status-ok); }
.rangev__lbl { position:absolute; right: calc(100% + 18px); transform: translateY(50%); white-space:nowrap;
  font-family: var(--font-header); font-size: var(--fs-h5); line-height:1; color: var(--text-secondary); }
.rangev__marker { position:absolute; left: calc(100% + 18px); transform: translateY(50%); display:inline-flex; align-items:center;
  gap: var(--sp-xs); padding: 10px 16px; border-radius: var(--radius-s); color:#fff; font-weight:700; font-size: var(--fs-h3);
  white-space:nowrap; font-variant-numeric: tabular-nums; }
.rangev__marker.is-ok { background: var(--status-ok); }
.rangev__marker.is-nok { background: var(--status-nok); }
.rangev__marker::before { content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  border-style:solid; border-width:11px 13px 11px 0; border-color: transparent; }
.rangev__marker.is-ok::before { border-right-color: var(--status-ok); }
.rangev__marker.is-nok::before { border-right-color: var(--status-nok); }
.rangev__ico { flex:0 0 auto; }
/* Der Ist-Wert-Tooltip steht absolut über der Leiste (bottom:28px, ~64px hoch). Damit er als Teil
   der Komponentenhöhe zählt und nicht in den Content darüber (z. B. Bild bei 3.10.06) ragt, wird
   sein Platzbedarf oben reserviert (28 + 64 ≈ 92px → 96px Puffer). */
.range { width: min(720px, 86%); padding-top: 96px; }
.range__bar { position:relative; height:16px; background: var(--status-warn); }   /* Gesamt-Range = Notification Orange */
.range__ok { position:absolute; top:0; bottom:0; background: var(--status-ok); }
.range__tick { position:absolute; top:50%; transform:translate(-50%,-50%); width:2px; height:25px; background:#212121; }
.range__marker { position:absolute; top:0; transform:translateX(-50%); }
.range__tip { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-header); font-weight:700; font-size:42px; line-height:40px; color:#fff;
  padding:12px 24px; border-radius: var(--radius-s); }
.range__tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:25px solid transparent; border-right:25px solid transparent; border-top:28px solid transparent; }
.range__marker--ok .range__tip { background: var(--status-ok); }
.range__marker--ok .range__tip::after { border-top-color: var(--status-ok); }
.range__marker--nok .range__tip { background: var(--status-nok); }
.range__marker--nok .range__tip::after { border-top-color: var(--status-nok); }
.range__scale { position:relative; height:24px; margin-top:20px; }
.range__lbl { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-header); font-size:32px; line-height:24px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Verankerung der Skalen-Labels (kollisionsfreie Platzierung, siehe RangeIndicator.labels):
   mittig (Standard) · linksbündig am Leistenanfang · rechtsbündig am Leistenende. */
.range__lbl--mid   { transform: translateX(-50%); }
.range__lbl--start { transform: translateX(0); }
.range__lbl--end   { transform: translateX(-100%); }
.autowait__clock { width:140px; height:140px; }
.autowait__hand { transform-box: view-box; transform-origin: 50px 50px; }
.autowait__hand--m { animation: autowait-spin 8s linear infinite; }
.autowait__hand--h { animation: autowait-spin 48s linear infinite; }
@keyframes autowait-spin { to { transform: rotate(360deg); } }
/* Präsentations-Pause: animierte Uhr einfrieren (analog Ladeleiste/Countdown/Range). */
.autowait.is-paused .autowait__hand { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .autowait__hand { animation: none; } }

/* „läuft" — Punkte bauen sich auf: 0 → . → .. → ... → von vorn (gleicher Zyklus, gemeinsamer Reset) */
.dots i { font-style: normal; opacity: 0; }
.dots i:nth-child(1) { animation: dot1 1.6s linear infinite; }
.dots i:nth-child(2) { animation: dot2 1.6s linear infinite; }
.dots i:nth-child(3) { animation: dot3 1.6s linear infinite; }
@keyframes dot1 { 0%,24%{opacity:0} 25%,100%{opacity:1} }
@keyframes dot2 { 0%,49%{opacity:0} 50%,100%{opacity:1} }
@keyframes dot3 { 0%,74%{opacity:0} 75%,100%{opacity:1} }
/* Präsentations-Pause: „läuft…"-Punkte einfrieren. */
.dots.is-paused i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dots i { opacity: 1; animation: none; } }
/* Zentriertes Schritt-Layout (step.layout === "center"), z. B. Maschinennummer-Erfassung */
.stage--center { justify-content: center; }
.stage--center .stage__heading, .stage--center .stage__body { text-align: center; align-items: center; }
.stage--center .blk-text { max-width: 44ch; }
.stage__body { flex:1 1 auto; min-height:0; width:100%; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-l); }
.stage__skip { align-self:flex-start; font-size: var(--fs-body2); color: var(--text-secondary);
  background: var(--surface-grey); border:1px dashed var(--outline); border-radius: var(--radius-s); padding: 4px 10px; }

/* Bremstest: Live-Diagramm + min/act/max-Tabelle */
.brake { width:100%; max-width: 760px; align-self:center; display:flex; flex-direction:column; gap: var(--sp-m); min-height:0; }
.brake__legend { display:flex; justify-content:center; gap: 40px; font-size: 18px; color: var(--text-primary); }
.brake__leg { display:inline-flex; align-items:center; gap: 5px; }
.brake__leg i { width:16px; height:4px; border-radius:2px; display:inline-block; }
.brake__chart { width:100%; height:auto; max-height: 400px; }
/* table-layout:fixed → Spaltenbreiten bleiben konstant, während sich act-Werte füllen */
.brake__table { width:100%; border-collapse:collapse; table-layout:fixed; font-size: var(--fs-body1); }
.brake__table th { text-align:left; font-weight:700; color: var(--text-primary); padding: var(--sp-xs) var(--sp-1_5); border-bottom:1px solid var(--outline); }
.brake__table td { height: calc(var(--lh-body1) + 2 * var(--sp-m)); padding: 0 var(--sp-1_5); vertical-align:middle;
  border-bottom:1px solid var(--divider); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brake__table th:nth-child(1), .brake__table td:nth-child(1) { width: 40%; }
.brake__table th:nth-child(2), .brake__table td:nth-child(2),
.brake__table th:nth-child(3), .brake__table td:nth-child(3),
.brake__table th:nth-child(4), .brake__table td:nth-child(4) { width: 20%; }
.brake__table .num { text-align:left; }
/* Häkchen grün (SVG), Werte aber schwarz */
/* feste Zeilenhöhe: Act-Zelle bleibt einzeilig, das Status-Icon vergrößert die Zeile nicht. */
.brake__act { display:inline-flex; align-items:center; gap: var(--sp-xs); color: var(--text-primary);
  height: var(--lh-body1); line-height: var(--lh-body1); vertical-align:middle; }
.brake__pending { color: var(--text-secondary); }

/* Doppelt kodierter Ist-Wert (Farbe + Icon) als Badge — einheitlich für alle Mess-Tabellen.
   i.O. Lime + Häkchen · n.i.O. Rot + X · ausstehend Grau + Spinner. Auf Lime/Rot Text+Icons SCHWARZ
   (D-021: kein Weiß auf Lime; Rot hell → Schwarz ≥4.5:1), auf Grau (pending) Weiß. */
.val-badge { display:inline-flex; align-items:center; gap: var(--sp-xs); padding: 6px 14px; border-radius: var(--radius-s);
  font-weight:700; color:#fff; line-height:1.2; min-height:36px; box-sizing:border-box; vertical-align:middle; }
.val-badge--ok { background: var(--status-ok); }
.val-badge--nok { background: var(--status-nok); }
.val-badge--pending { background: #676767; }
.val-badge__ico { flex:0 0 auto; display:block; }
.val-badge__num { font-variant-numeric: tabular-nums; }
.val-badge__spin { flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff; animation: cal-spin .8s linear infinite; }

/* Kalibrierlauf: oben ausgerichtete Tabelle (feste Spalten/Zeilenhöhen) + Zähler-/Abbrechen-Zeile */
.stage--cal .stage__body { justify-content: flex-start; }
.cal { width:100%; max-width: 640px; margin: 0 auto; display:flex; flex-direction:column; gap: var(--sp-l); }
.cal .stage__heading { margin: 0 auto var(--sp-m); }
.cal__table { width:100%; border-collapse:collapse; table-layout:fixed; font-size: 18px; }
.cal__table th { text-align:left; font-weight:700; color: var(--text-primary); padding: var(--sp-xs) var(--sp-1_5); border-bottom:1px solid var(--outline); }
.cal__table td { padding: var(--sp-1_5); border-bottom:1px solid var(--divider); height: 52px; }
.cal__table th:nth-child(1), .cal__table td:nth-child(1) { width: 45%; }
.cal__table th:nth-child(2), .cal__table td:nth-child(2) { width: 55%; }
.cal__val { display:inline-flex; align-items:center; gap: var(--sp-xs); min-height:24px; color: var(--text-primary); }
.cal__num { font-variant-numeric: tabular-nums; }
.cal__check { flex:0 0 auto; }
.cal__spin { flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--divider);
  border-top-color: var(--text-secondary); animation: cal-spin .8s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cal__spin { animation: none; } }
.cal-bottom { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-m); padding-top: var(--sp-l); }
.cal-counter { font-family: var(--font-header); font-weight:700; font-size: var(--fs-h5); color: var(--text-primary); }

/* blocks */
.blk-text { font-size: var(--fs-body1); max-width: 60ch; }
.blk-text--instruction { font-size: calc(var(--fs-body1) + 2px); }
.blk-text--hint { color: var(--text-secondary); }
.blk-text--warning { border-left: 4px solid var(--status-nok); background: var(--status-nok-soft); padding: var(--sp-1_5) var(--sp-m);
  border-radius: var(--radius-s); display:flex; gap: var(--sp-xs); align-items:flex-start; }
.blk-text--warning b { color: var(--status-nok-text); }   /* roter Text auf hell = #c62828 (5.6:1) */
/* skaliert hoch und runter: füllt den verfügbaren Platz (max 600×400), ohne Verzerrung, ohne Scrollen */
.blk-image { align-self:center; width:100%; flex:1 1 auto; min-height:0; padding: 40px 0;
  display:flex; align-items:center; justify-content:center; }
.blk-image img { width:100%; height:100%; object-fit:contain;
  border-radius: var(--radius-s); display:block; }
.blk-image .ph { width:100%; border-radius: var(--radius-s); display:grid;
  aspect-ratio: 16/10; background: var(--surface-grey); border:1px dashed var(--outline);
  display:grid; place-items:center; color: var(--text-secondary); font-size: var(--fs-body2); }
.blk-image figcaption { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: var(--sp-xs); text-align:center; }

table.blk-table { border-collapse: collapse; width:100%; max-width: 640px; font-size: var(--fs-body2); }
.blk-table th, .blk-table td { text-align:left; padding: var(--sp-xs) var(--sp-1_5); border-bottom:1px solid var(--divider); }
.blk-table th { color: var(--text-secondary); font-weight:500; font-size: var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; }
.blk-table .num { text-align:right; font-variant-numeric: tabular-nums; }
.cell-status { display:inline-flex; align-items:center; gap:6px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot--ok{background:var(--status-ok)} .dot--nok{background:var(--status-nok)} .dot--none{background:var(--status-none)}
.row--nok td { background: var(--status-nok-soft); }

/* B6 Eingabefeld */
.blk-input input { width: 280px; font: inherit; font-size: var(--fs-body1); padding: 14px 16px;
  border: 1px solid var(--outline-input); border-radius: var(--radius-s); background: var(--surface);
  color: var(--text-primary); }
.blk-input input::placeholder { color: var(--text-secondary); }
.blk-input input:focus { outline: 2px solid var(--claas-lime); outline-offset: -1px; }

.blk-graph { max-width: 640px; }
.blk-graph svg { width:100%; height:auto; background:var(--surface-grey); border-radius:var(--radius-s); }

.blk-progress { max-width: 560px; }
.progress-bar { height: 14px; background: var(--surface-grey); border-radius: var(--radius-full); overflow:hidden; }
.progress-bar > i { display:block; height:100%; background: var(--claas-lime); }
.progress-ring { display:flex; align-items:center; gap: var(--sp-m); }
.blk-progress .lbl { margin-top: var(--sp-xs); color: var(--text-secondary); font-size: var(--fs-body2); }

/* Flash-Karten-Layout — TISCHBASIERT (D-040; Figma „Flash Card" 11:549 + Tisch-Frames CLAAS-Temp 26:1591 /
   28:1735): 1–4 physische Tische à 6 Plätze (IMMER 3 Spalten × 2 Reihen). Fit-to-height: durchgängige
   min-height:0-Kette → kein Scroll/Clipping bei BELIEBIGER Auflösung. Die TISCH-Reihen sind auf `--table-cap`
   gedeckelt (Nicht-fr-Track + align-content:center, D-041) → auf hohen Viewports huggen die Tische an ihren Inhalt
   (kein Überdehnen, kein Leerraum IM Tisch), der Tisch-Block ist vertikal ZENTRIERT (Überschuss gleichmäßig oben+unten). Bei wenig Höhe füllen/
   schrumpfen die Reihen (Stufe A) + gestufte Reduktion je Karte (Container-Query, Stufe B/C/C+/D, s. u. —
   konzept-16 full→kompakt→minimal) statt Abschneiden. Karten-Dichte aus Tischanzahl (1→full, ab
   2→kompakt). Tokens (Lime/Status), schwarz auf Lime (D-021). */
.flashgrid { position:relative; width:100%; height:100%; min-height:0; }
.flashgrid--tables { display:grid; gap: clamp(8px, 1.6vh, 24px); box-sizing:border-box;
  height:100%; min-height:0; align-content: center; grid-auto-rows: minmax(0, var(--table-cap, 640px)); }
/* 1 Tisch (D-040-Feinschliff): füllt die Bühnen-BREITE (bis ~1080px zentriert) UND die Höhe (fr-Reihe) →
   große Karten (24px-Titel via .flashgrid--t1 .fcard__title). */
.flashgrid--t1 { grid-template-columns: minmax(0, 1fr); max-width: 1080px; margin-inline: auto; }
.flashgrid--t2, .flashgrid--t3, .flashgrid--t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 3 Tische: 2 oben, der 3. unten zentriert (Breite ~ eines oberen Tisches). */
.flashgrid--t3 .flash-table:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
/* P4 — RÄUMLICHE ANDEUTUNG NUR im 4-Tisch-Layout (D-042, asymmetrisch, Simeon-Entscheid 2026-07-07): die vier
   Tische wirken „im Raum verteilt" statt als kompakter Block. OBERE Reihe = außen flankiert (beide Tische
   zentriert aneinander, leere Gutter LINKS+RECHTS außen); UNTERE Reihe = mit Abstand dazwischen (beide Tische an
   die Außenkanten, leerer Kanal in der MITTE). Dazu größerer Zeilenabstand. Umgesetzt über ein 6-Spalten-Grid mit
   zeilenweise unterschiedlicher Platzierung — die vier Tische bleiben GLEICH BREIT (1fr + eine Gutter-Spalte),
   nur horizontal versetzt. Die Leer-Gutter sind reine Grid-SPALTEN (kein zusätzlicher fr-Track/keine Extra-Reihe)
   → Fit-to-height (`--table-cap` + align-content:center + min-height:0-Kette) bleibt UNBERÜHRT: kein Scroll/Clipping
   bei beliebiger Auflösung. Gutter-Breiten responsiv (%) + Augenmaß-STARTWERTE (feintunebar über --t4-flank /
   --t4-mid). t1/t2/t3/solo unverändert.
   Spalten:  [flanke] [1fr Tisch] [mid] [gap] [mid] [1fr Tisch] [flanke]
   oben:     ·   ·   [ T1 ]·[ T2 ]   ·   ·      (Flanke außen, kleiner Mindest-Gap zwischen T1|T2)
   unten:   [ T3 ]   ·   ·   ·   ·   ·   [ T4 ]  (Tische an die Kante, Mittel-Kanal = 2×mid + gap)
   Der schmale `--t4-topgap` (c4) trennt die beiden OBEREN Tische (sonst Kante an Kante); vertikal trennt row-gap,
   die unteren Tische trennt der Mittel-Kanal → zwischen ALLEN Tischen bleibt ein Mindestabstand. */
.flashgrid--t4 {
  grid-template-columns:
    var(--t4-flank, 8%)              /* c1: unten-links Tisch bis Außenkante; oben leer (Flanke) */
    minmax(0, 1fr)                   /* c2: Tisch-Kernspalte */
    var(--t4-mid, 8%)                /* c3: unten leerer Kanal (Hälfte); oben Teil von T1 */
    clamp(8px, 1vw, 18px)            /* c4: kleiner Mindest-Gap zwischen den OBEREN Tischen (--t4-topgap) */
    var(--t4-mid, 8%)                /* c5: unten leerer Kanal (Hälfte); oben Teil von T2 */
    minmax(0, 1fr)                   /* c6: Tisch-Kernspalte */
    var(--t4-flank, 8%);             /* c7: unten-rechts Tisch bis Außenkante; oben leer (Flanke) */
  column-gap: 0;                                     /* Abstände stecken in den Gutter-Tracks, nicht im gap */
  row-gap: clamp(16px, 5vh, 56px);                   /* mehr Luft zwischen oberer und unterer Tischreihe */
}
.flashgrid--t4 .flash-table:nth-child(1) { grid-row: 1; grid-column: 2 / 4; }   /* oben-links, zentriert (bis vor den Gap) */
.flashgrid--t4 .flash-table:nth-child(2) { grid-row: 1; grid-column: 5 / 7; }   /* oben-rechts, zentriert (hinter dem Gap) */
.flashgrid--t4 .flash-table:nth-child(3) { grid-row: 2; grid-column: 1 / 3; }   /* unten-links, an der Kante */
.flashgrid--t4 .flash-table:nth-child(4) { grid-row: 2; grid-column: 6 / 8; }   /* unten-rechts, an der Kante */
/* TISCHLOS (Einzel-Darstellung, konzept/16 „Single" + Andreas-Mockup): EIN Gerät als große Flash-Card über die
   ganze Bühne — KEIN .flash-table-Wrapper/-Chip. Basis = t1-Single-Größe/-Typo (24px-Titel), nur ohne Tisch.
   Fit-to-height wie die Tische (fr-Reihe füllt die Höhe, kein Scroll/Clip). */
.flashgrid--solo { display:grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1.6vh, 24px); height:100%; min-height:0; max-width: 1080px; margin-inline: auto; }
/* Tischlos: EINE große Karte, aber auf MAX gedeckelt (D-041) + vertikal zentriert → kein Überdehnen auf hohen
   Viewports (Weißraum oben/unten); auf niedrigen schrumpft sie (fr-Reihe) und staffelt via Container-Query. */
.flashgrid--solo .fcard { height:100%; max-height: var(--solo-cap, 440px); align-self: center; }
[data-profile="hall"] .flashgrid--solo .fcard { --solo-cap: 560px; }

/* Tisch-Container: Gray-1-Fläche + Schatten (Gruppierung über Fläche/Elevation, nicht Farbe — Lime bleibt
   Aktion/Status reserviert, D-021). Chip oben links. */
.flash-table { background: var(--surface-grey); border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: clamp(5px, 0.9vh, 8px); display:flex; flex-direction:column; gap: clamp(4px, 0.8vh, 8px); min-width:0; min-height:0; }
/* Chip „T 0X · Tisch X" — Dark-Olive (#6b7613, Figma): Weiß darauf = 4.98:1 (≥4.5; ≠ verbotenes Weiß-auf-Lime D-021). */
.flash-table__chip { align-self:flex-start; background: var(--table-chip); color:#fff; font-family: var(--font-header);
  font-weight:700; font-size:10px; line-height:1.2; letter-spacing:.04em; padding:4px 6px; border-radius:4px; white-space:nowrap; }
/* Tisch-MAX-Höhe statt fr-Stretch (D-041-Folge-Fix): die TISCH-Reihen (`grid-auto-rows` oben) wachsen als
   Nicht-fr-Track nur bis `--table-cap` — der Überschuss wird via `align-content: center` gleichmäßig oben+unten
   verteilt (Tisch-Block vertikal zentriert), NICHT in die Tische gelegt. Bei knapper Höhe füllen/schrumpfen die
   Reihen (Fit bleibt: nie Overflow, da Reihen die Bühne nie übersteigen). So hugged jeder Tisch an seinen Inhalt
   (Chip + gedeckelte Karten), KEIN Leerraum mehr innerhalb des Tisches. Das innere Karten-Grid füllt nur den (gedeckelten) Tisch. */
.flash-table__grid { flex:1 1 auto; min-height:0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr)); gap: clamp(4px, 0.7vh, 6px); }
.flashgrid--kompakt { --table-cap: 404px; }   /* ab 2 Tischen: Karten ~175 (≈ Vor-Tisch-Größe) */
.flashgrid--t2 { --table-cap: 504px; }         /* 2 Tische = nur 1 Tisch-Reihe → etwas größere Karten */
.flashgrid--t1 { --table-cap: 644px; }         /* 1 Tisch (full): große Karten ~290 (≈ Vor-Tisch t1) */
[data-profile="hall"] .flashgrid--kompakt { --table-cap: 504px; }   /* Hall: aus Distanz größer */
[data-profile="hall"] .flashgrid--t1 { --table-cap: 764px; }

/* Karte — zwei Zonen (Inhalt/Aktion), linker Status-Streifen (4px), weiße Fläche, dünner Rahmen, 6px Radius. */
.fcard { position:relative; min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  background: var(--surface); border:1px solid var(--divider); border-radius:6px;
  container-type: size; container-name: fcard; }   /* Karten-Höhe = Query-Basis für die gestufte Reduktion (B/C/C+, s. u.) */
.fcard__stripe { position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--outline); }
.fcard--ongoing  > .fcard__stripe { background: var(--claas-lime); }
.fcard--connect    > .fcard__stripe,
.fcard--flashstart > .fcard__stripe { background: var(--text-secondary); }

/* DISTANZ-STATUS (funktional vor schön): die GANZE Karten-Fläche trägt den Status — aus Hallen-Distanz auf
   kleinen Monitoren sofort lesbar. „Flash End"/fertig = ganze Karte NOTIFICATION-GRÜN #00853e, „Fehler" = ganze
   Karte NOTIFICATION-ROT #e31b0c — beide dunkel genug für WEISSEN Text (≥4.74:1). Das ist STATUS (kein Button →
   NICHT die Brand-Lime). Neutrale Zustände (flashstart/connect/flashing) bleiben weiß (Streifen + Balken),
   „removed" bleibt der Ghost. Gilt für ALLE Dichten (Tisch/kompakt/minimal/solo). */
.fcard--remove { background: var(--status-ok); border-color: rgba(0,0,0,0.2); }        /* fertig = Notification-Grün #00853e; weißer Text */
.fcard--error, .fcard--failed { background: var(--status-nok); border-color: rgba(0,0,0,0.2); }   /* Fehler = Notification-Rot #e31b0c; weißer Text */
.fcard--remove   > .fcard__stripe,
.fcard--error    > .fcard__stripe,
.fcard--failed   > .fcard__stripe { display:none; }                                    /* Fläche trägt den Status → Streifen redundant */
.fcard--remove .fcard__title, .fcard--remove .fcard__sub { color:#fff; }               /* Grün: weißer Text (4.74:1) */
.fcard--remove .fcard__cta { color:#fff; }                                             /* CTA „Entnehmen & Sticker aufkleben" auf Status-Grün → weiß (wie Titel/Sub, ≥4.74:1); flashstart/connect bleiben dunkelgrau */
.fcard--error .fcard__title, .fcard--failed .fcard__title { color:#fff; }                /* Rot dunkel genug → weißer Titel (4.74:1), error + failed */
.fcard--error .fcard__sub, .fcard--error .fcard__hint, .fcard--error .fcard__msg { color:#fff; }   /* nur „error" rendert Sub/Hint/Msg */
.fcard--error .fcard__action { border-top-color: rgba(255,255,255,0.3); }                /* Trennlinie auf roter Fläche → hell */
/* Hover auf den Voll-Flächen-Status-Karten: NICHT auf Grau (--surface-grey würde die Status-Fläche überschreiben
   und den weißen Text unsichtbar machen) — stattdessen eine dunklere Tönung DERSELBEN Status-Farbe; Text bleibt
   weiß (≥4.5:1). Der graue Hover (.fcard--clickable:hover) gilt nur für neutrale/weiße Karten. */
.fcard--remove.fcard--clickable:hover { background: var(--status-ok-dark); }            /* Green 700 #1b5e20 — weißer Text 7.8:1 */
.fcard--error.fcard--clickable:hover  { background: var(--status-nok-text); }           /* Red 700 #c62828 — weißer Text 5.6:1 */
/* „Flash End": Aufmerksamkeits-Puls (So-02) jetzt auf der GANZEN Karte (alle Dichten), nicht nur am Streifen. */
.fcard--remove { animation: fcard-fill-pulse 1.7s ease-in-out infinite; }
/* Leer-Karte (D-040) = nie belegter Tischplatz: helle Fläche + grauer Rand, kein Akzent. KLAR ANDERS als der
   „removed"/Ghost (R1, weiß + gestrichelt #8F8F8F + „entnommen") — Leer = nie belegt, Ghost = entnommen. */
.fcard--empty { background:#ededed; border-color:#8f8f8f; box-shadow:none; }
.fcard--empty > .fcard__stripe { display:none; }
.fcard__placeholder { margin:auto; color:#8f8f8f; font-size: var(--fs-flash-title-kompakt); line-height:1; }
/* Karten-Mindesthöhe je Dichte: 0 — die fr-Reihen (grid-template-rows: minmax(0,1fr)) treiben die Höhe, damit
   das Raster fit-to-height bleibt (kein fester Floor, der bei knapper Höhe überläuft → früher „oben abgeschnitten").
   Auf hohen Screens strecken die fr-Reihen die Karten groß; auf niedrigen verdichten sie (Typo/Gaps via clamp). */
.fcard--full { min-height: 0; }
.fcard--kompakt { min-height: 0; }
.fcard--clickable { cursor:pointer; }
.fcard--clickable:hover { background: var(--surface-grey); }
.fcard--clickable:focus-visible { outline: 2px solid var(--claas-lime); outline-offset: -2px; }   /* Tastatur-Fokus */
/* Affordance auf der Kompakt-Fehlerkarte (kein Platz für Inline-Buttons): „Details ›" → tippbar (Overlay). */
.fcard__hint { align-self:flex-start; display:inline-flex; align-items:center; gap:2px; font-size: var(--fs-flash-label); font-weight:500; color: var(--text-secondary); }

/* Inhaltszone (oben angedockt). */
.fcard__content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:6px; padding:14px 14px 6px 17px; overflow:hidden; }
.fcard__titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.fcard__title { font-family: var(--font-header); font-weight:700; color: var(--text-primary); line-height:1.15;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* Modul-Name nie hart abschneiden (Ellipsis) */
.fcard__sub { color: var(--text-secondary); font-size: var(--fs-flash-sec); line-height:1.3; }
.fcard__msg { color: var(--status-nok); font-size: var(--fs-flash-sec); line-height:1.3; }
/* Modul-Referenzfoto RECHTS neben dem Text (mehr Platz → größer, nutzt die volle Karten-Höhe) beim Identifizieren.
   Skaliert automatisch mit der Karten-Höhe (Stufe B kleiner); Stufe C blendet es aus (s. u.). */
.fcard__main { flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:row; gap:4px; }
.fcard__main .fcard__content { flex:1 1 auto; min-width:0; }
.fcard__img { flex:0 0 auto; width:38%; align-self:stretch; min-height:0; border-radius: var(--radius-s); margin:6px 8px 6px 2px; }
.flashgrid--kompakt .fcard__img { width:30%; margin:4px 6px 4px 2px; }   /* schmale Tisch-Karten: Bild schmaler + enge Ränder, damit der Modul-Name daneben voll passt */
/* Bild anklickbar → Vergrößern-Dialog (P3): Button-Reset, inneres <img> füllt via object-fit. Zoom-Cursor + Tastatur-Fokus. */
.fcard__img--btn { padding:0; border:0; background:none; cursor:zoom-in; display:block; overflow:hidden; }
.fcard__img--btn > img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; border-radius:inherit; }
.fcard__img--btn:focus-visible { outline:2px solid var(--claas-lime); outline-offset:2px; }

/* Status-Badge (Pille). „Flashing" = schwarz auf Lime (D-021). */
.fcard__badge { align-self:flex-start; display:inline-flex; align-items:center; padding:4px 9px; border-radius:4px;
  background: var(--surface-grey); color: var(--text-secondary); font-weight:500; font-size: var(--fs-flash-label); white-space:nowrap; }
.fcard--ongoing    .fcard__badge { background: var(--claas-lime); color: var(--on-primary); }
/* Auf den eingefärbten Status-Karten: heller Soft-Chip mit Status-Text. */
.fcard--error      .fcard__badge,
.fcard--failed     .fcard__badge { background: var(--status-nok-soft); color: var(--status-nok-text); }   /* hellroter Chip auf roter Karte */
.fcard--remove     .fcard__badge { background: var(--status-ok-soft); color: var(--status-ok-dark); }     /* hellgrüner Chip auf grüner Karte */

/* Fortschrittsbalken — EIN Balken (D-037): Aktivität = dezenter Live-Schimmer in der Füllung (kein zweiter
   Dauerlauf-Balken). Track DUNKEL (#212121) statt hellgrau → Nicht-Text-Kontrast Track↔Lime-Fill ≥ 3:1
   (WCAG 1.4.11), Füllstand auch aus Hallen-Distanz klar ablesbar; Höhe 8px für Distanz. D-021 unberührt
   (Text/Buttons). Bei prefers-reduced-motion: statische Füllung. */
.fcard__bar { display:block; width:100%; height:8px; background:#212121; border-radius:4px; overflow:hidden; margin-top:3px; }
.fcard__bar > i { position:relative; display:block; height:100%; background: var(--claas-lime); border-radius:4px; overflow:hidden; transition:width .2s linear; }
.fcard--ongoing .fcard__bar > i::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-100%); animation: fcard-shimmer 1.4s ease-in-out infinite; }
.fcard__remain { color: var(--text-secondary); font-size: var(--fs-flash-label); }
@keyframes fcard-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* Ganzkarten-Aufmerksamkeitspuls auf „Flash End": innerer weißer Ring (kein Layout-Shift), auf der grünen Karte gut sichtbar. */
@keyframes fcard-fill-pulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: inset 0 0 0 4px rgba(255,255,255,0.6); } }
@media (prefers-reduced-motion: reduce) {
  .fcard--ongoing .fcard__bar > i::after,
  .fcard--remove { animation: none; }   /* Puls aus; statische grüne Fläche bleibt korrekt */
}

/* Erfolgs-Kreis rechts oben (Full): nur „Flash End" (remove) — weißer Chip mit dunkelgrünem Haken auf der grünen
   Karte (der Aufmerksamkeits-Puls liegt jetzt auf der ganzen Karte, s. fcard-fill-pulse). */
.fcard__okcircle { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:#fff; color: var(--status-ok); font-size:26px; font-weight:700; line-height:1; }

/* Zustand „removed" = GHOST (Figma „Removed · R1", node 43:3132). Feinschliff: bleibt als klar umrissene
   LEERSTELLE sichtbar (vorher ging die transparente, 55%-blasse #D7D7D7-Kontur im grauen Canvas #f5f5f5 unter).
   KEINE globale Deckkraft (bleicht die Kontur aus). DEFINIERTE Fläche: Weiß #FFFFFF — hebt sich vom grauen
   Canvas ab. KLARE Kontur: gestrichelt 1.5px Gray4 #8F8F8F (Kontrast zur weißen Fläche 3.23:1 ≥ 3:1, WCAG
   1.4.11) → aus Distanz erkennbar. Marker „✓ entnommen" + Modulname in Gray5 #676767 (5.65:1 auf Weiß).
   Weiterhin KEIN Status-Akzent (Streifen/Haken-Kreis/Punkt aus), KEINE Animation. Auch Minimal (24) eindeutig.
   Trennung bleibt: läuft = weiß/solide + Inhalt · bereit = grün/solide + Puls · removed = leere, umrissene Kachel. */
.fcard--successful { background: #FFFFFF; border: 1.5px dashed #8F8F8F; }
.fcard--successful > .fcard__stripe { display: none; }
.fcard--successful .fcard__title { color: #676767; }
.fcard--successful .fcard__sub { color: #676767; }
.fcard--successful .fcard__badge { background: transparent; color: #676767; padding: 0; }   /* „✓ entnommen" als gedämpfter Text, keine Pille */
.fcard--successful .fcard__dot { display: none; }                                            /* Minimal: kein Farb-Punkt */
.fcard--successful .fcard__word { color: #676767; }

/* Aktionszone (unten verankert): Trennlinie + Buttons bzw. Call-to-Action („→ ECU verbinden"/„Entnehmen"). */
.fcard__action { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:11px 13px 14px 17px; border-top:1px solid #e0e0e0; }
.fcard__cta { color: var(--text-secondary); font-weight:500; font-size: var(--fs-flash-sec); }
.fcard__btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height: var(--touch-min); padding:0 14px;
  border:1px solid transparent; border-radius:4px; cursor:pointer; font:inherit; font-family: var(--font-header); font-weight:500; font-size: var(--fs-flash-sec); }
/* Fehler-Aktionsbuttons stehen IMMER auf der roten Fehlerkarte → für Rot ausgelegt: Wiederholen = umrandet/
   transluzent weiß, Akzeptieren = solide weiß mit rotem Text (klar unterscheidbar, beide ≥ 4.5:1). */
.fcard__btn--retry { background: transparent; border-color: rgba(255,255,255,0.7); color:#fff; }   /* auf roter Karte: weiß umrandet */
.fcard__btn--retry:hover { background: rgba(255,255,255,0.15); }
.fcard__btn--accept { background:#fff; border-color:#fff; color: var(--status-nok-text); }          /* weiß-solide, roter Text */
.fcard__btn--accept:hover { background: var(--status-nok-soft); }

/* Dichte Full (1 Tisch → große Karten). Einzeltisch (t1) UND tischlos (solo) nutzen die größte Single-Titelstufe.
   Basis = Token (volle Größe); die Höhen-Staffelung (Stufe B/C) läuft jetzt über Container-Queries auf die
   Karten-Höhe (s. u.), nicht mehr über Viewport-vh — die Karten-Höhe ist die richtige Achse (Tischanzahl × Höhe). */
.flashgrid--full .fcard__title { font-size: var(--fs-flash-title-full); }
.flashgrid--t1 .fcard__title,
.flashgrid--solo .fcard__title { font-size: var(--fs-flash-title-single); }

/* Dichte Kompakt (ab 2 Tischen): kompakter, kein Untertitel, dünnerer Balken; in den schmalen Tisch-Karten
   stapeln sich Retry/Accept (flex-wrap, je volle Breite). */
.flashgrid--kompakt .fcard__content { padding:12px 7px 6px 14px; gap:5px; }   /* enger rechts: mehr Platz für Modul-Name neben dem Bild */
.flashgrid--kompakt .fcard__title { font-size: var(--fs-flash-title-kompakt); }
.flashgrid--kompakt .fcard__bar { height:6px; border-radius:3px; }
.flashgrid--kompakt .fcard__bar > i { border-radius:3px; }
/* Tisch-Karten sind schmal → Fehler-Aktionen (Retry/Accept) STAPELN (volle Breite) statt nebeneinander —
   gilt full UND kompakt, sonst clippen die langen DE-Labels. min-height erbt --touch-min (Touch). */
.flashgrid--tables .fcard__action { flex-wrap: wrap; }
.flashgrid--tables .fcard__btn { flex: 1 1 100%; }
.flashgrid--kompakt .fcard__action { padding:8px 10px 12px 12px; }
.flashgrid--kompakt .fcard__btn { gap:4px; padding:0 6px; font-size: var(--fs-flash-label); }
.flashgrid--kompakt .fcard__btn svg { display:none; }   /* schmale Tisch-Karte: Text statt Icon (sonst Clipping) */
.flashgrid--kompakt .fcard__cta { font-size: var(--fs-flash-label); }

/* Dichte Minimal (13–24 Slots): Modul-ID oben, dünner Balken, Status-Punkt + Wort unten. Tap → Fokus. */
.flashgrid--minimal .fcard__mini { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:9px 9px 8px 12px; }
.flashgrid--minimal .fcard__title { font-size: var(--fs-flash-title-minimal); }
.flashgrid--minimal .fcard__minifoot { display:flex; flex-direction:column; gap:6px; }
.fcard__bar--mini { height:4px; border-radius:2px; margin:0; }
.fcard__bar--mini > i { border-radius:2px; }
.fcard__statusrow { display:flex; align-items:center; gap:7px; }
.fcard__dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background: var(--outline); }
.fcard--ongoing    .fcard__dot { background: var(--claas-lime); }
.fcard--connect    .fcard__dot,
.fcard--flashstart .fcard__dot { background: var(--text-secondary); }
.fcard--error      .fcard__dot,
.fcard--failed     .fcard__dot { background:#fff; }                       /* auf roter Karte: weißer Punkt */
.fcard--remove     .fcard__dot { background:#fff; }                       /* auf grüner Karte: weißer Punkt */
.fcard__word { font-size: var(--fs-flash-label); color: var(--text-primary); }
.fcard--error .fcard__word, .fcard--failed .fcard__word { color:#fff; }
.fcard--remove     .fcard__word { color:#fff; }

/* Minimal-Fokus-Overlay: Tap auf eine Minimal-Karte öffnet sie als Full-Karte (Detail + Aktionen). */
.fcard-focus { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.32); padding: var(--sp-l); }
.fcard-focus__inner { width:min(420px, 92%); }
.fcard-focus__inner .fcard { min-height:210px; box-shadow: var(--elevation-1); container-type: normal; }   /* Overlay: volle Detailtiefe, keine Höhen-Reduktion */
/* Fehler-/Fokus-MODAL bleibt NORMAL gestaltet (Person ist hier wieder NAH am Rechner): die Voll-Rot-Fläche gilt
   NUR für die Grid-Karten (Distanz-Lesbarkeit) — im Overlay die Karten-Voll-Einfärbung wieder zurücknehmen
   (weiße Karte, roter Streifen/Badge, normale Buttons). Höhere Spezifität schlägt die `.fcard--error`-Fills. */
.fcard-focus__inner .fcard--error,
.fcard-focus__inner .fcard--failed { background: var(--surface); border-color: var(--divider); }
.fcard-focus__inner .fcard--error > .fcard__stripe,
.fcard-focus__inner .fcard--failed > .fcard__stripe { display:block; background: var(--status-nok); }
.fcard-focus__inner .fcard--error .fcard__title,  .fcard-focus__inner .fcard--failed .fcard__title { color: var(--text-primary); }
.fcard-focus__inner .fcard--error .fcard__sub,    .fcard-focus__inner .fcard--failed .fcard__sub,
.fcard-focus__inner .fcard--error .fcard__hint,   .fcard-focus__inner .fcard--failed .fcard__hint { color: var(--text-secondary); }
.fcard-focus__inner .fcard--error .fcard__msg,    .fcard-focus__inner .fcard--failed .fcard__msg { color: var(--status-nok-text); }   /* rote Fehlermeldung auf weißem Modal (#c62828, 5.6:1) */
.fcard-focus__inner .fcard--error .fcard__badge,  .fcard-focus__inner .fcard--failed .fcard__badge { background: var(--status-nok-soft); color: var(--status-nok-text); }   /* hellroter Chip, roter Text */
.fcard-focus__inner .fcard--error .fcard__action { border-top-color:#e0e0e0; }   /* Modal = weiße Karte → normale graue Trennlinie */
.fcard-focus__inner .fcard__btn--retry { background: var(--surface); border-color: rgba(0,0,0,0.40); color: var(--text-primary); }
.fcard-focus__inner .fcard__btn--retry:hover { background: var(--surface-grey); }
.fcard-focus__inner .fcard__btn--accept { background: var(--status-nok); color:#fff; }   /* roter Button, weißer Text (4.74:1) */
.fcard-focus__inner .fcard__btn--accept:hover { filter: brightness(0.92); }

/* ===== Gestufter Breaking-Point je Karte (D-041-Nachtrag; Modell konzept/16: full → kompakt → minimal) =====
   Greift NICHT auf Viewport-Breakpoints, sondern per Container-Query auf die TATSÄCHLICHE Karten-Höhe (die von
   Tischanzahl × Auflösung abhängt → fluid). Stufe A = Karte schrumpft (fr-Reihen, oben). Ab hier:
   · Stufe B: Inhalt eine Stufe kleiner (Titel/Sub/CTA runter, Foto verkleinert, OK-Kreis weg, Balken dünner) — passt statt schneidet.
   · Stufe C: progressive Reduktion — Sekundär-Infos (Sub/Restzeit/Meldung/Foto) weg; Kern bleibt: Modul-Name + Status-Pille + dünner Balken.
   · Stufe C+: sehr wenig Höhe — auch Aktions-CTA/Buttons weg (Karte bleibt für „Flash End" antippbar); Kern bleibt sichtbar. */
/* Selektoren mit `.fcard `-Präfix → Spezifität (0,2,0), schlägt die dichte-spezifischen Basisregeln
   (z. B. `.flashgrid--kompakt .fcard__content`) per Quell-Reihenfolge; sonst greifen die Reduktionen nicht. */
@container fcard (max-height: 170px) {        /* Stufe B: Inhalt eine Stufe kleiner + CTA-Aktionszone weg */
  .fcard .fcard__content { gap:3px; padding:8px 12px 5px 15px; }
  .flashgrid--full .fcard__title,
  .flashgrid--t1 .fcard__title,
  .flashgrid--solo .fcard__title { font-size: var(--fs-flash-title-full); }
  .flashgrid--kompakt .fcard__title { font-size: var(--fs-flash-title-minimal); }
  .fcard .fcard__sub, .fcard .fcard__cta, .fcard .fcard__hint { font-size: var(--fs-flash-label); }
  .fcard .fcard__msg { display:none; }
  .fcard .fcard__okcircle { width:32px; height:32px; font-size:18px; }
  .fcard .fcard__bar { height:6px; }
  /* CTA-Aktionszone (Anschließen/Entnehmen) weg — Status bleibt über die Pille, Entnehmen über Karten-Tap.
     Fehler-Buttons (nur full) bleiben. */
  .fcard--flashstart .fcard__action,
  .fcard--connect .fcard__action,
  .fcard--remove .fcard__action { display:none; }
}
@container fcard (max-height: 118px) {        /* Stufe C: Sekundär-Infos weg, Kern bleibt (Name + Status-Pille + Balken) */
  .fcard .fcard__content { gap:2px; padding:6px 10px 4px 13px; }
  .fcard .fcard__sub, .fcard .fcard__remain, .fcard .fcard__okcircle, .fcard .fcard__hint, .fcard .fcard__img { display:none; }
  .flashgrid--full .fcard__title,
  .flashgrid--t1 .fcard__title,
  .flashgrid--solo .fcard__title { font-size: var(--fs-flash-title-kompakt); }
  .flashgrid--kompakt .fcard__title { font-size: var(--fs-flash-label); }
  .fcard .fcard__title { line-height:1.1; }
  .fcard .fcard__bar { height:4px; margin-top:2px; }
  .fcard .fcard__badge { padding:2px 7px; line-height:1.1; }
}
@container fcard (max-height: 84px) {          /* Stufe C+: sehr wenig Höhe — Kern maximal verdichtet, bleibt sichtbar */
  .fcard .fcard__content { gap:1px; padding:3px 8px 3px 11px; }
  .fcard .fcard__title { font-size: var(--fs-flash-label); }
  .fcard .fcard__badge { padding:1px 6px; }
}
@container fcard (max-height: 50px) {          /* Extremfall (Splitscreen o. ä.): Status-Pille weg → Status bleibt
  über den farbigen Status-Streifen links; Name + dünner Balken bleiben. Garantiert kein Clipping bei JEDER Höhe. */
  .fcard .fcard__content { gap:0; padding:2px 6px 2px 10px; }
  .fcard .fcard__badge { display:none; }
}

/* ---------- Action row ---------- */
.c-actions { display:flex; justify-content:center; gap: var(--sp-m); padding-top: var(--sp-l); }
.btn { min-height: var(--action-h); min-width: 168px; border-radius: var(--radius-s); border:1px solid transparent;
  font: inherit; font-size: var(--fs-body1); font-weight:600; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap: var(--sp-xs); padding: 0 var(--sp-l); }
/* große Schritt-/Aktions-Buttons (Figma 138:3104): 68 px hoch, kräftigere Schrift */
.c-actions .btn { font-size: 24px; font-weight:700; padding: 0 var(--sp-xl); }
.btn--primary { background: var(--claas-lime); color: var(--on-primary); }   /* D-021: schwarz auf Lime */
.btn--primary:hover { background: var(--claas-lime-dark); }   /* Brand-Lime Hover #8d9d00; schwarzer Text 6.3:1 */
.btn--secondary { background: var(--surface); color: var(--text-primary); border-color: var(--outline); }
.btn--secondary:hover { background: var(--surface-grey); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--divider); min-width: 0; }
.btn--danger { background: var(--status-nok); color:#fff; }   /* Notification-Rot, weißer Text (4.74:1) */
.btn--danger:hover { filter: brightness(0.92); }

/* ---------- Fehlerzustand (negative Antwort → Fehler) ---------- */
/* In-Content-Fehlerblock (über dem Schrittinhalt): rotes Icon links, Ist/Soll rechts, rosa Fläche. */
.stage-error { display:flex; align-items:center; gap: var(--sp-l); width:100%; max-width: 720px; align-self:center;
  margin: var(--sp-m) 0 var(--sp-l); padding: var(--sp-l) var(--sp-xl); background: var(--status-nok-soft);
  border-radius: var(--radius-s); text-align:left; }
.stage-error__icon { flex:0 0 auto; line-height:0; }
.stage-error__body { display:flex; flex-direction:column; gap: 2px; min-width:0; }
.stage-error__title { font-family: var(--font-header); font-weight:700; font-size: var(--fs-h5); line-height: 1.3;
  margin: 0 0 var(--sp-xs); color: var(--text-primary); }
.stage-error__line { font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-primary); margin: 0; }
/* einheitliches Error-Icon (Error.svg) — überall wo der Fehler-/n.i.O.-Status erscheint */
.err-ico { flex:0 0 auto; vertical-align: middle; }
.btn[disabled] { opacity:.4; cursor:not-allowed; }
[data-profile="hall"] .c-actions { opacity:.55; }   /* aus Distanz nicht bedienbar */

/* ---------- Right rail: Settings Panel (Figma 217:2219) ---------- */
.c-right { grid-area: right; background: var(--surface); border-left:1px solid var(--border-faint);
  overflow-y:auto; padding: var(--sp-l) 0; display:flex; flex-direction:column; gap: var(--sp-l); }
.meta-sec { display:flex; flex-direction:column; gap: var(--sp-1_5); padding: 0 var(--sp-m); }
.meta-sec__h { font-family: var(--font-header); font-size: var(--fs-h6); line-height: var(--lh-h6);
  letter-spacing:.08px; text-transform:uppercase; color: var(--text-disabled); margin:0; }
.meta-divider { width:100%; height:0; border:0; border-top:1px solid var(--divider); margin:0; }
.meta-field { display:flex; flex-direction:column; gap:0; }
.meta-field__k { font-family: var(--font-body); font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-secondary); }
.meta-field__v { font-family: var(--font-header); font-weight:500; font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-primary); }
.sysrow { display:flex; align-items:center; gap: var(--sp-xs); margin-top: var(--sp-1_5); }
.sysrow__bat { color: var(--text-primary); flex:0 0 auto; }
.sysrow__label { font-family: var(--font-header); font-weight:500; font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-primary); }
.findings .meta-sec__h { color: var(--status-nok-text); }   /* roter Heading-Text auf hell = #c62828 (5.6:1) */
.finding { font-size: var(--fs-body2); display:flex; gap:6px; align-items:flex-start; margin-bottom: var(--sp-xs); cursor:pointer; }
.finding::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--status-nok); margin-top:7px; flex:0 0 auto; }
.finding small { color: var(--text-secondary); }
.field { display:flex; flex-direction:column; gap: 0; }
/* Subtiles Select (Figma 217:2219): Wert in h5-Typo + kleiner Dropdown-Pfeil, ohne Box. */
.field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  border:0; min-height:0; margin-left:-2px; padding: 0 22px 0 2px; width:auto; max-width:100%;
  font-family: var(--font-header); font-weight:500; font-size: var(--fs-h5); line-height: var(--lh-h5);
  color: var(--text-primary); background-color:transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right center; background-size: 16px 16px; }
.field select:focus-visible { outline: 2px solid var(--claas-lime); outline-offset: 2px; border-radius: var(--radius-s); }
.toggle--switch { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-m); }
.toggle--switch .toggle__label { font-family: var(--font-body); font-weight:500; font-size: var(--fs-h5);
  line-height: var(--lh-h5); color: var(--text-primary); }

/* ---------- Footer (Figma 223:2363 — running/startup bzw. standby: nur MN + Restzeit) ---------- */
.c-footer { flex: 0 0 var(--footer-h); display:flex; align-items:center; gap: var(--sp-l);
  padding: 10px var(--sp-l); background: var(--surface); border-top:1px solid var(--divider); }
.c-footer__left { display:flex; align-items:center; gap: var(--sp-l); flex:1; min-width:0; }
.c-footer__right { display:flex; align-items:center; justify-content:flex-end; gap: var(--sp-m); flex:1; min-width:0; }
.foot-mn { font-family: var(--font-header); font-size: 18px; letter-spacing:.08px; color: var(--text-primary); white-space:nowrap; }
.foot-report { display:inline-flex; align-items:center; gap: var(--sp-xs); border:0; background:transparent; cursor:pointer;
  font:inherit; font-family: var(--font-header); font-size: var(--fs-h5); font-weight:500; color: var(--text-primary);
  padding: 0 var(--sp-xs); white-space:nowrap; }
.foot-report:hover { color: var(--claas-lime-dark); }
/* Fehlerzahl rechts neben der Leiste; padding-left gleicht ihre Breite aus, damit die
   Leiste exakt mittig im Screen sitzt (left-of-bar = right-of-bar): 64 + 72 = 16+48+16+56. */
.foot-progress { display:flex; align-items:center; gap: var(--sp-m); flex:0 0 auto; padding-left: 72px; }
.foot-progress__num { font-family: var(--font-header); font-size: 24px; letter-spacing:.08px;
  min-width:48px; font-variant-numeric: tabular-nums; }
.foot-progress__num--l { text-align:right; }
/* Einheiten-Label im Flash-Schritt (Footer zeigt fertige/gesamte Geräte statt Leaf-Steps). */
.foot-progress__unit { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-secondary); margin-left:-8px; white-space:nowrap; }
.foot-nok { display:inline-flex; align-items:center; gap: var(--sp-xxs); width:56px;
  font-family: var(--font-header); font-size: 24px; letter-spacing:.08px; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.foot-bar { display:block; width:288px; height:12px; background: rgba(179,198,24,0.35); overflow:hidden; } /* helle Lime-Tönung (Track) */
.foot-bar > i { display:block; height:100%; background: var(--claas-lime-dark); }
/* Tertiär (wie „Problem melden"): randlos, Text + Icon */
.btn-stop { display:inline-flex; align-items:center; gap: var(--sp-xs); border:0; background:transparent;
  cursor:pointer; font: inherit; font-family: var(--font-header); font-size: var(--fs-h5); font-weight:500;
  color: var(--text-primary); white-space:nowrap; padding: 0 var(--sp-xs); }
.btn-stop:hover { color: var(--claas-lime-dark); }
/* Footer rechts: Steuer-Buttons (Reset · Stop/Play) · Trenner · beschriftete Zeitblöcke (Session · Takt). */
.foot-ctrl { display:flex; align-items:center; gap: var(--sp-xs); }
.foot-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:0; background:transparent; cursor:pointer; color: var(--text-primary); border-radius: var(--radius-s); padding:0; }
.foot-iconbtn:hover { background: var(--surface-grey); }
.foot-iconbtn--on { color: var(--claas-lime-dark); }
.foot-sep { width:1px; align-self:stretch; margin: var(--sp-xs) 0; background: var(--divider); }
.foot-tb { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.foot-tb__label { font-family: var(--font-body); font-size: var(--fs-body2); letter-spacing:.04em;
  text-transform:uppercase; color: var(--text-secondary); }
.foot-tb__val { font-family: var(--font-header); font-size: 22px; letter-spacing:.08px;
  font-variant-numeric: tabular-nums; color: var(--text-primary); min-width:64px; text-align:right; }
.foot-tb__val--muted { color: var(--text-secondary); }

/* ---------- Abschluss-Report (Meta-Schritt, zeigt die Übersicht) ---------- */
/* Abschlussbericht / Übersicht als Tabelle (Figma 372:6550). Kopf + Tabellenkopf + Buttons fix,
   nur die Zeilen scrollen. Weiße Karte wie die Stage. */
.report { flex:1 1 auto; min-height:0; background: var(--surface); border:1px solid var(--divider);
  border-radius: var(--radius-s); box-shadow: var(--elevation-1); padding: var(--sp-xl);
  display:flex; flex-direction:column; }
.report__inner { width:100%; max-width: 800px; margin: 0 auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.report__top { flex:0 0 auto; }
.report__titlerow { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-m); }
.report__title { font-family: var(--font-header); font-weight:700; font-size: var(--fs-h1); line-height: var(--lh-h1); margin:0; }
.report__filter { flex:0 0 auto; }
.report__sub { color: var(--text-secondary); font-size: var(--fs-body1); margin: var(--sp-xs) 0 var(--sp-l); }
/* gemeinsames Spaltenraster für Kopf- und Datenzeilen */
.report__row { display:grid; grid-template-columns: 168px minmax(0,1fr) 140px minmax(120px,180px);
  align-items:center; gap: var(--sp-m); padding: var(--sp-1_5) var(--sp-xs);
  border-bottom: 1px solid var(--divider); font-size: 18px; line-height: 26px; }
.report__row--head { color: var(--text-primary); font-weight:700; border-bottom: 1px solid var(--outline); }
/* Zeile anklickbar: springt zum Schritt zurück (Overview + Abschlussbericht, alle Testfälle gleich). */
.report__row--click { cursor:pointer; }
.report__row--click:hover { background: var(--surface-grey); }
/* Flash-Befund-Zeile (n.i.O. je Modul) — nicht navigierbar (kein Sequenz-Schritt). */
.report__row--finding { cursor:default; }
/* aktueller Schritt in der Übersicht hervorgehoben (wie im Sequencer) */
.report__row--current, .report__row--current:hover { background: rgba(107,118,19,0.16); }
.report__name, .report__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Akkordeon-Zeilen: Einrückung je Ebene + ein-/ausklappbarer Chevron auf Eltern-Zeilen. */
.report__step { display:flex; align-items:center; gap: var(--sp-xs); min-width:0; }
.report__stepid { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report__chev { flex:0 0 auto; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; padding:0; cursor:pointer; color: var(--text-primary); border-radius: var(--radius-s); }
.report__chev:hover { background: var(--surface-grey); }
.report__chev svg { transition: transform .15s ease; }
.report__chev.is-open svg { transform: rotate(90deg); }
.report__chev--leaf { visibility:hidden; cursor:default; }
.report__rows { flex:1 1 auto; min-height:0; overflow-y:auto; }
.report__status { display:inline-flex; align-items:center; gap: var(--sp-xs); }
.report__status--pending { color: var(--text-secondary); }
.report__empty { color: var(--text-secondary); padding: var(--sp-l) var(--sp-xs); }
.report__actions { flex:0 0 auto; display:flex; justify-content:center; gap: var(--sp-m); padding-top: var(--sp-l); }

/* ---------- Reparatur: Testumfang wählen (ScopeScreen) ---------- */
.scope { flex:1 1 auto; min-height:0; background: var(--surface); border:1px solid var(--divider);
  border-radius: var(--radius-s); box-shadow: var(--elevation-1); padding: var(--sp-xl); display:flex; flex-direction:column; }
.scope__inner { width:100%; max-width: 800px; margin: 0 auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.scope__top { flex:0 0 auto; }
.scope__titlerow { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-m); }
.scope__title { font-family: var(--font-header); font-weight:700; font-size: var(--fs-h1); line-height: var(--lh-h1); margin:0; }
.scope__filter { flex:0 0 auto; }
.scope__form { display:flex; align-items:center; gap: var(--sp-l); margin: var(--sp-l) 0; }
.scope__mn { flex:1 1 auto; min-width:0; font: inherit; padding: 18px 14px; border:1px solid var(--outline);
  border-radius: var(--radius-s); background: var(--surface); color: var(--text-primary); }
.scope__mn:focus { outline: 2px solid var(--claas-lime); outline-offset:-1px; }
.scope__mn[readonly] { color: var(--text-secondary); }
.scope__action { flex:0 0 auto; white-space:nowrap; }
.scope__rows { flex:1 1 auto; min-height:0; overflow-y:auto; }
.scope__row { display:grid; grid-template-columns: 40px minmax(0,1fr) 160px 40px; align-items:center; gap: var(--sp-m);
  padding: var(--sp-1_5) var(--sp-xs); border-bottom:1px solid var(--divider); font-size: 18px; line-height: 26px; }
.scope__row--head { color: var(--text-primary); font-weight:700; border-bottom:1px solid var(--outline); }
/* ausgeklappte Zeile: kein Trenner zwischen Zeile und Detailtext (wirkt als ein Block) */
.scope__row--open { border-bottom: 0; }
.scope__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scope__status { display:inline-flex; align-items:center; gap: var(--sp-xs); }
.scope__exp { width:32px; height:32px; justify-self:end; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer; color: var(--text-primary); border-radius: var(--radius-s); padding:0; }
.scope__exp:hover { background: var(--surface-grey); }
.scope__exp svg { transition: transform .15s ease; }
.scope__exp.is-open svg { transform: rotate(180deg); }
/* Submodul-Zeile: gleiche Grid-Spalten wie das Modul, Checkbox eingerückt + ohne Trenner zur Folgereihe */
.scope__row--sub { border-bottom:0; padding-top: var(--sp-xs); padding-bottom: var(--sp-xs); }
.scope__row--sub .chk { margin-left: var(--sp-l); }
.scope__row--sub .scope__name { color: var(--text-primary); }
.scope__detail { padding: var(--sp-m) var(--sp-xs) var(--sp-m) 56px; color: var(--text-secondary);
  font-size: var(--fs-body1); line-height: var(--lh-body1); border-bottom:1px solid var(--divider); }
.scope__empty { color: var(--text-secondary); padding: var(--sp-l) var(--sp-xs); }
.scope__actions { flex:0 0 auto; display:flex; justify-content:center; padding-top: var(--sp-l); }
/* eckige Checkbox (Modulauswahl) */
.chk { width:24px; height:24px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--outline); border-radius: var(--radius-s); background: var(--surface); cursor:pointer; padding:0; }
.chk--on { background: var(--claas-lime-dark); border-color: var(--claas-lime-dark); }

/* ---------- Overview board (D-017) ---------- */
.overview { grid-area: main; padding: var(--sp-l); overflow-y:auto; }
.ov-card { background: var(--surface); border:1px solid var(--divider); border-radius: var(--radius-s);
  box-shadow: var(--elevation-1); padding: var(--sp-l); }
.ov-bar { display:flex; align-items:center; gap: var(--sp-m); margin-bottom: var(--sp-m); }
.chip { border:1px solid var(--outline); background:var(--surface); border-radius: var(--radius-full);
  padding: 6px 14px; font-size: var(--fs-body2); cursor:pointer; }
.chip[aria-pressed="true"] { background: var(--claas-lime); border-color: var(--claas-lime); color: var(--on-primary); }
.ov-phase { margin-bottom: var(--sp-l); }
.ov-phase h3 { font-size: var(--fs-body2); text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin:0 0 var(--sp-xs); }
.ov-steps { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--sp-xs); }
.ov-step { display:flex; align-items:center; gap: var(--sp-1_5); border:1px solid var(--divider);
  border-radius: var(--radius-s); padding: var(--sp-xs) var(--sp-1_5); cursor:pointer; background:var(--surface); }
.ov-step:hover { background: var(--surface-grey); }
.ov-step .t { font-size: var(--fs-body2); }
.ov-step .s { margin-left:auto; font-size: var(--fs-caption); }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Vollbild-Navigationsmenü (Burger; Figma 363:10290 / 364:3429 / 364:3375) ---------- */
.navmenu { position:fixed; inset:0; z-index:1000; background: var(--surface);
  overflow:auto; display:flex; flex-direction:column; }
.navmenu__body { flex:1 0 auto; display:flex; flex-direction:column; gap: var(--sp-xl);
  padding: var(--sp-l) var(--sp-xl) var(--sp-xl); }
/* Hellgraue Fußleiste: links Sprachumschalter, rechts Software-Info */
.navmenu__foot { flex:0 0 auto; background: #f5f5f5; display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-m); padding: var(--sp-l) var(--sp-xl); }
.navmenu__lang { display:inline-flex; align-items:center; gap: var(--sp-xs); color: var(--text-primary); }
.navmenu__globe { flex:0 0 auto; }
.navmenu__lang select { appearance:none; -webkit-appearance:none; cursor:pointer; border:0; min-height:0;
  padding: 0 24px 0 2px; background-color:transparent; color: var(--text-primary);
  font-family: var(--font-header); font-size: var(--fs-h5); line-height: var(--lh-h5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right center; background-size: 16px 16px; }
.navmenu__soft { display:inline-flex; align-items:center; gap: var(--sp-m);
  font-family: var(--font-header); font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-primary); }
.navmenu__soft-sep { width:1px; height:19px; background: var(--divider); }
/* „Currently Active: …" über der Navigation */
.navmenu__active { margin:0; padding-left: var(--sp-xl); font-family: var(--font-header);
  font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-primary); }
.navmenu__active-lbl { color: var(--text-secondary); }
/* Fußleiste: links Sprache + Beginner-Mode, mittig Software-Info, rechts System-Status */
.navmenu__foot-left { display:inline-flex; align-items:center; gap: var(--sp-xl); }
.navmenu__beginner { gap: var(--sp-xs); }
.navmenu__status { display:inline-flex; align-items:center; gap: var(--sp-l);
  font-family: var(--font-header); font-size: var(--fs-body1); color: var(--text-primary); }
.navmenu__status-item { display:inline-flex; align-items:center; gap: var(--sp-xs); }
.navmenu__status-dot { width:10px; height:10px; border-radius:50%; background: var(--status-ok); flex:0 0 auto; }
.navmenu__status-dot.is-nok { background: var(--status-nok); }
.navmenu__close { align-self:flex-start; border:0; background:transparent; cursor:pointer;
  width:60px; height:60px; display:grid; place-items:center; color: var(--text-primary); }
.navmenu__close:hover { color: var(--claas-lime-dark); }
.navmenu__cols { display:flex; gap: 64px; align-items:flex-start; padding-left: var(--sp-xl); }
.navmenu__col { list-style:none; margin:0; padding:0; width: 340px; flex:0 0 auto; display:flex; flex-direction:column; gap: var(--sp-1_5); }
/* Zeilen ohne Corner Radius; aktiv/hover = olivgrüner Tint (Figma rgba(107,118,19,.2)) */
.navmenu__row { display:flex; align-items:center; gap: var(--sp-xs); width:100%; text-align:left;
  font: inherit; cursor:pointer; border:0; border-radius:0; background:transparent;
  padding: var(--sp-xs); color: var(--text-primary); }
.navmenu__row:hover { background: rgba(107,118,19,0.12); }
.navmenu__row--active { background: rgba(107,118,19,0.20); }
.navmenu__lbl { flex:1; min-width:0; font-family: var(--font-header); }
/* Typografie nach Spalten-Tiefe (nicht nach Blatt/Zweig): Ebene 1 = 24 Bold + Icon,
   Ebene 2 = 24 Regular (einheitlich, egal ob Link oder Untermenü), Ebene 3+ = 20 Regular. */
.navmenu__row--cat .navmenu__lbl { font-weight:700; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.navmenu__row--l2 .navmenu__lbl { font-weight:400; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.navmenu__row--leaf .navmenu__lbl { font-weight:400; font-size: var(--fs-h5); line-height: var(--lh-h5); }
.navmenu__row--current .navmenu__lbl { font-weight:700; }
.navmenu__ico { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; color: var(--text-primary); }
.navmenu__chev { flex:0 0 auto; display:grid; place-items:center; color: var(--text-primary); }
.navmenu__arrow { flex:0 0 auto; display:grid; place-items:center; color: var(--text-primary); }

/* ---------- Login (Demo-Auth: beliebige Eingabe genügt, kein echtes Backend) ---------- */
.login { display: grid; place-items: center; padding: var(--sp-xl); background: var(--surface-grey); overflow-y: auto; }
/* Maschinennummer-Screen im Cockpit: füllt die Main-Area, ohne eigenen Hintergrund/Scroll */
.c-main > .login { height: 100%; min-height: 0; padding: 0; background: transparent; overflow: hidden; }
.login__card { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-s); box-shadow: var(--elevation-1); padding: var(--sp-xl); }
.login__title { font-family: var(--font-header); font-size: var(--fs-h5); margin: 0; }
.login__sub { color: var(--text-secondary); margin: var(--sp-xs) 0 var(--sp-l); }
.login__field { position: relative; margin-bottom: var(--sp-l); }
.login__field label { position: absolute; top: -9px; left: 12px; padding: 0 4px;
  background: var(--surface); font-size: var(--fs-caption); color: var(--text-secondary); }
.login__field input { width: 100%; font: inherit; padding: 18px 14px;
  border: 1px solid var(--outline-input); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text-primary); }
.login__field input:focus { outline: 2px solid var(--claas-lime); outline-offset: -1px; }
.login__field select { width: 100%; font: inherit; padding: 16px 40px 16px 14px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--outline-input); border-radius: var(--radius-s);
  background-color: var(--surface); color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23676767' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.login__field select:focus { outline: 2px solid var(--claas-lime); outline-offset: -1px; }
.login__actions { display: flex; justify-content: flex-end; margin-top: var(--sp-m); }
/* Maschinennummer: Sekundär „Automatische MN" links, Primär „Test starten" rechts */
.login__actions--split { justify-content: space-between; gap: var(--sp-m); }
.login__btn { min-width: 0; min-height: 44px; padding: 0 var(--sp-l); }

/* ---------- Launcher (Demo-Startscreen, kein Produkt-Hub — D-010 offen) ---------- */
.launcher { display: grid; place-items: center; padding: var(--sp-xl); background: var(--surface-grey); overflow-y: auto; }
.launcher__card { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-s); box-shadow: var(--elevation-1); padding: var(--sp-xl); }
.launcher__logo { height: 32px; width: auto; display: block; }
.launcher__title { font-family: var(--font-header); font-size: var(--fs-h1); margin: var(--sp-xxs) 0 0; }
.launcher__sub { color: var(--text-secondary); margin: var(--sp-xxs) 0 var(--sp-l); }
.launcher__runs { display: grid; gap: var(--sp-1_5); }
.launcher__run { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m);
  text-align: left; font: inherit; cursor: pointer; padding: var(--sp-m); color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-s); }
.launcher__run:hover { border-color: var(--claas-lime); background: var(--selected); }
.launcher__run-title { font-size: var(--fs-body1); font-weight: 600; }
.launcher__run-uc { font-size: var(--fs-caption); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
/* ---------- ConfirmDialog (modal) — wiederverwendbare Bestätigung ---------- */
.confirm { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center;
  padding: var(--sp-xl); background: rgba(0,0,0,.5); }
.confirm__card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-s); box-shadow: var(--elevation-1); padding: var(--sp-xl); }
.confirm__title { font-family: var(--font-header); font-size: var(--fs-h5); margin: 0; }
.confirm__msg { color: var(--text-secondary); margin: var(--sp-xs) 0 var(--sp-l); }
.confirm__actions { display: flex; justify-content: space-between; gap: var(--sp-m); }
.confirm__actions .btn { min-height: 44px; padding: 0 var(--sp-l); }
.launcher__error { color: var(--status-nok-text); font-size: var(--fs-body2); margin-top: var(--sp-m); }
.launcher__own { display: block; margin-top: var(--sp-l); color: var(--text-secondary); font-size: var(--fs-body2); }
.launcher__own input { display: block; margin-top: var(--sp-xs); font-size: 13px; }
.launcher__hint { margin-top: var(--sp-m); color: var(--text-disabled); font-size: var(--fs-caption); }

/* ---------- Spezialinhalt-Mock (Layout folgt) ---------- */
.blk-special { display: flex; flex-direction: column; gap: var(--sp-xs); align-self: flex-start;
  min-width: 280px; max-width: 560px; background: var(--surface-grey); border: 1px dashed var(--outline);
  border-radius: var(--radius-s); padding: var(--sp-l) var(--sp-m); }
.blk-special__tag { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.blk-special__label { font-size: var(--fs-h5); font-weight: 700; color: var(--text-primary); }
.blk-special__note { font-size: var(--fs-body2); color: var(--text-disabled); font-style: italic; }

/* Hilfetext-Baustein (ausführliche Anweisung): Zeilen mit Pfeil, große Schrift. */
/* Hilfetext-Stepper: verbundene Kreise; erledigt = Lime + schwarzes Häkchen, offen = Outline */
.blk-help { align-self:center; display:flex; flex-direction:column; align-items:flex-start; }
.blk-help__row { display:flex; align-items:center; gap: var(--sp-l); min-height:72px; position:relative; }
.blk-help__marker { flex:0 0 auto; position:relative; width:40px; height:40px; border-radius:50%;
  border:2px solid var(--outline); background: var(--surface); display:grid; place-items:center; }
.blk-help__row.is-done .blk-help__marker { background: var(--claas-lime); border-color: var(--claas-lime); }
/* Verbindungslinie nach unten zum nächsten Kreis */
.blk-help__row:not(:last-child) .blk-help__marker::after { content:""; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); width:2px; height: calc(72px - 40px); background: var(--outline); }
.blk-help__txt { font-family: var(--font-header); font-weight:400; font-size:40px; line-height:1.2; color: var(--text-primary); letter-spacing:.08px; }

/* ---------- Kompakt-Breakpoint (< 1280px): fest kodierte px-Werte (Typo, Buttons, Zeilenhöhen) ---------- */
@media (max-width: 1280px) {
  .c-header__title { font-size: 22px; }
  .c-header__case, .c-header__user { font-size: 16px; }
  .toggle { font-size: 16px; }
  .burger { width: 48px; height: 48px; }
  .icon-btn--door { width: 36px; height: 36px; }
  .seg { height: 44px; }
  .seq-pill { min-height: 42px; }
  .seq-pill__lbl { font-size: 16px; line-height: 22px; }
  .seq-pill__chev { width: 26px; height: 26px; }
  .c-actions .btn { font-size: 20px; }
  .btn { min-width: 140px; }
  .report__row, .scope__row { font-size: 16px; line-height: 22px; }
  .cal__table { font-size: 16px; }
  .cal__table td { height: 44px; }
  .autowait__clock { width: 110px; height: 110px; }
  .foot-progress__num { font-size: 20px; }
  .foot-tb__val { font-size: 18px; }
  .foot-iconbtn { width: 36px; height: 36px; }
  .foot-bar { width: 220px; }
  .foot-mn { font-size: 16px; }
  .range { width: min(560px, 84%); padding-top: 80px; }   /* Tooltip kompakter (24 + 52 ≈ 76px → 80px Reserve) */
  .range__bar { height: 14px; }
  .range__tick { height: 22px; }
  .range__tip { font-size: 32px; line-height: 32px; padding: 10px 18px; bottom: 24px; }
  .range__tip::after { border-left-width: 20px; border-right-width: 20px; border-top-width: 24px; }
  .range__scale { height: 20px; margin-top: 16px; }
  .range__lbl { font-size: 24px; line-height: 20px; }
  .blk-help__arrow { width:36px; height:36px; }
  .blk-help__txt { font-size: 30px; }
  .cdring { width:240px; height:240px; }
  .cdring__num { font-size:78px; }
}

/* ---------- Groß-Breakpoint (> 2000px): hartkodierte px-Werte nachziehen (nach den Basisregeln) ----------
   Werte 1:1 aus dem Figma-Großlayout (446:12958). Das meiste skaliert über die Tokens (s. tokens.css);
   hier nur die Stellen, die feste px haben oder von der Token-Skala abweichen. */
@media (min-width: 2000px) {
  .c-header__title { font-size: 36px; }
  .seg { height: 56px; }
  /* Sequencer-Baum: Schritt-/Modultext 24px, Zeilenhöhe 48 */
  .seq-node { font-size: 24px; line-height: 32px; min-height: 48px; }
  .seq-chev { width: 28px; height: 28px; }
  /* Schritt-Eyebrow 32px (5xl); Überschrift kommt über --fs-h1 (60px) */
  .stage__name { font-size: 32px; line-height: 40px; }
  .c-actions .btn { font-size: 40px; min-width: 200px; }
  .report__row, .scope__row { font-size: 24px; line-height: 32px; }
  /* Footer: Buttons, Fortschritt (Zahlen 32, Balken 16×520), NOK-Zähler, Werte */
  .btn-stop, .foot-report { font-size: 24px; }
  .btn-stop svg, .foot-report svg { width: 32px; height: 32px; }
  .foot-progress { gap: var(--sp-l); padding-left: 84px; }
  .foot-progress__num { font-size: 32px; font-weight: 700; }
  .foot-bar { width: 520px; height: 16px; }
  .foot-nok { width: auto; font-size: 32px; }
  .foot-nok .err-ico { width: 40px; height: 40px; }
  .foot-tb__val { font-size: 24px; }
  .foot-iconbtn { width: 48px; height: 48px; }
}
.seq-dot--skipped { background:#c4c4c4; border:0; }   /* übersprungen: neutraler grauer Punkt (nur V3 möglich) */

/* Bremstest-Variante „2 Diagramme": zwei gestapelte Einzeldiagramme, je Linie eines. */
.brake--twoDiagrams { gap: var(--sp-l); }
.brake2d { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.brake2d__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m); margin-bottom: var(--sp-xs); }
.brake2d__title { font-family: var(--font-header); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.brake2d__mm { font-size: 16px; color: var(--text-secondary); background: var(--surface-grey); padding: 4px 12px; border-radius: var(--radius-s); white-space: nowrap; }
.brake2d__chart { flex: 1 1 auto; min-height: 0; width: 100%; }