/* wepa-manager — Minimale Ergaenzungen zu Tabler v1.4.0
 * Richtwert: max. 150 Zeilen. Jede Regel mit Kommentar warum keine Tabler-Klasse passt.
 */

/* Layout-Breiten zentral. Tabler hat fuer keine der beiden eine Variable:
   die vertikale Navbar traegt 15rem hartkodiert, die eingeschobenen Panels
   rechts sind ohnehin Eigenbau (Offcanvas ist modal-artig, siehe unten).
   --wepa-panel-width gilt fuer BEIDE rechten Panels — Support-Assistent hier
   und Detail-Sidebar in detail-sidebar.css. Sie fahren an derselben
   Bildschirmkante ein und sollen gleich breit sein. */
:root {
  --wepa-sidebar-width: 16rem;  /* Tabler-Default 15rem + 1rem, sonst draengt sich die Schrittanzeige */
  --wepa-panel-width: 23rem;    /* vorher 380px */
}

/* Linke Navbar breiter als der Tabler-Default. Zwei Regeln noetig: die fixed
   Navbar selbst und der Versatz des Inhalts — laesst man die zweite weg, liegt
   der Seiteninhalt unter der Navbar. Beide stehen im Bundle in
   @media (min-width: 992px), gleiche Spezifitaet genuegt (main.css laedt
   nach tabler.min.css), kein !important. */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    width: var(--wepa-sidebar-width);
  }
  .navbar-expand-lg.navbar-vertical ~ .navbar,
  .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: var(--wepa-sidebar-width);
  }
}

/* Public Pages (Landing, Login): horizontalen Overflow verhindern —
   .row negative Margins und shadow-lg koennen auf Mobile ueber den Viewport ragen */
.page-public {
  overflow-x: hidden;
}

/* Public Pages: Container-Padding auf Mobile erhoehen — 0.75rem (Tabler-Default) ist
   fuer Landing-Content zu knapp, 1.25rem gibt 20px Seitenabstand */
@media (max-width: 767.98px) {
  .page-public .container-xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Landing-Navbar Collapse Mobile: volle Viewport-Breite — Tabler/Bootstrap collapse erbt
   Container-Padding, weisser Hintergrund endet daher vor dem Viewport-Rand */
@media (max-width: 767.98px) {
  .page-public #navbar-menu {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1rem;
  }
}

/* Landing-Navbar Logo: fixe Hoehe — kein Bootstrap-Utility fuer rem-basierte Hoehe */
.landing-logo {
  height: 1.8rem;
  margin-top: 0.2rem;
}
@media (min-width: 768px) {
  .landing-logo {
    height: 2rem;
  }
}

/* Landing Hero-Titel: responsive font-size + line-height — Bootstrap hat keine responsive Display-Klassen (display-lg-5 etc.).
   Die Serifen-Headline braucht mehr Zeilenabstand als die Default-1.2 bei Umbruch */
.hero-title {
  font-size: 1.75rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }
}

/* Auth-Logo: max-width 60% — kein Bootstrap-Utility vorhanden */
.auth-logo {
  max-width: 60%;
}

/* Sidebar-Navbar: min-height begrenzen — Tabler setzt keine explizite min-height */
.navbar {
  min-height: 4rem;
  --tblr-navbar-active-bg: var(--tblr-active-bg);
}

/* Navbar-Logo: Padding + max-width — Tabler hat keinen Utility fuer Logo-Sizing in Sidebar */
.navbar-logo {
  padding: .5rem calc(var(--tblr-page-padding));
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
  max-width: 80%;
}


/* Page-Header: min-height erhoehen — Tabler default 2.25rem zu kompakt fuer das Layout */
.page-header {
  min-height: 4.6rem;
}

/* Formular-Sektionsgruppe — Seitenhintergrund fuer visuelle Gruppierung auf weisser Card */
.form-section {
  background-color: var(--tblr-body-bg);
}

/* Filter-Tabs: weisser Hintergrund — btn-outline-secondary ist transparent,
   Seiten-Hintergrund scheint durch. Rundung passend zu btn-sm. */
.btn-group[role="group"] {
  background-color: #ffffff;
  border-radius: var(--tblr-border-radius);
}
[data-bs-theme="dark"] .btn-group[role="group"] {
  background-color: var(--tblr-bg-surface);
}

/* Filter-Tabs mit Umbruch: keine Streckung, kleiner Zeilenabstand.
   Bootstrap-Default .btn-group > .btn ist flex: 1 1 auto - das streckt Buttons
   in der zweiten Zeile auf die volle Containerbreite. row-gap statt gap,
   damit der horizontale -1px-Border-Overlap zwischen Buttons intakt bleibt.
   Container-Hintergrund auf transparent: sonst leuchten Zeilenluecke und freier
   Platz nach dem letzten Button in Zeile 2 als weisser Block. Stattdessen
   wandert das Weiss auf die einzelnen outline-Buttons - die haben sonst
   transparenten Hintergrund und wuerden auf body-bg unleserlich werden. */
.btn-group[role="group"].flex-wrap > .btn {
  flex: 0 0 auto;
}
.btn-group[role="group"].flex-wrap {
  row-gap: 4px;
  background-color: transparent;
}
/* Nur im Ruhe-Zustand weisses bg setzen - Bootstrap-Hover/Focus/Active sonst
   ueberschrieben (weisser Text auf weissem bg). */
.btn-group[role="group"].flex-wrap
  > .btn-outline-secondary:not(:hover):not(:focus):not(:active) {
  background-color: #ffffff;
}
[data-bs-theme="dark"]
  .btn-group[role="group"].flex-wrap
  > .btn-outline-secondary:not(:hover):not(:focus):not(:active) {
  background-color: var(--tblr-bg-surface);
}

/* Filter-Tab Count-Badges: eigene Klasse statt bg-secondary-lt, da Tabler-Utility !important
   verwendet und bei Button-Hover nicht ohne !important ueberschrieben werden kann */
.badge-tab-count {
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
  color: var(--tblr-secondary);
}
.btn-outline-secondary:hover .badge-tab-count,
.btn-outline-secondary:focus .badge-tab-count {
  background-color: var(--tblr-gray-200);
  color: var(--tblr-secondary);
}

/* Card > table-responsive: Ecken-Rundung erben — Tabler 1.4.0 setzt kein border-radius
   auf .table-responsive, daher weisse Ecken-Luecke bei Tabellen in Cards.
   overflow-x: auto (Tabler-Default) clippt Inhalte automatisch auf die gerundete Form. */
.card > .table-responsive:first-child {
  border-top-left-radius: var(--tblr-card-inner-border-radius);
  border-top-right-radius: var(--tblr-card-inner-border-radius);
}
.card > .table-responsive:last-child {
  border-bottom-left-radius: var(--tblr-card-inner-border-radius);
  border-bottom-right-radius: var(--tblr-card-inner-border-radius);
}

/* Top-Navbar Suche: min/max-width — kein Tabler-Utility fuer flexible Suchfeld-Breite */
#topnav-search-wrapper {
  min-width: 160px;
  max-width: 400px;
  flex: 1;
}

/* Top-Navbar Recents: min-width:0 erlaubt Flex-Shrink, overflow:hidden verhindert
   Flash von Overflow-Items bevor JS die Priority-Plus-Verteilung durchfuehrt */
#topnav-recents {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow: hidden;
}

/* Suchfeld Ergebnis-Dropdown — breiter als Suchfeld, rechtsbuendig (erweitert nach links) */
.topnav-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1000;
  min-width: 500px;
  max-width: 600px;
}

/* Webfont-Icons in Navigation: Tabler nutzt SVGs mit icon-Klasse (1.25rem), Webfont erbt nur body font-size */
.nav-link-icon .ti {
  font-size: 1.1rem;
}
.navbar-nav .nav-link > .ti {
  font-size: 1.1rem;
}
.dropdown-item-icon.ti {
  font-size: 1.1rem;
}

/* Icon-only Buttons: Webfont-Icons groesser — Tabler setzt icon-size nur fuer .icon (SVG), nicht fuer .ti (Webfont) */
.btn-icon .ti {
  font-size: 1.2rem;
}

/* Avatar Webfont-Icons: Tabler setzt avatar-icon-size nur fuer SVG (.icon),
   Webfont-Icons erben stattdessen die zu kleine avatar-font-size (Initialen-Groesse) */
.avatar .ti {
  font-size: var(--tblr-avatar-icon-size);
}

/* Wertpapier-Avatar mit Logo: img fuellt den Avatar, Padding gegen Rand-Beruehrung,
   weisser Hintergrund, weil viele Logos transparent + farbig sind und auf dem
   Light-Avatar-Hintergrund (bg-{farbe}-lt) sonst gefaerbt wirken. */
.wp-avatar { overflow: hidden; }
.wp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  border-radius: inherit;
}

/* elbstream Hobby-Lizenz: Backlink mit min. 12pt Schriftgroesse erforderlich.
   Tabler Body-Default ist 0.875rem (~10.5pt) - hier explizit 1rem (~12pt).
   Farbe gray-400 fuer dezenten, aber sichtbaren Hinweis. */
.elbstream-attribution {
  font-size: 1rem;
  color: var(--tblr-gray-400);
}
.elbstream-attribution a {
  color: var(--tblr-gray-400);
}

/* Empty-State Icons: Tabler setzt icon-size nur fuer SVG, Webfont erbt zu kleine body font-size */
.empty-icon .ti {
  font-size: 3rem;
  color: var(--tblr-gray-300);
}

/* Navbar Dark Mode — Tabler-Selektoren matchen nur body[data-bs-theme] oder .navbar[data-bs-theme],
   nicht html[data-bs-theme]. Wir setzen das Attribut auf <html>, daher hier die fehlende Bruecke. */
[data-bs-theme="dark"] .navbar {
  --tblr-navbar-color: rgba(255, 255, 255, 0.7);
  --tblr-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --tblr-navbar-active-color: #ffffff;
  --tblr-navbar-brand-color: #ffffff;
}

/* Logo-Umschaltung Dark Mode — dediziertes weisses Logo statt CSS-Filter */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; opacity: 0.7; }

/* Formular-Sektionen im Dark Mode — tblr-gray-100 ist im Dark Mode zu hell */
[data-bs-theme="dark"] .form-section {
  background-color: var(--tblr-bg-surface-secondary);
}

/* Dark Mode Farbvariablen aufhellen — Tabler passt text-{color} und bg-{color}-lt
   Utility-Klassen nicht automatisch an, Light-Mode-Werte (#066fd1 etc.) sind auf
   #111827 schlecht lesbar. Alle Werte WCAG AA (4.5:1 Kontrast) gegen #1f2937. */
