/* Shared token consumers, embedded by gen-design-css.py / the leady assembler.
   No theme values or page layouts here. Hairline borders and resets are geometry.
   Core tokens require html[data-track="hybridpro"] in each consumer. */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-family);
  font-size: var(--type-body-font-size);
  font-weight: var(--type-body-font-weight);
  line-height: var(--line-height-default);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
b, strong { font-weight: var(--type-label-font-weight); }
h1, h2, h3 { color: var(--heading); font-weight: var(--type-title-font-weight); }
h1 { font-size: var(--type-page-title-font-size); line-height: var(--type-page-title-line-height); }
h2 { font-size: var(--type-title-font-size); }
h3 { font-size: var(--type-body-font-size); }
.type-label { font-family: var(--type-label-font-family); font-size: var(--type-label-font-size); font-weight: var(--type-label-font-weight); line-height: var(--line-height-default); }
.type-body { font-family: var(--type-body-font-family); font-size: var(--type-body-font-size); font-weight: var(--type-body-font-weight); line-height: var(--line-height-default); }
.type-title { font-family: var(--type-title-font-family); font-size: var(--type-title-font-size); font-weight: var(--type-title-font-weight); line-height: var(--line-height-default); }
.type-metric { font-family: var(--type-metric-font-family); font-size: var(--type-metric-font-size); font-weight: var(--type-metric-font-weight); line-height: var(--line-height-default); font-variant-numeric: tabular-nums; }
.type-caption { font-family: var(--type-caption-font-family); font-size: var(--type-caption-font-size); font-weight: var(--type-caption-font-weight); line-height: var(--type-caption-line-height); }
code, .code, .type-code { font-family: var(--type-code-font-family); font-size: var(--type-code-font-size); font-weight: var(--type-code-font-weight); line-height: var(--line-height-default); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--space-3) / 2);
  font-size: var(--type-body-font-size); font-weight: var(--type-label-font-weight);
  line-height: 1; padding: var(--space-2) var(--space-3);
  min-height: var(--control-h-sm); border-radius: var(--btn-r);
  border: 1px solid transparent; cursor: pointer;
}
.btn.primary { background: var(--primary); color: var(--primary-fg); }
.btn.secondary { background: var(--card); color: var(--fg); border-color: var(--border); }
.btn.ghost { background: transparent; color: var(--fg2b); }
.btn.danger { background: var(--danger); color: var(--card); }
.btn:disabled { opacity: var(--state-disabled-opacity); cursor: default; }
button:disabled { cursor: not-allowed; }
button:disabled:hover { filter: none; }

/* Kompakt wie das Dashboard (Owner 2026-10-21): 2px Rand-Innenabstand, Optionen 2px 9px, 27px hoch. */
.segmented { display: inline-flex; gap: calc(var(--space-1) / 2); padding: calc(var(--space-1) / 2); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--card); }
.segmented button { padding: calc(var(--space-1) / 2) calc(var(--space-2) + 1px); color: var(--fg2b); font-size: var(--type-body-font-size); font-weight: var(--type-body-font-weight); line-height: var(--space-4); min-height: calc(var(--control-h-sm) - var(--space-3) + 1px); cursor: pointer; background: transparent; border: 0; border-radius: var(--seg-r); }
.segmented button.active { background: var(--active-bg); color: var(--active-fg); font-weight: var(--type-label-font-weight); cursor: default; }
/* Trennlinien zwischen den Optionen: border-control, eingerueckt, mittig im Gap; neben der aktiven Option ausgeblendet. */
.segmented button { position: relative; }
.segmented button + button::before { content: ""; position: absolute; top: var(--space-1); bottom: var(--space-1); left: calc(var(--space-1) / -2); width: 1px; background: var(--border-control); pointer-events: none; }
.segmented button.active::before, .segmented button.active + button::before { display: none; }

input, select, textarea { font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--fg); accent-color: var(--active-bg); }
input:not([type=range]):not([type=checkbox]), select, textarea {
  max-width: 100%; min-height: var(--control-h); border: 1px solid var(--border-control);
  border-radius: var(--radius-md); background: var(--card);
}
input[readonly] { background: var(--surface); }
input:disabled, select:disabled { opacity: var(--state-disabled-opacity); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger) !important; }

/* Datentabelle - design-bausteine § 11 (Kopf-Optik C3), Standalone-Gegenstueck zur .data-table in
   02-dashboard style.css. Konsument setzt nur class="data-table" (+ scope an den th), keine eigene
   Kopf-Optik. Ab 1024px erste Spalte links, uebrige zentriert. */
