/* ═══════════════════════════════════════════════════════════════════════════
   ViCORE — UI-STANDARD (zentrale Vereinheitlichung)
   Lädt ZULETZT (siehe index.html) und prägt EINEN einheitlichen Look für:
     • Tabellenköpfe  → dunkel (var(--table-head-bg)) + helle Schrift, uppercase
     • Tabs           → aktiv dunkelgrün + weiß, inaktiv neutral
     • Tabellen-Hover/Container → einheitlich
   Tonänderung NUR über die Tokens in design-system.css (:root).
   Reine Optik — keine Fachlogik, keine neue Tabellenvariante.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. EINHEITLICHER TABELLENKOPF (dunkel) ──────────────────────────────────
   Deckt den kanonischen .data-table-Kopf UND alle bisherigen Modul-Sonderköpfe ab.
   Farb-/Schrift-Identität wird vereinheitlicht; Spaltenbreiten/Sticky bleiben unberührt. */
.data-table thead,
.dok-table thead,
.doc-table thead,
.obj-table thead,
.ho-table thead,
.pruef-table thead,
.wart-table thead,
.cck-cases-table thead,
.fk-table thead,
.adr-table thead {
  background: var(--table-head-bg);
}
.data-table thead th,
.abl-table th,
.dok-table thead th, .dok-table th,
.doc-table thead th,
.obj-table thead th,
.ho-table thead th,
.pruef-table thead th,
.wart-table thead th, .wart-table th,
.wart-sub-table th,
.rech-table thead th, .rech-table th,
.cck-cases-table thead th,
.fk-table thead th, .fk-table th,
.adr-table thead th, .adr-table th,
.cmp-nd-table th,
.cx-table thead th, .cx-table th,
.wk-wl thead th, .wk-wl th,
.stammdaten-table th,
.imp2-hist th, .imp2-preview th,
.imp-hist-table th, .wimp-map-table th,
.vp-det-table th, .vp-reg-table th,
#page-vorgaenge thead th {
  background: var(--table-head-bg) !important;
  color: var(--table-head-color) !important;
  /* Satzschreibung (Redesign 16.08.2026, projektweit durchgesetzt in Block 3 §10.1):
     gesperrte Versalien waren lauter als die Daten, die sie beschriften, und
     brauchten mehr Platz als der Wert selbst. */
  text-transform: none;
  font-weight: 600;
  letter-spacing: var(--table-head-spacing);
  border-bottom: none;
}

/* ── 1b. DIV-GRID-KÖPFE (kein <table>): den CONTAINER dunkeln, nicht die Einzel-Labels.
   Sonst entstehen „Textmarker"-Balken nur hinter den Labels (Vorgangs-/Ticketliste). ── */
/* (24.08.2026) Die .tk-head-Anteile sind entfallen: die alte Ticket-Tabelle mit
   DIV-Grid-Kopf existiert nicht mehr, die Liste rendert .tk2-item*. */
.cases-table-header,
#page-vorgaenge .cases-table-header,
.comm-thead {
  background: var(--table-head-bg) !important;
  color: var(--table-head-color) !important;
  border-bottom: 1px solid var(--table-head-line, var(--gray-300)) !important;
}
/* Innere Spaltenköpfe/Labels transparent + helle Schrift (keine eigenen Flächen) */
.cases-table-header > div,
.cases-th, .cases-th:hover,
.comm-thead > div {
  background: transparent !important;
  color: var(--table-head-color) !important;
}
/* Sortier-Icons im dunklen Kopf hell & lesbar (statt dunkelgrün/zu blass) */
.cases-th .cases-sort-svg { stroke: currentColor !important; opacity: .55; }
.cases-th:hover .cases-sort-svg { opacity: .85; }
.cases-th.is-sorted { font-weight: 700 !important; }
.cases-th.is-sorted .cases-sort-svg { stroke: var(--table-head-color) !important; opacity: 1; }
/* aktive Sortier-Spalte: Label hell (überschreibt das grüne style.css:7273 — auf Dunkel sonst unlesbar) */
.cases-th .cases-th-label, .cases-th.is-sorted .cases-th-label { color: var(--table-head-color) !important; }
/* KEINE senkrechten Linien im Tabellenkopf (Redesign 16.08.2026).
   Die frühere weiße Trennlinie war für den dunkelgrünen Kopf gedacht. Der Kopf ist
   jetzt hell — und ein Raster aus senkrechten Strichen ist genau der Excel-Look, den
   das Tabellensystem vermeiden soll. Spalten trennen sich über Ausrichtung und
   Abstand, nicht über Striche. Der Kopf schließt mit EINER Linie nach unten ab. */