[data-bs-theme="dark"] {
  --tblr-blue: #4da3ff;
  --tblr-blue-rgb: 77, 163, 255;
  --tblr-green: #51cf66;
  --tblr-green-rgb: 81, 207, 102;
  --tblr-red: #ff6b6b;
  --tblr-red-rgb: 255, 107, 107;
  --tblr-yellow: #ffd43b;
  --tblr-yellow-rgb: 255, 212, 59;
  --tblr-purple: #cc5de8;
  --tblr-purple-rgb: 204, 93, 232;
  --tblr-orange: #ff922b;
  --tblr-orange-rgb: 255, 146, 43;
}

/* Badge-Outline im Dark Mode: leichter Hintergrund-Tint — transparent + farbiger Text
   hat auf dunklem Grund zu wenig Kontrast */
[data-bs-theme="dark"] .badge-outline {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* bg-*-lt Badges im Dark Mode: Text auf aufgehellte Variante setzen — Tabler invertiert
   den Text dunkel auf hellem Hintergrund, was im Dark Mode schlecht lesbar ist */
[data-bs-theme="dark"] .bg-yellow-lt { color: var(--tblr-yellow); }
[data-bs-theme="dark"] .bg-red-lt { color: var(--tblr-red); }
[data-bs-theme="dark"] .bg-green-lt { color: var(--tblr-green); }
[data-bs-theme="dark"] .bg-blue-lt { color: var(--tblr-blue); }
[data-bs-theme="dark"] .bg-purple-lt { color: var(--tblr-purple); }
[data-bs-theme="dark"] .bg-orange-lt { color: var(--tblr-orange); }
[data-bs-theme="dark"] .bg-cyan-lt { color: var(--tblr-cyan, #15aabf); }

/* Tabellen-Borders im Dark Mode: Tabler translucent borders (rgba 0.14) sind
   auf dunklem Hintergrund kaum sichtbar — erhoehen auf opaken Wert */
[data-bs-theme="dark"] .table {
  --tblr-table-border-color: var(--tblr-border-color);
}

/* bg-light Alternative fuer Dark Mode: Light Mode = normales bg-light Verhalten,
   Dark Mode = dunkle Surface-Farbe statt hartkodiertem Grau */
.bg-light-dm {
  background-color: var(--tblr-gray-100);
}
[data-bs-theme="dark"] .bg-light-dm {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

/* GuV-Drilldown-Wrapper: dunklerer Hintergrund (gray-400) damit die
   enthaltene Card sich klarer vom Bereich rundherum abhebt */
.bg-guv-drilldown {
  background-color: var(--tblr-gray-200);
}
[data-bs-theme="dark"] .bg-guv-drilldown {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

/* Assistant Sidebar — Tabler Offcanvas ersetzt durch eigene fixed Sidebar, da Offcanvas
   modal-artig ist (Backdrop, Seite deaktiviert) und nicht fuer persistente Nutzung geeignet */
#assistant-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--wepa-panel-width);
  max-width: 100vw;
  z-index: 1040;
  background: var(--tblr-bg-surface);
  border-left: 1px solid var(--tblr-border-color);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
body.assistant-open #assistant-sidebar {
  transform: translateX(0);
}
/* Content zusammenschieben wenn Sidebar offen — nur Desktop */
@media (min-width: 992px) {
  body.assistant-open {
    padding-right: var(--wepa-panel-width);
    transition: padding-right 0.3s ease;
  }
  body:not(.assistant-open) {
    transition: padding-right 0.3s ease;
  }
}
/* Assistant Sidebar auf Tablets schmaeler — 23rem nimmt zu viel vom
   Content-Bereich weg wenn Viewport unter 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #assistant-sidebar {
    width: 19rem;
  }
  body.assistant-open {
    padding-right: 19rem;
  }
}
/* Dashboard: Grosse Content-Cards stacken bei offener Assistant-Sidebar —
   Bootstrap-Grid reagiert auf Viewport, nicht auf verfuegbaren Platz.
   Nur col-lg-4/8 (Content-Sections), nicht col-lg-3 (KPI-Cards). */
@media (max-width: 1399.98px) {
  body.assistant-open .row-deck > .col-lg-4,
  body.assistant-open .row-deck > .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
  }
}
/* Trigger-Button verstecken wenn Sidebar offen */
body.assistant-open #assistant-trigger {
  display: none !important;
}

/* Assistant Typing-Animation — kein Tabler-Utility fuer animierte Punkte */
.animated-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Assistant Chat-Widget: Textarea Auto-Height — kein Tabler-Utility fuer resize:none + overflow:hidden */
#assistant-input {
  resize: none;
  overflow: hidden;
}

/* Assistant Markdown: Kompakte Absaetze in Chat-Bubbles — Tabler/Bootstrap p-Margin (1rem) ist zu gross fuer Chat */
.assistant-markdown p { margin-bottom: 0.4em; }
.assistant-markdown p:last-child { margin-bottom: 0; }
.assistant-markdown ul, .assistant-markdown ol { margin-bottom: 0.4em; padding-left: 1.25em; }
.assistant-markdown li { margin-bottom: 0.15em; }
.assistant-markdown a { color: var(--tblr-primary); text-decoration: underline; }
.assistant-markdown strong { font-weight: 600; }

/* Assistant Suggestion-Badges — Tabler badge-outline hat keinen hover-state */
.assistant-suggestion,
.assistant-new-chat {
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Truncation fuer lange Vorschlagstexte — kein Tabler-Utility fuer ellipsis auf flex-item Badges */
.assistant-suggestion {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-suggestion:hover {
  background-color: var(--tblr-bg-surface-secondary);
}
/* Dismiss-Button — nur bei Hover sichtbar, oben-links am Badge */
.assistant-suggestion-dismiss {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--tblr-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.assistant-suggestion-wrapper:hover .assistant-suggestion-dismiss {
  opacity: 1;
}

/* Sidebar Active-State: Font-Weight erhoehen — Tabler setzt nur Farbe + linken Rand,
   font-weight bleibt bei 400. Mit 600 wird der aktive Menuepunkt deutlicher erkennbar. */
.navbar-nav .nav-item.active > .nav-link {
  font-weight: 600;
}

/* Navbar-Badge Inline-Position — Tabler setzt position:absolute + transform fuer Notification-Dots,
   wir wollen das Badge inline neben dem Menuetitel anzeigen */
.navbar .navbar-nav .nav-link .badge {
  position: static;
  transform: none;
}

/* code-Element: Padding + Hintergrund + Farbe zuruecksetzen - Tabler hinterlegt <code>
   sonst grau und mit Akzent-Farbe, was bei ISIN/WKN/Kontonummern in Tabellen wie
   ein Badge wirkt. Ziel: nur Monospace-Schrift, kein visuelles Gewicht. */
code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* Copy-Button (ISIN, WKN, etc.): Icon verkleinert + Hover — kein Tabler-Utility fuer 0.85em Icon-Size mit Cursor */
.copy-btn { font-size: 0.85em; cursor: pointer; color: var(--tblr-secondary); }
.copy-btn:hover { color: var(--tblr-primary); }
.isin-copy { white-space: nowrap; }

/* Icon-only Badges (Quellen-Spalte): gleiche Padding alle Seiten —
   Tabler badge padding (0.25em 0.5em) ist fuer Text optimiert, Icon-only braucht quadratisch */
.badge-icononly {
  padding: 0.35em;
  line-height: 1;
}

/* Kompakte Icon-Badges in Datagrid-Titeln — rem statt em, damit Badge-Groesse
   nicht von der kleinen Parent-Font-Size (0.75rem) kaskadiert wird */
.datagrid-title .badge-icononly {
  padding: 0.2rem;
  vertical-align: 1px;
  font-size: 0.75rem;
}

/* Cross-Menu-Icons verkleinert nach Linktext — kein Tabler-Utility fuer Icon-Skalierung unter 1rem */
.ti-xs { font-size: 0.9em; }

/* Sidebar-Dropdowns: aktive/hover-Hintergruende bis zum Menuerand ziehen —
   Tabler v1.4 setzt horizontal Padding auf .dropdown-menu und border-radius auf
   .dropdown-item, was den Hintergrund "eingezogen" wirken laesst. Diese Regel
   ueberschreibt das fuer alle Dropdowns innerhalb der vertikalen Sidebar. */
.navbar-vertical .dropdown-menu {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;  /* verhindert dass Item-Hintergrund in den Menue-Border-Radius ragt */
}

.navbar-vertical .dropdown-menu .dropdown-item {
  border-radius: 0;
}

/* Sidebar-Submenue-Einrueckung: 1.55rem statt Tablers 1.75rem, damit die
   Submenue-Icons buendiger unter den Hauptpunkt-Icons sitzen. Tabler setzt das
   padding-left je expand-Breakpoint mit (0,5,0)-Spezifitaet; wir spiegeln den
   genutzten expand-lg-Selektor inkl. @media-Wrapper, damit der Override bei
   gleicher Spezifitaet via spaeterer Quell-Reihenfolge (main.css nach Tabler)
   greift. Kein Tabler-Utility moeglich - der Wert steckt im Vendor-CSS. */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
    padding-left: calc(calc(calc(var(--tblr-page-padding) * 2) / 2) + 1.55rem);
  }
}

/* Item-Stretching: Chrome behandelt <button> mit display:flex als intrinsic-sized,
   wodurch width:100% aus CSS nicht greift (siehe Tabler .dropdown-item Regel).
   Loesung: alle Wrapper-Ebenen zwischen .dropdown-menu und den Items als
   Flex-Column setzen — Flex-Items werden per Default via align-items:stretch
   auf 100% der Cross-Axis gestretcht, unabhaengig vom Button-Sizing.
   Betrifft die verbleibenden Sidebar-Dropdowns mit .dropdown-menu-Klasse
   (Datenquellen, Auswertung). Depot-Scope, Mandant- und Impersonation-Switcher
   nutzen eigenes .dsm-*-Styling und sind hiervon nicht betroffen.
   WICHTIG: Nur auf .show-Zustand fuer den Menu-Container selbst anwenden, sonst
   wuerde Tablers display:none (geschlossener Zustand) ueberschrieben und das
   Menu waere permanent offen. Innere Wrapper duerfen immer flex sein — sie
   erben die Sichtbarkeit vom Container. */
.navbar-vertical .dropdown-menu.show,
.navbar-vertical .dropdown-menu > div,
.navbar-vertical .dropdown-menu form,
.navbar-vertical .dropdown-menu form > div,
.navbar-vertical .dropdown-menu > div > form {
  display: flex;
  flex-direction: column;
}

/* Extrahierter PDF-Rohtext: pre-wrap — kein Tabler-Utility fuer vorformatierten Text */
.raw-text-pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
}

/* Impersonation-Banner: Sticky am oberen Rand — kein Tabler-Utility fuer sticky + z-index Kombination */
.alert-impersonation {
  position: sticky;
  top: 0;
  z-index: 1050;
  border-radius: 0;
}

/* Wartungshinweis: gleiche Sticky-Mechanik wie .alert-impersonation, aber ein
   z-index darunter — laufen beide, gehoert die Impersonations-Warnung nach
   oben (sie betrifft die Identitaet des Handelnden, nicht nur den Betrieb).
   Kein Tabler-Utility fuer sticky + z-index Kombination */
.alert-wartung {
  position: sticky;
  top: 0;
  z-index: 1049;
  border-radius: 0;
}

/* Inline-Zuordnung Abstimmung: Ausgewaehlte Zeilen hervorheben — kein Tabler-Utility fuer selektierte Radio-Zeilen */
tr.abstimmung-kb-selected > td,
tr.abstimmung-tx-selected > td {
  background-color: var(--tblr-bg-surface-secondary);
}

/* Drop-Zone: Dashed border + Drag-over Highlight — kein Tabler-Utility fuer dashed borders / drag-states */
.drop-zone {
  border: 2px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background-color: var(--tblr-bg-surface-secondary);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.drop-zone:hover:not(.drop-zone-disabled) {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.03);
}
.drop-zone.drag-over {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.08);
}
.drop-zone.drop-zone-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.drop-zone-icon {
  font-size: 4rem;
  color: var(--tblr-primary);
}

