/* Styles nur fuer Modul F, auf den Tokens und Bausteinen aus design.css. Gemeinsame
   Grundform der Werkzeuge C und F (.cf-tool, .cf-aus, Shell) in console-shell.css.
     Fallakte  -> Security-Incident-Ticket (ServiceNow SIR, TheHive): Befehlsleiste,
                  Statusfluss als Pfeilkette, Fristuhren, Formularfelder, Arbeitsnotiz
                  und Aktivitaetsstrom mit Avataren, Seitenleiste mit Vorgangsfeldern.
     EDR       -> Geraeteseite (Defender, Falcon) im dunklen Set: Reiter im Kopf,
                  Geraetekopf mit Risiko und Zustand, Befehlsleiste, Kennzahlen,
                  Alarmliste, Prozessbaum mit Ampel, Live-Response-Terminal.
     MVP       -> Behoerdenportal, nuechtern: Band als Kopf, Pfad, Abschnittsnavigation,
                  nummerierte Abschnitte, Pflichtfelder, feste Fussleiste. */

/* Im Fenster (V3): das Werkzeug fuellt das Fenster von Kante zu Kante */
.ws-app-fill > .fa.cf-tool,
.ws-app-fill > .edr.cf-tool,
.ws-app-fill > .mvp.cf-tool { border: 0; border-radius: 0; box-shadow: none; }

/* ================= Fallakte ================= */
.fa { background: var(--ds-bg-surface); }
.fa-cmdbar { padding-left: var(--sp-3); }

/* Satzkopf: Statusfluss als Pfeilkette, Prioritaet rechts */
.fa-rec {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bd-subtle);
  flex-shrink: 0;
}
.fa-flow { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.fa-flow-s {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 20px 0 24px;
  background: var(--ds-bg-muted); color: var(--ds-text-3);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
}
.fa-flow-s:first-child { padding-left: 14px; border-radius: var(--r-s) 0 0 var(--r-s); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.fa-flow-s svg { width: 14px; height: 14px; stroke-width: 2.5; }
.fa-flow-s.is-done { background: var(--ds-ok-soft); color: var(--ds-ok-text); }
.fa-flow-s.is-on { background: var(--ds-primary); color: var(--ds-text-inverse); }
.fa-prio { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; font-size: var(--fs-s); color: var(--ds-text-3); }
.fa-prio-v {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  background: var(--ds-bad); color: var(--ds-text-inverse); font-weight: var(--fw-bold); font-size: var(--fs-xs);
}
.fa-prio-t { color: var(--ds-bad-text); font-weight: var(--fw-semibold); }

/* Fristuhren */
.fa-sla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
  background: var(--ds-bg-subtle); border-bottom: var(--bd-subtle);
  flex-shrink: 0;
}
.fa-sla-k { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); min-width: 0; }
.fa-sla-k + .fa-sla-k { border-left: var(--bd-subtle); }
.fa-sla-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap; }
.fa-sla-v { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ds-text); letter-spacing: var(--ls-tight); }
.fa-sla-k.is-klass .fa-sla-l::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ds-bad); vertical-align: 1px; }
.fa-sla-k.is-frist { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); align-items: end; }
.fa-sla-k.is-frist .fa-sla-l { grid-column: 1 / -1; }
.fa-sla-bar { grid-column: 2; grid-row: 2; align-self: center; height: 6px; border-radius: var(--r-pill); background: var(--ds-bg-sunken); overflow: hidden; }
.fa-sla-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ds-info); transition: width var(--dur-3) var(--ease); }
.fa-sla-bar.ton-warn > span { background: var(--ds-warn); }
.fa-sla-bar.ton-bad > span { background: var(--ds-bad); }
.fa-sla-bar.ton-ok > span { background: var(--ds-ok); }
.fa-sla-s { grid-column: 2; grid-row: 3; font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-info-text); }
.fa-sla-s.ton-warn { color: var(--ds-warn-text); }
.fa-sla-s.ton-bad { color: var(--ds-bad-text); }
.fa-sla-s.ton-ok { color: var(--ds-ok-text); }
.fa-sla-k.is-frist .fa-sla-v { grid-row: 2 / span 2; }

/* Rumpf: Inhalt links, Vorgangsfelder rechts */
.fa-main { display: flex; flex: 1; min-height: 0; }
.fa-body { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-6) var(--sp-6); }
.fa-sec { margin-top: var(--sp-5); }
.fa-sec-h {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: var(--bd-subtle);
  font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text);
}
.fa-sec-tools { margin-left: auto; display: inline-flex; }
.fa-sort.ds-cmd { height: 28px; font-size: var(--fs-s); }