.data-table thead th, .dok-table thead th, .doc-table thead th, .obj-table thead th,
.ho-table thead th, .pruef-table thead th, .wart-table th, .fk-table th, .adr-table th,
.cck-cases-table thead th, #page-vorgaenge thead th, .abl-table th {
  border-right: none;
  border-bottom: 1px solid var(--table-head-line, var(--gray-300));
}

/* Einheitliche Zellabstände + Kopfgröße der Haupt-Arbeitstabellen
   (kompakte Sub-/Vorschautabellen bewusst ausgenommen, damit sie nicht überlaufen). */
.data-table thead th,
.abl-table th,
.dok-table thead th,
.doc-table thead th,
.obj-table thead th,
.ho-table thead th,
.pruef-table thead th,
.wart-table thead th, .wart-table th,
.rech-table thead th, .rech-table th,
.cck-cases-table thead th,
.fk-table thead th, .fk-table th,
.adr-table thead th, .adr-table th,
.cx-table th, .wk-wl th,
#page-vorgaenge thead th {
  padding: var(--table-cell-pad);
  font-size: var(--table-head-size);
}

/* Sortier-/Resize-Icons & Links im dunklen Kopf hell halten (Lesbarkeit) */
.data-table thead th svg, .dok-table thead th svg, .doc-table thead th svg,
.obj-table thead th svg, .abl-table th svg,
.data-table thead th a, .dok-table thead th a, .doc-table thead th a {
  color: var(--table-head-color); fill: currentColor;
}
.data-table thead th .sort-ind, .doc-table thead th .sort-ind { color: var(--table-head-color); opacity: .85; }

