/* ---------------------------------------------------------------------------
   Vectral 2.0 — Modellrechnung, Rechenlauf, Ergebnis (Screens 12–15,
   Entwicklungsseite Lauf-Test). T18 n: aus app.css herausgelöst.
--------------------------------------------------------------------------- */

.radiorow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px) { .radiorow { grid-template-columns: 1fr; } }
.radio {
  display: flex; align-items: center; gap: 11px; font-size: 13px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-weight: 600;
}
.radio:hover { border-color: var(--border-strong); }
.radio { transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.radio:active { transform: scale(.985); }
.radio i { transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out); }
.radio i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); display: inline-block; background: var(--surface);
}
.radio.is-on { border-color: var(--navy); background: var(--navy-soft); color: var(--navy); }
.radio.is-on i { border-color: var(--navy); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--navy-fill); }

/* === Vergleich (Ergebnis) =============================================== */

.cmp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1000px) { .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp h4 { font-size: 13px; margin-bottom: 14px; }
.cmp-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmp-bar .fill { height: 22px; border-radius: 4px; flex: none; }
.cmp-bar .fill.ist { background: var(--ist); }
.cmp-bar .fill.vor { background: linear-gradient(90deg, var(--vorschlag), var(--vorschlag-2)); }
.cmp-bar .lbl { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cmp-bar .lbl.vor { color: var(--vorschlag); font-weight: 700; }
.cmp-delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 20px; font-weight: 800; color: var(--vorschlag); letter-spacing: -.02em;
}

.vergleich2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1000px) { .vergleich2 { grid-template-columns: 1fr; } }
.vergleich2 .vh {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px; color: var(--muted);
}
.vergleich2 .vh.is-vor { color: var(--vorschlag); }

/* === Kernaussage-Fläche (Verlauf) ======================================= */

.banner {
  padding: 34px 36px;
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
}
.banner .b-kicker {
  width: 100%; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .78; margin-bottom: 4px;
}
.banner .b-main { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.banner .b-side { font-size: 24px; font-weight: 500; opacity: .9; }
.banner .b-badge { margin-left: auto; align-self: center; position: relative; z-index: 1; }

.log {
  font-family: var(--mono); font-size: 12px; line-height: 1.8;
  background: var(--log-bg); color: var(--log-text);
  border-radius: var(--radius); padding: 16px 18px;
  height: 300px; overflow-y: auto;
  border: 1px solid var(--log-line);
}
.log > div {
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateX(-4px); }
}
.log .t  { color: var(--log-dim); margin-right: 10px; }
.log .ok { color: var(--log-ok); }
.log .ph { color: var(--log-phase); font-weight: 700; }

.phaselist { display: grid; gap: 4px; }
.phaselist .ph-row {
  display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600;
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted);
}
.phaselist .ph-row { transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.phaselist .ph-dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); flex: none;
  transition: background-color var(--dur-hover) ease;
}
.phaselist .is-run { background: var(--navy-soft); color: var(--navy); }
.phaselist .is-run .ph-dot { background: var(--navy-fill); }
/* Der Ring pulsiert nur, solange gerechnet wird: Zustandsanzeige, kein Schmuck. */
.phaselist .is-run .ph-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: rgb(22 48 107 / .16);
  animation: ph-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes ph-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .25; }
}
.phaselist .is-done { color: var(--ok); }
.phaselist .is-done .ph-dot { background: var(--ok); }

/* Parameter-Formular neben Ergebnisreferenz */
.formsplit { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; align-items: start; }
body.notes-on .formsplit { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .formsplit { grid-template-columns: 1fr; } }