/* Feedback-Dropzone: eigene Klasse (kollisionsfrei zur geteilten .drop-zone, die nur
   auf Import-Seiten geladen wird) — dashed border + drag-state, kein Tabler-Utility dafuer */
.feedback-dropzone {
  border: 2px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background-color: var(--tblr-bg-surface-secondary);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.feedback-dropzone:hover,
.feedback-dropzone.drag-over {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
}
.feedback-dropzone-icon {
  font-size: 2rem;
  color: var(--tblr-primary);
}
/* Entfernen-Icon im Anhang-Chip: nicht als Link einfaerben/unterstreichen —
   es sitzt im badge und soll wie ein Icon-Button wirken, nicht wie ein Link */
.feedback-chip-remove,
.feedback-chip-remove:hover {
  color: inherit;
  text-decoration: none;
}

/* Loading-Bar: NProgress-Style Fortschrittsbalken am oberen Viewport-Rand —
   Tabler hat keine indeterminate Fixed-Position Progress-Bar */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--tblr-primary);
  z-index: 9999;
  pointer-events: none;
  transition: none;
}
.loading-bar-active {
  animation: loading-bar-progress 12s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes loading-bar-progress {
  0%   { width: 0; }
  10%  { width: 25%; }
  30%  { width: 55%; }
  50%  { width: 72%; }
  70%  { width: 84%; }
  100% { width: 97%; }
}

/* Verlauf-Timeline: Tabler .steps hat padding-left + border-left fuer Wizard-Stepper,
   im Verlauf-Kontext nicht gewuenscht */
.steps-timeline {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
  margin-bottom: 0;
}

/* Floating Bulk-Toolbar: fixed am unteren Viewport-Rand, zentriert —
   kein Tabler-Utility fuer centered fixed-bottom Action-Bar */
.bulk-toolbar-floating {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1030;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: opacity 0.2s, transform 0.2s;
}
.bulk-toolbar-floating.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
}

/* Toast-Container: ueber Modal-Footer in modal-fullscreen-Kontext.
   Tabler/Bootstrap setzen --bs-toast-zindex (1090) nur auf .toast selbst,
   nicht auf den leeren .toast-container - was bei modal-fullscreen +
   modal-blur zu Stacking-Konflikten fuehrt (Toast verschwindet hinter dem
   Footer-Button). 1100 liegt sicher ueber Modal (1055) und Backdrop (1050). */
.toast-container.position-fixed {
  z-index: 1100;
}

/* Toast-Level-Hintergruende: opaque Variante der Tabler bg-{color}-lt.
   Tabler's bg-{X}-lt nutzt rgba(..., 0.1) - im Toast-Kontext scheinen damit
   darunterliegende Modal-Footer-Buttons durch (Lesbarkeit broken). Wir mixen
   12% Tabler-Farbe mit der Surface-Farbe zu einem opaquen Pendant, das
   visuell dem Original entspricht aber nichts durchscheinen laesst. */
.toast.bg-green-lt {
  background-color: color-mix(in srgb, var(--tblr-green) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-red-lt {
  background-color: color-mix(in srgb, var(--tblr-red) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-yellow-lt {
  background-color: color-mix(in srgb, var(--tblr-yellow) 12%, var(--tblr-bg-surface)) !important;
}
.toast.bg-blue-lt {
  background-color: color-mix(in srgb, var(--tblr-blue) 12%, var(--tblr-bg-surface)) !important;
}

/* Fehler-Karte in Listen: gestrichelte Border im Default-Zustand (Filter nicht aktiv).
   Differenziert "Fehler existieren in Daten" (dashed) von "Filter ist aktiv" (solid).
   Kein Tabler-Utility fuer border-style: dashed mit Tabler-Farbvariable vorhanden. */
.card.border-dashed-danger {
  border: 1px dashed var(--tblr-danger);
}
.card.border-dashed-warning {
  border: 1px dashed var(--tblr-warning);
}

/* Progress-Bar extra hoch fuer prominente Fortschrittsanzeigen (z.B. Multi-Import-Detail).
   Tabler bietet nur progress-sm (0.25rem) und progress-lg (1rem) - ca. 3x Default (0.5rem) fehlt. */
.progress-xl {
  --tblr-progress-height: 1.5rem;
}

/* Bookmark-Popover: feste Breite, damit Dialog mit und ohne Loeschen-Button
   identisch wirkt (Tabler-Default: auto-shrink schrumpft ohne Loeschen-Button
   sichtbar zusammen). min+max = effektiv fixe Breite. */
.popover.bookmark-popover {
  min-width: 340px;
  max-width: 340px;
}
.popover.bookmark-popover .popover-body {
  padding: 0.75rem 1rem 1rem;
}

/* PDF-Viewer-Modal: Hoehe auf dem Block-Container .modal-body, iframe fuellt via h-100.
   Grund: iframe ist inline-Element - height auf dem iframe selbst wirkt bei
   about:blank-Content erst nach Erst-Render (Modal wuerde klein aufploppen). */
#pdf-viewer-modal .modal-body {
  height: calc(100vh - 180px);
  min-height: 480px;
}

/* Batch-Inhalt-Modal (Multi-Import-Pruefung): einheitliche Hoehe ueber alle
   Datenarten hinweg, damit unterschiedlich grosse Inhalte (1 Zeile vs. 50)
   nicht zu unterschiedlich hohen Modals fuehren. Flex-Column auf .modal-body
   sorgt dafuer, dass kuerzere Inhalte den verbleibenden Platz weiss lassen
   statt das Modal auf Inhalts-Hoehe zusammenzuziehen.
   Werte ~25 % kompakter als #pdf-viewer-modal (`calc(75vh - 135px)` =
   0,75 * `calc(100vh - 180px)`), weil die Tabellen-Modals sonst auf
   grossen Monitoren ueberdimensioniert wirken. */
.modal-batch-content .modal-body {
  height: calc(75vh - 135px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.modal-batch-content .modal-body > .batch-quelldatei,
.modal-batch-content .modal-body > .batch-section {
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sidebar-Popover (Depot-, Mandant- und Impersonation-Switcher)
   --------------------------------------------------------------------------
   Rich-Row-Dropdown mit Icon-Kachel, Chip-Meta und optionalem Positions-/
   Typ-/Rollen-Hinweis. Strikt unter #depot-scope-menu, #mandant-switcher-menu
   und #impersonation-menu gescoped - die .dsm-* Klassen sind nicht zur
   Wiederverwendung ausserhalb gedacht. Kein Tabler-Utility fuer dieses
   Pattern (Broker-/Tenant-/Rollen-Farbsystem, mehrzeilige Rich-Rows, linker
   Aktiv-Indikator).
   Positionierung per position:fixed, Toggle per .show (JS in sidebar_nav.html).
   ────────────────────────────────────────────────────────────────────────── */
#depot-scope-menu,
#mandant-switcher-menu,
#impersonation-menu {
  position: fixed;
  display: none;
  width: 360px;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 1050;
  font-size: 0.8125rem;
}
#depot-scope-menu.show,
#mandant-switcher-menu.show,
#impersonation-menu.show { display: block; }

#depot-scope-menu .dsm-head,
#mandant-switcher-menu .dsm-head,
#impersonation-menu .dsm-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--tblr-border-color);
}
#depot-scope-menu .dsm-head .dsm-label,
#mandant-switcher-menu .dsm-head .dsm-label,
#impersonation-menu .dsm-head .dsm-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 700;
}

/* Dezentes Suchfeld im Popover-Header (z.B. Mandant-Switcher). Volle Breite,
   reduzierter Kontrast - soll Rich-Rows nicht dominieren. */
#depot-scope-menu .dsm-search,
#mandant-switcher-menu .dsm-search,
#impersonation-menu .dsm-search {
  margin-top: 8px;
  width: 100%;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8125rem;
  color: var(--tblr-body-color);
  line-height: 1.2;
}
#depot-scope-menu .dsm-search:focus,
#mandant-switcher-menu .dsm-search:focus,
#impersonation-menu .dsm-search:focus {
  outline: none;
  border-color: var(--tblr-primary);
  background: var(--tblr-bg-surface);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.12);
}
#depot-scope-menu .dsm-search::placeholder,
#mandant-switcher-menu .dsm-search::placeholder,
#impersonation-menu .dsm-search::placeholder {
  color: var(--tblr-secondary);
  opacity: 0.75;
}

#depot-scope-menu form,
#mandant-switcher-menu form,
#impersonation-menu form { margin: 0; }

/* Die Regeln fuer die Aggregat-Kachel (.dsm-all-tile / .dsm-all-inner /
   .dsm-icon-all) sind mit dem Zustand "Alle Depots aggregieren" entfallen.
   Der Depot-Waehler traegt seither immer genau ein Depot; Mandanten-Switcher
   und Impersonation-Menue haben die Klassen nie verwendet. */

#depot-scope-menu .dsm-grp,
#mandant-switcher-menu .dsm-grp,
#impersonation-menu .dsm-grp {
  padding: 14px 16px 6px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#depot-scope-menu .dsm-grp .dsm-grp-count,
#mandant-switcher-menu .dsm-grp .dsm-grp-count,
#impersonation-menu .dsm-grp .dsm-grp-count {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.625rem;
}

#depot-scope-menu .dsm-list,
#mandant-switcher-menu .dsm-list,
#impersonation-menu .dsm-list {
  padding: 0 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#depot-scope-menu .dsm-item,