/* Angaben aus der Triage als schreibgeschuetzte Formularfelder */
.fa-triage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.fa-ro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fa-ro-l { font-size: var(--fs-s); color: var(--ds-text-3); }
.fa-ro-v {
  display: flex; align-items: center; height: var(--ds-control-h); padding: 0 10px;
  background: var(--ds-bg-subtle); border: var(--bd); border-radius: var(--r-s);
  font-size: var(--fs-mono); color: var(--ds-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Arbeitsnotiz der Rufbereitschaft: Autor, darunter die Eintraege als Zeitleiste */
.fa-notiz-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-s); }
.fa-notiz-wer { font-weight: var(--fw-semibold); color: var(--ds-text); }
.fa-notiz-rolle { color: var(--ds-text-3); }
.fa-notiz-art {
  margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--ds-warn-soft); color: var(--ds-warn-text);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.fa-strom { list-style: none; margin: 0 0 0 11px; padding: 0 0 0 var(--sp-4); position: relative; border-left: 2px solid var(--ds-border-subtle); }
.fa-strom li {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3);
  padding: 7px 0;
  font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text);
}
.fa-strom li::before {
  content: ''; position: absolute; left: calc(-1 * var(--sp-4) - 6px); top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-bg-surface); border: 2px solid var(--ds-gray-400); box-sizing: border-box;
}
.fa-zeit { color: var(--ds-text-3); font-size: var(--fs-mono); padding-top: 1px; }

/* Aktivitaetsstrom */
.fa-akt { list-style: none; margin: 0; padding: 0; }
.fa-akt-e { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--bd-subtle); animation: fa-ein var(--dur-2) var(--ease-out) both; }
.fa-akt-e:last-child { border-bottom: 0; }
@keyframes fa-ein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.fa-akt-kopf { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); }
.fa-akt-wer { font-weight: var(--fw-semibold); color: var(--ds-text); }
.fa-akt-art { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-text-3); }
.fa-akt-art svg { width: 13px; height: 13px; color: var(--ds-icon); }
.fa-akt-zeit { margin-left: auto; color: var(--ds-text-3); font-size: var(--fs-mono); }
.fa-akt-text { margin-top: 2px; font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text); }
.fa-leer.ds-empty-v3 { min-height: 0; height: auto; padding: var(--sp-6) var(--sp-4); }