.data-table { width: 100%; border-collapse: collapse; }
.data-table :is(th, td) { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.data-table thead th { color: var(--fg2); font-size: var(--type-caption-font-size); font-weight: var(--type-body-font-weight); border-bottom: 1px solid var(--border-control); }
.data-table thead th[aria-sort] { color: var(--fg); font-weight: var(--type-label-font-weight); box-shadow: inset 0 -2px 0 var(--fg); }
/* vertical-align: top - sonst richtet sich das inline-flex am leeren ::before-Spacer (ohne Grundlinie) aus und die zentrierten Koepfe sitzen tiefer als der erste. */
.data-table thead th button { display: inline-flex; vertical-align: top; align-items: center; gap: 5px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.data-table thead th button:is(:hover, :focus-visible) { color: var(--fg); }
.data-table thead th button svg { flex: none; width: 12px; height: 12px; color: var(--border-control); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.data-table thead th[aria-sort] button svg { color: var(--fg); }
.data-table tbody :is(th, td) { border-bottom: 1px solid var(--border); color: var(--fg); font-size: var(--type-body-font-size); font-weight: var(--type-body-font-weight); }
.data-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.data-table .num { font-variant-numeric: tabular-nums; }
/* Sortier-Dropdown über einer Liste (§ 11): natives Select, Verhalten design-base.js (select[data-sort-for]). */
.sort-row { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.sort-row label { color: var(--fg2); font-size: var(--type-caption-font-size); }
.sort-row select { width: auto; min-width: var(--control-w-select); }
@media (min-width: 1024px) {
  .data-table :is(th, td):not(:first-child) { text-align: center; }
  .data-table thead th:not(:first-child) button { justify-content: center; }
  .data-table thead th:not(:first-child) button::before { content: ""; flex: none; width: 12px; }
  /* Dokumenttabelle (§ 11, Owner-Wahl T1): in Dokumenten alle Spalten linksbündig, Kopf als Text ohne Sortier-Button. */
  .data-table.doc-table :is(th, td) { text-align: left; }
}

/* Status-Pille - design-system § Shapes (Pillen) + Farb-Rollen: Status nur ok/warn/err, Info = Sky,
   neutral fuer Kategorie/Typ. Text auf Tint immer die -fg-Rolle (AA). */
/* Hybrid-Look (Galerie-Abnahme): Tint-Flaeche ohne sichtbaren Rand, Gewicht 400. */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--space-2); border: 1px solid transparent; border-radius: var(--pill-r); font-size: var(--type-caption-font-size); font-weight: var(--type-body-font-weight); white-space: nowrap; }
.badge.ok { background: var(--success-soft); color: var(--success-fg); }
.badge.warn { background: var(--warning-soft); color: var(--warning-fg); }
.badge.err { background: var(--danger-soft); color: var(--danger-fg); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.neutral { background: var(--surface); color: var(--fg2b); }

/* Produktkarte - design-bausteine § 21 (Owner-Entscheid B2, io-hardware). Foto-Buehne, Statuslinie
   (horizontal, nie als Leiste links), Kopfzeile Status + Platz, Name, SKU, Kurzzeile, Fuer/Gegen, Preis mit Angebots-ID.
   Toenung per .is-ok/.is-warn/.is-err/.is-neutral, ausgeschlossen per .is-out. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.product-card { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); --pc-bar: var(--border-control); --pc-status: var(--fg2); }
.product-card.is-ok { --pc-bar: var(--success); --pc-status: var(--success-fg); }
.product-card.is-warn { --pc-bar: var(--warning); --pc-status: var(--warning-fg); }
.product-card.is-err { --pc-bar: var(--danger); --pc-status: var(--danger-fg); }
.product-card .pc-stage { height: 168px; display: flex; align-items: center; justify-content: center; padding: 18px var(--space-4) 10px; }
.product-card .pc-stage img { max-width: 100%; max-height: 140px; object-fit: contain; mix-blend-mode: multiply; }
.product-card .pc-line { height: 3px; margin: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--pc-bar); }
.product-card .pc-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-3) var(--space-4) 0; }
.product-card .pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: 6px; }
.product-card .pc-status { color: var(--pc-status); font-weight: var(--type-label-font-weight); }
.product-card .pc-place { color: var(--fg2); font-size: var(--type-caption-font-size); }
.product-card .pc-name { font-weight: var(--type-label-font-weight); }
.product-card .pc-sku { color: var(--fg2); font-family: var(--type-code-font-family); font-size: var(--type-code-font-size); }
.product-card .pc-short { color: var(--fg2); font-size: var(--type-caption-font-size); margin: var(--space-1) 0 10px; }
.product-card .pc-procon { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.product-card .pc-procon li { display: grid; grid-template-columns: 14px 1fr; gap: 6px; }
.product-card .pc-procon li::before { font-weight: var(--type-label-font-weight); }
.product-card .pc-procon li.pro::before { content: "+"; color: var(--success-fg); }
.product-card .pc-procon li.con::before { content: "-"; color: var(--danger-fg); }
.product-card .pc-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding: var(--space-3) 0 14px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.product-card .pc-oid { color: var(--fg2b); font-size: var(--type-caption-font-size); }
.product-card.is-out .pc-stage, .product-card.is-out .pc-body { opacity: .62; }
.product-card.is-out img { filter: grayscale(1); }

/* Vergleichsmatrix - design-bausteine § 22 (Owner-Wahl Entwurf 12). Anforderungen als Zeilen, Kandidaten als
   Spaltenkarten: Kopf = Bilanz (Zahl, .meter, Zaehlzeile, Anforderungen nach Status), Rumpf = Heatmap-Zellen.
   Status per .ok/.warn/.neutral/.err an .compare-cell und .compare-st; Erklaerung als Tooltip (§ 10). */
.compare-scroll { min-width: 0; }
.compare-matrix { width: calc(100% + 2 * var(--space-4)); margin: 0 calc(-1 * var(--space-4)); border-collapse: separate; border-spacing: var(--space-4) 0; table-layout: fixed; }
.compare-matrix col.compare-req { width: 28%; }
.compare-matrix thead th { vertical-align: top; text-align: left; font-weight: var(--type-body-font-weight); }
.compare-matrix thead th.compare-req-head { vertical-align: bottom; padding: 0 0 var(--space-3); color: var(--fg2); font-size: var(--type-caption-font-size); border-bottom: 1px solid var(--border-control); }
.compare-matrix thead th.compare-col { padding: var(--space-5) var(--space-5) var(--space-4); background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.compare-name { display: block; color: var(--heading); font-size: var(--type-title-font-size); font-weight: var(--type-title-font-weight); }
.compare-score { display: flex; align-items: baseline; gap: 6px; margin: var(--space-3) 0 var(--space-2); }
.compare-score b { font-size: var(--type-metric-lg-font-size); font-weight: var(--type-metric-lg-font-weight); line-height: 1; font-variant-numeric: tabular-nums; }
.compare-score span { color: var(--fg2); }
.compare-tally { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--type-caption-font-size); }
.compare-st { display: inline-flex; align-items: center; gap: 5px; }
.compare-st.ok { color: var(--success-fg); } .compare-st.warn { color: var(--warning-fg); } .compare-st.neutral { color: var(--fg2); } .compare-st.err { color: var(--danger-fg); }
.compare-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare-tally .compare-icon { width: 14px; height: 14px; }
.compare-group { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--fg2); font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); }
.compare-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.compare-list li { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr); align-items: center; gap: var(--space-2); color: var(--fg); font-size: var(--type-caption-font-size); }
.compare-rid { color: var(--fg2); font-size: var(--type-caption-font-size); font-weight: var(--type-body-font-weight); font-variant-numeric: tabular-nums; }
.compare-matrix tbody th { height: 56px; padding: var(--space-2) 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); color: var(--fg); font-weight: var(--type-label-font-weight); }
.compare-matrix tbody th .compare-rid { display: inline-block; min-width: 36px; }
.compare-matrix tbody td { height: 50px; padding: 3px var(--space-2); background: var(--card); border-left: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; }
.compare-matrix tbody tr:last-child td { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.compare-matrix tbody tr.compare-sep th { height: auto; padding-top: var(--space-6); color: var(--fg2); font-size: var(--type-caption-font-size); border-bottom-color: var(--border-control); }
.compare-matrix tbody tr.compare-sep td { height: auto; }
.compare-matrix tbody tr.compare-section th { height: auto; padding: var(--space-5) 0 var(--space-2); color: var(--fg); font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); border-bottom-color: var(--border-control); }
.compare-empty { display: block; text-align: center; color: var(--fg2); }
.compare-matrix td .tooltip-host { display: flex; height: 100%; }
.compare-cell { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 100%; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: var(--type-body-font-size); font-weight: var(--type-label-font-weight); text-align: left; }
button.compare-cell { cursor: help; }
.compare-cell.ok { background: var(--success-soft); color: var(--success-fg); border-color: var(--success-border); }
.compare-cell.warn { background: var(--warning-soft); color: var(--warning-fg); border-color: var(--warning-border); }
.compare-cell.neutral { background: var(--card); color: var(--fg2b); border: 1px dashed var(--border-control); font-weight: var(--type-body-font-weight); }
.compare-cell.err { background: var(--danger-soft); color: var(--danger-fg); border-color: var(--danger-border); }
.compare-cell:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.compare-more { display: flex; margin-left: auto; opacity: .55; }
.compare-more .compare-icon { width: 14px; height: 14px; }
.compare-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); font-size: var(--type-caption-font-size); }
@media (max-width: 1023px) { .compare-scroll { overflow-x: auto; } .compare-matrix { min-width: 900px; } }