#mandant-switcher-menu .dsm-item,
#impersonation-menu .dsm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}
#depot-scope-menu .dsm-item:hover,
#mandant-switcher-menu .dsm-item:hover,
#impersonation-menu .dsm-item:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
}
#mandant-switcher-menu .dsm-item.is-active,
#impersonation-menu .dsm-item.is-active {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
#mandant-switcher-menu .dsm-item.is-active::before,
#impersonation-menu .dsm-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--tblr-primary);
  border-radius: 0 2px 2px 0;
}
/* Depot-Picker: Wrapper-Row um den Auswahl-Button.
   Active-Marker sitzt auf .dsm-item-row, damit er die volle Row-Breite abdeckt. */
#depot-scope-menu .dsm-item-row {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  position: relative;
  border-radius: 8px;
}
#depot-scope-menu .dsm-item-row > form {
  flex: 1 1 auto;
  margin: 0;
}
#depot-scope-menu .dsm-item-row > form .dsm-item {
  width: 100%;
}
#depot-scope-menu .dsm-item-row.is-active {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
#depot-scope-menu .dsm-item-row.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--tblr-primary);
  border-radius: 0 2px 2px 0;
}
#depot-scope-menu .dsm-item .dsm-icon,
#mandant-switcher-menu .dsm-item .dsm-icon,
#impersonation-menu .dsm-item .dsm-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex: 0 0 30px;
}
#depot-scope-menu .dsm-item .dsm-body,
#mandant-switcher-menu .dsm-item .dsm-body,
#impersonation-menu .dsm-item .dsm-body { min-width: 0; flex: 1; }
#depot-scope-menu .dsm-item .dsm-nameline,
#mandant-switcher-menu .dsm-item .dsm-nameline,
#impersonation-menu .dsm-item .dsm-nameline {
  display: flex;
  align-items: center;
  gap: 6px;
}
#depot-scope-menu .dsm-item .dsm-name,
#mandant-switcher-menu .dsm-item .dsm-name,
#impersonation-menu .dsm-item .dsm-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#depot-scope-menu .dsm-item .dsm-check,
#mandant-switcher-menu .dsm-item .dsm-check,
#impersonation-menu .dsm-item .dsm-check {
  background: rgba(var(--tblr-primary-rgb), 0.12);
  color: var(--tblr-primary);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex: 0 0 16px;
}
#depot-scope-menu .dsm-item .dsm-meta-row,
#mandant-switcher-menu .dsm-item .dsm-meta-row,
#impersonation-menu .dsm-item .dsm-meta-row {
  margin-top: 5px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.6875rem;
}
/* Chip-Hintergrund bewusst auf der weissen Surface-Farbe (mit Border) statt auf
   --tblr-bg-surface-secondary (#f1f5f9): letzteres verschluckt sich beim
   Item-Hover (#f8fafc) praktisch komplett. Border hebt den Chip in beiden
   Zustaenden (normal und Hover) sichtbar ab. */
#depot-scope-menu .dsm-item .dsm-broker-chip,
#mandant-switcher-menu .dsm-item .dsm-broker-chip,
#impersonation-menu .dsm-item .dsm-broker-chip {
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  border: 1px solid var(--tblr-border-color);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}
#depot-scope-menu .dsm-item .dsm-num,
#mandant-switcher-menu .dsm-item .dsm-num,
#impersonation-menu .dsm-item .dsm-num {
  color: var(--tblr-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6875rem;
}
#mandant-switcher-menu .dsm-item .dsm-meta-row-2,
#impersonation-menu .dsm-item .dsm-meta-row-2 {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
}
#mandant-switcher-menu .dsm-item .dsm-meta-row-2 .ti,
#impersonation-menu .dsm-item .dsm-meta-row-2 .ti { font-size: 0.75rem; }

/* Broker-Chip-Farben: markenspezifische Paletten, bewusst Hex (keine Tabler-Entsprechung). */
#depot-scope-menu .dsm-icon.broker-spk { background: #dbeafe; color: #1d4ed8; }
#depot-scope-menu .dsm-icon.broker-vbk { background: #fef3c7; color: #92400e; }
#depot-scope-menu .dsm-icon.broker-bdr { background: #fee2e2; color: #b91c1c; }
#depot-scope-menu .dsm-icon.broker-con { background: #dcfce7; color: #166534; }
#depot-scope-menu .dsm-icon.broker-bnp { background: #ede9fe; color: #5b21b6; }
#depot-scope-menu .dsm-icon.broker-ing { background: #ffedd5; color: #c2410c; }
#depot-scope-menu .dsm-icon:not([class*="broker-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

/* Tenant-Typ-Farben (nur Mandant-Switcher): Koerperschaft (blau) vs. Privatperson
   (lila). Bewusst eigene Paletten - semantische Markierung des Rechtsform-Typs
   analog zu den Broker-Chips. */
#mandant-switcher-menu .dsm-icon.tenant-kor { background: #dbeafe; color: #1d4ed8; }
#mandant-switcher-menu .dsm-icon.tenant-prv { background: #ede9fe; color: #5b21b6; }
#mandant-switcher-menu .dsm-icon:not([class*="tenant-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

/* Rollen-Farben (nur Impersonation-Switcher): visuelle Unterscheidung der Rollen
   beim User-Wechsel. Palette wiederverwendet aus Broker-/Tenant-Swatches:
   Admin lila, Steuerberater blau, Verwalter gruen, Firma orange. Betrachter
   faellt auf den neutralen Fallback. */
#impersonation-menu .dsm-icon.role-adm { background: #ede9fe; color: #5b21b6; }
#impersonation-menu .dsm-icon.role-stb { background: #dbeafe; color: #1d4ed8; }
#impersonation-menu .dsm-icon.role-vwt { background: #dcfce7; color: #166534; }
#impersonation-menu .dsm-icon.role-frm { background: #ffedd5; color: #c2410c; }
#impersonation-menu .dsm-icon:not([class*="role-"]) {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary);
}

#depot-scope-menu .dsm-empty,
#mandant-switcher-menu .dsm-empty,
#impersonation-menu .dsm-empty {
  padding: 14px 16px;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  text-align: center;
}

#depot-scope-menu .dsm-foot,
#mandant-switcher-menu .dsm-foot,
#impersonation-menu .dsm-foot {
  border-top: 1px solid var(--tblr-border-color);
  padding: 6px;
  background: var(--tblr-bg-surface-secondary, #fbfcfd);
}
#depot-scope-menu .dsm-foot .dsm-link,
#mandant-switcher-menu .dsm-foot .dsm-link,
#impersonation-menu .dsm-foot .dsm-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
#depot-scope-menu .dsm-foot .dsm-link:hover,
#mandant-switcher-menu .dsm-foot .dsm-link:hover,
#impersonation-menu .dsm-foot .dsm-link:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-body-color);
}
#depot-scope-menu .dsm-foot .dsm-link i,
#mandant-switcher-menu .dsm-foot .dsm-link i,
#impersonation-menu .dsm-foot .dsm-link i { color: var(--tblr-muted, #94a3b8); }

/* ──────────────────────────────────────────────────────────────────────────
   Theme-Switcher-Flyout (Sidebar-Eintrag "Darstellung")
   --------------------------------------------------------------------------
   Schlankes laterales Flyout mit 4 Modi (Hell/Dunkel/Seitenleiste/System).
   BEWUSST NICHT das .dsm-*-Pattern: das ist fuer 360px-Rich-Rows (Avatare,
   Chips, Suchfeld) gebaut - hier genuegen 4 simple Option-Buttons. Auch kein
   Bootstrap-Dropdown, da dieses nicht lateral aus der Sidebar oeffnet.
   Positionierung per position:fixed, Toggle per .show (JS in theme-switcher.js).
   ────────────────────────────────────────────────────────────────────────── */
#theme-switcher-menu {
  position: fixed;
  display: none;
  width: 200px;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 1050;
  font-size: 0.8125rem;
}
#theme-switcher-menu.show { display: block; }

#theme-switcher-menu .tsm-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--tblr-border-color);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 700;
}
#theme-switcher-menu .tsm-options {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#theme-switcher-menu .tsm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--tblr-body-color);
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#theme-switcher-menu .tsm-option i { color: var(--tblr-muted, #94a3b8); }
#theme-switcher-menu .tsm-option:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
}
#theme-switcher-menu .tsm-option.active {
  color: var(--tblr-primary);
  font-weight: 600;
}
#theme-switcher-menu .tsm-option.active i { color: var(--tblr-primary); }

/* Pruef-Modal Split-Layout (auf modal-fullscreen): Tabelle + iFrame fuellen den    */
/* gesamten Viewport zwischen Header und Footer. Scroll nur in der linken Tabelle,   */
/* PDF-Viewer im iFrame scrollt rechts unabhaengig.                                  */
/* Tabler/Bootstrap haben kein eingebautes Split-Modal-Pattern — eigene Klassen.     */