/* Seitenleiste: Vorgangsfelder und Bewertung */
.fa-side {
  width: 340px; flex-shrink: 0; overflow-y: auto;
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
  background: var(--ds-bg-subtle); border-left: var(--bd-subtle);
}
.fa-side-h { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.fa-felder { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-3) var(--sp-3); margin: 0; font-size: var(--fs-s); }
.fa-felder dt { color: var(--ds-text-3); padding-top: 3px; }
.fa-felder dd { margin: 0; color: var(--ds-text); min-width: 0; overflow-wrap: anywhere; }
.fa-dim { display: block; margin-top: 4px; color: var(--ds-text-3); line-height: var(--lh-snug); }
.fa-frist { display: block; margin-top: 2px; color: var(--ds-text-3); }
.fa-person, .fa-ci { display: flex; align-items: center; gap: var(--sp-2); }
.fa-person { align-items: flex-start; }
.fa-person-n { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.fa-person-n .fa-dim { margin-top: 1px; }
.fa-ci svg { width: 15px; height: 15px; color: var(--ds-icon); flex-shrink: 0; }
.fa-side .ds-field { margin-bottom: var(--sp-4); }
.fa-side .ds-label { display: block; margin-bottom: 6px; }
.fa-mal { display: flex; width: 100%; }
.fa-mal .ds-btn { flex: 1; min-width: 0; }
.fa-side .ds-select { width: 100%; }

/* ================= EDR-Konsole ================= */
.edr { background: var(--ds-dk-bg); }
.edr .ds-toolhead-tabs { margin-left: var(--sp-5); }
.edr .ds-toolhead-tab { font-size: var(--fs-m); }
.edr .ds-toolhead-tab:focus-visible { outline: var(--focus-outline); outline-offset: -4px; }

.edr-dev {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  background: var(--ds-dk-surface);
  flex-shrink: 0;
}
.edr-dev-id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.edr-dev-mark {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r-l);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--ds-dk-surface-3), var(--ds-dk-surface-2));
  border: 1px solid var(--ds-dk-border-strong); color: var(--ds-dk-text-2);
}
.edr-dev-mark svg { width: 24px; height: 24px; stroke-width: 1.7; }
.edr-dev-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.edr-dev-host { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-dk-text); }
.edr-dev-sub { font-size: var(--fs-s); color: var(--ds-dk-text-3); }
.edr-dev-sub .ds-mono { font-size: var(--fs-s); }
.edr-tags { display: flex; gap: var(--sp-1); margin-top: 2px; }
.edr-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border: 1px solid var(--ds-dk-border-strong); border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--ds-dk-text-2);
}
.edr-dev-kv { display: flex; margin: 0; align-items: stretch; flex-wrap: wrap; row-gap: var(--sp-2); }
.edr-dev-kv > div { padding: 0 var(--sp-4); border-left: 1px solid var(--ds-dk-border); }
.edr-dev-kv > div:first-child { border-left: 0; padding-left: 0; }
.edr-dev-kv dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-dk-text-3); margin-bottom: 6px; white-space: nowrap; }
.edr-dev-kv dd { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--ds-dk-text); white-space: nowrap; }
.edr-dev-kv .ds-pill .ds-mono { font-size: var(--fs-xs); }
.edr-dev-dim { color: var(--ds-dk-text-3); }
.edr-cmdbar { padding-left: var(--sp-4); border-top: 1px solid var(--ds-dk-border); }
.edr.cf-tool.ds-dark .ds-count.ds-count--neutral { background: var(--ds-dk-surface-3); color: var(--ds-dk-text-2); }
/* Live Response: Geraetekopf schmal, das Terminal bekommt die Hoehe */
.edr.ist-konsole .edr-dev { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.edr.ist-konsole .edr-dev-mark { width: 34px; height: 34px; border-radius: var(--r-m); }
.edr.ist-konsole .edr-dev-mark svg { width: 18px; height: 18px; }
.edr.ist-konsole .edr-tags, .edr.ist-konsole .edr-dev-sub { display: none; }
.edr.ist-konsole .edr-dev-kv > div { display: flex; align-items: center; gap: var(--sp-2); }
.edr.ist-konsole .edr-dev-kv dt { margin-bottom: 0; }
.edr .edr-cmdbar .edr-cmd-iso svg { color: var(--ds-bad-dk); }

.edr-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4); }
.edr-inhalt.ist-konsole { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.edr-konsole:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Kennzahlen der Geraeteseite */
.edr-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.edr-kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ds-dk-surface); border: 1px solid var(--ds-dk-border); border-radius: var(--r-m);
}
.edr-kpi-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-dk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edr-kpi-v { font-size: var(--fs-xxl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ds-dk-text); font-variant-numeric: tabular-nums; }
.edr-kpi-v--s { font-size: var(--fs-xl); }
.edr-kpi-s { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ds-dk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edr-kpi-s.ds-mono { font-size: var(--fs-s); }
.edr-sevbar { display: flex; gap: 2px; height: 6px; margin: 2px 0; border-radius: var(--r-pill); overflow: hidden; background: var(--ds-dk-surface-3); }
.edr-sevbar > span { display: block; height: 100%; }
.s-h { background: var(--ds-bad-dk); }
.s-m { background: var(--ds-warn-dk); }
.s-l { background: var(--ds-gray-500); }
.edr-leg { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.edr-leg:first-child { margin-left: 0; }

.edr-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-3); align-items: start; }
.edr-cols-proc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.edr-stapel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.edr-box { background: var(--ds-dk-surface); border: 1px solid var(--ds-dk-border); border-radius: var(--r-m); padding: 0 0 var(--sp-2); min-width: 0; overflow: hidden; }
.edr-box--flach { padding: 0; }
.edr-box-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.edr-box-head h4 { margin: 0; font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-dk-text); }
.edr-tab tbody td { height: auto; padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.edr-tab th:first-child, .edr-tab td:first-child { padding-left: var(--sp-4); }
.edr-zeitzelle { white-space: nowrap; color: var(--ds-dk-text-2); }
.edr-alarm { font-weight: var(--fw-semibold); color: var(--ds-dk-text); }
.edr-alarm-sub, .edr-alarm-det { font-size: var(--fs-xs); color: var(--ds-dk-text-3); margin-top: 2px; line-height: var(--lh-snug); }
.edr-alarm-sub .ds-mono { font-size: var(--fs-xs); }
.edr-alarmzeile td:first-child { box-shadow: inset 3px 0 0 var(--ds-gray-500); }
.edr-alarmzeile.sev-h td:first-child { box-shadow: inset 3px 0 0 var(--ds-bad-dk); }
.edr-alarmzeile.sev-m td:first-child { box-shadow: inset 3px 0 0 var(--ds-warn-dk); }
.edr-alarmzeile { transition: background var(--dur-1) var(--ease); }
.edr-alarmzeile:hover { background: var(--ds-dk-hover); }
.edr-th-akt, .edr-td-akt { width: 36px; padding-left: 0; padding-right: var(--sp-2); text-align: right; }
.edr-td-akt .ds-iconbtn { opacity: 0.7; }
.edr-alarmzeile:hover .ds-iconbtn, .edr-td-akt .ds-iconbtn.ds-menu-anker { opacity: 1; }

.edr-verlauf { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2); }
.edr-verlauf li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: 8px 0; border-top: 1px solid var(--ds-dk-border); font-size: var(--fs-s); color: var(--ds-dk-text); }
.edr-verlauf li:first-child { border-top: 0; }
.edr-verlauf-ic { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-dk-surface-3); color: var(--ds-dk-text-2); }
.edr-verlauf-ic svg { width: 13px; height: 13px; }
.edr-verlauf-t { padding-top: 3px; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.edr-verlauf-z { padding-top: 3px; color: var(--ds-dk-text-3); }
.edr-leer.ds-empty-v3 { min-height: 0; height: auto; padding: var(--sp-5) var(--sp-4); }
/* Info-Center: Prozessabbilder und Untersuchungspaket zum Download */
.edr-downloads { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2); }
.edr-downloads li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--ds-dk-border); font-size: var(--fs-s); color: var(--ds-dk-text); }
.edr-downloads li:first-child { border-top: 0; }
.edr-dl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.edr-dl-t .ds-mono { overflow-wrap: anywhere; }
.edr-dl-sub { color: var(--ds-dk-text-3); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.edr-kv { padding: 0 var(--sp-4) var(--sp-2); grid-template-columns: 136px minmax(0, 1fr); }
.edr-cmd { display: block; padding: 6px var(--sp-2); background: var(--ds-dk-term-bg); border: 1px solid var(--ds-dk-border); border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-warn-text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Zeitachse */
.edr-zeit-werkzeug {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ds-dk-border);
}
.edr-suchfeld { flex: 1; max-width: 420px; }
.edr-quelle { white-space: nowrap; }
.edr-qtag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ds-dk-text-2); }
.edr-qtag::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--ds-dk-icon); flex-shrink: 0; }
.edr-qtag.q0::before { background: var(--ds-info-dk); }
.edr-qtag.q1::before { background: #a78bfa; }
.edr-qtag.q2::before { background: var(--ds-gray-400); }
.edr-qtag.q3::before { background: var(--ds-ok-dk); }
.edr-qtag.q4::before { background: var(--ds-warn-dk); }
.edr-msg { line-height: var(--lh-snug); overflow-wrap: anywhere; }
.edr-zeit tbody tr:hover { background: var(--ds-dk-hover); }

/* Prozessbaum: Einrueckung mit Zweig, Spalten fest, Ampel im Status */
.edr-pkopf, .edr .edr-pknoten { display: grid; grid-template-columns: minmax(0, 2.2fr) 52px minmax(0, 0.9fr) minmax(0, 1.2fr); gap: var(--sp-2); align-items: center; }
.edr-pkopf {
  padding: 0 var(--sp-4) 6px; border-bottom: 1px solid var(--ds-dk-border);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-dk-text-3);
}
.edr-baum, .edr-baum ul { list-style: none; margin: 0; padding: 0; }
.edr .edr-pknoten {
  width: 100%; min-height: 34px; padding: 4px var(--sp-4);
  border-bottom: 1px solid var(--ds-dk-border);
  font-size: var(--fs-s); color: var(--ds-dk-text); text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.edr .edr-pknoten:hover { background: var(--ds-dk-hover); }
.edr .edr-pknoten.sel { background: var(--ds-primary-soft); box-shadow: inset 3px 0 0 var(--ds-primary); }
.edr .edr-pknoten:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.edr-pknoten.tot { color: var(--ds-dk-text-3); }
.edr-pknoten.tot .edr-pn { text-decoration: line-through; text-decoration-color: var(--ds-dk-text-3); }
.edr-pname { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; min-width: 0; }
.edr-pn { overflow: hidden; text-overflow: ellipsis; }
.edr-pzweig { color: var(--ds-dk-text-3); text-decoration: none; display: inline-block; }
.edr-pic { display: inline-flex; color: var(--ds-dk-icon); flex-shrink: 0; }
.edr-pic svg { width: 14px; height: 14px; }
.edr-pknoten.sel .edr-pic { color: var(--ds-primary-text); }
.edr-palarm { display: inline-flex; color: var(--ds-bad-dk); flex-shrink: 0; }
.edr-palarm svg { width: 14px; height: 14px; }
.edr-ppid { text-align: right; color: var(--ds-dk-text-2); font-size: var(--fs-s); }
.edr-puser, .edr-pstat { color: var(--ds-dk-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edr-pstat { display: flex; align-items: center; gap: 7px; }
.edr-ampel { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ds-gray-500); }
.edr-ampel.an { background: var(--ds-ok-dk); }
.edr-ampel.stop { background: var(--ds-bad-dk); }

/* Detailbereich des Prozesses */
.edr-det-kopf { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--ds-dk-border); margin-bottom: var(--sp-3); }
.edr-det-ic { width: 36px; height: 36px; border-radius: var(--r-m); display: inline-flex; align-items: center; justify-content: center; background: var(--ds-dk-surface-3); color: var(--ds-dk-text-2); flex-shrink: 0; }
.edr-det-ic svg { width: 18px; height: 18px; }
.edr-det-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.edr-det-name { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-dk-text); overflow: hidden; text-overflow: ellipsis; }
.edr-det-sub { font-size: var(--fs-s); color: var(--ds-dk-text-3); }
.edr-det-sub .ds-mono { font-size: var(--fs-s); }
.edr-detalarme { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2); }
.edr-detalarme li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: 7px 0; border-top: 1px solid var(--ds-dk-border); font-size: var(--fs-s); }
.edr-detalarme li:first-child { border-top: 0; }
.edr-detalarm-t { color: var(--ds-dk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edr-detalarm-z { color: var(--ds-dk-text-3); }
.edr-detail .ds-empty-v3 { min-height: 260px; }

/* Live-Response: Reiter der Sitzung, Terminal auf voller Hoehe, Statuszeile */
.lr-bar {
  display: flex; align-items: stretch; justify-content: space-between; gap: var(--sp-3);
  height: 34px; padding: 0 var(--sp-4) 0 0;
  background: var(--ds-dk-bg); border-bottom: 1px solid var(--ds-dk-border);
  font-size: var(--fs-xs); color: var(--ds-dk-text-3);
  flex-shrink: 0;
}
.lr-bar-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4); margin-bottom: -1px;
  background: var(--ds-dk-term-bg); color: var(--ds-dk-text);
  border-right: 1px solid var(--ds-dk-border); box-shadow: inset 0 2px 0 var(--ds-bad-dk);
  font-size: var(--fs-s);
}
.lr-bar-tab svg { width: 14px; height: 14px; color: var(--ds-dk-icon); }
.lr-bar-meta { display: inline-flex; align-items: center; gap: 4px; }
.lr-shell { flex: 1; min-height: 0; }
.edr .lr-shell > .sh-term { height: 100%; box-sizing: border-box; }
.edr .lr-status {
  display: flex; align-items: stretch; gap: 0; padding: 0;
  min-height: 30px; flex-shrink: 0;
  background: var(--ds-dk-surface); border-top: 1px solid var(--ds-dk-border);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-dk-text-3);
}
.lr-st-host { display: inline-flex; align-items: center; padding: 0 var(--sp-3); background: var(--ds-bad-dk); color: var(--ds-dk-term-bg); font-weight: var(--fw-bold); }
.lr-st-cell { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border-right: 1px solid var(--ds-dk-border); }
.lr-st-l { font-family: var(--font-sans); }
.edr .lr-status b { color: var(--ds-dk-text); font-weight: var(--fw-semibold); }
.edr .lr-status b.on { color: var(--ds-ok-dk); }
.edr .lr-status b.off { color: var(--ds-warn-dk); }
.lr-st-agent { display: inline-flex; align-items: center; margin-left: auto; padding: 0 var(--sp-3); }