/* Status-Filter-Chips (Pill + Zaehler) - design-bausteine § 2. Selektion = Rand/Tint dunkel + 600, Zaehler semantisch. */
.status-filter-chip { padding: 3px 9px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--pill-r); background: var(--card); color: var(--fg2b); font-size: var(--type-caption-font-size); white-space: nowrap; }
.status-filter-chip[aria-pressed="true"] { font-weight: var(--type-label-font-weight); border-color: var(--active-border); background: var(--active-tint); color: var(--active-bg); }
.status-filter-chip .cnt { font-weight: var(--type-label-font-weight); font-variant-numeric: tabular-nums; }
.status-filter-chip.ok .cnt { color: var(--success-fg); } .status-filter-chip.review .cnt { color: var(--warning-fg); } .status-filter-chip.err .cnt { color: var(--danger-fg); }

/* Toolbar-Filter-Chip - design-bausteine § 2 mit Toolbar-Delta § 19 (Steuerzeile ueber einer Liste,
   32px, Rand border-control, Auswahl = Rand/Flaeche/600). Gegenstueck zu 02-dashboard style.css. */
.filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.filter-group > .filter-group-label { margin-right: var(--space-1); color: var(--fg2); white-space: nowrap; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--card); color: var(--fg2); font-size: var(--type-body-font-size); white-space: nowrap; cursor: pointer; }
.filter-chip:hover { color: var(--fg); }
.filter-chip[aria-pressed="true"] { border-color: var(--active-border); background: var(--active-tint); color: var(--fg); font-weight: var(--type-label-font-weight); }
.filter-chip .cnt { font-weight: var(--type-label-font-weight); font-variant-numeric: tabular-nums; }