/* Hoehere Spezifitaet (0,1,1) als Bootstrap's .modal-body (0,1,0), sonst gewinnt    */
/* die Bootstrap-Regel overflow-y: auto im Modal-Fullscreen-Variant.                  */
.modal-content > .pruefmodal-body {
  overflow: hidden;
}
.pruefmodal-split {
  height: calc(100vh - 120px);
}
/* Beide Spalten brauchen eine eigene max-height, weil Bootstrap's .row mit          */
/* flex-wrap: wrap die Kinder NICHT auf die Container-Hoehe stretcht (Default-Flex   */
/* align-items: stretch wirkt nicht wie erwartet). Ohne max-height waechst die Liste */
/* auf Content-Hoehe (>15.000px bei 283 Eintraegen) und schiebt alles weg.            */
.pruefmodal-liste,
.pruefmodal-pdf,
.pruefmodal-csv {
  max-height: calc(100vh - 120px);
}
.pruefmodal-liste {
  overflow-y: auto;
}
/* Header-Reihen links (Tabellen-thead) und rechts (PDF-Meta) auf gleicher Hoehe.   */
/* Verhindert sichtbaren Versatz durch das Icon im rechten Header (py-2 + Glyph).    */
/* Hintergruende ueber Tabler-CSS-Variablen (theme-aware) statt bg-light/bg-white,   */
/* damit sie sich an Light/Dark Mode anpassen.                                       */
.pruefmodal-liste thead th {
  height: 2.75rem;
}
/* Beide Header auf derselben Variable, damit Light- UND Dark-Mode bruchfrei         */
/* zwischen linker Tabelle und rechtem PDF-Container ueberblenden. surface ist hier  */
/* die Card-Fuellfarbe (Light: #fff, Dark: dunkel-blaugrau).                          */
.pruefmodal-thead th,
.pruefmodal-pdf-header {
  background: var(--tblr-bg-surface);
}
/* Feste Breite der Filter-/Kategorie-Spalte im Pruef-Modal - haelt Titel-     */
/* und Filter-Zeile im selben Spaltenraster. Tabler hat keine passende         */
/* Width-Utility fuer diesen Wert; deshalb eine benannte Klasse.               */
.pruefmodal-filter-spalte {
  width: 200px;
}
.pruefmodal-pdf-header {
  height: 2.75rem;
}
.pruefmodal-pdf {
  background: var(--tblr-bg-surface-secondary);
}
/* Lade-Overlay fuer PDF-iframes (Pruef-Maske + globales Viewer-Modal). Deckt das  */
/* leere iframe waehrend des S3-Proxy-Downloads ab. d-none (Bootstrap, !important) */
/* blendet aus; ohne d-none greift display:flex aus dieser Regel.                  */
.pdf-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tblr-bg-surface-secondary);
  z-index: 5;
}
/* Interim-Overlay beim Start einer asynchronen Freigabe (QW1): ueberbrueckt die   */
/* Roundtrip-Luecke zwischen Klick und Fortschritts-Modal. Sichtbarkeit per         */
/* Display-Toggle ueber die von hx-indicator gesetzte htmx-request-Klasse (kein JS).*/
/* z-index ueber dem PDF-Overlay (5), damit es auch die rechte Spalte abdeckt.       */
/* Optik wie ein Modal: abgedunkelter Backdrop + zentrierte Karte (.freigabe-start- */
/* card), damit der Hinweis klar hervortritt statt im hellen Content unterzugehen.  */
.freigabe-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  /* Raw rgba: fuer einen absolut positionierten Overlay-Backdrop existiert keine   */
  /* Tabler-Utility-Klasse (vorher rgba(255,255,255,.72) -> praktisch unsichtbar).  */
  background: rgba(0, 0, 0, .4);
}
.freigabe-start-overlay.htmx-request { display: flex; }
/* Zentrierte Karte im Overlay - spiegelt die Optik des Fortschritts-Modals         */
/* (_freigabe_progress_modal.html), damit der Uebergang konsistent wirkt.           */
.freigabe-start-card {
  min-width: 20rem;
  max-width: 90%;
  margin: 0;
}
.modal-pruefen-row.cursor-pointer { cursor: pointer; }
.modal-pruefen-row.cursor-pointer:hover { background: var(--tblr-bg-surface-secondary, #f1f5f9); }

/* CSV-Pane (rechter Pane fuer Verrechnungskonto-Imports): Flex-Container, damit    */
/* die innere .table-responsive auf min-height: 0 schrumpfen und dann mit            */
/* overflow-y: auto scrollen kann. Ohne diese Begrenzung waechst die Tabelle auf     */
/* volle Content-Hoehe (>11.000px bei ~150 CSV-Zeilen), und scrollIntoView verschiebt */
/* das Modal-Body (overflow:hidden) — die linke KB-Tabelle rutscht dann aus dem      */
/* Viewport. Tabler/Bootstrap haben kein Utility-Set fuer dieses                     */
/* Flex-min-height-0-Scroll-Pattern (analog Kommentar Z. 1056-1059).                  */
.pruefmodal-csv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pruefmodal-csv .table-responsive {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Excel-Look fuer die CSV-Rohdaten-Tabelle (rechter Pane).                          */
/* Spaltentrenner als zarte Vertikalen, kompaktere Schrift, Header buendig zur       */
/* PDF-Header-Linie links (beide 2.75rem). Tabler hat kein Utility fuer vertikale    */
/* Trennlinien — daher Inline-CSS auf der Adapter-spezifischen Klasse.               */
.pruefmodal-csv-table {
  font-size: 0.8125rem;
  line-height: 1.35;
}
.pruefmodal-csv-table > thead > tr > th,
.pruefmodal-csv-table > tbody > tr.csv-row > td {
  border-right: 1px solid var(--tblr-border-color);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.pruefmodal-csv-table > thead > tr > th:last-child,
.pruefmodal-csv-table > tbody > tr.csv-row > td:last-child {
  border-right: 0;
}
.pruefmodal-csv-table > thead > tr > th {
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  vertical-align: middle;
}
.pruefmodal-csv-table .pruefmodal-csv-toggle-col {
  width: 2.5rem;
  min-width: 2.5rem;
}
.pruefmodal-csv-table .pruefmodal-csv-toggle-cell {
  text-align: center;
  padding: 0.15rem 0.25rem;
}
.pruefmodal-csv-transpose-btn[aria-expanded="true"] {
  color: var(--tblr-primary);
  background: var(--tblr-bg-surface-secondary);
}
.pruefmodal-csv-transpose > td {
  background: var(--tblr-bg-surface-secondary);
  border-bottom: 1px solid var(--tblr-border-color);
}
.pruefmodal-csv-transpose-body {
  padding: 0.75rem 1rem;
}
.pruefmodal-csv-transpose-table {
  font-size: 0.8125rem;
}
.pruefmodal-csv-transpose-table > tbody > tr > td {
  padding: 0.2rem 0.5rem;
  vertical-align: top;
}
.pruefmodal-csv-transpose-table .pruefmodal-csv-transpose-key {
  width: 14rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

/* Drilldown im Job-Status-Partial: native <details> mit Chevron-Rotation.    */
/* Browser-Default-Marker raus, eigener Chevron via .pruefmodal-drilldown-chevron. */
.pruefmodal-drilldown > summary {
  cursor: pointer;
  list-style: none;
}
.pruefmodal-drilldown > summary::-webkit-details-marker { display: none; }
.pruefmodal-drilldown[open] > summary .pruefmodal-drilldown-chevron {
  transform: rotate(90deg);
}
.pruefmodal-drilldown-chevron { transition: transform 0.15s ease; }
/* Filter-Switch "Nur nicht freigegebene" erst im aufgeklappten Drilldown zeigen. */
.pruefmodal-drilldown:not([open]) > summary .pruefmodal-drilldown-filter {
  display: none;
}

@media (max-width: 991.98px) {
  /* Unter lg stapeln die Bootstrap-Cols vertikal (col-lg-5/7 -> col-12).            */
  /* Die Split-Hoehe wird dann ueber die zwei Sub-Container verteilt.                 */
  .pruefmodal-split { height: auto; min-height: calc(100vh - 120px); }
  .pruefmodal-liste { max-height: 50vh; }
  .pruefmodal-pdf { height: 50vh; }
  .pruefmodal-csv { height: 50vh; max-height: 50vh; }
}

/* min-width:0 erlaubt einem Flex-Item, unter seine Inhaltsbreite zu schrumpfen */
/* - Voraussetzung dafuer, dass text-truncate in einem Flex-Container greift     */
/* statt einen Zeilenumbruch zu erzwingen. Bootstrap 5.1 / Tabler 1.4 haben      */
/* dafuer keine Utility-Klasse (gleiches Pattern wie .navbar-recents oben).      */
.min-w-0 { min-width: 0; }

/* Linksseitiges Truncation fuer lange Reporting-Dateinamen im Job-Drilldown.   */
/* Tabler/Bootstrap kennen nur .text-truncate (Ellipse rechts) - hier bleibt    */
/* das aussagekraeftige Ende (Datum, .pdf) sichtbar, der Pfad-Anfang wird links */
/* mit Ellipse abgeschnitten. direction:rtl klappt die Ellipse-Seite um,        */
/* text-align:left haelt kurze Namen linksbuendig.                              */
.text-truncate-start {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

/* Zurueck-Link (components/back_link.html): die Hover-Unterstreichung soll   */
/* nur den Text treffen, nicht das vorangestellte Pfeil-Icon. Die Linie wird  */
/* vom <a> gezeichnet und propagiert sonst auf alle Kinder. Bootstrap/Tabler  */
/* bieten keine Utility, die eine Hover-Unterstreichung auf ein einzelnes     */
/* Kind beschraenkt. .back-link:hover (0,2,0) schlaegt Tablers a:hover.       */
.back-link,
.back-link:hover { text-decoration: none; }
.back-link:hover .back-link-text { text-decoration: underline; }

/* Wertpapier-Zelle in kompakten Tabellen (Dashboard "Letzte Transaktionen", */
/* Transaktionsliste): begrenzt die Spaltenbreite, damit text-truncate auf   */
/* der Bezeichnung greift. Bootstrap-Utility text-truncate braucht festen    */
/* Container; Tabler liefert dafuer keine fertige Klasse, und Inline-Styles  */
/* sind nach Tabler-First-Regel verboten.                                    */
.cell-wp { max-width: 320px; height: 3.5em; }
.cell-wp .truncate-row { display: flex; align-items: center; min-width: 0; }
.cell-wp .truncate-row > a.text-truncate { flex: 1 1 auto; min-width: 0; }
/* Transaktionsliste ohne Depot-Spalte: Wertpapier-Zelle enger fassen, damit  */
/* die Tabelle ohne Horizontal-Scroll in die Card passt und die rechte        */
/* Aktions-Icon-Spalte sichtbar bleibt. Tabler bietet keine passende Utility. */
.tx-kompakt .cell-wp { max-width: 240px; }
/* Bestandsuebernahme-Vorschau: breite 9-Spalten-Tabelle (Buchwert/Kurs/       */
/* Steuerwert/Status). Wertpapier-Zelle enger fassen, damit die rechte         */
/* Sidebar-Icon-Spalte ohne Horizontal-Scroll sichtbar bleibt (analog tx).     */
.bestand-kompakt .cell-wp { max-width: 250px; }

/* GuV-Drill-Down: klickbare Zell-Werte. Hand-Cursor + Hover-Unterstreichung. */
/* .is-active markiert den aktuell aufgeklappten Trigger (bleibt unterstrichen,*/
/* damit man sieht, wo der offene Drill-Down haengt). Kein Farbwechsel - die  */
/* Tabelle soll als Lese-Tabelle ruhig bleiben (User-Vorgabe).                */
.guv-drilldown-trigger { cursor: pointer; }
.guv-drilldown-trigger:hover,
.guv-drilldown-trigger.is-active { text-decoration: underline; }

/* Icon-Button-Variante (Realisierte Positionen): kein Underline am Icon - das */
/* btn-ghost-secondary-Hover liefert das Feedback bereits. KEIN Farbwechsel    */
/* (Blau = Link-Konvention, wuerde das Icon faelschlich wie einen Link wirken  */
/* lassen). Der offene Drill-Down wird stattdessen durch das Umschalten        */
/* Plus -> Minus angezeigt (siehe unten). Die Text-Trigger (klickbare Betraege */
/* in GuV/Kapitalfluss) behalten ihr Underline - .btn greift nur am <button>.  */
.guv-drilldown-trigger.btn:hover,
.guv-drilldown-trigger.btn.is-active { text-decoration: none; }

/* Plus/Minus-Umschaltung des Drill-down-Icons: geschlossen zeigt der Button   */
/* ti-square-plus, offen (.is-active) ti-square-minus. Das jeweils inaktive    */
/* Icon wird per display:none ausgeblendet (nimmt keinen Platz, btn-icon       */
/* zentriert das sichtbare Icon weiterhin korrekt).                            */
.guv-drilldown-trigger.btn .drilldown-icon-open { display: none; }
.guv-drilldown-trigger.btn.is-active .drilldown-icon-closed { display: none; }
.guv-drilldown-trigger.btn.is-active .drilldown-icon-open { display: inline-flex; }

/* Drill-Down-Zeile soll den Hover-Effekt der Eltern-Tabelle (table-hover)   */
/* NICHT erben - sonst wird beim Mouseover die ganze Sub-Tabelle grau        */
/* eingefaerbt. Bootstrap setzt --bs-table-bg-state per :hover, wir resetten */
/* die Custom-Property auf der Drill-Down-Zeile.                             */
.guv-drilldown-row > * { --bs-table-bg-state: transparent; }

/* Dashboard-/Performance-KPI-Werte: Source Serif 4 fuer prominente           */
/* Kennzahlen - dieselbe Werkserife wie die oeffentlichen Seiten. Tabler      */
/* hat kein Serif-Display-Utility, daher diese eigene Klasse mit fester        */
/* Display-Groesse (ueberschreibt die .h1-Groesse fuer mehr Praesenz). Werte  */
/* vom User im Browser abgestimmt. Source Serif 4 bringt einen echten          */
/* 600er-Schnitt mit, es entsteht also kein synthetisches Bolding mehr.       */
.kpi-serif {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.8rem;
  line-height: 2.1rem;
}

/* Feste Hoehe fuer ECharts-Container (ECharts braucht eine explizite */
/* Pixel-Hoehe am Init-Element; Tabler hat dafuer keine Utility-Klasse). */
.chart-h-300 {
  height: 300px;
}

/* Tabler Icons v3.44: Filled-Glyphen liegen seit dem Split (~v3.40) in einer */
/* separaten Font; die Klassennamen `ti-<name>-filled` existieren nicht mehr.  */
/* Die projektweit genutzten Filled-Icons hier ueber die Filled-Font           */
/* abbilden, damit das bestehende `ti-<name>-filled`-Markup unveraendert       */
/* bleibt. Kein Tabler-Aequivalent, daher lokaler @font-face noetig.           */
/* WICHTIG: Ein neues Filled-Icon braucht BEIDE Eintraege unten - Selektor und */
/* content. Fehlt einer, rendert die Stelle stumm nichts.                      */
@font-face {
  font-family: "tabler-icons-filled";
  font-style: normal;
  font-weight: 400;
  src: url("../vendor/tabler-icons/fonts/tabler-icons-filled.991f3ea39a78.woff2") format("woff2"),
       url("../vendor/tabler-icons/fonts/tabler-icons-filled.3baafe055820.woff") format("woff"),
       url("../vendor/tabler-icons/fonts/tabler-icons-filled.9ff6080d7a27.ttf") format("truetype");
}
.ti-bookmark-filled,
.ti-clipboard-text-filled,
.ti-caret-down-filled,
.ti-caret-right-filled {
  font-family: "tabler-icons-filled" !important;
}
.ti-bookmark-filled::before { content: "\fa88"; }
.ti-clipboard-text-filled::before { content: "\100e9"; }
.ti-caret-down-filled::before { content: "\fb2a"; }
.ti-caret-right-filled::before { content: "\fb2c"; }

/* ============================================================================
   Produktmanagement (/verwaltung/produktmanagement/)
   Serverseitig gerendertes Markdown (Roadmap, Buchungsregeln). Der nh3-Sanitizer
   strippt class-Attribute, das HTML kommt daher als nacktes h2/table/ul an.
   Tabler bringt eine Basis-.markdown-Komponente mit (Zeilenhoehe, H2-Abstand,
   Tabellen-Grundvariablen wie --tblr-table-striped-bg) - dieser scoped Block
   ERGAENZT sie um Schriftgroessen, Code/Pre-Hintergrund, Link-Farbe und
   Zellen-Rahmen (legitimer Custom-CSS-Fall nach tabler-first.md), stylt gegen --tblr-*.
   ============================================================================ */
.markdown > :first-child { margin-top: 0; }
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  scroll-margin-top: 4.5rem; /* Anker-Sprung nicht hinter die sticky Top-Navbar (3.5rem) */
}
.markdown h1 { font-size: 1.5rem; }
.markdown h2 {
  margin-top: 2.5rem; /* groesserer Abschnittsabstand (Tabler-Vorgabe .markdown>h2) */
  font-size: 1.25rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--tblr-border-color);
}
.markdown h3 { font-size: 1.1rem; }
.markdown h4 { font-size: 1rem; }
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote { margin-bottom: 1rem; }
.markdown ul,
.markdown ol { padding-left: 1.5rem; }
.markdown li { margin-bottom: 0.25rem; }
.markdown a { color: var(--tblr-primary); }
.markdown code {
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.05));
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.875em;
}
.markdown pre {
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.05));
  border-radius: 6px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}