/* Bestaetigung einer Aktion: Dialog aus dem Designsystem, im Werkzeug verankert */
.edr-schleier {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 96px;
  background: color-mix(in srgb, var(--ds-dk-term-bg) 65%, transparent);
  animation: ds-veil-in var(--dur-2) var(--ease-out) both;
}
.edr { position: relative; }
.edr-dlg { max-width: calc(100% - 32px); }
.edr-dlg-mark.ds-window-mark { background: var(--ds-bad-dk); color: var(--ds-dk-term-bg); }
.edr-dlg .ds-dialog-bar .ds-mono { font-size: var(--fs-s); }
.edr-dlg .ds-dialog-body p { margin: 0 0 var(--sp-3); }

/* ================= Meldeportal (Behoerdenportal) ================= */
.mvp.cf-tool { max-width: none; box-shadow: none; }
.mvp .ds-toolhead--accent .ds-toolhead-sub,
.mvp .ds-toolhead--accent .ds-toolhead-meta-l { color: rgba(255, 255, 255, 0.8); }
.mvp .ds-toolhead--accent .ds-toolhead-mark { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.mvp-pfad {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  height: 38px; padding: 0 var(--sp-6); flex-shrink: 0;
  background: var(--ds-bg-subtle); border-bottom: var(--bd-subtle);
}
.mvp-pfad-org { font-size: var(--fs-s); color: var(--ds-text-3); white-space: nowrap; }
.mvp-scroll { flex: 1; min-height: 0; overflow-y: auto; background: var(--ds-bg-surface); scroll-padding-top: var(--sp-4); }
.mvp-seite { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: var(--sp-10); padding: var(--sp-5) var(--sp-6) var(--sp-8); }
.mvp-seite.mit-nav { grid-template-columns: 220px minmax(0, 760px); }
.mvp .mvp-body { min-width: 0; padding: 0; }

/* Abschnittsnavigation */
.mvp-nav { position: sticky; top: var(--sp-5); align-self: start; padding-top: 4px; }
.mvp-nav-h { display: block; margin: 0 0 var(--sp-2) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.mvp-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mvp .mvp-nav-i {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); width: 100%;
  min-height: 34px; padding: 4px var(--sp-2); border-radius: var(--r-s);
  font-size: var(--fs-s); color: var(--ds-text-2); text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.mvp .mvp-nav-i:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.mvp .mvp-nav-i:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.mvp-nav-nr {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--ds-border-strong); background: var(--ds-bg-surface);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ds-text-2);
}
.mvp-nav-nr svg { width: 12px; height: 12px; stroke-width: 3; }
.mvp-nav-i.st-ok .mvp-nav-nr { background: var(--ds-ok); border-color: var(--ds-ok); color: var(--ds-text-inverse); }
.mvp-nav-i.st-err { color: var(--ds-bad-text); }
.mvp-nav-i.st-err .mvp-nav-nr { background: var(--ds-bad); border-color: var(--ds-bad); color: var(--ds-text-inverse); }