/* Stepper, Schritt-Status und kompakte Topbar-KPIs - design-bausteine § 3/§ 4/§ 5. */
.psteps { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.nc { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); border: 1px solid var(--border); background: var(--surface); color: var(--fg); flex: 0 0 auto; }
.nc.done { background: var(--success-soft); border-color: var(--success-border); color: var(--success-fg); }
.nc.work { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-fg); }
.nc.nn { background: transparent; border-style: dashed; text-decoration: line-through; }
.nc.cur { outline: 2px solid var(--fg); outline-offset: 1px; }
.conn { flex: 1 1 4px; min-width: 4px; height: 2px; background: var(--border); }
.conn.done { background: var(--success); }
.step-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: var(--radius-md); font-size: var(--type-body-font-size); font-weight: var(--type-label-font-weight); border: 1px solid var(--border); background: var(--surface); color: var(--fg); white-space: nowrap; }
.step-status-chip .anum { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); }
.step-status-chip.work { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-fg); }
.step-status-chip.done { background: var(--success-soft); border-color: var(--success-border); color: var(--success-fg); }
.tb-kpis { display: inline-flex; align-items: center; gap: 8px; }
.tk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); line-height: 1; }
.tk .n { font-size: var(--type-body-font-size); font-weight: var(--type-label-font-weight); color: var(--fg); }
.tk .l { font-size: var(--type-caption-font-size); font-weight: var(--type-body-font-weight); color: var(--fg2); }
.tk.late .n { color: var(--danger-fg); }
.tk.soon .n { color: var(--warning-fg); }
.tk.done .n { color: var(--success-fg); }

/* Passive Metadaten ohne Rahmen: opt-in, bestehende Schritt-Chips/KPIs bleiben unveraendert. */
html[data-track="hybridpro"] .step-status-chip.unframed,
html[data-track="hybridpro"] .step-status-chip.unframed .anum,
html[data-track="hybridpro"] .tk.unframed { border-color: transparent; }
html[data-track="hybridpro"] .tk.unframed .n { font-variant-numeric: tabular-nums; }