.markdown pre code { background: none; padding: 0; }
.markdown blockquote {
  border-left: 3px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.05));
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--tblr-secondary);
}
.markdown table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.markdown th,
.markdown td {
  border: 1px solid var(--tblr-border-color);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.markdown thead th {
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
  font-weight: 600;
}
.markdown tbody tr:nth-child(even) > td {
  background: var(--tblr-table-striped-bg); /* Zebra fuer dichte Tabellen, theme-aware */
}
/* Buchungsregeln: jede Tabelle sitzt in einer eigenen Card (.card >
   .table-responsive, im Renderer injiziert). Statt Vollgitter der
   Tabler-card-table-Look - Card liefert Aussenrand+Radius, nur horizontale
   Zeilentrenner innen. Scoped unter .markdown .card, damit die Roadmap-Tabellen
   (ohne Card) unberuehrt bleiben. */
.markdown .card {
  margin-bottom: 1.25rem;
}
.markdown .card table {
  margin-bottom: 0;
}
.markdown .card th,
.markdown .card td {
  border: 0; /* Vollgitter aufheben */
  border-bottom: 1px solid var(--tblr-border-color); /* nur Zeilentrenner */
}
.markdown .card thead th {
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
}
.markdown .card tr:last-child > td {
  border-bottom: 0; /* saubere untere Card-Kante */
}
.markdown hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--tblr-border-color);
}

/* Buchungsregeln-TOC: sticky unterhalb der Top-Navbar (3.5rem) - kein
   Tabler-Utility fuer die sticky+Offset-Kombination (vgl. .alert-impersonation). */
.pm-toc {
  position: sticky;
  top: calc(3.5rem + 1rem);
  max-height: calc(100vh - 3.5rem - 2rem);
  overflow-y: auto;
}
.pm-toc a { font-size: 0.875rem; }
.pm-toc a:hover { color: var(--tblr-primary); }

/* Beleg-Assistent Dry-Run: Vorher/Nachher-Textvorschau. white-space: pre-wrap
   hat kein Bootstrap-Utility (analog .ti-xs) - erhaelt Zeilenumbrueche des
   Layout-extrahierten Belegtexts, ohne HTML zu injizieren. */
.beleg-text-preview { white-space: pre-wrap; word-break: break-word; }

/* Seiten-Hilfe (Pattern: docs/design/styleguide.md). Natives <details> hat kein
   Tabler-Pendant - Browser-Marker raus, eigener Chevron + Label-Wechsel rein per
   [open]-Attributselektor (kein JS). Analog .pruefmodal-drilldown oben. */
.seiten-hilfe summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.seiten-hilfe summary::-webkit-details-marker { display: none; }
.seiten-hilfe-chevron { transition: transform 0.15s ease; }
.seiten-hilfe details[open] summary .seiten-hilfe-chevron { transform: rotate(180deg); }
/* Label-Wechsel "anzeigen" <-> "ausblenden" ohne JS. */
.seiten-hilfe-label-auf { display: none; }
.seiten-hilfe details[open] summary .seiten-hilfe-label-zu { display: none; }
.seiten-hilfe details[open] summary .seiten-hilfe-label-auf { display: inline; }

/* Aktions-Aufklapper im Status-Panel "Was fehlt noch bis zur Freigabe"
   (Pattern: docs/design/styleguide.md). Bewusst NICHT .seiten-hilfe:

   a) Die Selektoren dort sind Nachfahren-Selektoren. Der Beleg-Eintrag enthaelt
      selbst einen .seiten-hilfe-Aufklapper ("N Belege zu anderen Wertpapieren") -
      mit derselben Klassenfamilie aussen wuerde `.seiten-hilfe details[open]
      summary .seiten-hilfe-chevron` beim Oeffnen des AEUSSEREN auch den inneren
      Chevron drehen. Die Regeln hier nutzen deshalb durchgaengig den
      Kind-Kombinator > und lecken auch bei weiterer Verschachtelung nicht.
   b) .seiten-hilfe ist grau/klein und heisst "Hilfe" oder "erledigt" (z.B.
      "Gepruefte Bereiche"). Dieser Aufklapper heisst "hier ist etwas zu tun" und
      behaelt die normale Textfarbe - gleiche Optik bei gegenteiliger Bedeutung
      waere eine Verwechslungsfalle. */
.aktion-aufklapper > details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.aktion-aufklapper > details > summary::-webkit-details-marker { display: none; }
.aktion-aufklapper-chevron { transition: transform 0.15s ease; }
.aktion-aufklapper > details[open] > summary .aktion-aufklapper-chevron { transform: rotate(180deg); }
.aktion-aufklapper-label-auf { display: none; }
.aktion-aufklapper > details[open] > summary .aktion-aufklapper-label-zu { display: none; }
.aktion-aufklapper > details[open] > summary .aktion-aufklapper-label-auf { display: inline; }
/* Kein Aufklapper ohne Inhalt: hat_aktionsteil (status_panel.py) deckt die
   Rollen-Gates ab, aber die aktion-Kette in _status_panel_aktionen.html hat
   keinen Zweig fuer jede aktion (z.B. "warten") und rendert dann einen leeren
   Wrapper. Die Pruefung am realen DOM ist driftfrei - eine Nachbildung der Kette
   in Python liefe beim naechsten Button dort still auseinander. */
.aktion-aufklapper:not(:has(a, button, input)) { display: none; }