/* Schrittfolge */
.mvp-kopfzeile { padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); border-bottom: var(--bd); }
.mvp-schritte { display: flex; align-items: center; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.mvp-schritte li { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--ds-text-3); }
.mvp-schritte li + li::before { content: ''; width: 36px; height: 2px; margin-right: var(--sp-1); background: var(--ds-border-strong); border-radius: 1px; }
.mvp-schritte li.is-done + li::before { background: var(--ds-primary); }
.mvp-schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--ds-border-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.mvp-schritt-nr svg { width: 13px; height: 13px; stroke-width: 3; }
.mvp-schritte li.is-aktiv { color: var(--ds-text); font-weight: var(--fw-semibold); }
.mvp-schritte li.is-aktiv .mvp-schritt-nr { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-inverse); box-shadow: 0 0 0 4px var(--ds-primary-soft); }
.mvp-schritte li.is-done { color: var(--ds-text-2); }
.mvp-schritte li.is-done .mvp-schritt-nr { background: var(--ds-primary-soft); border-color: var(--ds-primary); color: var(--ds-primary-text); }

.mvp-titel-h { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ds-text); }
.mvp-titel-s { margin-bottom: var(--sp-5); font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-3); }
.mvp-pflicht { color: var(--ds-bad); }
.mvp-fehlerbox { margin-bottom: var(--sp-5); }
.mvp-fehlerbox ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }

.mvp-abschnitt { margin: 0 0 var(--sp-6); }
.mvp-abschnitt-h {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--ds-text);
  font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text);
}
.mvp-nr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box;
  background: var(--ds-text); color: var(--ds-text-inverse);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
}
.mvp-nr:empty { display: none; }
.mvp-abschnitt-h .mvp-pflicht { margin-left: -6px; }
.mvp-err-box .mvp-abschnitt-h { border-bottom-color: var(--ds-bad); }
.mvp-err-box .mvp-abschnitt-body { box-shadow: inset 3px 0 0 var(--ds-bad); padding-left: var(--sp-3); }
.mvp-stamm { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; margin: 0 0 var(--sp-5); font-size: var(--fs-s); border-top: var(--bd-subtle); }
.mvp-stamm dt, .mvp-stamm dd { padding: 7px 0; border-bottom: var(--bd-subtle); }
.mvp-stamm dt { color: var(--ds-text-3); }
.mvp-stamm dd { margin: 0; line-height: var(--lh-base); color: var(--ds-text); }
.mvp-feld { display: flex; flex-direction: column; gap: var(--sp-2); }
.mvp .mvp-label { display: block; margin: 0; font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); }
.mvp .mvp-err { color: var(--ds-bad-text); }
.mvp-radios { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.mvp-radios .ds-radio { font-size: var(--fs-m); }
.mvp-err-feld .mvp-radios { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ds-bad); border-radius: var(--r-s); background: var(--ds-bad-soft); }
.mvp-zeiten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.mvp-zeitzeile { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mvp-datum {
  display: inline-flex; align-items: center; height: var(--ds-control-h); padding: 0 10px;
  background: var(--ds-bg-muted); border: var(--bd); border-radius: var(--r-s);
  font-size: var(--fs-mono); color: var(--ds-text-2);
}
.mvp .mvp-time { width: 84px; text-align: center; }
.mvp-uhr { font-size: var(--fs-s); color: var(--ds-text-3); }
.mvp-quelle { margin-bottom: var(--sp-2); font-size: var(--fs-s); color: var(--ds-text-3); }
.ic-beschreibung {
  padding: var(--sp-3) var(--sp-4); background: var(--ds-bg-subtle); border: var(--bd); border-radius: var(--r-s);
  font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text);
}
.mvp-checks { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.mvp-check.ds-check { align-items: flex-start; font-size: var(--fs-m); line-height: var(--lh-snug); }
.mvp-check.ds-check input { margin-top: 1px; }
.mvp-fallakte { margin: 0 0 var(--sp-4); }

/* Feste Fussleiste mit den Aktionen der Seite */
.mvp-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); flex-shrink: 0;
  background: var(--ds-bg-subtle); border-top: var(--bd);
}
.mvp-abschnitt--zus .mvp-abschnitt-h { font-size: var(--fs-m); border-bottom-width: 1px; border-bottom-color: var(--ds-border-strong); }
.mvp-zus { margin: 0; }