/* Filter-Statusleiste mit Reset - Galerie C12, Auswahl dunkel; Hybrid-Reset als Textaktion. */
.filter-btn[aria-pressed="true"] { background: var(--active-tint); border-color: var(--active-border); color: var(--active-bg); font-weight: var(--type-label-font-weight); }
.filter-active-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 1px solid var(--info-border); border-radius: var(--radius-md); background: var(--info-soft); color: var(--info); font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); }
.filter-active-row[hidden] { display: none; }
.filter-active-row .fa-reset { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 3px 9px; cursor: pointer; border: 1px solid var(--active-bg); border-radius: var(--btn-r); background: var(--active-bg); color: var(--active-fg); font-size: var(--type-caption-font-size); font-weight: var(--type-label-font-weight); transition: filter var(--motion-control) var(--motion-ease), background var(--motion-control) var(--motion-ease), text-decoration-color var(--motion-control) var(--motion-ease); }
.filter-active-row .fa-reset:hover { filter: brightness(1.08); }
html[data-track="hybridpro"] .filter-active-row { background: var(--surface); border-color: var(--border); color: var(--fg2b); }
html[data-track="hybridpro"] .filter-active-row .fa-reset { background: transparent; border-color: transparent; color: var(--link); transition: color var(--motion-control) var(--motion-ease), text-decoration-color var(--motion-control) var(--motion-ease); }
html[data-track="hybridpro"] .filter-active-row .fa-reset:hover { filter: none; color: var(--action-active); text-decoration: underline; }

/* Master-Detail-Auswahlliste - Galerie C20, glowfrei; Fokus innerhalb des Rahmens. */
.mdlist { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; padding: 3px; }
.mdlist button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; --focus-offset: var(--focus-inset-offset); }
.mdlist button:last-child { border-bottom: 0; }
.mdlist button[aria-selected=true] { background: var(--active-tint); border-left-color: var(--active-border); }
.mdlist .mdlist-title { font-size: var(--type-body-font-size); font-weight: var(--type-label-font-weight); color: var(--fg); }
.mdlist .mdlist-meta { font-size: var(--type-caption-font-size); color: var(--fg2); }
html[data-track="hybridpro"] .mdlist button { transition: background var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease); }
html[data-track="hybridpro"] .mdlist button[aria-selected=false]:hover,
html[data-track="hybridpro"] .mdlist button[aria-selected=true]:hover { background: var(--hover); }
html[data-track="hybridpro"] .mdlist button:not([aria-selected=true]) .mdlist-title { font-weight: var(--type-body-font-weight); }
html[data-track="hybridpro"] .mdlist .mdlist-meta { color: var(--fg2b); }

/* Auswahl-Presets und Datensatz-Zeile - Selektion ueber ARIA, Seitenlayout beim Konsumenten. */
.width-presets .btn[aria-pressed=true] { background: var(--active-tint); border-color: var(--active-border); color: var(--active-bg); }
.app-record { width: 100%; font-size: var(--type-body-font-size); text-align: left; border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius-sm); background: var(--card); color: var(--fg); padding: 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.app-record + .app-record { margin-top: 8px; }
.app-record[aria-current=true] { background: var(--active-tint); border-left-color: var(--active-border); font-weight: var(--type-label-font-weight); }
.app-record:hover { background: var(--hover); }
.app-record small { display: block; font-size: var(--type-caption-font-size); color: var(--fg2b); font-weight: var(--type-body-font-weight); }

/* Verteilung: feste Kategoriereihenfolge, Meter: dunkle Selektion - design-bausteine § 8. */
.dist { display: flex; height: 6px; border-radius: var(--pill-r); overflow: hidden; background: var(--bg); gap: 2px; }
.dist i { display: block; height: 100%; }
.seg-1 { background: var(--vm1); }
.seg-2 { background: var(--vm2); }
.seg-3 { background: var(--vm3); }
.seg-4 { background: var(--vm4); }
.seg-5 { background: var(--vm5); }
.seg-6 { background: var(--vm6); }
.seg-7 { background: var(--vm7); }
.seg-8 { background: var(--vm8); }
.seg-9 { background: var(--vm9); }
.meter { height: 6px; border-radius: var(--pill-r); background: var(--border); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--active-bg); }