/* ── 2. EINHEITLICHE TABELLEN-CONTAINER / HOVER ──────────────────────────────── */
.abl-tablewrap, .adr-tablewrap, .fk-tablewrap, .dok-tablewrap, .cmp-tablewrap, .cx-tablewrap {
  border-radius: var(--table-radius);
}
.data-table tbody tr:hover td,
.abl-table tbody tr:hover td,
.dok-table tbody tr:hover td,
.doc-table tbody tr:hover td,
.obj-table tbody tr:hover td,
.fk-table tbody tr:hover td,
.adr-table tbody tr:hover td,
.wart-table tbody tr:hover td {
  background: var(--table-row-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. VICore TAB-SYSTEM — „Ink-Underline" (zentral, projektweit)
   ────────────────────────────────────────────────────────────────────────────
   22.07.2026 (Nutzerwunsch): Pill-/Segment-Optik abgelöst. Transparente Spur mit
   feiner Basislinie; aktiver Tab = Forest-Schrift + Unterstrich-Indikator, der
   beim Wechsel einwächst (Animation statt Transition → funktioniert auch, wenn
   Module die Tab-Leiste per innerHTML komplett neu rendern). Hover zeigt eine
   dezente Vorschau-Linie. EIN wiederverwendbares Tab-Design für die ganze App.
   Optik aus den --vitab-*-Tokens (design-system.css → dort umstellen, nie hier).

   Kanonische Komponente:
     <div class="vi-tabs vi-tabs--primary">                 ← Spur/Track
       <button class="vi-tab is-active">
         <svg class="vi-tab__icon">…</svg>
         <span class="vi-tab__label">Übersicht</span>
         <span class="vi-tab__badge">2</span>
       </button>
       <button class="vi-tabs__more vi-tab">Mehr
         <svg class="vi-tab__chevron">…</svg></button>
     </div>
   Varianten:  --primary (Detailbereiche) · --secondary (Modul-Subnav, kompakter) ·
               --compact (Statusfilter/Segmented Controls).

   Bestehende Modul-Tabklassen werden hier MIT-aliasiert (kein Markup-Umbau):
     Vorgang  .case-tabs-nav/.workspace-tabs/.case-tab-button/.case-tab-count/.case-tab-ico
     BKA      .sc-tabs/.sc-tab            Energie   .vpd-tabs/.vpd-tab/.cnt · .abs-/.meter-
     Objekt   .obj-detail-tabs/.obj-tab-btn   Adressen .adr-tabs/.adr-tab · .cp-modes/.cp-mode-tab
     Abnahmen .ho-tabs/.ho-tab/.ho-tab-count  Admin    .set-tabs/.set-tab   Mehr-Tab .pd-more-btn/.pd-more-caret
   Damit sind die früheren grünen Nur-Unterstreichungs-/Soft-Stile abgelöst
   (Legacy-Regeln in style.css/energy.css/handover.css/settings.css/addresses.css/
   service-charges.css bleiben als Fallback bestehen, werden hier überlagert).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 3a. SPUR / TRACK ──────────────────────────────────────────────────────── */
.vi-tabs,
.case-tabs-nav, .workspace-tabs, #case-detail-modal .case-tabs-nav,
.obj-detail-tabs, .abs-tabs, .meter-tabs,
.vpd-tabs, .adr-tabs, .ho-tabs, .set-tabs, .sc-tabs, .cp-modes {
  position: relative;                 /* Anker für den gleitenden .vi-tabs-inkbar (vi-tabs-ink.js) */
  display: flex !important;
  align-items: center;
  gap: var(--vitab-gap) !important;
  padding: var(--vitab-track-pad) !important;
  background: var(--vitab-track-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--vitab-track-line, rgba(35,33,28,.12)) !important;
  border-radius: var(--vitab-track-radius) !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

/* Vorgangs-Workspace: Scroll-Fortsetzung an beiden Kanten sichtbar halten.
   Die lokalen Deckverläufe verdecken den Schatten jeweils am echten Listenende;
   der vertikale Inhalts-Scroll bleibt davon vollständig unberührt. */
.page-vorgang-detail .workspace-tabs {
  --vitab-inactive-color: var(--gray-700);
  scroll-padding-inline: 14px;
  overscroll-behavior-inline: contain;
  scrollbar-color: #9B9384 #F7F4ED;
  background-color: var(--color-surface) !important;
  background-image:
    linear-gradient(to right, var(--color-surface) 45%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--color-surface) 45%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%, rgba(35,33,28,.2), rgba(35,33,28,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(35,33,28,.2), rgba(35,33,28,0)) !important;
  background-position: left center, right center, left center, right center !important;
  background-repeat: no-repeat !important;
  background-size: 30px 100%, 30px 100%, 10px 100%, 10px 100% !important;
  background-attachment: local, local, scroll, scroll !important;
}
/* Sticky-Leisten brauchen trotz transparentem Track einen deckenden Hintergrund,
   sonst scheint der Inhalt beim Scrollen durch. */
.vi-tabs.is-sticky { background: var(--vi-cream, #FAFBFA) !important; }
/* Modal-eingebettete Abnahmen-Leiste hat keinen gepolsterten Eltern-Container →
   Leiste einrücken, damit sie nicht an den Modalrändern klebt. */
.ho-tabs { margin: 4px 24px 14px !important; }
/* Kompakt-Modal (#case-detail-modal): Sand-Band an die 22px-Inhaltskante ausrichten
   (überschreibt die ID-spezifischen Legacy-Regeln style.css:8201/8208). */
#case-detail-modal .case-tabs-nav { margin: 0 22px 14px !important; }
#case-detail-modal .case-tab-button { height: var(--vitab-h) !important; padding: 0 12px !important; font-size: var(--vitab-font) !important; }

.vi-tabs::-webkit-scrollbar,
.case-tabs-nav::-webkit-scrollbar, .workspace-tabs::-webkit-scrollbar,
.obj-detail-tabs::-webkit-scrollbar, .abs-tabs::-webkit-scrollbar, .meter-tabs::-webkit-scrollbar,
.vpd-tabs::-webkit-scrollbar, .adr-tabs::-webkit-scrollbar, .ho-tabs::-webkit-scrollbar,
.set-tabs::-webkit-scrollbar, .sc-tabs::-webkit-scrollbar, .cp-modes::-webkit-scrollbar { height: 6px; }
.vi-tabs::-webkit-scrollbar-thumb,
.case-tabs-nav::-webkit-scrollbar-thumb, .workspace-tabs::-webkit-scrollbar-thumb,
.obj-detail-tabs::-webkit-scrollbar-thumb, .abs-tabs::-webkit-scrollbar-thumb, .meter-tabs::-webkit-scrollbar-thumb,
.vpd-tabs::-webkit-scrollbar-thumb, .adr-tabs::-webkit-scrollbar-thumb, .ho-tabs::-webkit-scrollbar-thumb,
.set-tabs::-webkit-scrollbar-thumb, .sc-tabs::-webkit-scrollbar-thumb, .cp-modes::-webkit-scrollbar-thumb {
  background: var(--gray-300); border-radius: var(--radius-sm);
}
.page-vorgang-detail .workspace-tabs::-webkit-scrollbar { height: 7px; }
.page-vorgang-detail .workspace-tabs::-webkit-scrollbar-track { background: #F7F4ED; }
.page-vorgang-detail .workspace-tabs::-webkit-scrollbar-thumb {
  background: #9B9384;
  border: 1px solid #F7F4ED;
  border-radius: var(--radius-sm);
}

/* ── 3b. EINZELNER TAB — inaktiv ───────────────────────────────────────────── */
.vi-tab,
.case-tab-button, .obj-tab-btn, .abs-tab, .meter-tab,
.vpd-tab, .adr-tab, .ho-tab, .set-tab, .sc-tab, .cp-mode-tab {
  appearance: none;
  position: relative;                 /* Anker für den ::after-Unterstrich-Indikator */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  height: var(--vitab-h) !important;
  padding: 0 var(--vitab-pad-x) !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: var(--vitab-radius) var(--vitab-radius) 0 0 !important;
  background: transparent !important;
  color: var(--vitab-inactive-color) !important;
  font-family: var(--font-family-body, inherit);
  font-size: var(--vitab-font) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .16s ease, color .16s ease;
}
/* Unterstrich-Indikator (Basiszustand: unsichtbar, wächst per Transition/Animation) */
.vi-tab::after,
.case-tab-button::after, .obj-tab-btn::after, .abs-tab::after, .meter-tab::after,
.vpd-tab::after, .adr-tab::after, .ho-tab::after, .set-tab::after, .sc-tab::after, .cp-mode-tab::after {
  content: '';
  position: absolute;
  left: 9px; right: 9px; bottom: 0;
  height: var(--vitab-ink-h, 2.5px);
  border-radius: 2px 2px 0 0;
  background: var(--vitab-ink, currentColor);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.vi-tab:hover,
.case-tab-button:hover, .obj-tab-btn:hover, .abs-tab:hover, .meter-tab:hover,
.vpd-tab:hover, .adr-tab:hover, .ho-tab:hover, .set-tab:hover, .sc-tab:hover, .cp-mode-tab:hover {
  background: var(--vitab-hover-bg) !important;
  color: var(--vitab-hover-color) !important;
}
/* Hover-Vorschau: dezente, halb eingewachsene Linie auf nicht-aktiven Tabs */
.vi-tab:hover:not(.is-active):not(.active)::after,
.case-tab-button:hover:not(.active)::after, .obj-tab-btn:hover:not(.active)::after,
.abs-tab:hover:not(.active)::after, .meter-tab:hover:not(.meter-tab-active)::after,
.vpd-tab:hover:not(.active)::after, .adr-tab:hover:not(.active)::after,
.ho-tab:hover:not(.active)::after, .set-tab:hover:not(.active)::after,
.sc-tab:hover:not(.is-active)::after, .cp-mode-tab:hover:not(.active)::after {
  transform: scaleX(.55);
  opacity: .25;
}

/* ── 3c. AKTIVER TAB — Forest-Schrift + eingewachsener Unterstrich ─────────── */
.vi-tab.is-active, .vi-tab.active,
.case-tab-button.active,
.workspace-tabs .case-tab-button.active,
#case-detail-modal .case-tab-button.active,
.case-tabs-nav .case-tab-button.active,
.obj-tab-btn.active,
.abs-tab.active,
.meter-tab.meter-tab-active, .meter-tab-active,
.vpd-tab.active, .adr-tab.active, .ho-tab.active, .set-tab.active,
.sc-tab.is-active, .cp-mode-tab.active {
  background: var(--vitab-active-bg) !important;
  color: var(--vitab-active-color) !important;
  border-bottom-color: transparent !important;
  border-radius: var(--vitab-radius) !important;
  box-shadow: var(--vitab-active-shadow) !important;
  font-weight: 600 !important;
}
/* Aktiver Unterstrich: wächst aus der Mitte ein. Animation statt Transition, damit der
   Effekt auch greift, wenn ein Modul die Tab-Leiste beim Wechsel komplett neu rendert. */
.vi-tab.is-active::after, .vi-tab.active::after,
.case-tab-button.active::after,
.obj-tab-btn.active::after,
.abs-tab.active::after,
.meter-tab.meter-tab-active::after, .meter-tab-active::after,
.vpd-tab.active::after, .adr-tab.active::after, .ho-tab.active::after, .set-tab.active::after,
.sc-tab.is-active::after, .cp-mode-tab.active::after {
  animation: vitab-ink-in .38s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes vitab-ink-in {
  from { transform: scaleX(.55); opacity: 0; }
  to   { transform: scaleX(1);   opacity: 1; }
}
/* Gleitender Indikator (vi-tabs-ink.js): EIN Balken je Leiste, gleitet per Transition zum
   aktiven Tab. Leisten mit Balken (.vi-ink-js) blenden die ::after-Fallback-Striche aus. */
.vi-tabs-inkbar {
  position: absolute;
  bottom: 0; left: 0; width: 0;
  height: var(--vitab-ink-h, 2.5px);
  border-radius: 2px 2px 0 0;
  background: var(--vitab-ink, currentColor);
  opacity: 0;
  pointer-events: none;
  transition: left .32s cubic-bezier(.22,.61,.36,1), width .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
  will-change: left, width;
}
.vi-ink-js .vi-tab.is-active::after, .vi-ink-js .vi-tab.active::after,
.vi-ink-js .case-tab-button.active::after,
.vi-ink-js .obj-tab-btn.active::after,
.vi-ink-js .abs-tab.active::after,
.vi-ink-js .meter-tab.meter-tab-active::after, .vi-ink-js .meter-tab-active::after,
.vi-ink-js .vpd-tab.active::after, .vi-ink-js .adr-tab.active::after,
.vi-ink-js .ho-tab.active::after, .vi-ink-js .set-tab.active::after,
.vi-ink-js .sc-tab.is-active::after, .vi-ink-js .cp-mode-tab.active::after {
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vi-tab::after, .case-tab-button::after, .obj-tab-btn::after, .abs-tab::after,
  .meter-tab::after, .vpd-tab::after, .adr-tab::after, .ho-tab::after,
  .set-tab::after, .sc-tab::after, .cp-mode-tab::after { transition: none; animation-duration: 0s !important; }
  .vi-tabs-inkbar { transition: none; }
}

/* Icons/SVG im aktiven Tab folgen der aktiven Schriftfarbe */
.vi-tab.is-active .vi-tab__icon, .vi-tab.active .vi-tab__icon,
.case-tab-button.active .case-tab-ico, .case-tab-button.active svg,
.obj-tab-btn.active svg, .vpd-tab.active svg { color: var(--vitab-active-color) !important; opacity: 1; }

/* ── 3d. FOKUS (Tastatur) — eingerückter Ring, wird vom Scroll-Container nicht geklippt ── */
.vi-tab:focus-visible,
.case-tab-button:focus-visible, .obj-tab-btn:focus-visible, .abs-tab:focus-visible,
.meter-tab:focus-visible, .vpd-tab:focus-visible, .adr-tab:focus-visible,
.ho-tab:focus-visible, .set-tab:focus-visible, .sc-tab:focus-visible, .cp-mode-tab:focus-visible {
  outline: 2px solid var(--vitab-focus-ring);
  outline-offset: -2px;
}
.page-vorgang-detail .workspace-tabs .case-tab-button:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: -3px;
  background: var(--green-50) !important;
  color: var(--green-700) !important;
  scroll-margin-inline: 12px;
}

/* ── 3e. ICON & CHEVRON ────────────────────────────────────────────────────── */
.vi-tab__icon, .case-tab-ico {
  flex: 0 0 auto;
  width: var(--vitab-icon-size); height: var(--vitab-icon-size);
  opacity: .9;
}
.vi-tab__chevron, .pd-more-caret { flex: 0 0 auto; opacity: .7; }
.vi-tab.is-active .vi-tab__chevron, .case-tab-button.active .pd-more-caret { opacity: 1; }

/* ── 3f. BADGE / ZÄHLER (einheitlich, ruhig) ───────────────────────────────── */
.vi-tab__badge,
.case-tab-count, .ho-tab-count, .vpd-tab .cnt, .pd-more-count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: var(--vitab-badge-bg) !important;
  color: var(--vitab-badge-color) !important;
  font-family: var(--vi-font-mono) !important;
  font-size: var(--text-xxs) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
/* Badge im aktiven (grünen) Tab: heller, lesbar auf Grün */
.vi-tab.is-active .vi-tab__badge, .vi-tab.active .vi-tab__badge,
.case-tab-button.active .case-tab-count,
.workspace-tabs .case-tab-button.active .case-tab-count,
#case-detail-modal .case-tab-button.active .case-tab-count,
.case-tabs-nav .case-tab-button.active .case-tab-count,
.ho-tab.active .ho-tab-count, .vpd-tab.active .cnt {
  background: var(--vitab-badge-active-bg) !important;
  color: var(--vitab-badge-active-color) !important;
}

/* ── 3g. VARIANTEN ─────────────────────────────────────────────────────────── */
/* Secondary — Modul-Subnav (kompakter, i. d. R. ohne Icons): BKA, Adressen, Admin, cp-Modi */
.vi-tabs--secondary .vi-tab,
.sc-tab, .adr-tab, .set-tab, .cp-mode-tab {
  height: var(--vitab-h-secondary) !important;
  padding: 0 var(--vitab-pad-x-secondary) !important;
  font-size: var(--vitab-font-secondary) !important;
}
/* Compact — Statusfilter / Segmented Controls (Offen · Überfällig · … · Alle) */
.vi-tabs--compact { gap: 3px !important; padding: 0 !important; }
.vi-tabs--compact .vi-tab {
  height: var(--vitab-h-compact) !important;
  padding: 0 var(--vitab-pad-x-compact) !important;
  font-size: var(--vitab-font-compact) !important;
  gap: 5px;
}

/* ── 3h. „MEHR"-TAB ────────────────────────────────────────────────────────────
   Sitzt als letztes Element tight am rechten Ende (kein margin-left:auto → kein
   Sand-Loch im Track auf breiten Screens). Aktiv/offen = grüne Voll-Pille.
   `.pd-more-btn` ist selbst ein `.case-tab-button` → erbt die Tab-Optik bereits. */
.pd-more-wrap { flex: 0 0 auto; display: inline-flex; margin-left: 0 !important; }
.vi-tabs__more.is-active, .pd-more-btn.pd-more-open {
  background: var(--vitab-hover-bg) !important;
  color: var(--vitab-active-color) !important;
}
.pd-more-btn.pd-more-open .pd-more-caret { color: var(--vitab-active-color) !important; opacity: 1; }

@media (pointer: coarse) {
  .page-vorgang-detail .workspace-tabs .case-tab-button { height: 44px !important; }
}

@media (forced-colors: active) {
  .page-vorgang-detail .workspace-tabs .case-tab-button:focus-visible {
    outline-color: Highlight;
    forced-color-adjust: auto;
  }
}

/* ── 4. AUSNAHME bewusst belassen ─────────────────────────────────────────────
   .example-table (Doku-Beispiel), .ho-kv (Schlüssel-Wert-Liste, keine Datentabelle),
   matrix-*-th (Wartungs-Matrix-Spezialkopf), Portal-Tabs (.pt-*) bleiben eigenständig. */