/* Ausklappbare Card (Header ist der Schalter, zusaetzlich zu .seiten-hilfe).
   Die .seiten-hilfe-Regel oben setzt summary auf inline-flex - ein card-header
   braucht Tablers Vollbreiten-Flex zurueck. Zugeklappt entfaellt die
   Header-Trennlinie, sonst liegt sie direkt auf dem unteren Card-Rand
   (sichtbare Doppellinie). Pattern: docs/design/styleguide.md. */
.card-ausklappbar summary.card-header { display: flex; }
.card-ausklappbar details:not([open]) summary.card-header { border-bottom-width: 0; }

/* Beleg-Assistent (Paket 5): Grounding-iframe (Google-Suchvorschlaege). Der
   von Google gelieferte Inhalt ist eine flache, horizontal scrollende
   Chip-Leiste (line-height 20px + Chip-Padding + Container-Padding ~= 48px),
   nicht ein hoher Block - die Hoehe ist knapp darauf getrimmt (56px Puffer),
   damit kein Leerraum entsteht. Volle Breite; kein Inline-Style (Tabler-First).
   Der Inhalt kommt verbatim via srcdoc in einer Sandbox ohne allow-scripts. */
.beleg-grounding-iframe {
  width: 100%;
  height: 56px;
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
}

/* Meldungen-Standard R3 (docs/design/meldungen-standard.md): Eintrags-Trenner
   im Sammel-Container - Hairline in der Alert-Tonfarbe (25 %). Kein
   Tabler-Utility fuer farbige Hairlines in currentColor vorhanden; currentColor
   erbt die Alert-Textfarbe, eine Regel deckt alle drei Schweregrade ab. */
.alert .meldung-eintrag + .meldung-eintrag {
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  margin-top: 0.625rem;
  padding-top: 0.625rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Beleg-Assistent Redesign (BA 1-5): KI-Kennfarbe Purple. Teil A aus dem
   Claude-Design-Mockup (beleg-assistent-mockup.css) - die vier neuen Regeln
   plus zwei Keyframes. progress-xl/avatar .ti/ti-xs/beleg-grounding-iframe
   sind bereits Bestand (oben), Teil B des Mockups nicht uebernommen.
   ════════════════════════════════════════════════════════════════════════ */

/* Beleg-Assistent: ruhiger Glanz-Lauf auf dem Fortschrittsbalken (Zustand
   "laeuft"). Tabler bietet nur progress-bar-striped - das hektische Streifen-
   band wirkt nach Datei-Upload, nicht nach KI-Arbeit. Der Shimmer laeuft als
   ::after-Overlay, die dynamische width des Balkens bleibt unberuehrt. */
.ba-progress-shimmer {
  position: relative;
  overflow: hidden;
}
.ba-progress-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: ba-shimmer 2.4s ease-in-out infinite;
}
@keyframes ba-shimmer {
  to { transform: translateX(100%); }
}

/* Beleg-Assistent: weiche Puls-Aura des Sparkles-Emblems im Warte-Zustand -
   kein Tabler-Utility fuer Puls-Animationen. Farbe ueber --tblr-purple-rgb,
   damit das aufgehellte Dark-Mode-Purple automatisch mitzieht. */
.ba-pulse {
  animation: ba-pulse 2.6s ease-in-out infinite;
}
@keyframes ba-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tblr-purple-rgb), 0.30); }
  50%      { box-shadow: 0 0 0 12px rgba(var(--tblr-purple-rgb), 0); }
}

/* Beleg-Assistent: getoente Vertrauens-Leiste (Anonymisierungs-Hinweis).
   bg-purple-lt faerbt in Tabler auch die Textfarbe um (Badge-Verhalten) -
   hier soll nur die Flaeche leicht tinten, der Text normal lesbar bleiben.
   Kein hartes Hex: 6 % / 18 % Purple auf Surface, Dark Mode via Variable. */
.ba-trust {
  background-color: rgba(var(--tblr-purple-rgb), 0.06);
  border: 1px solid rgba(var(--tblr-purple-rgb), 0.18);
}

/* Beleg-Assistent: Reduced Motion - Shimmer und Puls abschalten. Balkenbreite
   und Stufen-Text tragen die Information auch ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .ba-progress-shimmer::after,
  .ba-pulse {
    animation: none;
  }
}

/* Import-Wartezeit-Minispiel "PDF-Catcher" (import-minigame.js).
   Canvas-Element: kein Tabler-Utility fuer Canvas-Sizing vorhanden. Feste
   Hoehe als Spielfeld; die interne Aufloesung setzt das JS DPR-korrekt.
   Kein cursor/touch-action noetig - gesteuert wird ausschliesslich per
   Pfeiltasten. Das Spiel malt seine Flaeche seit dem 8-Bit-Umbau deckend
   aus; der Hintergrund traegt nur noch den Zustand vor dem ersten Bild.
   image-rendering greift erst bei krummer DPR (Windows-Skalierung) - dort
   wuerde der Browser das Pixelraster sonst weichzeichnen. */
.minigame-canvas {
  display: block;
  width: 100%;
  height: 280px;
  background: var(--tblr-body-bg);
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  image-rendering: pixelated;
}

/* Herzen im Kartenkopf: fuenf Plaetze a 12 px Sprite plus 2 px Luft, der
   letzte ohne Luft (5 * 14 - 2 = 68). Die Masse stehen hier statt am Element,
   weil das JS die Canvas-Aufloesung DPR-abhaengig setzt - ohne CSS-Groesse
   waere die Darstellung auf Retina doppelt so gross. */
.minigame-herzen {
  display: block;
  width: 68px;
  height: 12px;
  image-rendering: pixelated;
}

/* Mini-Sprites der Fusszeilen-Legende: 24x24, das native Raster aller sieben
   Objekt-Sprites. Bewusst nicht kleiner - ein krummer Verkleinerungsfaktor
   wuerde einzelne Pixelreihen verschlucken. */
.minigame-legende {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  image-rendering: pixelated;
}

/* Sanftes Einblenden von Teaser-/Spiel-Card (statt hartem Aufpoppen unter der
   Status-Card) - kein Tabler-Utility fuer Einblend-Animationen vorhanden. */
.minigame-einblenden {
  animation: minigame-einblenden 0.4s ease-out;
}
@keyframes minigame-einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Minispiel: Reduced Motion - nur die ambiente Einblend-Animation abschalten.
   Der Spiel-Loop selbst ist eine bewusst gestartete Interaktion und bleibt. */