/* Toolbar-Select - portiert aus Galerie C34, markup-getriebenes Verhalten in design-base.js (§ 19). */
.tsel { position: relative; display: inline-flex; }
.tsel, .tsel * { box-sizing: border-box; }
.tsel-ctl { display: inline-flex; align-items: stretch; }
.tsel-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--control-h-sm); max-width: 300px; padding: 0 10px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--card); color: var(--fg); font-size: var(--type-body-font-size); line-height: 18px; font-weight: var(--type-label-font-weight); cursor: pointer; }
.tsel-btn:is(:hover, .force-hover), .tsel-clear:is(:hover, .force-hover) { background: var(--hover); }
.tsel-label { color: var(--fg2); font-weight: var(--type-body-font-weight); }
.tsel-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel-more { padding: 0 6px; border-radius: var(--pill-r); background: var(--surface); color: var(--fg2b); font-size: var(--type-caption-font-size); line-height: 18px; font-weight: var(--type-label-font-weight); }
.tsel-more[hidden], .tsel-clear[hidden], .tsel-menu[hidden], .tsel-opt[hidden] { display: none; }
.tsel-btn svg.i, .tsel-clear svg.i, .tsel-search svg.i { width: 14px; height: 14px; flex: none; color: var(--fg2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tsel.has-value .tsel-btn { border-color: var(--border-selected); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.tsel-clear { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--border-selected); border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--card); cursor: pointer; }
.tsel-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: max(100%,260px); max-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--elevation-floating); }
.tsel-search { position: relative; padding: 8px 8px 4px; }
.tsel-search svg.i { position: absolute; left: 17px; top: calc(50% + 2px); translate: 0 -50%; }
/* Spezifität über input:not(...):not(...): kompakte Suche statt Basis-Input. */
.tsel .tsel-search input:not([type=checkbox]) { width: 100%; height: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 8px 0 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--type-body-font-size); }
.tsel .tsel-search input:not([type=checkbox]):focus { border-color: var(--border-control); }
.tsel-list { max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; }
.tsel-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--control-h-sm); padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--type-body-font-size); line-height: 18px; white-space: nowrap; cursor: pointer; }
.tsel-opt.is-all, .tsel-opt.is-group { font-weight: var(--type-label-font-weight); }
.tsel-opt.spaced { margin-top: 4px; }
.tsel-opt.is-child { margin-left: 15px; padding-left: 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tsel-opt.is-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--border-control); }
.tsel-opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tsel-opt .cnt { color: var(--fg2); font-size: var(--type-caption-font-size); line-height: 16px; font-weight: var(--type-body-font-weight); font-variant-numeric: tabular-nums; }
.tsel-opt[data-active=true] { background: var(--hover); }
.tsel:not(.multi) .tsel-opt[aria-selected=true] { background: var(--active-bg); color: var(--active-fg); }
.tsel:not(.multi) .tsel-opt[aria-selected=true][data-active=true] { background: var(--state-selected-hover-bg); }
.tsel:not(.multi) .tsel-opt[aria-selected=true] .cnt { color: inherit; }
.tsel-opt .cb { width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--active-bg); pointer-events: none; }
.tsel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--border); color: var(--fg2); font-size: var(--type-caption-font-size); line-height: 16px; }
.tsel-foot .btn:disabled { visibility: hidden; }
.tsel-empty { padding: 10px 8px; color: var(--fg2); }
.tsel-btn, .tsel-label, .tsel-foot span, .tsel-foot .btn { white-space: nowrap; flex: none; }

.tsel.open-up .tsel-menu { top: auto; bottom: calc(100% + 4px); }

/* KPI-Stat-Row (gerahmte Reihe) - design-bausteine § 7, Dashboard-Typo (Wert 18/600, gross 28 nur ohne
   Unterzeile). Linien = 1px-Gap auf border-control. Konsument setzt nur Spaltenaufteilung. */
.kpi-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--border-control); }
.kpi-row .kpi { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 2px solid transparent; background: var(--card); color: var(--fg); text-align: center; font: inherit; }
.kpi-row .kpi > * { max-width: 100%; }
.kpi-row .kpi:is(button) { cursor: pointer; }
.kpi-row .kpi:is(button):hover:not(:disabled) { background: var(--hover); }
.kpi-row .kpi:is(button):hover:not(:disabled) .kpi-label { color: var(--fg); }
.kpi-row .kpi:is(button):focus-visible { outline-offset: var(--focus-inset-offset) !important; }
.kpi-row .kpi:is(button):disabled { cursor: default; }
.kpi-row .kpi:is(button):disabled .kpi-value { color: var(--fg2); }
.kpi-row .kpi.filter-active { border-bottom-color: var(--active-border); }
.kpi-row .kpi-label, .kpi-row .kpi .segmented { min-height: 31px; }
.kpi-row .kpi-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--fg2); font-size: var(--type-body-font-size); font-weight: var(--type-body-font-weight); white-space: nowrap; }
.kpi-row .kpi-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.kpi-row .kpi-value { font-size: var(--type-metric-font-size); font-weight: var(--type-metric-font-weight); line-height: 24px; white-space: nowrap; font-variant-numeric: proportional-nums; }
.kpi-row .kpi-value-lg { flex: 1; display: flex; align-items: center; font-size: var(--type-metric-lg-font-size); font-weight: var(--type-metric-lg-font-weight); line-height: 32px; }
.kpi-row .kpi-sub { color: var(--fg2); font-size: var(--type-caption-font-size); line-height: 16px; }