/* Verbindungszustand des Ereignis-Streams (Lauf-Test) */
.stream-state { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.stream-state b { color: var(--ink); }
.log.is-tall { height: 420px; }
.log .err  { color: var(--danger); font-weight: 700; }
.log .warn { color: var(--warn); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .phaselist .is-run .ph-dot::after { animation: none; }
  .log > div { transition-property: opacity; }
  .radio:active { transform: none; }
}

/* === B7: Lauf-Screens 12/13 und Optimierung ============================= */
/* Nur vorhandene Tokens; Optik der Wireframes (Karten, Radios, Badges,
   Phasenliste, Log). Reiter nutzen .pills aus bausteine.css.              */

.modell-reiter { margin-top: 16px; }
.modell-reiter a { min-width: 150px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Radios mit Erklärung (Wagen-Modus, Dialog-Optionen) */
.radio { align-items: flex-start; }
.radio i { margin-top: 1px; }
.radio .wd-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.radio .wd-label { font-weight: 700; }
.radio .wd-vorschau { font-size: 12px; color: var(--navy); font-weight: 600; }
.radio .wd-erklaerung { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.radio.is-on .wd-erklaerung { color: var(--navy); opacity: .85; }
.radiorow .radio { align-items: center; }
.radiorow .zt-n { min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.wd-optionen { display: grid; gap: 10px; }

/* Einheiten-Suffix an Zahlenfeldern */
.einheit { display: inline-flex; align-items: center; gap: 8px; }
.einheit .input { max-width: 150px; }
.einheit .suffix { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.feldfehler { display: block; font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 5px; }
.zonen-details summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.card.is-disabled { opacity: .7; background: var(--surface-2); }

/* Tage-Chips (konkrete Tage, K12) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 12px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.chip-tag:hover { border-color: var(--border-strong); }
.chip-tag:has(input:checked) { background: var(--navy-soft); border-color: var(--navy); color: var(--navy); }
.chip-tag input { width: 14px; height: 14px; accent-color: var(--link); margin: 0; }

/* Lauf-Historie */
#historie tr.is-aktiv td { background: var(--navy-soft); }
.banner-nachsatz { margin: -8px 0 16px; padding: 0 18px; }

/* Screen 13: Kopf, Dialog, Abschluss */
.lauf-status { gap: 10px; }
.wagendialog { border-color: var(--navy-line); border-left: 4px solid var(--navy); }
.wagendialog.is-bestaetigt { border-left-color: var(--ok); }
.wd-frist b { display: block; font-size: 14px; margin-top: 2px; }
.wd-frist .hint.is-knapp { color: var(--warn); font-weight: 700; }
.wd-frist .hint.is-abgelaufen { color: var(--danger); font-weight: 700; }
.laufsplit { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) { .laufsplit { grid-template-columns: 1fr; } }
.phaselist .ph-name { flex: 1; min-width: 0; }
.phaselist .ph-dauer { font-size: 11.5px; font-weight: 600; opacity: .8; }
.phaselist .is-fehler { color: var(--danger); }
.phaselist .is-fehler .ph-dot { background: var(--danger); }
.phaselist .is-abgebrochen { color: var(--muted-2); text-decoration: line-through; }
.inv-liste { display: grid; gap: 6px; }
.inv-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.inv-details { width: 100%; padding-left: 4px; }
.inv-details summary { cursor: pointer; color: var(--navy); }
.log .warnzeile, .log .fehlerzeile { font-weight: 600; }
.log .verbindung { color: var(--log-dim); font-style: italic; }
.abschluss.is-ok { border-color: var(--ok-line); border-left: 4px solid var(--ok); }
.abschluss.is-fehler { border-color: var(--danger-line); border-left: 4px solid var(--danger); }
.abschluss.is-abbruch { border-color: var(--border-strong); border-left: 4px solid var(--muted-2); }
.kz-tabelle td, .kz-tabelle th { white-space: nowrap; }
.warn-liste li { margin-top: 4px; }

/* === B8: Ergebnis-Screen 14 ============================================ */
/* Vergleichswahl, zwei Grundrisse mit Gang-Beschriftung, Balkenpaare mit
   Trend, Prüfmodus-Tabellen, gelber Hinweisbanner (vergleichbar: false). */

.banner.is-warn {
  display: block; padding: 14px 18px; margin: 0 0 16px;
  background: var(--warn-soft); color: var(--ink);
  border: 1px solid var(--warn-line); border-radius: var(--radius);
  box-shadow: none; overflow: visible;
}
.banner.is-warn::before, .banner.is-warn::after { content: none; }
.banner.is-warn .bn-title { color: var(--warn); }
.hinweis-slot:empty { display: none; }
.hinweis-slot .banner { margin-top: 16px; }
.erg-kopfzeile { align-items: flex-end; }
.erg-vergleichswahl { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.erg-vergleichswahl .input { min-width: min(360px, 100%); max-width: 100%; }
.erg-vergleichswahl > * { max-width: 100%; }
.erg-vergleichswahl .ff-val { font-size: 12.5px; }
.vergleich2 .ph-labels { padding: 14px 0; }
.vergleich2 .gr-label { display: flex; gap: 6px; justify-content: space-between; }
.hm-delta { font-weight: 600; color: var(--muted-2); }
.hm-delta.is-weniger { color: var(--vorschlag); }
.hm-delta.is-mehr { color: var(--danger); }
.cmp-reihe-titel { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.cmp.is-schlechter .cmp-delta { color: var(--danger); }
.cmp.is-gleich .cmp-delta { color: var(--muted); }
.cmp.is-schlechter .cmp-bar .fill.vor { background: linear-gradient(90deg, var(--danger), #d9534f); }
.cmp.is-schlechter .cmp-bar .lbl.vor { color: var(--danger); }
.pm-tabelle td.pm-rel { font-weight: 700; color: var(--vorschlag); }
.pm-tabelle tr.muted td { color: var(--muted); }
.pm-tabelle td[title] { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
#pruefmodus [data-seiten]:empty { display: none; }

/* === B9: Szenario S3 — ABC-Belegung, Umzugsplan, S3-Abschnitt ============ */
/* Klassenfarben wie Screen 9 (A/B/C aus der Farbrampe, D violett, leer
   schraffiert); bewegte Artikel als Rahmen (teal = zieht hierher, rot = zieht
   weg). Gelieferte Klassen, keine Berechnung. */

.zelle.k-A { background: var(--ramp-5); }
.zelle.k-B { background: var(--ramp-3); }
.zelle.k-C { background: var(--ramp-2); }
.zelle.k-D { background: #8b5cf6; }
.zelle.k-leer { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--surface) 3px, var(--surface) 6px); }
.zelle.is-bewegt { box-shadow: inset 0 0 0 2px var(--vorschlag); }
.zelle.is-bewegt.is-weg { box-shadow: inset 0 0 0 2px var(--danger); }
.legende-q .lq i.k-A { background: var(--ramp-5); }
.legende-q .lq i.k-B { background: var(--ramp-3); }
.legende-q .lq i.k-C { background: var(--ramp-2); }
.legende-q .lq i.k-D { background: #8b5cf6; }
.legende-q .lq i.k-leer { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--surface) 3px, var(--surface) 6px); border: 1px solid var(--border); }
.legende-q .lq i.is-bewegt { box-shadow: inset 0 0 0 2px var(--vorschlag); }
.legende-q .lq i.is-bewegt.is-weg { box-shadow: inset 0 0 0 2px var(--danger); }
.layout-steuerung { gap: 14px; align-items: center; }
.layout-sicht button { padding: 6px 12px; }
.s3-tabelle td.small { max-width: 220px; white-space: normal; }
.s3-abschnitt { border-color: var(--vorschlag-line); border-left: 4px solid var(--vorschlag); }
.s3-abschnitt h4 { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.umzug-zusammenfassung { border-left: 4px solid var(--vorschlag); }
#pruefmodus [data-zusammenfassung]:empty { display: none; }

/* === B10: Historie & Freigabe (Screen 15) ================================ */
/* Warnkarte mit roter Kante (Wireframe 15), dreispaltiges Freigabe-Formular,
   Lauf-Info und Entwurfs-Status als Zeilen, Vorschau als gelber Banner. */

.warn-karte { border-color: var(--danger); border-left: 4px solid var(--danger); }
.warn-karte .warn-liste li { margin-top: 4px; }
.fr-felder { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(200px, 1fr) minmax(220px, 1.4fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .fr-felder { grid-template-columns: 1fr; } }
.fr-felder .input { width: 100%; }
.fr-info { display: grid; gap: 4px; color: var(--ink); }
.fr-info .badge { vertical-align: middle; }
.fr-entwurf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#vorschauSlot .banner { margin-bottom: 0; }
#entwurfSlot:empty, #vorschauSlot:empty { display: none; }
.table-std .tiny a { color: var(--navy); }
.fr-hash { white-space: nowrap; }
.fr-hash .hash { word-break: normal; }

/* B28: eingeklappte Kennzahlen im Pilot-Umfang (Screen 13) */
.kz-details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.kz-details summary:hover { color: var(--ink); }
.kz-details[open] summary { color: var(--navy); font-weight: 700; }
.kz-voll td, .kz-voll th { font-size: 12.5px; }

/* B28: Drilldown Wagenplanung (Screen 14) */
:root { --phase-ganggleich: #16306B; --phase-basis: #6030D8; --phase-teilmenge: #8B69F5; --phase-erweiterung: #C9CFD9; }
.pm-krumen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; margin-top: 12px; }
.pm-krumen .is-aktuell { font-weight: 700; color: var(--navy); }
.pm-krumen-trenner { color: var(--muted-2); }
.phase-balken { margin-bottom: 16px; }
.phase-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.phase-farbe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.phase-zeile { display: grid; grid-template-columns: minmax(80px, 160px) 1fr; gap: 12px; align-items: center; margin-bottom: 6px; }
.phase-bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--ramp-1); }
.phase-bar span { display: block; height: 100%; }
.phase-ganggleich { background: var(--phase-ganggleich); } .phase-basis { background: var(--phase-basis); }
.phase-teilmenge { background: var(--phase-teilmenge); } .phase-erweiterung { background: var(--phase-erweiterung); }
.pm-tabelle tr.is-klickbar { cursor: pointer; } .pm-tabelle tr.is-klickbar:hover td { background: var(--navy-soft); }

/* Schmale Breiten (B12 §2a) */
@media (max-width: 480px) {
  .cmp-bar .lbl, .cmp-bar .lbl.vor, .legende-q, .legende-q .lq { white-space: normal; overflow-wrap: anywhere; }
  .legende-q { flex-wrap: wrap; }
  .warn-liste li, .warn-liste a, .warn-liste span { white-space: normal; overflow-wrap: anywhere; }
  .fr-hash { white-space: normal; overflow-wrap: anywhere; }
  .phase-zeile { grid-template-columns: 1fr; }
}