.mvp-quittung { margin: 0 0 var(--sp-6); padding: var(--sp-5) var(--sp-5) var(--sp-4); border: 1px solid color-mix(in srgb, var(--ds-ok) 40%, transparent); border-left: 4px solid var(--ds-ok); background: var(--ds-ok-soft); }
.mvp-quittung.entwurf { border-color: color-mix(in srgb, var(--ds-warn) 45%, transparent); border-left-color: var(--ds-warn); background: var(--ds-warn-soft); }
.mvp-quittung-h { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-l); font-weight: var(--fw-bold); color: var(--ds-ok-text); }
.mvp-quittung-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-ok); color: var(--ds-text-inverse); }
.mvp-quittung-ic svg { width: 15px; height: 15px; stroke-width: 3; }
.mvp-quittung.entwurf .mvp-quittung-h { color: var(--ds-warn-text); }
.mvp-quittung-text { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-s); color: var(--ds-text-2); }
.mvp-quittung-nr { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mvp-quittung-nr-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); }
.mvp-quittung-nr .ds-mono { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--ds-text); }
.mvp-quittung .mvp-stamm { margin: 0; border-top-color: color-mix(in srgb, var(--ds-ok) 25%, transparent); }
.mvp-quittung .mvp-stamm dt, .mvp-quittung .mvp-stamm dd { border-bottom-color: color-mix(in srgb, var(--ds-ok) 25%, transparent); }

/* ================= Nachbetrachtung: Fristenleiste ================= */
.ic-fristen-balken { position: relative; height: 8px; margin: var(--sp-2) 6px var(--sp-3); border-radius: var(--r-pill); background: var(--ds-bg-sunken); }
.ic-fristen-lauf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); }
.ic-fristen-lauf.is-ok { background: var(--ds-ok); }
.ic-fristen-lauf.is-bad { background: var(--ds-bad); }
.ic-fristen-punkt {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--ds-bg-surface); border: 3px solid var(--ds-gray-500); box-sizing: border-box;
}
.ic-fristen-punkt.ton-info { border-color: var(--ds-info); }
.ic-fristen-punkt.ton-ok { border-color: var(--ds-ok); }
.ic-fristen-punkt.ton-ende { border-color: var(--ds-text); border-radius: var(--r-xs); }
.ic-fristen-marken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.ic-frist-marke { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-3); border-left: 3px solid var(--ds-gray-500); }
.ic-frist-marke.ton-info { border-left-color: var(--ds-info); }
.ic-frist-marke.ton-ok { border-left-color: var(--ds-ok); }
.ic-frist-marke.ton-bad { border-left-color: var(--ds-bad); }
.ic-frist-marke.ton-ende { border-left-color: var(--ds-text); }
.ic-frist-zeit { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); min-height: 1.2em; }
.ic-frist-text { font-size: var(--fs-s); color: var(--ds-text-3); }
.ic-frist-marke.ton-ok .ic-frist-text { color: var(--ds-ok-text); font-weight: var(--fw-semibold); }
.ic-frist-marke.ton-bad .ic-frist-text { color: var(--ds-bad-text); font-weight: var(--fw-semibold); }