/* Zustands-Banner, Ergebnis-Zeile, Refetch-Dimmen - design-bausteine § 9. Fehler role="alert" + Retry. */
.alert { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--type-caption-font-size); border: 1px solid var(--danger-border); background: var(--danger-soft); color: var(--danger-fg); }
.state-banner { display: flex; align-items: center; gap: var(--space-2); border: 1px solid; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--type-body-font-size); }
.state-banner.error { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-fg); }
.state-banner.warn { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-fg); }
.state-banner .banner-retry { display: inline-flex; align-items: center; margin-left: auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--fg); font: inherit; font-weight: var(--type-label-font-weight); white-space: nowrap; cursor: pointer; }
.state-banner .banner-retry:hover:not(:disabled) { background: var(--hover); }
.result-count { color: var(--fg2); font-size: var(--type-caption-font-size); }
.refetch-dim { transition: opacity var(--motion-control) var(--motion-ease); }
.refetch-dim.is-refetching { opacity: .55; }

/* Aufklapper - design-bausteine § 16. Padding gehört in den Inhalt des Clips. Bewegung wie im Dashboard:
   design-base.js setzt is-collapsed (0fr, Deckkraft 0, Versatz) und is-animating (schneidet Rand/Abstand des Clips mit ab). */
.disclosure { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--motion-panel) var(--motion-ease), opacity var(--motion-panel) var(--motion-ease), translate var(--motion-panel) var(--motion-ease); }
.disclosure.is-animating { overflow: hidden; }
.disclosure.is-collapsed { grid-template-rows: 0fr; opacity: 0; translate: 0 -6px; }
.disclosure-clip { min-height: 0; overflow: hidden; }
.disclosure[hidden], .tooltip[hidden] { display: none; }
/* Akkordeon-Dokument - design-bausteine § 16 (Owner-Wahl E5 + N1, Chevron links). Abschnitt = <section> mit
   <h2><button class="section-toggle" data-disclosure …>Titel <svg/></button></h2>; aufeinanderfolgende Abschnitte
   rücken zu einer Fläche mit 1-px-Linien zusammen, nummeriert 01, 02, … (CSS-Zähler je Elternelement). Der offene
   ist getönt, Titel und Chevron in --active-border, der Inhalt sitzt eingerückt als Fläche mit Rahmen in --active-border. */
:has(> section > h2 > .section-toggle) { counter-reset: doc-section; }
section:has(> h2 > .section-toggle) { counter-increment: doc-section; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); transition: background-color var(--motion-panel) var(--motion-ease); }
.section-toggle::after { content: counter(doc-section, decimal-leading-zero); order: 1; color: var(--fg2); font-weight: var(--type-body-font-weight); font-variant-numeric: tabular-nums; }
section:has(> h2 > .section-toggle) > h2 { margin: 0; font-size: var(--type-body-font-size); }
section:has(> h2 > .section-toggle):has(+ section > h2 > .section-toggle) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
section:has(> h2 > .section-toggle) + section:has(> h2 > .section-toggle) { margin-top: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.section-toggle { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--motion-control) var(--motion-ease), color var(--motion-panel) var(--motion-ease); }
.section-toggle:hover { background: var(--surface); }
.section-toggle svg { order: 2; flex: none; width: 16px; height: 16px; color: var(--fg2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); transition: transform var(--motion-panel) var(--motion-ease), color var(--motion-panel) var(--motion-ease); }
.section-toggle[aria-expanded="true"] svg { transform: none; color: var(--fg); }
section:has(> h2 > .section-toggle[aria-expanded="true"]) { background: var(--surface); }
section:has(> h2 > .section-toggle[aria-expanded="true"]) > h2 > .section-toggle,
section:has(> h2 > .section-toggle[aria-expanded="true"]) > h2 > .section-toggle svg { color: var(--active-border); }
section:has(> h2 > .section-toggle) > .disclosure > .disclosure-clip { margin: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 16px + var(--space-2)); padding: var(--space-3) var(--space-4); border: 1px solid var(--active-border); border-radius: var(--radius-md); background: var(--card); }
@media print {
  .disclosure[hidden] { display: grid !important; } /* schlägt das globale [hidden] !important: Papier/PDF vollständig */
  .section-toggle svg { display: none; }
  section:has(> h2 > .section-toggle[aria-expanded]) { background: none; }
  section:has(> h2 > .section-toggle[aria-expanded]) > h2 > .section-toggle { color: inherit; }
  section:has(> h2 > .section-toggle) > .disclosure > .disclosure-clip { margin-left: var(--space-4); border-color: var(--border); }
}

