/* ---------------------------------------------------------------------------
   Vectral 2.0 — Bausteine (T18 n: Aufteilung von app.css, Sprint B4)

   Karten, Zweckrahmen, Buttons, Pills, Modus-Umschalter, Formularfelder,
   Tabellen, Badges, Farbrampe, Filterleiste, Fortschritt, Listen, Dialog,
   Diff-Liste, Leerzustand, Statistik-Kacheln, Job- und Faktenbasis-Karte.
   Wird von jeder Seite nach app.css eingebunden.
--------------------------------------------------------------------------- */

/* === Karten ============================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 20px; }
@media (min-width: 900px) { .card-pad { padding: 24px; } }
.card-flat { box-shadow: none; }

/* Zweckrahmen (H3) — leicht zurückgesetzte Fläche statt Akzentkante.
   Die Kante war ein zweites Signal für dieselbe Aussage; die Tönung
   allein sagt schon „Hinweis, nicht Inhalt".                            */
.zweck {
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 17px 22px;
}
.zweck h4 {
  color: var(--navy); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px;
}
.zweck p { font-size: 14.5px; color: var(--ink); }
/* Zweiton: der Satz tritt zurück, die Zahlen tragen ihn. */
.zweck p.tt      { color: var(--muted); }
.zweck p.tt .em  { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.zweck.is-hint { background: var(--vorschlag-soft); border-color: var(--vorschlag-line); }
.zweck.is-hint h4 { color: var(--vorschlag); }

/* === Buttons ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 22px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease,
              box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
/* Der Knopf antwortet auf den Druck, nicht erst auf das Loslassen. */
.btn:active { transform: scale(.97); }
.btn svg { opacity: .6; }
/* Ruhezustand ist der tiefe Markenton, nicht der helle. Die volle
   Sättigung von --primary bleibt dem Hover vorbehalten — so bleibt das
   Aktionssignal erkennbar, ohne die Seite zu dominieren.                 */
.btn-primary {
  background: var(--primary-hover); border-color: var(--primary-hover); color: #fff;
  box-shadow: 0 1px 2px 0 rgb(79 33 176 / .16);
}
.btn-primary:hover { background: var(--primary); border-color: var(--link); color: #fff; }
.btn-primary svg { opacity: 1; }
.btn-ghost { border-color: transparent; background: none; box-shadow: none; color: var(--navy); }
.btn-ghost:hover { background: var(--navy-soft); border-color: transparent; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.btn-wide { min-width: 230px; }
.btn-block { width: 100%; }
.btn.is-active { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* === Teilschritt-Pills und Modus-Umschalter ============================= */

.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pills a {
  min-width: 186px; padding: 11px 20px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.pills a:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.pills a { 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); }
.pills a:active { transform: scale(.97); }
.pills .is-active { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }
.pills .is-active:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }

.modeswitch {
  display: inline-flex; padding: 4px; gap: 6px 2px; /* Zeilenabstand, falls die Knöpfe umbrechen */
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.modeswitch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border: 0; cursor: pointer; background: none;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-radius: var(--radius-pill);
}
.modeswitch button:hover { color: var(--ink); }
.modeswitch button { transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.modeswitch button:active { transform: scale(.97); }
.modeswitch button.is-active { background: var(--navy-fill); color: #fff; }
.modeswitch button svg { opacity: .65; }
.modeswitch button.is-active svg { opacity: 1; }

/* === Formularfelder ===================================================== */

.field .label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.input, select.input {
  min-height: 42px; padding: 9px 12px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600;
  font-family: inherit; box-shadow: var(--shadow-xs);
}
.input:focus, select.input:focus { outline: 2px solid var(--primary-line); border-color: var(--link); }
.input-sm { max-width: 190px; }

/* === Tabellen =========================================================== */

.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.table-std { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-std th {
  text-align: left; padding: 11px 14px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table-std td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table-std tbody tr:last-child td { border-bottom: 0; }
.table-std tbody tr:hover { background: var(--surface-2); }
.table-std .num, .table-std th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-std .is-total td { font-weight: 700; background: var(--surface-2); }

.bar-ph { display: block; height: 9px; border-radius: 4px; background: var(--border); }

/* === Badges ============================================================= */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.badge-ok        { background: var(--ok-soft);        color: var(--ok);        border-color: var(--ok-line); }
.badge-warn      { background: var(--warn-soft);      color: var(--warn);      border-color: var(--warn-line); }
.badge-danger    { background: var(--danger-soft);    color: var(--danger);    border-color: var(--danger-line); }
.badge-primary   { background: var(--navy-soft);      color: var(--navy);      border-color: var(--navy-line); }
.badge-vorschlag { background: var(--vorschlag-soft); color: var(--vorschlag); border-color: var(--vorschlag-line); }
.badge-neutral   { background: var(--surface-2);      color: var(--muted);     border-color: var(--border); }
.badge-ghost     { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .45); }

/* === Farbrampe und Legende ============================================== */

/* Heatmap-Zelle (Grundriss in struktur.css); Stufenklassen danach, damit sie gewinnen. */
.zelle { height: 13px; border-radius: 2px; background: var(--ramp-1); }
.z1 { background: var(--ramp-1); } .z2 { background: var(--ramp-2); }
.z3 { background: var(--ramp-3); } .z4 { background: var(--ramp-4); }
.z5 { background: var(--ramp-5); }

.ramp { display: flex; align-items: center; gap: 10px; }
.ramp .swatches { display: flex; gap: 3px; }
.ramp .sw { width: 24px; height: 13px; border-radius: 2px; }
.ramp .cap { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.rel { position: relative; }

/* === Filterleiste ======================================================= */

.filterbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-xs);
}
.filterbar .fb-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.filterfield {
  min-width: min(190px, 100%); max-width: 100%; padding: 6px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.filterfield .ff-key { font-size: 11px; color: var(--muted-2); display: block; letter-spacing: .04em; text-transform: uppercase; }
.filterfield .ff-val { font-size: 13px; font-weight: 600; }
.filterfield.is-plain { background: none; border: 0; padding: 0; min-width: 0; }
.filterfield.is-plain .ff-key { display: inline; margin-right: 8px; font-size: 12px; text-transform: none; letter-spacing: 0; }

/* === Fortschritt ======================================================== */

.progress { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress .val {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--navy-fill), var(--primary));
  transform: scaleX(0); transform-origin: left center;
  /* Gleichmäßige Bewegung: ein Fortschritt hat keinen Anlauf und kein Ausklingen. */
  transition: transform .35s linear;
}

/* === Listen ============================================================= */

.picklist { display: grid; gap: 8px; }
.picklist a, .picklist button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: inherit; text-decoration: none; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.picklist a:hover, .picklist button:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.picklist a, .picklist button { transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.picklist a:active, .picklist button:active { transform: scale(.985); }
.picklist .is-active { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); background: var(--navy-soft); }
.picklist .pl-meta { font-size: 12px; color: var(--muted); font-weight: 500; }

/* === Sonstiges ========================================================== */

.divider { height: 1px; background: var(--border); border: 0; margin: 28px 0; }
.hidden { display: none !important; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.split-3 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .split-3 { grid-template-columns: 1fr; } }
.refrow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.refrow:last-child { border-bottom: 0; }
.refrow b { font-variant-numeric: tabular-nums; }

/* === B0-Ergänzungen === */

/* --- Leerzustand ------------------------------------------------------- */
.leerzustand {
  padding: 36px 20px; text-align: center;
  font-size: 13.5px; color: var(--muted);
}
.leerzustand .btn { margin-top: 12px; }

/* --- Formraster -------------------------------------------------------- */
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.formgrid .field { display: block; min-width: 0; }
.formgrid .field.is-full { grid-column: 1 / -1; }
.formgrid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .formgrid, .formgrid.is-3 { grid-template-columns: 1fr; } }
.field .hint { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 5px; }
/* Warnender Hinweis, z. B. „Systemvorgabe angenommen, bitte prüfen“ (Erkennungskarte) */
.field .hint.is-warn { color: var(--warn); font-weight: 600; }
textarea.input { min-height: 84px; resize: vertical; font-weight: 500; line-height: 1.5; }
.input:disabled, select.input:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* --- Buttons: Ergänzungen ---------------------------------------------- */
.btn-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
.btn-danger:hover { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; opacity: .92; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled:hover { background: var(--surface); border-color: var(--border); }
.btn-primary:disabled:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger:disabled:hover { background: var(--danger-fill); }

/* --- Dialog ------------------------------------------------------------ */
dialog.dlg {
  width: min(560px, calc(100vw - 32px)); padding: 0; border: 0;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
dialog.dlg.is-wide { width: min(760px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgb(19 28 46 / .45); backdrop-filter: blur(2px); }
dialog.dlg[open] { animation: dlg-enter var(--dur-enter) var(--ease-out); }
@keyframes dlg-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dlg-form { display: grid; }
.dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--border);
}
.dlg-head h3 { font-size: 17px; }
.dlg-close {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.dlg-close:hover { background: var(--border); color: var(--ink); }
.dlg-banner { padding: 16px 24px 0; }
.dlg-banner .banner { margin-bottom: 0; }
.dlg-body { padding: 20px 24px; max-height: min(70vh, 640px); overflow: auto; }
.dlg-body p { font-size: 14px; line-height: 1.55; }
.dlg-body p + p { margin-top: 10px; }
.dlg-foot {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px 20px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.dlg-foot .btn:first-child { margin-right: auto; }
.dlg-foot .btn:first-child:nth-last-child(2) { margin-right: 0; }

/* Diff-Liste alt → neu (Bestätigung vor dem Speichern) */
.diff { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.diff li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 10px; align-items: center; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px;
}
.diff .d-label { font-weight: 600; }
.diff .d-alt { color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.diff .d-pfeil { color: var(--muted-2); text-align: center; }
.diff .d-neu { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* === B1-/B2-/B3-Ergänzungen (seitenübergreifend) === */

.btn-row.is-tight { gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 720px) { .btn-row.is-tight { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; } }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin-top: 6px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--link); margin: 0; }

.input[type="date"] { font-family: inherit; font-variant-numeric: tabular-nums; }
.muted-2 { color: var(--muted-2); }
.leerzustand.is-compact { padding: 18px 12px; }
.hash { font-family: var(--mono); font-size: 11px; color: var(--muted-2); word-break: break-all; }

/* --- Statistik ---------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.stat .st-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.stat .st-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }

/* --- Job-Fortschritt ---------------------------------------------------- */
.jobkarte { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-2); }
.jobkarte .progress { margin-top: 10px; }
.jobkarte.is-laeuft .progress .val { animation: job-puls 1.4s var(--ease-in-out) infinite; }
@keyframes job-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.jobkarte.is-fertig { border-color: var(--ok-line); background: var(--ok-soft); }
.jobkarte.is-fehler { border-color: var(--danger-line); background: var(--danger-soft); }
@media (prefers-reduced-motion: reduce) { .jobkarte.is-laeuft .progress .val { animation: none; } }

/* --- Faktenbasis-Karte ---------------------------------------------------- */
.fb-karte { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-2); }
.fb-karte.is-fertig { border-color: var(--ok-line); background: var(--ok-soft); }
.fb-karte.is-laeuft, .fb-karte.is-wartet, .fb-karte.is-veraltet { border-color: var(--warn-line); background: var(--warn-soft); }
.fb-karte.is-fehler { border-color: var(--danger-line); background: var(--danger-soft); }
.fb-karte .stat { background: var(--surface); }
/* Kopfzeile (Auftrag 09.09.2026): Stand und „Faktenbasis neu berechnen“ rechts auf einer Linie mit dem Titel */
.fb-karte .fb-kopf { align-items: center; }
.fb-karte .fb-kopf > div:first-child { flex: 1 1 auto; min-width: 0; }
.fb-karte .fb-kopf-rechts { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.fb-karte .fb-kopf-rechts .hash { word-break: normal; white-space: nowrap; }
.fb-karte .fb-kopf-rechts .btn { margin-left: 0; }
/* Schmale Breiten: der rechte Kopfblock (Stand-Hash, Knopf) darf die Seite nicht aufschieben —
   bei 390 px ragte er 29 px über den Rand (Screens 7, 12, Optimierung; Messung 15.09.2026). */
@media (max-width: 720px) {
  .fb-karte .fb-kopf { flex-wrap: wrap; }
  .fb-karte .fb-kopf-rechts { flex: 1 1 100%; max-width: 100%; min-width: 0; justify-content: flex-start; row-gap: 8px; }
}

/* --- Job-Karte: Abbrechen-Knopf ------------------------------------------- */
.jobkarte .row.is-tight { gap: 8px; align-items: center; }

/* Weniger Bewegung: Rücknahme der Bausteine (Reihenfolge der Stylesheets, siehe app.css). */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .pills a:active, .modeswitch button:active,
  .picklist a:active, .picklist button:active { transform: none; }
  dialog.dlg[open] { animation: none; }
}

/* Schmale Breiten (B12 §2a): Beschriftungen dürfen umbrechen; steht hier, weil diese Datei nach app.css geladen wird. */
@media (max-width: 480px) {
  .badge, .ramp .cap, #legendeCap, .filterfield .ff-val { white-space: normal; overflow-wrap: anywhere; }
}

/* === B14: Regelwerk des Kunden (Prüf-Screens 1a/2, Screen 17, Audit-Dialog) === */
.regelwerk { border: 1px solid var(--navy-line); border-radius: var(--radius-sm); background: var(--navy-soft); padding: 12px 14px; font-size: 13px; }
.regelwerk .rw-head { display: flex; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; align-items: flex-start; }
.regelwerk .rw-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.regelwerk .rw-body { display: grid; gap: 8px; margin-top: 10px; }
.regelwerk .rw-zeile { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.regelwerk .banner-slot:empty { display: none; }
.rw-liste { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 4px; }
.rw-liste li { overflow-wrap: anywhere; }
.rw-liste .rg-id, .audit .rg-id, .regelwerk .rg-id { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rw-editor { padding: 12px 14px; border: 1px solid var(--navy-line); border-radius: var(--radius-sm); background: var(--navy-soft); }
/* Regel-Zeilen wie im Wizard (wizard.css wird auf Screen 17 nicht geladen) */
.rw-editor .regeln { display: grid; gap: 8px; }
.rw-editor .regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.rw-editor .regel .rg-id { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rw-editor .regel .rg-param { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.table-std.regelwerke { min-width: 760px; }   /* scrollt im .table-wrap statt Spalten zu quetschen */
.table-std.regelwerke .badge { white-space: nowrap; }
.table-std tr.is-offen td { background: var(--navy-soft); }
.table-std.regelwerke td, .table-std.audit td { vertical-align: top; }
.table-std.regelwerke .hash { font-size: 11px; }
.table-std.audit .d-alt { color: var(--muted); text-decoration: line-through; font-family: var(--mono); }
.table-std.audit .d-neu { font-weight: 700; color: var(--navy); font-family: var(--mono); }
.table-std.audit td:last-child { min-width: 220px; }
@media (max-width: 640px) {
  .regelwerk .rw-head .btn-row { width: 100%; }
  .regelwerk .rw-head .btn-row .btn { flex: 1 1 auto; }
}

/* Festlegungen (Screen 19): Kurzfassung sichtbar, technische Details eingeklappt */
.fest-details { margin-top: 8px; }
.fest-details summary { cursor: pointer; color: var(--muted, #667085); font-size: 12px; user-select: none; }
.fest-details summary:hover { color: var(--text, #101828); }
.fest-details-text { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border, #e4e7ec); color: var(--muted, #667085); }

/* Nicht optimierte Lager (Screen 13, B27): eingeklappt am Ende der Ergebniskarte */
.ausschluss-details summary { cursor: pointer; }
.ausschluss-details summary h3 { display: inline; }
.ausschluss-details summary:hover h3 { color: var(--muted); }

/* --- Befund (Datenobjekt, keine Toasts) --------------------------------- */
/* Import-Wizard (B2) und Prüfung je Zone (B25): gleiche Karte, gleiche Schwere-Farben. */
.befund { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--surface); margin-bottom: 10px; }
.befund.is-blocker { border-color: var(--danger-line); background: var(--danger-soft); }
.befund.is-hoch { border-color: var(--danger-line); }
.befund.is-mittel { border-color: var(--warn-line); background: var(--warn-soft); }
.befund .bf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.befund .bf-id { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--navy); }
.befund .bf-count { font-size: 12px; color: var(--muted); margin-left: auto; }
.befund .bf-text { margin-top: 6px; font-size: 13.5px; }
.befund .bf-beispiele { margin-top: 6px; font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.befund code, .diffkarte code { font-family: var(--mono); font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.befund .bf-details { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.befund .bn-options { margin-top: 8px; padding-left: 18px; font-size: 12.5px; }
.befund .bf-handlungen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.befund .bf-handlung-hinweis { flex-basis: 100%; margin: 2px 0 0; line-height: 1.5; }
.befund .bf-hinweis { margin-top: 6px; font-size: 12.5px; color: var(--navy); }
.bf-je-lager td, .bf-je-lager th { padding: 6px 10px; font-size: 12px; }
/* Nicht optimierte Lager: grau, mit Grund (B25 AP2). */
tr.zp-aus td { color: var(--muted); background: var(--surface-2); }
tr.is-ziel td { background: var(--warn-soft); }