@media (prefers-reduced-motion: reduce) {
  .minigame-einblenden {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar-Panels + Schrittansicht (Handover #111)

   Die Sidebar hat drei Zonen: Kopf (Dashboard/Waehler), Panel
   "Schrittansicht", Panel "Menü". Tabler kennt kein Panel-Muster fuer die
   vertikale Navbar - deshalb diese Ergaenzung. Sie bleibt auf Tabler-Tokens
   (var(--tblr-*)) und kommt ohne !important aus.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Kopf-Liste darf im Flex-Container der Sidebar nicht wachsen, sonst
   schiebt sie die Panels an den unteren Rand und darueber steht ein grosser
   Leerraum. Den Restraum unter den Panels schluckt der vorhandene
   .mt-auto-Fussblock.

   Die Selektor-Kette muss Tablers
   `.navbar-vertical.navbar-expand-lg .navbar-nav { flex-grow: 1 }` (0,3,0)
   ueberbieten - ein blosses `.sidebar-kopf` (0,1,0) hat still verloren,
   obwohl main.css spaeter laedt (Spezifitaet schlaegt Ladereihenfolge).
   Gleiche Media Query wie das Original: unterhalb 992px ist die Navbar
   off-canvas und hat keine Flex-Hoehe zu verteilen. */
@media (min-width: 992px) {
  .navbar-vertical .navbar-collapse .navbar-nav.sidebar-kopf {
    flex-grow: 0;
  }
}

/* Mandant-/Depot-Kontextkarte im Sidebar-Kopf. Tabler hat kein Muster fuer
   einen beschrifteten Kontextwaehler in der vertikalen Navbar - .nav-link
   kennt keine zweizeilige Label/Wert-Struktur. Die Mikro-Labels sind der
   Zweck der Karte: vorher standen Mandantenname und Depotname als zwei
   gleich aussehende Zeilen untereinander. */
.sidebar-kontext {
  /* 0.75rem seitlich = derselbe Abstand zum Sidebar-Rand wie der Jahr-Waehler
     im Panel darunter (.sidebar-panel-jahr). Ohne ihn klebte die Karte an
     beiden Raendern und fiel aus der Flucht der uebrigen Bedienelemente.
     Nur die Seiten setzen - die Kurzschreibweise `margin` wuerde das `my-3`
     am selben Element ueberschreiben (gleiche Spezifitaet, main.css laedt
     spaeter). */
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  overflow: hidden;
}
/* Innenradius der Zeilen = Kartenradius (8px) minus Kartenrahmen (1px).
   Ohne ihn laufen die inset-Rahmen und Hintergruende der Zeilen rechteckig
   in die runden Kartenecken; `overflow: hidden` kappt sie dort, sichtbar
   als abgeschnittene blaue Kante an allen vier Ecken. Angesprochen werden
   Klasse bzw. ID der Zeilen, nicht :first-child/:last-child - zwischen und
   nach den beiden Zeilen stehen im Template die Menue-Container und ihr
   Inline-JS, die Zeilen sind also weder erstes noch letztes Kind der Karte.
   Die beiden :has()-Regeln fangen ab, dass jede Zeile allein stehen kann
   (Mandant ohne Depot-Scope, Depot ohne Mandantenzeile). */
.sidebar-kontext-mandant {
  border-radius: 7px 7px 0 0;
}
#depot-scope-toggle.sidebar-kontext-zeile {
  border-radius: 0 0 7px 7px;
}
.sidebar-kontext:not(:has(#depot-scope-toggle)) .sidebar-kontext-mandant,
.sidebar-kontext:not(:has(.sidebar-kontext-mandant)) #depot-scope-toggle.sidebar-kontext-zeile {
  border-radius: 7px;
}
.sidebar-kontext-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Feste, gleiche Hoehe beider Zeilen (PO-Entscheidung 2026-08-09):
     Referenz ist die Depot-Zeile MIT Zusatztext "Depotuebergreifende
     Ansicht" - so springt die Kartenhoehe beim Seitenwechsel nicht, wenn
     der Zusatz kommt oder geht. Inhalt bleibt vertikal zentriert (flex). */
  min-height: 3.5rem;
  padding: 0.4rem 0.6rem;
  color: inherit;
  text-decoration: none;
}
/* Semantik der Kennzeichnung: Rahmen = Element bestimmt, was die Seite zeigt.
   Der Mandant wirkt auf jeder Seite -> dauerhaft umrandet, ohne Fuellung
   (gilt auch fuer die statische Ein-Mandant-Variante). Sein unterer Rand ist
   zugleich die Trennlinie zur Depot-Zeile - die fruehere graue border-top
   dort entfaellt, sonst entstuende eine Doppellinie an der Trennkante. */
.sidebar-kontext-mandant {
  box-shadow: inset 0 0 0 1px var(--tblr-primary);
}
/* Depot-Zeile im Wirk-Fall (Seite zeigt genau das links gewaehlte Depot):
   Rahmen + hellblauer Grund. Nur links/rechts/unten - die Oberkante schliesst
   der untere Rand der Mandant-Zeile, eine eigene Top-Linie ergaebe 2px Blau.
   box-shadow inset statt border, damit der overflow-hidden-Radius der Karte
   unangetastet bleibt. */
.sidebar-kontext-aktiv {
  background: rgba(var(--tblr-primary-rgb), 0.08);
  box-shadow:
    inset 1px 0 0 var(--tblr-primary),
    inset -1px 0 0 var(--tblr-primary),
    inset 0 -1px 0 var(--tblr-primary);
}
a.sidebar-kontext-zeile:hover {
  background: rgba(var(--tblr-primary-rgb), 0.06);
  color: inherit;
  text-decoration: none;
}
/* Aktiv-Grund (0.08) liegt ueber dem Hover-Grund (0.06) - ohne Anhebung
   waere die markierte Zeile beim Hover heller statt dunkler. */
a.sidebar-kontext-zeile.sidebar-kontext-aktiv:hover {
  background: rgba(var(--tblr-primary-rgb), 0.12);
}
.sidebar-kontext-statisch {
  cursor: default;
}
.sidebar-kontext-zeile > .ti {
  flex: none;
  font-size: 1rem;
  color: var(--tblr-secondary);
}
.sidebar-kontext-caret {
  font-size: 0.85rem;
  opacity: 0.7;
}
.sidebar-kontext-text {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-kontext-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  /* Disabled statt secondary: das Mikro-Label ist eine Beschriftung, kein
     Inhalt - es soll hinter dem Mandanten-/Depotnamen zuruecktreten. */
  color: var(--tblr-disabled-color);
}
.sidebar-kontext-name {
  display: block;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-kontext-hinweis {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tblr-secondary);
  white-space: normal;
}

/* Natives <details> statt Bootstrap-Collapse: kein JS noetig, damit das Panel
   auch ohne sidebar-panels.js auf- und zuklappt (das Skript merkt sich nur
   den Zustand). */
.sidebar-panel > .sidebar-panel-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  border-top: 1px solid var(--tblr-border-color);
  cursor: pointer;
  list-style: none;
}
.sidebar-panel > .sidebar-panel-head::-webkit-details-marker {
  display: none;
}
.sidebar-panel > .sidebar-panel-head:hover {
  color: var(--tblr-body-color);
}
.sidebar-panel-chevron {
  font-size: 0.85rem;
  transition: transform 0.15s;
}
.sidebar-panel:not([open]) .sidebar-panel-chevron {
  transform: rotate(-90deg);
}

/* Die Sidebar scrollt als GANZES - Kopf-Liste, Mandant/Depot-Karte und beide
   Panels ("Nächste Schritte", "Menü") laufen gemeinsam durch. Das ist Tablers
   eigenes Verhalten fuer .navbar-vertical (overflow-y:scroll am <aside>,
   min-height:100% am Container); hier steht deshalb nur noch die eine
   Ergaenzung, die davon abweicht: die Logo-Zeile bleibt oben stehen.

   Vorgeschichte (PO-Befund 2026-08-14): Bis dahin war die Sidebar
   hoehenbegrenzt und das offene Panel ein eigener Scroll-Container. Auf
   niedrigen Fenstern und auf dem iPad lagen damit zwei Scrollflaechen
   ineinander - man scrollte im Panel und kam trotzdem nicht an die
   Menuepunkte, weil der Rest der Sidebar unbeweglich war. Wer diese
   Konstruktion wieder einfuehren will, muss dieses Problem mitloesen.

   Ab 992px, weil die Sidebar darunter off-canvas als Overlay faehrt. */
@media (min-width: 992px) {
  /* Scroll-Container ist das <aside>; .container-fluid dazwischen hat kein
     eigenes overflow und unterbricht die Sticky-Kette nicht. Der Hintergrund
     ist Pflicht, sonst scrollen die Menuepunkte sichtbar durch das Logo. */
  .navbar-vertical.navbar-expand-lg > .container-fluid > .navbar-brand {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tblr-bg-surface);
    /* Die rechte Sidebar-Kante ist ein inset-Schatten am <aside> und liegt
       damit UNTER den Kindern - der Hintergrund oben deckte sie auf Hoehe der
       Logo-Zeile zu und riss eine Luecke in die Linie. Sie wird hier mit
       derselben Farbquelle fortgefuehrt (--tblr-border-color loest exakt zur
       Schattenfarbe auf und schaltet im Dunkelmodus mit). */
    box-shadow: inset -1px 0 0 0 var(--tblr-border-color);
  }
}

.sidebar-panel-jahr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.75rem 0.35rem;
}
.sidebar-schritt-wj,
.sidebar-schritt-hinweis {
  display: block;
  padding: 0 0.75rem 0.4rem;
  font-size: 0.72rem;
  color: var(--tblr-secondary);
}
.sidebar-schritt-hinweis {
  padding-bottom: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
}
.sidebar-schritt-hinweis:hover {
  color: var(--tblr-body-color);
}

/* Schritt-Liste als Checkliste (Redesign 1b, PO-Freigabe 2026-08-07). Die
   Tabler-Komponente .steps ist bewusst entfallen: ihre durchgefaerbte
   Verbindungslinie suggeriert einen linearen Ablauf, den es fachlich nicht
   gibt, und die weissen Ziffern auf Gruen/Hellgrau waren schlecht lesbar.
   Marker und Nummer stehen deshalb explizit im Template; alleinige Farbquelle
   bleibt data-zustand.

   Jeder Zustand bekommt eine EIGENE, nicht kommagruppierte Regel: der Guard
   test_css_kennt_jeden_zustand liest die Zustaende mit einem greedy Regex aus
   dieser Datei und faende in einer Selektorliste nur den letzten. */
.side-steps {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.5rem 0.85rem;
  font-size: 0.8rem;
}
.side-steps .side-steps-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  line-height: 1.35;
}
.side-steps .side-steps-item:not(:first-child) {
  margin-top: 0.6rem;
}
.side-steps-inhalt {
  flex: 1 1 auto;
  min-width: 0;
}
/* Basisdarstellung des Markers: Kreis und Ziffer in Secondary. "ausstehend"
   nutzt sie bewusst mit (Lesbarkeits-Fix 2026-08-09: das fruehere
   --tblr-disabled-color war mit 40 % Deckkraft kaum lesbar). Ein unbekannter
   Zustandswert saehe damit wie "ausstehend" aus - dagegen sichern die
   Vokabular-Guards in tests/test_schrittansicht.py (Service, Badge-Mapping,
   CSS und Template muessen dieselben Werte kennen), nicht diese Datei. */
.side-steps-marker {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  border: 1.5px solid var(--tblr-secondary);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tblr-secondary);
}
.side-steps-marker-check {
  display: none;
  font-size: 0.8rem;
}
.side-steps .side-steps-item[data-zustand="erledigt"] {
  color: var(--tblr-secondary);
}
.side-steps .side-steps-item[data-zustand="erledigt"] .side-steps-marker {
  background: var(--tblr-green);
  border-color: var(--tblr-green);
  color: var(--tblr-white);
}
.side-steps .side-steps-item[data-zustand="erledigt"] .side-steps-marker-nr {
  display: none;
}
.side-steps .side-steps-item[data-zustand="erledigt"] .side-steps-marker-check {
  display: block;
}
.side-steps .side-steps-item[data-zustand="aktiv"] {
  font-weight: 600;
}
.side-steps .side-steps-item[data-zustand="aktiv"] .side-steps-marker {
  background: rgba(var(--tblr-primary-rgb), 0.12);
  border-color: transparent;
  color: var(--tblr-primary);
}
.side-steps .side-steps-item[data-zustand="ausstehend"] {
  color: var(--tblr-secondary);
}
/* Ortsmarke "Sie sind hier" - eigene Klasse statt Tablers .active, das alles
   davor als erledigt einfaerbt (mehrere offene Schritte sind der Normalfall).
   Die Zeile wird hinterlegt statt den Kreis zu umranden; der aktive Schritt
   am aktuellen Ort bekommt zusaetzlich den vollen Primary-Kreis. Diese Regel
   steht NACH den Zustands-Regeln - gleiche Spezifitaet, spaeter gewinnt. */
.side-steps .side-steps-item.side-steps-hier {
  background: rgba(var(--tblr-primary-rgb), 0.07);
}
.side-steps .side-steps-hier[data-zustand="aktiv"] .side-steps-marker {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: var(--tblr-white);
}
.side-steps .side-steps-item.side-steps-gedimmt {
  opacity: 0.75;
}
.side-steps a {
  color: inherit;
  text-decoration: none;
}
.side-steps a:hover {
  text-decoration: underline;
}
.side-steps .side-steps-marke,
.side-steps .side-steps-notiz {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--tblr-secondary);
}
.side-steps .side-steps-marke {
  color: var(--tblr-primary);
}
/* Ortsmarke-Pfeil: etwas kleiner als der Text und optisch auf der Grundlinie
   (das Dreieck sitzt in seiner Glyphe hoeher als eine Versalie). */
.side-steps .side-steps-marke-icon {
  font-size: 0.62rem;
  margin-right: 0.2rem;
  vertical-align: 0.02rem;
}

.side-steps-sub {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 400;
}
.side-steps-sub li {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.2rem;
  color: var(--tblr-primary);
}
.side-steps-sub li .ti {
  flex: none;
  font-size: 0.8rem;
  position: relative;
  top: 1px;
}
/* Icon-Umschaltung rein ueber data-zustand - so steht der Zustandsname nur an
   einer Stelle im Template (gleiches Muster wie .guv-drilldown-trigger).
   Erledigt traegt denselben gefuellten Haken-Kreis wie ein Hauptschritt, nur
   kleiner - eine einzige Haken-Sprache im Panel. */
.side-steps-sub li .side-steps-icon-erledigt {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--tblr-green);
  color: var(--tblr-white);
  position: relative;
  top: 2px;
}
.side-steps-sub li .side-steps-icon-erledigt .ti {
  font-size: 0.6rem;
  top: 0;
}
.side-steps-sub li[data-zustand="erledigt"] {
  color: var(--tblr-secondary);
}
.side-steps-sub li[data-zustand="erledigt"] .side-steps-icon-erledigt {
  display: flex;
}
.side-steps-sub li[data-zustand="erledigt"] .side-steps-icon-offen {
  display: none;
}