/* Tooltip - design-bausteine § 10. Helle Fläche; Hover/Fokus steuert design-base.js. */
.tooltip-host { position: relative; display: inline-flex; }
.tooltip { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-tooltip); width: max-content; max-width: 280px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--fg); box-shadow: var(--elevation-floating); font-size: var(--type-caption-font-size); font-weight: var(--type-caption-font-weight); line-height: var(--type-caption-line-height); white-space: normal; }

/* Flyouts - design-bausteine § 18 (Tooltip § 10, Toolbar-Select-Menü § 19): Einblenden mit kurzem Versatz, Ausblenden
   nur Deckkraft; data-state="closing" setzt design-base.js, hidden folgt nach der Bewegung. */
.tooltip, .tsel-menu { transition: opacity var(--motion-control) var(--motion-ease), translate var(--motion-panel) var(--motion-ease); }
.tooltip[data-state="closing"], .tsel-menu[data-state="closing"] { opacity: 0; }
@starting-style {
  .tooltip:not([hidden]), .tsel-menu:not([hidden]) { opacity: 0; translate: 0 -4px; }
  .tsel.open-up .tsel-menu:not([hidden]) { translate: 0 4px; }
}

/* Dialog - design-bausteine § 12. Zentrierung ohne Translate, Deckkraft und Feder getrennt. */
.overlay { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; background: var(--scrim); }
.overlay[hidden] { display: none; }
.dialog-panel { box-sizing: border-box; max-width: 420px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--fg); box-shadow: var(--elevation-floating); }
.overlay:not([hidden]) { animation: dialog-opacity var(--motion-panel) var(--motion-ease); }
.overlay:not([hidden]) .dialog-panel { animation: dialog-opacity var(--motion-panel) var(--motion-ease), dialog-scale var(--motion-panel) var(--motion-spring); }
@keyframes dialog-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-scale { from { scale: .92; } to { scale: 1; } }

/* Screenreader-Text und persistente Statusregion - design-bausteine § 13. */
.sr-only, .sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Rollen-Inspektor: optionale Token-Beschriftung, kein Status des geprueften Elements. */
[data-inspect-roles=true] [data-role]::after { content: attr(data-role); font-family: var(--type-code-font-family); font-size: var(--type-code-font-size); font-weight: var(--type-code-font-weight); line-height: 1.5; padding: 2px 4px; background: var(--info-soft); color: var(--info); border: 1px solid var(--info-border); display: inline-block; margin: 4px; }

@media (max-width: 1023.98px) {
  .filter-chip, .state-banner .banner-retry, .tsel-btn, .tsel-clear, .tsel-opt { min-height: 44px; }
  .tsel-btn { height: auto; }
}

/* Zustands-Übergänge aller Tracks (§ Motion, --motion-control); die Hover-/Druck-Farben selbst bleiben je Track. */
.btn, .segmented button, .filter-chip, .status-filter-chip, .tsel-btn, .tsel-clear, .tsel-opt, .kpi-row .kpi:is(button),
.state-banner .banner-retry, .app-record, .data-table thead th button, .mdlist button {
  transition: background-color var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease), box-shadow var(--motion-control) var(--motion-ease), filter var(--motion-control) var(--motion-ease);
}
html[data-track="hybridpro"] .status-filter-chip:hover, html[data-track="hybridpro"] .filter-chip:not([aria-pressed="true"]):hover { background: var(--hover); }
html[data-track="hybridpro"] .status-filter-chip:active, html[data-track="hybridpro"] .filter-chip:active { box-shadow: inset 0 0 0 var(--focus-width) var(--state-pressed-outline-color); }

html[data-track="hybridpro"] .btn.primary:not(:disabled):hover { background: var(--action-hover); }
html[data-track="hybridpro"] .btn.primary:not(:disabled):active { background: var(--action-active); }
html[data-track="hybridpro"] .btn.secondary:not(:disabled):hover,
html[data-track="hybridpro"] .btn.ghost:not(:disabled):hover,
html[data-track="hybridpro"] .segmented button:not(.active):is(:hover,.force-hover) { background: var(--hover); }
html[data-track="hybridpro"] .segmented button.active:is(:hover,.force-hover) { background: var(--state-selected-hover-bg); }
html[data-track="hybridpro"] .btn.secondary:active,
html[data-track="hybridpro"] .segmented button:is(:active,.force-pressed) { box-shadow: inset 0 0 0 var(--focus-width) var(--state-pressed-outline-color); }
/* !important preserves focus even on all:unset controls and debug specimens. */
:is(:focus-visible,.force-focus) { outline: var(--focus-width) solid var(--focus-color) !important; outline-offset: var(--focus-offset) !important; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: var(--motion-reduced-animation) !important; transition: var(--motion-reduced-transition) !important; scroll-behavior: var(--motion-reduced-scroll-behavior) !important; }
}