:root {
  --bg-main: #070b0f;
  --bg-sidebar: #05080d;
  --bg-card: #111820;
  --bg-card-soft: #151d27;
  --bg-card-hover: #1a2430;

  --border-soft: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.28);

  --text-main: #f3f6fa;
  --text-muted: #9ca8b6;
  --text-soft: #6f7c8d;
  --text-prim: var(--text-main);
  --text-primary: var(--text-main);
  --text-sec: var(--text-muted);
  --text-secondary: var(--text-muted);

  --accent: #35d66b;
  --accent-blue: #38bdf8;

  --ok: #35d66b;
  --warn: #f7c948;
  --error: #ff4d4f;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
  --bg-element: rgba(15, 23, 42, 0.72);
  --bg-hover: rgba(30, 41, 59, 0.86);
  --text-dim: #64748b;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dx: 0px;
  --dy: 0px;
  --leistung: 0;

  --hintergrund: var(--bg-main);
  --sidebar: var(--bg-sidebar);
  --karte: var(--bg-card);
  --karte-hell: var(--bg-card-soft);
  --linie: var(--border-soft);
  --cyan: var(--accent-blue);
  --text: var(--text-main);
  --gruen: var(--ok);
  --gelb: var(--warn);
  --rot: var(--error);
  --radius: var(--radius-sm);
  --shadow: var(--shadow-soft);
  /* HMI panel backgrounds — referenced throughout Produktionslinie / Elektronik */
  --panel-bg: var(--bg-card);
  --border:   var(--border-soft);
  --accent-rgb: 53, 214, 107;
  --bg-alt: rgba(255, 255, 255, 0.04);
  --btn-color: var(--accent);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  background: var(--bg-main);
}

body {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% -12%, rgba(53, 214, 107, 0.07), transparent 32vw),
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.06), transparent 34vw),
    var(--bg-main);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, p {
  margin: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 12px;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(11, 17, 23, 0.94), rgba(5, 8, 13, 0.98)),
    #080c11;
  overflow-y: auto;
}

.logo {
  display: grid;
  gap: 4px;
  margin-bottom: 24px;
  padding: 0 8px;
}

.logo strong {
  font-size: 28px;
  letter-spacing: 1px;
}

.logo span,
.kopfbereich p,
.aktualisierung span,
.demo-hinweis,
.leer {
  color: var(--text-muted);
}

.navigation,
.nav-gruppe,
.nav-unterpunkte {
  display: grid;
}

.navigation {
  gap: 10px;
}

.nav-gruppe {
  gap: 6px;
}

.nav-unterpunkte {
  gap: 5px;
  padding-left: 8px;
  border-left: 1px solid rgba(111, 182, 255, 0.14);
}

.nav-gruppe.eingeklappt .nav-unterpunkte {
  display: none;
}

.nav-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-color: transparent;
  background: transparent;
  color: #dbe9f8;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 10px 8px;
}

.nav-toggle span {
  font-size: 13px;
  text-transform: uppercase;
}

.nav-toggle b {
  color: var(--cyan);
  transition: transform 0.18s ease;
}

.nav-gruppe.eingeklappt .nav-toggle b {
  transform: rotate(-90deg);
}

button,
.nav-button {
  border: 1px solid rgba(159, 176, 195, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(16, 32, 54, 0.72);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 9px 11px;
}

.nav-button {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 9px;
  align-items: center;
  text-align: left;
  line-height: 1.25;
  padding-left: 12px;
}

.nav-button svg {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-button:hover svg,
.nav-button.active svg {
  color: var(--accent-blue);
}

button:hover,
.nav-button:hover,
.nav-button.active {
  background: rgba(27, 54, 87, 0.92);
  border-color: var(--cyan);
}

.nav-button.active {
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 0 1px rgba(111, 182, 255, 0.12);
}

.nav-button.rollen-fokus:not(.active) {
  border-color: rgba(111, 182, 255, 0.32);
}

.nav-button.rollen-neben {
  opacity: 0.58;
}

.nav-button.rollen-gesperrt,
.nav-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.nav-button.rollen-neben:hover,
.nav-button.rollen-neben.active {
  opacity: 1;
}

.nav-gruppe.rollen-gruppe-fokus .nav-toggle {
  color: #f8fafc;
}

button.gesperrt,
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.25);
}

.nav-button.active i {
  background: #6fb6ff;
  border-color: #6fb6ff;
}

.app {
  min-width: 0;
  max-width: 100%;
}

.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(240px, 520px) minmax(280px, auto);
  grid-template-areas:
    "title search actions"
    "status status status";
  align-items: center;
  gap: 10px 18px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(7, 11, 16, 0.94);
  backdrop-filter: blur(10px);
}

h1 {
  font-size: 26px;
}

.kopf-text p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.kopf-text p span {
  padding: 4px 8px;
  border: 1px solid rgba(159, 176, 195, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 13px;
}

.aktualisierung {
  text-align: right;
}

.rollenwahl {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.rollen-hinweis,
.rechte-hinweis {
  color: var(--text-muted);
  font-size: 12px;
}

.rollen-hinweis.warnung {
  color: #ffd18a;
}

.schnellzugriff {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.schnellzugriff button {
  padding: 9px 12px;
  border-color: rgba(111, 182, 255, 0.28);
  background: rgba(56, 189, 248, 0.08);
  color: #dbeafe;
}

.schnellzugriff button:hover {
  background: rgba(56, 189, 248, 0.16);
}

.suche input {
  min-width: min(260px, 100%);
}

.such-ergebnisse {
  position: absolute;
  right: 28px;
  top: 148px;
  z-index: 5;
  display: grid;
  gap: 6px;
  width: min(420px, calc(100vw - 40px));
}

.such-ergebnisse:empty {
  display: none;
}

.such-ergebnisse button,
.such-ergebnisse p {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(111, 182, 255, 0.28);
  border-radius: var(--radius-sm);
  background: #0b1728;
  color: var(--text);
  text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.aktualisierung strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.verbindung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.verbindung.status-ok {
  color: var(--ok);
  border-color: rgba(53, 214, 107, 0.28);
  background: rgba(53, 214, 107, 0.08);
}

.verbindung.status-warnung {
  color: var(--warn);
  border-color: rgba(247, 201, 72, 0.32);
  background: rgba(247, 201, 72, 0.08);
}

.verbindung.status-fehler {
  color: var(--error);
  border-color: rgba(255, 77, 79, 0.36);
  background: rgba(255, 77, 79, 0.08);
}

.inhalt {
  padding: 22px;
}

.seite {
  display: none;
}

.seite.aktiv {
  display: grid;
  gap: 18px;
}

.kennzahlen-grid,
.motor-grid,
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  min-width: 0;
}

.kennzahlen-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.kpi-gruppe {
  border: 1px solid rgba(159, 176, 195, 0.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(20, 36, 58, 0.92), rgba(15, 27, 44, 0.96));
  padding: 12px;
}

.kpi-gruppe h3 {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.kpi-zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kpi-gruppe .kennzahl {
  box-shadow: none;
  padding: 10px;
  min-height: 72px;
}

.kpi-kritisch {
  border-color: rgba(231, 76, 60, 0.75);
}

.kpi-warnung {
  border-color: rgba(241, 196, 15, 0.65);
}

.kpi-ok {
  border-color: rgba(46, 204, 113, 0.55);
}

.leitstand-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  min-width: 0;
}

.leitstand-links,
.leitstand-rechts {
  display: grid;
  gap: 16px;
  align-content: start;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  min-width: 0;
}

.kennzahl,
.panel,
.motor-karte {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--karte-hell), var(--karte));
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.kennzahl {
  padding: 16px;
}

.kennzahl span {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
}

.kennzahl strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  line-height: 1.12;
}

.panel {
  display: grid;
  gap: 13px;
  padding: 16px;
}

.panel h2,
.motor-karte h2 {
  font-size: 19px;
  letter-spacing: 0.01em;
}

.panel h3 {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 14px;
  text-transform: uppercase;
}

.motor-karte {
  overflow: hidden;
  border-top-width: 4px;
}

.motor-karte.status-rot {
  animation: kritisch-puls 2.4s ease-in-out infinite;
}

@keyframes kritisch-puls {
  0%, 100% { box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.35), 0 12px 30px rgba(0, 0, 0, 0.22); }
  50% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.16), 0 12px 30px rgba(0, 0, 0, 0.22); }
}

.karten-kopf {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--karte-hell);
}

.karten-kopf p {
  margin-top: 5px;
  color: var(--text-muted);
}

.ampel {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 28px currentColor;
}

.gesamtstatus-panel {
  align-content: center;
  justify-items: start;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(111, 182, 255, 0.12);
  border-left: 4px solid var(--linie);
  background: linear-gradient(180deg, rgba(16, 29, 46, 0.98), rgba(12, 22, 36, 0.98));
  color: var(--text);
}

.gesamtstatus-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 120px;
  background: radial-gradient(circle at 42px 62px, rgba(111, 182, 255, 0.12), transparent 68%);
  pointer-events: none;
}

.gesamtstatus-panel.status-rot {
  border-color: rgba(231, 76, 60, 0.72);
  background: linear-gradient(180deg, rgba(16, 29, 46, 0.98), rgba(12, 22, 36, 0.98));
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.16), 0 18px 44px rgba(231, 76, 60, 0.10);
}

.gesamtstatus-panel.status-gelb {
  border-color: rgba(241, 196, 15, 0.68);
  background: linear-gradient(180deg, rgba(16, 29, 46, 0.98), rgba(12, 22, 36, 0.98));
  color: var(--text);
}

.gesamtstatus-panel.status-gruen {
  border-color: rgba(46, 204, 113, 0.48);
  background: linear-gradient(180deg, rgba(16, 29, 46, 0.98), rgba(12, 22, 36, 0.98));
  color: var(--text);
}

.status-held {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
}

.status-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-held strong {
  display: block;
  margin-bottom: 6px;
  font-size: 34px;
}

.gesamtampel {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 32px currentColor, inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.gesamtstatus-panel .gesamtampel.status-gruen {
  color: var(--gruen);
  background-color: var(--gruen);
}

.gesamtstatus-panel .gesamtampel.status-gelb {
  color: var(--gelb);
  background-color: var(--gelb);
}

.gesamtstatus-panel .gesamtampel.status-rot {
  color: var(--rot);
  background-color: var(--rot);
}

.handlung-panel {
  border-top: 4px solid #6fb6ff;
}

.prioritaet-badge,
.wartungsfenster {
  display: inline-block;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: rgba(111, 182, 255, 0.12);
  color: #d6e2ef;
}

.checkliste {
  list-style: none;
  padding-left: 0;
}

.checkliste li::before {
  content: "□";
  margin-right: 8px;
  color: var(--text-muted);
}

.produktionskarte {
  border-top: 4px solid #6fb6ff;
}

.produktions-zahl {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.produktions-zahl strong {
  font-size: 42px;
}

.produktions-zahl span {
  color: var(--text-muted);
}

.oee-grid,
.production-motor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  min-width: 0;
}

.oee-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
}

.oee-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.oee-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1.7rem;
}

.signalweg-card {
  min-width: 0;
}

.sw-section-header {
  padding: 10px 4px 4px;
}
.sw-section-header h3 {
  margin: 0 0 2px;
  font-size: 15px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.sw-section-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  opacity: .7;
}

.sw-filter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.sw-filter-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sw-filter-btn:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.sw-filter-btn.aktiv {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

.signalweg-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.signal-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0;
}

.signal-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-content: start;
  min-width: 150px;
  max-width: 220px;
  flex: 1 1 150px;
  padding: 10px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
}

.signal-step strong,
.signal-step small {
  min-width: 0;
  overflow-wrap: break-word;
}

.signal-step small {
  grid-column: 2;
  color: var(--text-muted);
}

.signal-step.ok {
  border-color: rgba(53, 214, 107, 0.26);
}

.signal-step.warn {
  border-color: rgba(247, 201, 72, 0.42);
}

.signal-step.error {
  border-color: rgba(255, 77, 79, 0.55);
}

.signal-arrow {
  align-self: center;
  color: var(--text-muted);
}

.status-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie);
  color: var(--text-muted);
  font-size: 14px;
}

.kurzmeldung {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(159, 176, 195, 0.18);
  color: var(--text-muted);
}

.kurzmeldung > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.kurzmeldung span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text);
  line-height: 1.35;
}

.kurzmeldung button {
  flex: 0 0 auto;
}

.status-details strong {
  color: var(--text);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 0;
}

.panel > table,
.motor-karte > table,
.diagnose-block > table,
.table-wrap > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.panel > table th,
.motor-karte > table th,
.diagnose-block > table th {
  white-space: nowrap;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(159, 176, 195, 0.18);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
}

code {
  overflow-wrap: anywhere;
}

th {
  color: var(--text-muted);
  font-weight: 600;
}

.status-chip {
  display: inline-block;
  min-width: 54px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  color: #07111f;
  font-weight: 700;
  text-align: center;
}

.balken-hintergrund,
.risiko-leiste {
  height: 10px;
  border-radius: var(--radius-pill);
  background: #24364f;
  overflow: hidden;
}

.balken,
.risiko-fuellung {
  height: 100%;
  min-width: 2px;
}

.balken.status-gruen,
.balken.status-ok {
  background: var(--ok);
}

.balken.status-gelb,
.balken.status-warn {
  background: var(--warn);
}

.balken.status-rot,
.balken.status-error {
  background: var(--error);
}

.risiko-zeile,
dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

dt {
  color: var(--text-muted);
}

dd {
  margin: 0;
  text-align: right;
}

ul {
  margin: 0;
  padding-left: 18px;
}

li {
  margin-bottom: 7px;
}

.alarm-liste,
.ereignis-liste {
  display: grid;
  gap: 8px;
}

.alarm-eintrag {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-left: 4px solid currentColor;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.04);
}

.alarm-bedienung {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 190px;
}

.fehlercode-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 2px 4px 2px 0;
  padding: 3px 8px;
  border: 1px solid rgba(111, 182, 255, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(111, 182, 255, 0.14);
  color: #bfe0ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.chip,
.tag-liste span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(159, 176, 195, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.prioritaet-chip,
.eskalation {
  border-color: rgba(231, 76, 60, 0.52);
  background: rgba(231, 76, 60, 0.13);
  color: #ffb8b0;
}

.fehlercode-aktiv {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-left: 4px solid #6fb6ff;
  border-radius: var(--radius-xs);
  background: rgba(111, 182, 255, 0.08);
}

.fehlercode-aktiv small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
}

.fehlercode-detail.aktiv-fehlercode {
  border-color: rgba(111, 182, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(111, 182, 255, 0.18), 0 18px 36px rgba(0, 0, 0, 0.24);
}

.tag-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.rolle-produktion #gesamtanlagenstatus,
body.rolle-produktion #produktionKompakt,
body.rolle-produktion #anlagenUebersicht,
body.rolle-instandhaltung #naechsteHandlung,
body.rolle-instandhaltung #alarmeKompakt,
body.rolle-meister #alarmeKompakt,
body.rolle-meister #risikoRanking,
body.rolle-kosten #produktionKompakt {
  border-color: rgba(111, 182, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(111, 182, 255, 0.12), 0 18px 38px rgba(0, 0, 0, 0.28);
}

input {
  width: 100%;
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  background: #0b1728;
  color: var(--text);
  font: inherit;
  padding: 7px 9px;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

select,
textarea {
  width: 100%;
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  background: #0b1728;
  color: var(--text);
  font: inherit;
  padding: 8px 9px;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 13px;
  min-width: 0;
}

.formular label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
}

.formular .voll,
.formular button {
  grid-column: 1 / -1;
}

.wizard-form {
  grid-template-columns: 1fr;
}

.wizard-kopf,
.wizard-step {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(111, 182, 255, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(111, 182, 255, 0.05);
}

.wizard-kopf {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.wizard-kopf span {
  color: var(--text-muted);
}

.wizard-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wizard-aktionen button {
  grid-column: auto;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tabs button.aktiv {
  border-color: var(--cyan);
  background: #1b3657;
}

.diagnose-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(159, 176, 195, 0.22);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.04);
}
.diagnose-block h3 {
  text-transform: none;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.diagnose-block summary,
.simulation-card summary {
  cursor: pointer;
  padding: 6px 0;
  color: #dbeafe;
  font-weight: 800;
}

.simulation-card details {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 8px 0 10px;
  border-top: 1px solid rgba(159, 176, 195, 0.14);
}

.simulation-card details:first-of-type {
  margin-top: 4px;
}

.bauteil-betroffen {
  background: rgba(241, 196, 15, 0.12);
}

.kompakt-alarm {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-left: 4px solid currentColor;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.04);
}

.kompakt-alarm span,
.kompakt-alarm small {
  color: var(--text);
}

.anlage {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: #0b1728;
}

.anlage-layout {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto repeat(3, minmax(86px, auto)) minmax(240px, 1.8fr) auto minmax(130px, 1fr) auto minmax(120px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(111, 182, 255, 0.16);
  border-radius: var(--radius-md);
  background: rgba(5, 11, 20, 0.42);
}

.hmi-anlage {
  background:
    linear-gradient(90deg, rgba(79, 124, 172, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(79, 124, 172, 0.08) 1px, transparent 1px),
    rgba(5, 11, 20, 0.52);
  background-size: 28px 28px;
}

.foerderband {
  position: relative;
  display: grid;
  grid-template-rows: auto 42px 18px auto;
  align-items: center;
  min-width: 0;
  min-height: 220px;
  padding: 14px 16px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #101827, #080d14);
  overflow: hidden;
}

.linien-prozess .foerderband {
  grid-column: span 2;
}

.foerderband.anlage-warnung {
  border-color: rgba(245, 158, 11, 0.56);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.08);
}

.foerderband.anlage-kritisch {
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.1), 0 0 22px rgba(239, 68, 68, 0.08);
}

.band {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid #506985;
  background: repeating-linear-gradient(90deg, #69798d 0 18px, #4d5d72 18px 32px);
}

.band-aktiv .band {
  animation: bandlauf 1.4s linear infinite;
}

@keyframes bandlauf {
  from { background-position-x: 0; }
  to { background-position-x: 32px; }
}

.sensor-symbol {
  min-height: 74px;
  min-width: 86px;
  display: grid;
  gap: 3px;
  place-items: center;
  border-radius: 50%;
  color: #07111f;
  font-weight: 800;
}

.sensor-symbol span,
.motor-symbol small {
  font-size: 12px;
}

.anlage-aktiv {
  outline: 3px solid rgba(111, 182, 255, 0.65);
  box-shadow: 0 0 18px rgba(111, 182, 255, 0.32);
}

.warnbox {
  border-color: rgba(241, 196, 15, 0.45);
}

.protokoll {
  white-space: pre-wrap;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  background: #0b1728;
  color: #d6e2ef;
  line-height: 1.5;
}

.checkbox-gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 8px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  padding: 12px;
}

.checkbox-gruppe legend {
  color: var(--text-muted);
  padding: 0 6px;
}

.checkbox-gruppe label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkbox-gruppe input {
  width: auto;
}

.signal-kette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.signal-kette span {
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  background: #162840;
}

.signal-kette b {
  color: var(--text-muted);
}

.signal-warnung {
  border-color: var(--gelb) !important;
  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.12);
}

.diagnosebaum ul {
  margin-top: 8px;
}

.sps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  min-width: 0;
}

.io-tabelle td:first-child {
  font-weight: 700;
}

.io-panel {
  align-content: start;
}

.io-karten,
.bauteil-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px;
  min-width: 0;
}

.io-signal,
.bauteil-karte {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(159, 176, 195, 0.16);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.io-signal-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.io-signal-kopf strong,
.bauteil-karte h4 {
  min-width: 0;
  overflow-wrap: break-word;
}

.chip-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-zeile span {
  padding: 4px 7px;
  border: 1px solid rgba(111, 182, 255, 0.17);
  border-radius: var(--radius-pill);
  background: rgba(111, 182, 255, 0.07);
  color: var(--text-muted);
  font-size: 12px;
}

.io-signal.io-fehler {
  border-left-color: var(--rot);
}

.io-signal.io-warnung {
  border-left-color: var(--gelb);
}

.io-signal.io-aktiv {
  border-left-color: var(--cyan);
}

.io-signal.io-ok {
  border-left-color: var(--gruen);
}

.io-fehler {
  background: rgba(231, 76, 60, 0.12);
}

.io-warnung {
  background: rgba(241, 196, 15, 0.10);
}

.io-aktiv {
  background: rgba(111, 182, 255, 0.10);
}

.led {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--gruen);
  box-shadow: 0 0 12px currentColor;
}

.led.io-fehler {
  background: var(--rot);
}

.led.io-warnung {
  background: var(--gelb);
}

.led.io-aktiv {
  background: #6fb6ff;
}

.rotbox {
  border-color: rgba(231, 76, 60, 0.55);
}

.ablauf-kompakt,
.schritt-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(111, 182, 255, 0.28);
  border-radius: var(--radius-xs);
  background: rgba(111, 182, 255, 0.08);
}

.ablauf-kompakt span,
.schritt-status span {
  color: var(--text-muted);
}

.schritt-kette {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.schritt-karte {
  position: relative;
  flex: 1 1 190px;
  min-height: 170px;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: #0b1728;
}

.schritt-karte strong {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #24364f;
}

.schritt-erledigt {
  border-color: rgba(46, 204, 113, 0.55);
}

.schritt-erledigt strong {
  background: var(--gruen);
  color: #07111f;
}

.schritt-aktiv {
  border-color: #6fb6ff;
  box-shadow: 0 0 0 3px rgba(111, 182, 255, 0.12);
}

.schritt-aktiv strong {
  background: #6fb6ff;
  color: #07111f;
}

.schritt-warnung {
  border-color: rgba(245, 158, 11, 0.72);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.schritt-warnung strong {
  background: var(--gelb);
  color: #07111f;
}

.schritt-wartet,
.schritt-inaktiv {
  opacity: 0.72;
}

.schritt-karte {
  overflow: hidden;
}

.schritt-aktiv {
  animation: hmi-blue-pulse 2.2s ease-in-out infinite;
}

.schritt-aktiv h3 {
  color: #d8ecff;
}

.schritt-aktiv strong + h3 {
  margin-top: 8px;
}

@keyframes hmi-blue-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(111, 182, 255, 0.14); }
  50% { box-shadow: 0 0 0 5px rgba(111, 182, 255, 0.08); }
}

.wide-card {
  grid-column: 1 / -1;
}

.bauteil-gruppen {
  display: grid;
  gap: 12px;
}

.bauteil-accordion {
  min-width: 0;
  border: 1px solid rgba(159, 176, 195, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.bauteil-accordion summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #dbeafe;
  font-weight: 800;
}

.bauteil-karten {
  padding: 0 12px 12px;
}

.bauteil-karte {
  border-left-color: rgba(111, 182, 255, 0.55);
}

.bauteil-karte.bauteil-betroffen {
  border-left-color: var(--gelb);
  background: rgba(241, 196, 15, 0.07);
}

.bauteil-karte h4 {
  margin: 0;
  font-size: 15px;
}

.bauteil-karte dl,
.sps-zuordnung-karten {
  display: grid;
  gap: 7px;
}

.bauteil-karte dl div,
.sps-zuordnung-karten div {
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  min-width: 0;
}

.sps-zuordnung-karten {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.sps-zuordnung-karten div {
  padding: 8px 10px;
  border: 1px solid rgba(159, 176, 195, 0.14);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
}

.protokoll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}

.simulation-card {
  border-color: rgba(111, 182, 255, 0.38);
}

.taster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 12px;
}

.hmi-taster {
  min-height: 68px;
  border-width: 1px;
  border-left-width: 5px;
  background: linear-gradient(180deg, #13233a, #0c1728);
  color: var(--text);
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 10px 18px rgba(0, 0, 0, 0.18);
}

.hmi-taster small {
  color: var(--text-muted);
  font-weight: 700;
}

.taster-gruen {
  border-left-color: var(--gruen);
}

.taster-gelb {
  border-left-color: var(--gelb);
}

.taster-rot {
  border-left-color: var(--rot);
}

.taster-standard {
  border-left-color: var(--cyan);
}

.hmi-taster.aktiv {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(111, 182, 255, 0.22), 0 12px 22px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.praesentation-ablauf {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--text-muted);
}

.praesentation-ablauf li {
  padding: 5px 8px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-xs);
}

.praesentation-ablauf li.aktiv {
  border-left-color: var(--cyan);
  background: rgba(111, 182, 255, 0.1);
  color: var(--text);
  font-weight: 800;
}

.anlagen-block,
.motor-symbol {
  min-height: 82px;
  border: 1px solid rgba(159, 176, 195, 0.22);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  background: linear-gradient(180deg, #162840, #0f1b2c);
}

.motor-symbol {
  gap: 4px;
  min-width: 170px;
}

.motor-symbol.status-gruen,
.motor-symbol.status-gelb,
.motor-symbol.status-rot {
  color: #07111f;
  font-weight: 700;
}

.motor-symbol.status-rot {
  animation: kritisch-puls 2.4s ease-in-out infinite;
}

.fluss {
  color: var(--text-muted);
  font-size: 28px;
}

.anlagen-detail {
  color: #d6e2ef;
}

.alarm-eintrag small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
}

.quittiert-text {
  color: var(--gruen);
  font-weight: 700;
}

.wahrscheinlichkeit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.wahrscheinlichkeit .balken-hintergrund {
  grid-column: 1 / -1;
}

code {
  color: #d6e2ef;
}

.typenschild {
  background: linear-gradient(180deg, #14263c, #101d2e);
}

.status-gruen {
  color: var(--gruen);
}

.status-gelb {
  color: var(--gelb);
}

.status-rot {
  color: var(--rot);
}

.motor-karte.status-gruen,
.motor-karte.status-gelb,
.motor-karte.status-rot,
.panel.risiko-niedrig,
.panel.risiko-mittel,
.panel.risiko-hoch {
  background: var(--karte);
  color: var(--text);
}

.risiko-fuellung.risiko-niedrig,
.risiko-niedrig .risiko-fuellung {
  background: var(--gruen);
}

.risiko-fuellung.risiko-mittel,
.risiko-mittel .risiko-fuellung {
  background: var(--gelb);
}

.risiko-fuellung.risiko-hoch,
.risiko-hoch .risiko-fuellung {
  background: var(--rot);
}

/* Grundlegende html/body-Regeln stehen zentral am Dateianfang. */

.app,
.inhalt,
.seite,
.panel,
.leitstand-grid,
.leitstand-links,
.leitstand-rechts {
  min-width: 0;
  max-width: 100%;
}

.nav-toggle,
.nav-button {
  padding-block: 8px;
}

.inhalt {
  overflow-x: hidden;
}

.leitstand-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.anlagen-kompakt {
  overflow-x: hidden;
}

.anlagen-kopf,
.anlagen-miniinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 12px;
}

.anlagen-miniinfo {
  color: var(--text-muted);
  font-size: 13px;
}

.anlagen-miniinfo span {
  padding: 5px 8px;
  border: 1px solid rgba(111, 182, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.035);
}

.anlagen-statusleiste,
.startfreigabe-kette {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 182, 255, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(7, 17, 31, 0.58);
}

.anlagen-statusleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.anlagen-statusleiste span,
.freigabe-grid span {
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}

.freigabe-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.freigabe-grid small {
  color: var(--text-muted);
}

.freigabe-ok {
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}

.freigabe-fehler {
  border: 1px solid rgba(239, 68, 68, 0.42);
  color: #fecaca;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(111, 182, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(56, 189, 248, 0.08);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
}

.anlage-layout.hmi-anlage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 16px;
  border-color: rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    rgba(5, 8, 13, 0.66);
  background-size: 28px 28px;
}

.anlage-kompakt {
  min-height: 212px;
}

.anlage-gross {
  min-height: 280px;
}

.anlagen-block,
.motor-symbol,
.motor-station,
.sensor-knoten {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.anlagen-block {
  min-height: 58px;
  padding: 9px;
  color: #dbeafe;
  font-size: 13px;
}

.linien-prozess {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr));
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.anlagen-terminal {
  background: linear-gradient(180deg, #122038, #0a1424);
}

.band-sensor-oben {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

.sensor-knoten {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 68px;
  padding: 7px 6px;
  border: 1px solid rgba(159, 176, 195, 0.24);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #122038, #0b1728);
  color: var(--text);
  text-align: center;
}

.sensor-knoten i,
.motor-symbol i,
.motor-station i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.sensor-knoten strong,
.sensor-knoten small,
.sensor-knoten span {
  line-height: 1.1;
}

.sensor-knoten small,
.sensor-knoten span {
  color: var(--text-muted);
  font-size: 11px;
}

.sensor-knoten.status-gruen,
.sensor-knoten.status-gelb,
.sensor-knoten.status-rot,
.anlagen-block.status-gruen,
.anlagen-block.status-gelb,
.anlagen-block.status-rot,
.motor-symbol.status-gruen,
.motor-symbol.status-gelb,
.motor-symbol.status-rot,
.motor-station.status-gruen,
.motor-station.status-gelb,
.motor-station.status-rot,
.alarm-eintrag.status-gruen,
.alarm-eintrag.status-gelb,
.alarm-eintrag.status-rot,
.kompakt-alarm.status-gruen,
.kompakt-alarm.status-gelb,
.kompakt-alarm.status-rot {
  background: linear-gradient(180deg, #122038, #0b1728);
  color: var(--text);
}

.sensor-knoten.status-gruen,
.anlagen-block.status-gruen,
.motor-symbol.status-gruen,
.motor-station.status-gruen,
.alarm-eintrag.status-gruen,
.kompakt-alarm.status-gruen {
  border-color: rgba(46, 204, 113, 0.46);
}

.sensor-knoten.status-gelb,
.anlagen-block.status-gelb,
.motor-symbol.status-gelb,
.motor-station.status-gelb,
.alarm-eintrag.status-gelb,
.kompakt-alarm.status-gelb {
  border-color: rgba(241, 196, 15, 0.56);
}

.sensor-knoten.status-rot,
.anlagen-block.status-rot,
.motor-symbol.status-rot,
.motor-station.status-rot,
.alarm-eintrag.status-rot,
.kompakt-alarm.status-rot {
  border-color: rgba(231, 76, 60, 0.72);
}

.sensor-knoten.status-gruen i,
.anlagen-block.status-gruen i,
.motor-symbol.status-gruen i,
.motor-station.status-gruen i {
  color: var(--gruen);
}

.sensor-knoten.status-gelb i,
.motor-symbol.status-gelb i,
.motor-station.status-gelb i {
  color: var(--gelb);
}

.sensor-knoten.status-rot i,
.motor-symbol.status-rot i,
.motor-station.status-rot i {
  color: var(--rot);
}

.motor-station {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 78px;
  padding: 8px 9px;
  border: 1px solid rgba(159, 176, 195, 0.24);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #122038, #0b1728);
  color: var(--text);
  text-align: center;
}

.motor-station strong {
  font-size: 18px;
}

.motor-station span,
.motor-station small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.15;
}

.foerderband .motor-station {
  align-self: end;
  justify-self: center;
  width: min(144px, 100%);
}

.motor-symbol {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 118px;
  min-height: 68px;
  padding: 8px 10px;
  transform: translateX(-50%);
}

.motor-symbol strong {
  font-size: 18px;
}

.motor-symbol span,
.motor-symbol small {
  color: var(--text-muted);
  font-size: 11px;
}

.band {
  top: 49%;
  left: 10px;
  right: 10px;
  height: 20px;
}

.materialfluss {
  position: absolute;
  top: calc(49% - 4px);
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.materialfluss b {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: rgba(111, 182, 255, 0.8);
  box-shadow: 0 0 10px rgba(111, 182, 255, 0.36);
  animation: materialfluss 2.4s linear infinite;
}

.materialfluss b:nth-child(2) {
  animation-delay: 0.55s;
}

.materialfluss b:nth-child(3) {
  animation-delay: 1.1s;
}

.materialfluss.steht b {
  animation-play-state: paused;
  background: rgba(241, 196, 15, 0.78);
}

@keyframes materialfluss {
  from { transform: translateX(-14px); opacity: 0.2; }
  20%, 80% { opacity: 1; }
  to { transform: translateX(14px); opacity: 0.2; }
}

.anlagen-ebene,
.hauptprozess,
.nebenaggregate {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.versorgung-ebene {
  grid-template-columns: minmax(120px, 0.8fr) auto minmax(120px, 0.8fr) minmax(0, 2fr);
  justify-content: start;
}

.hauptprozess {
  grid-template-columns:
    minmax(76px, 0.75fr) auto
    minmax(62px, 0.55fr) auto
    minmax(260px, 2.3fr) auto
    minmax(62px, 0.55fr) auto
    minmax(84px, 0.75fr) auto
    minmax(76px, 0.7fr);
}

.nebenaggregate {
  grid-template-columns: auto repeat(2, minmax(min(210px, 100%), 0.38fr)) minmax(0, 1fr);
  align-items: stretch;
}

.ebenen-label {
  align-self: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.foerderband .sensor-knoten {
  min-height: 54px;
  width: min(84px, 100%);
}

.band {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 42px;
  border: 1px solid #546b87;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%),
    repeating-linear-gradient(90deg, #4d5d72 0 22px, #38485d 22px 36px);
}

.rolle {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(236, 242, 248, 0.4);
  border-radius: 50%;
  background: #17263b;
}

.werkstuecke {
  position: absolute;
  top: 78px;
  left: 28px;
  right: 28px;
  z-index: 4;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.werkstuecke b {
  width: 24px;
  height: 15px;
  border: 1px solid rgba(236, 242, 248, 0.35);
  border-radius: var(--radius-xs);
  background: #d9e8f6;
  box-shadow: 0 0 10px rgba(111, 182, 255, 0.22);
  animation: werkstueck-lauf 2.8s ease-in-out infinite;
}

.werkstuecke b:nth-child(2) {
  animation-delay: 0.7s;
}

.werkstuecke b:nth-child(3) {
  animation-delay: 1.4s;
}

.werkstuecke.steht b {
  animation-play-state: paused;
  background: #f6d55c;
}

@keyframes werkstueck-lauf {
  from { transform: translateX(-18px); opacity: 0.55; }
  50% { opacity: 1; }
  to { transform: translateX(18px); opacity: 0.75; }
}

.band-pfeile {
  display: flex;
  justify-content: space-around;
  color: var(--cyan);
  font-weight: 900;
  opacity: 0.8;
}

.m1-antrieb {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 4px;
}

.kupplung {
  width: 2px;
  height: 18px;
  background: rgba(111, 182, 255, 0.45);
}

.band-label {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.materialfluss {
  display: none;
}

.fluss {
  min-width: 0;
  font-size: clamp(16px, 2vw, 24px);
  text-align: center;
}

.anlagen-detailbox.kompakt-detail {
  margin-top: 10px;
  padding: 10px 12px;
  color: var(--text-muted);
}

.detail-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pruef-checkliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.pruef-checkliste label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(159, 176, 195, 0.16);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.pruef-checkliste input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.pruef-checkliste span {
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.protokoll-form {
  gap: 14px;
}

.protokoll-form label,
.protokoll-abschluss label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.protokoll-form select,
.protokoll-form input,
.protokoll-form textarea {
  width: 100%;
  min-width: 0;
}

.protokoll-messwerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
  min-width: 0;
}

.protokoll-abschluss {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.protokoll-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kompakt-alarm {
  color: var(--text);
  border-top: 1px solid rgba(159, 176, 195, 0.12);
}

.kompakt-alarm.status-gruen {
  border-left-color: var(--gruen);
}

.kompakt-alarm.status-gelb {
  border-left-color: var(--gelb);
}

.kompakt-alarm.status-rot {
  border-left-color: var(--rot);
}

.produktionskarte .status-badge {
  margin: 8px 0 10px;
}

@media (max-width: 1180px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .navigation {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }
}

@media (max-width: 900px) {
  .kopfbereich {
    align-items: flex-start;
    flex-direction: column;
  }

  .aktualisierung {
    text-align: left;
  }

  .kennzahlen-grid,
  .motor-grid,
  .info-grid,
  .cockpit-grid,
  .leitstand-grid,
  .protokoll-grid,
  .sps-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .alarm-eintrag,
  .fehlercode-aktiv,
  .status-details {
    grid-template-columns: 1fr;
  }

  .anlage {
    grid-template-columns: 1fr;
  }

  .anlage-layout {
    grid-template-columns: 1fr;
  }

  .versorgung-ebene,
  .hauptprozess,
  .nebenaggregate {
    grid-template-columns: 1fr;
  }

  .fluss {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .navigation {
    grid-template-columns: 1fr;
  }

  .inhalt {
    padding: 12px;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px 6px;
  }
}

@media print {
  body {
    display: block;
    background: #fff;
    color: #000;
  }

  .sidebar,
  .kopfbereich,
  button,
  input,
  select,
  textarea {
    display: none !important;
  }

  .app,
  .inhalt,
  .seite.aktiv {
    display: block;
    padding: 0;
  }

  .panel,
  .motor-karte,
  .kennzahl {
    box-shadow: none;
    border-color: #999;
    background: #fff;
    color: #000;
    break-inside: avoid;
  }
}

/* Frontend refresh: Grundlayout, Schrift und Body-Hintergrund werden zentral oben definiert. */

.app,
.inhalt,
.seite,
.panel,
.kennzahl,
.motor-karte,
.grid,
.formular,
.sps-grid,
.settings-grid,
.protokoll-grid,
.leitstand-grid,
.cockpit-grid,
.io-karten,
.bauteil-karten,
.anlage-layout {
  min-width: 0;
  max-width: 100%;
}

.logo {
  margin-bottom: 18px;
}

.logo strong {
  font-size: 24px;
  letter-spacing: 0;
}

.nav-toggle {
  border-radius: var(--radius);
  color: #cbd5e1;
  font-size: 12px;
}

.nav-toggle span {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.nav-unterpunkte {
  gap: 4px;
  padding-left: 6px;
  border-left-color: rgba(56, 189, 248, 0.13);
}

button,
.nav-button {
  border-radius: var(--radius);
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(17, 24, 39, 0.88);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

button:hover,
.nav-button:hover {
  background: #162031;
  border-color: rgba(56, 189, 248, 0.58);
}

button:focus-visible,
.nav-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.7);
  outline-offset: 2px;
}

.nav-button {
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 9px 8px 12px;
  font-size: 13px;
}

.nav-button.active {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 3px 0 0 var(--cyan);
}

h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0;
}

.kopf-text p span,
.status-badge,
.chip,
.tag-liste span,
.fehlercode-badge {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
}

.inhalt {
  width: 100%;
  max-width: 1680px;
  padding: 24px;
  overflow-x: hidden;
}

.seite.aktiv {
  gap: 18px;
}

.kennzahlen-grid {
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 14px;
}

.kpi-gruppe,
.panel,
.kennzahl,
.motor-karte,
.diagnose-block,
.bauteil-accordion,
.io-signal,
.bauteil-karte,
.schritt-karte {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--karte-hell), var(--karte));
  box-shadow: var(--shadow);
}

.kpi-gruppe {
  padding: 16px;
}

.panel h2,
.motor-karte h2 {
  font-size: 18px;
  letter-spacing: 0;
}

.panel h3,
.kpi-gruppe h3 {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kennzahl {
  border-left: 3px solid rgba(148, 163, 184, 0.24);
  padding: 12px;
  background: rgba(15, 23, 42, 0.62);
  box-shadow: none;
}

.kennzahl strong {
  font-size: clamp(19px, 2vw, 25px);
  overflow-wrap: break-word;
}

.kpi-ok {
  border-color: rgba(148, 163, 184, 0.16);
  border-left-color: rgba(34, 197, 94, 0.68);
}

.kpi-warnung {
  border-color: rgba(148, 163, 184, 0.16);
  border-left-color: rgba(245, 158, 11, 0.72);
}

.kpi-kritisch {
  border-color: rgba(148, 163, 184, 0.16);
  border-left-color: rgba(239, 68, 68, 0.8);
}

.leitstand-grid {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
  gap: 18px;
}

.gesamtstatus-panel,
.handlung-panel,
.produktionskarte {
  border-top-width: 1px;
  border-left: 4px solid rgba(56, 189, 248, 0.38);
  background: linear-gradient(180deg, var(--karte-hell), var(--karte));
}

.gesamtstatus-panel::before {
  width: 96px;
  background: radial-gradient(circle at 42px 58px, rgba(56, 189, 248, 0.10), transparent 68%);
}

.gesamtstatus-panel.status-gruen {
  border-color: rgba(148, 163, 184, 0.16);
  border-left-color: rgba(34, 197, 94, 0.7);
}

.gesamtstatus-panel.status-gelb {
  border-color: rgba(148, 163, 184, 0.16);
  border-left-color: rgba(245, 158, 11, 0.78);
}

.gesamtstatus-panel.status-rot {
  border-color: rgba(239, 68, 68, 0.44);
  border-left-color: var(--rot);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16), 0 18px 42px rgba(0, 0, 0, 0.3);
}

.status-held strong {
  font-size: clamp(28px, 3vw, 38px);
}

.gesamtampel,
.ampel {
  border: 8px solid rgba(255, 255, 255, 0.08);
}

.gesamtstatus-panel .gesamtampel.status-gruen,
.ampel.status-gruen {
  color: var(--gruen);
  background: var(--gruen);
}

.gesamtstatus-panel .gesamtampel.status-gelb,
.ampel.status-gelb {
  color: var(--gelb);
  background: var(--gelb);
}

.gesamtstatus-panel .gesamtampel.status-rot,
.ampel.status-rot {
  color: var(--rot);
  background: var(--rot);
}

.status-gruen,
.status-gelb,
.status-rot {
  background-color: transparent;
}

.status-chip {
  min-width: 0;
  color: var(--text);
}

.status-chip.status-gruen,
.status-badge.status-gruen {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.10);
  color: #bbf7d0;
}

.status-chip.status-gelb,
.status-badge.status-gelb {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.10);
  color: #fed7aa;
}

.status-chip.status-rot,
.status-badge.status-rot {
  border-color: rgba(239, 68, 68, 0.46);
  background: rgba(239, 68, 68, 0.11);
  color: #fecaca;
}

.anlagen-kompakt {
  border-color: rgba(56, 189, 248, 0.24);
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #101722, #0d141f);
  background-size: 30px 30px, 30px 30px, auto;
}

.versorgung-ebene {
  grid-template-columns: minmax(132px, 180px) 24px minmax(132px, 180px) minmax(0, 1fr);
}

.hauptprozess {
  grid-template-columns:
    minmax(72px, 0.72fr) 22px
    minmax(64px, 0.56fr) 22px
    minmax(300px, 2.5fr) 22px
    minmax(64px, 0.56fr) 22px
    minmax(92px, 0.8fr) 22px
    minmax(78px, 0.72fr);
}

.nebenaggregate {
  grid-template-columns: auto repeat(2, minmax(180px, 240px)) minmax(0, 1fr);
}

.anlagen-block,
.sensor-knoten,
.motor-symbol,
.motor-station {
  border-left: 3px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, #111b28, #0b1118);
}

.sensor-knoten.status-gruen,
.anlagen-block.status-gruen,
.motor-symbol.status-gruen,
.motor-station.status-gruen {
  border-left-color: var(--gruen);
}

.sensor-knoten.status-gelb,
.anlagen-block.status-gelb,
.motor-symbol.status-gelb,
.motor-station.status-gelb {
  border-left-color: var(--gelb);
}

.sensor-knoten.status-rot,
.anlagen-block.status-rot,
.motor-symbol.status-rot,
.motor-station.status-rot {
  border-left-color: var(--rot);
}

.sensor-knoten.status-gruen i,
.anlagen-block.status-gruen i,
.motor-symbol.status-gruen i,
.motor-station.status-gruen i {
  background: var(--gruen);
  color: var(--gruen);
}

.sensor-knoten.status-gelb i,
.anlagen-block.status-gelb i,
.motor-symbol.status-gelb i,
.motor-station.status-gelb i {
  background: var(--gelb);
  color: var(--gelb);
}

.sensor-knoten.status-rot i,
.anlagen-block.status-rot i,
.motor-symbol.status-rot i,
.motor-station.status-rot i {
  background: var(--rot);
  color: var(--rot);
}

.band {
  height: 44px;
  border-color: rgba(148, 163, 184, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%),
    repeating-linear-gradient(90deg, #475569 0 22px, #334155 22px 38px);
}

.rolle {
  border-color: rgba(226, 232, 240, 0.36);
  background: #0f172a;
}

.werkstuecke b {
  background: #cbd5e1;
  border-color: rgba(248, 250, 252, 0.34);
}

.werkstuecke.steht b {
  background: #fbbf24;
}

.anlagen-detailbox,
.anlagen-detailbox.kompakt-detail {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.56);
}

.ranking-liste {
  display: grid;
  gap: 8px;
}

.ranking-eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-left-width: 4px;
  text-align: left;
}

.ranking-eintrag.status-gruen {
  border-left-color: var(--gruen);
}

.ranking-eintrag.status-gelb {
  border-left-color: var(--gelb);
}

.ranking-eintrag.status-rot {
  border-left-color: var(--rot);
}

.ranking-eintrag small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
}

.ranking-eintrag b {
  color: var(--text);
}

.ranking-rang {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  color: #bae6fd;
  font-weight: 800;
}

.alarm-eintrag,
.kompakt-alarm {
  border-left-width: 4px;
  background: rgba(15, 23, 42, 0.62);
  color: var(--text);
}

.alarm-eintrag.status-gruen,
.kompakt-alarm.status-gruen {
  border-left-color: var(--gruen);
}

.alarm-eintrag.status-gelb,
.kompakt-alarm.status-gelb {
  border-left-color: var(--gelb);
}

.alarm-eintrag.status-rot,
.kompakt-alarm.status-rot {
  border-left-color: var(--rot);
}

.io-karten,
.bauteil-karten {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.io-signal,
.bauteil-karte {
  background: rgba(15, 23, 42, 0.62);
  box-shadow: none;
}

.io-fehler,
.io-warnung,
.io-aktiv {
  background: rgba(15, 23, 42, 0.62);
}

.chip-zeile span {
  background: rgba(15, 23, 42, 0.7);
}

.pruef-checkliste {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.pruef-checkliste label {
  min-height: 48px;
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.6);
}

.protokoll-messwerte {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.simulation-card {
  border-color: rgba(56, 189, 248, 0.26);
}

.simulation-card details {
  border-top-color: rgba(148, 163, 184, 0.13);
}

.taster-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.hmi-taster {
  min-height: 62px;
  border-left-width: 4px;
  background: linear-gradient(180deg, #141c27, #0d141f);
  text-align: left;
}

.hmi-taster.aktiv {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18), 0 14px 28px rgba(0, 0, 0, 0.24);
}

input,
select,
textarea {
  min-width: 0;
  border-radius: var(--radius);
  border-color: rgba(148, 163, 184, 0.24);
  background: #080f19;
}

table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

.panel > table,
.motor-karte > table,
.diagnose-block > table {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.42);
}

th,
td {
  overflow-wrap: break-word;
  word-break: normal;
}

th {
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
}

code,
.fehlercode-badge,
.chip,
.status-badge,
.anlagen-miniinfo span,
.anlagen-statusleiste span,
.chip-zeile span {
  overflow-wrap: anywhere;
}

.motor-karte {
  border-top-width: 1px;
  border-left: 4px solid rgba(148, 163, 184, 0.24);
}

.motor-karte.status-gruen {
  border-left-color: var(--gruen);
}

.motor-karte.status-gelb {
  border-left-color: var(--gelb);
}

.motor-karte.status-rot {
  border-left-color: var(--rot);
}

.karten-kopf {
  background: rgba(15, 23, 42, 0.76);
}

.kurzmeldung {
  background: rgba(15, 23, 42, 0.38);
}

.tabs button.aktiv {
  border-color: var(--cyan);
  background: rgba(56, 189, 248, 0.12);
}

@media (max-width: 1180px) {
  body {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .navigation {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .leitstand-grid,
  .cockpit-grid {
    grid-template-columns: 1fr;
  }

  .hauptprozess {
    grid-template-columns:
      minmax(72px, 0.75fr) 18px
      minmax(62px, 0.6fr) 18px
      minmax(240px, 2fr) 18px
      minmax(62px, 0.6fr) 18px
      minmax(86px, 0.8fr) 18px
      minmax(74px, 0.75fr);
  }
}

@media (max-width: 900px) {
  .kopfbereich {
    position: static;
  }

  .inhalt {
    padding: 16px;
  }

  .kennzahlen-grid,
  .kpi-zeile,
  .motor-grid,
  .info-grid,
  .sps-grid,
  .settings-grid,
  .protokoll-grid,
  .io-karten,
  .bauteil-karten {
    grid-template-columns: 1fr;
  }

  .versorgung-ebene,
  .hauptprozess,
  .nebenaggregate {
    grid-template-columns: 1fr;
  }

  .fluss {
    transform: rotate(90deg);
    justify-self: center;
  }

  .foerderband {
    min-height: 240px;
  }

  .alarm-eintrag,
  .ranking-eintrag {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kopfbereich,
  .inhalt {
    padding: 12px;
  }

  .status-held {
    align-items: flex-start;
    flex-direction: column;
  }

  .gesamtampel {
    width: 72px;
    height: 72px;
  }

  .panel,
  .kpi-gruppe {
    padding: 13px;
  }

  .hmi-taster {
    min-height: 56px;
  }
}

/* Website-style overview: weniger Datenwand, mehr klarer Einstieg. */
.seite#uebersicht.aktiv {
  gap: 22px;
}

#uebersicht .schnellzugriff {
  display: block;
  margin-bottom: 0;
}

.overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.72fr);
  gap: 22px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 4px solid rgba(56, 189, 248, 0.48);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 72% 8%, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(135deg, #151c26 0%, #0f1720 56%, #0a0f17 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.overview-hero.status-gruen {
  border-left-color: var(--gruen);
}

.overview-hero.status-gelb {
  border-left-color: var(--gelb);
}

.overview-hero.status-rot {
  border-left-color: var(--rot);
}

.hero-main {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.hero-main h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-main p {
  max-width: 720px;
  color: #cbd5e1;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
}

.hero-chips,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.hero-chips span {
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.68);
  color: #cbd5e1;
  font-size: 13px;
}

.hero-status {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(7, 11, 16, 0.42);
}

.hero-status .gesamtampel {
  width: 74px;
  height: 74px;
}

.hero-status > strong {
  font-size: 30px;
  line-height: 1;
}

.hero-status dl {
  width: 100%;
}

.hero-status dl div {
  display: grid;
  grid-template-columns: minmax(110px, 0.62fr) minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.hero-status dd {
  overflow-wrap: break-word;
}

.hero-actions {
  grid-column: 1 / -1;
  padding-top: 2px;
}

.hero-actions button {
  padding: 8px 11px;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.58);
  color: #dbeafe;
}

#uebersicht .kennzahlen-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.overview-kpi {
  min-height: 86px;
  padding: 13px 14px;
}

.overview-kpi strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: clamp(18px, 1.55vw, 23px);
}

#uebersicht .anlagen-kompakt {
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius-md);
}

#uebersicht .anlagen-kompakt h2 {
  font-size: 20px;
}

#uebersicht .anlagen-kompakt .anlage-layout.hmi-anlage {
  margin-top: 4px;
}

#uebersicht .anlagen-miniinfo,
#uebersicht .anlagen-detailbox.kompakt-detail {
  display: none;
}

#uebersicht .anlagen-statusleiste {
  margin-bottom: 0;
}

#uebersicht .leitstand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

#uebersicht .leitstand-links,
#uebersicht .leitstand-rechts {
  display: contents;
}

#gesamtanlagenstatus[hidden],
#versorgungKompakt[hidden],
#wartungsAmpel[hidden],
#zusammenfassung[hidden] {
  display: none !important;
}

#naechsteHandlung,
#alarmeKompakt,
#produktionKompakt {
  min-height: 100%;
}

#naechsteHandlung p,
#alarmeKompakt p,
#produktionKompakt p {
  color: #cbd5e1;
  line-height: 1.45;
}

#naechsteHandlung .wartungsfenster {
  display: none;
}

#naechsteHandlung .checkliste {
  display: grid;
  gap: 7px;
  padding-left: 0;
}

#naechsteHandlung .checkliste li {
  margin: 0;
  list-style: none;
}

#naechsteHandlung .checkliste li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--cyan);
}

#alarmeKompakt .kompakt-alarm {
  padding: 10px;
}

#alarmeKompakt .kompakt-alarm span {
  display: block;
  margin-top: 4px;
  color: #cbd5e1;
  font-size: 13px;
}

#risikoRanking {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ranking-details {
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.46);
}

.ranking-details summary {
  cursor: pointer;
  color: #cbd5e1;
  font-weight: 800;
}

.ranking-details .ranking-liste {
  margin-top: 12px;
}

@media (max-width: 1180px) {
  #uebersicht .leitstand-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .overview-hero {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    grid-column: auto;
  }
}

/* Maintenance cockpit refresh inspired by the supplied dark web-app reference. */

.logo {
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-bottom: 24px;
  padding: 0 8px;
}

.logo::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(53, 214, 107, 0.75);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle, rgba(53, 214, 107, 0.95) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(53, 214, 107, 0.16), transparent);
  box-shadow: 0 0 22px rgba(53, 214, 107, 0.12);
}

.logo strong {
  font-size: 18px;
  line-height: 1;
}

.logo span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navigation {
  gap: 18px;
}

.nav-toggle {
  padding: 5px 8px 8px;
  background: transparent;
}

.nav-button {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
  color: #b8c2cf;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.04);
}

.nav-button.active {
  background: linear-gradient(90deg, rgba(53, 214, 107, 0.12), rgba(255, 255, 255, 0.03));
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: inset 3px 0 0 #35d66b;
  color: #f3f6fa;
}

.nav-button i {
  border-radius: var(--radius-xs);
}

.breadcrumb {
  display: block;
  color: #aab4c1;
  font-size: 13px;
}

.kopfbereich h1 {
  margin-top: 2px;
  font-size: 18px;
}

.top-search {
  grid-area: search;
  min-width: 0;
}

.suche-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(7, 11, 16, 0.88);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.suche-wrap:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.10);
}

.suche-icon {
  flex: 0 0 auto;
  margin: 0 10px 0 13px;
  color: var(--text-muted);
  pointer-events: none;
}

.suche-input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 13.5px;
}

.suche-input::placeholder {
  color: var(--text-soft);
}

.suche-input:focus {
  outline: none;
}

.suche-shortcut {
  flex: 0 0 auto;
  margin: 0 10px;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font: 11px/1 inherit;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.aktualisierung {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 12px;
  text-align: right;
}

.aktualisierung .rollenwahl {
  min-width: 132px;
  margin: 0;
}

.aktualisierung .rollenwahl select {
  height: 38px;
}

.top-sim,
.top-clock,
.top-update-label,
.top-update-interval {
  color: var(--text-muted);
  font-size: 12px;
}

.aktualisierung > strong {
  display: inline;
  margin: 0;
  font-size: 14px;
}

.verbindung {
  margin-top: 0;
}

.notification-dot,
.user-avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #e5edf6;
  font-weight: 800;
}

.notification-dot {
  width: 30px;
  height: 30px;
  color: #f3f6fa;
}

.user-avatar {
  width: 38px;
  height: 38px;
}

#rollenHinweis {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  opacity: 0.72;
}

.such-ergebnisse {
  top: 64px;
  right: 360px;
}

.inhalt {
  padding: 24px;
}

#uebersicht .schnellzugriff {
  margin-bottom: 0;
}

.overview-hero {
  min-height: 150px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  border-left-width: 1px;
  border-color: rgba(38, 49, 61, 0.9);
  background:
    radial-gradient(circle at 75% 14%, rgba(53, 214, 107, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(20, 28, 38, 0.96), rgba(8, 12, 17, 0.96));
}

.overview-hero.status-gruen,
.overview-hero.status-gelb,
.overview-hero.status-rot {
  border-left-color: rgba(38, 49, 61, 0.9);
}

.hero-main .status-label {
  color: #35d66b;
}

.hero-main h2 {
  font-size: clamp(36px, 4vw, 54px);
}

.hero-status {
  justify-items: end;
  text-align: right;
  border: 0;
  background: transparent;
}

.hero-status .gesamtampel {
  width: 52px;
  height: 52px;
  border-width: 6px;
}

.hero-status > strong {
  color: #f3f6fa;
}

.hero-status dl {
  display: grid;
  gap: 8px;
}

.hero-status dl div {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 0;
  border: 0;
}

.hero-actions button,
.hero-chips span {
  border-radius: var(--radius-sm);
}

.hero-actions button:hover {
  transform: translateY(-1px);
}

.motor-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
  min-width: 0;
}

.motor-showcase-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: 200px;
  padding: 20px;
  border: 1px solid rgba(38, 49, 61, 0.95);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 78% 18%, rgba(53, 214, 107, 0.08), transparent 36%),
    linear-gradient(145deg, #141c26, #0c1218);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.30);
  text-align: left;
  overflow: hidden;
}

.motor-showcase-card:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 214, 107, 0.34);
}

.motor-showcase-card.status-gruen {
  box-shadow: inset 0 0 0 1px rgba(53, 214, 107, 0.12), 0 24px 58px rgba(0, 0, 0, 0.30);
}

.motor-showcase-card.status-gelb {
  border-color: rgba(247, 201, 72, 0.42);
}

.motor-showcase-card.status-rot {
  border-color: rgba(255, 77, 79, 0.48);
}

/* Station-Karten auf der Übersicht */
.station-showcase-card {
  min-height: 170px;
  cursor: pointer;
}

.station-showcase-card .showcase-body dl {
  gap: 6px;
}

.station-showcase-card .showcase-body dl div dt {
  font-size: 11px;
}

.station-showcase-card .showcase-body dl div dd {
  font-size: 12px;
}

.showcase-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.showcase-head strong {
  display: block;
  color: #f3f6fa;
  font-size: 18px;
}

.showcase-head small {
  color: #9ca8b6;
}

.showcase-status {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.22);
  color: #35d66b;
}

.showcase-status i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.status-gelb .showcase-status {
  color: #f7c948;
}

.status-rot .showcase-status {
  color: #ff4d4f;
}

.showcase-body {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.showcase-body dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.showcase-body dl div {
  display: grid;
  gap: 3px;
}

.showcase-body dt {
  font-size: 12px;
}

.showcase-body dd {
  color: #f3f6fa;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
}

.motor-visual {
  position: relative;
  height: 120px;
  min-width: 120px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.motor-visual span {
  position: absolute;
  display: block;
}

.visual-shadow {
  left: 16px;
  right: 14px;
  bottom: 6px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}

.visual-body {
  left: 34px;
  top: 36px;
  width: 72px;
  height: 48px;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(90deg, #1f2933 0 7px, #121a24 7px 12px);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.visual-head {
  left: 18px;
  top: 44px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #273442 0 36%, #101822 38% 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.visual-core {
  left: 62px;
  top: 18px;
  width: 38px;
  height: 20px;
  border-radius: var(--radius-xs);
  background: #1a2430;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.visual-base {
  left: 42px;
  top: 82px;
  width: 76px;
  height: 16px;
  border-radius: var(--radius-xs);
  background: #101820;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.visual-pumpe .visual-head {
  left: 12px;
  width: 48px;
  height: 48px;
}

.visual-pumpe .visual-body {
  left: 54px;
  width: 62px;
}

.visual-luefter .visual-body {
  left: 36px;
  top: 28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    conic-gradient(from 18deg, #2a3745 0 12%, #111923 12% 24%, #2a3745 24% 36%, #111923 36% 48%, #2a3745 48% 60%, #111923 60% 72%, #2a3745 72% 84%, #111923 84% 100%);
}

.visual-luefter .visual-head {
  left: 61px;
  top: 53px;
  width: 22px;
  height: 22px;
}

.visual-luefter .visual-core {
  display: none;
}

.mini-sparkline {
  width: 100%;
  height: 58px;
  color: #35d66b;
  opacity: 0.95;
}

.mini-sparkline.spark-gelb {
  color: #f7c948;
}

.mini-sparkline.spark-rot {
  color: #ff4d4f;
}

.overview-feature-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.84fr) minmax(300px, 0.92fr) minmax(360px, 1.12fr);
  gap: 18px;
  align-items: stretch;
}

#anlagenUebersicht {
  grid-row: span 2;
}

#alarmeKompakt {
  grid-column: 1 / 2;
}

#produktionKompakt .produktions-zahl {
  display: grid;
  width: 142px;
  height: 142px;
  place-items: center;
  align-content: center;
  margin: 10px 0 14px;
  border-radius: 50%;
  background:
    conic-gradient(#35d66b calc(var(--leistung, 0.82) * 1turn), rgba(148, 163, 184, 0.16) 0),
    radial-gradient(circle, #111820 0 61%, transparent 62%);
}

#produktionKompakt .produktions-zahl strong {
  font-size: 42px;
  line-height: 1;
}

#produktionKompakt .produktions-zahl span {
  font-size: 12px;
}

.alarm-summary-card .leer {
  position: relative;
  padding-left: 42px;
}

.alarm-summary-card .leer::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -5px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(53, 214, 107, 0.25);
  background: rgba(53, 214, 107, 0.10);
  color: #35d66b;
  font-weight: 900;
}

.bottom-kpis {
  padding: 12px 16px;
  border: 1px solid rgba(38, 49, 61, 0.95);
  border-radius: var(--radius-md);
  background: rgba(14, 20, 30, 0.78);
}

.bottom-kpis .overview-kpi {
  min-height: 60px;
  border-left-width: 0;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-right-color: rgba(148, 163, 184, 0.1);
  background: transparent;
}

/* Linie-bezogene KPIs leicht hervorheben */
.bottom-kpis .overview-kpi.kpi-neutral strong {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.3vw, 18px);
}

#risikoRanking {
  display: none;
}

#uebersicht .anlagen-kompakt {
  min-height: 100%;
}

#uebersicht .anlage-layout.hmi-anlage {
  padding: 14px;
}

#uebersicht .anlagen-kopf {
  display: none;
}

.plant-open-button {
  width: min(230px, 100%);
  justify-self: center;
  margin-top: 4px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1380px) {
  .motor-showcase,
  .overview-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  #anlagenUebersicht {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #alarmeKompakt {
    grid-column: auto;
  }
}

@media (max-width: 1080px) {
  .kopfbereich {
    grid-template-columns: 1fr;
  }

  .aktualisierung {
    justify-content: flex-start;
    text-align: left;
  }

  .such-ergebnisse {
    left: 24px;
    right: auto;
    top: 132px;
  }
}

@media (max-width: 780px) {
  .motor-showcase,
  .overview-feature-grid {
    grid-template-columns: 1fr;
  }

  .showcase-body {
    grid-template-columns: 1fr;
  }

  .motor-visual {
    height: 108px;
  }

  .bottom-kpis {
    padding: 8px;
  }
}

/* ═══════════════════════════════════════════════════
   SCHEMATIC PLANT OVERVIEW — Conveyor belt HMI visual
   ═══════════════════════════════════════════════════ */
#anlagenUebersicht.panel,
#anlagenSeite.panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plant-card {
  color: #f2f6fa;
  overflow: hidden;
  border: 1px solid rgba(120, 140, 160, 0.18);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 16% 8%, rgba(53, 214, 107, 0.07), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(56, 189, 248, 0.05), transparent 28%),
    linear-gradient(180deg, rgba(18, 26, 36, 0.97), rgba(8, 14, 22, 0.99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  padding: 24px;
}

.plant-card.compact {
  height: 100%;
  padding: 18px;
}

.plant-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.plant-header h2 {
  margin: 0;
  color: #f3f6fa;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 850;
}

.plant-header p {
  margin: 6px 0 0;
  color: #9aa7b7;
  font-size: 13px;
}

.plant-status-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.plant-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: #c8d2df;
  font-size: 12px;
  font-weight: 700;
}

.plant-chip.ok { color: #5ee783; border-color: rgba(94, 231, 131, 0.25); }
.plant-chip.warn { color: #f7c948; border-color: rgba(247, 201, 72, 0.28); }
.plant-chip.error { color: #ff9a9b; border-color: rgba(255, 77, 79, 0.34); }

.plant-freigabe-hinweis {
  margin: 6px 0 0;
  padding: 7px 12px;
  background: rgba(247,201,72,0.07);
  border: 1px solid rgba(247,201,72,0.25);
  border-left: 3px solid #f7c948;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.plant-freigabe-hinweis strong { color: #f7c948; margin-right: 4px; }

.plant-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

.plant-card.compact .plant-shell {
  grid-template-columns: 1fr;
}

.plant-main {
  min-width: 0;
}

.plant-layout {
  width: 100%;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    rgba(4, 9, 15, 0.6);
  background-size: 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Power / Control row ── */
.plant-power-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr minmax(140px, 190px) 1fr minmax(120px, 170px);
  align-items: center;
  gap: 6px;
}

.power-cable {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}

.power-cable svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cable-label {
  position: relative;
  margin: 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(4, 9, 15, 0.8);
  color: #8fa1b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fu-node {
  cursor: default;
  pointer-events: none;
}

/* ── Conveyor system layout ── */
.plant-conveyor-wrap {
  width: 100%;
}

.conveyor-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.conveyor-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conveyor-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Sensors above belt ── */
.conveyor-sensor-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 90px;
}

.sensor-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sensor-beam {
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, rgba(110, 168, 255, 0.55), transparent);
  transition: background 0.4s, box-shadow 0.4s;
}

.sensor-beam.beam-active {
  background: linear-gradient(180deg, rgba(94, 231, 131, 0.9), rgba(94, 231, 131, 0.1));
  box-shadow: 0 0 8px rgba(94, 231, 131, 0.45);
  animation: beamPulse 0.9s ease-in-out infinite alternate;
}

.sensor-beam.beam-warn {
  background: linear-gradient(180deg, rgba(247, 201, 72, 0.85), transparent);
}

@keyframes beamPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ── The belt ── */
.conveyor-zone {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90px;
  border: 2px solid rgba(53, 214, 107, 0.4);
  border-radius: 45px;
  background: rgba(6, 12, 20, 0.85);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-shadow: 0 0 0 1px rgba(53, 214, 107, 0.06), inset 0 2px 10px rgba(0, 0, 0, 0.65);
}

.conveyor-zone.ok {
  border-color: rgba(53, 214, 107, 0.55);
  box-shadow: 0 0 28px rgba(53, 214, 107, 0.07), inset 0 2px 10px rgba(0, 0, 0, 0.65);
}

.conveyor-zone.warn,
.conveyor-zone.jam {
  border-color: rgba(247, 201, 72, 0.7);
}

.conveyor-zone.error {
  border-color: rgba(255, 77, 79, 0.75);
}

.conveyor-zone:hover {
  border-color: rgba(94, 231, 131, 0.8);
  box-shadow: 0 0 0 3px rgba(94, 231, 131, 0.07), 0 8px 28px rgba(0, 0, 0, 0.3);
}

/* Belt end drums */
.belt-endcap {
  position: relative;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #3f5368, #111d2c 62%);
  border: 2px solid rgba(180, 195, 210, 0.13);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.belt-endcap::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #4e6478, #1b2836);
  border: 1px solid rgba(180, 195, 210, 0.1);
}

.belt-endcap.left { margin-left: -1px; }
.belt-endcap.right { margin-right: -1px; }

/* Belt body */
.belt-body {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.belt-surface {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(36, 54, 72, 0.95) 0px,
    rgba(36, 54, 72, 0.95) 14px,
    rgba(10, 18, 28, 0.95) 14px,
    rgba(10, 18, 28, 0.95) 28px
  );
  animation: beltRun 1.4s linear infinite;
}

.belt-surface.stopped {
  animation-play-state: paused;
  opacity: 0.4;
  filter: saturate(0.3);
}

@keyframes beltRun {
  from { background-position: 0 0; }
  to { background-position: 34px 0; }
}

.belt-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(94, 231, 131, 0.75);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -6px;
  pointer-events: none;
  z-index: 2;
}

.belt-arrows.stopped { color: rgba(160, 170, 180, 0.2); }
.conveyor-zone.jam .belt-arrows { color: rgba(247, 201, 72, 0.5); }

/* Workpieces */
.workpieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.workpieces .part {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, #c8b892, #8d7650);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.workpieces .part.s1 { left: 8%; }
.workpieces .part.band-1 { left: 25%; }
.workpieces .part.band-2 { left: 48%; }
.workpieces .part.band-3 { left: 70%; }
.workpieces .part.s2 { left: 84%; }
.workpieces .part.pruefung { left: 90%; }
.workpieces .part.ausgang { left: 94%; }
.workpieces .part.stau-1 { left: 28%; }
.workpieces .part.stau-2 { left: 36%; }
.workpieces .part.stau-3 { left: 44%; }

.part-1 { left: 18%; }
.part-2 { left: 48%; }
.part-3 { left: 75%; }

.workpieces.moving .part,
.workpieces.material-active .part {
  animation: moveParts 4s linear infinite;
}

.workpieces.stopped .part,
.workpieces.material-stopped .part {
  background: linear-gradient(180deg, #d6b560, #8c6b27);
  opacity: 0.75;
}

.workpieces.jammed .part-1 { left: 28%; }
.workpieces.jammed .part-2 { left: 36%; }
.workpieces.jammed .part-3 { left: 44%; }

.workpieces.material-stau .part {
  background: linear-gradient(180deg, #f7c948, #a36b00);
  box-shadow: 0 0 16px rgba(247, 201, 72, 0.5);
}

@keyframes moveParts {
  0% { transform: translateY(-50%) translateX(-12px); }
  50% { transform: translateY(-50%) translateX(12px); }
  100% { transform: translateY(-50%) translateX(-12px); }
}

/* ── Motor row below belt ── */
.conveyor-motor-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}

.drive-shaft-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.drive-shaft {
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.65), transparent);
  border-radius: 2px;
  margin: 0 auto;
}

.drive-coupling-plate {
  width: 30px;
  height: 6px;
  background: linear-gradient(180deg, #36475a, #1a2535);
  border: 1px solid rgba(180, 195, 210, 0.16);
  border-radius: var(--radius-xs);
}

.band-label-col {
  text-align: right;
}

.band-label {
  color: #9aa7b7;
  font-size: 12px;
}

.main-motor {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 100px;
}

.main-motor .node-led {
  z-index: 2;
}

.plant-motor-icon {
  position: relative;
  display: block;
  width: 72px;
  height: 58px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4));
}

.plant-motor-icon::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 46px;
  height: 28px;
  border: 1px solid rgba(180, 195, 210, 0.18);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(90deg, #243241 0 6px, #131d28 6px 11px);
}

.plant-motor-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(180, 195, 210, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle, #314052 0 35%, #101821 37% 100%);
}

.plant-motor-icon i {
  position: absolute;
  left: 34px;
  top: 5px;
  width: 28px;
  height: 15px;
  border: 1px solid rgba(180, 195, 210, 0.16);
  border-radius: var(--radius-xs);
  background: #1a2430;
}

.plant-motor-icon b {
  position: absolute;
  left: 22px;
  bottom: 3px;
  width: 48px;
  height: 10px;
  border: 1px solid rgba(180, 195, 210, 0.12);
  border-radius: var(--radius-xs);
  background: #101820;
}

.plant-motor-icon em {
  position: absolute;
  right: 4px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35d66b;
  box-shadow: 0 0 12px rgba(53, 214, 107, 0.6);
}

/* ── Aux aggregates ── */
.plant-aux {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 14px;
  align-items: center;
}

.aux-label {
  color: #8d99a8;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aux-motor-wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(110, 130, 150, 0.16);
  border-radius: var(--radius-md);
  background: rgba(10, 18, 28, 0.5);
}

.aux-icon {
  display: block;
  flex: 0 0 auto;
}

.aux-icon.luefter {
  animation: spinFan 3s linear infinite;
  transform-origin: 18px 18px;
}

@keyframes spinFan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Plant node base styles ── */
.plant-node {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(110, 130, 150, 0.22);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(22, 32, 44, 0.93), rgba(10, 16, 24, 0.95));
  color: #eef4fa;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.plant-node:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 231, 131, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.plant-node strong {
  display: block;
  padding-right: 18px;
  color: #eef4fa;
  font-size: 15px;
  font-weight: 850;
  overflow-wrap: break-word;
}

.plant-node small {
  display: block;
  margin-top: 4px;
  color: #a5b0bf;
  font-size: 12px;
}

.plant-node em {
  display: block;
  margin-top: 5px;
  color: #6ee787;
  font-size: 12px;
  font-style: normal;
  overflow-wrap: break-word;
}

.plant-node-text {
  display: block;
  min-width: 0;
}

.node-led {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35d66b;
  box-shadow: 0 0 16px rgba(53, 214, 107, 0.7);
}

.node-led.stopped {
  background: #6b7e8f;
  box-shadow: none;
}

.plant-node.ok { border-color: rgba(53, 214, 107, 0.5); }
.plant-node.warn { border-color: rgba(247, 201, 72, 0.7); }
.plant-node.error { border-color: rgba(255, 77, 79, 0.75); }

.plant-node.warn .node-led { background: #f7c948; box-shadow: 0 0 16px rgba(247, 201, 72, 0.65); }
.plant-node.warn em { color: #f7c948; }
.plant-node.error .node-led { background: #ff4d4f; box-shadow: 0 0 18px rgba(255, 77, 79, 0.75); }
.plant-node.error em { color: #ff9a9b; }

.plant-active {
  outline: 2px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.07);
}

/* ── Status/legend bars ── */
.plant-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: #aab5c3;
  font-size: 13px;
}

.plant-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: #aab5c3;
  font-size: 13px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
}

.dot.ok { background: #35d66b; }
.dot.warn { background: #f7c948; }
.dot.error { background: #ff4d4f; }

.line {
  display: inline-block;
  width: 32px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
}

.line.solid { border-top: 2px solid #35d66b; }
.line.dashed { border-top: 2px dashed #6ea8ff; }
.line.electric { border-top: 2px solid #f7c948; }

/* ── Detail panel ── */
.plant-detail-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(120, 140, 160, 0.18);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(18, 26, 36, 0.96), rgba(9, 14, 21, 0.98));
  color: #dce5ee;
}

.plant-detail-panel h3 {
  margin: 0;
  color: #f2f6fa;
  font-size: 20px;
}

.plant-detail-panel dl {
  display: grid;
  gap: 8px;
}

.plant-detail-panel dl div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.plant-detail-panel dd {
  overflow-wrap: anywhere;
}

/* ── Compact overrides ── */
.plant-card.compact .plant-header {
  margin-bottom: 12px;
}

.plant-card.compact .plant-header p,
.plant-card.compact .plant-status-chips,
.plant-card.compact .plant-legend {
  display: none;
}

.plant-card.compact .plant-layout {
  padding: 12px;
  gap: 12px;
}

.plant-card.compact .plant-power-row {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.plant-card.compact .plant-power-row .power-cable,
.plant-card.compact .plant-power-row .fu-node {
  display: none;
}

.plant-card.compact .conveyor-zone {
  height: 60px;
  border-radius: 30px;
}

.plant-card.compact .belt-endcap {
  width: 60px;
  height: 60px;
}

.plant-card.compact .conveyor-sensor-row {
  padding: 0 60px;
}

.plant-card.compact .sensor-col:nth-child(2) {
  display: none;
}

.plant-card.compact .plant-node {
  min-height: 54px;
  padding: 8px 10px;
}

.plant-card.compact .plant-node strong {
  font-size: 12px;
}

.plant-card.compact .plant-node small {
  font-size: 10px;
}

.plant-card.compact .plant-node em {
  display: none;
}

.plant-card.compact .conveyor-motor-row {
  grid-template-columns: 40px 1fr;
}

.plant-card.compact .band-label-col {
  display: none;
}

.plant-card.compact .main-motor {
  grid-template-columns: 48px 1fr;
  gap: 8px;
  min-height: 64px;
}

.plant-card.compact .plant-motor-icon {
  transform: scale(0.7);
  transform-origin: left center;
}

.plant-card.compact .plant-aux {
  grid-template-columns: 1fr 1fr;
}

.plant-card.compact .aux-label {
  display: none;
}

.plant-card.compact .aux-motor-wrap {
  grid-template-columns: 32px 1fr;
  padding: 10px;
  gap: 8px;
}

.plant-card.compact .aux-icon {
  width: 28px;
  height: 28px;
}

.plant-card.compact .aux-icon.luefter {
  transform-origin: 14px 14px;
}

.plant-card.compact .plant-statusbar {
  font-size: 11px;
}

.plant-card.compact .plant-statusbar span:nth-child(n+4) {
  display: none;
}

.plant-open-button {
  display: block;
  width: min(230px, 100%);
  margin: 14px auto 0;
  border-color: rgba(120, 140, 160, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Start chain ── */
.start-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.start-chain-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 12px;
}

.start-chain-item strong,
.start-chain-item small {
  overflow-wrap: break-word;
}

.start-chain-item.ok {
  border-color: rgba(53, 214, 107, 0.35);
  color: #70e58a;
}

.start-chain-item.error {
  border-color: rgba(255, 77, 79, 0.55);
  color: #ff6b6b;
}

.start-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

/* ── Responsive ── */
@media (max-width: 1480px) {
  .plant-shell {
    grid-template-columns: 1fr;
  }

  .plant-detail-panel {
    max-width: none;
    min-height: 220px;
  }
}

@media (max-width: 1200px) {
  .plant-power-row {
    grid-template-columns: minmax(130px, 180px) 1fr minmax(130px, 180px);
  }

  .plant-power-row .power-cable:last-of-type,
  .plant-power-row .fu-node {
    display: none;
  }
}

@media (max-width: 900px) {
  .conveyor-flow {
    flex-wrap: wrap;
  }

  .conveyor-center {
    order: -1;
    width: 100%;
  }

  .conveyor-right {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .plant-power-row {
    grid-template-columns: 1fr 1fr;
  }

  .plant-power-row .power-cable,
  .plant-power-row .fu-node {
    display: none;
  }

  .plant-aux {
    grid-template-columns: 1fr 1fr;
  }

  .plant-aux .aux-label {
    display: none;
  }
}

/* Struktur-/Design-Feinschliff: Topbar, Statusvarianten, Icons und Seitenwechsel. */

.kopf-text {
  grid-area: title;
}

.top-search {
  grid-area: search;
  min-width: 0;
}

.top-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.top-status-row {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding-top: 2px;
}

.top-sim,
.top-clock,
.top-mode,
.top-refresh-chip,
.top-update-label,
.top-update-interval,
.top-status-row > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.top-status-row > strong,
.top-clock b,
.top-sim b,
.top-update-interval b {
  color: var(--text-main);
  font-weight: 700;
}

.top-sim { min-width: 148px; }
.top-mode { min-width: 156px; }
.top-refresh-chip {
  min-width: 156px;
  color: var(--ok);
  border-color: rgba(53, 214, 107, 0.24);
  background: rgba(53, 214, 107, 0.07);
}
.top-refresh-chip.refresh-paused {
  color: var(--warn);
  border-color: rgba(247, 201, 72, 0.28);
  background: rgba(247, 201, 72, 0.07);
}
.top-update-interval { min-width: 102px; }
.top-clock {
  min-width: 142px;
  font-variant-numeric: tabular-nums;
}
#aktuelleUhrzeit { min-width: 70px; text-align: center; }
#letzteAktualisierung {
  min-width: 168px;
  font-variant-numeric: tabular-nums;
}

.top-actions .rollenwahl {
  min-width: 132px;
  margin: 0;
}

.notification-dot {
  display: none;
}

.seite.aktiv {
  animation: pmlPageFadeIn 180ms ease both;
}

@keyframes pmlPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.status-badge.ok,
.status-badge.status-ok {
  color: var(--ok);
  border-color: rgba(53, 214, 107, 0.32);
  background: rgba(53, 214, 107, 0.08);
}

.status-badge.warn,
.status-badge.status-warn {
  color: var(--warn);
  border-color: rgba(247, 201, 72, 0.36);
  background: rgba(247, 201, 72, 0.08);
}

.status-badge.error,
.status-badge.status-error {
  color: var(--error);
  border-color: rgba(255, 77, 79, 0.40);
  background: rgba(255, 77, 79, 0.08);
}

.status-text.ok,
.status-text.status-ok,
.status-text.status-gruen {
  color: var(--ok);
}

.status-text.warn,
.status-text.status-warn,
.status-text.status-gelb {
  color: var(--warn);
}

.status-text.error,
.status-text.status-error,
.status-text.status-rot {
  color: var(--error);
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.status-dot.ok,
.status-dot.status-ok {
  color: var(--ok);
}

.status-dot.warn,
.status-dot.status-warn {
  color: var(--warn);
}

.status-dot.error,
.status-dot.status-error {
  color: var(--error);
}

.card.status-ok,
.panel.status-ok {
  border-color: rgba(53, 214, 107, 0.26);
}

.card.status-warn,
.panel.status-warn {
  border-color: rgba(247, 201, 72, 0.32);
}

.card.status-error,
.panel.status-error {
  border-color: rgba(255, 77, 79, 0.36);
}

.asset-icon {
  width: 100%;
  max-width: 170px;
  height: auto;
  display: block;
  margin: 0 auto;
  color: var(--ok);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.38));
}

.mini-sparkline .spark-label {
  fill: currentColor;
  font-size: 11px;
  opacity: 0.62;
}

.asset-icon.warn {
  color: var(--warn);
}

.asset-icon.error {
  color: var(--error);
}

.asset-icon .asset-glow {
  fill: currentColor;
  opacity: 0.08;
  stroke: currentColor;
  stroke-opacity: 0.22;
}

.asset-icon .asset-shape {
  fill: #1f2937;
  stroke: rgba(226, 232, 240, 0.28);
  stroke-width: 2;
}

.asset-icon .asset-shape path,
.asset-icon .asset-shape rect,
.asset-icon .asset-shape circle {
  vector-effect: non-scaling-stroke;
}

.asset-icon .asset-shape path:last-child {
  fill: none;
  stroke: rgba(203, 213, 225, 0.32);
  stroke-width: 2;
}

.asset-icon .asset-led {
  fill: currentColor;
  filter: drop-shadow(0 0 10px currentColor);
}

.motor-visual {
  display: grid;
  place-items: center;
}

@media (max-width: 1080px) {
  .kopfbereich {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "search"
      "actions"
      "status";
  }

  .top-actions,
  .top-status-row {
    justify-content: flex-start;
  }

  .such-ergebnisse {
    top: 176px;
  }
}

/* ── Handlung-Panel ── */
.handlung-kontext {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.handlung-kontext.warn { color: var(--warn); }
.handlung-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.handlung-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
.handlung-chip.warn {
  border-color: rgba(247,201,72,0.35);
  color: var(--warn);
  background: rgba(247,201,72,0.08);
}

/* ── Live-Filter-Tabs ── */
.live-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(10, 18, 28, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}

.live-filter-tabs button {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.15s;
}

.live-filter-tabs button.aktiv,
.live-filter-tabs button:hover {
  border-color: rgba(53, 214, 107, 0.45);
  color: var(--ok);
  background: rgba(53, 214, 107, 0.1);
  box-shadow: 0 0 10px rgba(53, 214, 107, 0.12);
}

.live-kompakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.motor-card-kompakt {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(14, 22, 34, 0.97), rgba(8, 14, 22, 0.99));
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.motor-card-kompakt:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

.motor-card-kompakt.status-gruen,
.motor-card-kompakt.status-ok {
  border-color: rgba(53, 214, 107, 0.28);
}

.motor-card-kompakt.status-gelb,
.motor-card-kompakt.status-warn {
  border-color: rgba(247, 201, 72, 0.38);
}

.motor-card-kompakt.status-rot,
.motor-card-kompakt.status-error {
  border-color: rgba(255, 77, 79, 0.42);
}

.motor-card-head,
.motor-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.motor-card-head strong {
  display: block;
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.motor-card-head small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.motor-card-foot {
  align-items: center;
}

.motor-card-foot span {
  color: var(--text-muted);
  font-size: 11px;
}

.motor-card-head b {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  padding: 3px 8px;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.live-chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.live-mess-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 600;
}

.live-mess-chip b {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.live-mess-chip.status-gelb,
.live-mess-chip.status-warn { border-color: rgba(247,201,72,0.3); color: var(--warn); }
.live-mess-chip.status-rot,
.live-mess-chip.status-error { border-color: rgba(255,77,79,0.3); color: var(--error); }
.live-mess-chip.status-gruen,
.live-mess-chip.status-ok { border-color: rgba(53,214,107,0.22); }

.motor-card-foot button {
  border-radius: var(--radius-md);
  padding: 6px 10px;
}

.plant-line-card {
  min-width: 0;
}

.anlage-line-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.anlage-line-kpis div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  padding: 10px 12px;
}

.anlage-line-kpis span {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anlage-line-kpis strong {
  color: var(--text-main);
  font-size: 20px;
}

.anlage-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.anlage-linie-flow {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px 0 8px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 214, 107, 0.3) transparent;
}

.anlage-flow-tile {
  flex: 0 0 132px;
  min-width: 120px;
  max-width: 200px;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(17, 24, 32, 0.96), rgba(8, 13, 20, 0.98));
  color: var(--text-main);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
}

.anlage-flow-tile:active { transform: scale(0.98); }

.anlage-band-tile {
  flex: 0 1 100px;
  min-width: 80px;
  max-width: 120px;
  min-height: 100px;
  background: linear-gradient(180deg, rgba(11,18,28,0.97), rgba(6,10,16,0.99));
}

.anlage-detail-panel {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  min-height: 60px;
}

.anlage-flow-tile[data-anlage-id="saegestation"] { border-left: 3px solid rgba(251, 146, 60, 0.5); }
.anlage-flow-tile[data-anlage-id="cnc_station"] { border-left: 3px solid rgba(99, 179, 237, 0.5); }
.anlage-flow-tile[data-anlage-id="reinigungsstation"] { border-left: 3px solid rgba(56, 189, 248, 0.5); }
.anlage-flow-tile[data-anlage-id="schwarzkammer"] { border-left: 3px solid rgba(192, 132, 252, 0.5); }
.anlage-flow-tile[data-anlage-id="versand"] { border-left: 3px solid rgba(250, 204, 21, 0.5); }
.anlage-flow-tile[data-anlage-id="materialeingang"] { border-left: 3px solid rgba(53, 214, 107, 0.5); }
.anlage-band-tile { border-left: 3px solid rgba(148, 163, 184, 0.2); }

.anlage-flow-tile:hover,
.anlage-flow-tile.aktiv {
  border-color: rgba(53, 214, 107, 0.48);
  box-shadow: 0 0 22px rgba(53, 214, 107, 0.12);
}

.anlage-flow-tile.warn {
  border-color: rgba(247, 201, 72, 0.42);
}

.anlage-flow-tile.error {
  border-color: rgba(255, 77, 79, 0.46);
}

.anlage-flow-tile small,
.anlage-flow-tile em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

.anlage-sensor-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 10px;
}

.anlage-sensor-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
}

.anlage-sensor-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(53, 214, 107, 0.45); }
.anlage-sensor-dot.warn { background: var(--warn); box-shadow: 0 0 8px rgba(247, 201, 72, 0.45); }
.anlage-sensor-dot.err { background: var(--error); box-shadow: 0 0 8px rgba(255, 77, 79, 0.45); }

.anlage-kuka-badge {
  justify-self: start;
  font-size: 9px;
  font-weight: 700;
  color: rgba(192, 132, 252, 0.9);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  background: rgba(192, 132, 252, 0.08);
}

.anlage-mini-belt {
  position: relative;
  height: 22px;
  margin-top: 4px;
  border-radius: 4px;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(36,54,72,0.95) 0px, rgba(36,54,72,0.95) 6px,
    rgba(10,18,28,0.95) 6px, rgba(10,18,28,0.95) 12px
  );
  background-size: 16px 100%;
  overflow: hidden;
}

.anlage-mini-belt.active {
  animation: beltRun 1.2s linear infinite;
}

.anlage-mini-belt i {
  position: absolute;
  top: 6px;
  width: 12px;
  height: 10px;
  border-radius: 2px;
  background: rgba(199,167,91,0.85);
  box-shadow: 0 0 4px rgba(199,167,91,0.4);
}

.anlage-mini-belt i:nth-child(1) { left: 12%; }
.anlage-mini-belt i:nth-child(2) { left: 44%; }
.anlage-mini-belt i:nth-child(3) { left: 74%; }
.anlage-mini-belt.jam i { background: rgba(239,68,68,0.85); box-shadow: 0 0 5px rgba(239,68,68,0.5); }
.anlage-mini-belt.stopped { opacity: 0.45; }
.anlage-mini-belt.jam { border: 1px solid rgba(239,68,68,0.4); }

.anlage-detail-panel {
  min-width: 0;
  min-height: 320px;
  border: 1.5px solid rgba(53, 214, 107, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(7, 12, 20, 0.95);
  padding: 18px;
  overflow: auto;
  max-height: 75vh;
  transition: border-color 0.2s;
}

.anlage-detail-panel:not(:empty) {
  border-color: rgba(53, 214, 107, 0.3);
}

.alarm-station {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(56, 189, 248, 0.08);
  color: #bae6fd;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .anlage-main-grid {
    grid-template-columns: 1fr;
  }

  .anlage-detail-panel {
    max-height: none;
  }
}

/* ============================================================
   PRODUKTIONSLINIE — Phase 1
   ============================================================ */

.linie-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-y: visible;
  overflow-x: clip;
}

/* ── Topbar ── */
.linie-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(10, 18, 28, 0.7);
  border: 1px solid rgba(53, 214, 107, 0.18);
  border-radius: var(--radius-md);
}

.linie-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.linie-topbar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-prim);
  letter-spacing: 0.02em;
}

.linie-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.linie-badge.linie-status-ok      { background: rgba(53, 214, 107, 0.15); color: var(--ok);   border: 1px solid rgba(53,214,107,0.35); }
.linie-badge.linie-status-warnung { background: rgba(255, 193, 7, 0.15);  color: var(--warn); border: 1px solid rgba(255,193,7,0.35); }
.linie-badge.linie-status-fehler  { background: rgba(239, 68, 68, 0.15);  color: var(--error);border: 1px solid rgba(239,68,68,0.35); }

.linie-kpis {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.linie-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  background: rgba(4, 9, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  min-width: 72px;
}

.linie-kpi-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.linie-kpi-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-prim);
}

.linie-kpi-value.linie-status-ok      { color: var(--ok); }
.linie-kpi-value.linie-status-warnung { color: var(--warn); }
.linie-kpi-value.linie-status-fehler  { color: var(--error); }

.linie-alarme-mini {
  font-size: 11px;
  color: var(--text-sec);
  flex: 0 0 auto;
}

.linie-alarm-ok   { color: var(--ok); font-weight: 600; }
.linie-alarm-eintrag { color: var(--error); font-weight: 600; }

/* ── LED indicator ── */
.linie-led {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.linie-led.linie-status-ok      { background: var(--ok);   box-shadow: 0 0 6px var(--ok); }
.linie-led.linie-status-warnung { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: errorPulse 1.4s ease-in-out infinite; }
.linie-led.linie-status-fehler  { background: var(--error);box-shadow: 0 0 6px var(--error); animation: errorPulse 0.7s ease-in-out infinite; }

/* ── Flow scroll container ── */
.linie-flow-scroll {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 214, 107, 0.3) transparent;
}
.linie-flow-scroll::-webkit-scrollbar { height: 5px; }
.linie-flow-scroll::-webkit-scrollbar-track { background: transparent; }
.linie-flow-scroll::-webkit-scrollbar-thumb { background: rgba(53,214,107,0.3); border-radius: 3px; }

.linie-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: max-content;
  padding: 8px 4px;
}

/* ── Generic block base ── */
.linie-block {
  position: relative;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(10, 18, 28, 0.75);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 8px;
  gap: 6px;
}

.linie-block:hover {
  border-color: rgba(53, 214, 107, 0.5);
  background: rgba(14, 26, 40, 0.9);
  box-shadow: 0 0 14px rgba(53, 214, 107, 0.12);
}

.linie-block.linie-block-active {
  border-color: rgba(53, 214, 107, 0.85);
  box-shadow: 0 0 20px rgba(53, 214, 107, 0.2);
  background: rgba(20, 36, 52, 0.95);
}

.linie-led {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ── Station block ── */
.lstation {
  width: 100px;
  min-height: 120px;
  align-self: center;
}

.lstation-icon {
  color: rgba(94, 231, 131, 0.7);
  margin-top: 4px;
}

.lstation-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lstation-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-prim);
  line-height: 1.2;
}

.lstation-activity {
  font-size: 9px;
  color: var(--text-sec);
  line-height: 1.3;
}

.lstation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 2px;
}

.lstation-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: rgba(53, 214, 107, 0.12);
  color: rgba(94, 231, 131, 0.85);
  border: 1px solid rgba(53, 214, 107, 0.2);
}

.lstation-badge-robot {
  background: rgba(99, 179, 237, 0.12);
  color: rgba(144, 205, 244, 0.9);
  border-color: rgba(99, 179, 237, 0.25);
}

/* station colour accents */
.lstation-cnc      { border-color: rgba(99, 179, 237, 0.25); }
.lstation-cnc:hover { border-color: rgba(99, 179, 237, 0.6); }
.lstation-pruef    { border-color: rgba(192, 132, 252, 0.25); }
.lstation-pruef:hover { border-color: rgba(192, 132, 252, 0.6); }
.lstation-rein     { border-color: rgba(56, 189, 248, 0.25); }
.lstation-rein:hover { border-color: rgba(56, 189, 248, 0.6); }
.lstation-eingang  { border-color: rgba(53, 214, 107, 0.25); }
.lstation-eingang:hover { border-color: rgba(53, 214, 107, 0.6); }
.lstation-bear     { border-color: rgba(251, 146, 60, 0.25); }
.lstation-bear:hover { border-color: rgba(251, 146, 60, 0.6); }
.lstation-versand  { border-color: rgba(250, 204, 21, 0.25); }
.lstation-versand:hover { border-color: rgba(250, 204, 21, 0.6); }

/* ── Förderband block ── */
.linie-band {
  width: 110px;
  min-height: 80px;
  align-self: center;
  padding: 8px 6px 6px;
  /* connect visually to neighbours */
  border-radius: var(--radius-sm);
  margin: 0 -2px;
  z-index: 1;
}

.lband-visual {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  gap: 0;
}

.lband-endcap {
  flex: 0 0 18px;
  width: 18px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #3f5368, #111d2c 68%);
  border: 1.5px solid rgba(53, 214, 107, 0.3);
}

.lband-body {
  position: relative;
  flex: 1;
  height: 38px;
  overflow: hidden;
  border-top: 1.5px solid rgba(53, 214, 107, 0.3);
  border-bottom: 1.5px solid rgba(53, 214, 107, 0.3);
}

.lband-surface {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(36, 54, 72, 0.95) 0px,   rgba(36, 54, 72, 0.95) 8px,
    rgba(10, 18, 28, 0.95) 8px,   rgba(10, 18, 28, 0.95) 16px
  );
  animation: beltRun 1.2s linear infinite;
}

.lband-surface.stopped {
  animation-play-state: paused;
  opacity: 0.3;
  filter: saturate(0.2);
}

.lband-part {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 10px;
  background: rgba(94, 231, 131, 0.7);
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 0 6px rgba(94, 231, 131, 0.5);
  animation: moveParts 2.5s ease-in-out infinite;
}

.lband-stau-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 3;
  animation: errorPulse 0.8s ease-in-out infinite;
}

.lband-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.lband-id {
  font-size: 9px;
  font-weight: 800;
  color: rgba(94, 231, 131, 0.8);
  letter-spacing: 0.08em;
}

.lband-name {
  font-size: 8px;
  color: var(--text-sec);
  text-align: center;
}

.lband-link-hint {
  font-size: 8px;
  color: rgba(94, 231, 131, 0.5);
  font-style: italic;
}

.band-stau {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
}

/* ── Detail panel ── */
.linie-detail-panel {
  background: rgba(8, 15, 24, 0.92);
  border: 1.5px solid rgba(53, 214, 107, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Größeres HMI-Panel für die Produktionslinie-Seite */
.linie-detail-panel-hmi {
  border-color: rgba(111,182,255,0.28);
  background: rgba(4,10,24,0.96);
  min-height: 320px;
}
/* plant-card.large im Linie-Panel: vollen Platz nutzen */
.linie-detail-panel-hmi .plant-card.large,
.linie-detail-panel-hmi section.plant-card {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.linie-detail-panel-hmi .hmi-schematic-body {
  min-height: 160px;
}
.linie-detail-panel-hmi .hmi-motors-grid {
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
}
.linie-detail-panel-hmi .plant-header h2 {
  font-size: 1.15rem;
}

.ldetail-placeholder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
}
.ldetail-placeholder-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ldetail-placeholder-icon {
  font-size: 2rem;
  color: rgba(111,182,255,0.35);
  flex-shrink: 0;
}
.ldetail-warn-chip {
  border-color: rgba(234,179,8,0.4) !important;
  color: var(--gelb) !important;
}
.ldetail-wartung-hinweis {
  padding: 10px 14px;
  background: rgba(234,179,8,0.08);
  border: 1px solid rgba(234,179,8,0.3);
  border-radius: var(--radius-xs);
  font-size: .8rem;
  color: var(--gelb);
}

.ldetail-linie-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ldetail-linie-info span {
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.ldetail-alarm-hint {
  color: var(--warn) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
}

.ldetail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ldetail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ldetail-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-prim);
}

.ldetail-sub {
  font-size: 11px;
  color: var(--text-sec);
}

.ldetail-infos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ldetail-section-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.ldetail-motoren {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ldetail-sensoren,
.ldetail-fc,
.ldetail-massnahme,
.ldetail-pruef {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ldetail-massnahme p {
  margin: 0;
  font-size: 12px;
  color: var(--text-sec);
}

.ldetail-leer {
  font-size: 12px;
  color: var(--text-sec);
  font-style: italic;
  margin: 0;
}

/* ── Motor detail card ── */
.lmotor-karte {
  background: rgba(12, 22, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-width: 240px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lmotor-karte-roboter {
  border-color: rgba(99, 179, 237, 0.25);
}

.lmotor-karte-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lmotor-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-prim);
  flex: 1;
}

.lmotor-id {
  font-size: 9px;
  color: var(--text-sec);
  font-family: var(--font-mono, monospace);
}

.lmotor-risiko {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.lmotor-risiko.risiko-hoch   { background: rgba(239, 68, 68, 0.15); color: var(--error); border: 1px solid rgba(239,68,68,0.3); }
.lmotor-risiko.risiko-mittel { background: rgba(255, 193, 7, 0.15);  color: var(--warn);  border: 1px solid rgba(255,193,7,0.3); }
.lmotor-risiko.risiko-niedrig{ background: rgba(53, 214, 107, 0.1);  color: var(--ok);    border: 1px solid rgba(53,214,107,0.2); }

/* ── Sensor grid inside motor card ── */
.lsens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.lsens-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  background: rgba(4, 9, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.lsens-cell.lsens-ok   { border-color: rgba(53, 214, 107, 0.2); }
.lsens-cell.lsens-warn { border-color: rgba(255, 193, 7, 0.3);  background: rgba(255, 193, 7, 0.06); }
.lsens-cell.lsens-err  { border-color: rgba(239, 68, 68, 0.3);  background: rgba(239, 68, 68, 0.06); }

.lsens-icon {
  font-size: 13px;
  margin-bottom: 2px;
}

.lsens-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-prim);
  line-height: 1.1;
}

.lsens-val small {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-sec);
  margin-left: 1px;
}

.lsens-label {
  font-size: 8px;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.lsens-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.lsens-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.lsens-tag.lsens-ok   { background: rgba(53, 214, 107, 0.1);  color: var(--ok);    border: 1px solid rgba(53,214,107,0.2); }
.lsens-tag.lsens-warn { background: rgba(255, 193, 7, 0.12);  color: var(--warn);  border: 1px solid rgba(255,193,7,0.25); }
.lsens-tag.lsens-err  { background: rgba(239, 68, 68, 0.12);  color: var(--error); border: 1px solid rgba(239,68,68,0.25); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .lsens-grid { grid-template-columns: repeat(2, 1fr); }
  .linie-topbar { flex-direction: column; align-items: flex-start; }
  .linie-kpis { width: 100%; }
  .lstation { width: 88px; min-height: 100px; }
  .linie-band { width: 100px; }
}

/* ════════════════════════════════════════════════════════════════
   Kompakt-Strip: Produktionslinie auf der Übersicht-Seite
   ════════════════════════════════════════════════════════════════ */
.linie-strip-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-card);
  padding: 14px 18px 12px;
  margin-bottom: 18px;
  overflow: hidden;
}

/* ── Header row ── */
.linie-strip-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.linie-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.linie-badge.linie-status-ok      { background: rgba(53,214,107,.12); color: var(--ok);    border: 1px solid rgba(53,214,107,.25); }
.linie-badge.linie-status-warnung  { background: rgba(255,193,7,.12);  color: var(--warn);  border: 1px solid rgba(255,193,7,.25); }
.linie-badge.linie-status-fehler   { background: rgba(239,68,68,.12);  color: var(--error); border: 1px solid rgba(239,68,68,.25); }

.linie-strip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.linie-strip-engpass {
  font-size: 11px;
  color: var(--warn);
  font-weight: 600;
}

.linie-strip-alarm {
  font-size: 11px;
  color: var(--error);
  font-weight: 700;
  animation: beamPulse 1s ease-in-out infinite alternate;
}

.linie-strip-kpi {
  font-size: 11px;
  color: var(--text-secondary);
}

.linie-strip-btn {
  margin-left: auto;
  background: rgba(53,214,107,.1);
  color: var(--ok);
  border: 1px solid rgba(53,214,107,.25);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.linie-strip-btn:hover {
  background: rgba(53,214,107,.2);
  border-color: rgba(53,214,107,.5);
}

/* ── Flow strip ── */
.linie-strip-flow {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}

/* Stations */
.strip-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  padding: 8px 6px;
  background: var(--bg-element);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.strip-station:hover {
  background: var(--bg-hover);
  border-color: rgba(255,255,255,.18);
}
.strip-station.linie-status-ok      { border-color: rgba(53,214,107,.2); }
.strip-station.linie-status-warnung  { border-color: rgba(255,193,7,.3); }
.strip-station.linie-status-fehler   { border-color: rgba(239,68,68,.35); }

/* Status LED dot */
.strip-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.strip-led.linie-status-ok      { background: var(--ok);    box-shadow: 0 0 5px rgba(53,214,107,.55); }
.strip-led.linie-status-warnung  { background: var(--warn);  box-shadow: 0 0 5px rgba(255,193,7,.55); }
.strip-led.linie-status-fehler   { background: var(--error); box-shadow: 0 0 5px rgba(239,68,68,.55); }

.strip-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 60px;
}

.strip-robot {
  font-size: 8px;
  font-weight: 700;
  color: rgba(192,132,252,.85);
  letter-spacing: .04em;
  border: 1px solid rgba(192,132,252,.2);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Conveyor band segments */
.strip-band {
  width: 80px;
  height: 30px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  align-self: center;
  border-radius: 4px;
  margin: 0 -1px;          /* overlap station borders for seamless look */
  z-index: 0;
}
.strip-band.strip-jam .strip-belt {
  animation-play-state: paused;
  opacity: 0.45;
}

.strip-belt {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(36,54,72,.95)  0px, rgba(36,54,72,.95)  8px,
    rgba(10,18,28,.95)  8px, rgba(10,18,28,.95) 16px
  );
  background-size: 20px 100%;
  animation: beltRun .9s linear infinite;
}
.strip-belt.stopped {
  animation-play-state: paused;
  opacity: 0.35;
}

/* Workpiece dot on mini belt */
.strip-part {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(53,214,107,.75);
  box-shadow: 0 0 4px rgba(53,214,107,.4);
  animation: moveParts 2.8s ease-in-out infinite;
}

/* Stau indicator */
.strip-band.strip-jam::after {
  content: "JAM";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--error);
  background: rgba(239,68,68,.12);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   Strip station: warn dot + button reset
   ════════════════════════════════════════════════════════════════ */
.strip-station[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-element, rgba(255,255,255,0.04));
  font: inherit;
  text-align: center;
}
.strip-warn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 4px var(--warn);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   Station showcase card: alarm dot indicator
   ════════════════════════════════════════════════════════════════ */
.station-card-alarm-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}
.station-card-alarm-dot.fehler  { background: var(--error); box-shadow: 0 0 5px var(--error); animation: errorPulse 0.8s ease-in-out infinite; }
.station-card-alarm-dot.warnung { background: var(--warn);  box-shadow: 0 0 5px var(--warn); }

.station-type-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  margin-right: 8px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(56, 189, 248, 0.08);
  color: #bae6fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* ════════════════════════════════════════════════════════════════
   Motor detail card: status border variants + action button
   ════════════════════════════════════════════════════════════════ */
.lmotor-karte-fehler {
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}
.lmotor-karte-warn {
  border-color: rgba(255, 193, 7, 0.3) !important;
  background: rgba(255, 193, 7, 0.04) !important;
}
.lmotor-action-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.lmotor-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════
   linie-strip-kpi colored variants (OEE, Taktzeit)
   ════════════════════════════════════════════════════════════════ */
.linie-strip-kpi.linie-status-ok      { color: var(--ok);    font-weight: 600; }
.linie-strip-kpi.linie-status-warnung { color: var(--warn);  font-weight: 600; }
.linie-strip-kpi.linie-status-fehler  { color: var(--error); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   Station tile: motor alarm badge variants
   ════════════════════════════════════════════════════════════════ */
.lstation-motor-fehler {
  background: rgba(239, 68, 68, 0.18) !important;
  color: var(--error) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
.lstation-motor-warn {
  background: rgba(255, 193, 7, 0.15) !important;
  color: var(--warn) !important;
  border-color: rgba(255, 193, 7, 0.35) !important;
}

/* ════════════════════════════════════════════════════════════════
   Live-Daten: summary row below filter tabs
   ════════════════════════════════════════════════════════════════ */
.live-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.live-sum-ok   { color: var(--ok);    font-weight: 600; }
.live-sum-warn { color: var(--warn);  font-weight: 600; }
.live-sum-err  { color: var(--error); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   Alarm page enhancements
   ════════════════════════════════════════════════════════════════ */
.alarm-eintrag-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.alarm-eintrag-head strong {
  font-size: 14px;
}
.alarm-eintrag-head small {
  color: var(--text-muted);
  font-size: 12px;
}
.alarm-eintrag-body {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.alarm-eintrag-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 8px;
}
.alarm-status-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.alarm-station-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.alarm-station-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.alarm-linie-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.alarm-summary-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.alarm-sum-chip {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  font-weight: 600;
}
.alarm-sum-open {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--error);
}
.alarm-sum-quit {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.25);
  color: var(--warn);
}

/* ════════════════════════════════════════════════════════════════
   Live-Daten filter tabs: count badge
   ════════════════════════════════════════════════════════════════ */
.live-filter-tabs button small {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.65;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════
   Schrittkette — zwei Ebenen (Linien + Modul)
   ════════════════════════════════════════════════════════════════ */
.sk-tab-row {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sk-tab-btn {
  padding: 7px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sk-tab-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sk-tab-aktiv {
  background: rgba(111, 182, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
/* Linien-Schrittkette status bar */
.lk-status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(111, 182, 255, 0.07);
  border: 1px solid rgba(111, 182, 255, 0.22);
  border-radius: var(--radius-xs);
}
.lk-schritt-chip {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.lk-chip-ok {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.4);
  color: var(--gruen);
}
.lk-chip-err {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--error);
}
.lk-chip-idle {
  background: rgba(255,255,255, 0.05);
  border-color: rgba(255,255,255, 0.12);
  color: var(--text-muted);
}
.lk-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.lk-stoerung-bereich {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(239, 68, 68, 0.2);
}
.lk-stoerung-label {
  font-size: 12px;
  color: var(--error);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Motor-Chips inside step cards */
.sk-motor-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.sk-chip-ok {
  background: rgba(46, 204, 113, 0.13);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--gruen);
}
.sk-chip-warn {
  background: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--gelb);
}
.sk-chip-fehler {
  background: rgba(239, 68, 68, 0.13);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--error);
}
.sk-aktiv-label {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
}
.sk-done-label {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gruen);
}
.sk-bedingung {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Elektronik — Abschnitte A / B / C / D
   ════════════════════════════════════════════════════════════════ */
.elek-section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linie);
}
.elek-section-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.elek-count-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(111, 182, 255, 0.1);
  border: 1px solid rgba(111, 182, 255, 0.2);
  color: var(--accent);
}
.elek-versorgung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.elek-versorgung {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--linie);
  font-size: 12px;
}
.elek-versorgung strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.elek-motor-gruppe {
  margin-bottom: 16px;
}
.elek-motor-gruppe > summary,
.elek-motor-gruppe > h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  background: rgba(111, 182, 255, 0.05);
  border-radius: var(--radius-xs);
}
.elek-motor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.elek-motor-karte {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.elek-motor-karte.elek-fehler {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}
.elek-motor-karte.elek-warn {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.04);
}
.elek-motor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.elek-motor-head strong {
  font-size: 13px;
}
.elek-sensor-gruppe {
  margin-bottom: 12px;
}
.elek-sensor-gruppe > summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  padding: 5px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════
   Instandhaltung — Kompaktkarten für alle_motoren
   ════════════════════════════════════════════════════════════════ */
.instand-section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
  font-weight: 600;
}
.instand-divider {
  height: 1px;
  background: var(--linie);
  margin: 24px 0;
  opacity: 0.5;
}
.instand-station-group {
  margin-bottom: 18px;
}
.instand-station-group > h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  padding: 5px 10px;
  background: rgba(111, 182, 255, 0.05);
  border-radius: var(--radius-xs);
}
.instand-motor-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.instand-kompakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.instand-kompakt-karte {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: 12px;
  position: relative;
}
.instand-kompakt-karte.instand-fehler {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}
.instand-kompakt-karte.instand-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.04);
}
.instand-kompakt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.instand-kompakt-id {
  font-size: 13px;
  font-weight: 700;
}
.instand-kompakt-station {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.instand-kompakt-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.instand-kompakt-led.led-ok   { background: var(--gruen); box-shadow: 0 0 4px var(--gruen); }
.instand-kompakt-led.led-warn { background: var(--gelb);  box-shadow: 0 0 4px var(--gelb); }
.instand-kompakt-led.led-err  { background: var(--error); box-shadow: 0 0 4px var(--error); animation: hmi-red-pulse 1.6s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════
   SPS I/O — Stationen-Accordion
   ════════════════════════════════════════════════════════════════ */
.sps-header-panel {
  padding: 12px 16px;
  background: rgba(111, 182, 255, 0.06);
  border: 1px solid rgba(111, 182, 255, 0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.sps-versorgung-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.sps-versorgung-row span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--linie);
  font-size: 12px;
}
.sps-stationen-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sps-station-gruppe {
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sps-station-gruppe > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  user-select: none;
  gap: 10px;
}
.sps-station-gruppe > summary::-webkit-details-marker { display: none; }
.sps-station-gruppe > summary:hover { background: rgba(255,255,255,0.05); }
.sps-station-gruppe[open] > summary {
  background: rgba(111, 182, 255, 0.07);
  color: var(--accent);
}
.sps-station-gruppe .io-grid {
  padding: 10px 14px;
}
.sps-diagnosegruppen {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.sps-diagnosegruppe {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  padding: 12px;
}
.sps-diagnosegruppe h3 {
  margin: 0 0 10px;
  color: var(--text-main);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sps-station-status {
  font-size: 11px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.sps-station-status.ok    { background: rgba(46, 204, 113, 0.12); border-color: rgba(46,204,113,0.3); color: var(--gruen); }
.sps-station-status.warn  { background: rgba(245, 158, 11, 0.12); border-color: rgba(245,158,11,0.3); color: var(--gelb); }
.sps-station-status.error { background: rgba(239, 68, 68, 0.12);  border-color: rgba(239,68,68,0.3);  color: var(--error); }

/* ════════════════════════════════════════════════════════════════
   Maschinenakte — Karten-Header + Station-Gruppen
   ════════════════════════════════════════════════════════════════ */
.ma-karte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ma-karte-kopf h2 { margin: 0; }
.ma-rest-kritisch { color: var(--error); font-weight: 700; }
.ma-rest-warn     { color: var(--gelb);  font-weight: 600; }
.ma-station-header {
  margin: 6px 0 14px;
}
.ma-station-gruppe {
  margin-bottom: 22px;
}
.ma-station-titel {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(111,182,255,0.05);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ma-motor-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   Fehlercode-Katalog — Stationsfilter + Karten
   ════════════════════════════════════════════════════════════════ */
.fk-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.fk-count-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(111,182,255,0.1);
  border: 1px solid rgba(111,182,255,0.2);
  color: var(--accent);
}
.fk-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.fk-filter-btn {
  padding: 5px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.fk-filter-btn small {
  margin-left: 4px;
  opacity: 0.6;
  font-size: 10px;
}
.fk-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.fk-filter-aktiv {
  background: rgba(111,182,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.fk-karte-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fk-code-badge {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 6px;
}
.fk-prio {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.fk-prio-hoch    { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3);  color: var(--error); }
.fk-prio-mittel  { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: var(--gelb);  }
.fk-prio-niedrig { background: rgba(46,204,113,0.1);  border-color: rgba(46,204,113,0.25); color: var(--gruen); }
.fk-aktiv-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: var(--error);
  animation: hmi-red-pulse 1.8s ease-in-out infinite;
}
.fk-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fk-meta span {
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.fk-station-tag {
  color: var(--accent) !important;
  border-color: rgba(111,182,255,0.2) !important;
  background: rgba(111,182,255,0.06) !important;
}
.fk-adressen {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: var(--font-mono, monospace);
}

/* =====================================================================
   KOSTEN PAGE — KPI blocks, chips, motor cards
   ===================================================================== */
.kosten-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.kosten-kpi-block {
  flex: 1;
  min-width: 160px;
  padding: 16px 18px 14px;
  border-bottom: 3px solid var(--linie, rgba(255,255,255,0.12));
  border-radius: var(--radius, 6px);
  background: rgba(255,255,255,0.03);
}
.kosten-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.kosten-kpi-val {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.kosten-kpi-rot {
  border-bottom-color: var(--error, #e05252);
}
.kosten-kpi-rot .kosten-kpi-val {
  color: var(--error, #e05252);
}
.kosten-kpi-gruen {
  border-bottom-color: var(--gruen, rgba(53,214,107,1));
}
.kosten-kpi-gruen .kosten-kpi-val {
  color: var(--gruen, rgba(53,214,107,1));
}
.kosten-kpi-gelb {
  border-bottom-color: var(--gelb, #f7c948);
}
.kosten-kpi-gelb .kosten-kpi-val {
  color: var(--gelb, #f7c948);
}
.kosten-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 20px;
}
.kosten-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--text-muted);
}
.kosten-chip strong {
  color: var(--text, #e8eaf0);
  font-weight: 700;
}
/* Motor card two-column layout */
.kosten-motor-karte {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.kosten-motor-karte-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 14px;
  font-weight: 700;
}
.kosten-motor-karte-body {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 0;
}
.km-left, .km-right {
  padding: 14px 16px;
}
.km-trenn {
  background: rgba(255,255,255,0.07);
  width: 1px;
}
.km-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.km-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 0;
  gap: 4px;
}
.km-row > span:last-child {
  color: var(--text, #e8eaf0);
  font-weight: 600;
  white-space: nowrap;
}
.km-row-big > span:last-child {
  font-size: 15px;
  font-weight: 800;
}
.km-zahl-rot {
  color: var(--error, #e05252) !important;
}
.km-zahl-gruen {
  color: var(--gruen, rgba(53,214,107,1)) !important;
}
.km-zahl-gelb {
  color: var(--gelb, #f7c948) !important;
}
.km-strom-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin: 4px 0 8px;
  overflow: hidden;
}
.km-strom-bar {
  height: 100%;
  background: var(--gelb, #f7c948);
  border-radius: 2px;
  transition: width .4s;
}
.km-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
}
.km-badge-rot {
  background: rgba(224,82,82,0.18);
  color: var(--error, #e05252);
  border: 1px solid rgba(224,82,82,0.3);
}
.km-badge-gelb {
  background: rgba(247,201,72,0.15);
  color: var(--gelb, #f7c948);
  border: 1px solid rgba(247,201,72,0.25);
}
.km-badge-ok {
  background: rgba(53,214,107,0.13);
  color: var(--gruen, rgba(53,214,107,1));
  border: 1px solid rgba(53,214,107,0.22);
}

/* =====================================================================
   INSTANDHALTUNG — compact maintenance card (ikarte)
   ===================================================================== */
.ikarte {
  border-left: 3px solid transparent;
  min-height: 120px;
  overflow: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ikarte.ik-ok {
  border-left-color: var(--gruen, rgba(53,214,107,1));
}
.ikarte.ik-warn {
  border-left-color: var(--gelb, #f7c948);
}
.ikarte.ik-err {
  border-left-color: var(--error, #e05252);
}
.ikarte-kopf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.ikarte-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}
.ikarte-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ikarte-station {
  font-size: 10px;
  color: var(--accent, #6fb6ff);
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ikarte-sensorgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  margin: 4px 0 6px;
}
.ikarte-cell {
  font-size: 11px;
  display: flex;
  gap: 4px;
  align-items: baseline;
}
.ikarte-cell b {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 22px;
}
.ikarte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
}

/* =====================================================================
   ANLAGENÜBERSICHT — tile upgrades and detail panel
   ===================================================================== */
.anlage-flow-tile strong {
  font-size: 13px;
}
.anlage-station-topbar {
  height: 4px;
  border-radius: 2px 2px 0 0;
  width: calc(100% + 0px);
  margin: -8px -8px 8px;
  background: var(--accent, #6fb6ff);
}
.anlage-station-topbar.ok { background: var(--gruen, rgba(53,214,107,1)); }
.anlage-station-topbar.warn { background: var(--gelb, #f7c948); }
.anlage-station-topbar.error { background: var(--error, #e05252); }
.anlage-station-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(111,182,255,0.1);
  border: 1px solid rgba(111,182,255,0.2);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent, #6fb6ff);
  margin-bottom: 4px;
}
.anlage-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  align-items: center;
}
.anlage-tile-chip {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  white-space: nowrap;
}
/* Detail panel default hint */
.anlage-dp-hint {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.anlage-dp-hint-icon {
  font-size: 28px;
  color: var(--accent, #6fb6ff);
  opacity: .35;
  margin-bottom: 4px;
}
.anlage-dp-hint strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8eaf0);
}
.anlage-dp-hint p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.5;
}
.anlage-dp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.anlage-dp-chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}
.anlage-dp-chip.ok {
  border-color: rgba(53,214,107,0.25);
  background: rgba(53,214,107,0.08);
  color: var(--gruen, rgba(53,214,107,1));
}
.anlage-dp-chip.warn {
  border-color: rgba(247,201,72,0.25);
  background: rgba(247,201,72,0.08);
  color: var(--gelb, #f7c948);
}
.anlage-dp-chip.error {
  border-color: rgba(224,82,82,0.25);
  background: rgba(224,82,82,0.08);
  color: var(--error, #e05252);
}

/* Band HMI detail sensorik row */
.band-detail-sensorik {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--linie);
}
.band-sensor-karte {
  flex: 1 1 70px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--linie);
  border-radius: var(--radius-xs);
  text-align: center;
}
.bsk-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.bsk-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono, monospace);
}

/* Notification popup */
.pml-notif {
  position: fixed;
  top: 70px;
  right: 18px;
  z-index: 9999;
  width: 300px;
  background: #0e1924;
  border: 1px solid rgba(111,182,255,0.25);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  padding: 14px 16px;
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .35s;
  pointer-events: none;
}
.pml-notif.pml-notif-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.pml-notif[data-typ="fehler"] { border-color: rgba(239,68,68,0.4); }
.pml-notif[data-typ="fehler"] .pml-notif-dot { background: var(--error); box-shadow: 0 0 6px var(--error); }
.pml-notif[data-typ="warn"]   .pml-notif-dot { background: var(--gelb);  box-shadow: 0 0 6px var(--gelb); }
.pml-notif-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pml-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gelb);
}
.pml-notif-titel {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.pml-notif-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.pml-notif-close:hover { color: var(--text-main); }
.pml-notif-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.pml-notif-btn {
  width: 100%;
  padding: 7px;
  background: rgba(111,182,255,0.12);
  border: 1px solid rgba(111,182,255,0.25);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.pml-notif-btn:hover { background: rgba(111,182,255,0.2); }

/* Kosten compact card for alle_motoren */
.km-kompakt {
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.km-kompakt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.km-kompakt-name {
  font-size: 13px;
  font-weight: 700;
}
.km-kompakt-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: monospace;
}
.km-kompakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.km-kompakt-kpi {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.km-kompakt-kpi span { color: var(--text-muted); }
.km-kompakt-kpi strong { font-weight: 700; }

/* Kosten bereich group headers */
.kosten-gruppe-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 10px;
  background: rgba(111,182,255,0.05);
  border-radius: var(--radius-xs);
  margin: 16px 0 8px;
}
.kosten-gruppe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

/* ── Übersicht: Stations-Risiko-Ranking ──────────────────────────── */
.ranking-station-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  border-left: 4px solid var(--linie);
  border-radius: var(--radius-xs);
  background: rgba(15, 23, 42, 0.5);
}
.ranking-station-row.status-rot  { border-left-color: var(--rot); }
.ranking-station-row.status-gelb { border-left-color: var(--gelb); }
.ranking-station-row.status-gruen{ border-left-color: var(--gruen); }
.ranking-station-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ranking-station-info strong {
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-station-info small {
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.ranking-risiko-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 80px;
}
.ranking-risiko-zahl {
  font-size: .8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ranking-risiko-zahl.status-rot  { color: var(--rot); }
.ranking-risiko-zahl.status-gelb { color: var(--gelb); }
.ranking-risiko-zahl.status-gruen{ color: var(--gruen); }
.ranking-risiko-block .risiko-leiste {
  width: 80px;
  height: 5px;
  background: rgba(148,163,184,.15);
  border-radius: 3px;
  overflow: hidden;
}

/* ══ Station HMI Schematics ══════════════════════════════════════════ */
.hmi-schematic-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0,8,24,0.75);
  border: 1px solid rgba(111,182,255,0.12);
  border-radius: var(--radius);
  min-height: 130px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.hmi-station-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.hmi-material-block {
  width: 40px;
  height: 26px;
  background: linear-gradient(135deg,#94a3b8,#64748b);
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hmi-material-block.active {
  animation: hmi-slide-right 2.2s ease-in-out infinite;
}
.hmi-active .hmi-material-block.active {
  box-shadow: 0 0 12px rgba(111,182,255,0.4);
}
.hmi-arrow {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
  opacity: .65;
  flex-shrink: 0;
}
.hmi-sensor-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hmi-sensor-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gruen);
  box-shadow: 0 0 6px var(--gruen);
  flex-shrink: 0;
}
.hmi-sensor-dot.active {
  animation: hmi-pulse 1.1s ease-in-out infinite;
}
.hmi-sensor-dot.error {
  background: var(--rot);
  box-shadow: 0 0 8px var(--rot);
}

/* ── Saw Station ─────────────────────────────────────────────────── */
.hmi-saw-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hmi-saw-housing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(0,15,40,0.8);
  border: 1px solid rgba(111,182,255,0.2);
  border-radius: var(--radius-xs);
}
.hmi-saw-head {
  width: 8px;
  height: 32px;
  background: linear-gradient(180deg,#94a3b8,#475569);
  border-radius: 3px;
  border-bottom: 4px solid #e2e8f0;
}
.hmi-saw-head.hmi-saw-anim {
  animation: hmi-saw-cut 1.4s ease-in-out infinite;
}
.hmi-saw-table {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 18px;
  background: rgba(148,163,184,0.1);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 2px;
}
.hmi-saw-cell.hmi-node-error .hmi-saw-head { background: var(--rot); }
.hmi-saw-cell.hmi-node-warn  .hmi-saw-head { background: var(--gelb); }

/* ── CNC Spindles ────────────────────────────────────────────────── */
.hmi-cnc-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  background: rgba(0,15,50,0.85);
  border: 1px solid rgba(111,182,255,0.25);
  border-radius: var(--radius);
  min-width: 220px;
}
.hmi-spindle-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
}
.hmi-spindle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hmi-spindle-shaft {
  width: 7px;
  height: 38px;
  background: #64748b;
  border-radius: 3px;
}
.hmi-spindle-shaft-active {
  background: var(--accent);
  animation: hmi-spindle-spin 0.35s linear infinite;
  box-shadow: 0 0 6px rgba(111,182,255,0.5);
}
.hmi-spindle-tool {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #64748b;
}
.hmi-spindle.hmi-node-error .hmi-spindle-shaft { background: var(--rot); animation: hmi-blink 0.5s ease-in-out infinite; }
.hmi-spindle.hmi-node-error .hmi-spindle-tool  { border-color: var(--rot); }
.hmi-spindle.hmi-node-warn  .hmi-spindle-shaft { background: var(--gelb); }
.hmi-spindle.hmi-node-warn  .hmi-spindle-tool  { border-color: var(--gelb); }

/* ── Wash Chamber ────────────────────────────────────────────────── */
.hmi-wash-chamber {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 68px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.hmi-spray-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(56,189,248,0.85);
}
.hmi-spray-dot.active {
  animation: hmi-spray 1.3s ease-out infinite;
}
.hmi-robot-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ── Pruef Chamber ───────────────────────────────────────────────── */
.hmi-pruef-kammer {
  background: rgba(0,0,18,0.92);
  border: 1px solid rgba(111,182,255,0.18);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 120px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.hmi-scan-line {
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  border-radius: 1px;
}
.hmi-scan-line.active {
  animation: hmi-scan 1.6s ease-in-out infinite;
}
.hmi-ergebnis-chip {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid;
}
.hmi-ergebnis-chip.ok    { background: rgba(34,197,94,0.12); border-color: var(--gruen); color: var(--gruen); }
.hmi-ergebnis-chip.error { background: rgba(239,68,68,0.12); border-color: var(--rot);   color: var(--rot);   }

/* ── Motor Cards in HMI ──────────────────────────────────────────── */
.hmi-motor-section {
  margin-top: 16px;
  border-top: 1px solid rgba(148,163,184,0.12);
  padding-top: 12px;
}
.hmi-motor-section h3 {
  font-size: .73rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.hmi-motors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 10px;
}
.hmi-motor-card {
  background: rgba(15,23,42,0.72);
  border: 1px solid rgba(148,163,184,0.14);
  border-left: 3px solid rgba(148,163,184,0.3);
  border-radius: var(--radius-xs);
  padding: 10px;
}
.hmi-motor-card.ok    { border-left-color: var(--gruen); }
.hmi-motor-card.warn  { border-left-color: var(--gelb); }
.hmi-motor-card.error { border-left-color: var(--rot); }
.hmi-motor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.hmi-motor-id {
  font-size: .73rem;
  font-weight: 700;
  color: var(--accent);
  font-family: monospace;
}
.hmi-motor-name {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.hmi-sensor-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
}
.bsk-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 4px;
  border-radius: 3px;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.1);
  min-width: 0;
}
.bsk-cell.lsens-ok   { border-color: rgba(34,197,94,0.28); }
.bsk-cell.lsens-warn { border-color: rgba(234,179,8,0.35); }
.bsk-cell.lsens-err  { border-color: rgba(239,68,68,0.38); }
.bsk-label { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bsk-val   { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); margin-top: 2px; }

/* ── Sensor List ─────────────────────────────────────────────────── */
.hmi-sensor-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hmi-sensor-row-item {
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 3px;
  background: rgba(15,23,42,0.5);
  font-size: .75rem;
}
.hmi-sensor-dot-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hmi-sensor-dot-sm.ok    { background: var(--gruen); box-shadow: 0 0 4px var(--gruen); }
.hmi-sensor-dot-sm.warn  { background: var(--gelb);  box-shadow: 0 0 4px var(--gelb); }
.hmi-sensor-dot-sm.error { background: var(--rot);   box-shadow: 0 0 4px var(--rot); }
.hmi-sensor-row-item code {
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.hmi-sensor-status-chip {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.hmi-sensor-status-chip.ok    { background: rgba(34,197,94,0.12);  color: var(--gruen); }
.hmi-sensor-status-chip.warn  { background: rgba(234,179,8,0.12);  color: var(--gelb); }
.hmi-sensor-status-chip.error { background: rgba(239,68,68,0.12); color: var(--rot); }
.hmi-node-label {
  font-size: .63rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Active Glow ─────────────────────────────────────────────────── */
.hmi-active .hmi-pruef-kammer { box-shadow: 0 0 18px rgba(111,182,255,0.15); }
.hmi-active .hmi-cnc-box      { box-shadow: 0 0 14px rgba(111,182,255,0.12); }
.hmi-active .hmi-wash-chamber { box-shadow: 0 0 14px rgba(56,189,248,0.2); }

/* ── Keyframe Animations ─────────────────────────────────────────── */
@keyframes hmi-slide-right {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(14px); }
}
@keyframes hmi-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; box-shadow: 0 0 14px var(--gruen); }
}
@keyframes hmi-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.15; }
}
@keyframes hmi-spindle-spin {
  0%,100% { transform: scaleX(1); }
  50%     { transform: scaleX(0.6); }
}
@keyframes hmi-scan {
  0%   { transform: translateY(-4px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}
@keyframes hmi-spray {
  0%   { transform: translate(0,0); opacity: 1; }
  100% { transform: translate(var(--dx,8px), var(--dy,-14px)); opacity: 0; }
}
@keyframes hmi-saw-cut {
  0%,100% { transform: translateY(0); }
  45%,55% { transform: translateY(20px); }
}

/* ── Maschinenakte — neue Vollakte ───────────────────────────────── */
.ma-akte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 16px;
}
.fehlercode-chip {
  display: inline-block;
  padding: 2px 7px;
  font-size: .72rem;
  background: rgba(111,182,255,0.1);
  border: 1px solid rgba(111,182,255,0.25);
  border-radius: 3px;
  color: var(--accent);
  margin: 2px;
}

/* ── Kosten — responsive KPI row with 5 blocks ───────────────────── */
.kosten-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* ── HMI Motor Action Buttons ────────────────────────────────────── */
.hmi-motor-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,0.1);
}
.hmi-action-btn {
  font-size: .65rem;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(111,182,255,0.07);
  border: 1px solid rgba(111,182,255,0.2);
  color: var(--accent);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  white-space: nowrap;
}
.hmi-action-btn:hover {
  background: rgba(111,182,255,0.15);
  border-color: rgba(111,182,255,0.4);
}

/* ── Produktionslinie Detail Panel – active selection highlight ── */
.linie-block-active {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(111,182,255,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   KOSTENBEREICH  –  km-* Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── KPI Leiste ── */
.km-kpi-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.km-kpi-block {
  background: rgba(0,8,24,0.7);
  border: 1px solid rgba(111,182,255,0.12);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.km-kpi-block.km-kpi-rot  { border-left: 3px solid var(--rot); }
.km-kpi-block.km-kpi-gelb { border-left: 3px solid var(--gelb); }
.km-kpi-block.km-kpi-gruen { border-left: 3px solid var(--gruen); }
.km-kpi-block.km-kpi-neutral { border-left: 3px solid rgba(111,182,255,0.3); }
.km-kpi-label {
  font-size: .65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.km-kpi-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.km-kpi-name {
  font-size: .8rem !important;
  font-weight: 700;
}
.km-kpi-sub {
  font-size: .62rem;
  color: var(--text-dim);
  margin-top: 1px;
}

/* ── Filter Tabs ── */
.km-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.km-filter-tab {
  font-size: .67rem;
  font-family: inherit;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(111,182,255,0.2);
  background: rgba(111,182,255,0.05);
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.km-filter-tab:hover {
  background: rgba(111,182,255,0.12);
  border-color: rgba(111,182,255,0.35);
  color: var(--text);
}
.km-filter-aktiv {
  background: rgba(111,182,255,0.18) !important;
  border-color: rgba(111,182,255,0.55) !important;
  color: var(--accent) !important;
}

/* ── Gruppen ── */
.km-gruppe {
  margin-bottom: 22px;
}
.km-gruppe-header {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(111,182,255,0.1);
  padding-bottom: 6px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.km-gruppe-count {
  font-size: .62rem;
  font-weight: 500;
  color: rgba(111,182,255,0.45);
  font-variant-numeric: tabular-nums;
}
.km-gruppe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ── Kostenkarte ── */
.km-karte {
  background: rgba(0,8,24,0.72);
  border: 1px solid rgba(111,182,255,0.12);
  border-left: 3px solid rgba(111,182,255,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s;
}
.km-karte:hover {
  box-shadow: 0 2px 16px rgba(111,182,255,0.1);
}
.km-karte.km-karte-rot  { border-left-color: var(--rot); }
.km-karte.km-karte-gelb { border-left-color: var(--gelb); }
.km-karte.km-karte-ok   { border-left-color: var(--gruen); }

.km-karte-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.km-karte-ids {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.km-karte-id {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.km-karte-name {
  font-size: .66rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Risk badge on card */
.km-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.km-badge-rot  { background: rgba(239,68,68,0.15);  color: var(--rot);   border: 1px solid rgba(239,68,68,0.3); }
.km-badge-gelb { background: rgba(234,179,8,0.15);  color: var(--gelb);  border: 1px solid rgba(234,179,8,0.3); }
.km-badge-ok   { background: rgba(34,197,94,0.12);  color: var(--gruen); border: 1px solid rgba(34,197,94,0.25); }

/* Cost value rows */
.km-karte-werte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(111,182,255,0.08);
  padding-top: 8px;
}
.km-karte-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: .68rem;
}
.km-karte-zeile span {
  color: var(--text-dim);
  flex-shrink: 0;
}
.km-karte-zeile strong {
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
}
.km-zahl-rot   { color: var(--rot); }
.km-zahl-gelb  { color: var(--gelb); }
.km-zahl-gruen { color: var(--gruen); }

/* Impact description */
.km-karte-auswirkung {
  font-size: .64rem;
  color: rgba(234,179,8,0.75);
  background: rgba(234,179,8,0.05);
  border: 1px solid rgba(234,179,8,0.15);
  border-radius: 4px;
  padding: 5px 8px;
  line-height: 1.4;
}

/* Card action buttons */
.km-karte-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.km-btn {
  font-size: .62rem;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(111,182,255,0.2);
  background: rgba(111,182,255,0.06);
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .12s, border-color .12s;
}
.km-btn:hover {
  background: rgba(111,182,255,0.15);
  border-color: rgba(111,182,255,0.4);
}

/* ── Produktionsverlust Box ── */
.km-verlust-box {
  margin-top: 20px;
  border-radius: 8px;
  padding: 14px 16px;
}
.km-verlust-box.km-verlust-wartung {
  background: rgba(234,179,8,0.05);
  border: 1px solid rgba(234,179,8,0.2);
}
.km-verlust-box.km-verlust-aktiv {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.25);
}
.km-verlust-box.km-verlust-ok {
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.18);
}
.km-verlust-box h4 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 8px 0;
}
.km-verlust-wartung h4 { color: var(--gelb); }
.km-verlust-aktiv   h4 { color: var(--rot); }
.km-verlust-ok      h4 { color: var(--gruen); }

.km-verlust-status {
  font-size: .72rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}
.km-verlust-hinweis {
  font-size: .67rem;
  color: var(--text-dim);
  margin: 6px 0 0 0;
  line-height: 1.5;
}
.km-verlust-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.km-verlust-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .68rem;
}
.km-verlust-kpis > div span {
  color: var(--text-dim);
  font-size: .62rem;
}
.km-verlust-kpis > div strong {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
}
.km-verlust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.km-vlchip {
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(234,179,8,0.1);
  border: 1px solid rgba(234,179,8,0.25);
  color: var(--gelb);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── km-filter-count chip inside filter tab ── */
.km-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 8px;
  background: rgba(111,182,255,0.12);
  font-size: .58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.km-filter-aktiv .km-filter-count {
  background: rgba(111,182,255,0.25);
}

/* ── Kosten card: cost hero section ── */
.km-cost-hero {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,4,14,0.5);
  border-radius: 6px;
  border: 1px solid rgba(111,182,255,0.08);
  overflow: hidden;
  margin: 2px 0;
}
.km-cost-col {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.km-cost-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(111,182,255,0.1);
}
.km-cost-num {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.km-cost-lbl {
  font-size: .6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Kosten card: risiko bar row ── */
.km-risiko-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.km-risiko-pct {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.km-risiko-pct small {
  font-size: .56rem;
  opacity: 0.6;
}

/* ── Kosten card: compact value row ── */
.km-vals-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(111,182,255,0.07);
}
.km-vals-compact > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .67rem;
}
.km-vals-compact span {
  color: var(--text-dim);
  font-size: .6rem;
}
.km-vals-compact b {
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
}

/* ═══════════════════════════════════════════════════════════════
   MASCHINENAKTE  –  ma-card Design System (v2)
   ═══════════════════════════════════════════════════════════════ */

/* Card grid — wider min than info-grid */
.ma-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px,100%), 1fr));
  gap: 14px;
}

/* Base card */
.ma-card {
  background: linear-gradient(160deg, rgba(14,26,44,0.97), rgba(10,19,32,0.99));
  border: 1px solid rgba(111,182,255,0.11);
  border-left: 3px solid rgba(111,182,255,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: box-shadow .18s;
}
.ma-card:hover {
  box-shadow: 0 4px 20px rgba(111,182,255,0.08);
}
.ma-card.ma-card-ok    { border-left-color: var(--gruen); }
.ma-card.ma-card-warn  { border-left-color: var(--gelb); }
.ma-card.ma-card-error { border-left-color: var(--rot); }

/* Card header row */
.ma-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ma-card-head-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.ma-card-id {
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em;
}
.ma-station-pill {
  font-size: .6rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(111,182,255,0.08);
  border: 1px solid rgba(111,182,255,0.16);
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Status chip */
.ma-status-chip {
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
}
.ma-status-ok    { background: rgba(34,197,94,0.1);  border-color: rgba(34,197,94,0.25);  color: var(--gruen); }
.ma-status-warn  { background: rgba(234,179,8,0.1);  border-color: rgba(234,179,8,0.3);   color: var(--gelb); }
.ma-status-error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3);   color: var(--rot); }

/* Motor name + function */
.ma-card-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-top: -3px;
}
.ma-card-func {
  font-size: .65rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: -4px;
}

/* Risiko strip */
.ma-risiko-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ma-risiko-num {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ma-risiko-num small {
  font-size: .58rem;
  opacity: .6;
}

/* Specs 2-column grid */
.ma-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(111,182,255,0.07);
  border-bottom: 1px solid rgba(111,182,255,0.07);
}
.ma-spec {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ma-spec.ma-spec-full {
  grid-column: 1 / -1;
}
.ma-spec span {
  font-size: .58rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
}
.ma-spec strong {
  font-size: .72rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.ma-typ-code {
  font-family: var(--font-mono, monospace);
  font-size: .63rem !important;
  color: rgba(111,182,255,0.8) !important;
  word-break: break-all;
}

/* Live sensor strip */
.ma-live-strip {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ma-lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(0,4,14,0.5);
  border: 1px solid rgba(111,182,255,0.08);
  min-width: 44px;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  flex: 1;
}
.ma-lv span {
  font-size: .52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.ma-lv.ma-lv-ok  { border-color: rgba(34,197,94,0.2); }
.ma-lv.ma-lv-warn{ border-color: rgba(234,179,8,0.25); color: var(--gelb); }
.ma-lv.ma-lv-err { border-color: rgba(239,68,68,0.3);  color: var(--rot); }

/* Recommended actions */
.ma-massnahmen {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ma-massnahme-item {
  font-size: .65rem;
  color: rgba(234,179,8,0.82);
  background: rgba(234,179,8,0.05);
  border: 1px solid rgba(234,179,8,0.14);
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.4;
}
.ma-massnahme-item::before {
  content: "→ ";
  opacity: 0.6;
}

/* Card action buttons */
.ma-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ma-act-btn {
  font-size: .62rem;
  font-family: inherit;
  padding: 4px 11px;
  border-radius: 4px;
  border: 1px solid rgba(111,182,255,0.18);
  background: rgba(111,182,255,0.05);
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .12s, border-color .12s;
}
.ma-act-btn:hover {
  background: rgba(111,182,255,0.14);
  border-color: rgba(111,182,255,0.38);
}

/* ma-rest overrides inside ma-spec */
.ma-rest-kritisch { color: var(--rot) !important; font-weight: 700; }
.ma-rest-warn     { color: var(--gelb) !important; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   KOSTENBEREICH  –  Overview-Panel (Donut + Ranking + Critical)
   ═══════════════════════════════════════════════════════════════ */

.km-overview {
  display: grid;
  grid-template-columns: 260px 1fr 240px;
  gap: 14px;
  margin-bottom: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .km-overview { grid-template-columns: 1fr 1fr; }
  .km-donut-panel { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .km-overview { grid-template-columns: 1fr; }
}

.km-panel-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(111,182,255,0.1);
}

.km-section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 6px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(111,182,255,0.08);
}

/* ── Donut ── */
.km-donut-panel { padding: 16px; }
.km-donut-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.km-donut-svg {
  width: 160px;
  height: 160px;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(0,0,0,0.6));
}
.km-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.km-dl-item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 7px;
  font-size: .67rem;
}
.km-dl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.km-dl-name { color: var(--text); font-weight: 500; }
.km-dl-pct  { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .62rem; }
.km-dl-val  { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* ── Ranking ── */
.km-rank-panel { padding: 16px; }
.km-rank-list  { display: flex; flex-direction: column; gap: 10px; }
.km-rank-item {
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(0,4,14,0.45);
  border: 1px solid rgba(111,182,255,0.08);
  border-left: 3px solid rgba(111,182,255,0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.km-rank-item.km-rank-krit { border-left-color: var(--rot); }
.km-rank-item.km-rank-warn { border-left-color: var(--gelb); }
.km-rank-item.km-rank-ok   { border-left-color: var(--gruen); }
.km-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.km-rank-left  { display: flex; align-items: center; gap: 8px; }
.km-rank-right { display: flex; align-items: baseline; gap: 5px; }
.km-rank-pos {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(111,182,255,0.1);
  border: 1px solid rgba(111,182,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.km-rank-name { font-size: .75rem; font-weight: 600; color: var(--text); }
.km-rank-val  { font-size: .82rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.km-rank-pct  { font-size: .62rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.km-rank-track {
  height: 6px;
  background: rgba(111,182,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.km-rank-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}
.km-rank-meta { font-size: .6rem; color: var(--text-dim); }

/* ── Critical ── */
.km-critical-panel { padding: 16px; }
.km-critical-list  { display: flex; flex-direction: column; gap: 8px; }
.km-crit-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 6px;
  background: rgba(0,4,14,0.45);
  border: 1px solid rgba(111,182,255,0.08);
  border-left: 3px solid transparent;
}
.km-crit-item.km-crit-rot  { border-left-color: var(--rot); }
.km-crit-item.km-crit-gelb { border-left-color: var(--gelb); }
.km-crit-item.km-crit-ok   { border-left-color: var(--gruen); }
.km-crit-pos { font-size: .58rem; font-weight: 700; color: var(--text-dim); width: 14px; flex-shrink: 0; padding-top: 2px; }
.km-crit-body { flex: 1; min-width: 0; }
.km-crit-header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.km-crit-id {
  font-family: var(--font-mono, monospace);
  font-size: .7rem;
  font-weight: 700;
  color: var(--accent);
}
.km-crit-cost { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-crit-cost small { font-size: .56rem; opacity: .65; font-weight: 500; }
.km-crit-name { font-size: .6rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-crit-r { font-size: .65rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; align-self: center; }

/* ═══════════════════════════════════════════════════════════════
   SCHICHTÜBERGABE + TAGESBERICHT  –  sb-* Design System
   ═══════════════════════════════════════════════════════════════ */

.sb-header {
  margin-bottom: 14px;
  padding: 16px 20px;
}
.sb-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sb-datum {
  font-size: .7rem;
  color: var(--text-dim);
  font-weight: 500;
  padding-top: 4px;
}

/* KPI Strip */
.sb-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px,100%), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.sb-kpi {
  background: rgba(0,8,24,0.7);
  border: 1px solid rgba(111,182,255,0.1);
  border-left: 3px solid rgba(111,182,255,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-kpi.status-gruen { border-left-color: var(--gruen); }
.sb-kpi.status-gelb  { border-left-color: var(--gelb); }
.sb-kpi.status-rot   { border-left-color: var(--rot); }
.sb-kpi-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 600;
}
.sb-kpi-val {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
}
.sb-kpi-val small { font-size: .65rem; opacity: .6; font-weight: 500; }
.sb-kpi-sub { font-size: .6rem; color: var(--text-dim); margin-top: 1px; }

/* Body 3-column grid */
.sb-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .sb-body { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .sb-body { grid-template-columns: 1fr; } }

.sb-panel { padding: 16px; }
.sb-panel-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(111,182,255,0.09);
}

/* Motor list */
.sb-motor-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 340px;
  overflow-y: auto;
}
.sb-motor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  background: rgba(0,4,12,0.3);
}
.sb-m-ok   { border-left-color: var(--gruen); }
.sb-m-warn { border-left-color: var(--gelb); background: rgba(234,179,8,0.04); }
.sb-m-err  { border-left-color: var(--rot);  background: rgba(239,68,68,0.05); }
.sb-motor-id {
  font-family: var(--font-mono, monospace);
  font-size: .62rem;
  font-weight: 700;
  color: var(--accent);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sb-motor-r {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* Actions / Handlungen */
.sb-handlungen { display: flex; flex-direction: column; gap: 6px; }
.sb-handlung {
  font-size: .68rem;
  color: var(--text);
  background: rgba(111,182,255,0.04);
  border: 1px solid rgba(111,182,255,0.1);
  border-radius: 5px;
  padding: 6px 10px;
  line-height: 1.4;
}
.sb-handlung::before { content: "→ "; color: var(--accent); opacity: .7; }

/* Maintenance window row */
.sb-wartung-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  padding: 9px 10px;
  background: rgba(234,179,8,0.05);
  border: 1px solid rgba(234,179,8,0.18);
  border-radius: 6px;
}
.sb-wartung-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gelb); font-weight: 700; }
.sb-wartung-val   { font-size: .72rem; color: var(--text); font-weight: 500; }

/* Alarms & repairs */
.sb-alarme, .sb-reparaturen { display: flex; flex-direction: column; gap: 5px; }
.sb-alarm-item, .sb-rep-item {
  display: flex;
  gap: 8px;
  font-size: .65rem;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.12);
  align-items: flex-start;
}
.sb-rep-item {
  background: rgba(111,182,255,0.04);
  border-color: rgba(111,182,255,0.1);
}
.sb-alarm-motor, .sb-rep-motor {
  font-family: var(--font-mono, monospace);
  font-size: .6rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  width: 70px;
}
.sb-alarm-text, .sb-rep-text {
  flex: 1;
  color: var(--text);
  line-height: 1.3;
}
.sb-rep-status {
  font-size: .58rem;
  color: var(--gruen);
  font-weight: 600;
  flex-shrink: 0;
}

/* Empty states */
.sb-leer-ok {
  font-size: .7rem;
  color: var(--gruen);
  padding: 6px 0;
  font-weight: 500;
}

/* Recommendation box */
.sb-empfehlung {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid;
}
.sb-empf-ok   { background: rgba(34,197,94,0.06);  border-color: rgba(34,197,94,0.2);  color: var(--text); }
.sb-empf-warn { background: rgba(234,179,8,0.07);  border-color: rgba(234,179,8,0.25); color: var(--text); }
.sb-empf-krit { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.28); color: var(--text); }

/* Tasks list */
.sb-aufgaben { display: flex; flex-direction: column; gap: 5px; }
.sb-aufgabe-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .65rem;
  padding: 5px 8px;
  background: rgba(0,4,12,0.3);
  border-radius: 4px;
  border-left: 2px solid rgba(234,179,8,0.3);
}
.sb-aufgabe-obj  { font-family: var(--font-mono,monospace); font-size: .6rem; font-weight: 700; color: var(--accent); width: 80px; flex-shrink: 0; }
.sb-aufgabe-text { flex: 1; color: var(--text); }
.sb-prio-badge {
  font-size: .55rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.sb-prio-hoch    { background: rgba(239,68,68,0.12);  color: var(--rot); }
.sb-prio-mittel  { background: rgba(234,179,8,0.12);  color: var(--gelb); }
.sb-prio-niedrig { background: rgba(34,197,94,0.1);   color: var(--gruen); }

/* Raw text collapsible */
.sb-raw-details {
  margin-top: 14px;
  border: 1px solid rgba(111,182,255,0.1);
  border-radius: 8px;
  overflow: hidden;
}
.sb-raw-details summary {
  padding: 10px 14px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(0,4,12,0.4);
}
.sb-raw-details summary:hover { color: var(--text); }
.sb-raw-pre {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(111,182,255,0.08);
  font-size: .65rem;
  max-height: 320px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   HISTORIE  –  hist-* Design System
   ═══════════════════════════════════════════════════════════════ */

.hist-kpi-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hist-kpi {
  flex: 1;
  min-width: 120px;
  background: rgba(0,8,24,0.7);
  border: 1px solid rgba(111,182,255,0.1);
  border-left: 3px solid rgba(111,182,255,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hist-kpi-rot   { border-left-color: var(--rot); }
.hist-kpi-gelb  { border-left-color: var(--gelb); }
.hist-kpi-gruen { border-left-color: var(--gruen); }
.hist-kpi-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hist-kpi-label { font-size: .62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.hist-section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(111,182,255,0.09);
}

/* alle_motoren risk grid */
.hist-alle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px,100%), 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.hist-card {
  background: rgba(0,8,24,0.65);
  border: 1px solid rgba(111,182,255,0.1);
  border-left: 2px solid transparent;
  border-radius: 7px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hist-card-rot  { border-left-color: var(--rot); }
.hist-card-gelb { border-left-color: var(--gelb); }
.hist-card-ok   { border-left-color: var(--gruen); }
.hist-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
}
.hist-motor-id {
  font-family: var(--font-mono, monospace);
  font-size: .63rem;
  font-weight: 700;
  color: var(--accent);
}
.hist-risiko {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.hist-risiko small { font-size: .52rem; opacity: .6; }
.hist-motor-name { font-size: .6rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-sensor-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.hist-sv {
  font-size: .56rem;
  padding: 1px 5px;
  background: rgba(111,182,255,0.07);
  border-radius: 3px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Legacy history sparkline cards */
.hist-legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr));
  gap: 14px;
}
.hist-legacy-card { padding: 14px 16px; }
.hist-legacy-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.hist-legacy-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(111,182,255,0.08);
}
.hist-legacy-stats > div { display: flex; flex-direction: column; gap: 2px; font-size: .67rem; }
.hist-legacy-stats span  { font-size: .58rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.hist-legacy-stats strong { font-weight: 700; color: var(--text); }

/* Sparkline */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  padding: 2px 0;
  background: rgba(0,4,12,0.4);
  border-radius: 4px;
  padding: 4px 6px;
}
.spark-bar {
  flex: 1;
  background: var(--accent);
  opacity: .65;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity .15s;
}
.spark-bar:hover { opacity: 1; }
.spark-leer { font-size: .65rem; color: var(--text-dim); align-self: center; }

/* ═══════════════════════════════════════════════════════════════
   KENNZAHLEN  –  kz-* Design System
   ═══════════════════════════════════════════════════════════════ */

.kz-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px,100%), 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kz-kpi {
  background: rgba(0,8,24,0.7);
  border: 1px solid rgba(111,182,255,0.1);
  border-left: 3px solid rgba(111,182,255,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kz-kpi-rot   { border-left-color: var(--rot); }
.kz-kpi-gelb  { border-left-color: var(--gelb); }
.kz-kpi-gruen { border-left-color: var(--gruen); }
.kz-kpi-val   { font-size: 1.3rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kz-kpi-val small { font-size: .62rem; opacity: .6; }
.kz-kpi-label { font-size: .6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.kz-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid rgba(111,182,255,0.1); }
.kz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .7rem;
}
.kz-table th {
  background: rgba(0,4,14,0.7);
  padding: 9px 12px;
  text-align: left;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(111,182,255,0.12);
  white-space: nowrap;
}
.kz-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(111,182,255,0.06);
  vertical-align: middle;
  color: var(--text);
}
.kz-table tr:last-child td { border-bottom: none; }
.kz-table tr:hover td { background: rgba(111,182,255,0.03); }
.kz-id   { font-family: var(--font-mono,monospace); font-size: .65rem; font-weight: 700; color: var(--accent); }
.kz-dim  { color: var(--text-dim); font-size: .65rem; }
.kz-rot  { color: var(--rot);  font-weight: 600; }
.kz-gelb { color: var(--gelb); font-weight: 600; }
.kz-ok   { color: var(--gruen); }
.kz-risiko-cell { display: flex; align-items: center; gap: 7px; }
.kz-status-chip {
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid;
}
.kz-status-chip.kz-ok   { background: rgba(34,197,94,0.1);  border-color: rgba(34,197,94,0.25);  color: var(--gruen); }
.kz-status-chip.kz-gelb { background: rgba(234,179,8,0.1);  border-color: rgba(234,179,8,0.28);  color: var(--gelb); }
.kz-status-chip.kz-rot  { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3);   color: var(--rot); }

/* ══════════════════════════════════════════════════════════════════
   atl-*  Anlagen-Tile-Redesign (Anlagenübersicht + Produktionslinie)
   ══════════════════════════════════════════════════════════════════ */

/* ── Tile-Größen anpassen ── */
.anlage-flow-tile { min-height: 150px; }
.anlage-station-tile { min-width: 140px; max-width: 220px; }
.anlage-band-tile   { min-width: 100px; max-width: 140px; }

/* ── Farbiger Topbar-Streifen ── */
.atl-topbar {
  height: 3px;
  width: calc(100% + 24px);
  margin: -11px -12px 10px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.atl-topbar-ok    { background: var(--gruen, #35d66b); }
.atl-topbar-warn  { background: var(--gelb, #f7c948); }
.atl-topbar-error { background: var(--error, #e05252); }

/* ── Header-Zeile: Icon + Text + Status-Dot ── */
.atl-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

/* ── SVG-Icon-Wrapper (Station) ── */
.atl-icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(111,182,255,0.1);
  border: 1px solid rgba(111,182,255,0.2);
  color: var(--accent, #6fb6ff);
}
.atl-icon-eingang           { background: rgba(53,214,107,0.1);  border-color: rgba(53,214,107,0.25);  color: #35d66b; }
.atl-icon-bearbeitungsstation { background: rgba(111,182,255,0.1); border-color: rgba(111,182,255,0.22); color: #6fb6ff; }
.atl-icon-cnc               { background: rgba(99,179,237,0.1);  border-color: rgba(99,179,237,0.22);  color: #63b3ed; }
.atl-icon-reinigung         { background: rgba(56,189,248,0.1);  border-color: rgba(56,189,248,0.22);  color: #38bdf8; }
.atl-icon-pruefstation      { background: rgba(192,132,252,0.1); border-color: rgba(192,132,252,0.22); color: #c084fc; }
.atl-icon-versand           { background: rgba(250,204,21,0.1);  border-color: rgba(250,204,21,0.22);  color: #facc15; }
.atl-icon-default           { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.15); color: rgba(148,163,184,0.7); }

/* ── Band-Icon-Wrapper ── */
.atl-band-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.14);
  color: rgba(148,163,184,0.75);
}

/* ── Text unter dem Icon ── */
.atl-header-text {
  flex: 1;
  min-width: 0;
}
.atl-header-text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atl-header-text small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Live-Sensor-Streifen (kompakt) ── */
.atl-live-strip {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.atl-lv {
  font-size: 9.5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-muted);
  letter-spacing: 0;
}
.atl-lv em {
  font-style: normal;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  margin-right: 2px;
  font-size: 8.5px;
}
.atl-lv-ok   { border-color: rgba(53,214,107,0.25);  color: rgba(53,214,107,0.9); }
.atl-lv-warn { border-color: rgba(247,201,72,0.3);   color: rgba(247,201,72,0.9); }
.atl-lv-err  { border-color: rgba(255,77,79,0.3);    color: rgba(255,77,79,0.9); }

/* ── Risiko-Balken (mini, 3px) ── */
.atl-risiko-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  margin: 4px 0;
  overflow: hidden;
}
.atl-risiko-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.atl-risiko-ok    { background: var(--gruen, #35d66b); }
.atl-risiko-warn  { background: var(--gelb, #f7c948); }
.atl-risiko-error { background: var(--error, #e05252); }

/* ── Risiko-Score-Badge (rechts im Footer) ── */
.atl-risiko-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.atl-risiko-badge-ok    { background: rgba(53,214,107,0.12); color: #35d66b; }
.atl-risiko-badge-warn  { background: rgba(247,201,72,0.12);  color: #f7c948; }
.atl-risiko-badge-error { background: rgba(255,77,79,0.12);   color: #e05252; }

/* ── Footer (Chips + Badge) ── */
.atl-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

/* ── Produktionslinie: Live-Sensorik auf Station-Block ── */
.lstation-live {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.lstation-live span {
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
}
.lstation-live strong { font-weight: 700; color: var(--text-main); }
.lstation-live .lsens-ok  { color: rgba(53,214,107,0.85); }
.lstation-live .lsens-warn { color: rgba(247,201,72,0.85); }
.lstation-live .lsens-err  { color: rgba(255,77,79,0.85); }

/* ── Produktionslinie: Risiko-Balken auf Station + Band ── */
.lstation-risiko-bar {
  height: 2px;
  border-radius: 1px;
  background: rgba(255,255,255,0.04);
  margin-top: 5px;
  overflow: hidden;
}

/* ── Förderband-Block: Live-Daten ── */
.lband-live {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 3px 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.lband-live span {
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
}
.lband-live strong { font-weight: 700; color: var(--text-main); }
.lband-live .lsens-ok   { color: rgba(53,214,107,0.85); }
.lband-live .lsens-warn  { color: rgba(247,201,72,0.85); }
.lband-live .lsens-err   { color: rgba(255,77,79,0.85); }

/* ── Linie-Block min-height für Live-Daten ── */
.lstation { min-height: 140px; }
.linie-band { min-height: 160px; }

/* ══════════════════════════════════════════════════════════════════
   ev-*  Elektronik/Sensorik — Versorgung & Datenqualität Panel
   ══════════════════════════════════════════════════════════════════ */
.ev-panel {
  margin-bottom: 20px;
}
.ev-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ev-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .02em;
}
.ev-panel-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ev-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.ev-chip-ok    { background: rgba(53,214,107,0.1);  border-color: rgba(53,214,107,0.28); color: #35d66b; }
.ev-chip-warn  { background: rgba(247,201,72,0.1);  border-color: rgba(247,201,72,0.28); color: #f7c948; }
.ev-chip-error { background: rgba(255,77,79,0.1);   border-color: rgba(255,77,79,0.3);   color: #e05252; }

.ev-kpi-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ev-kpi-group {
  flex: 1 1 160px;
}
.ev-kpi-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ev-kpi-cells {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ev-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  min-width: 80px;
}
.ev-kpi em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.ev-kpi strong {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-main);
  line-height: 1.2;
}
.ev-kpi-ok strong  { color: #35d66b; }
.ev-kpi-warn strong { color: #f7c948; }
.ev-kpi-error strong { color: #e05252; }
.ev-hinweis {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ══════════════════════════════════════════════════════════════════
   ik2-*  Instandhaltung Legacy-Motorkarten (redesigned)
   ══════════════════════════════════════════════════════════════════ */
.ik2-karte {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,22,32,0.97), rgba(8,13,20,0.99));
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.ik2-karte.ik2-ok    { border-color: rgba(53,214,107,0.22); }
.ik2-karte.ik2-warn  { border-color: rgba(247,201,72,0.28); }
.ik2-karte.ik2-error { border-color: rgba(255,77,79,0.32); }

/* Top accent bar */
.ik2-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ik2-topbar-ok    { background: var(--gruen, #35d66b); }
.ik2-topbar-warn  { background: var(--gelb, #f7c948); }
.ik2-topbar-error { background: var(--error, #e05252); }

/* Header */
.ik2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.ik2-head-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ik2-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}
.ik2-head-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ik2-prio-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.ik2-prio-ok    { background: rgba(53,214,107,0.1);  border-color: rgba(53,214,107,0.25); color: #35d66b; }
.ik2-prio-warn  { background: rgba(247,201,72,0.1);  border-color: rgba(247,201,72,0.28); color: #f7c948; }
.ik2-prio-error { background: rgba(255,77,79,0.1);   border-color: rgba(255,77,79,0.3);   color: #e05252; }
.ik2-rel-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(111,182,255,0.08);
  border: 1px solid rgba(111,182,255,0.18);
  color: var(--accent);
}
.ik2-risiko-num {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  line-height: 1;
  flex-shrink: 0;
}
.ik2-risiko-num small {
  font-size: 11px;
  font-weight: 500;
  opacity: .55;
  margin-left: 1px;
}
.ik2-risiko-ok    { color: #35d66b; }
.ik2-risiko-warn  { color: #f7c948; }
.ik2-risiko-error { color: #e05252; }

/* Prognose */
.ik2-prognose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.ik2-prognose-text { color: var(--text-dim); flex: 1; }
.ik2-tage-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ik2-tage-badge.ik2-ok    { background: rgba(53,214,107,0.1);  color: #35d66b; }
.ik2-tage-badge.ik2-warn  { background: rgba(247,201,72,0.1);  color: #f7c948; }
.ik2-tage-badge.ik2-error { background: rgba(255,77,79,0.1);   color: #e05252; }

/* Betriebsdaten row */
.ik2-betrieb-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ik2-brow-item {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
}
.ik2-brow-item em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.ik2-brow-item strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.ik2-ws-warn strong { color: #f7c948; }
.ik2-ws-error strong { color: #e05252; }

/* Main grid: Empfehlung + Wahrscheinlichkeiten */
.ik2-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) { .ik2-main-grid { grid-template-columns: 1fr; } }

.ik2-empfehlung { display: flex; flex-direction: column; gap: 5px; }
.ik2-emp-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ik2-emp-row span {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ik2-emp-row strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

/* Fehlerwahrscheinlichkeit Balken */
.ik2-wahrscheinlichkeiten {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.ik2-wb-row {
  display: grid;
  grid-template-columns: 1fr 80px 32px;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.ik2-wb-label {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ik2-wb-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ik2-wb-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.ik2-wb-ok    { background: var(--gruen, #35d66b); }
.ik2-wb-warn  { background: var(--gelb, #f7c948); }
.ik2-wb-error { background: var(--error, #e05252); }
.ik2-wb-pct {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}

/* Fehlercodes */
.ik2-fcodes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ik2-fcodes-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ik2-fcodes-wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.ik2-fcode {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(247,201,72,0.1);
  border: 1px solid rgba(247,201,72,0.25);
  color: #f7c948;
  cursor: help;
}

/* Maßnahmen */
.ik2-section-lbl {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.ik2-massnahmen {
  margin: 0;
  padding: 0 0 0 14px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ik2-massnahmen li { padding: 2px 0; }

/* Collapsible details */
.ik2-details {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}
.ik2-details > summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  padding: 5px 0;
}
.ik2-details > summary::-webkit-details-marker { display: none; }
.ik2-details > summary::before {
  content: "▸ ";
  font-size: 10px;
}
details[open].ik2-details > summary::before { content: "▾ "; }

.ik2-diagnose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ik2-diag-col { font-size: 11.5px; }
.ik2-diag-col span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ik2-diag-col ul {
  margin: 0;
  padding: 0 0 0 12px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ik2-nnt-warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,77,79,0.06);
  border: 1px solid rgba(255,77,79,0.18);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: rgba(255,77,79,0.85);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ik2-plausib {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ik2-plausib span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ik2-plausib ul { margin: 0; padding: 0 0 0 12px; }
.ik2-plausib-ok { font-size: 11px; color: rgba(53,214,107,0.65); margin: 6px 0 0; }
.ik2-repar {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ik2-repar span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ik2-repar ul { margin: 0; padding: 0 0 0 12px; }
.ik2-repar p { font-size: 11px; margin: 4px 0 0; }
.ik2-repar em { font-style: normal; color: var(--text-muted); }

/* Ersatzteilbestand */
.ik2-ersatz { margin-top: 8px; }
.ik2-ersatz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.ik2-ersatz-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 11px;
}
.ik2-ersatz-item code {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
}
.ik2-ersatz-ok   { background: rgba(53,214,107,0.05); border-color: rgba(53,214,107,0.15); }
.ik2-ersatz-warn { background: rgba(247,201,72,0.06); border-color: rgba(247,201,72,0.2); }

/* Actions */
.ik2-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ik2-actions button {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid rgba(111,182,255,0.25);
  border-radius: var(--radius-sm);
  background: rgba(111,182,255,0.06);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.ik2-actions button:hover {
  background: rgba(111,182,255,0.12);
  border-color: rgba(111,182,255,0.42);
}

/* instandhaltungBereich outer container */
#instandhaltungBereich.info-grid {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   ma-card Erweiterungen — Produktionsrelevanz, Wartungsdaten,
   Bauteile & Ersatzteile
   ══════════════════════════════════════════════════════════════════ */

/* Produktionsrelevanz-Badge */
.ma-prodrel {
  font-size: 10.5px;
  color: var(--accent, #6fb6ff);
  background: rgba(111,182,255,0.07);
  border: 1px solid rgba(111,182,255,0.18);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 2px;
}

/* Letzte/Nächste Wartung Row */
.ma-wartung-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 2px;
}
.ma-wartung-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
}
.ma-wartung-item span {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ma-wartung-item strong {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-main);
}

/* Bauteile & Ersatzteile Accordion */
.ma-bauteile-accordion {
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
}
.ma-bauteile-accordion > summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent, #6fb6ff);
  cursor: pointer;
  list-style: none;
  padding: 8px 0 6px;
}
.ma-bauteile-accordion > summary::-webkit-details-marker { display: none; }
.ma-bauteile-accordion > summary::before { content: "▸ "; font-size: 10px; }
details[open].ma-bauteile-accordion > summary::before { content: "▾ "; }

.ma-bauteile-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

/* Bauteil-Gruppe */
.ma-bauteil-gruppe {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ma-bauteil-gruppe-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Einzelner Bauteil-Eintrag */
.ma-bauteil-item {
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ma-bauteil-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ma-bauteil-head strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  min-width: 0;
}
.ma-bauteil-tnr {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.ma-bauteil-typ {
  font-size: 10.5px;
  color: var(--text-muted);
}
.ma-bauteil-bestand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 0;
}
.ma-bauteil-ok   { color: rgba(53,214,107,0.85); }
.ma-bauteil-warn { color: rgba(247,201,72,0.9); }
.ma-bauteil-lager {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}
.ma-bauteil-hinweis {
  font-size: 10.5px;
  color: rgba(111,182,255,0.6);
  border-left: 2px solid rgba(111,182,255,0.2);
  padding-left: 6px;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════
   Elektronik/Sensorik — Layout-Fix + elek-legacy-karte
   ══════════════════════════════════════════════════════════════════ */

/* Sicherstellen, dass elektronikBereich vertikal stapelt */
#elektronikBereich {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* elek-motor-karte — Topbar nach Status */
.elek-motor-karte {
  position: relative;
  overflow: hidden;
}
.elek-motor-karte::before {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin: -10px -12px 8px;
  width: calc(100% + 24px);
  background: rgba(53,214,107,0.3);
}
.elek-motor-karte.elek-fehler::before { background: var(--error, #e05252); }
.elek-motor-karte.elek-warn::before   { background: var(--gelb, #f7c948); }

/* elek-motor-head layout fix */
.elek-motor-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.elek-motor-head strong { font-size: 12px; font-weight: 700; }
.elek-motor-head code   { font-size: 9.5px; color: var(--text-muted); }

/* elek-motor-gruppe summary besser */
.elek-motor-gruppe > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .04em;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.elek-motor-gruppe > summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 10px;
  flex-shrink: 0;
}
details[open].elek-motor-gruppe > summary::before { content: "▾"; }
.elek-motor-gruppe > summary::-webkit-details-marker { display: none; }
.elek-motor-gruppe > summary strong { font-size: 13px; }

/* D — Legacy Elektronik-Diagnose Grid */
.elek-legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.elek-legacy-karte {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.elek-legacy-ok    { border-left: 3px solid rgba(53,214,107,0.5); }
.elek-legacy-warn  { border-left: 3px solid rgba(247,201,72,0.55); }
.elek-legacy-error { border-left: 3px solid rgba(255,77,79,0.6); }
.elek-legacy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.elek-legacy-head strong { font-size: 13px; font-weight: 700; }
.elek-legacy-fehler {
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.05);
}
.elek-legacy-kat {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.elek-legacy-fehler p {
  margin: 0 0 4px;
  color: var(--text-dim);
  line-height: 1.4;
}
.elek-legacy-pruef {
  font-size: 10.5px;
  color: rgba(111,182,255,0.65);
  border-left: 2px solid rgba(111,182,255,0.2);
  padding-left: 6px;
  margin-top: 3px;
}
.elek-legacy-teile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.elek-legacy-teile span {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(247,201,72,0.08);
  border: 1px solid rgba(247,201,72,0.2);
  color: rgba(247,201,72,0.8);
}
.elek-legacy-nnt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.elek-legacy-nnt span {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255,77,79,0.07);
  border: 1px solid rgba(255,77,79,0.2);
  color: rgba(255,77,79,0.8);
  cursor: help;
}

/* ── Auto-Refresh Toggle Button ── */
.refresh-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.refresh-toggle-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.refresh-toggle-btn.refresh-paused {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.4);
  color: rgb(34,197,94);
}
.refresh-toggle-btn.refresh-paused:hover {
  background: rgba(34,197,94,0.2);
}

/* ── HMI Produktionslinie ─────────────────────────────── */

/* Page layout */
.hmi-linie-page { display:flex; flex-direction:column; gap:12px; }
.hmi-linie-topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 14px; background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; }
.hmi-linie-topbar-left { display:flex; align-items:center; gap:10px; }
.hmi-linie-name { font-size:1rem; font-weight:600; color:var(--text-primary); }
.hmi-linie-kpis { display:flex; gap:12px; flex-wrap:wrap; flex:1; }

/* Scroll container */
.hmi-flow-scroll-wrap { overflow-x:auto; overflow-y:visible; padding:6px 0 10px; }
.hmi-flow-scroll-wrap::-webkit-scrollbar { height:6px; }
.hmi-flow-scroll-wrap::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:3px; }
.hmi-flow-scroll-wrap::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:3px; }
.hmi-flow-track { display:flex; align-items:center; gap:0; min-width:max-content; padding:12px 8px; }

/* Base block */
.hmi-block { position:relative; background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; cursor:pointer; transition:border-color .15s, box-shadow .15s; display:flex; flex-direction:column; flex-shrink:0; }
.hmi-block:hover { border-color:#3a7bd5; box-shadow:0 0 0 1px rgba(58,123,213,.25); }
.hmi-block.linie-block-active { border-color:#4a9eff !important; box-shadow:0 0 0 2px rgba(74,158,255,.3) !important; }

/* Station / Band sizes */
.hmi-station { width:148px; min-height:230px; }
.hmi-band { width:178px; min-height:170px; }

/* Status border tints */
.hmi-st-ok { border-color:rgba(255,255,255,.1); }
.hmi-st-warn { border-color:rgba(250,204,21,.45); }
.hmi-st-err { border-color:rgba(239,68,68,.5); }

/* Topbar color strip */
.hmi-topbar-strip { height:3px; width:100%; flex-shrink:0; }
.hmi-topbar-hmi-st-ok { background:#22c55e; }
.hmi-topbar-hmi-st-warn { background:#facc15; }
.hmi-topbar-hmi-st-err { background:#ef4444; }

/* Head row */
.hmi-head { display:flex; align-items:center; justify-content:space-between; padding:7px 9px 3px; }
.hmi-name { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-primary); line-height:1.2; }
.hmi-band-head { display:flex; align-items:center; justify-content:space-between; padding:7px 9px 3px; }
.hmi-band-id { font-size:.7rem; font-weight:700; font-family:monospace; color:#4a9eff; letter-spacing:.05em; }

/* Pulsing LED */
.hmi-led { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hmi-led-ok { background:#22c55e; box-shadow:0 0 5px #22c55e; animation:hmi-pulse-ok 2.2s ease-in-out infinite; }
.hmi-led-warn { background:#facc15; box-shadow:0 0 5px #facc15; animation:hmi-pulse-warn 1.1s ease-in-out infinite; }
.hmi-led-err { background:#ef4444; box-shadow:0 0 5px #ef4444; animation:hmi-pulse-err 0.65s ease-in-out infinite; }
@keyframes hmi-pulse-ok { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes hmi-pulse-warn { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes hmi-pulse-err { 0%,100%{opacity:1} 50%{opacity:.15} }

/* Small sensor LEDs inside SVG */
.hmi-sled { animation:hmi-pulse-ok 2.2s ease-in-out infinite; }

/* SVG wrap */
.hmi-svg-wrap { display:flex; justify-content:center; align-items:center; padding:6px 4px; flex:1; min-height:96px; }
.hmi-svg { display:block; overflow:visible; }

/* Activity label */
.hmi-activity { font-size:.63rem; color:var(--text-muted); text-align:center; padding:2px 8px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:16px; }

/* Live strip */
.hmi-live-strip { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; padding:4px 6px; background:rgba(0,0,0,.25); font-size:.6rem; font-family:monospace; border-top:1px solid rgba(255,255,255,.05); }
.hmi-live-strip em { font-style:normal; color:var(--text-muted); margin-right:1px; }
.hmi-val-ok { color:#22c55e; }
.hmi-val-warn { color:#facc15; }
.hmi-val-err { color:#ef4444; }
.hmi-live-no-motor { font-size:.6rem; color:var(--text-muted); font-style:italic; text-align:center; padding:4px 6px; }
.hmi-band-live { display:flex; gap:8px; justify-content:center; padding:3px 6px 4px; font-size:.6rem; font-family:monospace; color:var(--text-secondary); }

/* Risiko bar */
.hmi-risiko-bar { height:3px; background:rgba(255,255,255,.06); margin:3px 6px 2px; border-radius:2px; overflow:hidden; }
.hmi-risiko-fill { height:100%; border-radius:2px; transition:width .6s ease; }
.hmi-rk-ok { background:linear-gradient(90deg,#16a34a,#22c55e); }
.hmi-rk-warn { background:linear-gradient(90deg,#ca8a04,#facc15); }
.hmi-rk-err { background:linear-gradient(90deg,#b91c1c,#ef4444); }

/* Badges */
.hmi-badges { display:flex; gap:3px; flex-wrap:wrap; padding:3px 6px 7px; }
.hmi-badge { font-size:.57rem; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid rgba(255,255,255,.08); }
.hmi-badge-kuka { background:rgba(74,158,255,.1); color:#4a9eff; border-color:rgba(74,158,255,.25); }

/* Connector arrow between blocks */
.hmi-connector { display:flex; align-items:center; padding:0 1px; flex-shrink:0; opacity:.8; }

/* STAU indicator */
.hmi-band-stau { border-color:rgba(239,68,68,.55) !important; }

/* ── Animations ──────────────────────────────────────── */

/* Belt stripes - paused by default, run when parent has hmi-anim-run */
@keyframes hmi-belt-move { from{transform:translateX(0)} to{transform:translateX(14px)} }
.hmi-belt-stripes { animation:hmi-belt-move .75s linear infinite; animation-play-state:paused; }
.hmi-anim-run .hmi-belt-stripes { animation-play-state:running; }

/* Saw blade */
@keyframes hmi-saw-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hmi-saw-blade { animation:hmi-saw-spin 0.35s linear infinite; animation-play-state:paused; transform-box:fill-box; transform-origin:center; }
.hmi-anim-run .hmi-saw-blade { animation-play-state:running; }

/* CNC spindles */
@keyframes hmi-cnc-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hmi-cnc-spin { animation:hmi-cnc-spin .65s linear infinite; animation-play-state:paused; transform-box:fill-box; transform-origin:center; }
.hmi-anim-run .hmi-cnc-spin { animation-play-state:running; }

/* Scan line sweep */
@keyframes hmi-scan-sweep { 0%{transform:translateY(-18px);opacity:.3} 50%{opacity:.9} 100%{transform:translateY(32px);opacity:.3} }
.hmi-scan-line { animation:hmi-scan-sweep 2s ease-in-out infinite alternate; animation-play-state:paused; }
.hmi-anim-run .hmi-scan-line { animation-play-state:running; }

/* Water spray */
@keyframes hmi-spray { 0%{transform:translateY(0);opacity:.85} 100%{transform:translateY(22px);opacity:0} }
.hmi-spray-drop { animation:hmi-spray 1.1s ease-in infinite; animation-play-state:paused; }
.hmi-anim-run .hmi-spray-drop { animation-play-state:running; }

/* KUKA arm swing */
@keyframes hmi-kuka-swing { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-10deg)} }
.hmi-kuka-anim { animation:hmi-kuka-swing 2.2s ease-in-out infinite; animation-play-state:paused; transform-box:fill-box; transform-origin:top center; }
.hmi-anim-run .hmi-kuka-anim { animation-play-state:running; }

/* Input arrow pulse */
@keyframes hmi-arrow-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.hmi-arrow-anim { animation:hmi-arrow-pulse 1.5s ease-in-out infinite; }

/* ── HMI Scroll fix ── */
/* Override inhalt overflow-x:hidden for the production line page only */
#linie.seite.aktiv { overflow-x: auto; }
#linienSeite { min-width: 0; width: 100%; }
.hmi-linie-page { min-width: 0; width: 100%; }
.hmi-flow-scroll-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: visible;
}
.hmi-flow-track { display:flex; align-items:center; min-width:max-content; gap:0; padding:12px 8px; }

/* Tighten station/band card widths */
.hmi-station { width:132px; min-height:215px; }
.hmi-band    { width:162px; min-height:155px; }

/* Live strip: single compact row */
.hmi-live-strip { flex-wrap:nowrap; gap:4px; font-size:.58rem; overflow:hidden; }
.hmi-live-strip span { white-space:nowrap; }

/* animateTransform stop when parent has hmi-anim-stop */
.hmi-svg-wrap.hmi-anim-stop .hmi-saw-blade animateTransform,
.hmi-svg-wrap.hmi-anim-stop .hmi-cnc-spin animateTransform { animation-play-state:paused; }

/* ── HMI Linie v2 Layout ───────────────────────────────── */

/* Seite */
#linie.seite.aktiv { overflow-x: visible; display:flex; flex-direction:column; }
#linienSeite { width:100%; min-width:0; }
.hmi-linie-page { display:flex; flex-direction:column; gap:10px; width:100%; }

/* KPI Bar */
.hmi-kpi-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 14px; background:var(--panel-bg); border:1px solid var(--border);
  border-radius:8px; min-height:52px;
}
.hmi-kpi-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hmi-alarm-chip { font-size:.65rem; padding:2px 8px; border-radius:4px; background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.3); font-weight:600; }
.hmi-engpass-chip { font-size:.65rem; padding:2px 8px; border-radius:4px; background:rgba(250,204,21,.1); color:#facc15; border:1px solid rgba(250,204,21,.3); font-weight:600; }
.hmi-kpi-cells { display:flex; gap:0; flex:1; flex-wrap:wrap; border-left:1px solid var(--border); margin-left:6px; }
.hmi-kpi-cell { display:flex; flex-direction:column; gap:1px; padding:4px 14px; border-right:1px solid var(--border); }
.hmi-kpi-cell span { font-size:.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.hmi-kpi-cell strong { font-size:.85rem; font-weight:700; color:var(--text-primary); }

/* Flow area — full width */
.hmi-flow-area { display:flex; flex-direction:column; gap:6px; background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.hmi-flow-scroll-wrap { overflow-x:auto; overflow-y:visible; width:100%; }
.hmi-flow-scroll-wrap::-webkit-scrollbar { height:5px; }
.hmi-flow-scroll-wrap::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }
.hmi-flow-scroll-wrap::-webkit-scrollbar-thumb { background:rgba(74,158,255,.25); border-radius:3px; }
.hmi-flow-track {
  display:flex; align-items:flex-end; gap:0; min-width:max-content;
  padding:18px 16px 0; position:relative;
}
/* Rail line at bottom of cards */
.hmi-flow-track::after {
  content:""; position:absolute; left:16px; right:16px; bottom:18px; height:2px;
  background:linear-gradient(90deg, transparent, #1e3a5f 3%, #2a5080 20%, #3a7bd5 50%, #2a5080 80%, #1e3a5f 97%, transparent);
  pointer-events:none; z-index:0;
}
/* Rail foot on each block */
.hmi-rail-foot { height:18px; background:linear-gradient(180deg,#1e2f42,#141e2e); border-top:1px solid #2a4060; margin-top:auto; }

/* Block base */
.hmi-block { position:relative; background:var(--panel-bg); border:1px solid rgba(255,255,255,.09); border-radius:8px 8px 0 0; overflow:hidden; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; display:flex; flex-direction:column; flex-shrink:0; z-index:1; }
.hmi-block:hover { border-color:#3a7bd5; box-shadow:0 -2px 12px rgba(58,123,213,.2); transform:translateY(-2px); }
.hmi-block.linie-block-active { border-color:#4a9eff !important; box-shadow:0 -3px 16px rgba(74,158,255,.35) !important; transform:translateY(-4px) !important; }
.hmi-station-aktiv { border-color:rgba(34,197,94,.5) !important; }

/* Sizes */
.hmi-station { width:120px; }
.hmi-band    { width:110px; }

/* Status tints */
.hmi-st-ok   { border-top-color:rgba(34,197,94,.2); }
.hmi-st-warn { border-top-color:rgba(250,204,21,.4); border-color:rgba(250,204,21,.3); }
.hmi-st-err  { border-top-color:rgba(239,68,68,.4); border-color:rgba(239,68,68,.35); }

/* Topbar strip */
.hmi-topbar-strip { height:3px; width:100%; flex-shrink:0; }
.hmi-topbar-hmi-st-ok   { background:linear-gradient(90deg,#16a34a,#22c55e); }
.hmi-topbar-hmi-st-warn { background:linear-gradient(90deg,#ca8a04,#facc15); }
.hmi-topbar-hmi-st-err  { background:linear-gradient(90deg,#b91c1c,#ef4444); }

/* Head row */
.hmi-head      { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 2px; }
.hmi-band-head { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 2px; }
.hmi-name    { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-primary); }
.hmi-band-id { font-size:.65rem; font-weight:700; font-family:monospace; color:#4a9eff; letter-spacing:.04em; }

/* LED */
.hmi-led { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hmi-led-ok   { background:#22c55e; box-shadow:0 0 5px #22c55e; animation:hmi-pulse-ok 2.5s ease-in-out infinite; }
.hmi-led-warn { background:#facc15; box-shadow:0 0 5px #facc15; animation:hmi-pulse-warn 1s ease-in-out infinite; }
.hmi-led-err  { background:#ef4444; box-shadow:0 0 5px #ef4444; animation:hmi-pulse-err 0.6s ease-in-out infinite; }

/* SVG wrap */
.hmi-svg-wrap { display:flex; justify-content:center; align-items:center; padding:4px 2px; flex:1; min-height:82px; }

/* Status row */
.hmi-status-row { display:flex; align-items:center; justify-content:space-between; padding:2px 8px; min-height:18px; }
.hmi-status-txt { font-size:.6rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; }
.hmi-risiko-chip { font-size:.58rem; font-weight:700; font-family:monospace; padding:1px 4px; border-radius:3px; }
.hmi-risiko-chip.hmi-rk-ok   { color:#22c55e; background:rgba(34,197,94,.1); }
.hmi-risiko-chip.hmi-rk-warn { color:#facc15; background:rgba(250,204,21,.1); }
.hmi-risiko-chip.hmi-rk-err  { color:#ef4444; background:rgba(239,68,68,.1); }

/* Risiko bar */
.hmi-risiko-bar { height:2px; background:rgba(255,255,255,.06); margin:2px 6px 4px; border-radius:1px; overflow:hidden; }
.hmi-risiko-fill { height:100%; border-radius:1px; transition:width .6s ease; }
.hmi-rk-ok   { background:linear-gradient(90deg,#16a34a,#22c55e); }
.hmi-rk-warn { background:linear-gradient(90deg,#ca8a04,#facc15); }
.hmi-rk-err  { background:linear-gradient(90deg,#b91c1c,#ef4444); }

/* Badges */
.hmi-badges { display:flex; gap:3px; flex-wrap:wrap; padding:2px 6px 6px; }
.hmi-badge { font-size:.56rem; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid rgba(255,255,255,.07); }
.hmi-badge-kuka { background:rgba(74,158,255,.1); color:#4a9eff; border-color:rgba(74,158,255,.22); }

/* Legende */
.hmi-legende { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:7px 16px; border-top:1px solid var(--border); font-size:.62rem; }
.hmi-leg-ok   { color:#22c55e; }
.hmi-leg-ok::before   { content:"●"; margin-right:4px; }
.hmi-leg-warn { color:#facc15; }
.hmi-leg-warn::before { content:"●"; margin-right:4px; }
.hmi-leg-err  { color:#ef4444; }
.hmi-leg-err::before  { content:"●"; margin-right:4px; }
.hmi-leg-flow { color:#3a7bd5; }
.hmi-leg-flow::before { content:"→"; margin-right:4px; }
.hmi-leg-wartung { color:#f97316; }
.hmi-leg-wartung::before { content:"⚙"; margin-right:4px; }

/* Detail Panel — below line, initially hidden */
.hmi-detail-panel { background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.hmi-detail-panel[hidden] { display:none; }

/* STAU */
.hmi-band-stau { border-color:rgba(239,68,68,.5) !important; }

/* Belt animation */
@keyframes hmi-belt-v2 { from{transform:translateX(0)} to{transform:translateX(10px)} }
.hmi-belt-stripes { animation:hmi-belt-v2 .6s linear infinite; animation-play-state:paused; }
.hmi-anim-run .hmi-belt-stripes { animation-play-state:running; }

/* ── Anlagenübersicht v2 Layout ── */

/* plant-card hat overflow:hidden — für die Linienkarte aufheben */
.plant-card.plant-line-card {
  overflow: visible;
}

/* Seite: Keine horizontale Overflow-Begrenzung, vertikal scrollbar */
#anlagen.seite.aktiv {
  overflow-x: visible;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Scroll-Wrapper für die horizontale Linie */
.anlage-flow-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
}

/* Linie: horizontal, kein Umbruch — override ältere Regel */
.anlage-linie-flow {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  min-width: max-content;
  max-width: none;
  overflow-x: visible;
  padding: 12px 16px 0;
}

/* Legende unter der Linie */
.anlage-legende {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.aleg-ok   { color: #35d66b; }
.aleg-ok::before   { content: "●"; margin-right: 4px; }
.aleg-warn { color: #f7c948; }
.aleg-warn::before { content: "●"; margin-right: 4px; }
.aleg-err  { color: #ef4444; }
.aleg-err::before  { content: "●"; margin-right: 4px; }
.aleg-flow { color: #3a7bd5; }
.aleg-flow::before { content: "→"; margin-right: 4px; }
.aleg-wart { color: #f97316; }
.aleg-wart::before { content: "⚙"; margin-right: 4px; }

/* Detail-Panel: unter der Linie, zunächst versteckt */
.anlage-detail-panel[hidden] { display: none; }

.anlage-detail-panel {
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid rgba(53,214,107,0.2);
  background: rgba(7,12,20,0.95);
  overflow: auto;
  max-height: 72vh;
  transition: border-color 0.2s;
}

.anlage-detail-panel:not([hidden]) {
  border-color: rgba(53,214,107,0.3);
  padding: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPARATURFORMULAR v2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen-reader only helper */
.rep-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;
}

/* ── Seitenstruktur ── */
.rep-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Header ── */
.rep-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rep-header h2 { margin: 0 0 3px; font-size: 18px; font-weight: 700; }
.rep-subtitle   { margin: 0; font-size: 13px; color: var(--text-muted); }
.rep-header-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Chips ── */
.rep-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  white-space: nowrap;
}
.rep-chip-ok   { color: #35d66b; border-color: rgba(53,214,107,0.3);  background: rgba(53,214,107,0.08); }
.rep-chip-warn { color: #f7c948; border-color: rgba(247,201,72,0.3);  background: rgba(247,201,72,0.08); }
.rep-chip-err  { color: #ef4444; border-color: rgba(239,68,68,0.3);   background: rgba(239,68,68,0.08); }
.rep-chip-dim  { color: #6b7a8d; }

/* ── 2-Spalten-Layout ── */
.rep-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .rep-layout { grid-template-columns: 1fr; }
  .rep-right  { position: static; }
}
.rep-left  { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rep-right { min-width: 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 14px; }

/* ── Schritt-Nav ── */
.rep-wizard-nav {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rep-wizard-nav::-webkit-scrollbar { display: none; }

.rep-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.rep-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #6b7a8d;
  transition: border-color .2s, background .2s, color .2s;
}
.rep-step-label {
  font-size: 10px;
  color: #6b7a8d;
  white-space: nowrap;
  transition: color .2s;
}
.rep-step-connector {
  flex: 1;
  height: 2px;
  min-width: 18px;
  background: rgba(255,255,255,0.07);
  margin: 0 4px;
  margin-bottom: 18px;
}
/* Aktiver Schritt */
.rep-step-aktiv .rep-step-circle { border-color: #3a7bd5; background: rgba(58,123,213,0.15); color: #7ab4ff; }
.rep-step-aktiv .rep-step-label  { color: #7ab4ff; }
/* Abgeschlossener Schritt */
.rep-step-done .rep-step-circle  { border-color: rgba(53,214,107,0.5); background: rgba(53,214,107,0.1); color: #35d66b; }
.rep-step-done .rep-step-label   { color: #35d66b; }

/* ── Wizard-Form ── */
.rep-wizard-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rep-wizard-step {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Step-Header */
.rep-step-hdr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rep-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(58,123,213,0.12);
  border: 1px solid rgba(58,123,213,0.28);
  color: #7ab4ff;
  font-size: 13px;
  font-weight: 800;
}
.rep-step-hdr > div strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.rep-step-hdr > div span { font-size: 12px; color: var(--text-muted); }

/* Felder-Grid */
.rep-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 11px;
}
.rep-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rep-label-voll { grid-column: 1 / -1; }
.rep-label input,
.rep-label select,
.rep-label textarea {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.rep-label input:focus,
.rep-label select:focus,
.rep-label textarea:focus {
  outline: none;
  border-color: rgba(58,123,213,0.5);
  background: rgba(58,123,213,0.04);
}

/* Checkboxen */
.rep-checkbox-gruppe {
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 14px 12px;
}
.rep-checkbox-gruppe legend {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0 5px;
}
.rep-checkbox-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.rep-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  transition: border-color .15s;
}
.rep-checkbox-label:hover { border-color: rgba(58,123,213,0.35); }
.rep-checkbox-label input { accent-color: #3a7bd5; flex-shrink: 0; }

/* Wizard-Aktionen */
.rep-wizard-aktionen { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 2px; }

/* Buttons */
.rep-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
.rep-btn-weiter  { background: rgba(58,123,213,0.12); border-color: rgba(58,123,213,0.35); color: #7ab4ff; }
.rep-btn-weiter:hover { background: rgba(58,123,213,0.22); }
.rep-btn-zurueck { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--text-muted); }
.rep-btn-zurueck:hover { background: rgba(255,255,255,0.08); }
.rep-btn-speichern { background: rgba(53,214,107,0.12); border-color: rgba(53,214,107,0.38); color: #35d66b; font-weight: 700; }
.rep-btn-speichern:hover { background: rgba(53,214,107,0.22); }
.rep-btn-speichern:disabled,
.rep-btn-speichern.gesperrt { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color: #3a4450; cursor: not-allowed; }
.rep-btn-abbrechen { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.22); color: #ef4444; }
.rep-btn-abbrechen:hover { background: rgba(239,68,68,0.14); }

/* Abschluss-Info */
.rep-abschluss-info {
  background: rgba(58,123,213,0.05);
  border: 1px solid rgba(58,123,213,0.14);
  border-radius: 8px;
  padding: 14px 16px;
}
.rep-abschluss-info p { margin: 0 0 5px; font-size: 13px; color: var(--text-muted); }
.rep-abschluss-info p:last-child { margin-bottom: 0; }

/* Speichern-Meldung */
.rep-meldung { font-size: 13px; font-weight: 600; border-radius: 8px; min-height: 0; transition: all .2s; }
.rep-meldung:not(:empty) { padding: 12px 16px; border: 1px solid; }
.rep-meldung-ok  { color: #35d66b; border-color: rgba(53,214,107,0.3);  background: rgba(53,214,107,0.07); }
.rep-meldung-err { color: #ef4444; border-color: rgba(239,68,68,0.3);   background: rgba(239,68,68,0.07); }

/* Rechte-Hinweis */
.rep-rechte-hinweis { font-size: 11px; color: var(--text-muted); opacity: 0.65; margin: 2px 0 0; }

/* ── Rechte Kontextbox ── */
.rep-kontext-leer {
  padding: 18px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rep-kontext-leer strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.rep-kontext-leer p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.rep-kontext-karte {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rep-kontext-titel { font-size: 14px; font-weight: 700; color: var(--text); }
.rep-kontext-id    { font-size: 11px; color: var(--text-muted); margin-top: -8px; font-family: monospace; }
.rep-kontext-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rep-kontext-section { display: flex; flex-direction: column; gap: 6px; }
.rep-kontext-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.rep-kontext-list {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rep-kontext-list li { font-size: 12px; color: var(--text); line-height: 1.5; }
.rep-kontext-messwerte { display: flex; flex-wrap: wrap; gap: 5px; }
.rep-mw-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  font-family: monospace;
}
.rep-fc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  color: var(--text-muted);
}
.rep-fc-row:first-child { border-top: none; }
.rep-fc-code {
  font-family: monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(58,123,213,0.1);
  border: 1px solid rgba(58,123,213,0.22);
  color: #7ab4ff;
  white-space: nowrap;
  flex-shrink: 0;
}

/* "Nicht blind tauschen"-Box */
.rep-nicht-blind {
  background: rgba(247,201,72,0.05);
  border: 1px solid rgba(247,201,72,0.18);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rep-nicht-blind-titel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f7c948;
}
.rep-nicht-blind p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── Historiebereich ── */
.rep-section {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rep-section-titel h3 { margin: 0; font-size: 15px; font-weight: 700; }

.rep-hist-leer { color: var(--text-muted); font-size: 13px; padding: 8px 0; margin: 0; }

.rep-hist-cards { display: flex; flex-direction: column; gap: 10px; }

.rep-hist-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color .15s;
}
.rep-hist-card:hover { border-color: rgba(255,255,255,0.14); }
.rep-hist-card-hdr { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.rep-hist-date  { font-size: 12px; font-family: monospace; color: var(--text-muted); }
.rep-hist-motor {
  font-size: 12px; font-weight: 700; font-family: monospace;
  background: rgba(255,255,255,0.05); border-radius: 4px;
  padding: 1px 7px; color: var(--text);
}
.rep-hist-badge  { font-size: 11px !important; }
.rep-hist-schicht { font-size: 11px; color: var(--text-muted); }

.rep-hist-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 14px;
}
.rep-hist-details > div { font-size: 12px; color: var(--text); }
.rep-hist-dl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 5px;
}
.rep-hist-kommentar {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 7px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.08);
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}

/* ── Info-Box unten ── */
.rep-info-box {
  font-size: 12px;
  color: var(--text-muted);
  padding: 11px 16px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  line-height: 1.6;
}

/* ── Override: alte .wizard-step Regeln greifen nicht in neuen Rep-Schritten ── */
/* Beide Klassen (.wizard-step + .rep-wizard-step) sind auf denselben Elementen.
   Da .rep-wizard-step später im File steht, gewinnt es bei gleichem Gewicht.
   Hier nur Sicherheitsnetz für display/padding/border/background: */
.rep-wizard-step {
  display: flex !important;
  flex-direction: column;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel-bg) !important;
  gap: 16px !important;
}

/* Sicherstellen dass #reparatur.seite.aktiv kein padding-Problem hat */
#reparatur.seite.aktiv {
  display: block;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   Elektronik / Sensorik v2 — Sensor-Karten & Gruppen
   ══════════════════════════════════════════════════════════════════════ */

/* ── Stat-Bar (OK / Warn / Fehler Übersicht oben) ── */
.elek-sens-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 10px;
}
.elek-stat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.elek-stat {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  letter-spacing: .02em;
}
.elek-stat-ok  { background: rgba(53,214,107,0.12); border-color: rgba(53,214,107,0.25); color: var(--ok); }
.elek-stat-warn{ background: rgba(247,201,72,0.12); border-color: rgba(247,201,72,0.25); color: var(--warn); }
.elek-stat-err { background: rgba(255,77,79,0.12);  border-color: rgba(255,77,79,0.25);  color: var(--error); }

/* ── Gruppen-Badge-Varianten ── */
.elek-badge-motor {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.22);
  color: var(--accent-blue);
}
.elek-badge-err {
  background: rgba(255,77,79,0.12);
  border-color: rgba(255,77,79,0.28);
  color: var(--error);
}
.elek-badge-warn {
  background: rgba(247,201,72,0.12);
  border-color: rgba(247,201,72,0.28);
  color: var(--warn);
}

/* ── Gruppen-Zustand (Rand-Akzent) ── */
.elek-sensor-gruppe.elek-grp-fehler > summary {
  border-left: 3px solid var(--error);
  padding-left: 9px;
  color: var(--error);
}
.elek-sensor-gruppe.elek-grp-warn > summary {
  border-left: 3px solid var(--warn);
  padding-left: 9px;
  color: var(--warn);
}

/* ── Sub-Header (Prozess-Sensorik / Motor-Sensorik) ── */
.elek-sens-subheader {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 14px 0 6px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-xs);
  display: inline-block;
}
.elek-sens-subheader-motor {
  color: var(--accent-blue);
  background: rgba(56,189,248,0.06);
}

/* ── Sensor-Karten-Gitter ── */
.elek-sens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.elek-sens-grid-motor {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

/* ── Einzelne Sensor-Karte ── */
.elek-sens-karte {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .15s, background .15s;
}
.elek-sens-karte:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.15);
}

/* Motor-Karte: leichter blauer Akzent */
.elek-sens-karte.elek-sens-motor {
  background: rgba(56,189,248,0.04);
  border-color: rgba(56,189,248,0.14);
}
.elek-sens-karte.elek-sens-motor:hover {
  border-color: rgba(56,189,248,0.28);
}

/* Status-Rand oben */
.elek-sens-karte.elek-sens-st-ok   { border-top: 2px solid rgba(53,214,107,0.5); }
.elek-sens-karte.elek-sens-st-warn { border-top: 2px solid rgba(247,201,72,0.55); }
.elek-sens-karte.elek-sens-st-err  { border-top: 2px solid rgba(255,77,79,0.6);  }

/* ── Karten-Header (ID + Name + LED) ── */
.elek-sens-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.elek-sens-id {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-soft);
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.elek-sens-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.elek-sens-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.elek-sens-led.ok   { background: var(--ok);    color: var(--ok); }
.elek-sens-led.warn { background: var(--warn);  color: var(--warn); }
.elek-sens-led.err  { background: var(--error); color: var(--error); }

/* ── Chip-Reihe (Typ / Status / Adresse) ── */
.elek-sens-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.elek-sens-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Signal-Typ Chips */
.elek-sens-chip.sens-cat-dig {
  background: rgba(100,116,139,0.15);
  border-color: rgba(100,116,139,0.25);
  color: #94a3b8;
}
.elek-sens-chip.sens-cat-ana {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.25);
  color: #a78bfa;
}
.elek-sens-chip.sens-cat-motor {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.25);
  color: var(--accent-blue);
}

/* Status Chips */
.elek-sens-chip.elek-sens-st-ok   { background: rgba(53,214,107,0.1);  border-color: rgba(53,214,107,0.22);  color: var(--ok); }
.elek-sens-chip.elek-sens-st-warn { background: rgba(247,201,72,0.1);  border-color: rgba(247,201,72,0.22);  color: var(--warn); }
.elek-sens-chip.elek-sens-st-err  { background: rgba(255,77,79,0.12);  border-color: rgba(255,77,79,0.28);   color: var(--error); }

/* Adressen-Chip */
.elek-sens-chip.elek-sens-adr {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-soft);
}

/* ── Funktionsbeschreibung ── */
.elek-sens-funktion {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  padding-top: 1px;
}

/* ── Fehlercodes ── */
.elek-sens-fehlercodes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-top: 2px;
}
.elek-sens-fc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,77,79,0.08);
  border: 1px solid rgba(255,77,79,0.18);
  color: #ff8a8b;
  white-space: nowrap;
}

/* ── Prüfhinweis ── */
.elek-sens-pruef {
  font-size: 10.5px;
  color: var(--text-soft);
  line-height: 1.4;
  padding: 4px 7px;
  background: rgba(247,201,72,0.05);
  border-left: 2px solid rgba(247,201,72,0.3);
  border-radius: 0 3px 3px 0;
  margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════
   Instandhaltung v2 — KPI / Filter / Kompaktkarte / Detailpanel
   ═══════════════════════════════════════════════════════════════════ */

/* ── KPI strip ── */
.ih-kpi-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ih-kpi-item {
  flex: 1;
  min-width: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.ih-kpi-item.ih-kpi-dim { opacity: 0.45; }
.ih-kpi-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-main);
}
.ih-kpi-lbl {
  font-size: 10.5px;
  color: var(--text-soft);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ih-kpi-ok  .ih-kpi-val { color: var(--ok); }
.ih-kpi-warn .ih-kpi-val { color: var(--warn); }
.ih-kpi-err .ih-kpi-val { color: var(--error); }

/* ── Filter tabs ── */
.ih-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ih-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.ih-filter-btn:hover { border-color: var(--accent); color: var(--text-main); }
.ih-filter-btn.aktiv {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.ih-filter-cnt {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
}
.ih-filter-btn:not(.aktiv) .ih-filter-cnt {
  background: var(--border-soft);
  color: var(--text-soft);
}

/* ── Layout: grid + detail panel ── */
.ih-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ih-layout .ih-detail-col { display: none; }

.ih-layout.ih-split {
  grid-template-columns: 360px 1fr;
}
@media (max-width: 900px) {
  .ih-layout.ih-split { grid-template-columns: 1fr; }
}
.ih-layout.ih-split .ih-detail-col { display: block; }

/* ── Detail empty hint ── */
.ih-detail-empty {
  display: flex;
  align-items: flex-start;
  padding: 32px 16px;
  color: var(--text-soft);
  font-size: 13px;
  font-style: italic;
}

/* ── Grid of compact cards ── */
.ih-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

/* ── Compact card ── */
.ih-karte {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow .15s, border-color .15s;
}
.ih-karte:hover { box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.ih-karte.ih-karte-aktiv {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 82,130,255),.25);
}
.ih-karte.ih-karte-err  { border-left: 3px solid var(--error); }
.ih-karte.ih-karte-warn { border-left: 3px solid var(--warn); }
.ih-karte.ih-karte-ok   { border-left: 3px solid var(--ok); }

.ih-karte-kopf {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 4px;
}
.ih-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.ih-led-ok  { background: var(--ok);    box-shadow: 0 0 4px var(--ok); }
.ih-led-warn { background: var(--warn); box-shadow: 0 0 4px var(--warn); }
.ih-led-err  { background: var(--error);box-shadow: 0 0 4px var(--error); }

.ih-karte-namen { flex: 1; min-width: 0; }
.ih-karte-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ih-karte-id {
  font-size: 10px;
  color: var(--text-soft);
  font-family: monospace;
}
.ih-rb {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ih-rb-ok    { color: var(--ok); }
.ih-rb-warn  { color: var(--warn); }
.ih-rb-error { color: var(--error); }

.ih-karte-station {
  font-size: 10.5px;
  color: var(--text-soft);
  background: var(--bg-alt, rgba(255,255,255,.04));
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 1px;
  display: inline-block;
}
.ih-karte-sensoren {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}
.ih-chip {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  white-space: nowrap;
}
.ih-chip-ok   { background: rgba(82,196,26,.1);  color: var(--ok);    border: 1px solid rgba(82,196,26,.2); }
.ih-chip-warn { background: rgba(247,201,72,.1); color: var(--warn);  border: 1px solid rgba(247,201,72,.25); }
.ih-chip-err  { background: rgba(255,77,79,.1);  color: var(--error); border: 1px solid rgba(255,77,79,.2); }

.ih-rel-row { margin-bottom: 5px; }
.ih-rel {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .03em;
}
.ih-rel-err  { background: rgba(255,77,79,.1);  color: var(--error); border: 1px solid rgba(255,77,79,.2); }
.ih-rel-warn { background: rgba(247,201,72,.1); color: var(--warn);  border: 1px solid rgba(247,201,72,.25); }
.ih-rel-ok   { background: rgba(82,196,26,.1);  color: var(--ok);    border: 1px solid rgba(82,196,26,.2); }

.ih-detail-btn {
  margin-top: auto;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  width: 100%;
}
.ih-detail-btn-ok   { background: rgba(82,196,26,.12);  color: var(--ok);    border-color: rgba(82,196,26,.25); }
.ih-detail-btn-warn { background: rgba(247,201,72,.12); color: var(--warn);  border-color: rgba(247,201,72,.3); }
.ih-detail-btn-err  { background: rgba(255,77,79,.12);  color: var(--error); border-color: rgba(255,77,79,.25); }
.ih-detail-btn:hover { filter: brightness(1.15); }

/* ── Detail panel ── */
.ih-detail-panel {
  position: sticky;
  top: 12px;
}

/* ── Sensor values row (inside detail card) ── */
.ih-sensor-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0 6px;
}
.ih-sv {
  background: var(--bg-alt, rgba(255,255,255,.04));
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 5px 7px;
  text-align: center;
}
.ih-sv span {
  display: block;
  font-size: 9.5px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ih-sv strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.ih-sv-ok   strong { color: var(--ok); }
.ih-sv-warn strong { color: var(--warn); }
.ih-sv-err  strong { color: var(--error); }

/* ── Diagnose warning block ── */
.ih-diag-warn {
  background: rgba(255,77,79,.06);
  border: 1px solid rgba(255,77,79,.18);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 4px;
}
.ih-diag-warn ul { margin: 0; padding-left: 18px; }
.ih-diag-warn li { font-size: 12px; color: var(--text-main); line-height: 1.55; }

/* ── Betriebsempfehlung color ── */
.ih-empf-ok    { color: var(--ok); }
.ih-empf-warn  { color: var(--warn); }
.ih-empf-error { color: var(--error); }

/* ── Relevanz badge in detail card ── */
.ih-rel-err.ik2-rel-badge,
.ik2-rel-badge.ih-rel-err  { background: rgba(255,77,79,.1);  color: var(--error); border: 1px solid rgba(255,77,79,.25); }
.ih-rel-warn.ik2-rel-badge,
.ik2-rel-badge.ih-rel-warn { background: rgba(247,201,72,.1); color: var(--warn);  border: 1px solid rgba(247,201,72,.3); }


/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — Override dark defaults
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-main:       #f0f4f8;
  --bg-sidebar:    #e4eaf5;
  --bg-card:       #ffffff;
  --bg-card-soft:  #f7f9fc;
  --bg-card-hover: #edf2f7;
  --border-soft:   rgba(30, 41, 59, 0.12);
  --border-strong: rgba(30, 41, 59, 0.22);
  --text-main:     #1e293b;
  --text-muted:    #475569;
  --text-soft:     #64748b;
  --text-dim:      #94a3b8;
  --shadow-soft:   0 4px 24px rgba(0, 0, 0, 0.07);
  --bg-element:    rgba(241, 245, 249, 0.96);
  --bg-hover:      rgba(226, 232, 240, 0.9);
  --panel-bg:      #ffffff;
  --border:        rgba(30, 41, 59, 0.12);
  --hintergrund:   #f0f4f8;
  --sidebar:       #e4eaf5;
  --karte:         #ffffff;
  --karte-hell:    #f7f9fc;
  --linie:         rgba(30, 41, 59, 0.12);
  --text:          #1e293b;
}
[data-theme="light"] body {
  background: var(--bg-main);
  color: var(--text-main);
}
[data-theme="light"] .sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
}
[data-theme="light"] .kopfbereich {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .nav-button {
  color: var(--text-soft);
}
[data-theme="light"] .nav-button:hover,
[data-theme="light"] .nav-button.active {
  background: rgba(30,41,59,.07);
  color: var(--text-main);
}
[data-theme="light"] .nav-toggle {
  color: var(--text-muted);
}
[data-theme="light"] .panel {
  background: var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
[data-theme="light"] .status-badge {
  background: rgba(30,41,59,.07);
  color: var(--text-main);
}
[data-theme="light"] code {
  background: rgba(30,41,59,.07);
  color: var(--text-muted);
}
[data-theme="light"] .logo strong { color: var(--text-main); }
[data-theme="light"] .logo span   { color: var(--text-soft); }
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--bg-card-soft);
  border-color: var(--border-soft);
  color: var(--text-main);
}
[data-theme="light"] .hmi-taster {
  background: rgba(30,41,59,.06);
  border-color: rgba(30,41,59,.14);
  color: var(--text-main);
}
[data-theme="light"] .hmi-taster:hover {
  background: rgba(30,41,59,.11);
}
[data-theme="light"] .hmi-taster.aktiv {
  background: var(--accent);
  color: #fff;
}

/* ── System theme = JS resolves to light/dark via data-theme ── */

/* ═══════════════════════════════════════════════════════════════════
   DISPLAY OPTIONS
   ═══════════════════════════════════════════════════════════════════ */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation-duration:      0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration:     0.001s !important;
}
.compact-view .panel  { padding: 10px 14px !important; }
.compact-view .ih-karte { padding: 7px 10px !important; }
.compact-view .ih-grid { gap: 7px; }
.compact-view .ik2-karte { padding: 10px 14px 8px !important; }
.compact-view .ih-kpi-item { padding: 7px 10px; }

/* ═══════════════════════════════════════════════════════════════════
   EINSTELLUNGEN / SYSTEM PAGE — sys-* components
   ═══════════════════════════════════════════════════════════════════ */

/* Hero card */
.sys-hero {
  border-radius: var(--radius-lg);
  padding: 28px 32px 22px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--bg-card) 60%, rgba(var(--accent-rgb,53,214,107),.06) 100%);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.sys-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-rgb,53,214,107),.04) 100%);
  pointer-events: none;
}
.sys-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.sys-hero-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sys-hero-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.sys-hero-titles h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
}
.sys-version-chip {
  display: inline-block;
  background: rgba(var(--accent-rgb,53,214,107),.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb,53,214,107),.25);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sys-hero-entwickler {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
  text-align: right;
}
.sys-hero-entwickler strong {
  color: var(--text-main);
}
.sys-hero-desc {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0 0 14px;
  max-width: 700px;
  line-height: 1.6;
}
.sys-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sys-chip {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  white-space: nowrap;
}
.sys-chip-ok   { background: rgba(53,214,107,.08); color: var(--ok);    border-color: rgba(53,214,107,.2); }
.sys-chip-warn { background: rgba(247,201,72,.08); color: var(--warn);  border-color: rgba(247,201,72,.2); }
.sys-chip-err  { background: rgba(255,77,79,.08);  color: var(--error); border-color: rgba(255,77,79,.2); }

/* 3-column grid */
.sys-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .sys-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sys-3col { grid-template-columns: 1fr; }
}
.sys-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sys-card {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
}
.sys-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* Theme buttons */
.sys-theme-btns,
.sys-akzent-btns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sys-theme-btn {
  flex: 1;
  min-width: 60px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.sys-theme-btn:hover { border-color: var(--accent); color: var(--text-main); }
.sys-theme-btn.aktiv {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sys-theme-preview {
  font-size: 11px;
  color: var(--text-soft);
}
.sys-akzent-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.sys-akzent-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--btn-color, #35d66b);
  flex-shrink: 0;
}
.sys-akzent-btn:hover { border-color: var(--text-soft); }
.sys-akzent-btn.aktiv {
  border-color: var(--btn-color, var(--accent));
  background: rgba(0,0,0,.08);
  color: var(--text-main);
  box-shadow: 0 0 0 2px var(--btn-color, var(--accent));
}
[data-theme="light"] .sys-akzent-btn.aktiv {
  background: rgba(0,0,0,.05);
}

/* Toggle switches */
.sys-opt-list { display: flex; flex-direction: column; gap: 10px; }
.sys-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sys-toggle-label { font-size: 12.5px; color: var(--text-main); }
.sys-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  background: var(--border-strong);
  padding: 0;
}
.sys-toggle.on { background: var(--accent); }
.sys-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.sys-toggle.on::after { left: 19px; }

/* Definition list */
.sys-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sys-dl > div {
  display: contents;
}
.sys-dl dt {
  font-size: 11.5px;
  color: var(--text-soft);
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sys-dl dd {
  font-size: 12px;
  color: var(--text-main);
  font-weight: 500;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
  margin: 0;
}
.sys-val-ok   { color: var(--ok) !important; }
.sys-val-warn { color: var(--warn) !important; }
.sys-val-err  { color: var(--error) !important; }

/* Modus status card */
.sys-modus-status { padding: 12px 16px !important; }
.sys-modus-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sys-modus-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
}
.sys-modus-ok   { background: rgba(53,214,107,.12); color: var(--ok); }
.sys-modus-warn { background: rgba(247,201,72,.12); color: var(--warn); }
.sys-modus-err  { background: rgba(255,77,79,.12);  color: var(--error); }
.sys-betriebsart-badge {
  font-size: 12px;
  color: var(--text-soft);
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  padding: 2px 8px;
  border-radius: 8px;
}
.sys-modus-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin: 2px 0;
}

/* Simulation taster grid override for sys page */
.sys-taster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 7px;
}
.sys-taster-grid .hmi-taster {
  font-size: 11px;
  padding: 7px 8px;
  min-height: unset;
}

/* Project info */
.sys-proj-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0 0 10px;
}
.sys-proj-ziele {
  margin: 0;
  padding-left: 16px;
}
.sys-proj-ziele li {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Safety hint card */
.sys-hinweis-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(247,201,72,.06) !important;
  border-color: rgba(247,201,72,.2) !important;
}
.sys-hinweis-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(247,201,72,.18);
  color: var(--warn);
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sys-hinweis-card p {
  font-size: 12px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.6;
}

/* Role actions */
.sys-role-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.sys-badge-ok {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(53,214,107,.1);
  color: var(--ok);
  border: 1px solid rgba(53,214,107,.2);
}

/* Changelog */
.sys-changelog { display: flex; flex-direction: column; gap: 12px; }
.sys-cl-entry { }
.sys-cl-current .sys-cl-version { color: var(--accent); }
.sys-cl-planned { opacity: .75; }
.sys-cl-version {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sys-cl-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(53,214,107,.15);
  color: var(--accent);
  letter-spacing: .04em;
}
.sys-cl-badge-plan {
  background: rgba(148,163,184,.12);
  color: var(--text-soft);
}
.sys-cl-entry ul {
  margin: 0;
  padding-left: 16px;
}
.sys-cl-entry li {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* Connection info compact */
.sys-conn-row { display: flex; flex-direction: column; gap: 4px; }
.sys-conn-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
}
.sys-conn-item span { color: var(--text-main); font-weight: 500; }

/* ── Segment control buttons (KI, refresh interval) ──────────────── */
.sys-seg-btns { display: flex; gap: 3px; flex-wrap: wrap; }
.sys-seg-btn { padding: 4px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: rgba(255,255,255,0.035); color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sys-seg-btn.aktiv { background: rgba(53,214,107,0.14); border-color: var(--accent); color: var(--accent); }
.sys-seg-btn:hover:not(.aktiv) { background: rgba(255,255,255,0.07); border-color: rgba(148,163,184,0.38); color: var(--text-main); }
[data-theme="light"] .sys-seg-btn { background: rgba(0,0,0,0.04); }
[data-theme="light"] .sys-seg-btn.aktiv { background: rgba(53,180,90,0.1); }

/* ── Alarmgrenzen / threshold inputs ──────���──────────────────────── */
.sys-grenz-grid { display: flex; flex-direction: column; gap: 0; }
.sys-grenz-group { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); padding: 8px 0 3px; }
.sys-grenz-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(84,107,135,0.1); font-size: 11px; }
.sys-grenz-row:last-child { border-bottom: none; }
.sys-grenz-label { color: var(--text-soft); flex: 1; font-size: 11px; }
.sys-grenz-unit { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }
.sys-grenz-input { width: 54px; padding: 3px 6px; background: rgba(10,18,34,0.9); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-main); font-size: 11px; font-family: var(--font-mono); text-align: right; transition: border-color 0.15s; }
.sys-grenz-input:focus { border-color: var(--accent); outline: none; }
[data-theme="light"] .sys-grenz-input { background: rgba(240,244,248,0.9); }

/* ── KI info text block ────────────────���──────────────────────────── */
.sys-ki-info { font-size: 10.5px; color: var(--text-muted); background: rgba(4,8,16,0.5); padding: 8px 10px; border-radius: var(--radius-sm); border-left: 2px solid var(--accent); margin-top: 10px; line-height: 1.55; }
[data-theme="light"] .sys-ki-info { background: rgba(0,0,0,0.04); }

/* ── Hero stat-grid ─────────────���─────────────────────────────────── */
.sys-hero-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(84,107,135,0.18); }
.sys-hero-stat { background: rgba(4,8,18,0.65); border: 1px solid rgba(84,107,135,0.2); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sys-hero-stat-lbl { font-size: 8.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.sys-hero-stat-val { font-size: 15px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sys-hero-stat-val.ok   { color: var(--ok); }
.sys-hero-stat-val.warn { color: var(--warn); }
.sys-hero-stat-val.err  { color: var(--error); }
.sys-hero-stat-sub { font-size: 9px; color: var(--text-muted); }
[data-theme="light"] .sys-hero-stat { background: rgba(0,0,0,0.04); }

/* ── KI-Meldungen in Erklärung ──────────────────��─────────────────── */
.ki-erkl-panel { margin-bottom: 14px; border: 1px solid rgba(247,201,72,0.3); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: rgba(247,201,72,0.04); overflow: hidden; }
.ki-erkl-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(247,201,72,0.15); background: rgba(247,201,72,0.06); }
.ki-erkl-title { font-size: 12px; font-weight: 700; color: var(--text-main); }
.ki-erkl-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(247,201,72,0.15); color: var(--warn); }
.ki-erkl-card { padding: 11px 14px; border-bottom: 1px solid rgba(84,107,135,0.1); }
.ki-erkl-card:last-child { border-bottom: none; }
.ki-erkl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ki-erkl-comp { font-size: 13px; font-weight: 700; color: var(--text-main); font-family: var(--font-mono); }
.ki-erkl-station { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.ki-erkl-risiko { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 9px; flex-shrink: 0; white-space: nowrap; }
.ki-erkl-risiko.hoch { background: rgba(255,77,79,0.12); color: #ff4d4f; border: 1px solid rgba(255,77,79,0.3); }
.ki-erkl-risiko.mittel { background: rgba(247,201,72,0.12); color: #f7c948; border: 1px solid rgba(247,201,72,0.3); }
.ki-erkl-risiko.niedrig { background: rgba(53,214,107,0.1); color: #35d66b; border: 1px solid rgba(53,214,107,0.25); }
.ki-erkl-text { font-size: 11px; color: var(--text-soft); margin-bottom: 5px; line-height: 1.5; }
.ki-erkl-empf { font-size: 11px; color: rgba(53,214,107,0.9); margin-top: 3px; line-height: 1.5; }
.ki-erkl-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ki-erkl-time { font-size: 9.5px; color: var(--text-muted); margin-left: auto; }
.ki-erkl-link { font-size: 10.5px; font-weight: 600; padding: 3px 9px; background: rgba(15,28,52,0.8); border: 1px solid rgba(84,107,135,0.3); border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ki-erkl-link:hover { border-color: var(--accent); color: var(--accent); }
.ki-erkl-regel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.ki-erkl-regel { background: rgba(4,8,18,0.6); border: 1px solid rgba(84,107,135,0.2); border-radius: var(--radius-sm); padding: 10px 12px; }
.ki-erkl-regel-sig { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.ki-erkl-regel-urs { font-size: 11px; color: var(--text-soft); margin-bottom: 3px; line-height: 1.4; }
.ki-erkl-regel-empf { font-size: 10.5px; color: rgba(56,189,248,0.8); line-height: 1.4; }

/* ── Leitstand Dark Theme ───────────────────────────────────────── */
.theme-leitstand {
  --bg-main: #030810;
  --bg-card: #060d1a;
  --accent: #00e5a0;
  --ok: #00e5a0;
  --border-soft: rgba(0,229,160,0.12);
}
.theme-leitstand .kopfbereich,
.theme-leitstand .po-topbar {
  background: rgba(3,8,16,0.98);
  border-bottom: 1px solid rgba(0,229,160,0.18);
}
.theme-leitstand .po-tv-map-area {
  background:
    linear-gradient(rgba(0,229,160,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,0.04) 1px, transparent 1px),
    rgba(2,6,14,0.7);
  background-size: 32px 32px;
}

/* ── Präsentation Theme ─────────────────────────────────────────── */
.theme-praesentation {
  --text-main: #f0f4ff;
  --text-soft: #cbd5e1;
  font-size: 15px;
}
.theme-praesentation .panel,
.theme-praesentation .sys-card { padding: 18px 20px; }
.theme-praesentation .sys-hero-stat-val { font-size: 20px; }
.theme-praesentation .nav-label { font-size: 13px; }
.theme-praesentation .po-mc-lbl { font-size: 11px; }

/* ── pml-no-leds: LED-Puls deaktivieren ─────────────────────────── */
.pml-no-leds .po-led,
.pml-no-leds .po-mdot,
.pml-no-leds .po-snode,
.pml-no-leds .po-dp-led { animation: none !important; }

/* ── pml-no-tooltips ─────────────────────────────────────────────── */
.pml-no-tooltips [title] { pointer-events: none; }

/* ── Header stability ────────────────────────────────────────────── */
.top-clock { min-width: 142px; }
.top-update-interval { min-width: 102px; }
.top-refresh-chip { min-width: 156px; }
#letzteAktualisierung { min-width: 168px; display: inline-flex !important; }

/* Light theme body gradient override */
[data-theme="light"] body {
  background:
    radial-gradient(circle at 80% -12%, rgba(53, 214, 107, 0.04), transparent 32vw),
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.03), transparent 34vw),
    var(--bg-main);
}

/* ── Notification Bell & Popover ──────────────────────────────────────────── */
.notif-bell-wrap { position: relative; display: flex; align-items: center; width: 36px; justify-content: center; flex: 0 0 36px; }
.notif-bell-btn { position: relative; width: 34px; height: 34px; background: none; border: none; cursor: pointer; color: var(--text-soft); padding: 6px; border-radius: var(--radius-sm); transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center; }
.notif-bell-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.notif-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--text-soft); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; }
.notif-bell-badge.notif-badge-hoch { background: #ef4444; }
.notif-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 9999; overflow: hidden; }
.notif-popover-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.notif-popover-title { font-weight: 600; font-size: .85rem; color: var(--text-main); }
.notif-popover-close { background: none; border: none; cursor: pointer; color: var(--text-soft); font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.notif-popover-close:hover { background: var(--bg-card); color: var(--text-main); }
.notif-popover-body { max-height: 360px; overflow-y: auto; }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--text-soft); font-size: .83rem; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 14px; cursor: pointer; transition: background .12s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item-hoch   { border-left: 3px solid #ef4444; }
.notif-item-mittel { border-left: 3px solid #f59e0b; }
.notif-item-niedrig { border-left: 3px solid var(--accent); }
.notif-item-icon { min-width: 24px; height: 24px; border-radius: 6px; background: var(--bg-hover); color: var(--text-soft); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-typ-alarm   { background: rgba(239,68,68,.15) !important; color: #ef4444 !important; }
.notif-typ-sicherheit { background: rgba(239,68,68,.15) !important; color: #ef4444 !important; }
.notif-typ-wartung { background: rgba(53,214,107,.12) !important; color: var(--accent) !important; }
.notif-typ-produktion { background: rgba(245,158,11,.15) !important; color: #f59e0b !important; }
.notif-typ-daten { background: rgba(59,130,246,.15) !important; color: #3b82f6 !important; }
.notif-typ-risiko { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }
.notif-item-content { flex: 1; min-width: 0; }
.notif-item-titel { display: block; font-weight: 600; font-size: .82rem; color: var(--text-main); margin-bottom: 2px; }
.notif-item-text  { display: block; font-size: .78rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Übersicht Leitstand ──────────────────────────────────────────────────── */
.ueb-hero { margin-bottom: 14px; }
.ueb-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ueb-hero-left { display: flex; align-items: center; gap: 12px; }
.ueb-status-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ueb-dot-gruen { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.ueb-dot-gelb  { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.ueb-dot-rot   { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.ueb-hero-titel { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.ueb-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ueb-chip { padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; background: var(--bg-hover); color: var(--text-soft); border: 1px solid var(--border); }
.ueb-chip-gruen { background: rgba(53,214,107,.12); color: var(--accent); border-color: rgba(53,214,107,.3); }
.ueb-chip-gelb  { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.3); }
.ueb-chip-rot   { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.3); }
.ueb-hero-kpis { display: flex; gap: 20px; flex-wrap: wrap; }
.ueb-hero-kpi { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.ueb-kpi-val { font-size: 1.4rem; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.ueb-kpi-lbl { font-size: .7rem; color: var(--text-soft); text-align: center; margin-top: 2px; }
.ueb-hero-meta { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-soft); }
.ueb-hero-meta strong { color: var(--text-main); }
.ueb-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .ueb-kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ueb-kpi-grid { grid-template-columns: 1fr; } }
.ueb-kpi-card { padding: 14px 16px; }
.ueb-kpi-card-titel { font-size: .78rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ueb-kpi-card-nh { border-left: 3px solid var(--accent); }
.ueb-dl { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: .8rem; margin: 0 0 10px; }
.ueb-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ueb-dl dt { color: var(--text-soft); flex-shrink: 0; }
.ueb-dl dd { font-weight: 600; color: var(--text-main); text-align: right; margin: 0; }
.ueb-val-rot  { color: #ef4444 !important; }
.ueb-val-gelb { color: #f59e0b !important; }
.ueb-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 700; }
.ueb-badge-gruen { background: rgba(53,214,107,.12); color: var(--accent); }
.ueb-badge-gelb  { background: rgba(245,158,11,.12); color: #f59e0b; }
.ueb-badge-rot   { background: rgba(239,68,68,.12); color: #ef4444; }
.ueb-nh-prio { margin-bottom: 8px; }
.ueb-nh-text { font-size: .85rem; color: var(--text-main); margin: 0 0 10px; line-height: 1.45; }
.ueb-link-btn { display: block; width: 100%; margin-top: 10px; padding: 7px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--accent); font-size: .8rem; font-weight: 600; cursor: pointer; text-align: center; transition: background .15s; }
.ueb-link-btn:hover { background: rgba(53,214,107,.1); }
.ueb-link-btn-prio { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.3); }
.ueb-link-btn-prio:hover { background: rgba(239,68,68,.15); }
/* KI-Panel (Übersicht) */
.ueb-ki-panel { margin-bottom: 14px; padding: 16px 20px; border-left: 3px solid var(--accent); }
.ueb-ki-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ueb-ki-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; letter-spacing: .04em; flex-shrink: 0; }
.ueb-ki-titel { display: block; font-weight: 700; font-size: .95rem; }
.ueb-ki-sub { display: block; font-size: .75rem; color: var(--text-soft); margin-top: 1px; }
.ueb-ki-meldungen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ueb-ki-meldung { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(255,255,255,.025); }
.ueb-ki-meldung.ueb-ki-rot   { border-color: rgba(255,77,79,.4); background: rgba(255,77,79,.06); }
.ueb-ki-meldung.ueb-ki-gelb  { border-color: rgba(247,201,72,.4); background: rgba(247,201,72,.06); }
.ueb-ki-meldung.ueb-ki-gruen { border-color: rgba(53,214,107,.3); }
.ueb-ki-meldung-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.ueb-ki-komp { font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.07); padding: 2px 7px; border-radius: 4px; }
.ueb-ki-station { font-size: .75rem; color: var(--text-soft); }
.ueb-ki-badge { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ueb-ki-badge-rot   { background: rgba(255,77,79,.2);  color: #ff6b6b; }
.ueb-ki-badge-gelb  { background: rgba(247,201,72,.2); color: #f7c948; }
.ueb-ki-badge-gruen { background: rgba(53,214,107,.2); color: #35d66b; }
.ueb-ki-text { margin: 0 0 4px; font-size: .82rem; line-height: 1.5; }
.ueb-ki-zeit { font-size: .7rem; color: var(--text-soft); opacity: .6; }

.ueb-linie-panel { margin-bottom: 14px; padding: 14px 16px; }
.ueb-linie-titel { font-size: .78rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.ueb-linie-scroll { overflow-x: auto; padding-bottom: 4px; }
.ueb-linie-kette { display: flex; align-items: center; gap: 0; min-width: max-content; }
.ueb-band-connector { display: flex; align-items: center; gap: 4px; color: var(--text-soft); flex-shrink: 0; }
.ueb-station-karte { flex-shrink: 0; width: 106px; padding: 8px 9px; border-radius: 8px; background: var(--bg-hover); border: 1px solid var(--border); border-top: 3px solid var(--border); }
.ueb-station-gruen { border-top-color: var(--accent); }
.ueb-station-gelb  { border-top-color: #f59e0b; }
.ueb-station-rot   { border-top-color: #ef4444; }
.ueb-station-aktiv { background: rgba(53,214,107,.07); border-color: rgba(53,214,107,.3); }
.ueb-station-top { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.ueb-station-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ueb-station-name { font-size: .71rem; font-weight: 700; color: var(--text-main); }
.ueb-station-aktiv-chip { margin-left: auto; font-size: .63rem; background: rgba(53,214,107,.2); color: var(--accent); padding: 1px 4px; border-radius: 3px; font-weight: 700; }
.ueb-station-stoer { font-size: .67rem; color: #ef4444; margin-bottom: 3px; }
.ueb-station-meta { display: flex; flex-direction: column; gap: 2px; }
.ueb-station-meta span { font-size: .66rem; color: var(--text-soft); }
.ueb-station-risiko { font-weight: 700; }
.ueb-rk-rot  { color: #ef4444; }
.ueb-rk-gelb { color: #f59e0b; }
.ueb-band-karte { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 6px; background: var(--bg-hover); border: 1px solid var(--border); flex-shrink: 0; }
.ueb-band-name { font-size: .67rem; color: var(--text-soft); font-weight: 600; white-space: nowrap; }
.ueb-band-stau { font-size: .63rem; color: #ef4444; font-weight: 700; }
.ueb-analyse-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .ueb-analyse-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ueb-analyse-grid { grid-template-columns: 1fr; } }
.ueb-analyse-card { padding: 14px 16px; }
.ueb-analyse-titel { font-size: .75rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ueb-analyse-haupt { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; word-break: break-word; }
.ueb-schnell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ueb-schnell-btn { padding: 8px 10px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); font-size: .76rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.ueb-schnell-btn:hover { background: rgba(53,214,107,.1); color: var(--accent); border-color: rgba(53,214,107,.3); }
/* Settings extras */
.sys-radio-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: .82rem; color: var(--text-soft); }
.sys-radio-row:hover { color: var(--text-main); }
.sys-radio-row input[type=radio] { accent-color: var(--accent); }
.sys-hinweis { font-size: .72rem; color: var(--text-soft); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-style: italic; }
.sys-option-info { font-size: .78rem; color: var(--accent); font-weight: 600; }

/* ── Live-Daten System Panels ────────────────────────────────────────────── */
.live-sys-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 16px; margin-bottom: 12px; }
@media (max-width: 1200px) { .live-sys-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .live-sys-grid { grid-template-columns: 1fr; } }
.live-sys-card { display: block !important; padding: 13px 15px !important; gap: 0 !important; }
.live-sys-card-alert { border-left: 3px solid #ef4444; }
.live-sys-card-warn  { border-left: 3px solid #f59e0b; }
.live-sys-titel { font-size: .75rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.live-sys-alarm { font-size: .78rem; font-weight: 700; color: #ef4444; margin-bottom: 6px; }
.live-sys-msg   { font-size: .74rem; color: var(--text-soft); margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border); font-style: italic; }
.live-achsen-card { display: block !important; padding: 13px 15px !important; gap: 0 !important; margin-top: 0; }
.live-ax-scroll { overflow-x: auto; }
.live-ax-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.live-ax-table th { color: var(--text-soft); font-weight: 600; text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--border); }
.live-ax-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid rgba(148,163,184,.08); color: var(--text-main); }
.live-ax-table tr:last-child td { border-bottom: none; }
.live-ax-warn td { background: rgba(245,158,11,.04); }

/* ── Instandhaltung Achsen Panel ─────────────────────────────────────────── */
.ih-achsen-panel { display: block !important; padding: 14px 16px !important; gap: 0 !important; margin-top: 12px; }
.ih-achsen-titel { font-size: .75rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ih-achsen-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media (max-width: 900px) { .ih-achsen-grid { grid-template-columns: 1fr 1fr; } }
.ih-achsen-karte { padding: 10px 12px; border-radius: 8px; background: var(--bg-hover); border: 1px solid var(--border); border-top: 3px solid var(--border); }
.ih-achsen-ok    { border-top-color: var(--accent); }
.ih-achsen-warn  { border-top-color: #f59e0b; }
.ih-achsen-error { border-top-color: #ef4444; }
.ih-achsen-head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ih-achsen-name  { font-size: .82rem; font-weight: 700; color: var(--text-main); }
.ih-achsen-rows  { display: flex; flex-direction: column; gap: 3px; }
.ih-achsen-rows span { display: flex; justify-content: space-between; font-size: .75rem; }
.ih-achsen-rows em   { color: var(--text-soft); font-style: normal; }
.ih-achsen-rows strong { color: var(--text-main); font-weight: 600; }
.ih-achsen-hinweis { font-size: .72rem; color: #f59e0b; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-style: italic; }

/* ── Force-hide [hidden] elements that have conflicting display rules ────── */
#schnellzugriff[hidden],
#linienStripBereich[hidden],
#motorShowcase[hidden],
.overview-feature-grid[hidden],
#uebersichtKacheln[hidden],
#risikoRanking[hidden],
#gesamtanlagenstatus[hidden],
#versorgungKompakt[hidden],
#wartungsAmpel[hidden],
#zusammenfassung[hidden] {
  display: none !important;
}

/* ── Übersicht Leitstand: panel override (prevent grid-gap conflict) ──────── */
#uebersichtBereich .ueb-hero.panel,
#uebersichtBereich .ueb-kpi-card.panel,
#uebersichtBereich .ueb-linie-panel.panel,
#uebersichtBereich .ueb-analyse-card.panel {
  display: block;
  padding: 0;
  gap: 0;
}
#uebersichtBereich .ueb-kpi-card.panel { padding: 14px 16px; }
#uebersichtBereich .ueb-hero.panel     { padding: 16px 18px; margin-bottom: 14px; }
#uebersichtBereich .ueb-linie-panel.panel { padding: 14px 16px; margin-bottom: 14px; }
#uebersichtBereich .ueb-analyse-card.panel { padding: 14px 16px; }

/* ── Einstellungen: Startseite-Dropdown ────────────────────────────────── */
.sys-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.sys-select:focus { border-color: var(--accent); }
.sys-select option { background: var(--bg-card); color: var(--text-main); }

/* ── Diagnosemodus-Indikator ────────────────────────────────────────────── */
:root.diagnose-mode #refreshToggleBtn::after {
  content: " DIAG";
  font-size: 9px;
  color: var(--accent);
  vertical-align: super;
  letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════════
   PO — Anlagenübersicht HMI (Plant Overview)
   Alle Klassen mit Präfix po-
   ════════════════════════════════════════════════════════════════════ */

.po-container { display: flex; flex-direction: column; min-height: 0; background: var(--bg-main); }

/* ── Topbar ─────────────────────────────────────────────────────── */
.po-topbar {
  display: flex; align-items: flex-start; gap: 12px 16px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(8,14,28,0.95) 0%, transparent 100%);
  flex-wrap: wrap;
}
.po-topbar-left { flex-shrink: 0; }
.po-title {
  font-size: 16px; font-weight: 700; color: var(--text-main); margin: 0;
  letter-spacing: 0.01em;
}
.po-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; }
.po-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.po-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; }
.po-chip.po-ok    { background: rgba(53,214,107,0.12); border-color: rgba(53,214,107,0.3);  color: #35d66b; }
.po-chip.po-warn  { background: rgba(247,201,72,0.12); border-color: rgba(247,201,72,0.3);  color: #f7c948; }
.po-chip.po-error { background: rgba(255,77,79,0.12);  border-color: rgba(255,77,79,0.3);   color: #ff4d4f; }

/* ── Body layout ────────────────────────────────────────────────── */
.po-body { display: grid; grid-template-columns: minmax(0,1fr) 360px; min-height: 0; border-bottom: 1px solid var(--border-soft); }
.po-map-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border-soft); }

/* ── Map scroll ─────────────────────────────────────────────────── */
.po-map-scroll { overflow-x: auto; padding: 18px 20px 14px; }
.po-map-scroll::-webkit-scrollbar { height: 4px; }
.po-map-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); border-radius: 2px; }
.po-map { display: flex; align-items: center; min-width: max-content; gap: 0; }

/* ── Station block ──────────────────────────────────────────────── */
.po-station {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 90px; min-height: 118px; padding: 10px 7px 9px;
  background: rgba(14,22,36,0.94); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); cursor: pointer; position: relative;
  overflow: hidden; text-align: center; flex-shrink: 0;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.po-station:hover { background: rgba(20,32,50,0.98); border-color: rgba(148,163,184,0.28); }
.po-station.aktiv, .po-station.po-selected { border-color: rgba(53,214,107,0.55) !important; box-shadow: 0 0 0 1px rgba(53,214,107,0.18), 0 4px 16px rgba(0,0,0,0.22); background: rgba(18,34,50,0.98); }
.po-station.po-error { border-color: rgba(255,77,79,0.40); }
.po-station.po-warn  { border-color: rgba(247,201,72,0.35); }

.po-st-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.po-st-stripe.po-ok    { background: var(--ok); }
.po-st-stripe.po-warn  { background: var(--warn); }
.po-st-stripe.po-error { background: var(--error); }

.po-st-icon { color: rgba(148,163,184,0.65); margin-top: 6px; flex-shrink: 0; }
.po-station.po-error .po-st-icon { color: rgba(255,77,79,0.75); }
.po-station.po-warn  .po-st-icon { color: rgba(247,201,72,0.8); }
.po-station.po-ok    .po-st-icon { color: rgba(53,214,107,0.65); }

.po-st-label { font-size: 11px; font-weight: 700; color: var(--text-main); letter-spacing: 0.02em; line-height: 1.2; }
.po-st-mdots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: auto; padding-top: 4px; }

/* ── Motor dot ──────────────────────────────────────────────────── */
.po-mdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  font-size: 9px; font-weight: 800; font-family: var(--font-mono);
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.1s, box-shadow 0.12s; user-select: none;
}
.po-mdot:hover { transform: scale(1.14); box-shadow: 0 2px 8px rgba(0,0,0,0.22); }
.po-mdot.ok    { background: rgba(53,214,107,0.13); border-color: rgba(53,214,107,0.35); color: #35d66b; }
.po-mdot.warn  { background: rgba(247,201,72,0.13); border-color: rgba(247,201,72,0.40); color: #f7c948; animation: po-blink 2.2s ease-in-out infinite; }
.po-mdot.error { background: rgba(255,77,79,0.17);  border-color: rgba(255,77,79,0.50);  color: #ff4d4f; animation: po-pulse-err 1.8s ease-in-out infinite; }

/* ── Sensor dot ─────────────────────────────────────────────────── */
.po-sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.po-sdot.ok    { background: rgba(53,214,107,0.65); }
.po-sdot.warn  { background: rgba(247,201,72,0.8); }
.po-sdot.error { background: rgba(255,77,79,0.8); }
.po-sdot-row { display: flex; gap: 3px; align-items: center; }

/* ── Conveyor ───────────────────────────────────────────────────── */
.po-conv {
  display: flex; flex-direction: column; align-items: stretch;
  width: 78px; padding: 7px 6px;
  background: rgba(8,14,24,0.92); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.po-conv:hover { background: rgba(14,24,38,0.98); }
.po-conv.aktiv, .po-conv.po-selected { border-top-color: rgba(53,214,107,0.5); border-bottom-color: rgba(53,214,107,0.5); }
.po-conv.po-error { border-color: rgba(255,77,79,0.38); }
.po-conv.po-warn  { border-color: rgba(247,201,72,0.33); }

.po-conv-hd { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.po-conv-id { font-size: 9px; font-weight: 700; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.po-stau { font-size: 8px; font-weight: 800; color: var(--warn); background: rgba(247,201,72,0.1); padding: 1px 3px; border-radius: 2px; }

.po-conv-track { height: 30px; display: flex; align-items: center; margin-bottom: 4px; }
.po-conv-belt { width: 100%; height: 18px; background: rgba(18,30,48,0.8); border: 1px solid rgba(84,107,135,0.45); border-radius: 9px; display: flex; align-items: center; justify-content: space-around; padding: 0 4px; overflow: hidden; }
.po-bpx { display: inline-block; width: 8px; height: 5px; border-radius: 2px; background: rgba(53,214,107,0.3); border: 1px solid rgba(53,214,107,0.5); flex-shrink: 0; }

.po-belt-active   .po-bpx { animation: po-belt-move 1.3s linear infinite; }
.po-belt-active   .po-bpx:nth-child(2) { animation-delay: 0.43s; }
.po-belt-active   .po-bpx:nth-child(3) { animation-delay: 0.87s; }
.po-belt-jammed   .po-bpx { background: rgba(247,201,72,0.38); border-color: rgba(247,201,72,0.6); animation: po-belt-blink 0.9s ease-in-out infinite; }
.po-belt-stopped  .po-bpx { background: rgba(100,116,139,0.22); border-color: rgba(100,116,139,0.35); animation: none; }

.po-conv-ft { display: flex; align-items: center; gap: 4px; }
.po-conv .po-mdot { width: 20px; height: 20px; font-size: 8px; }

/* ── LED ────────────────────────────────────────────────────────── */
.po-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.po-led.po-led-ok    { background: var(--ok);   box-shadow: 0 0 4px rgba(53,214,107,0.55);  animation: po-pulse-ok 3s ease-in-out infinite; }
.po-led.po-led-warn  { background: var(--warn);  box-shadow: 0 0 4px rgba(247,201,72,0.55);  animation: po-blink 2s ease-in-out infinite; }
.po-led.po-led-error { background: var(--error); box-shadow: 0 0 5px rgba(255,77,79,0.65);   animation: po-pulse-err 1.6s ease-in-out infinite; }

/* ── Status text colors ─────────────────────────────────────────── */
.po-ok    { color: var(--ok); }
.po-warn  { color: var(--warn); }
.po-error { color: var(--error); }

/* ── Below-map row ──────────────────────────────────────────────── */
.po-below-row { display: flex; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--border-soft); background: rgba(5,10,18,0.55); flex-wrap: wrap; }

/* ── Cabinet ────────────────────────────────────────────────────── */
.po-cabinet { background: rgba(10,18,30,0.92); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; transition: border-color 0.15s; min-width: 200px; }
.po-cabinet:hover { border-color: rgba(148,163,184,0.28); }
.po-cab-title { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.po-cab-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px 8px; }
.po-cval { display: flex; flex-direction: column; gap: 1px; }
.po-cval em { font-size: 9px; font-style: normal; color: var(--text-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.po-cval b { font-size: 11px; font-weight: 700; color: var(--text-main); }

/* ── Reinigung strip ─────────────────────────────────────────────── */
.po-rein-strip { display: flex; align-items: center; gap: 10px 14px; background: rgba(10,18,30,0.92); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 14px; flex-wrap: wrap; border-left-width: 3px; }
.po-rein-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.po-rein-strip.po-ok    { border-left-color: var(--ok); }
.po-rein-strip.po-warn  { border-left-color: var(--warn); }
.po-rein-strip.po-error { border-left-color: var(--error); }

/* ── KPI strip ──────────────────────────────────────────────────── */
.po-kpi-strip {
  display: flex; border-top: 1px solid var(--border-soft);
  background: rgba(4,8,18,0.6);
}
.po-kpi-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 9px 6px; gap: 2px; border-right: 1px solid var(--border-soft);
}
.po-kpi-item:last-child { border-right: none; }
.po-kpi-item span  { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.po-kpi-item strong { font-size: 14px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }

/* ── Detail panel ───────────────────────────────────────────────── */
.po-detail-panel { background: rgba(5,10,20,0.98); overflow-y: auto; min-height: 0; }
.po-detail-panel::-webkit-scrollbar { width: 4px; }
.po-detail-panel::-webkit-scrollbar-thumb { background: rgba(84,107,135,0.28); border-radius: 2px; }
.po-detail-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; height: 100%; color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; line-height: 1.5; }

.po-dp-panel-header { position: sticky; top: 0; z-index: 10; padding: 7px 14px 6px; background: rgba(6,11,22,0.98); border-bottom: 1px solid rgba(84,107,135,0.22); display: flex; align-items: center; justify-content: space-between; }
.po-dp-panel-header-lbl { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(84,107,135,0.65); }
.po-dp-panel-header-id { font-size: 9px; font-weight: 600; font-family: var(--font-mono); color: rgba(148,163,184,0.55); }

/* ── Summary bar ────────────────────────────────────────────────── */
.po-summary { display: flex; align-items: center; padding: 7px 20px; background: rgba(4,8,14,0.65); border-top: 1px solid var(--border-soft); flex-wrap: wrap; gap: 7px; }
.po-sgrp  { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.po-slbl  { font-size: 10px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.po-schip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.po-schip.po-ok    { background: rgba(53,214,107,0.1);  border-color: rgba(53,214,107,0.24); color: #35d66b; }
.po-schip.po-warn  { background: rgba(247,201,72,0.1);  border-color: rgba(247,201,72,0.24); color: #f7c948; }
.po-schip.po-error { background: rgba(255,77,79,0.1);   border-color: rgba(255,77,79,0.24);  color: #ff4d4f; }
.po-stxt  { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.po-sdiv  { width: 1px; height: 18px; background: var(--border-soft); flex-shrink: 0; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes po-belt-move  { 0%{transform:translateX(-110%);opacity:0} 10%,90%{opacity:1} 100%{transform:translateX(110%);opacity:0} }
@keyframes po-belt-blink { 0%,100%{opacity:1} 50%{opacity:0.38} }
@keyframes po-pulse-ok   { 0%,100%{box-shadow:0 0 3px rgba(53,214,107,0.45)} 50%{box-shadow:0 0 7px rgba(53,214,107,0.75)} }
@keyframes po-blink      { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes po-pulse-err  { 0%,100%{box-shadow:0 0 4px rgba(255,77,79,0.55)} 50%{box-shadow:0 0 10px rgba(255,77,79,0.85)} }

/* Respect no-animation setting */
.pml-no-animations .po-mdot,
.pml-no-animations .po-led,
.pml-no-animations .po-bpx { animation: none !important; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .po-body { grid-template-columns: 1fr; }
  .po-map-col { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .po-detail-panel { max-height: 400px; }
}
@media (max-width: 600px) {
  .po-cab-grid { grid-template-columns: repeat(2,1fr); }
  .po-chips { margin-left: 0; }
  .po-topbar { flex-direction: column; }
}

/* ── Top-View 2D Floor Plan ─────────────────────────────────────── */
.po-tv-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--bg-main); }

.po-tv-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; min-height: 0; flex: 1; }

.po-tv-map-area {
  overflow: auto; display: flex; flex-direction: column; padding: 18px 22px;
  border-right: 1px solid var(--border-soft);
  background:
    linear-gradient(rgba(84,107,135,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,107,135,0.04) 1px, transparent 1px),
    rgba(4,8,16,0.55);
  background-size: 32px 32px;
}
.po-tv-map-area::-webkit-scrollbar { width: 5px; height: 5px; }
.po-tv-map-area::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.18); border-radius: 3px; }

.po-tv-floor { display: flex; flex-direction: column; gap: 0; min-width: max-content; }
.po-tv-row { display: flex; align-items: stretch; gap: 0; }
.po-tv-row-2 { justify-content: flex-end; }

.po-tv-turn {
  width: 76px; min-height: 124px; flex-shrink: 0;
  background: rgba(4,8,18,0.7); border: 1px solid rgba(84,107,135,0.22);
  display: flex; align-items: center; justify-content: center;
}

.po-mc {
  position: relative; display: flex; flex-direction: column;
  min-height: 134px; flex-shrink: 0;
  background: rgba(8,14,26,0.95);
  border: 1px solid rgba(84,107,135,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  cursor: pointer; transition: border-color 0.15s, background 0.15s; overflow: hidden;
}
.po-mc:hover { background: rgba(14,24,38,0.98); border-color: rgba(148,163,184,0.3); }
.po-mc.aktiv, .po-mc.po-selected { border-color: rgba(53,214,107,0.5) !important; box-shadow: 0 0 0 1px rgba(53,214,107,0.12), inset 0 0 24px rgba(53,214,107,0.04); }
.po-mc.po-error { border-color: rgba(255,77,79,0.45); }
.po-mc.po-warn  { border-color: rgba(247,201,72,0.4); }

.po-mc-eingang { width: 90px; }
.po-mc-saege   { width: 122px; }
.po-mc-cnc     { width: 152px; }
.po-mc-reinig  { width: 128px; }
.po-mc-robot   { width: 80px; }
.po-mc-pruef   { width: 110px; }
.po-mc-versand { width: 130px; }

.po-mc-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; }
.po-mc-stripe.po-ok    { background: var(--ok); }
.po-mc-stripe.po-warn  { background: var(--warn); }
.po-mc-stripe.po-error { background: var(--error); }

.po-mc-hd { display: flex; align-items: center; gap: 4px; padding: 7px 9px 6px; border-bottom: 1px solid rgba(84,107,135,0.22); background: linear-gradient(180deg, rgba(12,20,36,0.9) 0%, rgba(6,12,22,0.85) 100%); }
.po-mc-lbl { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; flex: 1; line-height: 1.2; }

.po-mc-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 7px 7px; gap: 5px; }
.po-mc-vis-svg { flex-shrink: 0; }
.po-mc-motors  { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.po-mc-sensors { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }

.po-snode {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid;
  font-size: 7px; font-weight: 800; flex-shrink: 0;
  cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.po-snode:hover { transform: scale(1.2); }
.po-snode.ok    { background: rgba(53,214,107,0.12); border-color: rgba(53,214,107,0.5); color: rgba(53,214,107,0.95); box-shadow: 0 0 5px rgba(53,214,107,0.2); }
.po-snode.warn  { background: rgba(247,201,72,0.12); border-color: rgba(247,201,72,0.5); color: rgba(247,201,72,0.95); box-shadow: 0 0 5px rgba(247,201,72,0.2); animation: po-blink 2.5s ease-in-out infinite; }
.po-snode.error { background: rgba(255,77,79,0.15);  border-color: rgba(255,77,79,0.6);  color: rgba(255,77,79,0.95); box-shadow: 0 0 5px rgba(255,77,79,0.3); animation: po-pulse-err 1.8s ease-in-out infinite; }

.po-cb {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: 76px; min-height: 124px; flex-shrink: 0;
  background: rgba(5,10,20,0.88);
  border-top: 2px solid rgba(84,107,135,0.3); border-bottom: 2px solid rgba(84,107,135,0.3);
  cursor: pointer; transition: background 0.15s, border-color 0.2s; overflow: hidden;
}
.po-cb:hover { background: rgba(12,20,34,0.95); }
.po-cb.aktiv  { border-color: rgba(53,214,107,0.4); }
.po-cb.po-error { border-top-color: rgba(255,77,79,0.4); border-bottom-color: rgba(255,77,79,0.4); }
.po-cb.po-warn  { border-top-color: rgba(247,201,72,0.35); border-bottom-color: rgba(247,201,72,0.35); }

.po-cb-label { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font-size: 8px; font-weight: 700; color: var(--text-soft); font-family: var(--font-mono); letter-spacing: 0.04em; }
.po-cb-track { flex: 1; position: relative; display: flex; align-items: center; overflow: hidden; }
.po-cb-rail-t { position: absolute; top: 11px; left: 0; right: 0; height: 3px; background: rgba(55,70,95,0.7); }
.po-cb-rail-b { position: absolute; bottom: 11px; left: 0; right: 0; height: 3px; background: rgba(55,70,95,0.7); }
.po-cb-rollers { position: absolute; top: 14px; bottom: 14px; left: 6px; right: 6px; display: flex; align-items: center; justify-content: space-around; }
.po-cb-roller { width: 3px; height: 100%; background: rgba(84,107,135,0.45); border-radius: 1.5px; flex-shrink: 0; }
.po-cb-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 15px; color: rgba(53,214,107,0.6); z-index: 2; pointer-events: none; font-weight: 700; }
.po-cb-arrow.po-belt-active  { animation: po-cb-ap 1.4s ease-in-out infinite; }
.po-cb-arrow.po-belt-jammed  { color: rgba(247,201,72,0.7); animation: po-blink 0.8s ease-in-out infinite; }
.po-cb-arrow.po-belt-stopped { color: rgba(100,116,139,0.4); animation: none; }
.po-cb-arrow.arr-l.po-belt-active { animation: po-cb-al 1.4s ease-in-out infinite; }
@keyframes po-cb-ap { 0%,100%{opacity:0.35;transform:translate(-62%,-50%)} 50%{opacity:1;transform:translate(-38%,-50%)} }
@keyframes po-cb-al { 0%,100%{opacity:0.35;transform:translate(-38%,-50%)} 50%{opacity:1;transform:translate(-62%,-50%)} }

/* Werkstücke auf Förderband */
.po-cb-pieces {
  position: absolute; top: 14px; bottom: 14px; left: 0; right: 0;
  overflow: hidden; z-index: 1; pointer-events: none;
  display: flex; align-items: center;
}
.po-cb-piece {
  position: absolute; width: 11px; height: 7px; border-radius: 2px;
  background: rgba(53,214,107,0.22); border: 1px solid rgba(53,214,107,0.45);
  flex-shrink: 0;
}
.po-piece-r { left: 0; animation: po-wpiece-r 2.4s linear infinite; }
.po-piece-l { left: 0; animation: po-wpiece-l 2.4s linear infinite; }
.po-piece-jam { background: rgba(247,201,72,0.22); border-color: rgba(247,201,72,0.55); left: 30%; animation: po-blink 1.2s ease-in-out infinite; }
.po-piece-stop { background: rgba(100,116,139,0.15); border-color: rgba(100,116,139,0.3); left: 30%; animation: none; }
@keyframes po-wpiece-r {
  0%   { transform: translateX(-120%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(700%)); opacity: 0; }
}
@keyframes po-wpiece-l {
  0%   { transform: translateX(700%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(-120%); opacity: 0; }
}

.po-cb-flow-chip { font-size: 7px; font-weight: 700; padding: 1px 4px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.po-cb-flow-chip.po-cb-flow-active  { background: rgba(53,214,107,0.15); color: rgba(53,214,107,0.9); }
.po-cb-flow-chip.po-cb-flow-jammed  { background: rgba(247,201,72,0.15); color: rgba(247,201,72,0.9); }
.po-cb-flow-chip.po-cb-flow-stopped { background: rgba(100,116,139,0.12); color: rgba(148,163,184,0.6); }

.po-mat-chip { font-size: 7px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: rgba(56,189,248,0.12); color: rgba(56,189,248,0.8); border: 1px solid rgba(56,189,248,0.25); letter-spacing: 0.03em; }

.pml-no-animations .po-cb-piece { animation: none !important; }

.po-cb-info { display: flex; align-items: center; gap: 3px; padding: 4px 6px 6px; flex-wrap: wrap; }
.po-cb .po-mdot { width: 20px; height: 20px; font-size: 7.5px; }

.po-tv-support { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(84,107,135,0.18); }

.po-tv-spanel {
  background: rgba(6,11,22,0.95);
  border: 1px solid rgba(84,107,135,0.28); border-left-width: 3px;
  border-radius: 4px; padding: 10px 14px; min-width: 176px;
  cursor: pointer; transition: border-color 0.15s, background 0.12s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.po-tv-spanel:hover {
  background: rgba(10,18,34,0.98);
  border-right-color: rgba(148,163,184,0.32);
  border-top-color: rgba(148,163,184,0.32);
  border-bottom-color: rgba(148,163,184,0.32);
}
.po-tv-spanel.po-ok    { border-left-color: var(--ok); }
.po-tv-spanel.po-warn  { border-left-color: var(--warn); }
.po-tv-spanel.po-error { border-left-color: var(--error); }

.po-tv-sptitle {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(84,107,135,0.15);
}

.po-tv-spbox { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 0; border-bottom: 1px solid rgba(84,107,135,0.1); font-size: 10px; }
.po-tv-spbox:last-child { border-bottom: none; }
.po-tv-spbox em { font-style: normal; color: var(--text-soft); font-size: 9px; white-space: nowrap; }
.po-tv-spbox b  { font-weight: 600; color: var(--text-main); text-align: right; }

.pml-no-animations .po-cb-arrow { animation: none !important; }
.pml-no-animations .po-snode    { animation: none !important; }

@media (max-width: 1100px) { .po-tv-body { grid-template-columns: 1fr 280px; } }
@media (max-width: 900px)  { .po-tv-body { grid-template-columns: 1fr; } .po-tv-map-area { border-right: none; border-bottom: 1px solid var(--border-soft); } }

/* ── Compact detail panel ─────────────────────────────────────── */
.po-dp-inner { display: flex; flex-direction: column; gap: 0; padding: 0; font-size: 12px; }
.po-dp-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border-soft); }
.po-dp-title { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.po-dp-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.po-dp-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 10px; font-size: 9.5px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.po-dp-badge.po-dp-ok   { background: rgba(53,214,107,0.12); color: #35d66b; border: 1px solid rgba(53,214,107,0.3); }
.po-dp-badge.po-dp-warn { background: rgba(247,201,72,0.12); color: #f7c948; border: 1px solid rgba(247,201,72,0.3); }
.po-dp-badge.po-dp-err  { background: rgba(255,77,79,0.12);  color: #ff4d4f; border: 1px solid rgba(255,77,79,0.3); }
.po-dp-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.po-dp-led.po-dp-ok   { background: rgba(53,214,107,0.85); box-shadow: 0 0 5px rgba(53,214,107,0.4); }
.po-dp-led.po-dp-warn { background: rgba(247,201,72,0.9);  box-shadow: 0 0 5px rgba(247,201,72,0.35); }
.po-dp-led.po-dp-err  { background: rgba(255,77,79,0.9);   box-shadow: 0 0 5px rgba(255,77,79,0.35); animation: po-pulse-err 1.6s ease-in-out infinite; }
.po-dp-section { padding: 8px 14px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 3px; }
.po-dp-section-title { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(84,107,135,0.75); padding: 7px 14px 4px; background: rgba(4,8,16,0.6); display: flex; align-items: center; gap: 5px; }
.po-dp-section-title::before { content: ''; display: inline-block; width: 3px; height: 10px; background: rgba(84,107,135,0.45); border-radius: 1.5px; flex-shrink: 0; }
.po-dp-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 11px; }
.po-dp-kv span { color: var(--text-soft); font-size: 10px; }
.po-dp-kv strong { color: var(--text-main); font-weight: 600; }
.po-dp-kv strong.po-dp-err  { color: #ff4d4f; }
.po-dp-kv strong.po-dp-warn { color: #f7c948; }
.po-dp-motor-block { padding: 8px 14px 6px; border-bottom: 1px solid rgba(84,107,135,0.12); }
.po-dp-motor-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.po-dp-motor-head strong { font-size: 11px; color: var(--text-main); flex: 1; }
.po-dp-vals { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 10px; }
.po-dp-vals span { color: var(--text-soft); }
.po-dp-vals span.po-dp-warn { color: #f7c948; font-weight: 600; }
.po-dp-vals span.po-dp-err  { color: #ff4d4f; font-weight: 600; }
.po-dp-vals-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; padding: 4px 14px; }
.po-dp-sps-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.po-dp-sps-row code { font-family: var(--font-mono); font-size: 9px; background: rgba(15,25,45,0.9); padding: 1px 5px; border-radius: 3px; color: var(--text-soft); border: 1px solid rgba(84,107,135,0.25); }
.po-dp-sensor-list { padding: 4px 14px 6px; display: flex; flex-direction: column; gap: 4px; }
.po-dp-sensor-row { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.po-dp-sid { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); flex-shrink: 0; }
.po-dp-sname { color: var(--text-soft); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-dp-stxt { font-size: 9px; font-weight: 600; flex-shrink: 0; }
.po-dp-stxt.po-dp-ok   { color: rgba(53,214,107,0.8); }
.po-dp-stxt.po-dp-warn { color: #f7c948; }
.po-dp-stxt.po-dp-err  { color: #ff4d4f; }
.po-dp-hint-txt { padding: 16px 14px; color: var(--text-muted); font-size: 11px; }
.po-dp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px 14px 14px; margin-top: 8px; border-top: 1px solid var(--border-soft); }
.po-dp-action-btn { background: rgba(15,28,52,0.85); border: 1px solid rgba(84,107,135,0.35); color: var(--text-main); font-size: 11px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; }
.po-dp-action-btn:hover { background: rgba(22,40,70,0.9); border-color: rgba(148,163,184,0.4); }

/* ── Machine cell live values ─────────────────────────────────── */
.po-mc-vals { font-size: 8px; font-family: var(--font-mono); color: var(--text-muted); line-height: 1.3; text-align: center; padding: 1px 0; }
.po-mc-vals.po-mc-vals-warn { color: #f7c948; }
.po-mc-vals.po-mc-vals-err  { color: #ff4d4f; }

/* ── Cabinet grid in support panel ───────────────────────────── */
.po-tv-cabinet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 9px; }
.po-tv-cabinet-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(4,8,18,0.7); border: 1px solid rgba(84,107,135,0.28);
  border-radius: 4px; padding: 6px 4px;
  transition: border-color 0.12s, background 0.12s;
}
.po-tv-cabinet-cell:hover { background: rgba(10,18,34,0.95); border-color: rgba(148,163,184,0.35); }
.po-tv-cab-name { font-size: 8px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; text-align: center; }
.po-tv-cab-st { font-size: 7.5px; font-weight: 600; text-align: center; }
.po-tv-cab-st.po-ok    { color: rgba(53,214,107,0.85); }
.po-tv-cab-st.po-warn  { color: rgba(247,201,72,0.85); }
.po-tv-cab-st.po-error { color: #ff4d4f; }
.po-tv-schraenke { min-width: 218px !important; }

/* ══════════════════════════════════════════════════════════════
   AUFTRAG 1.5 — Settings Tab Nav, Fehlerbaum, Schrittkette
   ══════════════════════════════════════════════════════════════ */

/* ── Einstellungen Tab Navigation ─────────────────────────────── */
.einst-tab-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px 0 0; margin-bottom: 16px;
  border-bottom: 2px solid rgba(84,107,135,0.25);
}
.einst-tab-btn {
  background: rgba(11,22,42,0.7); border: 1px solid rgba(84,107,135,0.28);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  padding: 7px 16px; border-radius: 6px 6px 0 0; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
}
.einst-tab-btn:hover { background: rgba(20,35,60,0.85); color: var(--text-main); }
.einst-tab-btn.aktiv {
  background: rgba(20,38,68,0.95); color: var(--accent);
  border-color: rgba(148,163,184,0.3); border-bottom-color: transparent;
}
.einst-tab-content { min-height: 200px; padding-bottom: 32px; }

/* ── 2-column card grid (most tabs) ───────────────────────────── */
.einst-2col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; align-items: start;
}
/* ── Simulation tab grid (single wider column) ─────────────────── */
.einst-sim-grid { display: flex; flex-direction: column; gap: 14px; }
.einst-sim-grid .sys-card { max-width: none; }

/* ── KI tab 2-column inner grid ───────────────────────────────── */
.einst-ki-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.einst-ki-main-card .sys-card-title { margin-bottom: 10px; }
.einst-ki-meld {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(15,28,52,0.5); border: 1px solid rgba(84,107,135,0.18);
  font-size: 11px; line-height: 1.4;
}
.einst-ki-comp { font-weight: 700; color: var(--accent); min-width: 80px; font-size: 10px; }
.einst-ki-text { color: var(--text-soft); flex: 1; }
@media (max-width: 700px) { .einst-ki-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   Fehlerbaum — Station Cards
   ══════════════════════════════════════════════════════════════ */
.fb-header { margin-bottom: 0; }
.fb-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fb-header-row h2 { margin: 0; }
.fb-header-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-stat-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.fb-sc-ok   { background: rgba(53,214,107,0.12); color: rgba(53,214,107,0.9); border: 1px solid rgba(53,214,107,0.25); }
.fb-sc-warn { background: rgba(247,201,72,0.12); color: #f7c948; border: 1px solid rgba(247,201,72,0.25); }
.fb-sc-err  { background: rgba(255,77,79,0.12); color: #ff6b6b; border: 1px solid rgba(255,77,79,0.25); }
.fb-sc-ki   { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }

.fb-stations-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

.fb-station-card {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(84,107,135,0.25);
  background: var(--surface);
}
.fb-station-card.fb-st-err  { border-color: rgba(255,77,79,0.35); }
.fb-station-card.fb-st-warn { border-color: rgba(247,201,72,0.3); }
.fb-station-card.fb-st-ok   { border-color: rgba(53,214,107,0.2); }

.fb-station-head {
  padding: 10px 14px 8px;
  background: rgba(8,16,32,0.5);
  border-bottom: 1px solid rgba(84,107,135,0.18);
}
.fb-st-err  .fb-station-head { background: rgba(255,77,79,0.07); }
.fb-st-warn .fb-station-head { background: rgba(247,201,72,0.06); }
.fb-st-ok   .fb-station-head { background: rgba(53,214,107,0.04); }

.fb-station-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fb-station-name { font-size: 14px; font-weight: 700; color: var(--text-main); }
.fb-station-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fb-motor-count { font-size: 11px; color: var(--text-muted); }
.fb-ki-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9px; background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.fb-risiko-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9px; }
.fb-r-rot.fb-risiko-badge  { background: rgba(255,77,79,0.12); color: #ff6b6b; border: 1px solid rgba(255,77,79,0.25); }
.fb-r-gelb.fb-risiko-badge { background: rgba(247,201,72,0.12); color: #f7c948; border: 1px solid rgba(247,201,72,0.25); }
.fb-r-gruen.fb-risiko-badge { background: rgba(53,214,107,0.12); color: rgba(53,214,107,0.9); border: 1px solid rgba(53,214,107,0.25); }
.fb-station-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 9px; }
.fb-ss-ok   { background: rgba(53,214,107,0.1); color: rgba(53,214,107,0.9); }
.fb-ss-warn { background: rgba(247,201,72,0.12); color: #f7c948; }
.fb-ss-err  { background: rgba(255,77,79,0.12); color: #ff6b6b; }
.fb-motor-ids { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 4px; }

.fb-ki-hints { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; background: rgba(139,92,246,0.05); border-bottom: 1px solid rgba(139,92,246,0.12); }
.fb-ki-hint { display: flex; align-items: baseline; gap: 8px; font-size: 11px; padding: 4px 6px; border-radius: 4px; }
.fb-ki-hoch   { background: rgba(255,77,79,0.08); border-left: 3px solid #ff4d4f; }
.fb-ki-mittel { background: rgba(247,201,72,0.08); border-left: 3px solid #f7c948; }
.fb-ki-niedrig { background: rgba(53,214,107,0.05); border-left: 3px solid rgba(53,214,107,0.5); }
.fb-ki-comp   { font-weight: 700; color: var(--accent); min-width: 80px; font-size: 10px; }
.fb-ki-risiko { font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 60px; }
.fb-ki-text   { color: var(--text-soft); flex: 1; }

.fb-motors { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; }
.fb-leer { padding: 10px 8px; color: var(--text-muted); font-size: 11px; margin: 0; }
.fb-motor-row { padding: 6px 8px; border-radius: 5px; border: 1px solid rgba(84,107,135,0.12); background: rgba(8,16,32,0.3); }
.fb-m-err  { border-color: rgba(255,77,79,0.25); background: rgba(255,77,79,0.04); }
.fb-m-warn { border-color: rgba(247,201,72,0.2); background: rgba(247,201,72,0.03); }
.fb-motor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-motor-id   { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-main); min-width: 90px; }
.fb-motor-name { font-size: 11px; color: var(--text-soft); flex: 1; }
.fb-motor-status { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 8px; }
.fb-s-ok   { background: rgba(53,214,107,0.1); color: rgba(53,214,107,0.9); }
.fb-s-warn { background: rgba(247,201,72,0.12); color: #f7c948; }
.fb-s-err  { background: rgba(255,77,79,0.12); color: #ff6b6b; }
.fb-motor-risiko { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fb-risiko-bar  { width: 80px; height: 5px; border-radius: 3px; background: rgba(84,107,135,0.2); overflow: hidden; }
.fb-risiko-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.fb-r-gruen { background: rgba(53,214,107,0.7); }
.fb-r-gelb  { background: rgba(247,201,72,0.8); }
.fb-r-rot   { background: rgba(255,77,79,0.85); }
.fb-risiko-val { font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 22px; text-align: right; }

.fb-diag-paths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(84,107,135,0.12); }
.fb-diag-path { font-size: 10px; padding: 3px 8px; border-radius: 4px; }
.fb-path-label { font-weight: 700; margin-right: 4px; }
.fb-mech { background: rgba(59,130,246,0.08); color: #93c5fd; border: 1px solid rgba(59,130,246,0.18); }
.fb-elek { background: rgba(247,201,72,0.07); color: #fde68a; border: 1px solid rgba(247,201,72,0.18); }
.fb-sens { background: rgba(139,92,246,0.08); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.18); }
.fb-rep  { background: rgba(53,214,107,0.05); color: rgba(110,231,183,0.85); border: 1px solid rgba(53,214,107,0.15); }

/* ══════════════════════════════════════════════════════════════
   Schrittkette — S7-Graph Style
   ══════════════════════════════════════════════════════════════ */
.sk-overview-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.sk-progress-track {
  height: 10px; border-radius: 5px;
  background: rgba(84,107,135,0.2); overflow: hidden;
  position: relative; margin-bottom: 16px;
  border: 1px solid rgba(84,107,135,0.18);
}
.sk-progress-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, rgba(53,214,107,0.5), var(--accent));
  transition: width 0.5s ease;
}
.sk-progress-fill.sk-progress-err { background: linear-gradient(90deg, rgba(255,77,79,0.5), #ff4d4f); }
.sk-progress-label { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 700; color: var(--text-muted); }

/* S7-Graph step flow */
.sk-steps-flow { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px; }

.sk-step { display: flex; align-items: flex-start; gap: 8px; border-radius: 6px; padding: 6px 10px; }

/* Done step — compact row */
.sk-step-done {
  background: rgba(53,214,107,0.04); border: 1px solid rgba(53,214,107,0.12);
  align-items: center; padding: 5px 10px;
  opacity: 0.75;
}
.sk-step-done:hover { opacity: 1; }
.sk-step-icon { font-size: 12px; min-width: 16px; text-align: center; }
.sk-icon-done { color: rgba(53,214,107,0.8); }
.sk-icon-upcoming { color: rgba(84,107,135,0.6); font-size: 10px; }
.sk-step-nr-small   { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 22px; }
.sk-step-name-small { font-size: 11px; color: var(--text-soft); flex: 1; }
.sk-ki-dot { font-size: 10px; color: #f7c948; }

/* Upcoming step */
.sk-step-upcoming {
  background: rgba(8,16,32,0.3); border: 1px solid rgba(84,107,135,0.1);
  align-items: center; padding: 5px 10px; opacity: 0.55;
}

/* Active step — expanded */
.sk-step-aktiv {
  background: rgba(20,38,68,0.7);
  border: 1px solid rgba(148,163,184,0.3);
  border-left: 3px solid var(--accent);
  padding: 10px 14px; align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.sk-step-nr-aktiv {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: var(--accent); min-width: 36px; text-align: center;
  padding-top: 2px;
}
.sk-step-body { flex: 1; }
.sk-step-title {
  font-size: 14px; font-weight: 700; color: var(--text-main);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sk-aktiv-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(53,214,107,0.15); color: var(--accent);
  border: 1px solid rgba(53,214,107,0.3);
}
.sk-step-detail { font-size: 11px; color: var(--text-soft); margin-bottom: 3px; }
.sk-detail-label { font-weight: 700; color: var(--text-muted); }
.sk-step-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.sk-ki-hints { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 6px 8px; border-radius: 5px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.15); }
.sk-ki-hint { font-size: 10px; padding: 3px 6px; border-radius: 4px; line-height: 1.4; }
.sk-ki-hoch   { background: rgba(255,77,79,0.08); color: #fca5a5; border-left: 2px solid #ff4d4f; }
.sk-ki-mittel { background: rgba(247,201,72,0.07); color: #fde68a; border-left: 2px solid #f7c948; }
.sk-ki-niedrig { background: rgba(53,214,107,0.05); color: rgba(110,231,183,0.85); border-left: 2px solid rgba(53,214,107,0.5); }

/* Störung section */
.lk-stoerung-bereich { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(84,107,135,0.2); }
.lk-stoerung-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }

/* ── SPS I/O: Section title + byte badge ─────────────────────────── */
.sps-section-title { font-size: 13px; font-weight: 700; color: var(--text-soft); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.sps-byte-badge { font-family: monospace; font-size: 10px; background: rgba(56,189,248,.12); color: var(--accent); border: 1px solid rgba(56,189,248,.2); border-radius: 3px; padding: 1px 5px; margin-left: 6px; }

/* ── GRAFCET / S7-Graph ─────────────────────────────────────────── */
.gfc-container { padding: 4px 0; }
.gfc-info-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 16px; font-size: 12px; }
.gfc-info-schritt { font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.gfc-info-ok   { background: rgba(53,214,107,.12); color: #35d66b; }
.gfc-info-err  { background: rgba(248,81,73,.12); color: #f85149; }
.gfc-info-idle { background: rgba(138,153,168,.08); color: var(--text-muted); }
.gfc-info-prog, .gfc-info-takt { color: var(--text-muted); font-size: 11px; }
.gfc-flow { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 520px; margin: 0 auto; }
.gfc-step { width: 100%; border: 2px solid var(--border); border-radius: 6px; background: var(--panel-bg); transition: all .15s; }
.gfc-step-idle  { opacity: .55; }
.gfc-step-done  { border-color: rgba(53,214,107,.3); background: rgba(53,214,107,.03); }
.gfc-step-aktiv { border-color: #38bdf8; background: rgba(56,189,248,.07); box-shadow: 0 0 0 3px rgba(56,189,248,.15); }
.gfc-step-stoerung { border-color: #f85149; background: rgba(248,81,73,.08); }
.gfc-step-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; }
.gfc-step-nr { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--accent); min-width: 32px; }
.gfc-step-name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.gfc-aktiv-badge { font-size: 10px; font-weight: 700; color: #38bdf8; background: rgba(56,189,248,.12); border-radius: 3px; padding: 1px 6px; }
.gfc-done-badge  { font-size: 10px; color: #35d66b; }
.gfc-step-body { padding: 6px 12px 10px 44px; border-top: 1px solid rgba(56,189,248,.15); }
.gfc-aktion { font-size: 11px; color: var(--text-soft); margin-bottom: 4px; }
.gfc-lbl { font-weight: 700; color: var(--accent); margin-right: 4px; }
.gfc-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.gfc-ki-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gfc-ki-hint { font-size: 10px; background: rgba(245,158,11,.1); color: #f59e0b; border-radius: 3px; padding: 1px 6px; }
.gfc-transition { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gfc-trans-rail { width: 2px; height: 10px; background: var(--border); }
.gfc-trans-bar { width: 60px; height: 3px; background: var(--accent); border-radius: 2px; }
.gfc-trans-cond { font-size: 10px; color: var(--text-muted); margin: 3px 0; text-align: center; max-width: 260px; }
.gfc-stoer-row { margin-top: 16px; display: flex; justify-content: center; }

/* ── SPS-Ablaufplan ─────────────────────────────────────────────── */
.ablauf-section { padding: 4px 0; }
.ablauf-section-title { font-size: 13px; font-weight: 700; color: var(--text-soft); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.ablauf-merker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 5px; margin-bottom: 14px; }
.ablauf-merker { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 5px; font-size: 11px; border: 1px solid var(--border); transition: all .1s; }
.ablauf-m-aktiv  { background: rgba(53,214,107,.06); border-color: rgba(53,214,107,.25); }
.ablauf-m-inaktiv{ background: var(--panel-bg); opacity: .6; }
.ablauf-m-addr { font-family: monospace; font-size: 11px; color: var(--accent); min-width: 40px; }
.ablauf-m-name { color: var(--text-soft); flex: 1; }
.ablauf-m-led, .ablauf-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ablauf-led-gruen { background: #35d66b; box-shadow: 0 0 4px rgba(53,214,107,.6); }
.ablauf-led-grau  { background: rgba(138,153,168,.25); }
.ablauf-led-rot   { background: #f85149; box-shadow: 0 0 4px rgba(248,81,73,.5); }
.ablauf-fu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 8px; }
.ablauf-fu-karte { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-bg); }
.ablauf-fu-ok   { border-color: rgba(53,214,107,.2); }
.ablauf-fu-gelb { border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.04); }
.ablauf-fu-rot  { border-color: rgba(248,81,73,.25); background: rgba(248,81,73,.04); }
.ablauf-fu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.ablauf-fu-name { font-size: 12px; font-weight: 700; color: var(--text); }
.ablauf-fu-q    { font-family: monospace; font-size: 10px; color: var(--accent); }
.ablauf-fu-typ  { font-size: 10px; color: var(--text-muted); margin-bottom: 5px; }
.ablauf-fu-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-soft); }
.ablauf-fu-risiko { margin-left: auto; font-size: 10px; font-weight: 700; color: #f59e0b; }
.ablauf-fu-drz  { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ── KI-Erklärung: Normalbetrieb-Analyse ───────────────────────── */
.nb-analyse-panel { padding: 16px 18px; }
.nb-analyse-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.nb-analyse-icon { font-size: 24px; color: #35d66b; flex-shrink: 0; line-height: 1; }
.nb-analyse-titel { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.nb-analyse-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nb-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.nb-kpi { text-align: center; min-width: 80px; }
.nb-kpi-val { display: block; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.nb-kpi-lbl { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.nb-kpi-warn .nb-kpi-val { color: #f59e0b; }
.nb-naechste-panel { background: rgba(138,153,168,.06); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.nb-naechste-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.nb-naechste-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nb-naechste-name { font-weight: 700; font-size: 13px; color: var(--text); }
.nb-naechste-station { font-size: 11px; color: var(--text-muted); }
.nb-naechste-risiko { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: auto; }
.nb-risiko-gruen { background: rgba(53,214,107,.1); color: #35d66b; }
.nb-risiko-gelb  { background: rgba(245,158,11,.1); color: #f59e0b; }
.nb-naechste-werte { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.nb-wert { font-size: 12px; color: var(--text-soft); background: var(--panel-bg); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); }
.nb-abw { font-size: 10px; color: var(--text-muted); margin-left: 3px; }
.nb-naechste-empf { font-size: 11px; color: var(--accent); margin: 0; }
.nb-geprueft-info { font-size: 10px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); }

/* ── Soll/Ist Table (Motor Detail) ───────────────────────────────────── */
.si-table-wrap { margin: 10px 0; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.si-table-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 6px 10px 4px; border-bottom: 1px solid var(--border); background: rgba(138,153,168,.05); }
.si-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.si-table thead tr { background: rgba(138,153,168,.07); }
.si-table th { padding: 5px 10px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.si-table td { padding: 5px 10px; border-top: 1px solid var(--border); }
.si-table tr:hover td { background: rgba(138,153,168,.05); }
.si-label { font-weight: 600; color: var(--text); }
.si-soll { color: var(--text-soft); }
.si-unit { color: var(--text-muted); font-size: 10px; }
.si-ist { font-weight: 700; }
.si-ok  { color: #35d66b; }
.si-gelb, .si-gelb td { color: #f59e0b; }
.si-rot, .si-rot td { color: #ef4444; }
.si-abw { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Datenprüfung (Einstellungen → Diagnose tab) ─────────────────────── */
.dq-ok-banner { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 6px; background: rgba(53,214,107,.08); border: 1px solid rgba(53,214,107,.25); color: #35d66b; }
.dq-ok-icon { font-size: 20px; font-weight: 700; }
.dq-badge-err { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 9px; background: rgba(239,68,68,.15); color: #ef4444; font-size: 11px; font-weight: 700; }
.dq-badge-ok  { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 9px; background: rgba(53,214,107,.15); color: #35d66b; font-size: 11px; font-weight: 700; }
.dq-row-err td { background: rgba(239,68,68,.04); }
.dq-row-warn td { background: rgba(245,158,11,.04); }

/* ── Fehlerbaum — Sensor Chips + Diagnosis Tree ──────────────────────── */
.fb-sensor-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 6px; }
.fb-sensor-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; }
.fb-sensor-chip small { font-size: 9px; opacity: .7; }
.fb-sensor-chip b { font-weight: 700; margin-right: 2px; }
.fb-sc-ok   { background: rgba(53,214,107,.08); border-color: rgba(53,214,107,.25); color: #35d66b; }
.fb-sc-gelb { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: #f59e0b; }
.fb-sc-rot  { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30);  color: #ef4444; }

/* Diagnosis Tree */
.fb-diag-tree { margin-top: 6px; background: rgba(138,153,168,.04); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.fb-tree-gewerk { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.fb-tree-gewerk strong { color: var(--accent); }
.fb-tree-urs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fb-tree-urs-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-right: 4px; }
.fb-tree-urs-item { font-size: 10px; padding: 1px 7px; border-radius: 4px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #ef4444; }
.fb-tree-steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fb-tree-step { display: flex; align-items: flex-start; gap: 0; }
.fb-tree-step-head { display: flex; align-items: center; gap: 4px; min-width: 160px; }
.fb-tree-step-nr { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 700; flex-shrink: 0; }
.fb-tree-step-icon { font-size: 13px; }
.fb-tree-step-typ { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.fb-tree-step-body { flex: 1; padding-left: 6px; }
.fb-tree-item { font-size: 11px; color: var(--text-soft); line-height: 1.5; }
.fb-tree-mass { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.fb-tree-mass-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 4px; }
.fb-tree-mass-item { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: var(--text-soft); margin-bottom: 2px; }
.fb-tree-m-nr { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px; background: rgba(138,153,168,.15); font-size: 9px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* OK motor row */
.fb-ok-zeile { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
.fb-ok-check { font-size: 11px; color: #35d66b; font-weight: 600; }
.fb-ok-wartung { font-size: 10px; color: var(--text-muted); }

/* ── Schrittkette Soll-Zeit ── */
.sk-step-sollzeit { color: var(--text-muted); }
.sk-sollzeit-val { color: var(--accent); font-weight: 600; }
.sk-soll-badge { display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.sk-soll-done     { background: rgba(53,214,107,.12); color: #35d66b; }
.sk-soll-upcoming { background: rgba(138,153,168,.13); color: var(--text-muted); }

/* ── Layout-Dichte ── */
.dichte-kompakt .panel           { padding: 6px 8px !important; }
.dichte-kompakt h2               { font-size: .82rem !important; }
.dichte-kompakt h3               { font-size: .76rem !important; margin-top: 6px !important; }
.dichte-kompakt .motor-card      { padding: 6px 8px !important; }
.dichte-kompakt .sk-step-aktiv   { padding: 8px 10px !important; }
.dichte-kompakt .sk-step-done,
.dichte-kompakt .sk-step-upcoming{ padding: 3px 8px !important; font-size: 11px !important; }
.dichte-kompakt .ueb-kachel      { padding: 8px 10px !important; }

.dichte-gross .panel             { padding: 18px 20px !important; }
.dichte-gross h2                 { font-size: 1.1rem !important; }
.dichte-gross h3                 { font-size: .98rem !important; }
.dichte-gross .motor-card        { padding: 16px 18px !important; }
.dichte-gross .sk-step-aktiv     { padding: 16px 18px !important; }
.dichte-gross .sk-step-done,
.dichte-gross .sk-step-upcoming  { padding: 7px 14px !important; font-size: 13px !important; }
.dichte-gross .ueb-kachel        { padding: 16px 18px !important; }

/* ── Kennzahlen Charts ── */
.kz-charts-row { display: flex; gap: 16px; margin-top: 20px; align-items: flex-start; flex-wrap: wrap; }
.kz-chart-box { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kz-chart-box-bar { flex: 1; min-width: 320px; align-items: stretch; }
.kz-chart-box-bar canvas { width: 100% !important; }
.kz-chart-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }

/* ── Motor-Detail Sensor Chart ── */
.md-sensor-chart-wrap { margin: 10px 0; height: 160px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }

/* ── Anlagenübersicht Draufsicht-Toggle ── */
.po-ansicht-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-left: auto; flex-shrink: 0; }
.po-ansicht-btn { background: transparent; border: none; padding: 5px 14px; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.po-ansicht-btn:hover { background: rgba(148,163,184,.1); color: var(--text-main); }
.po-ansicht-aktiv { background: rgba(148,163,184,.15) !important; color: var(--text-main) !important; }

/* ── Draufsicht SVG view ── */
.po-draufsicht-wrap { padding: 12px 16px; }
.po-draufsicht-svg { width: 100%; height: auto; max-height: 440px; display: block; border-radius: 6px; overflow: hidden; }
.po-draufsicht-svg [data-anlage-typ]:hover rect { filter: brightness(1.25); }
.po-draufsicht-svg [data-anlage-typ]:hover text { fill: rgba(255,255,255,1) !important; }

/* ── SK Status-Header (global bar above step list) ── */
.sk-status-header {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  background: var(--panel-bg, #1a1f2e); border: 1px solid var(--border, #2a3050);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
}
.sk-sh-field { display: flex; flex-direction: column; min-width: 120px; }
.sk-sh-label { font-size: 10px; color: var(--text-muted, #8899aa); text-transform: uppercase; letter-spacing: .04em; }
.sk-sh-val   { font-size: 13px; font-weight: 600; margin-top: 1px; color: var(--text, #e0e8ff); }
.sk-sh-ok    { color: #27ae60 !important; }
.sk-sh-gelb  { color: #e67e22 !important; }
.sk-sh-rot   { color: #e74c3c !important; }
.sk-sh-fb-link {
  font-size: .6rem; padding: 2px 7px; border-radius: 3px;
  border: 1px solid rgba(230,126,34,.4); background: rgba(230,126,34,.1);
  color: #fbbf24; cursor: pointer; transition: all .15s;
}
.sk-sh-fb-link:hover { background: rgba(230,126,34,.2); border-color: rgba(230,126,34,.7); }

/* ── SK Abweichungs-Badge (inline in step) ── */
.sk-abw-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-left: 8px;
  background: rgba(255,255,255,.07);
}
.sk-abw-ok   { color: #27ae60; }
.sk-abw-gelb { color: #e67e22; }
.sk-abw-rot  { color: #e74c3c; }
.sk-tap-hint { font-size: 10px; color: var(--text-muted, #8899aa); font-style: italic; }

/* ── Modul-Schrittkette Grid (Tab B) ── */
.modul-sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px; margin-top: 12px;
}
.modul-sk-karte {
  border: 1px solid var(--border, #2a3050); border-radius: 8px;
  background: var(--panel-bg, #1a1f2e); padding: 10px 12px;
  cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.modul-sk-karte:hover { box-shadow: 0 0 0 2px var(--accent, #2a7fff44); border-color: var(--accent, #2a7fff); }
.modul-sk-aktiv  { border-left: 3px solid #27ae60; }
.modul-sk-erledigt { border-left: 3px solid #2a7fff; opacity: .8; }
.modul-sk-stoerung { border-left: 3px solid #e74c3c; background: rgba(231,76,60,.06); }
.modul-sk-inaktiv  { border-left: 3px solid var(--border, #2a3050); opacity: .55; }
.modul-sk-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.modul-sk-nr   { font-size: 11px; font-weight: 700; color: var(--text-muted, #8899aa); min-width: 24px; }
.modul-sk-name { font-size: 13px; font-weight: 600; color: var(--text, #e0e8ff); flex: 1; }
.modul-sk-done-badge { font-size: 11px; color: #27ae60; font-weight: 700; }
.modul-sk-body { font-size: 12px; color: var(--text-muted, #8899aa); }
.modul-sk-row  { margin-bottom: 3px; }
.modul-sk-row span { font-weight: 600; color: var(--text, #e0e8ff); margin-right: 4px; }
.modul-sk-timing { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.modul-sk-timing span { font-weight: 400 !important; color: var(--text-muted, #8899aa); }
.modul-sk-timing strong { color: var(--text, #e0e8ff); }
.modul-sk-ki { margin-top: 5px; padding: 4px 8px; border-radius: 4px; background: rgba(231,76,60,.12); color: #e74c3c; font-size: 11px; }

/* ── Schritt-Detailpanel ── */
.sk-detail-panel {
  background: var(--panel-bg, #1a1f2e); border: 1px solid var(--border, #2a3050);
  border-top: 3px solid var(--accent, #2a7fff); border-radius: 0 0 10px 10px;
  margin-top: 0; padding: 0; animation: sk-dp-in .18s ease;
}
@keyframes sk-dp-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.sk-dp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border, #2a3050);
  background: rgba(42,127,255,.06);
}
.sk-dp-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-dp-nr    { font-size: 12px; font-weight: 700; color: var(--text-muted, #8899aa); font-family: monospace; }
.sk-dp-name  { font-size: 15px; font-weight: 700; color: var(--text, #e0e8ff); }
.sk-dp-close { background: none; border: none; color: var(--text-muted, #8899aa); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.sk-dp-close:hover { background: rgba(255,255,255,.08); color: var(--text, #e0e8ff); }
.sk-dp-body  { padding: 14px; }
.sk-dp-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.sk-dp-section-wide { grid-column: 1 / -1; }
.sk-dp-section { background: rgba(255,255,255,.03); border-radius: 6px; padding: 8px 10px; }
.sk-dp-section-title { font-size: 10px; font-weight: 700; color: var(--text-muted, #8899aa); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.sk-dp-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; margin: 0; }
.sk-dp-dl dt { color: var(--text-muted, #8899aa); white-space: nowrap; }
.sk-dp-dl dd { color: var(--text, #e0e8ff); font-weight: 600; margin: 0; }
.sk-io-row  { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-io-chip { font-size: 11px; padding: 2px 7px; border-radius: 4px; font-family: monospace; }
.sk-io-e    { background: rgba(39,174,96,.18); color: #27ae60; border: 1px solid rgba(39,174,96,.3); }
.sk-io-a    { background: rgba(231,76,60,.18); color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }
.sk-io-m    { background: rgba(155,89,182,.18); color: #bb8ddd; border: 1px solid rgba(155,89,182,.3); }
.sk-io-s    { background: rgba(52,152,219,.18); color: #5dade2; border: 1px solid rgba(52,152,219,.3); }
.sk-dp-actions {
  display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px;
  border-top: 1px solid var(--border, #2a3050);
}
.sk-dp-btn {
  padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--accent, #2a7fff); color: #fff; font-size: 12px; font-weight: 600;
  transition: opacity .15s;
}
.sk-dp-btn:hover { opacity: .85; }
.sk-dp-btn-secondary {
  background: rgba(255,255,255,.08); color: var(--text, #e0e8ff);
}
.gfc-info-warn { background: rgba(230,126,34,.12); color: #e67e22; }

/* ── Diagnose Check-Karten ── */
.dq-check-grid {
  display: flex; flex-direction: column; gap: 5px;
}
.dq-check-karte {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 6px; border-left: 3px solid transparent;
}
.dq-check-ok   { background: rgba(39,174,96,.08);  border-left-color: #27ae60; }
.dq-check-warn { background: rgba(230,126,34,.10); border-left-color: #e67e22; }
.dq-check-err  { background: rgba(231,76,60,.10);  border-left-color: #e74c3c; }
.dq-check-icon {
  font-size: 12px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: 1px;
}
.dq-check-ok   .dq-check-icon { background: rgba(39,174,96,.2);  color: #27ae60; }
.dq-check-warn .dq-check-icon { background: rgba(230,126,34,.2); color: #e67e22; }
.dq-check-err  .dq-check-icon { background: rgba(231,76,60,.2);  color: #e74c3c; }
.dq-check-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dq-check-kat  { font-size: 9px; font-weight: 700; color: var(--text-muted, #8899aa); text-transform: uppercase; letter-spacing: .05em; }
.dq-check-name { font-size: 12px; font-weight: 600; color: var(--text, #e0e8ff); }
.dq-check-detail { font-size: 11px; color: var(--text-muted, #8899aa); }

/* ── KI-Diagnose Summary Bar ──────────────────────────────────────── */
.ki-sb-bar { padding: 12px 16px; margin-bottom: 12px; }
.ki-sb-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ki-sb-title { font-size: .82rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .07em; }
.ki-sb-kpis  { display: flex; gap: 8px; flex-wrap: wrap; }
.ki-sb-kpi   { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 6px; background: var(--panel-bg); min-width: 90px; }
.ki-sb-kval  { font-size: .95rem; font-weight: 700; line-height: 1.1; }
.ki-sb-kval-sm { font-size: .72rem; font-weight: 600; text-align: center; }
.ki-sb-klbl  { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ki-sb-ok    { background: rgba(39,174,96,.12);  color: #4ade80; }
.ki-sb-warn  { background: rgba(230,126,34,.12); color: #fbbf24; }
.ki-sb-err   { background: rgba(231,76,60,.14);  color: #f87171; }
.ki-sb-info  { background: rgba(100,160,255,.12); color: #93c5fd; }

/* ── KI 3-column Layout ───────────────────────────────────────────── */
.ki3-layout {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 10px;
  margin-bottom: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .ki3-layout { grid-template-columns: 1fr; }
}
.ki3-left {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 60vh; overflow-y: auto; padding-right: 4px;
}
.ki3-left-title {
  font-size: .65rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; padding: 0 2px 4px;
  border-bottom: 1px solid var(--border-color); margin-bottom: 2px;
}
.ki3-center {
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 14px; min-height: 200px;
}
.ki3-right {
  background: var(--panel-bg); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 12px 14px; min-height: 200px;
}
.ki3-leer { font-size: .8rem; color: var(--text-muted); padding: 16px; text-align: center; }

/* ── Left-panel hint cards ───────────────────────────────────────── */
.ki3-hc {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.ki3-hc:hover         { border-color: var(--accent); }
.ki3-hc-sel           { border-color: var(--accent) !important; background: rgba(100,160,255,.08) !important; }
.ki3-hc-err  { background: rgba(231,76,60,.08); border-left: 3px solid #e74c3c; }
.ki3-hc-warn { background: rgba(230,126,34,.08); border-left: 3px solid #e67e22; }
.ki3-hc-info { background: rgba(100,160,255,.08); border-left: 3px solid #64a0ff; }
.ki3-hc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.ki3-hc-komp { font-size: .75rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.ki3-hc-r    { font-size: .68rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.ki3-hc-r-err  { background: rgba(231,76,60,.2);  color: #f87171; }
.ki3-hc-r-warn { background: rgba(230,126,34,.2); color: #fbbf24; }
.ki3-hc-r-info { background: rgba(100,160,255,.2); color: #93c5fd; }
.ki3-hc-stat { font-size: .65rem; color: var(--text-muted); margin-bottom: 3px; }
.ki3-hc-stat em { font-style: normal; color: var(--text-soft); }
.ki3-hc-desc { font-size: .67rem; color: var(--text-soft); line-height: 1.3; }
.ki3-hc-time { font-size: .6rem; color: var(--text-muted); margin-top: 3px; }

/* ── Center: detail panel ────────────────────────────────────────── */
.ki3-detail-hdr {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 12px;
}
.ki3-detail-komp { font-size: .9rem; font-weight: 700; color: var(--text); }
.ki3-detail-info { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.ki3-id-code     { font-family: monospace; font-size: .68rem; background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px; }
.ki3-badge       { font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; }
.ki3-badge-err   { background: rgba(231,76,60,.2); color: #f87171; }
.ki3-badge-warn  { background: rgba(230,126,34,.2); color: #fbbf24; }
.ki3-badge-ok    { background: rgba(39,174,96,.15); color: #4ade80; }

.ki3-sensor-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ki3-sc {
  display: flex; flex-direction: column; align-items: center; padding: 8px 10px;
  border-radius: 6px; min-width: 80px; text-align: center;
}
.ki3-sc-ok   { background: rgba(39,174,96,.08);  border: 1px solid rgba(39,174,96,.2); }
.ki3-sc-warn { background: rgba(230,126,34,.10); border: 1px solid rgba(230,126,34,.3); }
.ki3-sc-err  { background: rgba(231,76,60,.10);  border: 1px solid rgba(231,76,60,.3); }
.ki3-sc-val  { font-size: .9rem; font-weight: 700; line-height: 1.1; }
.ki3-sc-val small { font-size: .55rem; font-weight: 400; color: var(--text-muted); margin-left: 1px; }
.ki3-sc-lbl  { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ki3-sc-soll { font-size: .58rem; color: var(--text-muted); }
.ki3-sc-abw  { font-size: .62rem; color: var(--text-soft); }
.ki3-abw-warn { color: #fbbf24; font-weight: 600; }

.ki3-sec-title { font-size: .65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
.ki3-list    { margin: 0; padding: 0 0 0 14px; }
.ki3-list li { font-size: .74rem; color: var(--text-soft); line-height: 1.45; margin-bottom: 2px; }
.ki3-muster-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ki3-muster-chip { font-size: .65rem; background: rgba(100,160,255,.12); color: #93c5fd; padding: 2px 7px; border-radius: 10px; }
.ki3-trend-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: .72rem; }
.ki3-trend-lbl { color: var(--text-muted); }
.ki3-trend-val { color: var(--text-soft); font-weight: 600; }
.ki3-dq-row  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); }
.ki3-dq-item { display: flex; flex-direction: column; gap: 1px; }
.ki3-dq-lbl  { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ki3-dq-val  { font-size: .72rem; font-weight: 600; color: var(--text-soft); }
.ki3-sps-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ki3-sps-code { font-size: .65rem; font-family: monospace; background: var(--bg-secondary); padding: 2px 7px; border-radius: 3px; }

/* ── Right: path panel ───────────────────────────────────────────── */
.ki3-path-sec  { margin-bottom: 12px; }
.ki3-path-title {
  font-size: .65rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px;
}
.ki3-pt-prio   { color: #fbbf24; }
.ki3-list-ol   { margin: 0; padding: 0 0 0 16px; }
.ki3-list-ol li { font-size: .73rem; color: var(--text-soft); line-height: 1.45; margin-bottom: 3px; }
.ki3-empf-box  { background: rgba(100,160,255,.06); border-left: 2px solid #64a0ff; padding: 6px 10px; border-radius: 0 5px 5px 0; }
.ki3-empf-text { margin: 0; font-size: .74rem; color: #93c5fd; line-height: 1.4; }
.ki3-links     { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ki3-link-btn  {
  font-size: .65rem; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-soft); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ki3-link-btn:hover { border-color: var(--accent); background: rgba(100,160,255,.1); color: var(--accent); }

/* ── Alarmseite — kompakte Diagnosekarten (alc-*) ────────────────── */
.alc-summary-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.alc-sum-chip    { font-size: .7rem; padding: 3px 10px; border-radius: 10px; background: var(--panel-bg); border: 1px solid var(--border-color); }
.alc-sum-err  { background: rgba(231,76,60,.15); border-color: rgba(231,76,60,.4); color: #f87171; }
.alc-sum-warn { background: rgba(230,126,34,.12); border-color: rgba(230,126,34,.35); color: #fbbf24; }
.alc-sum-ok   { background: rgba(39,174,96,.12); border-color: rgba(39,174,96,.3); color: #4ade80; }
.alc-sum-quit { background: rgba(148,163,184,.1); border-color: var(--border-color); color: var(--text-muted); }
.alc-sum-linie{ background: rgba(100,160,255,.12); border-color: rgba(100,160,255,.3); color: #93c5fd; }

.alc-linie-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; border-radius: 6px; margin-bottom: 10px;
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.25);
}
.alc-lb-title { font-size: .7rem; font-weight: 700; color: #f87171; }
.alc-lb-item  { font-size: .68rem; background: rgba(231,76,60,.15); color: #fca5a5; padding: 2px 8px; border-radius: 4px; }

.alc-toolbar      { margin-bottom: 12px; }
.alc-filter-row   { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.alc-filter-btn   { font-size: .68rem; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-soft); cursor: pointer; transition: all .15s; }
.alc-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.alc-filter-btn.aktiv { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.alc-filter-btn small { opacity: .75; margin-left: 2px; }
.alc-sort-row  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.alc-sort-lbl  { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.alc-sort-btn  { font-size: .65rem; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-soft); cursor: pointer; }
.alc-sort-btn.aktiv { border-color: var(--accent); color: var(--accent); background: rgba(100,160,255,.1); }

.alc-karten { display: flex; flex-direction: column; gap: 6px; }
.alc-leer   { padding: 20px; text-align: center; font-size: .82rem; color: var(--text-muted); background: var(--panel-bg); border-radius: 8px; border: 1px solid var(--border-color); }

.alc-karte {
  background: var(--panel-bg); border-radius: 7px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  transition: border-color .2s;
}
.alc-karte:hover { border-color: var(--accent); border-left-color: inherit; }
.alc-s-err  { border-left-color: #e74c3c !important; }
.alc-s-warn { border-left-color: #e67e22 !important; }
.alc-s-ok   { border-left-color: #27ae60 !important; }
.alc-quittiert { opacity: .6; }

.alc-body { padding: 10px 14px; }
.alc-head  { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.alc-komp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alc-komp  { font-size: .82rem; font-weight: 700; color: var(--text); }
.alc-station-chip { font-size: .62rem; background: var(--bg-secondary); color: var(--text-muted); padding: 2px 7px; border-radius: 10px; }
.alc-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
.alc-risiko { font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.alc-r-err  { background: rgba(231,76,60,.2); color: #f87171; }
.alc-r-warn { background: rgba(230,126,34,.2); color: #fbbf24; }
.alc-r-ok   { background: rgba(39,174,96,.15); color: #4ade80; }
.alc-prio   { font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: rgba(148,163,184,.15); color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.alc-fc     { font-family: monospace; font-size: .6rem; background: var(--bg-secondary); color: var(--text-soft); padding: 1px 5px; border-radius: 3px; }
.alc-quit-badge { font-size: .6rem; background: rgba(148,163,184,.12); color: var(--text-muted); padding: 2px 6px; border-radius: 3px; }

.alc-meldung { font-size: .76rem; color: var(--text-soft); line-height: 1.4; margin-bottom: 5px; }
.alc-meta    { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .65rem; color: var(--text-muted); margin-bottom: 8px; }
.alc-typ     { font-weight: 600; color: var(--text-soft); }
.alc-sep     { color: var(--border-color); }
.alc-esk     { color: #fbbf24; font-weight: 600; }

.alc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.alc-btn     { font-size: .65rem; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-soft); cursor: pointer; transition: all .15s; }
.alc-btn:hover { border-color: var(--accent); color: var(--accent); }
.alc-btn-quit { border-color: rgba(230,126,34,.4); color: #fbbf24; background: rgba(230,126,34,.08); }
.alc-btn-quit:hover { background: rgba(230,126,34,.15); }
.alc-btn-save { border-color: rgba(39,174,96,.3); color: #4ade80; }
.alc-kommentar { font-size: .65rem; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text); width: 160px; }

/* ── Signalweg Header / Filter ────────────────────────────────── */
.sw-header-card { margin-bottom: 10px; padding: 14px 16px 10px; }
.sw-header-row  { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.sw-header-row h2 { font-size: .9rem; font-weight: 700; color: var(--text); }
.sw-header-sub  { font-size: .72rem; color: var(--text-muted); margin: 2px 0 0; font-family: monospace; letter-spacing: .02em; }

.sw-header-kpis { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.sw-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 6px; min-width: 64px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.sw-kpi-val { font-size: .95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sw-kpi-lbl { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.sw-kpi-ok   { background: rgba(39,174,96,.1);  border-color: rgba(39,174,96,.25); }
.sw-kpi-ok .sw-kpi-val  { color: #4ade80; }
.sw-kpi-warn { background: rgba(230,126,34,.1); border-color: rgba(230,126,34,.3); }
.sw-kpi-warn .sw-kpi-val { color: #fbbf24; }
.sw-kpi-err  { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.3); }
.sw-kpi-err .sw-kpi-val  { color: #f87171; }

.sw-filter-block { display: flex; flex-direction: column; gap: 6px; }
.sw-filter-row   { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sw-filter-lbl   { font-size: .65rem; color: var(--text-muted); min-width: 46px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sw-filter-btn {
  font-size: .65rem; padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-soft); cursor: pointer; transition: all .15s;
}
.sw-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.sw-filter-btn.aktiv { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.sw-section-header { padding: 6px 0 4px; margin-top: 8px; }
.sw-section-header h3 { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }

.sw-s-fehler  { border-left: 3px solid #e74c3c; }
.sw-s-warnung { border-left: 3px solid #e67e22; }
.sw-s-ok      { border-left: 3px solid rgba(39,174,96,.4); }

/* ── Fehlerbaum Kritischste Komponente + Prinzip-Note ─────────── */
.fb-kritisch-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border-radius: 5px; margin: 8px 0 6px;
  font-size: .75rem; border: 1px solid var(--border-color);
}
.fb-kb-err  { background: rgba(231,76,60,.1);  border-color: rgba(231,76,60,.35); }
.fb-kb-warn { background: rgba(230,126,34,.1); border-color: rgba(230,126,34,.35); }
.fb-kb-ok   { background: rgba(39,174,96,.08); border-color: rgba(39,174,96,.3); }
.fb-kb-lbl  { font-weight: 600; color: var(--text-soft); }
.fb-kb-id   { font-family: monospace; font-size: .78rem; font-weight: 700; color: var(--text); }
.fb-kb-risiko  { font-size: .7rem; color: var(--text-muted); }
.fb-kb-status  { font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: rgba(231,76,60,.15); color: #f87171; }
.fb-kb-station { font-size: .65rem; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 7px; border-radius: 10px; }

.fb-prinzip-note {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 4px; margin-top: 6px;
  background: rgba(100,160,255,.07); border: 1px solid rgba(100,160,255,.2);
  font-size: .73rem; color: var(--text-soft);
}
.fb-prinzip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(100,160,255,.2); color: var(--accent);
  font-size: .65rem; font-weight: 700;
}

/* ── Übersicht Nächste Handlung action buttons ────────────────── */
.ueb-nh-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ueb-nh-btn {
  font-size: .65rem; padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-soft); cursor: pointer; transition: all .15s;
}
.ueb-nh-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(100,160,255,.08); }
.ueb-nh-btn-prio { border-color: rgba(231,76,60,.4); color: #f87171; background: rgba(231,76,60,.07); }
.ueb-nh-btn-prio:hover { background: rgba(231,76,60,.14); }

/* Step icon letters (E/M/S/H) — replaces emoji */
.fb-tree-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0;
  background: rgba(100,160,255,.15); color: var(--accent);
  font-size: .65rem; font-weight: 700; font-family: monospace;
}

/* ── Fehlerbaum 8-Diagnosepfade Grid ──────────────────────────── */
.fb8-pfade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0 6px;
}
@media (max-width: 900px) { .fb8-pfade-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .fb8-pfade-grid { grid-template-columns: 1fr; } }

.fb8-pfad {
  padding: 8px 10px; border-radius: 5px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s;
}
.fb8-pfad-ok   { border-left: 3px solid rgba(39,174,96,.5);  }
.fb8-pfad-warn { border-left: 3px solid rgba(230,126,34,.6); background: rgba(230,126,34,.04); }
.fb8-pfad-err  { border-left: 3px solid rgba(231,76,60,.6);  background: rgba(231,76,60,.05); }

.fb8-pfad-top {
  display: flex; align-items: center; gap: 6px;
}
.fb8-pfad-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  font-size: .65rem; font-weight: 700; font-family: monospace;
}
.fb8-icon-ok   { background: rgba(39,174,96,.15);  color: #4ade80; }
.fb8-icon-warn { background: rgba(230,126,34,.15); color: #fb923c; }
.fb8-icon-err  { background: rgba(231,76,60,.15);  color: #f87171; }

.fb8-pfad-name {
  font-size: .72rem; font-weight: 600; color: var(--text-soft);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb8-pfad-badge {
  font-size: .62rem; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; flex-shrink: 0;
}
.fb8-badge-ok   { background: rgba(39,174,96,.12);  color: #4ade80; }
.fb8-badge-warn { background: rgba(230,126,34,.15); color: #fb923c; }
.fb8-badge-err  { background: rgba(231,76,60,.12);  color: #f87171; }

.fb8-pfad-detail {
  font-size: .68rem; color: var(--text-muted); line-height: 1.35;
}
.fb8-pfad-count {
  font-size: .63rem; color: var(--text-muted);
  padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.04);
  width: fit-content;
}

/* ── SPS I/O Filter-Leiste ────────────────────────────────────── */
.sps-filter-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 6px; margin-bottom: 6px;
}
.sps-fb-lbl {
  font-size: .7rem; color: var(--text-muted); font-weight: 600;
  margin-right: 4px; white-space: nowrap;
}
.sps-fb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-soft); font-size: .7rem; cursor: pointer;
  transition: all .15s;
}
.sps-fb-btn:hover { border-color: var(--accent); color: var(--accent); }
.sps-fb-btn.sps-fb-aktiv { border-color: var(--accent); color: var(--accent); background: rgba(100,160,255,.1); }
.sps-fb-btn.sps-fb-aktiv.sps-fb-err  { border-color: #f87171; color: #f87171; background: rgba(231,76,60,.1); }
.sps-fb-btn.sps-fb-aktiv.sps-fb-warn { border-color: #fb923c; color: #fb923c; background: rgba(230,126,34,.1); }
.sps-fb-btn.sps-fb-aktiv.sps-fb-ok   { border-color: #4ade80; color: #4ade80; background: rgba(39,174,96,.1); }
.sps-fb-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px;
  font-size: .62rem; font-weight: 700;
  background: rgba(255,255,255,.07); color: var(--text-muted);
}

/* ── SPS Signal card extra fields ────────────────────────────── */
.io-meta-zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
  font-size: .67rem; color: var(--text-muted); margin-top: 4px;
}
.io-meta-lbl { color: var(--text-muted); }
.io-meta-val {
  font-family: monospace; font-size: .67rem; color: var(--text-soft);
  background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 3px;
}
.io-funktion {
  font-size: .7rem; color: var(--text-soft); margin-top: 4px;
  font-style: italic;
}
.io-diaghinw {
  font-size: .68rem; color: var(--text-muted); margin-top: 3px;
  padding: 3px 6px; border-radius: 3px; background: rgba(100,160,255,.05);
  border-left: 2px solid rgba(100,160,255,.25);
}
.io-schl-chip {
  font-size: .62rem; padding: 2px 6px; border-radius: 3px;
  background: rgba(255,255,255,.05); color: var(--text-muted);
  font-family: monospace;
}
.io-signal-reserve {
  opacity: .55;
  border-left-color: rgba(255,255,255,.12) !important;
}
.io-signal-reserve .io-signal-kopf strong { color: var(--text-muted); }

/* ── Alarm KPI bar ────────────────────────────────────────────── */
.alc-kpi-bar {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin-bottom: 10px;
}
@media (max-width: 700px) { .alc-kpi-bar { grid-template-columns: repeat(3,1fr); } }

.alc-kpi {
  padding: 8px 10px; border-radius: 5px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  display: flex; flex-direction: column; gap: 2px;
}
.alc-kpi-ok   { border-left: 3px solid rgba(39,174,96,.5); }
.alc-kpi-warn { border-left: 3px solid rgba(230,126,34,.6); background: rgba(230,126,34,.04); }
.alc-kpi-err  { border-left: 3px solid rgba(231,76,60,.6);  background: rgba(231,76,60,.05); }
.alc-kpi-quit { border-left: 3px solid rgba(100,160,255,.4); }

.alc-kpi-val {
  font-size: 1.2rem; font-weight: 700; color: var(--text);
  line-height: 1;
}
.alc-kpi-val-sm { font-size: .72rem; line-height: 1.3; }
.alc-kpi-lbl { font-size: .62rem; color: var(--text-muted); }

/* ── Alarm card extra fields ──────────────────────────────────── */
.alc-handlung, .alc-ursache {
  font-size: .7rem; margin-top: 4px; padding: 4px 8px;
  border-radius: 3px; line-height: 1.35;
}
.alc-handlung {
  background: rgba(100,160,255,.06); border-left: 2px solid rgba(100,160,255,.3);
  color: var(--text-soft);
}
.alc-ursache {
  background: rgba(230,126,34,.06); border-left: 2px solid rgba(230,126,34,.3);
  color: var(--text-muted);
}
.alc-handlung-lbl, .alc-ursache-lbl {
  font-weight: 600; font-size: .65rem; margin-right: 4px;
}
.alc-prio-krit { color: #f87171 !important; border-color: rgba(231,76,60,.4) !important; }
.alc-prio-warn { color: #fb923c !important; }

/* ── Einstellungen Diagnose — Backend-Bereiche ────────────────── */
.diag-bereiche-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  margin-top: 10px;
}
@media (max-width: 700px) { .diag-bereiche-grid { grid-template-columns: repeat(2,1fr); } }

.diag-bereich {
  padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border-color);
  background: var(--bg-secondary); font-size: .67rem;
  display: flex; flex-direction: column; gap: 2px;
}
.diag-b-ok   { border-left: 3px solid rgba(39,174,96,.5); }
.diag-b-warn { border-left: 3px solid rgba(230,126,34,.5); }
.diag-b-err  { border-left: 3px solid rgba(231,76,60,.5); }

.diag-b-name   { font-weight: 600; color: var(--text-soft); }
.diag-b-status { font-size: .6rem; color: var(--text-muted); }
.diag-b-cnt  { font-size: .6rem; color: var(--text-muted); }
.diag-b-w    { font-size: .6rem; color: #fb923c; }
.diag-b-f    { font-size: .6rem; color: #f87171; }

.diag-issue {
  font-size: .68rem; padding: 3px 8px; margin: 2px 0;
  border-radius: 3px; display: flex; gap: 6px; align-items: flex-start;
}
.diag-issue-err  { background: rgba(231,76,60,.07);  border-left: 2px solid rgba(231,76,60,.4); }
.diag-issue-warn { background: rgba(230,126,34,.07); border-left: 2px solid rgba(230,126,34,.4); }
.diag-issue-info { background: rgba(100,160,255,.05); border-left: 2px solid rgba(100,160,255,.3); }
.diag-issue-typ  { font-weight: 700; flex-shrink: 0; font-size: .6rem; color: var(--text-muted); }

/* ── Signalweg swKarte + Detail Panel ─────────────────────────────── */
.sw-sum-name  { font-weight: 600; flex: 1; }
.sw-sum-meta  { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sw-meta-chip { font-size: .58rem; padding: 2px 6px; border-radius: 10px; background: rgba(100,160,255,.12); color: var(--text-soft); }
.sw-meta-mess { background: rgba(100,220,180,.1); color: #4ecdc4; }

.sw-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 16px; margin: 8px 0 10px; padding: 10px 12px;
  background: rgba(255,255,255,.03); border-radius: 6px;
}
.sw-meta-grid > div { display: flex; flex-direction: column; gap: 1px; }
.sw-mg-lbl { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sw-mg-val  { font-size: .72rem; color: var(--text-soft); }
.sw-mg-val code { font-size: .7rem; background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px; }

.sw-card-actions { margin-top: 8px; display: flex; gap: 8px; }
.sw-dp-btn {
  padding: 4px 12px; font-size: .7rem; border-radius: 5px; cursor: pointer; border: 1px solid rgba(100,160,255,.3);
  background: rgba(100,160,255,.08); color: var(--text-soft);
  transition: background .15s;
}
.sw-dp-btn:hover { background: rgba(100,160,255,.18); }

.sw-detail-panel {
  margin: 6px 0 12px; border-left: 3px solid var(--accent-blue);
  animation: fadeSlideIn .2s ease;
}
.sw-dp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 6px; gap: 8px;
}
.sw-dp-title { font-weight: 700; font-size: .85rem; }
.sw-dp-badge { font-size: .6rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.sw-dp-ok   { background: rgba(39,174,96,.15);  color: #27ae60; }
.sw-dp-warn { background: rgba(230,126,34,.15); color: #e67e22; }
.sw-dp-err  { background: rgba(231,76,60,.15);  color: #e74c3c; }
.sw-dp-close {
  background: none; border: none; cursor: pointer; font-size: .9rem;
  color: var(--text-muted); padding: 2px 6px; border-radius: 4px;
}
.sw-dp-close:hover { color: var(--text-soft); background: rgba(255,255,255,.07); }
.sw-dp-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.sw-dp-section { display: flex; flex-direction: column; gap: 4px; }
.sw-dp-section strong { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sw-dp-row { display: flex; gap: 8px; font-size: .75rem; align-items: baseline; }
.sw-dp-lbl { color: var(--text-muted); flex: 0 0 110px; font-size: .68rem; }
.sw-dp-pruef { margin: 4px 0 0 16px; padding: 0; font-size: .74rem; color: var(--text-soft); line-height: 1.6; }
.sw-dp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sw-fc-chip { font-size: .65rem; padding: 1px 6px; border-radius: 3px; background: rgba(231,76,60,.1); color: #f87171; }

/* ── SPS I/O KPI breakdown row ───────────────────────────────────── */
.sps-io-kpi-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px;
}
.sps-io-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px; border-radius: 6px; min-width: 56px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.sps-io-kpi-val { font-size: .95rem; font-weight: 700; color: var(--text-soft); }
.sps-io-kpi-lbl { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sps-io-kpi-ok   { border-color: rgba(39,174,96,.3);  background: rgba(39,174,96,.06); }
.sps-io-kpi-ok .sps-io-kpi-val { color: #27ae60; }
.sps-io-kpi-err  { border-color: rgba(231,76,60,.35); background: rgba(231,76,60,.07); }
.sps-io-kpi-err .sps-io-kpi-val { color: #e74c3c; }
.sps-io-kpi-warn { border-color: rgba(230,126,34,.35); background: rgba(230,126,34,.07); }
.sps-io-kpi-warn .sps-io-kpi-val { color: #e67e22; }
.sps-io-kpi-res  { border-color: rgba(160,160,160,.2); }
.sps-io-kpi-res .sps-io-kpi-val { color: var(--text-muted); }

/* ── Historie Backend Status Bar ─────────────────────────────────── */
.hist-backend-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 10px; margin-bottom: 8px; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  font-size: .72rem; color: var(--text-soft);
}
.hist-bb-chip {
  padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: .62rem;
}
.hist-bb-ok   { background: rgba(39,174,96,.15);  color: #27ae60; }
.hist-bb-warn { background: rgba(230,126,34,.15); color: #e67e22; }
.hist-bb-item strong { color: var(--text-main); }
.hist-bb-sep  { color: var(--text-muted); }
.hist-bb-muted { color: var(--text-muted); font-size: .67rem; }

/* ── Schrittkette step count chip ───────────────────────────────── */
.sk-count-chip {
  font-size: .65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: rgba(100,160,255,.12); color: var(--accent-blue);
  vertical-align: middle; margin-left: 6px;
}
.sk-count-warn { background: rgba(230,126,34,.12); color: #e67e22; }

/* ══════════════════════════════════════════════════════════════════
   DESIGN-SYSTEM — Darstellung Tab + Vorschau + Hintergrundvarianten
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────── */
.darst-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .darst-layout { grid-template-columns: 1fr; }
  .darst-right { order: -1; }
}
.darst-left  { display: flex; flex-direction: column; gap: 12px; }
.darst-right { position: sticky; top: 72px; }
.darst-card  { padding: 14px 16px; }
.darst-desc  { font-size: .72rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.darst-no-data { font-size: .72rem; color: var(--text-muted); font-style: italic; padding: 6px 0; }

/* ── Design-Profil Grid ──────────────────────────────────────────── */
.darst-profil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.darst-profil-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left;
  border: 1.5px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  transition: border-color .15s, background .15s;
  position: relative;
}
.darst-profil-btn:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); }
.darst-profil-btn.aktiv { border-color: var(--dp-accent, var(--accent)); background: rgba(255,255,255,.08); }
.darst-profil-swatch {
  display: flex; gap: 3px; height: 18px; width: 100%;
}
.darst-profil-bg { flex: 3; border-radius: 3px; }
.darst-profil-ac { flex: 1; border-radius: 3px; }
.darst-profil-ok { flex: 1; border-radius: 3px; }
.darst-profil-er { flex: 1; border-radius: 3px; }
.darst-profil-name {
  font-size: .68rem; font-weight: 600; color: var(--text-soft); line-height: 1.3;
}
.darst-profil-aktiv-chip {
  position: absolute; top: 5px; right: 7px;
  font-size: .55rem; font-weight: 700; padding: 1px 5px;
  border-radius: 8px; background: var(--dp-accent, var(--accent));
  color: #000; text-transform: uppercase; letter-spacing: .05em;
}

/* ── Akzentfarben Grid ───────────────────────────────────────────── */
.darst-akzent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}
.darst-akzent-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s;
}
.darst-akzent-btn:hover { border-color: rgba(255,255,255,.2); }
.darst-akzent-btn.aktiv { border-color: var(--ak-color); background: rgba(255,255,255,.07); }
.darst-akzent-swatch {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.15);
}
.darst-akzent-name { font-size: .66rem; color: var(--text-soft); }

/* ── Hintergrundvarianten Liste ──────────────────────────────────── */
.darst-bg-list { display: flex; flex-direction: column; gap: 5px; }
.darst-bg-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; text-align: left;
  border: 1.5px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s;
  position: relative;
}
.darst-bg-btn:hover { border-color: rgba(255,255,255,.18); }
.darst-bg-btn.aktiv { border-color: var(--accent); background: rgba(255,255,255,.06); }
.darst-bg-preview {
  width: 36px; height: 28px; border-radius: 4px; flex-shrink: 0;
  background: #0f1117;
}
.darst-bg-clean_dark       { background: #0f1117; }
.darst-bg-subtle_grid      { background: repeating-linear-gradient(0deg,#0f1117 0px,#0f1117 19px,#1a1f2e 20px),repeating-linear-gradient(90deg,#0f1117 0px,#0f1117 19px,#1a1f2e 20px); }
.darst-bg-factory_floor_grid { background: repeating-linear-gradient(0deg,#0c0e15 0px,#0c0e15 29px,#141827 30px),repeating-linear-gradient(90deg,#0c0e15 0px,#0c0e15 29px,#141827 30px); }
.darst-bg-carbon_texture   { background: repeating-linear-gradient(45deg,#080a0f 0px,#080a0f 2px,#0d1017 2px,#0d1017 4px); }
.darst-bg-blueprint_lines  { background: #07090f; background-image: linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px); background-size: 20px 20px; }
.darst-bg-soft_gradient    { background: linear-gradient(160deg,#0f1117 0%,#111623 100%); }
.darst-bg-control_room_glow { background: radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.06) 0%,#0a0c14 60%); }
.darst-bg-info  { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.darst-bg-name  { font-size: .72rem; font-weight: 600; color: var(--text-soft); }
.darst-bg-desc  { font-size: .62rem; color: var(--text-muted); }
.darst-aktiv-chip {
  font-size: .55rem; padding: 1px 6px; border-radius: 8px;
  background: var(--accent); color: #000; font-weight: 700; letter-spacing: .04em;
  flex-shrink: 0;
}

/* ── Aktiv-Info Footer ───────────────────────────────────────────── */
.darst-aktiv-info {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.darst-ai-row {
  display: flex; justify-content: space-between;
  font-size: .67rem; padding: 2px 0;
  color: var(--text-muted);
}
.darst-ai-row strong { color: var(--text-soft); }

/* ── Design-Vorschau Widget ──────────────────────────────────────── */
.darst-vorschau-card { background: rgba(255,255,255,.04); }
.dv-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; margin-bottom: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.dv-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dv-dot-ok  { background: var(--accent, #35d66b); box-shadow: 0 0 6px var(--accent, #35d66b); }
.dv-dot-warn { background: #f59e0b; }
.dv-dot-err  { background: #ef4444; }
.dv-title { font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.dv-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.dv-chip {
  font-size: .6rem; padding: 1px 6px; border-radius: 8px;
  background: rgba(255,255,255,.07); color: var(--text-muted);
}
.dv-chip-ok { background: rgba(39,174,96,.15); color: #27ae60; }
.dv-kpis {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 8px;
}
.dv-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 4px; border-radius: 5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.dv-kpi-ok { border-color: rgba(39,174,96,.3); }
.dv-kpi-warn { border-color: rgba(245,158,11,.3); }
.dv-kpi-val { font-size: .85rem; font-weight: 700; color: var(--accent, #35d66b); }
.dv-kpi-lbl { font-size: .55rem; color: var(--text-muted); text-transform: uppercase; }
.dv-kpi-warn .dv-kpi-val { color: #f59e0b; }
.dv-panel {
  border-radius: 6px; overflow: hidden; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.07);
}
.dv-panel-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; font-size: .68rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dv-panel-row:last-child { border-bottom: none; }
.dv-led { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dv-led-ok   { background: var(--accent, #35d66b); }
.dv-led-warn { background: #f59e0b; }
.dv-led-err  { background: #ef4444; }
.dv-panel-lbl { flex: 1; color: var(--text-soft); font-weight: 600; }
.dv-panel-val { color: var(--text-muted); font-size: .62rem; }
.dv-panel-badge {
  font-size: .58rem; padding: 1px 5px; border-radius: 4px;
}
.dv-badge-ok   { background: rgba(39,174,96,.15);  color: #27ae60; }
.dv-badge-warn { background: rgba(245,158,11,.15); color: #f59e0b; }
.dv-badge-err  { background: rgba(239,68,68,.15);  color: #ef4444; }
.dv-alarm {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 5px; margin-bottom: 8px;
  background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25);
}
.dv-alarm-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f59e0b;
  box-shadow: 0 0 4px #f59e0b; flex-shrink: 0;
}
.dv-alarm-text { font-size: .67rem; color: #fbbf24; }
.dv-btn {
  width: 100%; padding: 6px; border-radius: 5px; font-size: .7rem;
  font-weight: 600; cursor: pointer;
  background: var(--accent, #35d66b); color: #000;
  border: none; transition: opacity .15s;
}
.dv-btn:hover { opacity: .85; }

/* ── Hintergrundvarianten auf body/html ─────────────────────────── */
[data-bg-variant="subtle_grid"]         { background: repeating-linear-gradient(0deg,var(--bg) 0px,var(--bg) 19px,color-mix(in srgb,var(--bg) 85%,#fff) 20px),repeating-linear-gradient(90deg,var(--bg) 0px,var(--bg) 19px,color-mix(in srgb,var(--bg) 85%,#fff) 20px) !important; }
[data-bg-variant="factory_floor_grid"]  { background: repeating-linear-gradient(0deg,var(--bg) 0px,var(--bg) 29px,color-mix(in srgb,var(--bg) 80%,#fff) 30px),repeating-linear-gradient(90deg,var(--bg) 0px,var(--bg) 29px,color-mix(in srgb,var(--bg) 80%,#fff) 30px) !important; }
[data-bg-variant="carbon_texture"]      { background: repeating-linear-gradient(45deg,color-mix(in srgb,var(--bg) 95%,#000) 0px,color-mix(in srgb,var(--bg) 95%,#000) 2px,var(--bg) 2px,var(--bg) 4px) !important; }
[data-bg-variant="blueprint_lines"]     { background-image: linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px) !important; background-size: 20px 20px !important; }
[data-bg-variant="soft_gradient"]       { background: linear-gradient(160deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 85%,#1e293b) 100%) !important; }
[data-bg-variant="control_room_glow"]   { background: radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.05) 0%,var(--bg) 60%) !important; }

/* ── CSS-Variablen aus Design-Profil (--pml-* → native Vars) ─────── */
:root {
  --pml-bg: var(--bg, #0f1117);
  --pml-panel: var(--panel, #161b27);
  --pml-border: var(--border, rgba(255,255,255,.08));
  --pml-accent: var(--accent, #35d66b);
  --pml-ok: var(--gruen, #27ae60);
  --pml-warn: var(--warn, #e67e22);
  --pml-error: var(--error, #e74c3c);
}

/* ── SPS I/O Status Row (sps_io_status) ─────────────────────────── */
.sps-io-status-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.sps-io-st-chip { padding:3px 8px; border-radius:4px; font-size:11px; font-weight:500; }
.sps-io-st-ok   { background:rgba(39,174,96,.15); color:var(--gruen,#27ae60); border:1px solid rgba(39,174,96,.3); }
.sps-io-st-warn { background:rgba(230,126,34,.15); color:var(--warn,#e67e22); border:1px solid rgba(230,126,34,.3); }

/* ── Fehlerbaum: wahrscheinlichste Ursache Banner ───────────────── */
.fb-ursache-banner { padding:5px 10px; background:rgba(59,130,246,.08); border-left:3px solid #3b82f6; border-radius:0 4px 4px 0; font-size:11.5px; margin-top:6px; color:var(--text-sec,rgba(255,255,255,.7)); }
.fb-ursache-banner strong { color:var(--text,#fff); }
.fb-sc-info { background:rgba(59,130,246,.15); color:#7dd3fc; border:1px solid rgba(59,130,246,.3); }

/* ── KI Normalbetrieb: Backend-Meldung ──────────────────────────── */
.nb-backend-meldung { margin:6px 0 4px; padding:5px 10px; background:rgba(39,174,96,.08); border-left:3px solid var(--gruen,#27ae60); border-radius:0 4px 4px 0; font-size:11.5px; color:var(--text-sec,rgba(255,255,255,.7)); }

/* ── Produktion: Status-Bar Header ─────────────────────────────────*/
.prod-status-bar { margin-bottom:10px; padding:10px 14px 8px; }
.prod-status-bar .sps-io-kpi-row { flex-wrap:wrap; }

/* ── Daten-Tab: Bereiche Details ────────────────────────────────── */
.sys-bereiche-details { margin-bottom:4px; }
.sys-bereiche-details summary { list-style:none; }
.sys-bereiche-details summary::-webkit-details-marker { display:none; }

/* ── Override: diagnose-block h3 soll kein uppercase sein ── */
.panel .diagnose-block h3 { text-transform: none; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════
   LOGIN OVERLAY
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   LOGIN — SENTRIXCM PREMIUM HMI
══════════════════════════════════════════════════════════════════ */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  background: #080c14;
  overflow: auto;
}
.login-overlay[hidden] { display: none !important; }

/* ── Hintergrund: Raster ── */
.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,197,94,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

/* ── Hintergrund: Glows ── */
.login-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.login-bg-glow--1 {
  width: 480px; height: 480px;
  left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(34,197,94,.07) 0%, transparent 70%);
}
.login-bg-glow--2 {
  width: 560px; height: 560px;
  right: -100px; bottom: -120px;
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%);
}

/* ── Hintergrund: Schaltplan-Linien ── */
.login-bg-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  stroke: rgba(34,197,94,.12);
  stroke-width: 1;
  fill: rgba(34,197,94,.15);
}

/* ── Hintergrund: Status-Chips ── */
.login-bg-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-bg-chip {
  position: absolute;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.12);
  white-space: nowrap;
}
.login-bg-chip--grn { border-color: rgba(34,197,94,.1); color: rgba(34,197,94,.2); background: rgba(34,197,94,.02); }
.login-bg-chip--blu { border-color: rgba(59,130,246,.1); color: rgba(59,130,246,.2); background: rgba(59,130,246,.02); }
.login-bg-chip:nth-child(1)  { top: 12%; left:  6%; }
.login-bg-chip:nth-child(2)  { top:  7%; right: 10%; }
.login-bg-chip:nth-child(3)  { bottom: 18%; left: 5%; }
.login-bg-chip:nth-child(4)  { bottom: 10%; right: 8%; }
.login-bg-chip:nth-child(5)  { top: 52%; left:  3%; }

/* ── Haupt-Container ── */
.login-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  gap: 0;
}

/* ── Linkes Produktvorschau-Panel ── */
.login-brand {
  flex: 1 1 0;
  max-width: 500px;
  padding: 60px 48px 60px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.login-brand-headline {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  line-height: 1.38;
  margin: 0;
  letter-spacing: -.02em;
}
.login-brand-sub {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  line-height: 1.65;
  margin: 0;
}
.login-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}
.login-feat-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--akzent, #22c55e);
}
/* ── System-KPIs ── */
.login-kpis {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.login-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.login-kpi-val {
  font-size: 22px;
  font-weight: 600;
  color: var(--akzent, #22c55e);
  line-height: 1;
  letter-spacing: -.02em;
}
.login-kpi-lbl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

.login-roles-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.login-roles-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.login-roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.login-role-chip {
  padding: 3px 9px;
  font-size: 10.5px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.03);
}

/* ── Trennlinie (vertikal) ── */
.login-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
  pointer-events: none;
}

/* ── Rechte Login-Card ── */
.login-karte {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 400px;
  margin: 40px 64px 40px 48px;
  padding: 40px 36px 32px;
  background: rgba(11, 16, 26, 0.92);
  border: 1px solid rgba(34,197,94,.14);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 24px 64px rgba(0,0,0,.7),
    0 0 40px rgba(34,197,94,.04);
  backdrop-filter: blur(20px);
}

.login-karte::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.5) 40%, rgba(34,197,94,.5) 60%, transparent);
  border-radius: 0 0 2px 2px;
}

/* ── Logo-Bereich (in Card) ── */
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.login-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(34,197,94,.3);
}
.login-logo-mark--sm {
  width: 42px;
  height: 42px;
  font-size: 13px;
  border-radius: 10px;
}
.login-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.login-produkt {
  font-size: 21px;
  font-weight: 700;
  color: var(--text, #e5edf6);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.login-version {
  font-size: 10px;
  color: var(--akzent, #22c55e);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .85;
}
.login-untertitel {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  margin: 0 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 20px;
  line-height: 1.5;
}

/* ── Formular ── */
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.login-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: var(--text, #e5edf6);
  font-size: 14px;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-sizing: border-box;
}
.login-input:focus {
  border-color: rgba(34,197,94,.5);
  background: rgba(34,197,94,.04);
  box-shadow: 0 0 0 3px rgba(34,197,94,.08);
}
.login-input::placeholder { color: rgba(255,255,255,.18); }

/* ── Passwort-Zeile mit Toggle ── */
.login-pass-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input--pass { padding-right: 40px; }
.login-pass-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.3);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.login-pass-toggle:hover { color: rgba(255,255,255,.65); }

/* ── Fehler ── */
.login-error {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #f87171;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1.4;
}
.login-error::before { content: "⚠"; font-size: 12px; flex-shrink: 0; }
.login-error[hidden] { display: none; }
.login-error--info { color: #fbbf24; background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2); }
.login-error--info::before { content: "ℹ"; }
#userRolleChip[hidden] { display: none !important; }

/* ── Anmelden-Button ── */
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .01em;
  transition: opacity .18s, box-shadow .18s, transform .12s;
  box-shadow: 0 4px 16px rgba(34,197,94,.25);
}
.login-btn:hover {
  opacity: .92;
  box-shadow: 0 6px 24px rgba(34,197,94,.35);
  transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); opacity: 1; }
.login-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.login-btn:focus-visible { outline: 2px solid rgba(34,197,94,.7); outline-offset: 2px; }

@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-spin { animation: loginSpin .75s linear infinite; flex-shrink: 0; }

/* ── Chip-Float-Animation ── */
@keyframes loginChipFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
.login-bg-chip:nth-child(1) { animation: loginChipFloat 7s ease-in-out infinite; }
.login-bg-chip:nth-child(2) { animation: loginChipFloat 9s ease-in-out infinite 1.5s; }
.login-bg-chip:nth-child(3) { animation: loginChipFloat 8s ease-in-out infinite 3s; }
.login-bg-chip:nth-child(4) { animation: loginChipFloat 10s ease-in-out infinite .8s; }
.login-bg-chip:nth-child(5) { animation: loginChipFloat 6.5s ease-in-out infinite 2s; }

/* ── Sicherheitshinweis ── */
.login-hinweis {
  margin-top: 18px;
  font-size: 10.5px;
  color: rgba(255,255,255,.22);
  line-height: 1.55;
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Footer (in Card) ── */
.login-footer {
  margin-top: 12px;
  font-size: 9.5px;
  color: rgba(255,255,255,.15);
  text-align: center;
  letter-spacing: .4px;
}

/* ── Responsive: Mobile ── */
@media (max-width: 860px) {
  .login-overlay { align-items: flex-start; }
  .login-container {
    flex-direction: column-reverse;
    align-items: center;
    padding: 28px 16px 40px;
    min-height: unset;
    gap: 24px;
  }
  .login-brand {
    max-width: 440px;
    padding: 0;
    gap: 14px;
    width: 100%;
  }
  .login-brand::after { display: none; }
  .login-brand-headline { font-size: 18px; }
  .login-brand-sub { display: none; }
  .login-features { display: none; }
  .login-kpis { gap: 16px; }
  .login-kpi-val { font-size: 18px; }
  .login-roles-info { display: none; }
  .login-karte {
    margin: 0;
    max-width: 440px;
    padding: 28px 24px 24px;
    width: 100%;
  }
  .login-bg-chip { display: none; }
}

/* ── Kein Scroll/Klick auf App wenn Login aktiv ── */
body.login-aktiv .app,
body.login-aktiv .sidebar { pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════
   AVATAR + USER DROPDOWN
═══════════════════════════════════════════════════════════════════ */
.user-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(148,163,184,.25);
  background: rgba(34,197,94,.12);
  color: var(--akzent, #22c55e);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  letter-spacing: .5px;
  padding: 0;
  line-height: 1;
}
.user-avatar:hover { border-color: var(--akzent, #22c55e); background: rgba(34,197,94,.18); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: var(--panel-bg, #161d2e);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 500;
  overflow: hidden;
}
.user-dropdown[hidden] { display: none; }

.user-dd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.user-dd-kuerzel {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  color: var(--akzent, #22c55e);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.user-dd-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-dd-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e5edf6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dd-rolle {
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,.4));
  white-space: nowrap;
}
.user-dd-body { padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.user-dd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.user-dd-lbl { font-size: 11px; color: var(--text-muted, rgba(255,255,255,.4)); }
.user-dd-val { font-size: 11px; color: var(--text-sec, rgba(255,255,255,.7)); font-weight: 500; }
.user-dd-rechttext {
  padding: 6px 14px 4px;
  font-size: 10px;
  color: rgba(255,255,255,.4);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}
.user-dd-hinweis {
  padding: 4px 14px 6px;
  font-size: 10px;
  color: rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin: 0;
}
.user-dd-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
}
.user-dd-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s;
}
.user-dd-btn:hover { opacity: .8; }
.user-dd-btn-sec {
  background: rgba(255,255,255,.06);
  color: var(--text-sec, rgba(255,255,255,.6));
  border-color: rgba(255,255,255,.1);
}
.user-dd-btn-pri {
  background: rgba(239,68,68,.12);
  color: #f87171;
  border-color: rgba(239,68,68,.2);
}

/* ─── Rollen-Chip im Header ──────────────────────────────────────── */
.user-rolle-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,.45));
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill, 99px);
}
.user-rolle-chip[hidden] { display: none; }

@media (max-width: 640px) {
  .kopfbereich {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .top-actions {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .user-rolle-chip {
    max-width: calc(100vw - 124px);
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── User-Status-Card (Einstellungen) ──────────────────────────── */
.user-status-card .user-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 4px;
}
.user-status-kuerzel {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  color: var(--akzent, #22c55e);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.user-status-info { display: flex; flex-direction: column; gap: 2px; }
.user-status-name { font-size: 15px; font-weight: 600; color: var(--text, #e5edf6); }
.user-status-rolle { font-size: 12px; color: var(--text-muted, rgba(255,255,255,.45)); }
.user-einst-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s;
}
.user-einst-btn:hover { opacity: .8; }
.user-einst-btn-sec {
  background: rgba(255,255,255,.06);
  color: var(--text-sec, rgba(255,255,255,.65));
  border-color: rgba(255,255,255,.1);
}
.user-einst-btn-pri {
  background: rgba(239,68,68,.1);
  color: #f87171;
  border-color: rgba(239,68,68,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION OUTER WRAPPERS — break out of info-grid auto-columns
═══════════════════════════════════════════════════════════════════ */
.ki-erkl-outer,
.fb-outer,
.sw-outer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   SIGNALWEG — 2-column list + persistent detail
═══════════════════════════════════════════════════════════════════ */
.sw-topbar { /* uses existing panel styles */ }
.sw-header-title { font-size: .92rem; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }

.sw-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
  align-items: start;
}
@media (max-width: 860px) { .sw-split { grid-template-columns: 1fr; } }

.sw-list-col {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 72vh;
}
.sw-list-section-hdr {
  padding: 5px 12px;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sw-list-section-hdr:first-child { border-top: none; }
.sw-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.035);
  gap: 8px;
  transition: background .1s;
  border-left: 2px solid transparent;
}
.sw-li:hover { background: rgba(255,255,255,.04); }
.sw-li-sel   { background: rgba(100,160,255,.07) !important; border-left-color: var(--accent); }
.sw-s-fehler  { border-left-color: rgba(231,76,60,.5); }
.sw-s-warnung { border-left-color: rgba(230,126,34,.5); }
.sw-li-body { flex: 1; min-width: 0; }
.sw-li-name { font-size: .72rem; font-weight: 600; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-li-sub  { font-size: .61rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sw-li-badge { flex-shrink: 0; font-size: .56rem !important; padding: 1px 5px !important; }

.sw-detail-col {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  min-height: 320px;
  max-height: 72vh;
  overflow-y: auto;
}
.sw-detail-placeholder {
  color: var(--text-muted);
  font-size: .8rem;
  padding: 32px 16px;
  text-align: center;
}
.sw-dp-fixed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.sw-dp-fixed-title { font-size: .88rem; font-weight: 700; color: var(--text); }
.sw-dp-fixed-sub   { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.sw-dp-badge { font-size: .63rem; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; font-weight: 700; }
.sw-dp-err  { background: rgba(231,76,60,.12);  color: #f87171; }
.sw-dp-warn { background: rgba(230,126,34,.12); color: #fbbf24; }
.sw-dp-ok   { background: rgba(39,174,96,.12);  color: #4ade80; }

/* Signal chain visualization */
.sw-chain-vis { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.sw-chain-node { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.sw-cn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; margin-top: 5px; }
.sw-cn-ok    .sw-cn-dot { background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,.4); }
.sw-cn-warn  .sw-cn-dot { background: #fbbf24; box-shadow: 0 0 4px rgba(251,191,36,.3); }
.sw-cn-error .sw-cn-dot { background: #f87171; box-shadow: 0 0 4px rgba(248,113,113,.4); }
.sw-cn-text { flex: 1; }
.sw-cn-name { font-size: .73rem; font-weight: 600; color: var(--text); display: block; }
.sw-cn-hint { font-size: .63rem; color: var(--text-muted); display: block; line-height: 1.3; }
.sw-chain-arrow { padding-left: 3px; color: var(--text-muted); font-size: .7rem; line-height: 1; margin: -1px 0; }

/* Detail grid */
.sw-dp-fixed-grid { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.sw-dp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .7rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sw-dp-row:last-child { border-bottom: none; }
.sw-dp-lbl { color: var(--text-muted); flex-shrink: 0; min-width: 110px; font-size: .65rem; text-transform: uppercase; letter-spacing: .03em; }
.sw-dp-row code { font-size: .65rem; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono, monospace); }
.sw-dp-section { margin-top: 10px; }
.sw-dp-section strong { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: block; margin-bottom: 4px; }
.sw-dp-pruef { margin: 4px 0 0 16px; padding: 0; font-size: .7rem; color: var(--text-soft); line-height: 1.5; }
.sw-dp-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.sw-dp-btn { padding: 5px 12px; font-size: .68rem; font-weight: 600; border-radius: 5px; border: 1px solid var(--border-color); background: rgba(255,255,255,.05); color: var(--text-soft); cursor: pointer; transition: background .1s, border-color .1s; }
.sw-dp-btn:hover { background: rgba(255,255,255,.1); border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   FEHLERBAUM — outer wrapper + station layout
═══════════════════════════════════════════════════════════════════ */
.fb-stations-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   KI-ERKLÄRUNG — full-width summary bar + layout fixes
═══════════════════════════════════════════════════════════════════ */
.ki-sb-bar {
  padding: 14px 16px;
  margin-bottom: 0;
}
.ki-sb-title { font-size: .78rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
.ki-sb-kpis  { display: flex; gap: 8px; flex-wrap: wrap; }
.ki-sb-kpi   {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 14px; border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  min-width: 80px;
}
.ki-sb-kval    { font-size: .88rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ki-sb-kval-sm { font-size: .72rem; }
.ki-sb-klbl    { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.ki-sb-ok   { background: rgba(39,174,96,.08);  border-color: rgba(39,174,96,.2);  }
.ki-sb-ok   .ki-sb-kval { color: #4ade80; }
.ki-sb-warn { background: rgba(230,126,34,.08); border-color: rgba(230,126,34,.2); }
.ki-sb-warn .ki-sb-kval { color: #fbbf24; }
.ki-sb-err  { background: rgba(231,76,60,.08);  border-color: rgba(231,76,60,.2);  }
.ki-sb-err  .ki-sb-kval { color: #f87171; }
.ki-sb-info { background: rgba(100,160,255,.08); border-color: rgba(100,160,255,.2); }
.ki-sb-info .ki-sb-kval { color: #93c5fd; }
.ki-sb-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ════════════════════════════════════════════════════════════════════
   ÜBERSICHT PREMIUM v2 — Hero Leitstand
   ════════════════════════════════════════════════════════════════════ */

/* Hero v2 */
#uebersichtBereich .ueb-hero-v2.panel { padding: 20px 24px; margin-bottom: 14px; display: block; gap: 0; }
.ueb-hero-v2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ueb-hero-v2-id { display: flex; align-items: center; gap: 14px; }
.ueb-hero-v2-orb { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.ueb-orb-gruen { background: var(--accent); box-shadow: 0 0 0 4px rgba(53,214,107,.15), 0 0 12px var(--accent); }
.ueb-orb-gelb  { background: #f59e0b;       box-shadow: 0 0 0 4px rgba(245,158,11,.15), 0 0 12px #f59e0b; }
.ueb-orb-rot   { background: #ef4444;       box-shadow: 0 0 0 4px rgba(239,68,68,.15),  0 0 12px #ef4444; }
@keyframes orbBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ueb-orb-blink { animation: orbBlink 1s ease-in-out infinite; }
.ueb-hero-v2-titel { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.ueb-hero-v2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ueb-hero-v2-kpis { display: flex; gap: 0; flex-wrap: wrap; }
.ueb-hero-v2-kpi { display: flex; flex-direction: column; align-items: center; padding: 6px 20px; border-left: 1px solid var(--border); min-width: 80px; }
.ueb-hero-v2-kpi:first-child { border-left: none; padding-left: 0; }
.ueb-hero-v2-val { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-main); }
.ueb-hero-v2-lbl { font-size: .72rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.ueb-hero-v2-sub { font-size: .68rem; color: var(--text-soft); opacity: .7; margin-top: 2px; }
.ueb-hero-v2-meta { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-soft); }
.ueb-hero-v2-meta strong { color: var(--text-main); }
.ueb-meta-ok   { color: var(--accent); font-weight: 600; }
.ueb-meta-gelb { color: #f59e0b; font-weight: 600; }
.ueb-meta-rot  { color: #ef4444; font-weight: 600; }

/* NH Feature Card */
#uebersichtBereich .ueb-nh-feature-card.panel { display: block; gap: 0; padding: 16px 20px; margin-bottom: 14px; border-left: 4px solid var(--accent); }
.ueb-nh-feature-card.ueb-nh-fc-rot   { border-left-color: #ef4444; background: rgba(239,68,68,.03); }
.ueb-nh-feature-card.ueb-nh-fc-gelb  { border-left-color: #f59e0b; background: rgba(245,158,11,.03); }
.ueb-nh-feature-card.ueb-nh-fc-gruen { border-left-color: var(--accent); }
.ueb-nh-fc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ueb-nh-fc-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ueb-nh-fc-icon-rot   { background: rgba(239,68,68,.15); color: #ef4444; }
.ueb-nh-fc-icon-gelb  { background: rgba(245,158,11,.15); color: #f59e0b; }
.ueb-nh-fc-icon-gruen { background: rgba(53,214,107,.12); color: var(--accent); }
.ueb-nh-fc-info { display: flex; flex-direction: column; gap: 4px; }
.ueb-nh-fc-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.ueb-nh-fc-prio { font-size: .72rem; }
.ueb-nh-fc-comp { margin-left: auto; text-align: right; }
.ueb-nh-fc-comp-label { display: block; font-size: .66rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.ueb-nh-fc-comp strong { font-size: .85rem; color: var(--text-main); }
.ueb-nh-fc-text { font-size: .9rem; color: var(--text-main); margin: 0 0 12px; line-height: 1.5; }
.ueb-nh-fc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ueb-nh-fc-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-soft); font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.ueb-nh-fc-btn:hover { background: rgba(53,214,107,.1); color: var(--accent); border-color: rgba(53,214,107,.3); }
.ueb-nh-fc-btn-krit { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.3); }
.ueb-nh-fc-btn-krit:hover { background: rgba(239,68,68,.18); }

/* Diagnose Snapshot Grid */
.ueb-diag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .ueb-diag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ueb-diag-grid { grid-template-columns: 1fr; } }
#uebersichtBereich .ueb-diag-card.panel { display: flex !important; align-items: flex-start; gap: 11px; padding: 12px 14px; }
.ueb-diag-icon-wrap { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ueb-diag-iw-gruen { background: rgba(53,214,107,.12); color: var(--accent); }
.ueb-diag-iw-gelb  { background: rgba(245,158,11,.12); color: #f59e0b; }
.ueb-diag-iw-rot   { background: rgba(239,68,68,.12); color: #ef4444; }
.ueb-diag-body { flex: 1; min-width: 0; }
.ueb-diag-titel { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin-bottom: 3px; }
.ueb-diag-val { font-size: 1.3rem; font-weight: 800; color: var(--text-main); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ueb-diag-sub { font-size: .72rem; font-weight: 500; color: var(--text-soft); }
.ueb-diag-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.ueb-dpill { font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.ueb-dpill-ok   { background: rgba(53,214,107,.12); color: var(--accent); }
.ueb-dpill-gelb { background: rgba(245,158,11,.15); color: #f59e0b; }
.ueb-dpill-rot  { background: rgba(239,68,68,.15); color: #ef4444; }
.ueb-diag-progress { height: 4px; background: var(--bg-hover); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.ueb-diag-progress-fill { height: 100%; border-radius: 2px; transition: width .4s; }

/* 2-col KPI grid */
.ueb-kpi-grid-2col { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 700px) { .ueb-kpi-grid-2col { grid-template-columns: 1fr !important; } }

/* Kosten haupt row */
.ueb-kosten-haupt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.ueb-kosten-lvl { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.ueb-kosten-lvl-rot   { background: rgba(239,68,68,.12); color: #ef4444; }
.ueb-kosten-lvl-gelb  { background: rgba(245,158,11,.12); color: #f59e0b; }
.ueb-kosten-lvl-ok    { background: rgba(53,214,107,.1); color: var(--accent); }

/* Panel overrides for new cards */
#uebersichtBereich .ueb-analyse-card.panel { padding: 14px 16px; display: block !important; gap: 0; }

/* ════════════════════════════════════════════════════════════════════
   DARSTELLUNG — Background Variant CSS patterns
   ════════════════════════════════════════════════════════════════════ */
[data-bg-variant="grid_subtle"]  body { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px; }
[data-bg-variant="dot_matrix"]   body { background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1px); background-size: 24px 24px; }
[data-bg-variant="scanline"]      body { background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(148,163,184,.04) 3px, rgba(148,163,184,.04) 4px); }
[data-bg-variant="blueprint"]     body { background-image: linear-gradient(rgba(56,189,248,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.07) 1px, transparent 1px), linear-gradient(rgba(56,189,248,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.03) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }

/* darst-bg preview swatches */
.darst-bg-preview { width: 36px; height: 28px; border-radius: 5px; border: 1px solid var(--border); flex-shrink: 0; overflow: hidden; display: block; }
.darst-bg-clean_dark   { background: #070b0f; }
.darst-bg-grid_subtle  { background: #070b0f; background-image: linear-gradient(rgba(148,163,184,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.18) 1px, transparent 1px); background-size: 8px 8px; }
.darst-bg-dot_matrix   { background: #070b0f; background-image: radial-gradient(circle, rgba(148,163,184,.4) 1px, transparent 1px); background-size: 6px 6px; }
.darst-bg-carbon_fiber { background: repeating-linear-gradient(45deg,#111 0,#111 2px,#1a1a1a 2px,#1a1a1a 4px); }
.darst-bg-noise_soft   { background: #0a0d12; }
.darst-bg-scanline     { background: #070b0f; background-image: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(148,163,184,.1) 2px,rgba(148,163,184,.1) 3px); }
.darst-bg-blueprint    { background: #050b14; background-image: linear-gradient(rgba(56,189,248,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.18) 1px, transparent 1px); background-size: 8px 8px; }
.darst-bg-clean_light  { background: #f0f4f8; }

/* ═══════════════════════════════════════════════════════════════════
   NACHTAUFTRAG POLISH — Login · Fehlerbaum · Signalweg · KI-Erklärung
═══════════════════════════════════════════════════════════════════ */

/* ── Login: premium card depth ─────────────────────────────────── */
.login-karte {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 32px 80px rgba(0,0,0,.82),
    0 0 60px rgba(34,197,94,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  background: rgba(9, 14, 24, 0.94);
}

/* ── Login: KPI-Modul — glassmorphism premium ───────────────────── */
.login-kpi {
  background: linear-gradient(160deg, rgba(34,197,94,.06) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(34,197,94,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  border-radius: 10px;
}
.login-kpi-val { font-size: 24px; font-weight: 700; }

/* ── Login: Input — stärkerer Fokus-Glow ───────────────────────── */
.login-input:focus {
  border-color: rgba(34,197,94,.65);
  background: rgba(34,197,94,.05);
  box-shadow: 0 0 0 3px rgba(34,197,94,.14), 0 1px 0 rgba(34,197,94,.2);
}

/* ── Login: Button — stärkerer Hover-Glow ──────────────────────── */
.login-btn {
  box-shadow: 0 4px 20px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing: .02em;
  font-size: 14.5px;
}
.login-btn:hover {
  box-shadow: 0 8px 32px rgba(34,197,94,.42), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-1px);
  opacity: 1;
}

/* ── Login: Floating Chips — dezent (GROSSAUFTRAG 1.3.1) ─────────── */
.login-bg-chip {
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.015);
  color: rgba(255,255,255,.1);
  opacity: .7;
}
.login-bg-chip--grn { border-color: rgba(34,197,94,.1); color: rgba(34,197,94,.18); background: rgba(34,197,94,.02); }
.login-bg-chip--blu { border-color: rgba(59,130,246,.1); color: rgba(59,130,246,.18); background: rgba(59,130,246,.02); }

/* ── Login: Trust-Badge ────────────────────────────────────────── */
.login-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding: 7px 12px;
  font-size: 10.5px;
  color: rgba(34,197,94,.6);
  background: rgba(34,197,94,.04);
  border: 1px solid rgba(34,197,94,.1);
  border-radius: 20px;
  line-height: 1;
  letter-spacing: .02em;
}
.login-trust-badge svg { flex-shrink: 0; opacity: .8; }

/* ── Login: HTTPS Hinweis ──────────────────────────────────────── */
.login-https-hint {
  font-size: 10px; color: rgba(255,255,255,.3); text-align: center;
  margin: 8px 0 0; line-height: 1.55; padding: 0 4px;
}

/* ── Login: Marke — Headline etwas kräftiger ──────────────────── */
.login-brand-headline { font-size: 27px; font-weight: 500; letter-spacing: -.025em; }
.login-brand-sub { font-size: 13px; color: rgba(255,255,255,.42); }

/* ── Login: Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .login-trust-badge { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FEHLERBAUM 8-PFADE — Premium-Card-Grid
═══════════════════════════════════════════════════════════════════ */
.fb8-pfade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 8px;
}
@media (max-width: 960px) { .fb8-pfade-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .fb8-pfade-grid { grid-template-columns: 1fr; } }

.fb8-pfad {
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 110px;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  cursor: default;
}
.fb8-pfad:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.fb8-pfad-ok   {
  border-left: 4px solid rgba(74,222,128,.45);
}
.fb8-pfad-warn {
  border-left: 4px solid rgba(251,191,36,.6);
  background: linear-gradient(160deg, rgba(251,191,36,.04) 0%, var(--bg-card) 60%);
}
.fb8-pfad-err  {
  border-left: 4px solid rgba(248,113,113,.65);
  background: linear-gradient(160deg, rgba(248,113,113,.05) 0%, var(--bg-card) 60%);
}
.fb8-pfad-warn:hover { box-shadow: 0 6px 20px rgba(251,191,36,.1); }
.fb8-pfad-err:hover  { box-shadow: 0 6px 20px rgba(248,113,113,.1); }

.fb8-pfad-top {
  display: flex; align-items: center; gap: 8px;
}
.fb8-pfad-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  font-size: .72rem; font-weight: 800; font-family: monospace;
  letter-spacing: 0;
}
.fb8-icon-ok   { background: rgba(74,222,128,.14);  color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.12); }
.fb8-icon-warn { background: rgba(251,191,36,.14);  color: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.12); }
.fb8-icon-err  { background: rgba(248,113,113,.14); color: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.12); }

.fb8-pfad-name {
  font-size: .8rem; font-weight: 700; color: var(--text-main, var(--text));
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb8-pfad-badge {
  font-size: .6rem; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; flex-shrink: 0; letter-spacing: .04em;
}
.fb8-badge-ok   { background: rgba(74,222,128,.12);  color: #4ade80; }
.fb8-badge-warn { background: rgba(251,191,36,.12);  color: #fbbf24; }
.fb8-badge-err  { background: rgba(248,113,113,.12); color: #f87171; }

.fb8-pfad-detail {
  font-size: .7rem; color: var(--text-soft, var(--text-muted)); line-height: 1.4;
  flex: 1;
}
.fb8-pfad-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .62rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  width: fit-content;
  background: rgba(255,255,255,.05);
  color: var(--text-soft, var(--text-muted));
}
.fb8-pfad-err .fb8-pfad-count  { background: rgba(248,113,113,.1); color: #f87171; }
.fb8-pfad-warn .fb8-pfad-count { background: rgba(251,191,36,.1);  color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════════
   SIGNALWEG — List-Item polish & Header
═══════════════════════════════════════════════════════════════════ */
.sw-split {
  grid-template-columns: 300px 1fr;
}
.sw-li {
  padding: 8px 12px;
  min-height: 52px;
}
.sw-li-name { font-size: .74rem; }
.sw-li-sub  { font-size: .62rem; margin-top: 1px; }

.sw-list-section-hdr {
  font-size: .6rem;
  padding: 6px 12px;
  color: var(--accent, #35d66b);
  background: rgba(255,255,255,.025);
  letter-spacing: .1em;
}

.sw-s-fehler  .sw-li-name { color: #fca5a5; }
.sw-s-warnung .sw-li-name { color: #fcd34d; }

.sw-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sw-header-sub {
  font-size: .68rem; color: var(--text-muted); margin: 2px 0 0;
  font-family: var(--font-mono, monospace); letter-spacing: .01em;
}
.sw-header-kpis { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-kpi {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  min-width: 56px;
}

/* ═══════════════════════════════════════════════════════════════════
   KI-ERKLÄRUNG — 3-Col layout breathing room
═══════════════════════════════════════════════════════════════════ */
.ki3-layout {
  grid-template-columns: 240px 1fr 270px;
  gap: 12px;
}
.ki3-left { max-height: 65vh; }
.ki3-hc {
  padding: 10px 12px;
  min-height: 68px;
}
.ki-sb-kpi {
  padding: 8px 14px;
  min-width: 96px;
  border: 1px solid rgba(255,255,255,.06);
}
.ki-sb-kval { font-size: 1.0rem; }

/* ── Responsive: tablet ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ki3-layout { grid-template-columns: 220px 1fr; }
  .ki3-right { display: none; }
}
@media (max-width: 760px) {
  .ki3-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sw-split { grid-template-columns: 1fr; }
  .fb8-pfade-grid { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   QUALITÄTSRUNDE 1.3 — Übersicht + Darstellung
═══════════════════════════════════════════════════════════════════ */

/* ── Übersicht: Produktionslinie Header ─────────────────────────── */
.ueb-linie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ueb-linie-meta-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ueb-linie-meta-chip {
  font-size: .65rem; font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
}
.ueb-linie-mc-gruen { border-color: rgba(74,222,128,.25); color: #4ade80; background: rgba(74,222,128,.06); }
.ueb-linie-mc-gelb  { border-color: rgba(251,191,36,.25); color: #fbbf24; background: rgba(251,191,36,.06); }
.ueb-linie-mc-rot   { border-color: rgba(248,113,113,.25); color: #f87171; background: rgba(248,113,113,.06); }

/* ── Übersicht: Schnellaktionen Premium ─────────────────────────── */
.ueb-schnell-card { grid-column: 1 / -1; }
.ueb-schnell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
@media (max-width: 900px) { .ueb-schnell-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .ueb-schnell-grid { grid-template-columns: 1fr 1fr; } }

.ueb-schnell-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  text-align: left;
  line-height: 1.2;
}
.ueb-schnell-btn svg { flex-shrink: 0; opacity: .7; }
.ueb-schnell-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--accent);
  color: var(--accent);
}
.ueb-schnell-btn:hover svg { opacity: 1; }
.ueb-schnell-btn-alert {
  border-color: rgba(248,113,113,.3);
  background: rgba(248,113,113,.05);
  color: #f87171;
}
.ueb-schnell-btn-alert:hover {
  border-color: #f87171;
  background: rgba(248,113,113,.12);
  color: #f87171;
}
.ueb-sa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* ── Übersicht: Analyse Grid span fix ───────────────────────────── */
.ueb-analyse-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .ueb-analyse-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ueb-analyse-grid { grid-template-columns: 1fr; } }

/* ── Darstellung: Profil-Cards größer ───────────────────────────── */
.darst-profil-btn {
  padding: 10px 12px;
  min-height: 72px;
}
.darst-profil-swatch {
  height: 24px;
}
.darst-profil-name {
  font-size: .72rem;
  color: var(--text-soft);
}

/* ── Darstellung: Akzent-Swatches größer ────────────────────────── */
.darst-akzent-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.3);
}
.darst-akzent-btn {
  padding: 7px 10px;
}
.darst-akzent-name { font-size: .69rem; }

/* ── Darstellung: Hintergrundvariante Preview ────────────────────── */
.darst-bg-preview {
  width: 44px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Design Vorschau: aktives Profil in Titel ───────────────────── */
.darst-vorschau-card .sys-card-title { font-size: .75rem; }

/* ── Einstellungen: Tab-Leiste verbessern ───────────────────────── */
.einst-tab-btn {
  font-size: .7rem;
  padding: 6px 12px;
  border-radius: 5px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI-POLISH 1.4 — Übersicht / Einstellungen / Login / KI / Fehlerbaum
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Übersicht: Hero — stärker, akzentbetont ──────────────────────────── */
#uebersichtBereich .ueb-hero.panel {
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg,rgba(53,214,107,.045) 0%,transparent 55%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.ueb-hero-v2-orb { width:22px; height:22px; }
.ueb-orb-gruen { background:#4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.14), 0 0 14px rgba(74,222,128,.45); }
.ueb-orb-gelb  { background:#fbbf24; box-shadow: 0 0 0 5px rgba(251,191,36,.14), 0 0 14px rgba(251,191,36,.45); }
.ueb-orb-rot   { background:#f87171; box-shadow: 0 0 0 5px rgba(248,113,113,.14), 0 0 14px rgba(248,113,113,.45); }
.ueb-hero-v2-val  { font-size: 2.3rem; letter-spacing:-.02em; }
.ueb-hero-v2-lbl  { font-size: .71rem; margin-top: 5px; }
.ueb-hero-v2-kpi  { padding: 8px 22px; }
.ueb-hero-v2-kpi:first-child { padding-left: 0; }
.ueb-hero-v2-titel { font-size: 1.2rem; letter-spacing:-.01em; }
.ueb-hero-v2-meta  { padding-top: 14px; font-size: .82rem; gap: 20px; }

/* ── Übersicht: Produktionslinie-Panel schlanker ──────────────────────── */
.ueb-linie-titel { margin-bottom: 0; font-size: .72rem; flex-shrink: 0; }
.ueb-linie-header { gap: 8px; margin-bottom: 8px; }
.ueb-linie-panel { padding: 12px 14px; }

/* ── Übersicht: Nächste Handlung prominenter ──────────────────────────── */
.ueb-nh-feature-card { border-left-width: 4px; padding: 16px 20px; }
.ueb-nh-fc-text { font-size: .95rem; line-height: 1.65; color: var(--text-main); margin-bottom: 14px; }
.ueb-nh-fc-icon { width:36px; height:36px; border-radius:9px; }
.ueb-nh-fc-label { font-size: .71rem; letter-spacing:.08em; }
.ueb-nh-fc-comp strong { font-size:.9rem; }
.ueb-nh-fc-btn { padding: 7px 16px; font-size: .8rem; }

/* ── Übersicht: Diagnose-Snapshot größer ──────────────────────────────── */
#uebersichtBereich .ueb-diag-card.panel { padding: 14px 16px; }
.ueb-diag-val  { font-size: 1.55rem; }
.ueb-diag-icon-wrap { width:36px; height:36px; border-radius:9px; }
.ueb-diag-titel { font-size: .69rem; margin-bottom:4px; }
.ueb-diag-progress { height: 5px; border-radius: 3px; margin-top: 8px; }

/* ── Übersicht: Quick-Stats (neue 4-Kacheln) ─────────────────────────── */
.ueb-qstat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .ueb-qstat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ueb-qstat-grid { grid-template-columns: 1fr; } }
.ueb-qstat-card {
  padding: 14px 16px;
}
.ueb-qstat-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.ueb-qstat-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 5px;
}
.ueb-qstat-unit {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-left: 3px;
}
.ueb-qstat-sub {
  font-size: .69rem;
  color: var(--text-soft);
  line-height: 1.4;
}

/* ── Übersicht: Analyse Karten schöner ────────────────────────────────── */
.ueb-analyse-card { padding: 16px 18px; }
.ueb-analyse-titel { font-size: .7rem; letter-spacing:.05em; margin-bottom:10px; }
.ueb-analyse-haupt { font-size: 1.3rem; font-weight: 800; margin-bottom: 9px; }

/* ── Übersicht: Schnellaktionen — Icon-über-Text Layout ──────────────── */
.ueb-schnell-card { padding: 16px 18px; }
.ueb-schnell-grid { gap: 8px; }
.ueb-schnell-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 13px 8px;
  min-height: 62px;
  text-align: center;
  border-radius: 8px;
  font-size: .71rem;
  border-color: rgba(255,255,255,.1);
}
.ueb-schnell-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ueb-schnell-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* ── Einstellungen/Darstellung: Profil-Buttons premium ──────────────── */
.darst-profil-btn {
  padding: 12px 14px;
  min-height: 84px;
  border-radius: 9px;
  gap: 9px;
  background: var(--dp-bg, rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.06);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.darst-profil-btn:hover {
  border-color: rgba(255,255,255,.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.darst-profil-btn.aktiv {
  box-shadow: 0 0 0 2px var(--dp-accent, var(--accent)), 0 4px 20px rgba(0,0,0,.45);
  border-color: var(--dp-accent, var(--accent));
}
.darst-profil-swatch {
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.08);
}
.darst-profil-bg { flex: 5; }
.darst-profil-ac { flex: 2; }
.darst-profil-ok { flex: 1; }
.darst-profil-er { flex: 1; }
.darst-profil-name {
  font-size: .73rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.darst-profil-aktiv-chip {
  font-size: .62rem;
  padding: 2px 7px;
  background: var(--dp-accent, var(--accent));
  color: #000;
  font-weight: 700;
  border-radius: 5px;
}

/* ── Einstellungen/Darstellung: Akzent-Swatches premium ─────────────── */
.darst-akzent-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.4);
}
.darst-akzent-btn.aktiv .darst-akzent-swatch {
  box-shadow: 0 0 0 3px var(--ak-color), 0 0 10px rgba(0,0,0,.3);
}
.darst-akzent-btn { gap: 8px; padding: 8px 10px; }
.darst-akzent-name { font-size: .69rem; font-weight: 500; color: var(--text-soft); }
.darst-akzent-grid { gap: 7px; }

/* ── Einstellungen/Darstellung: Hintergrund-Varianten ───────────────── */
.darst-bg-btn { padding: 9px 12px; border-radius: 8px; gap: 12px; }
.darst-bg-preview { width: 52px; height: 36px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
.darst-bg-name { font-size: .74rem; font-weight: 600; color: var(--text-main); }
.darst-bg-desc { font-size: .64rem; }
.darst-bg-btn.aktiv { border-color: var(--accent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px var(--accent); }

/* ── Einstellungen/Darstellung: Live-Vorschau-Karte premium ─────────── */
.darst-vorschau-card {
  border: 1px solid rgba(53,214,107,.18);
  background: rgba(53,214,107,.025);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
}
.dv-hero {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dv-title { font-size: .82rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.dv-chips { display:flex; gap:5px; flex-wrap:wrap; }
.dv-chip {
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,.1);
}
.dv-chip-ok { background: rgba(74,222,128,.1); color: #4ade80; border-color: rgba(74,222,128,.25); }
.dv-kpis { gap: 6px; margin-bottom: 10px; }
.dv-kpi {
  flex: 1; padding: 7px 8px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.dv-kpi-val { font-size: .92rem; font-weight: 700; }
.dv-kpi-lbl { font-size: .56rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.dv-panel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  font-size: .68rem;
}
.dv-panel-lbl { flex:1; color: var(--text-main); font-weight: 600; }
.dv-panel-val { color: var(--text-soft); font-size: .64rem; }
.dv-alarm {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; margin: 8px 0;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.2); border-radius: 6px;
}
.dv-alarm-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.dv-alarm-text { font-size: .67rem; color: #f87171; }
.dv-btn {
  width: 100%; padding: 7px 12px; margin-top: 2px;
  background: var(--accent); color: #000; border: none; border-radius: 6px;
  font-size: .72rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.dv-btn:hover { opacity: .88; }

/* ── Login: Felder und Card polish ───────────────────────────────────── */
.login-karte {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06),
              0 32px 80px rgba(0,0,0,.88),
              0 0 60px rgba(53,214,107,.06),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.login-karte input[type=text],
.login-karte input[type=password] {
  border-radius: 8px;
  font-size: .92rem;
  height: 44px;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  transition: border-color .15s, box-shadow .15s;
}
.login-karte input:focus {
  border-color: rgba(53,214,107,.5);
  box-shadow: 0 0 0 3px rgba(53,214,107,.12);
  outline: none;
}
.login-btn {
  height: 46px;
  font-size: .92rem;
  letter-spacing: .01em;
  border-radius: 9px;
}
.login-trust-badge {
  font-size: .7rem;
  padding: 6px 14px;
  border-radius: 20px;
  gap: 6px;
}

/* ── KI-Erklärung: Stats-Zeile kompakter ─────────────────────────────── */
.ki3-layout { grid-template-columns: 220px 1fr 260px; }
@media (max-width: 1100px) { .ki3-layout { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ki3-layout { grid-template-columns: 1fr; } }
.ki3-hc { min-height: 72px; }

/* ── Fehlerbaum: Pfad-Kacheln nicht zu schmal ────────────────────────── */
.fb8-pfad { min-height: 105px; }
.fb8-pfad-icon { width: 28px; height: 28px; }

/* ── Signalweg: Detail-Panel sauber ──────────────────────────────────── */
.sw-li { min-height: 50px; }
.sw-detail-panel { min-width: 0; }

/* ── Darstellung Live-Preview: NH card mini ─────────────────────────── */
.dv-nh-card {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  border-left: 3px solid #f59e0b; background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.15); border-left-width: 3px;
}
.dv-nh-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.dv-nh-icon { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; }
.dv-nh-icon-gelb { background: rgba(245,158,11,.15); color: #f59e0b; }
.dv-nh-icon-rot   { background: rgba(239,68,68,.15);  color: #ef4444; }
.dv-nh-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dv-nh-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.dv-nh-prio  { font-size: .62rem; font-weight: 600; }
.dv-nh-prio-gelb { color: #f59e0b; }
.dv-nh-prio-rot  { color: #ef4444; }
.dv-nh-comp  { font-size: .72rem; font-weight: 700; color: var(--text-main); }
.dv-nh-text  { font-size: .72rem; color: var(--text-soft); line-height: 1.4; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   GROSSAUFTRAG 1.3.1 — Übersicht Enhancements
   ══════════════════════════════════════════════════════════════════════ */

/* NH detail fields */
.ueb-nh-fc-detail {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  background: rgba(255,255,255,.025); border-radius: 7px;
  padding: 8px 12px; margin-bottom: 10px;
}
.ueb-nh-fd-item { display: flex; flex-direction: column; min-width: 100px; flex: 1; }
.ueb-nh-fd-lbl  { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin-bottom: 1px; }
.ueb-nh-fd-val  { font-size: .8rem; color: var(--text-main); font-weight: 500; line-height: 1.35; }
.ueb-nh-fd-val-warn { color: #f59e0b; font-weight: 600; }

/* Diagnose-Snapshot: 8 cards in 4-col × 2-row grid */
.ueb-diag-grid { grid-template-columns: repeat(4,1fr); }
@media (max-width:1200px) { .ueb-diag-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width:1000px) { .ueb-diag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px)  { .ueb-diag-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   SentrixCM System Tab Hero
   ══════════════════════════════════════════════════════════════════════ */
.sys-sentrix-hero {
  background: linear-gradient(135deg, rgba(53,214,107,.06) 0%, rgba(0,0,0,0) 60%);
  border: 1px solid rgba(53,214,107,.2);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.sys-sentrix-hero::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--accent); border-radius: 12px 0 0 12px;
}
.sys-sentrix-logo-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sys-sentrix-logo {
  width: 46px; height: 46px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(53,214,107,.5) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem; color: #000; letter-spacing: -.02em;
  flex-shrink: 0;
}
.sys-sentrix-name { display: block; font-size: 1.2rem; font-weight: 800; color: var(--text-main); }
.sys-sentrix-edition { display: block; font-size: .75rem; color: var(--text-soft); margin-top: 1px; }
.sys-sentrix-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sys-sentrix-chip { padding: 3px 9px; border-radius: 20px; font-size: .68rem; font-weight: 600; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-soft); }
.sys-sentrix-chip-ok { background: rgba(53,214,107,.1); border-color: rgba(53,214,107,.3); color: var(--accent); }
.sys-sentrix-desc { font-size: .82rem; color: var(--text-soft); line-height: 1.6; margin-bottom: 10px; }
.sys-sentrix-stack { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.sys-sentrix-tech { padding: 2px 8px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 4px; font-size: .65rem; font-weight: 700; color: var(--text-soft); font-family: monospace; }
.sys-sentrix-author { font-size: .72rem; color: var(--text-soft); padding-top: 8px; border-top: 1px solid var(--border); }
.sys-sentrix-disclaimer {
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px; padding: 10px 14px; margin-top: 10px;
  font-size: .76rem; color: var(--text-soft); line-height: 1.55;
}
.sys-sentrix-disclaimer strong { color: #f59e0b; }

/* Kostenrisiko demo hint */
.ueb-kosten-demo-hint {
  font-size: .65rem; color: var(--text-soft); font-style: italic;
  margin: 4px 0 6px; opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════════
   GROSSAUFTRAG 1.3.2 — Kostenanalyse-Karte (Kosten-Seite)
   ══════════════════════════════════════════════════════════════════════ */
.km-analyse-karte {
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(239,68,68,.05) 0%, rgba(0,0,0,0) 55%);
  border: 1px solid rgba(239,68,68,.18);
  position: relative; overflow: hidden;
}
.km-analyse-karte::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%; background: var(--error, #ef4444);
}
.km-ak-header {
  display: flex; align-items: center; gap: 14px;
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: 14px;
}
.km-ak-title-group { display: flex; align-items: center; gap: 12px; }
.km-ak-icon-box {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.2);
  display: flex; align-items: center; justify-content: center;
  color: #ef4444;
}
.km-ak-title { font-size: 1rem; font-weight: 700; color: var(--text-main); }
.km-ak-sub { font-size: .72rem; color: var(--text-soft); margin-top: 2px; }
.km-ak-badge {
  padding: 3px 10px; border-radius: 20px; font-size: .68rem;
  font-weight: 700; letter-spacing: .04em; flex-shrink: 0;
}
.km-ak-badge-rot  { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
.km-ak-badge-gelb { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: #f59e0b; }
.km-ak-badge-ok   { background: rgba(53,214,107,.1);  border: 1px solid rgba(53,214,107,.25); color: var(--accent); }
.km-ak-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 14px;
}
@media (max-width: 900px) { .km-ak-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .km-ak-kpi-row { grid-template-columns: 1fr; } }
.km-ak-kpi {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.km-ak-kpi-rot   { background: rgba(239,68,68,.06);  border-color: rgba(239,68,68,.15); }
.km-ak-kpi-gruen { background: rgba(53,214,107,.06); border-color: rgba(53,214,107,.15); }
.km-ak-kpi-val {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text-main); line-height: 1; margin-bottom: 4px;
}
.km-ak-kpi-rot  .km-ak-kpi-val { color: #ef4444; }
.km-ak-kpi-gruen .km-ak-kpi-val { color: var(--accent); }
.km-ak-kpi-lbl { font-size: .65rem; color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.km-ak-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .km-ak-body { grid-template-columns: 1fr; } }
.km-ak-section-lbl {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-soft);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.km-ak-treiber {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.km-ak-treiber:last-child { border-bottom: none; }
.km-ak-pos {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-hover); border: 1px solid var(--border);
  font-size: .65rem; font-weight: 800; color: var(--text-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.km-ak-treiber-info { flex: 1; min-width: 0; }
.km-ak-tid   { display: block; font-size: .78rem; font-weight: 700; color: var(--text-main); }
.km-ak-tname { display: block; font-size: .65rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-ak-treiber-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.km-ak-tcost { font-size: .72rem; font-weight: 700; color: #ef4444; }
.km-ak-risk {
  min-width: 28px; text-align: center; padding: 1px 5px;
  border-radius: 4px; font-size: .65rem; font-weight: 800;
}
.km-ak-r-rot   { background: rgba(239,68,68,.15);  color: #ef4444; }
.km-ak-r-gelb  { background: rgba(245,158,11,.15); color: #f59e0b; }
.km-ak-r-ok    { background: rgba(53,214,107,.1);  color: var(--accent); }
.km-ak-emp { padding: 10px 12px; background: rgba(255,255,255,.02); border-radius: 7px; border: 1px solid var(--border); }
.km-ak-emp-comp { font-size: .72rem; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
.km-ak-emp-txt  { font-size: .78rem; color: var(--text-soft); line-height: 1.5; margin-bottom: 8px; }
.km-ak-emp-cost { font-size: .72rem; color: var(--text-soft); margin-bottom: 10px; }
.km-ak-emp-ok   { font-size: .78rem; color: var(--accent); line-height: 1.5; margin-bottom: 10px; }
.km-ak-emp-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   GROSSAUFTRAG 1.3.2 — Einstellungen Allgemein System-Zentrale
   ══════════════════════════════════════════════════════════════════════ */
.sys-zentrale {
  background: linear-gradient(135deg, rgba(53,214,107,.04) 0%, rgba(0,0,0,0) 60%);
  border: 1px solid rgba(53,214,107,.15);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.sys-zentrale::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%; background: var(--accent); border-radius: 12px 0 0 12px;
}
.sys-zentrale-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.sys-zentrale-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(53,214,107,.1); border: 1px solid rgba(53,214,107,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.sys-zentrale-title {
  font-size: .88rem; font-weight: 700; color: var(--text-main); flex: 1;
}
.sys-zentrale-badge {
  padding: 2px 10px; border-radius: 20px; font-size: .65rem;
  font-weight: 700; letter-spacing: .04em;
}
.sys-zentrale-badge-ok   { background: rgba(53,214,107,.1); border: 1px solid rgba(53,214,107,.25); color: var(--accent); }
.sys-zentrale-badge-warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #f59e0b; }
.sys-zentrale-badge-err  { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: #ef4444; }
.sys-zentrale-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 900px) { .sys-zentrale-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sys-zentrale-grid { grid-template-columns: 1fr; } }
.sz-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 7px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border);
}
.sz-item-ok      { border-left: 3px solid rgba(53,214,107,.5);  }
.sz-item-warn    { border-left: 3px solid rgba(245,158,11,.5);  }
.sz-item-err     { border-left: 3px solid rgba(239,68,68,.5);   }
.sz-item-neutral { border-left: 3px solid rgba(255,255,255,.1); }
.sz-lbl {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-soft);
}
.sz-val { font-size: .76rem; font-weight: 600; color: var(--text-main); line-height: 1.3; }
.sz-item-warn .sz-val { color: #f59e0b; }
.sz-item-err  .sz-val { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════
   GROSSAUFTRAG 1.3.2 — Simulation Card Descriptions
   ══════════════════════════════════════════════════════════════════════ */
.sys-card-desc {
  font-size: .72rem; color: var(--text-soft); line-height: 1.5;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}