/* Schmale Fenster: Containerabfragen, weil ein Fenster schmaler sein kann als der Bildschirm */
.fa.cf-tool { container: fa / inline-size; }
.edr.cf-tool { container: edr / inline-size; }
.mvp.cf-tool { container: mvp / inline-size; }
@container mvp (max-width: 1080px) {
  .mvp-seite.mit-nav { grid-template-columns: minmax(0, 760px); }
  .mvp-nav { display: none; }
}
@container mvp (max-width: 640px) {
  .mvp-zeiten { grid-template-columns: 1fr; }
  .mvp-stamm { grid-template-columns: 1fr; }
}
@container edr (max-width: 1000px) {
  .edr-sum { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
/* Werkzeugkopf zweizeilig (tool-shared.css): Reiter buendig unter der Marke, ohne den
   Abstand der einzeiligen Form */
@container edr (max-width: 900px) {
  .edr .ds-toolhead-sig .ds-toolhead-tabs { margin-left: calc(-1 * var(--sp-3)); }
  /* Geraetekopf: Angaben als Raster statt als Reihe mit Trennlinien, die beim Umbruch
     eingerueckt stehen */
  .edr-dev-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3) var(--sp-4); width: 100%; }
  .edr-dev-kv > div, .edr-dev-kv > div:first-child { padding: 0; border-left: 0; min-width: 0; }
  /* Angaben mit Zusatztext (Manipulationsschutz, Sensor) bekommen zwei Spalten */
  .edr-dev-kv > div:has(.edr-dev-dim) { grid-column: span 2; }
  .edr-dev-kv dd { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .edr-dev-kv dd .ds-pill { white-space: nowrap; }
  .edr.ist-konsole .edr-dev-kv { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-2) var(--sp-4); }
  .edr.ist-konsole .edr-dev-kv dd { flex-wrap: nowrap; }
  .edr.ist-konsole .edr-dev-kv > div:has(.edr-dev-dim) dd { flex-wrap: wrap; }
}
@container edr (max-width: 820px) {
  .edr-cols, .edr-cols-proc { grid-template-columns: 1fr; }
}
@container edr (max-width: 760px) {
  .edr .lr-status { flex-wrap: wrap; }
  .lr-st-host { white-space: nowrap; min-height: 30px; }
  .lr-st-cell { min-height: 30px; white-space: nowrap; }
  .lr-bar-tab { white-space: nowrap; flex-shrink: 0; }
  .lr-bar-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; align-self: center; }
}
/* Schmales Fenster: Geraetekopf und Aktionen rollen mit dem Inhalt weg, damit Zeitachse,
   Prozessbaum und Live Response Hoehe bekommen; der Kopf mit den Reitern bleibt stehen.
   Der Rahmen selbst ist Container edr, daher hier wz. */
@container wz (max-width: 760px) {
  .edr.cf-tool { overflow-y: auto; }
  .edr > #edr-head { position: sticky; top: 0; z-index: 5; background: var(--ds-dk-bg); }
  .edr > #edr-kopf { flex-shrink: 0; }
  .edr > .edr-inhalt { flex: none; overflow: visible; }
  .edr > .edr-inhalt.ist-konsole { flex: 1 0 auto; min-height: 340px; overflow: hidden; }
}
@container edr (max-width: 620px) {
  .edr-dev { padding: var(--sp-3) var(--sp-4); }
  .edr-dev-mark { width: 40px; height: 40px; }
  .edr-inhalt { padding: var(--sp-3); }
  .edr-sum { gap: var(--sp-2); }
  .edr-kpi { padding: var(--sp-2) var(--sp-3); }
  .edr-quelle { white-space: normal; }
  .edr-suchfeld { flex: 1 1 160px; }
  .edr-kv { grid-template-columns: 112px minmax(0, 1fr); }
}
@container fa (max-width: 960px) {
  .fa-side { width: 280px; }
  .fa-sla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-sla-k:nth-child(3) { border-left: 0; }
}
/* Schmal: eine Spalte mit gemeinsamer Rolle. Vorgang und Bewertung oben, weil die Akte
   bei jeder Eingabe neu zeichnet und die Rolle dann oben beginnt. */
@container fa (max-width: 700px) {
  .fa-main { flex-direction: column; overflow-y: auto; }
  .fa-body { flex: none; overflow: visible; padding: 0 var(--sp-4) var(--sp-5); }
  .fa-side { order: -1; width: auto; overflow: visible; padding: var(--sp-1) var(--sp-4) var(--sp-3); border-left: 0; border-bottom: var(--bd-subtle); }
  .fa-side .ds-select { max-width: 420px; }
  .fa-mal { max-width: 420px; }
  .fa-rec { padding: var(--sp-2) var(--sp-4); row-gap: var(--sp-2); }
  .fa-sla-k { padding: var(--sp-2) var(--sp-4); }
}
@container fa (max-width: 560px) {
  .fa-flow-s { padding: 0 14px 0 20px; }
  .fa-flow-s:first-child { padding-left: 10px; }
  .fa-felder { grid-template-columns: 104px minmax(0, 1fr); }
}
@container mvp (max-width: 620px) {
  .mvp-pfad { padding: 0 var(--sp-4); }
  .mvp-seite { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .mvp-actions { flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
}

/* Phase 2 (14.10.2026): Vermerk in der Fallakte, Freitext mit der Zeit der Vorgangsuhr. */
.fa-vermerk { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); }
.fa-vermerk .ds-textarea { width: 100%; min-height: 56px; resize: vertical; }
.fa-vermerk-zeile { display: flex; justify-content: flex-end; }