/* mySPI — das Hazard register (Martin, 2026-10-09). Farben der Risikoklassen wie
   in der Excel und im Katalog: A rot, B orange, C gelb, D hellgelb, E grün. */
.spiKl { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; text-align: center; font-weight: 700; font-size: 12px;
  background: var(--panel-2, rgba(127, 127, 127, .15)); color: var(--ink); }
.spiKlA { background: #ff0000; color: #fff; }
.spiKlB { background: #ff8c00; color: #111; }
.spiKlC { background: #ffff00; color: #111; }
.spiKlD { background: #ffee99; color: #111; }
.spiKlE { background: #90ee90; color: #111; }
.spiPS { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink-faint); }
.spiRef { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--spi, #8fbf4a); }
.spiTable td { vertical-align: middle; }
.spiTable tbody tr { cursor: pointer; }
.spiTable .mono, .spiKopf .mono { font-family: var(--mono, ui-monospace, monospace); }
.spiTable .nowrap, .spiHist .nowrap, .spiTable td.mono { white-space: nowrap; }
.spiFilter select, .spiFilter input[type="search"] { max-width: 240px; }
.atoTile[data-spi-tile] { cursor: pointer; }
.spiSub { margin: 22px 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }

/* Bewertung: Brutto und Netto nebeneinander, darunter Klasse und Status. */
.spiBewertung { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 12px; }
.spiStufe { font-weight: 600; margin: 0 0 8px; }
.spiErgebnis { margin-top: 4px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.spiKopf th { width: 160px; text-align: left; color: var(--ink-faint); font-weight: 600; }
.spiKopf td.pre { white-space: pre-line; }

/* Zeilen zum Bearbeiten (ALARP: Controls, Maßnahmen, Revisionen). */
.spiRows { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.spiRows th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 6px; }
.spiRows td { padding: 3px 4px; vertical-align: top; }
.spiRows input, .spiRows select, .spiRows textarea { width: 100%; box-sizing: border-box;
  background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font-size: 13px; }
.spiRows textarea { resize: vertical; min-height: 34px; }
.spiFilter select, .spiFilter input[type="search"] { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; }
/* Die Auswahlfelder: Höhe und Pfeil aus ato.css — hier kein Innenabstand oben/unten (sonst bleibt der Schrift zu wenig Platz). */
.spiRows select, .spiFilter select { padding: 0 26px 0 8px; }
.spiRows td.x { width: 24px; text-align: center; }

/* Die Matrix: je Feld die Klasse und, wo Gefahren liegen, ihre Zahl. */
.spiMatrix { border-collapse: separate; border-spacing: 3px; margin: 0 0 16px; }
.spiMatrix th { font-size: 12px; font-weight: 600; padding: 6px 8px; color: var(--ink-dim); text-align: center; }
.spiMatrix th span { font-weight: 400; color: var(--ink-faint); font-size: 11px; }
.spiMatrix tbody th { text-align: left; }
.spiMatrix td { width: 86px; height: 54px; border-radius: 6px; text-align: center; position: relative; color: #111; }
.spiMatrix td .k { position: absolute; top: 4px; left: 7px; font-size: 11px; font-weight: 700; opacity: .7; }
.spiMatrix td .n { font-size: 22px; font-weight: 700; font-family: var(--mono, ui-monospace, monospace); }
.spiMatrix td[data-spi-cell] { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.spiMatrix td.spiKlA { color: #fff; }
.spiLegende div { margin: 4px 0; font-size: 13px; }
.spiLogo img { max-height: 110px; max-width: 260px; border-radius: 6px; }
.spiHistory { margin-top: 16px; }

@media (max-width: 760px) {
  .spiBewertung { grid-template-columns: 1fr; }
  .spiMatrix td { width: 48px; height: 44px; }
  .spiMatrix td .n { font-size: 16px; }
}
/* Die Auswahl mit langen Texten („S5 – Extrem (Totalverlust / tödlich)“) bleibt in ihrer Spalte. */
.spiBewertung > div { min-width: 0; }
.spiBewertung .field select { width: 100%; min-width: 0; }
/* Am Handy wischt man in den Zeilen der ALARP-Begründung, nicht die ganze Seite. */
@media (max-width: 760px) {
  .spiRows { display: block; overflow-x: auto; }
  .spiRows td { min-width: 120px; }
  .spiRows td.x { min-width: 24px; }
  .spiKopf th { width: auto; }
}

/* --- mySPI seit 2026-10-10: Menü zum Aufklappen, die Zeitmessung neben dem Schriftzug, das SPI Dashboard --- */
.atoMenu button.spiKlapp { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.spiPfeil { font-size: 9px; width: 10px; color: var(--ink-faint); flex: none; }
/* (Der Abstand kommt von .atoSubMenu.opsSub — das Untermenü gleitet auf wie in myOPS.) */
.spiSubMenu button { font-size: .875rem; color: var(--ink-faint); }
.spiSubMenu[hidden] { display: none; }

.atoTop .spiUhr { display: flex; align-items: center; gap: 10px; margin-left: 26px; margin-right: auto; align-self: center; padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.atoTop .spiUhr[hidden] { display: none; }
.spiUhrPunkt { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-faint); flex: none; box-sizing: border-box; }
.spiUhr.an .spiUhrPunkt { border-color: #22C55E; background: #22C55E; animation: spiUhrBlink 1.6s ease-in-out infinite; }
@keyframes spiUhrBlink { 50% { opacity: .35; } }
.spiUhrText { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.spiUhrText b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.spiUhrText small { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.spiUhrZeit { font-family: var(--mono, ui-monospace, monospace); font-size: 17px; font-weight: 700; min-width: 4.6em; text-align: right; }
@media (max-width: 760px) { .atoTop .spiUhr { margin-left: 10px; } .spiUhrText small { display: none; } }

/* Die Ampel der Vorgabe: grün, amber, rot, grau — Hintergrund und Schrift. */
.sdash-ok { background-color: #22C55E; color: #14532D; }
.sdash-warn { background-color: #F59E0B; color: #78350F; }
.sdash-krit { background-color: #EF4444; color: #fff; }
.sdash-none { background-color: rgba(156, 163, 175, .22); color: var(--ink-faint); }
.sdashBadge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sdashLegende { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sdashPanel { margin-bottom: 16px; }
.sdashPanel h3 { margin: 0 0 10px; }
.sdashPanel h3 .hint { font-weight: 400; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.sdashKopf { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.sdashKopf h3 { margin: 0 0 3px; }
.sdashKopf .hint { margin: 0; }
.sdashTabs button.on { background: var(--spi, #8fbf4a); color: var(--spi-on, #14210a); }
#sdashJahr { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 0 26px 0 8px; font: inherit; }
.sdashJahr th.m, .sdashJahr td.m, .sdashErg th.m, .sdashErg td.m { text-align: center; white-space: nowrap; }
.sdashJahr td.sdashZ, .sdashErg td.sdashZ { text-align: center; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 12.5px; white-space: nowrap; border-left: 2px solid var(--panel); }
/* Die Tabelle der zwölf Monate passt ohne Querlauf in die Seite (Clemens, Runde 10): feste Spaltenanteile — die
   Bezeichnung nimmt, was bleibt, und bricht um; die Monate sind schmal, ihre Zahlen werden mit der Seite kleiner. */
.sdashJahrBox { overflow-x: hidden; }
.sdashJahr { width: 100%; table-layout: fixed; }
.sdashJahr th, .sdashJahr td { padding-left: 3px; padding-right: 3px; overflow: hidden; }
.sdashJahr th.nr { width: 58px; } .sdashJahr td:first-child, .sdashJahr th.nr { padding-left: 10px; }
.sdashJahr th.bez { width: auto; } .sdashJahr td:nth-child(2) { overflow-wrap: anywhere; }
.sdashJahr th.mo { width: 4.6%; } .sdashJahr th.sp { width: 6.2%; } .sdashJahr th.st { width: 9%; } .sdashJahr th.tr { width: 5.6%; white-space: normal; }
.sdashJahr.mitStatus th.mo { width: 4.1%; }
/* Was in einer schmalen Spalte nicht in eine Zeile passt, bricht um — abgeschnitten wird nichts. */
.sdashJahr th.mo .sdashFehlt { display: block; margin: 1px auto 0; } .sdashJahr td.m, .sdashJahr th.st, .sdashJahr th.sp { white-space: normal; }
.sdashJahr th.m { font-size: clamp(10px, .82vw, 12.5px); }
.sdashJahr td.sdashZ { font-size: clamp(9px, .8vw, 12.5px); letter-spacing: -.04em; padding-left: 0; padding-right: 0; }
.sdashJahr td.m.mono { font-size: clamp(10px, .82vw, 12.5px); }
.sdashJahr .sdashBadge { padding: 2px 4px; font-size: clamp(8.5px, .74vw, 12px); white-space: normal; letter-spacing: -.01em; }
@media (max-width: 760px) { .sdashJahrBox { overflow-x: auto; } .sdashJahr { min-width: 700px; } }
.sdashJahr th[data-sdash-monat] { cursor: pointer; }
.sdashJahr th[data-sdash-monat]:hover, .sdashJahr th.heute { color: var(--spi, #8fbf4a); }
.sdashJahr tbody tr, .sdashErg tbody tr { cursor: default; }
.sdashJahr tbody tr:hover, .sdashErg tbody tr:hover { background: none; }
.sdashEinheit { display: block; font-size: 11px; }
.sdashNav { gap: 10px; }
.sdashMonat { margin: 0; min-width: 9.5em; text-align: center; font-size: 17px; }
.sdashEingabe { border-collapse: collapse; width: 100%; max-width: 760px; }
.sdashEingabe th, .sdashEingabe td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sdashEingabe th { width: 64px; color: var(--ink-faint); font-weight: 600; font-size: 12px; }
.sdashEingabe td:last-child { width: 170px; }
.sdashEingabe td .hint { display: block; font-size: 11.5px; }
.sdashEingabe tr.sdashTeil th { padding-top: 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); width: auto; }
.sdashEingabe input { width: 100%; box-sizing: border-box; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 14px; }
.sdashEingabe input.sdashZahl { font-family: var(--mono, ui-monospace, monospace); text-align: right; }
.sdashEingabe input.timeInvalid { border-color: #EF4444; }
.sdashReviews td:nth-child(1), .sdashReviews td:nth-child(5) { width: 140px; }
.sdashReviews td:nth-child(4) { width: 130px; }
.sdashText { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-dim); max-width: 100ch; }
.sdashZiele td { vertical-align: top; }
.sdashZiele td.fest { padding-top: 10px; white-space: nowrap; font-size: 12.5px; color: var(--ink-dim); }
.sdashZiele td.txt { min-width: 320px; }
.sdashZiele textarea { min-height: 76px; line-height: 1.4; }
.sdashZiele input.kurz { min-width: 80px; }
.sdashZiele input.pflicht { background: rgba(245, 158, 11, .22); border-color: #F59E0B; }
.sdashZielStatus.z-erreicht { background: #22C55E; color: #14532D; font-weight: 700; }
.sdashZielStatus.z-teilweise { background: #F59E0B; color: #78350F; font-weight: 700; }
.sdashZielStatus.z-nicht { background: #EF4444; color: #fff; font-weight: 700; }
.sdashChart { width: 100%; height: auto; display: block; max-width: 1100px; }
.sdashChart .g { stroke: var(--line); stroke-width: 1; }
.sdashChart .a { fill: var(--ink-faint); font-size: 12px; font-family: inherit; }
.sdashChart .a.t { font-size: 11px; }
.sdashChartLegende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; color: var(--ink-dim); }
.sdashChartLegende span { display: inline-flex; align-items: center; gap: 6px; }
.sdashChartLegende i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.sdashChartLegende i.strich { height: 0; border-top: 2px dashed; border-radius: 0; background: none; }
.sdashJahr td.mono, .sdashErg td.mono { white-space: nowrap; }
.sdashJahr td, .sdashErg td { vertical-align: middle; }
.sdashZiele { table-layout: fixed; min-width: 1040px; }
.sdashZiele th:nth-child(1) { width: 62px; } .sdashZiele th:nth-child(3) { width: 150px; } .sdashZiele th:nth-child(4) { width: 130px; }
.sdashZiele th:nth-child(5) { width: 88px; } .sdashZiele th:nth-child(6) { width: 96px; } .sdashZiele th:nth-child(7) { width: 112px; } .sdashZiele th:nth-child(8) { width: 158px; }
.sdashZiele td.fest { white-space: normal; }
.sdashZiele td.txt { min-width: 0; }
.sdashZiele textarea { min-height: 96px; }
.sdashZiele th { white-space: normal; hyphens: manual; vertical-align: bottom; }
.sdashZiele th:nth-child(5) { width: 100px; } .sdashZiele th:nth-child(6) { width: 104px; }
.spiWeitere { margin: 18px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Paket 2 (für Clemens, 2026-10-10): SRB Reviews, SPI-Konfiguration, Dokumentenkopf --- */
.sdashChart .a.leer { font-size: 15px; }
.sdashSrbRef td.x { text-align: right; white-space: nowrap; }
.sdashSrbRef tbody tr, .skTabelle tbody tr { cursor: default; }
.sdashSrbRef tbody tr:hover, .skTabelle tbody tr:hover { background: none; }
.atoModal .modalBox.srbBox { width: min(860px, 100%); }
.srbListe tbody tr { cursor: pointer; }
.srbStatus { white-space: nowrap; font-weight: 600; font-size: 13px; }
.srbStatus.s-abgeschlossen { color: #22C55E; }
.srbTrend { white-space: nowrap; font-weight: 600; }
.srbTrend.t-besser { color: #22C55E; } .srbTrend.t-schlechter { color: #EF4444; } .srbTrend.t-kein { color: var(--ink-faint); font-weight: 400; }
fieldset.srbForm { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.srbForm:disabled { opacity: .82; }
.srbRows td.m { text-align: center; width: 70px; }
.srbRows td.m input { width: auto; }
.srbRows th:nth-child(1) { min-width: 130px; }
#srbB th:nth-child(1), #srbV th:nth-child(1) { width: 46%; }
#srbF th:nth-child(2) { width: 36%; } #srbF th:nth-child(4) { width: 26%; }
.srbRows td .hint { display: block; font-size: 11.5px; margin-top: 2px; }
.srbRows [readonly] { opacity: .85; }
.srbAktionen { margin-top: 4px; }
.skTabelle th.m, .skTabelle td.m { text-align: center; white-space: nowrap; }
.skTabelle tr.skAus td { opacity: .55; }
.skTabelle tr.skAus td:last-child { opacity: 1; }
.skTabelle .skWeg:hover { border-color: #EF4444; color: #EF4444; }
#skModal input.skZahl { max-width: 130px; font-family: var(--mono, ui-monospace, monospace); text-align: right; }
#skModal #skEinheitFrei { margin-top: 6px; }
.skRichtung { display: flex; flex-direction: column; gap: 6px; }
.skRichtung .hint { margin-left: 6px; }
.dkLogoZeile { display: flex; gap: 18px; align-items: flex-start; }
.dkBild { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dkBild .hint { font-size: 10.5px; color: #888; text-align: center; }
.dkBild img.gross { max-width: 48px; max-height: 48px; }
/* Rot-weiß-rot, gezeichnet — kein Emoji. */
.dkFlagge { display: inline-block; background: linear-gradient(#C8102E 0 33.33%, #fff 33.33% 66.66%, #C8102E 66.66%); border: 1px solid #bbb; }
.dkFlagge.gross { width: 48px; height: 32px; }
.dkFlagge.klein { width: 54px; height: 36px; flex: none; }
.dkVorschau { background: #fff; color: #111; border-radius: 8px; padding: 18px 22px; max-width: 720px; font-family: Arial, Helvetica, sans-serif; }
.dkVorschau .dkKopf { display: flex; gap: 14px; align-items: center; font-size: 13px; line-height: 1.35; }
.dkVorschau .dkKopf img.klein { height: 44px; width: auto; flex: none; }
.dkVorschau .dkKopf .z1 { font-weight: 700; font-size: 15px; }
.dkVorschau .leer { color: #999; }
.dkVorschau .dkRecht { font-size: 10.5px; color: #555; margin-top: 6px; }
.dkVorschau .dkLinie { border-top: 1px solid #bbb; margin: 8px 0 26px; }
.dkVorschau .dkUnter { display: flex; gap: 60px; font-size: 12px; }
.dkVorschau .dkUnter > div { flex: 1; display: flex; flex-direction: column; }
.dkVorschau .dkUnter i { display: block; border-top: 1px solid #111; margin-bottom: 4px; }
.dkVorschau .dkUnter span { color: #444; }

/* --- Paket 3 (für Clemens, 2026-10-11): Benachrichtigungen, Heatmap, APAS-Hinweis --- */
.spiHinweise { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.spiHinweis { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; border: 1px solid #F59E0B; background: rgba(245, 158, 11, .14); font-size: 13.5px; }
.spiHinweisPunkt { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #F59E0B; color: #1d1405; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.spiHinweisText { flex: 1; min-width: 0; }
.spiHinweisWeg { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.spiHinweisWeg:hover { color: var(--ink); background: var(--panel-2); }
.spiFristen tbody tr { cursor: default; } .spiFristen tbody tr:hover { background: none; }
.spiSchritteKopf { margin-top: 14px; }
.spiSchritte { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.spiSchritte li { display: flex; gap: 9px; align-items: baseline; }
.spiSchritte li span { flex: none; color: var(--spi, #8fbf4a); font-size: 16px; }
#spiSchritte .modalBox { width: min(680px, 100%); }
.hwArt { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.hwArt:last-child { border-bottom: 0; }
.hwArt input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.hwArt span { display: flex; flex-direction: column; gap: 2px; }
.hwArt small { color: var(--ink-dim); font-size: 12.5px; }
.hwArt.bald { opacity: .55; cursor: default; }
.hwListe { margin: 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.sdashHeat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.sdashHeatFeld { border: 0; border-radius: 8px; padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; line-height: 1.1; }
button.sdashHeatFeld { cursor: pointer; }
button.sdashHeatFeld:hover { filter: brightness(1.1); }
.sdashHeatFeld b { font-size: 13px; }
.sdashHeatFeld span { font-size: 11.5px; font-family: var(--mono, ui-monospace, monospace); opacity: .85; }
.sdashHeatFeld.heute { box-shadow: 0 0 0 2px var(--ink); }
div.sdashHeatFeld { opacity: .5; }
@media (max-width: 800px) { .sdashHeat { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sdashApas { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; cursor: help; }

/* Paket 3, P3-04 und P3-11: Trend 3M, fehlende Pflichtfelder */
.sdashTrend3 { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.sdashTrend3.t3-negativ { background-color: rgba(245, 158, 11, .28); color: #F59E0B; font-weight: 700; }
.sdashTrend3.t3-positiv { color: #22C55E; font-weight: 700; }
.sdashTrend3.t3-keine { color: var(--ink-faint); }
.sdashTrendLegende { margin-left: 10px; align-self: center; }
.sdashTrendLegende .t3-negativ { color: #F59E0B; } .sdashTrendLegende .t3-positiv { color: #22C55E; }
.sdashFehlt { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 3px; border-radius: 50%; background: #EF4444; color: #fff; font-size: 10px; font-weight: 800; vertical-align: 2px; }
.sdashEingabe input.pflichtFehlt { border-color: #EF4444; box-shadow: 0 0 0 1px #EF4444; }
.sdashPflicht { display: block; color: #EF4444; font-size: 11.5px; margin-top: 3px; }

/* Paket 3, P3-10: Versionen einer Gefahr */
.spiVersionen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: -4px 0 14px; font-size: 13.5px; }
.spiVersionJetzt b { color: var(--spi, #8fbf4a); }
.spiVersionAlt summary { cursor: pointer; color: var(--ink-dim); }
.spiVersionAlt ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.spiVersionAlt li { display: flex; align-items: center; gap: 10px; }
#spiVersion td.pre { white-space: pre-wrap; }

/* Paket 3, P3-03: Dokumente › Archiv */
.spiArchivJahr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.spiArchivKopf { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.spiArchivKopf b { font-size: 17px; }
.spiArchivZeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }

/* === Runde 11 (Clemens, 2026-10-14): Safety Intelligence, Trendprognose, SPI ↔ Hazard register, Compliance ============ */
.sdashJahr th.hz { width: 5%; } .sdashJahr.mitStatus th.mo { width: 3.8%; }
.sdashHzBadge { font: inherit; font-size: 12px; font-weight: 700; min-width: 24px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.sdashHzBadge:hover { border-color: var(--spi, #8fbf4a); }
.sdashHzLink { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: #e0463c; text-align: left; white-space: normal; }
.sdashNur { font-size: 13px; color: var(--ink-dim); }
.sdashProgLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; font-size: 13px; }
.sdashProgLeiste .segmented button[disabled] { opacity: .45; }
.sdashChart .sdashProgAlarm { fill: #e0463c; font-weight: 700; font-size: 12px; paint-order: stroke; stroke: var(--panel); stroke-width: 5px; stroke-linejoin: round; }
/* Das rote Banner (4A): ALARP-Fälle ohne Dokument — ein Audit-Finding, deshalb rot, nie amber. */
.spiRotBanner { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid #e0463c; background: rgba(224, 70, 60, .14); color: #ff8a80; font-weight: 700; cursor: pointer; }
.spiRotBanner:hover, .spiRotBanner:focus-visible { background: rgba(224, 70, 60, .22); outline: none; }
.spiFRot { border-color: #e0463c !important; color: #ff8a80 !important; }
.spiQuelle { margin: 4px 0 12px; font-size: 13px; color: var(--ink-dim); } .spiQuelle b { color: var(--ink); } .spiQuelle .gut { color: #3fae78; font-weight: 600; }
.spiBatch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.spiSpiWahl { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* Das Safety Intelligence Panel */
.siLage { margin: 0 0 14px; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel-solid, var(--panel)); }
.siLage.si-gruen { border-color: #22C55E; } .siLage.si-amber { border-color: #F59E0B; } .siLage.si-rot { border-color: #EF4444; } .siLage.si-grau { border-color: var(--line); }
.siLageKopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .siLageKopf h3 { margin: 0; font-size: 18px; }
.siAmpel { width: 22px; height: 22px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 4px rgba(127, 127, 127, .15); flex: none; }
.si-gruen .siAmpel { background: #22C55E; box-shadow: 0 0 14px rgba(34, 197, 94, .6); } .si-amber .siAmpel { background: #F59E0B; box-shadow: 0 0 14px rgba(245, 158, 11, .6); } .si-rot .siAmpel { background: #EF4444; box-shadow: 0 0 14px rgba(239, 68, 68, .6); }
.siLageWort { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.siSatz { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.siRaster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .siRaster .siSpis { grid-column: 1 / -1; }
@media (max-width: 860px) { .siRaster { grid-template-columns: minmax(0, 1fr); } }
.siKarte h3 { margin-top: 0; }
.siTab tbody tr { cursor: pointer; } .siTab tbody tr:hover td { background: var(--spi-wash, rgba(143, 191, 74, .12)); } .siApas { display: block; font-size: 11px; }
.siZahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.siZahl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.siZahl b { font-size: 24px; } .siZahl span { font-size: 12px; color: var(--ink-dim); } .siZahl:hover { border-color: var(--spi, #8fbf4a); }
.siZahl.rot { border-color: #e0463c; background: rgba(224, 70, 60, .14); } .siZahl.rot b, .siZahl.rot span { color: #ff8a80; }
.siRk { margin: 0 0 8px; } .siKette { display: flex; flex-direction: column; gap: 5px; }
.siSchritt { display: grid; grid-template-columns: 7.5em 1fr 2.5em; align-items: center; gap: 8px; font-size: 12.5px; } .siSchritt b { text-align: right; }
.siBalken { height: 8px; border-radius: 999px; background: var(--panel-3, var(--panel-2)); overflow: hidden; } .siBalken i { display: block; height: 100%; background: var(--spi, #8fbf4a); }
.siFaellig { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.siExtern { margin-top: 14px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line); font-size: 13px; color: var(--ink-dim); } .siExtern p { margin: 4px 0; }
.skInfo { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; }

/* SRB-Protokollvorlage (Runde 11, 4C): Funktionen, geprüfte SPIs und Hazards als Häkchen-Listen. */
.srbWahl { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.srbWahl label { display: inline-block; font-weight: 400; cursor: pointer; }
.srbWahl.spalte label { display: block; padding-left: 24px; text-indent: -24px; }
.srbWahl label b.mono { white-space: nowrap; }
.srbWahl input { width: auto; }
.srbWahl.spalte { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 8px; padding: 8px 10px; }
.srbWahl label.zu { opacity: .7; }
.srbGeprueft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.srbGeprueft h4, .sdashPanel > h4 { margin: 4px 0 6px; font-size: 13px; }
.srbFehlt { margin: 8px 0 0; color: #b45309; }
.srbFehlt.ok { color: #15803d; }
@media (max-width: 860px) { .srbGeprueft { grid-template-columns: 1fr; } }

/* === Runde 14 (Clemens, 2026-10-17, Paket 5 + 6): Safety performance level, Safety action indicator, Safety action
   cycle (fünf Stufen) im Hazard register, Safety actions, Safety/security interface ============================== */
.siLage .siAmpel { width: 30px; height: 30px; }
.siLageKopf h3 { font-size: 19px; }
.siSplZahlen { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 13.5px; color: var(--ink-dim); }
.siSplZahlen b { color: var(--ink); }
.siKarte { margin-bottom: 12px; }
.siHinweise { display: flex; flex-direction: column; gap: 8px; }
.siHinweis { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid #F59E0B; background: var(--panel-2); font-size: 13.5px; cursor: pointer; }
.siHinweis.a-A { border-left-color: #F59E0B; } .siHinweis.a-B { border-left-color: #EF4444; } .siHinweis.a-C { border-left-color: #EF4444; }
.siHinweis:hover, .siHinweis:focus-visible { border-color: var(--spi, #8fbf4a); }
.siHinweisArt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.siKeine { padding: 10px 12px; border-radius: 10px; border: 1px solid #22C55E; background: rgba(34, 197, 94, .12); font-size: 13.5px; }
.siBalken { display: flex; } .siBalken i { flex: none; } .siBalken i.laufend { background: #F59E0B; }
.siKarte .siZahlen { margin-top: 12px; }
.siSchritt { grid-template-columns: 12em 1fr 2.5em; }
.siFaellig li.ueber b { color: #ff8a80; } .siFaellig li[role=button] { cursor: pointer; }
.siApasDl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: 13.5px; } .siApasDl dt { color: var(--ink-dim); } .siApasDl dd { margin: 0; }
.siApasDl .gut { color: #22C55E; }
.siExternText { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line); font-size: 13px; color: var(--ink-dim); }
.siSecKopf { display: flex; gap: 12px; align-items: flex-start; } .siSecKopf > div { flex: 1; } .siSecKopf p { margin: 2px 0 0; }
.siSecForm { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.siSecKat { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; } .siSecKat label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.siSecListe { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.siSecListe li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.siSecListe li.archiv { opacity: .6; filter: grayscale(.8); }
.siSecZeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; } .siSecZeile .spacer { flex: 1; }
.siSecBadge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--f, #6B7280); }
.siSecBadge.archiv { background: transparent; color: var(--ink-faint); border: 1px solid var(--line); }
.siSecText { margin: 6px 0 0; font-size: 13.5px; white-space: normal; }
.siSecHz { margin: 6px 0 0; font-size: 13px; }
.siSecArchivSchalter { margin-top: 10px; font-size: 13px; }
.siSecLeer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 10px; color: var(--ink-dim); } .siSecLeer p { margin: 2px 0; } .siSecLeer svg { color: var(--ink-faint); margin-bottom: 4px; }
/* Der Safety action cycle: fünf Punkte mit Verbindungslinie, Namen darunter. */
.spiZyklus ol { list-style: none; display: flex; margin: 6px 0 0; padding: 0; min-width: 390px; max-width: 480px; }
.spiZyklus li { flex: 1 1 0; min-width: 0; padding: 0 3px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--ink-faint); text-align: center; line-height: 1.15; }
.spiZyklus li::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.spiZyklus li:first-child::before { display: none; }
.spiZyklus li.z-ok::before { background: #22C55E; }
.spiZyklus li i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-faint); background: var(--panel-solid, var(--panel)); box-sizing: border-box; }
.spiZyklus li.z-ok i { background: #22C55E; border-color: #22C55E; }
.spiZyklus li.z-laufend i { border-color: #F59E0B; background: linear-gradient(90deg, #F59E0B 50%, var(--panel-solid, var(--panel)) 50%); }
.spiZyklus li.z-ok span { color: var(--ink-dim); }
.spiZyklus.gross ol { max-width: 640px; } .spiZyklus.gross li { font-size: 12px; } .spiZyklus.gross li i { width: 16px; height: 16px; } .spiZyklus.gross li::before { top: 7px; }
.spiZykBadge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; vertical-align: middle; }
.spiZykBadge.z-rot { color: #EF4444; } .spiZykBadge.z-amber { color: #F59E0B; } .spiZykBadge.z-gruen { color: #22C55E; }
.spiHzKopf { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.spiZykZeile > td:first-child { border-left: 4px solid var(--line); }
.spiZykZeile.z-rot > td:first-child { border-left-color: #EF4444; } .spiZykZeile.z-amber > td:first-child { border-left-color: #F59E0B; } .spiZykZeile.z-gruen > td:first-child { border-left-color: #22C55E; }
.spiZyklusPanel h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spiZykSteuer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; margin-top: 14px; font-size: 13px; }
.spiZykSteuer label { display: flex; flex-direction: column; gap: 4px; } .spiZykSteuer select { font: inherit; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); }
.spiZyk5 { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spiActKopf, .spiActZeile { display: grid; grid-template-columns: 5em minmax(0, 3fr) minmax(0, 1.3fr) 9.5em 10em 2.4em; gap: 6px; align-items: center; }
.spiActKopf { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.spiActZeile { margin-bottom: 6px; }
.spiActZeile input, .spiActZeile select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); min-width: 0; }
.spiActZeile.ueber input[type=date] { border-color: #EF4444; color: #ff8a80; }
.spiOccFeld { margin-top: 12px; }
@media (max-width: 760px) {
  .spiActKopf { display: none; }
  .spiActZeile { grid-template-columns: 1fr 1fr; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
  .spiActZeile > span.mono, .spiActZeile input[data-sa-f=text] { grid-column: 1 / -1; }
  .spiZyklus ol { min-width: 0; }
  .siSchritt { grid-template-columns: 9em 1fr 2em; }
}
/* === Paket 7 (Clemens, 2026-10-18): Banner im SPI Dashboard (nicht wegklickbar), Zahlen im Menü, SSI-Bewertung ========== */
.spiPflicht { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; }
.spiPflicht .spiRotBanner { margin: 0; }
.spiRotBanner.amber { border-color: #F59E0B; background: rgba(245, 158, 11, .14); color: #F59E0B; }
.spiBadge { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #EF4444; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.6; text-align: center; }
.siBewBox { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; }
.siSecStand { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--f, #6B7280); }
.siBew { display: inline-flex; gap: 8px; align-items: center; }
.siBew .segmented button { padding: 3px 12px; font-size: 12.5px; }
.siHlKnopf { background: #1C3557 !important; border-color: #1C3557 !important; color: #fff !important; }
/* Runde 4 Teil 2 (4-1/4-3): das Abzeichen als Link zur Gefahr; Verknüpfungen, Knöpfe und Timeline je Eintrag */
.siSecStand.linkStand { border: 0; cursor: pointer; font-family: inherit; }
.siSecStand.linkStand:hover { filter: brightness(1.1); text-decoration: underline; }
.siSecVerweise { margin: 8px 0 0; font-size: 13px; line-height: 1.9; }
.siSecAktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.siSecVerlauf { margin-top: 8px; font-size: 12.5px; }
.siSecVerlauf summary { cursor: pointer; color: var(--muted); }
.siSecVerlauf ul { margin: 6px 0 0; padding-left: 18px; }
.siSecListe .siSecVerlauf li { margin: 2px 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; list-style: disc; }
.siHwListe { list-style: none; margin: 8px 0; padding: 0; }
.siHwListe li { padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.siHwListe li .btn { margin-right: 6px; }
.siHwAndere summary { cursor: pointer; margin-top: 6px; color: var(--muted); }
@media (max-width: 560px) { .siSecAktionen .btn { flex: 1 1 100%; } }
/* Paket 7 (P2-A): Filter mit Mehrfachauswahl und Sortierung im Hazard register */
.spiMulti { position: relative; }
.spiMulti > summary { list-style: none; cursor: pointer; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3, var(--panel-2)); font-size: 13.5px; white-space: nowrap; }
.spiMulti > summary::-webkit-details-marker { display: none; }
.spiMulti > summary::after { content: ' ▾'; color: var(--ink-faint); }
.spiMulti > div { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 300px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid, var(--panel)); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.spiMulti label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.spiKlassen { display: inline-flex; gap: 4px; }
.spiKlChip { min-width: 32px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink-dim); font-weight: 700; cursor: pointer; }
.spiKlChip.on { border-color: var(--spi, #8fbf4a); color: var(--ink); background: color-mix(in srgb, var(--spi, #8fbf4a) 22%, transparent); }

.spiTipp textarea { width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.spiTippVerlauf { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .spiTippAlt { white-space: pre-line; color: var(--ink-dim); }

/* Paket 7 (P3-C): Safety Objectives ohne seitliches Scrollen ab 1280 px — die Tabelle teilt die Breite, Felder füllen ihre
   Spalte, feste Werte brechen um; erst unter 1000 px (Tablet, Handy) wieder breiter mit Scrollen. */
.sdashZiele { min-width: 0; width: 100%; }
.sdashZiele td.txt { min-width: 0; }
.sdashZiele td.fest { white-space: normal; overflow-wrap: anywhere; }
.sdashZiele input, .sdashZiele select, .sdashZiele textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.sdashZiele input.kurz { min-width: 0; }
.sdashZiele th { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .sdashZiele { min-width: 1040px; } }
/* Paket 7 (P4, P3-B): Safety Promotion und Dokumenten-Übersicht */
.promoReiter { margin: 0 0 10px; }
.promoForm { border-color: #1C3557; }
.promoInhalt { margin-top: 2px; }
.promoVon { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-dim); }
.promoVon input { font: inherit; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
/* B8: aus MoC/RA übernommen, noch nicht freigegeben (sehen nur SM/CMM) */
.promoLl.entwurf { border-style: dashed; border-color: #F59E0B; }
.promoLlKopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 8px; } .promoLlKopf .spacer { flex: 1; }
.spiLlLink { margin: 0 0 10px; font-size: 13.5px; }
tr.klickbar { cursor: pointer; }

/* Die Matrix als gemeinsame Komponente (web/shared/13-risiko.ts, Clemens 2026-10-25): belegte Felder mit Rahmen; ein
   markiertes Feld — vorher (Brutto) gestrichelt, nachher (Netto) durchgezogen. */
.spiMatrix td[data-risiko-feld], .spiMatrix td[data-risiko-belegt] { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.spiMatrix td[data-risiko-feld] { cursor: pointer; }
.spiMatrix td.risikoVorher { outline: 3px dashed #111827; outline-offset: -4px; }
.spiMatrix td.risikoNachher { outline: 3px solid #111827; outline-offset: -4px; }
.spiMatrix td.risikoVorher.risikoNachher { outline-style: double; }
.spiBewertung.risikoEinzeln { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.risikoUnter { margin: -4px 0 6px; }

/* Hazard register, Liste (Clemens, Gesamtpaket 2026-10-25, A7): das Badge „Action required“ fest rechts oben in der
   Titelzeile — nie umbrochen, nie in einer eigenen Zeile; der Titel bricht in seinem Bereich um (höchstens zwei Zeilen,
   dann „…“, voll als Tooltip). Die Statusleiste in jeder Zeile gleich breit, sie schrumpft mit der Spalte; Beschriftungen
   klein, zweizeilig erlaubt. Brutto und Netto untereinander. Die Tabelle so breit wie der Inhaltsbereich. */
.spiHzListe { width: 100%; table-layout: auto; }
.spiHzListe th, .spiHzListe td { padding-left: 6px; padding-right: 6px; }
.spiHzListe .spiHzZelle { width: 38%; min-width: 260px; }
.spiHzListe .spiHzKopf { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.spiHzListe .spiHzTitel { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.spiHzListe .spiHzBadge { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.spiHzListe .spiZyklus ol { min-width: 0; max-width: none; width: 100%; }
.spiHzListe .spiZyklus li { font-size: 9.5px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.spiHzListe .spiBewZelle > span { display: block; margin: 1px 0; }
.spiHzListe td { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 700px) {
  .spiHzListe thead { display: none; }
  .spiHzListe, .spiHzListe tbody, .spiHzListe tr, .spiHzListe td { display: block; width: auto; }
  .spiHzListe tr { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 8px 10px; }
  .spiHzListe td { border: 0 !important; padding: 3px 0; }
  .spiHzListe td[data-l]:not(.spiHzZelle)::before { content: attr(data-l); display: inline-block; min-width: 10.5em; margin-right: 6px; font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
  .spiHzListe .spiHzZelle { width: auto; min-width: 0; }
  .spiHzListe .spiBewZelle > span { display: inline-block; margin-right: 10px; }
  .spiListeWrap { overflow-x: visible; }
}
/* (Runde 4, 1-10: unter 1280 px Quelle und SPIs ausblenden — sie stehen in der Detailansicht; Owner, Bearbeitung, Review bleiben) */
@media (min-width: 701px) and (max-width: 1279px) {
  .spiHzListe th:nth-child(9), .spiHzListe th:nth-child(10), .spiHzListe td[data-l="SPIs"], .spiHzListe td[data-l="Quelle"] { display: none; }
}
/* Runde 4 (1-8): „ALARP-Schritt zurückgesetzt — bitte prüfen“ */
.spiAlarpZurueck { display: block; margin: 4px 0 0; color: #F59E0B; font-size: 12px; font-weight: 700; }
p.spiAlarpZurueck { font-size: 13px; }
.siHinweis.a-D { border-left-color: #EF4444; } .siHinweis.a-E { border-left-color: #F59E0B; }
.siUnter { margin: 12px 0 4px; font-size: 13.5px; }

/* Prozessübersicht (Clemens, Runde 4 2-4): die Workflows als Grafik; am Handy untereinander */
.pzKopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pzSvg { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.pzSvg .pzBox { cursor: pointer; }
.pzSvg .pzBox rect { fill: var(--panel-2, #1f2428); stroke: var(--line, #3a4046); stroke-width: 2; }
.pzSvg .pzBox:hover rect, .pzSvg .pzBox:focus rect { stroke: #3b82f6; }
.pzSvg .pzBox.offen rect { stroke: #3b82f6; stroke-width: 3; }
.pzSvg .pzBox.mark rect { fill: rgba(245, 158, 11, .22); stroke: #F59E0B; stroke-width: 4; }
.pzSvg text { fill: var(--ink, #e5e7eb); text-anchor: middle; font-family: inherit; }
.pzSvg .pzNr { font-size: 18px; font-weight: 800; }
.pzSvg .pzTitel { font-size: 13px; font-weight: 600; }
.pzSvg .pzRolle { font-size: 11.5px; fill: var(--ink-dim, #9ca3af); }
.pzSvg .pzPfeil, .pzSvg .pzZweig { stroke: var(--ink-dim, #9ca3af); stroke-width: 2; fill: none; }
.pzSvg .pzZweig.ja { stroke: #22C55E; stroke-dasharray: 6 4; }
.pzSvg .pzZweig.nein { stroke: #EF4444; stroke-dasharray: 6 4; }
.pzSvg .pzSpitze { fill: var(--ink-dim, #9ca3af); }
.pzSvg .pzZweigText { font-size: 12px; fill: var(--ink-dim, #9ca3af); }
.pzListe { display: none; list-style: none; padding: 0; margin: 6px 0; }
.pzListe li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 18px; position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.pzListe li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: var(--ink-dim); }
.pzListe li.mark { border-color: #F59E0B; background: rgba(245, 158, 11, .14); }
.pzListe li span { font-size: 12.5px; color: var(--ink-dim); }
.pzListe li small { font-size: 12px; color: #F59E0B; }
.pzText { border-top: 1px solid var(--line); padding-top: 8px; }
.pzText h4 { margin: 0 0 6px; }
.pzText ul { margin: 0 0 8px; padding-left: 18px; }
.pzText li { margin: 3px 0; font-size: 13.5px; }
.pzManual { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-dim); margin: 6px 0; }
.pzManual input, #pzTeil2 { font: inherit; font-size: 13.5px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
#pzTeil2 { width: 100%; box-sizing: border-box; }
.pzGesamt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 14px; }
.pzLog ul { margin: 6px 0; padding-left: 18px; font-size: 13px; }
@media (max-width: 700px) { .pzSvg { display: none; } .pzListe { display: block; } }
.pzSvg .pzBox[data-pz^="moc"] .pzTitel { font-size: 12px; }
/* Runde 4 Teil 2 (B7): Vorschlag „RA anlegen“ je SPI außerhalb */
.siVorschlag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.siVorschlag b { color: #F59E0B; font-size: 12.5px; }
.siEntscheidung { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-dim); }

/* Occurrence report aus dem Interface: die Kategorien wörtlich (ECCAIRS VL430), nicht in Großbuchstaben */
.orKat { display: grid; gap: 8px; margin-top: 10px; font-size: 13.5px; } .orKat label.tick { text-transform: none; letter-spacing: 0; align-items: flex-start; }