/*
 * CSS Bundle - Automatisch generiert
 * Generiert aus: base_common.css
 * Anzahl Dateien: 53
 * 
 * NICHT MANUELL BEARBEITEN!
 * Änderungen in den Originaldateien vornehmen und dann
 * `python scripts/bundle_css.py` ausführen.
 */


/* === ./css/core/app_shell.css === */
/* Core app scaffold powered by theme tokens */

/* Smooth theme transitions for all themeable properties */
html,
body,
.card,
.modal-content,
.dropdown-menu,
.navbar,
.nav-link,
.btn,
.form-control,
.form-select,
.accordion-item,
.accordion-button,
.table,
.list-group-item,
.alert,
.badge,
input,
select,
textarea {
  transition: 
    background-color 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Prevent transition on page load */
.theme-transition-disabled,
.theme-transition-disabled * {
  transition: none !important;
}

html {
  height: var(--app-html-height, auto);
  min-height: var(--app-html-min-height, 100%);
  background: var(--app-html-background, transparent);
}

body {
  font-size: var(--app-font-size, 0.875rem);
  background-color: var(--app-background, #ffffff);
  background-image: var(--app-background-image, none);
  background-repeat: var(--app-background-repeat, no-repeat);
  background-size: var(--app-background-size, auto);
  background-position: var(--app-background-position, center);
  color: var(--app-text-color, inherit);
  overflow-x: hidden;
  height: var(--app-body-height, auto);
  min-height: var(--app-body-min-height, 100vh);
  letter-spacing: var(--app-letter-spacing, normal);
  line-height: var(--app-line-height, 1.5);
  position: relative;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 0 auto;
  width: 100%;
}

.app-footer {
  flex-shrink: 0;
  width: 100%;
}

#flash-container,
#cookieBanner {
  flex-shrink: 0;
}

/* === ./css/core/layout.css === */
html {
  height: var(--app-html-height, auto);
  min-height: var(--app-html-min-height, auto);
  background-color: var(--app-html-background, transparent);
}

body {
  font-size: var(--app-font-size, 0.875rem);
  margin: 0;
  background-color: var(--app-background, #040A14);
  background-image: var(--app-background-image, none);
  background-repeat: var(--app-background-repeat, no-repeat);
  background-size: var(--app-background-size, auto);
  background-position: var(--app-background-position, center);
  color: var(--app-text-color, inherit);
  overflow-x: hidden;
  height: var(--app-body-height, auto);
  min-height: var(--app-body-min-height, auto);
  position: relative;
  letter-spacing: var(--app-letter-spacing, normal);
  line-height: var(--app-line-height, 1.5);
}

/* Sidebar/Hauptbereich-Trennlinie: 1px-Vertikalstrich am rechten Rand der Sidebar.
   Pseudo-Element statt border-right, damit der Sidebar-Inhalt nicht verschoben wird
   und die Linie auch bei kuerzerer Sidebar volle Row-Hoehe erhaelt (Bootstrap-row
   stretcht die cols equal-height). Nur ab >=lg, weil darunter die Sidebar oberhalb
   des Hauptbereichs gestackt wird und eine vertikale Linie am rechten Rand
   sinnlos waere. */
.bg-left-col {
  position: relative;
}

/* Padding-Reserve am unteren Rand des scrollbaren Sidebar-Wrappers.
   Bootstrap-.overflow-auto setzt overflow: auto !important — ohne
   Bottom-Padding wird der Focus-Halo des letzten form-control
   (--form-focus-shadow = 0.25rem nach außen) abgeschnitten. .5rem
   reicht für den Halo + minimale Reserve. Scoped auf .bg-left-col,
   damit andere overflow-auto-Verwendungen unberührt bleiben. */
.bg-left-col > .overflow-auto {
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  /* TEST: vertikale Sidebar-Linie testweise aus, Revert via display-Zeile entfernen */
  .bg-left-col::after {
    content: "";
    position: absolute;
    top: 0;
    /* right: 9px schiebt die Linie 9 px in die Sidebar-Seite des Gutters
       hinein — naeher an die Sidebar-Inputs, weiter weg von der Card. */
    right: 9px;
    bottom: 0;
    /* Border statt background: 1px width via background rendert subpixel-
       weise und wirkt visuell breiter/unschaerfer als die Form-Control-
       Borders. Border-Rendering snappt pixel-aligned und matched optisch
       die Form-Control-Border genau. width: 0 + border-left: 1px liefert
       eine 1-px-Linie an der gleichen Position wie vorher background. */
    width: 0;
    border-left: 1px solid var(--sidebar-divider-color, var(--form-control-border));
    pointer-events: none;
    display: none;
  }
}

/* TEST: Sidebar zurück zur Bootstrap-Default-Breite (Revert von Commit
   662ec94 "Sidebar 20% schmaler"). Main-col schmaler-gehalten, damit
   Card-Rechtskante an gleicher %-Position wie zuvor.
   Revert: alten Block reaktivieren. */
@media (min-width: 768px) {
  .bg-left-col + .col-md-8 {
    flex: 0 0 60.01%;
    max-width: 60.01%;
  }
}
@media (min-width: 1400px) {
  .bg-left-col + .col-md-8 {
    flex: 0 0 67%;
    max-width: 67%;
  }
}

/* ADDITIVE, eng gescopt auf ~992-1399px (Bootstrap lg bis knapp vor xxl):
   In diesem Fenster greift noch der Bootstrap-Default fuer die Sidebar
   (col-lg-4/col-md-4 = 33.33%) gegen die bereits auf 60.01% verschmaelerte
   Hauptspalte (Regel oben) — Sidebar wirkt zu breit, Karten rechts versetzt.
   Zielverhaeltnis grob Sidebar 30% / Haupt 70% (28%/72%, Bootstrap-eigenes
   Spalten-Padding bleibt als Gutter zwischen den Spalten).
   TEST: urspruenglich ".bg-left-col:has(+ .col-md-8)" fuer praezises Scoping
   auf Seiten mit dem .bg-left-col+.col-md-8-Paar. Bug gefunden: wertet eine
   Rendering-Umgebung :has() nicht aus (beobachtet in einer Chrome-Extension
   fuer Multi-Viewport-Vorschau), faellt NUR die Sidebar auf Bootstrap-nativ
   (33.33%) zurueck, waehrend die :has()-unabhaengige col-md-8-Regel (72%)
   weiter greift — Summe 105.33% > 100% treibt die Hauptspalte per
   flex-wrap in eine neue Zeile (Stapeln). Fix: expliziter Klassen-Marker
   ".bg-left-col--mid" direkt im Template (anlagefinder.html,
   anbietervergleich.html, av_intern.html, pers_intern.html,
   auswertung_intern.html — nur wo .bg-left-col unmittelbar von .col-md-8
   gefolgt wird; cashflow.html nutzt col-md-5/col-md-7 statt col-md-8 und
   bleibt unberuehrt) statt Selector-Feature-Erkennung zur Laufzeit.
   Revert: .bg-left-col--mid durch :has(+ .col-md-8) ersetzen + Marker-
   Klassen aus den Templates entfernen.
   Rand-Puffer-Diagnose (getComputedStyle im Preview bei 1194px): die
   dritte Spacer-Spalte (col-lg-0/col-xxl-1 o.ae., immer leer) traegt NICHT
   bei — Bootstrap kennt kein "col-lg-0", die Klasse ist wirkungslos, das
   leere Element faellt auf Bootstraps .row>*-Default (width:100%) zurueck
   und wrapped dadurch unsichtbar in eine neue Zeile (Padding hier trotzdem
   defensiv auf 0 gesetzt, falls sich das Bootstrap-Verhalten mal aendert).
   Die tatsaechlichen Beitraege waren: .content (sidebar.css,
   --content-padding-left/right = 12px + 6px extra), .container-fluid.
   min-vh-100 (Bootstrap-Gutter 0.75rem, NUR auf beratung.html — einzige
   Stelle mit dieser Klassenkombi), col-md-8s eigenes Bootstrap-Spalten-
   Padding-Right (0.75rem) und der 2%-Row-Rest aus der urspruenglichen
   28/65-Aufteilung. Alle vier reduziert/verschmaelert. Spezifitaet
   ".app-main .content" noetig, weil layout.css VOR sidebar.css importiert
   wird (base_common.css) und die unscoped .content-Regel sonst gewinnen
   wuerde. Oberhalb 1400px unveraendert (Media-Query-Range endet bei
   1399.98px). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .bg-left-col--mid {
    flex: 0 0 28%;
    max-width: 28%;
  }
  .bg-left-col + .col-md-8 {
    flex: 0 0 72%;
    max-width: 72%;
    padding-right: 6px;
  }
  .bg-left-col + .col-md-8 + * {
    padding-left: 0;
    padding-right: 0;
  }
  .app-main .content {
    padding-left: 8px;
    padding-right: 8px;
  }
  .container-fluid.min-vh-100 {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* Card-Aussenabstand (me-3 = 1rem) auf dieser Breite unnoetig grosszuegig,
     verhindert sonst das Erreichen des Ziel-Restabstands (~8-12px). Scoped
     auf den Content-Haupt-Col, damit .me-3 anderswo unberuehrt bleibt. */
  .bg-left-col + .col-md-8 .main-area-container {
    margin-right: 4px;
  }
}

/* ADDITIVE, <992px (Bootstrap-Standard: Sidebar+Hauptspalte stapeln bereits
   uebereinander statt nebeneinander — aber beide behielten bisher ihre
   Prozent-Breite aus dem breiteren Grid, statt auf 100% zu wachsen, UND die
   Sidebar hat ein eigenes Zentrierungs-Problem):
   Ursache 1 (Sidebar-Inhalt zentriert, grosser Leerraum links):
   anlagefinder.html/av_input.html wickeln ihren Inhalt in Bootstraps
   ".container" (NICHT ".container-fluid") + ".me-0". ".container" hat pro
   Breakpoint ein festes max-width UND per Bootstrap-Default margin:0 auto
   (zentriert) — ".me-0" nullt nur den RECHTEN Rand, "margin-left:auto"
   bleibt aktiv und schiebt den Inhalt bis zum rechten Rand, der Leerraum
   bleibt links (getComputedStyle bei 834px physisch: .container max-width
   720px [logisch, Zoom-Teilbaum], margin-left 332px, margin-right 0 — exakt
   der gemeldete Diagonal-Versatz: Sidebar rechtsversetzt, Hauptspalte
   darunter linksbuendig aber schmaler).
   Ursache 2 (Hauptspalte bleibt schmal + linksbuendig statt zu stapeln):
   .bg-left-col + .col-md-8 ist ab 768px bereits per Regel oben (unbounded
   @media, gilt auch <992px) auf 60.01% fixiert — ohne Override bleibt sie
   schmal statt Full-Width zu stapeln.
   Rand-Puffer-Quellen identisch zur Mittel-Klasse (992-1399px) gespiegelt,
   nur symmetrisch (links+rechts), da beide Spalten jetzt einzeln die volle
   Breite einnehmen statt nebeneinander zu sitzen. */
@media (max-width: 991.98px) {
  .bg-left-col--mid,
  .bg-left-col + .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
  }
  .bg-left-col .container {
    max-width: 100%;
    margin-left: 0;
  }
  .bg-left-col + .col-md-8 + * {
    padding-left: 0;
    padding-right: 0;
  }
  .app-main .content {
    padding-left: 8px;
    padding-right: 8px;
  }
  .container-fluid.min-vh-100 {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* !important noetig: .me-3 (Bootstrap-Spacing-Utility) ist selbst
     "margin-right: 1rem !important" — eine normale Deklaration ueberschreibt
     das nicht, Regel blieb sonst wirkungslos (verifiziert: computed
     margin-right blieb 16px trotz dieser Regel ohne !important). */
  .bg-left-col + .col-md-8 .main-area-container {
    margin-right: 8px !important;
  }
}

/* ========================================================================
   Topbar Reset-Col: linke Kante des Reset-Buttons aligned mit rechter Kante
   der grauen Haupt-Content-Karte (.main-area-container).
   ────────────────────────────────────────────────────────────
   Layout-Kette zur grauen-Card-rechten-Kante:
     col-md-8 aeussere rechte Kante (override layout.css:78/97) − 0.75rem
       (Bootstrap-Col-Padding-Right von col-md-8) − 1rem (me-3 auf
       .main-area-container) = aeussere Kante − 1.75rem.
     md+: 93.34 % − 1.75rem      xxl+: 92 % − 1.75rem
   Reset-Button-Naturbreite ≈ 7.34rem (Original-Kommentar zu min-width).
   Mit justify-content-end (Markup) gilt:
     button-right-edge = col-md-2 aeussere rechte Kante − padding-right
                       = 100 % − padding-right
     button-left-edge  = button-right-edge − 7.34rem
   Soll button-left-edge = graue-Card-rechte-Kante:
     padding-right = 100 % − (graue-Card-rechte-Kante + 7.34rem)
                   = (Trailing-Gap %) − 5.59rem
     mit Trailing-Gap = 6.66 % (md+) / 8 % (xxl+) und 5.59rem = 7.34rem − 1.75rem.
   max(0px, …) clamped negative Werte: an narrow md-Viewports passt der
   Button nicht mehr in den Gap und wird stattdessen ans rechte Row-Ende
   gedrueckt — leichte Ueberlappung wird in Kauf genommen.
   ────────────────────────────────────────────────────────────
   ⚠️ TECHNISCHE SCHULD: die Pixel-Rechnerei kompensiert das fehlende
   Topbar-Layout-Parity zur Tab-Content-Row (unterschiedliche Col-Strukturen,
   Heading nur ab xl, kein gemeinsamer Trailing-Col). Beim grossen
   Topbar-Refactor sollte die Topbar-Row strukturell identisch zur
   Content-Row aufgebaut werden, dann fallen alle Magic-Numbers weg.
   ────────────────────────────────────────────────────────────
   Prozent-Padding auf Flex-Items wird gegen die Breite des Containing-
   Blocks (= .row) berechnet, daher Prozent statt rem fuer den Trailing-
   Anteil. !important, weil .row > * (Bootstrap-Col-Gutter) sonst gewinnt. */
.topbar-reset-col {
  padding-right: max(0px, calc(6.66% - 5.59rem)) !important;
}
@media (min-width: 1400px) {
  .topbar-reset-col {
    padding-right: max(0px, calc(8% - 5.59rem)) !important;
  }
}

/* ========================================================================
   Topbar-Row: durchgehende graue Horizontal-Linie auf
   Y = --topbar-baseline (Hoehe der oberen Zone in allen 3 Spalten).
   Eine Row-weite Pseudo-Linie statt drei einzelner Col-Bottom-Borders —
   garantiert visuelle Kontinuitaet auch bei zwischen den Cols liegenden
   Bootstrap-Gutters.
   ⚠️ Magic-Number: --topbar-baseline 3.75rem (~60 px) ist auf eine
   symmetrische Luftverteilung um den Reset-Button (~40 px) kalibriert
   (je ~10 px oben/unten). Beim grossen Topbar-Refactor strukturell
   ersetzen (z.B. via JS-gemessener Button-/nav-link-Hoehe oder
   Container-Query). ======================================================== */
.topbar-row {
  /* Hoehe der oberen Zone in allen 3 Spalten. Bei 3.75rem (~60 px) liegt
     der Reset-Button (~40 px) mit ~10 px symmetrischer Luft zur Linie. */
  --topbar-baseline: 3.75rem;
  position: relative;
}
/* Horizontale Linie als ZWEI Pseudo-Elemente:
   ::before = linkes Segment, symmetrisch um die Mittelachse der
              Sidebar-Inputs zentriert
   ::after  = rechtes Segment, symmetrisch um die Mittelachse der
              grauen .main-area-container zentriert
   20-px-Luecke zwischen den Segmenten, mittig auf der vertikalen
   Sidebar-Trennlinie (= bg-left-col-width − 9 px). Die linke und
   rechte Linien-Begrenzung leiten sich aus dem Spalten-Layout und
   dem padding-x ab (Bootstrap-col-Gutter 0.75rem, .main-area-container
   me-3 = 1rem). */
/* TEST: graue Topbar-Linien testweise aus, Revert via display-Zeile entfernen */
.topbar-row::before,
.topbar-row::after {
  content: "";
  position: absolute;
  top: var(--topbar-baseline);
  height: 1px;
  background: var(--form-control-border);
  pointer-events: none;
  display: none;
}
/* Default sub-md: ::before unsichtbar, ::after spannt ueber die volle Row. */
.topbar-row::before {
  left: 0;
  right: 100%;
}
.topbar-row::after {
  left: 0;
  right: 0;
}
/* md+: .main-area-container sichtbar in col-md-8 (override-Breite 66.67%).
   Card-left = 0.75rem, card-right = 66.67% − 1.75rem. ::after = Card-Breite
   (symmetrisch, Ueberhang 0). */
@media (min-width: 768px) {
  .topbar-row::after {
    left: 0.75rem;
    right: calc(33.33% + 1.75rem);
  }
}
/* xl+: bg-left-col sichtbar (d-xl-block) mit Breite 26.67% (md+-Override),
   col-md-8 startet bei 26.67%. Vertikale Sidebar-Trennlinie bei 26.67% − 9 px.
   Linie wird in zwei Segmente gespaltet mit 20-px-Luecke. */
@media (min-width: 1200px) {
  /* Linkes Segment: symmetrisch um Sidebar-Input-Center.
     Input-Center = 13.335 % (= (0.75rem + 26.67% − 0.75rem) / 2).
     Rechte Kante des Segments = vline − 10 px = 26.67% − 19 px.
     Linke Kante = 2 * input_center − right = 19 px. */
  .topbar-row::before {
    left: 19px;
    right: calc(73.33% + 19px);
  }
  /* Rechtes Segment: symmetrisch um Card-Center.
     Card-left = 26.67% + 0.75rem, card-right = 93.34% − 1.75rem,
     card-center = 60.005% − 0.5rem.
     Linke Kante des Segments = vline + 10 px = 26.67% + 1 px.
     Rechte Kante (von row-right) = 100% − (2 * card-center − left)
     = 6.66 % + 17 px. */
  .topbar-row::after {
    left: calc(26.67% + 1px);
    right: calc(6.66% + 17px);
  }
}
/* xxl+: bg-left-col Override-Breite 20%, col-md-8 Override-Breite 72%.
   Vertikale bei 20% − 9 px. */
@media (min-width: 1400px) {
  .topbar-row::before {
    /* input-center = 10 %; ::before_left = 19 px, right_x = 20% − 19 px. */
    left: 19px;
    right: calc(80% + 19px);
  }
  .topbar-row::after {
    /* card-center = 56% − 0.5rem; ::after_left = 20% + 1 px,
       ::after_right_css = 8% + 17 px. */
    left: calc(20% + 1px);
    right: calc(8% + 17px);
  }
}
/* Reset-Button-Wrapper: min-height = baseline, sodass align-items: center
   den Button symmetrisch in der oberen Zone zentriert (gleiche Luft oben
   wie unten zur grauen Linie). */
.topbar-reset-wrap {
  min-height: var(--topbar-baseline);
  /* TEST: Reset auf Step-Indikator-Höhe */
  align-items: flex-end !important;
}
/* Tab-Bar (ul) deterministisch auf baseline-Hoehe pinnen, sodass ihr
   Bottom mit der Row-Pseudo-Linie alignt:
   - margin: 0 killt Browser-Default ul-margin-top (~1em), das sonst die
     "wirksame" Tab-Position verschiebt
   - min-height = --topbar-baseline: ul mindestens so hoch wie die Linie
   - align-items: flex-end: nav-items am Bottom der ul (innen)
   Wrapper-Col hat align-items-start (im Markup), sodass die ul am Top
   der gestretchten Col sitzt — ul-Top + baseline = Linien-Y. */
#main_side_tabs {
  margin: 0;
  min-height: var(--topbar-baseline);
  align-items: flex-end;
}
/* Bootstrap-Default .nav-tabs .nav-item { margin-bottom: -1px } wuerde
   das nav-item 1 px UEBER die ul-Baseline schieben (mit align-items:
   flex-end alignt die Margin-Edge zu Container-Bottom; bei margin -1
   ist content-bottom = baseline − (−1) = baseline + 1). Folge:
   nav-link-bottom bei Y = baseline + 1, Active-Blue-3px-Border bei
   [baseline−2, baseline+1] → 1-px-Overlap mit der Grey-Row-Linie bei
   [baseline, baseline+1]. Im Painting-Step 6 wird das positioned ::after
   nach den non-positioned Tab-Buttons gemalt → Grey verdeckt Blau im
   Overlap-Pixel.
   Fix: margin-bottom: 0 verschiebt nav-link-bottom auf die baseline
   selbst → Active-Border-Bottom = Grey-Top (Edge-to-Edge, kein Overlap).
   Blau und Grau bleiben beide voll sichtbar als 3-px-Blau direkt
   ueber 1-px-Grau.
   Scope auf #main_side_tabs, damit andere .nav-tabs in der App
   (z.B. Wiki-Tabs) das Bootstrap-Default-Verhalten behalten. */
#main_side_tabs .nav-item {
  margin-bottom: 0;
}

/* ========================================================================
   Profile-Status-Zeile (oben in der Heading-Sidebar, ueber dem Tab-Heading).
   Zeigt aktives Profil + Save-State + Disketten-Button (oeffnet #profileModal).
   Sichtbar auf jedem Tab, weil zentral in beratung.html platziert.
   Hoehe = --topbar-baseline, damit ihr unterer Rand mit der Tab-Bar-Bottom-
   und der Reset-Zone-Bottom alignt — die Row-Pseudo-Linie laeuft dann
   visuell unter ihr durch, ohne dass die Status-Zeile selbst eine Border
   braucht.
   ======================================================================== */
.profile-status-line {
  position: relative;
  /* Container-Query-Anker: Die Zeile muss sich nach IHRER EIGENEN Breite
     richten, nicht nach der Fensterbreite. Mit offenem Assistenten-Panel ist
     das Fenster 1440 px breit, die linke Spalte aber nur noch 213 px — eine
     Media-Query sieht davon nichts. Gemessen 10.08. bei 1440x900, Panel offen:
     Label 102 + Name 438 + Status 176 + X 26 = 742 px Bedarf auf 173 px
     Innenbreite; der Name (min-width 0) wurde auf 0 px gequetscht, der Berater
     sah nicht mehr, welches Profil geladen ist. */
  container: profilzeile / inline-size;
  display: flex;
  /* center: Disketten-Button (Icon) + Text-Spans sitzen auf gemeinsamer
     Mittellinie. Baseline-Alignment hatte den Button sichtbar tiefer
     gezogen, weil der SVG-Glyph keinen Text-Baseline-Bezug hat. */
  align-items: center;
  gap: 0.4rem;
  /* padding-top groesser, damit der vertikal-zentrierte Content auf
     Tab-Label-Hoehe sitzt (sonst sitzt der Text 10 px hoeher als die
     inaktiven Tab-Labels, weil die ul-Inhalte am Bottom alignen). 1.7rem
     ≈ 27 px verschiebt die Content-Mittel-Y auf 40 px = Tab-Text-Mittel.
     margin-bottom: dezenter Luftraum zwischen Status-Linie und Tab-Heading. */
  /* TEST: padding-left 1.5rem (statt 1rem) — bündig mit dem Modul-Heading
     "Personenbezogene Daten" darunter (das via .px-4 ebenfalls 1.5rem
     padding-left hat). Vorher startete die Profil-Zeile 8px weiter links.
     Revert: zurueck auf 1rem. */
  padding: 1.7rem 1rem 0.45rem 1.5rem;
  /* TEST: margin-bottom +9px, schiebt Heading-Top von Y=72 auf Y=81
     (= Card-Top). Revert: zurück auf 0.75rem. */
  margin-bottom: 1.3125rem;
  /* TEST: Status-Zeile auf Step-Tab-Schriftgröße. Label + Name
     erben automatisch. State (.profile-status-state) bleibt
     kleiner via expliziter Override.
     Revert: zurück auf 0.8rem. */
  font-size: var(--nav-tool-font-size, 15px);
  line-height: 1.2;
  /* min-height: passt zur --topbar-baseline der umgebenden .topbar-row
     (3.75rem), damit ihr Bottom mit der Row-Pseudo-Linie zusammenfaellt. */
  min-height: 3.75rem;
}
.profile-status-label {
  color: var(--bs-secondary-color, #6c757d);
  /* TEST: Weight auf 500 (matched Step-Tab inactive).
     Revert: zurück auf 400. */
  font-weight: 500;
  white-space: nowrap;
  /* Nicht schrumpfen: Ein auf "Aktu…" gekuerztes Label sieht kaputt aus.
     Wird es eng, verschwindet es ganz (Container-Query unten). */
  flex: 0 0 auto;
}
.profile-status-name {
  /* TEST: Profil-Name-Weight auf 500 (matched Step-Tab inactive).
     Revert: zurück auf 600. */
  font-weight: 500;
  /* TEST: Profil-Name-Color auf Step-Tab-inactive-Farbe
     (--nav-tabs-link-color: rgba(0,0,0,0.7) light /
     rgba(255,255,255,0.8) dark). Revert: zurück auf inherit. */
  color: var(--nav-tabs-link-color, rgba(0, 0, 0, 0.7));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* Der Name ist das Wichtigste in der Zeile: Er bekommt den freien Platz
     (grow 1) und kuerzt per Ellipse, statt von Label und Status auf 0 px
     gequetscht zu werden. Der volle Name steht weiterhin im Tooltip. */
  flex: 1 1 auto;
}
.profile-status-name--empty {
  font-weight: 400;
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
}
.profile-status-state {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
  flex: 0 0 auto;
}
/* Stufenweises Weichen, gemessen am Innenmass der Zeile selbst (Container-
   Query, s.o.). Reihenfolge nach Wichtigkeit: zuerst geht der Statussatz
   (176 px, seine Aussage steckt auch im Disketten-Knopf: sichtbar = es gibt
   etwas zu speichern), dann das Label (102 px, der Name erklaert sich selbst).
   Schwellen so gelegt, dass fuer den Namen immer >= ~130 px bleiben, gerechnet
   mit den BREITEREN Dark-Mode-Massen (--nav-tool-font-size ist 14 px light,
   15 px dark → Label 109, Status 188):
   470 px = 109 + 188 + 26 + Abstaende + 130 Namensrest.
   285 px = 109 + 26 + Abstand + 130.
   Nachgemessen 10.08. (1440x900, Panel offen): Name 0 px -> 232 px. */
@container profilzeile (max-width: 470px) {
  .profile-status-state {
    display: none;
  }
}
@container profilzeile (max-width: 285px) {
  .profile-status-label {
    display: none;
  }
}
.profile-status-state.is-saved {
  color: #16a34a;
}
.profile-status-state.is-dirty {
  color: #d97706;
}
.profile-status-state.is-empty {
  display: none;
}
[data-theme="dark"] .profile-status-state.is-saved {
  color: #4ade80;
}
[data-theme="dark"] .profile-status-state.is-dirty {
  color: #fbbf24;
}
.profile-status-line.is-empty .profile-status-state {
  margin-left: 0;
}
/* Disketten-Button: Default-Skin borderlos auf transparentem BG (Icon dezent
   in --bs-secondary-color). Hover-Skin: --hover-glow-bg (dezentes Grau,
   gleicher Token wie andere Icon-Hover-Effekte), Icon bleibt dunkel via
   color: inherit — der graue BG liefert Kontrast genug, keine Farbumkehr
   noetig. Radius bleibt --radius-sm (8 px). Scoped auf den Save-Button in
   der Profil-Status-Zeile, kein globaler Eingriff. Transition-Timing wie
   .btn-main (150ms). */
.profile-status-save {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm, 8px);
  color: var(--bs-secondary-color, #6c757d);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, color 150ms ease;
  margin-left: 0.25rem;
  flex-shrink: 0;
  line-height: 1;
}
/* hidden-Attribut muss gegen das display:inline-flex der Klasse gewinnen
   (Speicher-Button verschwindet bei "✓ Alle Änderungen gespeichert"). */
.profile-status-save[hidden] {
  display: none;
}
.profile-status-save:hover,
.profile-status-save:focus-visible {
  background: var(--hover-glow-bg, rgba(0, 0, 0, 0.06));
  color: inherit;
}
.profile-status-save:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
}
.profile-status-save svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
/* Header-X (#profileStatusDeselect) direkt an den Speicher-Button anlegen:
   Der Save↔X-Spalt = flex-gap der .profile-status-line (0.4rem, geteilt →
   nicht anfassbar, spaced auch Status-Text↔Save) + margin-left. Ein negativer
   margin-left von -0.4rem hebt NUR hier den flex-gap exakt auf → Spalt 0, die
   Hover-Flächen liegen aneinander. Abstand Status-Text↔Save bleibt unverändert. */
#profileStatusDeselect {
  margin-left: -0.4rem;
}

/* ========================================================================
   Sidebar-Heading (z.B. "Personenbezogene Daten") mit Modul-Icon-Avatar.
   Avatar-Skin analog .profile-card-avatar (Royal-Blau + weisses Icon,
   --radius-md), aber etwas kleiner damit es zur fs-5-Schrift passt.
   Layout: flex inline mit gap zwischen Icon und Text.
   ======================================================================== */
.main-side-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Wie die Profil-Zeile darueber: nach EIGENER Breite umbrechen, nicht nach
     Fensterbreite. Mit offenem Panel bleiben der linken Spalte bei 1440x900
     nur 165 px Innenbreite; Icon (32) + "Personenbezogene" (175, ein Wort,
     nicht umbrechbar) + Video-Chip (71) liefen dann rechts aus der Spalte
     heraus — der Chip lag bei 1440 sichtbar auf der ersten Inhaltskarte
     (gemessen 10.08.). */
  container: seitentitel / inline-size;
  flex-wrap: wrap;
  min-width: 0;
}
/* Titel darf schrumpfen (min-width: 0 gegen die Flex-Voreinstellung) und im
   Notfall innerhalb des Wortes umbrechen, statt die Spalte zu sprengen. */
.main-side-title {
  min-width: 0;
  overflow-wrap: break-word;
}
.main-side-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md, 12px);
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff;
  user-select: none;
}
.main-side-icon .feather,
.main-side-icon svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  display: block;
}
/* Eng (praktisch nur mit offenem Panel): Modul-Icon weg. Es kostet 40 px, die
   der Titel braucht — und ohne diese Regel landet es allein in einer eigenen
   Zeile ueber dem Titel, weil der laengste Titel ("Personenbezogene Daten",
   235 px) nicht mehr danebenpasst. 285 px = 235 + Icon 32 + Abstaende.
   Der Video-Chip bleibt (er ist ein Link, das Icon ist Dekor) und rutscht in
   die naechste Zeile. Muss NACH der Grundregel stehen, sonst gewinnt deren
   display: inline-flex bei gleicher Spezifitaet. */
@container seitentitel (max-width: 285px) {
  .main-side-icon {
    display: none;
  }
}
/* Ganz eng: Titel eine Spur kleiner, damit "Personenbezogene" ungebrochen
   in eine Zeile passt. */
@container seitentitel (max-width: 200px) {
  .main-side-title {
    font-size: 1.05rem;
  }
}

/* TEST: Play-Button (.span_info) neben dem Modul-Heading auf der
   Personenbezogene-Daten-Seite (und allen anderen Modulen) auf
   display:none. Der Play-Button öffnet zwar das Side-Modal — wird
   aber nicht visuell gebraucht. Revert: diesen Block entfernen. */
.main-side-heading .span_info {
  display: none;
}

/* ── Video-Chip am Seitentitel (Beratung) ─────────────────────────
   Dezenter Dauer-Link zum passenden Mediathek-Video der aktuellen
   Seite. Der Puls-Punkt (JS, localStorage-Deckel: max. 3 Anzeigen
   pro Seite, endet beim ersten Klick) erinnert Erstnutzer, ohne zu
   nerven — kein Popup, kein Modal, kein Autoplay. */
.side-video-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px; padding: 2px 10px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 600; text-decoration: none;
  color: var(--accent-color, #1767ff);
  background: rgba(var(--accent-rgb, 23, 103, 255), 0.08);
  border: 1px solid rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  vertical-align: 3px; position: relative; transition: background 0.15s;
}
.side-video-chip:hover {
  background: rgba(var(--accent-rgb, 23, 103, 255), 0.16);
  color: var(--accent-color, #1767ff);
}
.side-video-chip svg { width: 13px; height: 13px; }
.side-video-chip--pulse::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-color, #1767ff);
  animation: sideVideoPulse 1.8s ease-out infinite;
}
@keyframes sideVideoPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 23, 103, 255), 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb, 23, 103, 255), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 23, 103, 255), 0); }
}
[data-theme="dark"] .side-video-chip {
  color: var(--accent-color, #5c98ff);
  background: rgba(var(--accent-rgb, 92, 152, 255), 0.12);
  border-color: rgba(var(--accent-rgb, 92, 152, 255), 0.25);
}
[data-theme="dark"] .side-video-chip:hover {
  background: rgba(var(--accent-rgb, 92, 152, 255), 0.2);
  color: var(--accent-color, #5c98ff);
}
[data-theme="dark"] .side-video-chip--pulse::after {
  background: var(--accent-color, #5c98ff);
}
@media (prefers-reduced-motion: reduce) {
  .side-video-chip--pulse::after { animation: none; }
}

/* ── PDF-Erfolgs-Toast (Peak-End-Moment, Auswertung) ──────────────
   Dezent unten rechts, kein Modal — fonder läuft oft im geteilten
   Bildschirm vor dem Endkunden. */
.pdf-success-toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 1080;
  max-width: 340px; padding: 14px 16px; border-radius: 14px;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, #d0d0d6);
  box-shadow: 0 8px 30px rgba(15, 42, 97, 0.18);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 0.9rem;
}
.pdf-success-toast.is-shown { opacity: 1; transform: none; }
.pdf-success-toast__head { display: flex; align-items: center; gap: 10px; }
.pdf-success-toast__check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(25, 135, 84, 0.14); color: #198754;
  animation: pdfCheckPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.pdf-success-toast__check svg { width: 14px; height: 14px; }
@keyframes pdfCheckPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pdf-success-toast__close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--nav-tool-color, #6c757d);
  padding: 0 2px;
}
.pdf-success-toast__survey { margin-top: 10px; }
.pdf-success-toast__q { margin: 0 0 8px; }
.pdf-success-toast__q a { font-weight: 600; }
.pdf-success-toast__row { display: flex; gap: 8px; }
.pdf-success-toast__btn {
  flex: 1; border: 1px solid var(--form-control-border, #d0d0d6);
  background: transparent; border-radius: 10px; padding: 5px 0;
  font-size: 1.05rem; cursor: pointer; transition: background 0.15s;
}
.pdf-success-toast__btn:hover { background: rgba(var(--accent-rgb, 23, 103, 255), 0.08); }
.pdf-success-toast__text {
  width: 100%; border: 1px solid var(--form-control-border, #d0d0d6);
  border-radius: 10px; padding: 6px 8px; font-size: 0.85rem;
  background: var(--form-control-bg, #fff); color: inherit; resize: none;
}
.pdf-success-toast__send {
  margin-top: 6px; width: 100%; border: 0; border-radius: 10px;
  padding: 6px 0; font-weight: 600; cursor: pointer;
  background: var(--accent-color, #1767ff); color: #fff;
}
[data-theme="dark"] .pdf-success-toast {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .pdf-success-toast__check {
  background: rgba(63, 185, 128, 0.18); color: #3fb980;
}
@media (prefers-reduced-motion: reduce) {
  .pdf-success-toast { transition: opacity 0.2s; transform: none; }
  .pdf-success-toast__check { animation: none; }
}

/* === ./css/core/navs.css === */
/* NAVIGATION -------------------------------------------------- */
.navbar {
  /* TEST: Header Auto-Hide. position relative -> fixed (vorher sticky)
     damit body padding-top den Header-Slot reservieren kann und der
     Content beim Slide nach oben rutscht. .header--hidden togglet via
     header_autohide.js parallel zu .header-hidden auf documentElement.
     Revert: position zurueck auf relative, top/left/right/transform
     raus, transition zurueck auf "opacity 0.3s ease, height 0.3s ease". */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0);
  width: 100%;
  z-index: 1030;
  height: var(--nav-height, 60px);
  transition: opacity 0.3s ease, height 0.3s ease, transform 250ms ease-in-out;
  opacity: 1;
  border-bottom: 1px solid var(--nav-header-border, #d0d0d6);
  box-shadow: var(--nav-header-shadow, 0 2px 16px rgba(15, 42, 97, 0.08));
}
/* TEST: Slide-Up wenn Header auto-versteckt wird.
   Revert: diesen Block entfernen. */
.navbar.header--hidden {
  transform: translateY(-100%);
}

/* TEST: Header-Offset als CSS-Variable. body padding-top konsumiert
   die Variable und transitioniert smooth wenn .header-hidden auf
   documentElement togglet — Content rutscht animiert nach oben wenn
   Header verschwindet. 4px Rest-Padding (vorher 8px, davor 16px) als
   minimaler Atemraum im Hidden-State.
   Revert: diesen Block entfernen. */
:root {
  --header-offset: var(--nav-height, 60px);
}
:root.header-hidden {
  --header-offset: 4px;
}
body {
  padding-top: var(--header-offset);
  transition: padding-top 250ms ease-in-out;
}

.navbar-dark {
  background-color: var(--nav-dark-background, rgba(0, 0, 0, 0.7)) !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link {
  color: var(--nav-dark-link-color, rgb(188, 197, 201));
}

.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: var(--nav-dark-link-hover-color, rgb(255, 255, 255));
}

.navbar.hidden {
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, height 0.3s ease, visibility 0s 0.3s;
}

.navbar-brand {
  color: var(--nav-brand-color, #ffffff);
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: lowercase;
  padding-left: 20px;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--nav-brand-hover-color, var(--nav-brand-color, #ffffff));
}

.navbar-dark .navbar-brand {
  color: var(--nav-dark-brand-color, var(--nav-brand-color, #ffffff));
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: var(
    --nav-dark-brand-hover-color,
    var(--nav-dark-brand-color, var(--nav-brand-color, #ffffff))
  );
}

.navbar-nav .nav-link {
  color: var(--nav-link-color, rgba(255, 255, 255, 0.8));
  font-weight: 500;
  padding: 15px 30px;
  font-size: 1.1rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--nav-link-hover-color, #5c98ff);
}

.navbar-nav .nav-link.active {
  color: var(--nav-link-active-color, #337eff);
}

.navbar-nav .nav-link.dropdown-toggle {
  color: var(--nav-dropdown-toggle-color, #ffffff) !important;
  font-weight: 600;
  border: none !important;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.navbar-nav .nav-link.dropdown-toggle:hover {
  color: var(--nav-dropdown-hover-color, #ffffff) !important;
  border-color: transparent !important;
}

.nav-tabs {
  justify-content: center;
  border-bottom: none;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  color: var(--nav-tabs-link-color, rgba(255, 255, 255, 0.8));
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  font-weight: 500;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--nav-tabs-link-hover-color, #337eff);
  background-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--nav-tabs-link-active-color, #5c98ff) !important;
  background-color: transparent;
  border-bottom: var(--nav-tabs-link-active-border-width, 3px) solid var(--nav-tabs-link-active-border, #5c98ff) !important;
  font-weight: var(--nav-tabs-link-active-weight, 500);
}

.nav-tabs .nav-link span[data-feather] {
  color: var(--nav-tabs-icon-color, #5c98ff);
  margin-left: 5px;
}

.nav-pills .nav-link {
  border-radius: var(--radius-md, 12px);
}

.nav-pills .nav-link.active {
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
}

.nav-tool {
  font-size: var(--nav-tool-font-size, 15px);
  color: var(--nav-tool-color, rgb(255, 255, 255));
  transition: font-size 0.3s ease, color 0.3s ease;
}

.nav-tool:hover {
  font-size: var(--nav-tool-hover-font-size, var(--nav-tool-font-size, 15px));
  color: var(--nav-tool-hover-color, rgb(92, 152, 255));
}

.nav-tool .active a {
  color: var(--nav-tool-active-color, rgb(15, 76, 154));
}

.bg-dark-bottom {
  background: var(--nav-bottom-background, rgba(0, 0, 0, 0.7));
  width: 100%;
  margin-inline: auto;
  padding: var(--nav-bottom-padding, 0.5rem 0.75rem);
  border-top: var(--nav-bottom-border-width, 1px) solid var(--nav-bottom-border, rgba(255, 255, 255, 0.08));
}

.nav-bottom {
  color: var(--nav-bottom-color, rgb(188, 197, 201));
}

.nav-bottom:hover {
  color: var(--nav-bottom-hover-color, rgb(255, 255, 255));
}

.nav-wiki {
  position: sticky;
  top: var(--nav-height, 60px);
  z-index: 1020;
  max-height: calc(100vh - var(--nav-height, 60px));
  overflow-y: auto;
  background-color: var(--nav-sidebar-background, #ffffff);
  border-right: 1px solid var(--nav-sidebar-border, rgba(0, 0, 0, 0.1));
}

.nav-wiki .nav-link {
  padding: 0.5rem 1rem;
  z-index: 1030;
  color: var(--nav-sidebar-link-color, inherit);
}

.nav-wiki .nav-link:hover,
.nav-wiki .nav-link.active {
  background-color: var(--nav-sidebar-hover-bg, rgba(92, 152, 255, 0.2));
  color: var(--nav-sidebar-hover-color, #007bff);
  text-decoration: none;
}

.sticky-top {
  top: var(--nav-height, 60px);
  z-index: 1020;
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-height, 60px));
}

@media (max-width: 992px) {
  .sticky-top {
    position: relative;
    top: auto;
  }
}

@media (max-width: 991.98px) {
  .navbar.navbar-dark .navbar-collapse {
    background: var(--nav-mobile-background, rgba(15, 23, 42, 0.82));
    backdrop-filter: blur(var(--nav-mobile-blur, 14px));
    -webkit-backdrop-filter: blur(var(--nav-mobile-blur, 14px));
    border-radius: var(--nav-mobile-radius, 16px);
    padding: var(--nav-mobile-padding, 1rem);
    margin-top: var(--nav-mobile-gap, 0.75rem);
    box-shadow: var(
      --nav-mobile-shadow,
      0 20px 45px rgba(15, 23, 42, 0.25)
    );
  }

  .navbar.navbar-dark .navbar-collapse .nav-link {
    color: var(--nav-mobile-link-color, #f8fafc);
  }

  .navbar.navbar-dark .navbar-collapse .nav-link:hover {
    color: var(--nav-mobile-link-hover-color, #93c5fd);
  }
}

/* Anlagefinder-Sidebar Toggle-Pills (Fondspolice / Ruerup-Rente):
   an die Form-Controls daneben angeglichen (Hoehe via Padding+Border, weisse Flaeche
   inaktiv, solid Royal-Blau aktiv, kein Glow). Scope auf .bg-left-col, damit die
   anderen .nav-pills-Verwendungen (Plots, Wiki, Anbietervergleich, ...) unberuehrt bleiben. */
.bg-left-col .nav-pills {
  gap: var(--sidebar-element-gap, 16px);
}

.bg-left-col .nav-pills .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sidebar-element-height, 45px);
  padding: var(--form-control-padding, 10px);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  box-shadow: none;
}

.bg-left-col .nav-pills .nav-link:hover {
  /* Hover-Glow: nur aeusserer Halo. Innen bleibt weiss (Default).
     Active-Pill unberuehrt — .nav-link.active:hover hat hoehere
     Specificity (0,5,0 vs 0,4,0). */
  color: var(--form-control-color, inherit);
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  box-shadow: var(--hover-glow-shadow);
}

.bg-left-col .nav-pills .nav-link.active,
.bg-left-col .nav-pills .nav-link.active:hover,
.bg-left-col .nav-pills .nav-link.active:focus {
  background: var(--sidebar-pill-active-bg, rgb(13, 110, 253));
  color: var(--sidebar-pill-active-color, #ffffff);
  border-color: var(--sidebar-pill-active-bg, rgb(13, 110, 253));
  box-shadow: none;
}

.bg-left-col .nav-pills .nav-link:focus,
.bg-left-col .nav-pills .nav-link:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------------
   Responsive Labels fuer #main_side_tabs (beratung.html Top-Tabs)
   - Default (ab >=1200px): volles Label sichtbar, Kurz-Label versteckt
   - <1200px: Kurz-Label statt vollem Label
   Ohne diese Regeln rendern beide spans nebeneinander -> doppelte Namen.
   ---------------------------------------------------------------------- */
#main_side_tabs .nav-label-short {
  display: none;
}
@media (max-width: 1199.98px) {
  #main_side_tabs .nav-label-full {
    display: none;
  }
  #main_side_tabs .nav-label-short {
    display: inline;
  }
}

/* ----------------------------------------------------------------------
   ... und dasselbe nach dem PLATZ, den die Leiste wirklich hat.
   Die Fensterbreite ist der falsche Massstab: Bei 1440 ist die Spalte
   col-xxl-7 nur 786 px breit, die fuenf vollen Labels brauchen 904 px —
   die Leiste stand schon ohne Assistenten zweireihig da. Mit offenem
   Panel bleiben ihr 529 px (alles gemessen 10.08., 1440x900).
   Deshalb: Container-Query auf die Spalte statt Media-Query aufs Fenster.
   Schwellen mit den BREITEREN Dark-Mode-Massen (--nav-tool-font-size ist
   14 px light, 15 px dark, das sind 5 % Unterschied):
   980 px = 948 volle Labels (dark) + Luft. Darunter die Kurzlabels (665 px),
   und wenn auch die nicht reichen, fallen Icons und ein Teil des
   Innenabstands weg (455 px) — eine Reihe ist mehr wert als das Icon.
   ---------------------------------------------------------------------- */
.main-side-tabs-wrap {
  container: schrittleiste / inline-size;
}
@container schrittleiste (max-width: 980px) {
  #main_side_tabs .nav-label-full {
    display: none;
  }
  #main_side_tabs .nav-label-short {
    display: inline;
  }
}
@container schrittleiste (max-width: 700px) {
  #main_side_tabs .nav-link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  #main_side_tabs .nav-link svg {
    display: none;
  }
}
/* Engster Fall: 1440 mit offenem Panel im Dark Mode. Dort bleiben der Leiste
   444 px, die fuenf Kurzlabels brauchen 455 — elf Pixel, die eine zweite Reihe
   ausloesen. Noch schmalere Innenabstaende sparen 32 px und halten sie einreihig. */
@container schrittleiste (max-width: 480px) {
  #main_side_tabs .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

/* TEST: durchgehende graue Linie unter Sub-Tabs, Revert: diesen Block entfernen */
.sub-card .nav-tabs {
  border-bottom: 1px solid var(--form-control-border, rgba(15, 42, 97, 0.24));
}

/* TEST: Active-Sub-Tab-Color hartcodet auf Blau, umgeht Accent-Engine.
   Revert: diesen Block entfernen. */
.sub-card .nav-tabs .nav-link.active {
  color: var(--accent-color, rgb(13, 110, 253)) !important;
  border-bottom-color: var(--accent-color, rgb(13, 110, 253)) !important;
}

/* TEST: Step-Indikator + Tabs schlank — nur Farbe ändert auf active/hover,
   keine Geometrie. Revert: diesen Block entfernen. */
.nav-tabs .nav-link {
  font-weight: 500 !important;
}

/* TEST: Step-Indikator Active-Border auf width:0 statt nur transparent —
   verhindert Y-Sprung beim Tab-Wechsel, behält Y=40 Baseline für
   .profile-status-line-Kalibrierung. Sub-Tabs unberührt (Scope greift nicht).
   Revert: diesen Block entfernen. */
#main_side_tabs.nav-tabs .nav-link.active {
  border-bottom-width: 0 !important;
}

/* TEST: Step-Indikator Hover/Focus blau (gleiche Farbe wie active). */
#main_side_tabs.nav-tabs .nav-link:hover,
#main_side_tabs.nav-tabs .nav-link:focus {
  color: var(--accent-color, rgb(13, 110, 253)) !important;
}

/* TEST: Sub-Tabs Hover/Focus blau (gleiche Farbe wie active). */
.sub-card .nav-tabs .nav-link:hover,
.sub-card .nav-tabs .nav-link:focus {
  color: var(--accent-color, rgb(13, 110, 253)) !important;
}

/* TEST: Sub-Tabs zentriert (vorher flex-start). Trifft alle .nav-tabs in
   .sub-card-Wrappers — Bedarfsermittlung, Anlagefinder-Fondspolice,
   Anbietervergleich (Fondspolice + Rürup) und die Kosten-Sub-Tabs
   (#costTabs) im Charts-Bereich. Step-Indikator-Top-Nav + Admin + Rürup-
   Anlagefinder + Mediathek sind nicht in .sub-card, bleiben über das
   globale .nav-tabs { justify-content: center } unverändert (waren ohnehin
   zentriert). Revert: justify-content: flex-start. */
.sub-card .nav-tabs {
  justify-content: center;
}

/* TEST: Header-Reveal-Hint — kleiner Chevron-Tab am oberen Rand,
   sichtbar nur wenn .header-hidden auf :root gesetzt ist.
   Synchronisiert mit der Header-Animation (250ms).
   z-index 1029 < .navbar (1030) → Hint sitzt visuell unter der
   ausgeblendeten Navbar-Edge, niemals darueber.
   Revert: diesen Block entfernen. */
/* TEST: Reveal-Hint nach rechts verschoben (left:82%) — Button-Mittelpunkt
   sitzt damit bei 82% Viewport-Breite, zwischen Auswertung und Reset in der
   Topbar. translateX(-50%) bleibt unveraendert (zentriert den Button um die
   left-Linie unabhaengig von deren Position).
   Revert: zurueck auf left:50%. */
#headerRevealHint {
  position: fixed;
  top: 0;
  left: 82%;
  transform: translateX(-50%) translateY(-100%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 16px;
  padding: 0;
  background: var(--bs-secondary-color, #6c757d);
  color: #ffffff;
  border: 0;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 1029;
  transition: opacity 200ms ease, transform 250ms ease-in-out,
              visibility 0s linear 200ms;
}
:root.header-hidden #headerRevealHint {
  opacity: 0.55;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms ease, transform 250ms ease-in-out,
              visibility 0s;
}
:root.header-hidden #headerRevealHint:hover,
:root.header-hidden #headerRevealHint:focus-visible {
  opacity: 1;
  outline: none;
}
#headerRevealHint svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* === ./css/core/buttons.css === */
/* BUTTONS -------------------------------------------------- */
.btn:not(.btn-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-shared-gap, 0.45rem);
  padding: var(--btn-shared-padding, 0.65rem 1.25rem);
  border-radius: var(--btn-shared-radius, 12px);
  font-weight: var(--btn-shared-weight, 600);
  font-size: var(--btn-shared-font-size, 0.95rem);
  letter-spacing: var(--btn-shared-letter-spacing, 0.01em);
  line-height: 1.05;
  border-width: var(--btn-border-width, 1px);
  border-style: solid;
  border-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  box-shadow: var(--btn-shadow, none);
}

.btn:not(.btn-link):focus-visible {
  outline: none;
  box-shadow: var(--btn-focus-ring, 0 0 0 3px rgba(92, 152, 255, 0.35));
}

.btn:not(.btn-link):active {
  transform: translateY(var(--btn-active-translate, 0px));
}

.btn.btn-sm:not(.btn-link) {
  padding: var(--btn-sm-padding, 0.45rem 0.9rem);
  font-size: var(--btn-sm-font-size, 0.85rem);
}

.btn.btn-lg:not(.btn-link) {
  padding: var(--btn-lg-padding, 0.9rem 1.6rem);
  font-size: var(--btn-lg-font-size, 1.05rem);
}

.btn i,
.btn svg {
  height: var(--btn-icon-size, 1.05em);
  width: var(--btn-icon-size, 1.05em);
}

.btn-custom {
  position: relative;
  display: inline-block;
  padding: var(--btn-shared-padding, 0.65rem 1.25rem);
  margin-block: var(--btn-custom-margin-block, 0.25rem);
  margin-inline: var(--btn-custom-margin-inline, 0);
  background: var(--btn-custom-bg, transparent);
  border: 1px solid var(--btn-custom-border, rgb(200, 200, 205));
  border-radius: var(--btn-shared-radius, 12px);
  font-weight: var(--btn-shared-weight, 600);
  font-size: var(--btn-shared-font-size, 0.95rem);
  overflow: hidden;
  backdrop-filter: blur(5px);
  box-shadow: var(--btn-outline-secondary-shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
  color: var(--btn-custom-color, rgb(200, 200, 205));
}

.btn-custom:hover {
  border-color: var(--btn-custom-hover-border, rgb(255, 255, 255));
  background-color: var(--btn-custom-hover-bg, rgb(200, 200, 200));
  color: var(--btn-custom-hover-color, rgb(0, 0, 0));
}

/* fonder Upgrade Button */
.btn-fonder-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--btn-shared-radius);
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-decoration: none;
}
.btn-fonder-upgrade:hover,
.btn-fonder-upgrade:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.5);
  filter: brightness(1.08);
  text-decoration: none;
}
.btn-fonder-upgrade:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .btn-fonder-upgrade {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}
[data-theme="dark"] .btn-fonder-upgrade:hover,
[data-theme="dark"] .btn-fonder-upgrade:focus {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.55);
}

/* Profile dirty dot indicator */
.profile-dirty-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: profile-dirty-pulse 2s ease-in-out infinite;
}
@keyframes profile-dirty-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.profile-btn-main {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  /* font-size 0.8 → 0.825rem (2026-05-13): visuelle Konsistenz mit den
     Settings-Buttons im Anlage-Picker (Soll-Stil). Font-Weight ist
     überall 400 — der wahrgenommene "Fett"-Eindruck kam von font-size,
     nicht von font-weight. Geometrie (Höhe/Padding) bleibt unverändert,
     da +3 % Schriftgröße im min-height: 45px puffert. */
  font-size: 0.825rem !important;
  color: #000 !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.profile-btn-main:hover,
.profile-btn-main:focus {
  color: #000 !important;
}
[data-theme="dark"] .profile-btn-main,
[data-theme="dark"] .profile-btn-main:hover,
[data-theme="dark"] .profile-btn-main:focus {
  color: #fff !important;
}
.reset-btn-main {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
  /* TEST: font-size auf Step-Tab-Token gehoben (--nav-tool-font-size:
     14px light / 15px dark). Vorher: 0.825rem. font-weight: 500
     matched Step-Tab inactive. Revert: font-size zurueck auf 0.825rem,
     font-weight-Zeile entfernen. */
  font-size: var(--nav-tool-font-size, 15px) !important;
  font-weight: 500 !important;
  width: min-content;
  padding-inline: 0.3rem;
}
/* .reset-btn-main.profile-active (frueher: flex-direction: column / gap: 0)
   entfernt 2026-05-14. Der kompakte Spaltenmodus war ein Platzkompromiss
   neben dem alten Topbar-Profil-Button. Nach dessen Wegfall ist
   "Reset [Icon]" einzeilig die einzig sinnvolle Darstellung — die Klasse
   bleibt vorerst JS-seitig erhalten, hat aber keinen Effekt mehr. */
.profile-btn-line1,
.profile-btn-line2 {
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
}
.profile-btn-line1 svg,
.profile-btn-line2 svg {
  display: block;
  flex-shrink: 0;
}
.profile-btn-line2 {
  opacity: 0.85;
}
.profile-btn-main.is-dirty,
.profile-btn-main.is-dirty:hover,
.profile-btn-main.is-dirty:focus {
  background-color: #f59e0b !important;
  color: #000 !important;
  border-color: #f59e0b !important;
}
[data-theme="dark"] .profile-btn-main.is-dirty,
[data-theme="dark"] .profile-btn-main.is-dirty:hover,
[data-theme="dark"] .profile-btn-main.is-dirty:focus {
  color: #fff !important;
}
.profile-btn-main.is-saved,
.profile-btn-main.is-saved:hover,
.profile-btn-main.is-saved:focus {
  background-color: #22c55e !important;
  color: #000 !important;
  border-color: #22c55e !important;
}
[data-theme="dark"] .profile-btn-main.is-saved,
[data-theme="dark"] .profile-btn-main.is-saved:hover,
[data-theme="dark"] .profile-btn-main.is-saved:focus {
  color: #fff !important;
}

.profile-overwrite-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: var(--btn-shared-radius);
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.profile-overwrite-btn:hover {
  background: #d97706;
  color: #fff;
}

.btn-secondary {
  background: var(--btn-secondary-bg, linear-gradient(135deg, rgba(92, 152, 255, 0.2), rgba(51, 126, 255, 0.3)));
  color: var(--btn-secondary-color, rgba(255, 255, 255, 0.9));
  border: none;
  padding: var(--btn-shared-padding, 0.65rem 1.25rem);
  border-radius: var(--btn-shared-radius, 12px);
  font-weight: var(--btn-shared-weight, 600);
  font-size: var(--btn-secondary-font-size, 1rem);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--btn-secondary-before-bg, radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%));
  transition: transform 0.5s ease, opacity 0.4s ease;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: var(--btn-secondary-before-opacity, 0.6);
  pointer-events: none;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--btn-secondary-hover-bg, linear-gradient(135deg, rgba(51, 126, 255, 0.3), rgba(92, 152, 255, 0.4)));
  color: var(--btn-secondary-hover-color, #ffffff);
  box-shadow: var(--btn-secondary-hover-shadow, 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(92, 152, 255, 0.5));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-secondary:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: var(--btn-secondary-before-hover-opacity, 0.8);
}

.btn-secondary:active {
  background: var(--btn-secondary-active-bg, linear-gradient(135deg, rgba(29, 99, 204, 0.4), rgba(43, 108, 230, 0.5)));
  box-shadow: var(--btn-secondary-active-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
  transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-light {
  padding: var(--btn-outline-padding, var(--btn-shared-padding, 0.65rem 1.25rem));
  border-radius: var(--btn-shared-radius, 12px);
  font-weight: var(--btn-shared-weight, 600);
  transition: all 0.35s ease;
  border-width: var(--btn-outline-border-width, 2px);
  border-style: solid;
  backdrop-filter: var(--btn-outline-backdrop, blur(6px));
  box-shadow: var(--btn-outline-shadow, 0 6px 16px rgba(0, 0, 0, 0.18));
}

.btn-outline-primary {
  color: var(--btn-outline-primary-color, inherit);
  border-color: var(--btn-outline-primary-border, currentColor);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--btn-outline-primary-hover-color, #ffffff);
  background: var(--btn-outline-primary-hover-bg, #5c98ff);
  box-shadow: var(--btn-outline-primary-hover-shadow, 0 6px 18px rgba(92, 152, 255, 0.5));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-success {
  color: var(--btn-outline-success-color, inherit);
  border-color: var(--btn-outline-success-border, currentColor);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--btn-outline-success-hover-color, #ffffff);
  background: var(--btn-outline-success-hover-bg, #28a745);
  box-shadow: var(--btn-outline-success-hover-shadow, 0 6px 18px rgba(40, 167, 69, 0.5));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-warning {
  color: var(--btn-outline-warning-color, #ffc107) !important;
  border-color: var(--btn-outline-warning-border, #ffc107) !important;
  background: transparent !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--btn-outline-warning-hover-color, #000000) !important;
  background: var(--btn-outline-warning-hover-bg, #ffc107) !important;
  box-shadow: var(--btn-outline-warning-hover-shadow, 0 6px 18px rgba(255, 193, 7, 0.35));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-warning:focus-visible {
  outline: none;
  box-shadow: var(--btn-outline-warning-focus-shadow, 0 0 0 0.2rem rgba(255, 193, 7, 0.35));
}

.btn-outline-danger {
  color: var(--btn-outline-danger-color, #dc3545);
  border-color: var(--btn-outline-danger-border, #dc3545);
  background: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: var(--btn-outline-danger-hover-color, #ffffff);
  background: var(--btn-outline-danger-hover-bg, #dc3545);
  box-shadow: var(--btn-outline-danger-hover-shadow, 0 6px 18px rgba(220, 53, 69, 0.45));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-danger:focus-visible {
  outline: none;
  box-shadow: var(--btn-outline-danger-focus-shadow, 0 0 0 0.2rem rgba(220, 53, 69, 0.35));
}

.btn-outline-info {
  color: var(--btn-outline-info-color, #0dcaf0);
  border-color: var(--btn-outline-info-border, #0dcaf0);
  background: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  color: var(--btn-outline-info-hover-color, #052c65);
  background: var(--btn-outline-info-hover-bg, #0dcaf0);
  box-shadow: var(--btn-outline-info-hover-shadow, 0 6px 18px rgba(13, 202, 240, 0.35));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-info:focus-visible {
  outline: none;
  box-shadow: var(--btn-outline-info-focus-shadow, 0 0 0 0.2rem rgba(13, 202, 240, 0.35));
}

.btn-outline-light {
  color: var(--btn-outline-light-color, rgba(255, 255, 255, 0.92));
  border-color: var(--btn-outline-light-border, rgba(255, 255, 255, 0.5));
  background: transparent;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--btn-outline-light-hover-color, #0b1f44);
  background: var(--btn-outline-light-hover-bg, rgba(255, 255, 255, 0.9));
  box-shadow: var(--btn-outline-light-hover-shadow, 0 6px 18px rgba(255, 255, 255, 0.4));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-outline-light:focus-visible {
  outline: none;
  box-shadow: var(--btn-outline-light-focus-shadow, 0 0 0 0.2rem rgba(255, 255, 255, 0.35));
}

.btn-outline-secondary,
.btn-outline-secondary:focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-shared-gap, 0.45rem);
  padding: var(--btn-outline-secondary-padding, var(--btn-shared-padding, 0.65rem 1.25rem));
  color: var(--btn-outline-secondary-color, rgba(255, 255, 255, 0.9));
  background: var(--btn-outline-secondary-bg, rgba(92, 152, 255, 0.12));
  border: var(--btn-outline-secondary-border-width, 2px) solid var(--btn-outline-secondary-border, rgba(92, 152, 255, 0.4));
  border-radius: var(--btn-shared-radius, 12px);
  font-weight: var(--btn-outline-secondary-font-weight, 600);
  font-size: var(--btn-outline-secondary-font-size, 1rem);
  letter-spacing: var(--btn-shared-letter-spacing, 0.01em);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  backdrop-filter: var(--btn-outline-secondary-backdrop, blur(8px));
  box-shadow: var(--btn-outline-secondary-shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
}

.btn-outline-secondary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--btn-outline-secondary-before-bg, radial-gradient(circle, rgba(92, 152, 255, 0.15), rgba(92, 152, 255, 0) 70%));
  opacity: var(--btn-outline-secondary-before-opacity, 0.4);
  transition: transform 0.5s ease, opacity 0.4s ease;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  border-radius: 50%;
}

.btn-outline-secondary:hover {
  color: var(--btn-outline-secondary-hover-color, #ffffff);
  background: var(--btn-outline-secondary-hover-bg, linear-gradient(135deg, rgba(92, 152, 255, 0.5), rgba(51, 126, 255, 0.6)));
  border-color: var(--btn-outline-secondary-hover-border, rgba(255, 255, 255, 0.4));
  box-shadow: var(--btn-outline-secondary-hover-shadow, 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(92, 152, 255, 0.6));
  transform: translateY(var(--btn-hover-translate, -3px));
  backdrop-filter: var(--btn-outline-secondary-hover-backdrop, blur(12px));
}

.btn-outline-secondary:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: var(--btn-outline-secondary-before-hover-opacity, 0.6);
}

.btn-outline-secondary:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--btn-primary-bg, linear-gradient(45deg, #5c98ff, #337eff));
  border: var(--btn-border-width, 1px) solid var(--btn-primary-border, transparent);
  color: var(--btn-primary-color, #ffffff);
  box-shadow: var(--btn-primary-shadow, 0 16px 32px -18px rgba(51, 126, 255, 0.65));
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--btn-primary-hover-bg, linear-gradient(45deg, #337eff, #5c98ff));
  box-shadow: var(--btn-primary-hover-shadow, 0 20px 40px -20px rgba(51, 126, 255, 0.7));
  transform: translateY(var(--btn-hover-translate, -3px));
}

.btn-primary:active {
  transform: translateY(0);
}

/* Sidebar-Sekundaer-Button (Anlagefinder Sidebar, "Depot/Erweiterte Einstellungen"):
   etwas dunklerer Grau-Tier als der Sidebar-Hintergrund, Hoehe matched .form-control,
   Border konsistent mit allen anderen Sidebar-Elementen (1px solid --form-control-border). */
.btn.btn-sidebar-secondary {
  /* display: flex (block-level statt Bootstrap-Default inline-flex) — sonst kein
     margin-collapse zwischen zwei aufeinanderfolgenden Buttons (Inline-Level-Boxen
     kollabieren nicht), was zu doppeltem Vertikalabstand fuehren wuerde. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-sidebar-secondary-bg, #e8ebf2);
  color: var(--btn-sidebar-secondary-color, #0b1f44);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  padding: var(--form-control-padding, 10px);
  min-height: var(--sidebar-element-height, 45px);
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
}

.btn.btn-sidebar-secondary:hover,
.btn.btn-sidebar-secondary:focus {
  /* Hover-Glow: nur aeusserer Halo via box-shadow. Innerer Background bleibt
     am Default (--btn-sidebar-secondary-bg = surface-soft-grau). */
  color: var(--btn-sidebar-secondary-color, #0b1f44);
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  box-shadow: var(--hover-glow-shadow);
  transform: none;
}

/* Topbar-Toggle: 1:1-Match zum Toggle-Pill-Inaktiv-Stil aus der Sidebar
   (.bg-left-col .nav-pills .nav-link). Genutzt fuer "Profil" und "Reset" oben
   rechts in beratung.html, damit sie optisch zur Toggle-Reihe in der Sidebar
   passen statt wie blau-getoente btn-custom-Buttons zu wirken. */
.btn.btn-topbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  padding: var(--form-control-padding, 10px);
  min-height: var(--sidebar-element-height, 45px);
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  box-shadow: none;
}

.btn.btn-topbar-toggle:hover,
.btn.btn-topbar-toggle:focus,
.btn.btn-topbar-toggle:focus-visible {
  /* Hover-Glow: nur aeusserer 3px-Halo via box-shadow. Innerer Background
     bleibt am Default (weiss) — kein bg-tint mehr im Hover.
     :focus-visible explizit gelistet, damit der bs-blaue --btn-focus-ring
     (.btn:not(.btn-link):focus-visible) nicht durchschlaegt. */
  color: var(--form-control-color, inherit);
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  box-shadow: var(--hover-glow-shadow);
  transform: none;
}

/* Topbar-Buttons in beratung.html (Profil + Reset): Override fuer mehr
   horizontalen Padding und sichtbaren Hover-Halo. Scoped auf Profile/Reset —
   kein Cross-Impact auf andere btn-topbar-toggle-Verwendungen (Neuen-Tarif-
   Buttons in anlagefinder.html / choose_*.html bleiben unveraendert).
   overflow: visible nötig, weil .btn-custom (das immer noch dranhängt)
   overflow: hidden setzt — das clippt sonst den --hover-glow-shadow-Halo. */
.profile-btn-main.btn-topbar-toggle,
.reset-btn-main.btn-topbar-toggle {
  padding: 0.6rem 1.4rem;
  overflow: visible;
  /* gleiche Mindestbreite — orientiert an Reset-Naturbreite (~7.34rem),
     leicht überdimensioniert für Puffer. Wenn Profil-Inhalt waechst
     (line2 via aktivem Profil), waechst der Button natuerlich darueber. */
  min-width: 7.5rem;
}

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  KOMPONENTEN-BAUKASTEN: HAUPTBUTTON  (.btn-main)                   ║
   ║  ──────────────────────────────────────────────────────────────    ║
   ║  Erste dokumentierte Skin-Klasse des Fonder-Komponenten-Baukastens.║
   ║                                                                    ║
   ║  Zweck                                                             ║
   ║  ─────                                                             ║
   ║  Visuelle Vereinheitlichung der "Hauptbutton"-Optik: weißer        ║
   ║  Hintergrund, dezente Border, blauer Hover-State (1:1 zum aktiven  ║
   ║  Tab "Ablaufleistung", siehe --nav-pills-active-bg).               ║
   ║                                                                    ║
   ║  Verwendung                                                        ║
   ║  ──────────                                                        ║
   ║  An jeden Button, der wie Profil / Reset / Erweiterte Einstellungen║
   ║  / Anlage-Picker-Settings aussehen soll. Klasse zusätzlich zu den  ║
   ║  bestehenden Klassen am Element setzen — Geometrie (Höhe, Padding, ║
   ║  Breite, Display) bleibt Verantwortung des Konsumenten.            ║
   ║                                                                    ║
   ║  Was .btn-main setzt (SKIN)                                        ║
   ║  ───────────────────────────                                       ║
   ║  • Background, Color, Border, Border-Radius                        ║
   ║  • Font-Size 0.825rem, Font-Weight 400                             ║
   ║  • Gap 0.3em (relevant für row-flex; Profil-column-Layout ignoriert║
   ║    es semantisch ohne visuelle Wirkung)                            ║
   ║  • Box-Shadow none                                                 ║
   ║  • Transition 150ms ease (background, color, border-color, shadow) ║
   ║  • Hover/Focus: Background --nav-pills-active-bg, Color #ffffff,   ║
   ║    Border transparent, kein Glow, kein Transform                   ║
   ║                                                                    ║
   ║  Was .btn-main NICHT setzt (GEOMETRIE — Konsumenten-Sache)         ║
   ║  ──────────────────────────────────────────────────────────         ║
   ║  • min-height / height                                             ║
   ║  • Padding                                                         ║
   ║  • Width / min-width                                               ║
   ║  • Display, Flex-Direction, Align-/Justify-Content                 ║
   ║                                                                    ║
   ║  Status-Overrides (z.B. .profile-btn-main.is-dirty / .is-saved)    ║
   ║  haben mit !important höhere Priorität als .btn-main:hover und     ║
   ║  bleiben weiterhin wirksam.                                        ║
   ╚════════════════════════════════════════════════════════════════════╝ */
.btn-main {
  background: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  font-size: 0.825rem;
  font-weight: 400;
  gap: 0.3em;
  box-shadow: none;
  transition: background-color 150ms ease, background 150ms ease,
              color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* Hover-Konkurrenten (siehe Historie der Selektor-Liste, jetzt konsolidiert):
   1. .btn.btn-topbar-toggle:hover (grauer Halo) — durch Source-Order
      geschlagen (.btn-main definiert weiter unten in derselben Datei).
   2. .btn-custom:hover (rgb(200,200,200)-bg) — Specificity (0,2,0) > (0,1,0)
      würde gewinnen, aber background !important schlägt durch.
   3. .btn:not(.btn-link):focus-visible (bs-blauer Fokus-Ring) — durch
      :focus-visible-Listing in derselben Regel geschlagen.
   4. Bootstrap-Utility .shadow-none { box-shadow:none !important } — die
      Profil/Reset/Experten-Buttons tragen die Klasse im Markup. Daher
      background !important + box-shadow !important.
   5. .profile-btn-main:hover { color: #000 !important } (Alt-Regel,
      Z.~138) — wird durch color: #ffffff !important geschlagen
      (gleicher !important-Status, gleiche Specificity 0,2,0 = 0,2,0
      → source-order entscheidet, .btn-main:hover ist später).
      Im Save-Icon wirkt der Color-Wechsel über stroke="currentColor". */
.btn-main:hover,
.btn-main:focus,
.btn-main:focus-visible {
  background: var(--nav-pills-active-bg, rgb(15, 76, 154)) !important;
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none;
}

/* Float-Halo + Schrift-Match am Erweiterte-Einstellungen-Button
   (dep_fon_input.html). Der Button sitzt direkt auf App-BG in der Sidebar
   → Float-berechtigt.

   Compound-Selector .btn.experten-einstellungen-btn (Specificity 0,2,0):
   - schlaegt .btn.btn-topbar-toggle (0,2,0, weiter oben in dieser Datei)
     via Source-Order — beide Klassen sitzen am Experten-Button, und
     .btn-topbar-toggle setzt sowohl box-shadow: none als auch
     font-size: inherit. Ohne den Compound-Selector blieben beide Werte
     aktiv (Float weg, Schrift = body-1rem statt 0.825rem aus .btn-main).
   - font-size 0.825rem matched .btn-main = die Settings-Buttons oben
     (.anlage-picker__settings-btn) erben das ohnehin aus .btn-main, weil
     dort kein .btn-topbar-toggle dranhaengt.

   Auf Hover/Focus uebernimmt .btn-main:hover (box-shadow: none !important)
   und der Float verschwindet bewusst zugunsten des blauen Hover-Fills. */
.btn.experten-einstellungen-btn {
  box-shadow: var(--surface-shadow-soft);
  font-size: 0.825rem;
}

/* Rürup-Sidebar: Der "Erweiterte Einstellungen"-Button hat — anders als die
   Eingabefelder darueber — KEIN Label ueber sich. Die Felder sind per <br/>
   getrennt, deren Box-zu-Box-Abstand aber = <br/>-Zeile (~22,9px) + Label-Slot
   des Folgefelds (~22,9px) = gemessen 45,84px (= 2,865rem @ 16px-Root).
   Damit der Button im SELBEN Box-Rhythmus sitzt, deterministischer Top-Abstand
   (statt nur <br/>, das nur die halbe Distanz liefert). */
.erweiterte-einstellungen-spacing {
  margin-top: 2.865rem;
}

/* TEST: Reset visuell zu Tab-Schriftzug strippen, Revert: diesen Block entfernen */
.reset-btn-main,
.reset-btn-main:hover,
.reset-btn-main:focus,
.reset-btn-main:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  /* TEST: Reset-Idle-Color auf Profil-Status-Label-Farbe angleichen.
     Hover-Color (Blau) bleibt via Folgeblock unveraendert (gleicher
     Specificity-Tie, Source-Order entscheidet -> Blau gewinnt). */
  color: var(--bs-secondary-color, #6c757d) !important;
  /* TEST: Reset-Text auf Tab-Text-Baseline angleichen — overrides
     .btn.btn-topbar-toggle { align-items: center } das den Text in der
     45px-min-height-Box vertikal mittig setzt (~2.5px höher als Tabs). */
  align-items: flex-end !important;
}
.reset-btn-main:hover,
.reset-btn-main:focus,
.reset-btn-main:focus-visible {
  color: var(--accent-color, rgb(13, 110, 253)) !important;
}

/* TEST: Reset Text + Icon auf gleiche Y bringen. Die .profile-btn-line1-
   Wrapper sind separate Flex-Container mit unterschiedlichen Höhen
   (21px Text-Line vs 14px SVG). Mit align-items: flex-end auf Button-Ebene
   liegen die Visual-Centers darum auf unterschiedlicher Y. Fix: beide
   Wrapper auf 1em-Höhe pinnen — Text + Icon Center fallen zusammen.
   Revert: diesen Block entfernen. */
.reset-btn-main .profile-btn-line1 {
  height: 1em !important;
  line-height: 1 !important;
}

/* TEST: Skin-Baukasten für semantische Action-Buttons.
   Pattern: Outline-idle, Fill-hover (wie .btn-delete-profile).
   Tailwind-Familie 500/400 für Light/Dark.
   Selektoren auf .btn.btn-* Compound-Pattern für Specificity-Tie
   mit .btn:not(.btn-link)-Reset (Spec 0,2,0).
   font-weight: 400 explizit, überschreibt Reset's 600.
   Bestehende .btn-load-profile / .btn-delete-profile bleiben
   unangetastet — Migration in separater Etappe.
   Revert: diesen ganzen Block entfernen. */
.btn.btn-success,
.btn.btn-danger,
.btn.btn-caution,
.btn.btn-info {
  background: var(--form-control-bg, #ffffff);
  border-radius: var(--radius-md, 12px);
  box-shadow: none;
  font-weight: 400;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* TEST: Idle auf neutralen grauen Look wie .btn-edit-profile-card.
   Hover bleibt semantisch (grün Fill).
   Revert: border 1px solid rgba(34, 197, 94, 0.55); color #22c55e; */
.btn.btn-success {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  color: var(--bs-secondary-color, #6c757d);
}
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:focus-visible {
  background: #22c55e !important;
  border-color: #22c55e;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* TEST: Idle auf neutralen grauen Look wie .btn-edit-profile-card.
   Hover bleibt semantisch (rot Fill).
   Revert: border 1px solid rgba(220, 53, 69, 0.55); color #dc3545; */
.btn.btn-danger {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  color: var(--bs-secondary-color, #6c757d);
}
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:focus-visible {
  background: #dc3545 !important;
  border-color: #dc3545;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* TEST: Idle auf neutralen grauen Look wie .btn-edit-profile-card.
   Hover bleibt semantisch (orange Fill).
   Revert: border 1px solid rgba(245, 158, 11, 0.55); color #f59e0b; */
.btn.btn-caution {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  color: var(--bs-secondary-color, #6c757d);
}
.btn.btn-caution:hover,
.btn.btn-caution:focus,
.btn.btn-caution:focus-visible {
  background: #f59e0b !important;
  border-color: #f59e0b;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* TEST: Neue .btn-info-Skin im Pattern der 4er-Skin-Familie. Idle neutral
   grau (matches .btn-cancel/-success/-danger/-caution), Hover Royal-Blau
   via --nav-pills-active-bg — derselbe Token wie .btn-main:hover und
   .main-side-icon, sodass das Projekt-Blau konsistent ueberall denselben
   Ton hat. Aktuell genutzt vom "Bearbeiten"-Button im #profileModal,
   global verfuegbar fuer spaetere Anlagefinder-Migration.
   Revert: diese drei Bloecke (Idle, Hover, Dark) entfernen. */
.btn.btn-info {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  color: var(--bs-secondary-color, #6c757d);
}
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:focus-visible {
  background: var(--nav-pills-active-bg, rgb(15, 76, 154)) !important;
  border-color: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* TEST: Dark-Mode-Idle ebenfalls auf neutral grau.
   Hover-Fills bleiben semantisch (Tailwind-400 für Dark).
   Revert: border-color rgba(74,222,128,0.5); color #4ade80; */
[data-theme="dark"] .btn.btn-success {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}
[data-theme="dark"] .btn.btn-success:hover,
[data-theme="dark"] .btn.btn-success:focus,
[data-theme="dark"] .btn.btn-success:focus-visible {
  background: #4ade80 !important;
  border-color: #4ade80;
  color: #ffffff !important;
}

/* TEST: Dark-Mode-Idle ebenfalls auf neutral grau.
   Revert: border-color rgba(248,113,113,0.5); color #f87171; */
[data-theme="dark"] .btn.btn-danger {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}
[data-theme="dark"] .btn.btn-danger:hover,
[data-theme="dark"] .btn.btn-danger:focus,
[data-theme="dark"] .btn.btn-danger:focus-visible {
  background: #f87171 !important;
  border-color: #f87171;
  color: #ffffff !important;
}

/* TEST: Dark-Mode-Idle ebenfalls auf neutral grau.
   Revert: border-color rgba(251,191,36,0.5); color #fbbf24; */
[data-theme="dark"] .btn.btn-caution {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}
[data-theme="dark"] .btn.btn-caution:hover,
[data-theme="dark"] .btn.btn-caution:focus,
[data-theme="dark"] .btn.btn-caution:focus-visible {
  background: #fbbf24 !important;
  border-color: #fbbf24;
  color: #ffffff !important;
}

/* TEST: Dark-Mode-Variant fuer .btn-info — Idle neutral grau wie die
   anderen, Hover --nav-pills-active-bg (Token resolved im Dark-Theme
   automatisch auf den Dark-Wert). Revert: diesen Block entfernen. */
[data-theme="dark"] .btn.btn-info {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}
[data-theme="dark"] .btn.btn-info:hover,
[data-theme="dark"] .btn.btn-info:focus,
[data-theme="dark"] .btn.btn-info:focus-visible {
  background: var(--nav-pills-active-bg, rgb(15, 76, 154)) !important;
  border-color: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff !important;
}

/* TEST: .btn-primary auf Outline-idle/Fill-hover-Pattern wie
   .btn-edit-profile-card. Idle = neutral grau, Hover = Royal-Blau
   (--nav-pills-active-bg, gleicher Wert wie .btn-main:hover).
   Source-Order schlaegt die fruehere .btn-primary-Definition
   (Z. ~445). Revert: diesen Block entfernen, alte Gradient-Definition
   greift wieder. */
.btn-primary {
  background: var(--form-control-bg, #ffffff) !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12)) !important;
  border-radius: var(--radius-md, 12px);
  box-shadow: none !important;
  font-weight: 400;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
  background: var(--nav-pills-active-bg, rgb(15, 76, 154)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .btn-primary {
  background: transparent !important;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22)) !important;
  color: var(--bs-secondary-color, #adb5bd) !important;
}

/* TEST: .btn-secondary auf Outline-idle/Fill-hover-Pattern. Idle =
   neutral grau, Hover = solider Grau-Fill (--bs-secondary-color) mit
   weissem Text. Bewusst KEIN Blau-Fill wie .btn-primary — Secondary
   bleibt visuell als neutrale Aktion erkennbar.
   ::before-Pseudo-Element der Alt-Definition wird auf opacity 0
   gesetzt, sonst bleibt der glasige Radial-Overlay sichtbar.
   Source-Order schlaegt die fruehere Glassy-Definition (Z. ~225).
   Revert: diesen Block entfernen, alte Glassy-Definition greift wieder. */
.btn-secondary {
  background: var(--form-control-bg, #ffffff) !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12)) !important;
  border-radius: var(--radius-md, 12px) !important;
  font-weight: 400 !important;
  font-size: 0.825rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}
.btn-secondary::before {
  opacity: 0 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible {
  background: var(--bs-secondary-color, #6c757d) !important;
  border-color: var(--bs-secondary-color, #6c757d) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-secondary:active {
  background: var(--bs-secondary-color, #6c757d) !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .btn-secondary {
  background: transparent !important;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22)) !important;
  color: var(--bs-secondary-color, #adb5bd) !important;
}

/* TEST: .btn-cancel — neutraler Outline-Idle, grauer Solid-Hover.
   Für Abbrechen/Schließen-Buttons. Erste Konsumenten:
   Freibetrag-Modal Schließen (pers_input.html:92 + 127),
   Profil-Überschreiben-Modal Abbrechen (profile_modals.html:926),
   Profil-Delete-Modal Abbrechen (profile_modals.html:905).
   Werte gespiegelt aus .btn-secondary (Outline-Pattern), aber als
   dedizierter Skin mit klarer Cancel-Semantik. Specificity-Pattern
   .btn.btn-cancel (compound) wegen .btn:not(.btn-link)-Reset.
   Revert: diesen Block entfernen + Klassen-Migrationen zurueck. */
.btn.btn-cancel {
  background: var(--form-control-bg, #ffffff);
  color: var(--bs-secondary-color, #6c757d);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: none;
  font-weight: 400;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn.btn-cancel:hover,
.btn.btn-cancel:focus,
.btn.btn-cancel:focus-visible {
  background: var(--bs-secondary-color, #6c757d) !important;
  border-color: var(--bs-secondary-color, #6c757d);
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

[data-theme="dark"] .btn.btn-cancel {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}
[data-theme="dark"] .btn.btn-cancel:hover,
[data-theme="dark"] .btn.btn-cancel:focus,
[data-theme="dark"] .btn.btn-cancel:focus-visible {
  background: var(--bs-secondary-color, #adb5bd) !important;
  border-color: var(--bs-secondary-color, #adb5bd);
  color: #ffffff !important;
}

/* ─── Generischer Settings-Button ──────────────────────────────────────
   TEST: Etappe 2 — quadratisches Zahnrad-Button-Kästchen als generische
   Komponente (vorher gab es nur den Switch-scoped .segmented-control__settings
   aus switches.css). Skin lehnt sich an Form-Controls an: --form-control-bg,
   1px --form-control-border, --radius-md, Hover via --form-focus-shadow-Ring.
   Größe per Modifier .settings-btn--sm (28px, --radius-sm, kleineres SVG).
   Revert: diesen Block entfernen. */
.settings-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  color: var(--form-check-label-color, #6c757d);
  cursor: pointer;
  transition: color 150ms ease,
              background-color 150ms ease,
              border-color 150ms ease,
              box-shadow 150ms ease;
}

.settings-btn:hover:not(:disabled),
.settings-btn:focus-visible {
  box-shadow: var(--form-focus-shadow);
  outline: none;
}

.settings-btn svg {
  stroke-width: 1.75;
}

.settings-btn--sm {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 8px);
}

.settings-btn--sm svg {
  width: 14px;
  height: 14px;
}

/* Halte-Angebote in den Kuendigungs-Dialogen sichtbar machen.

   Der Skin-Baukasten oben laesst .btn-success und .btn-primary im
   Ruhezustand bewusst neutral-grau und faerbt sie erst beim Hover. Ueberall
   sonst ist das richtig. In den Kuendigungs-Dialogen hatte es die Wirkung auf
   den Kopf gestellt: "Ins Jahresabo wechseln" und "Abo pausieren" standen in
   Grau (#6c757d, dieselbe Farbe wie deaktivierte Schalter) neben einem
   normal eingefaerbten "Trotzdem kuendigen" — der Ausgang sah als einziges
   nach einer moeglichen Aktion aus. Gemessen im Browser, Light und Dark.

   Deshalb NUR hier gefuellt statt neutral. Der Ausgang bleibt unveraendert
   dezent: Er soll erreichbar sein, nicht attraktiv.

   #portalStep2 gehoerte zum Portal-Zwischenschritt, den eine parallele
   Aenderung am 01.08.2026 entfernt hat (Commit "Zahlungsportal: direkt
   oeffnen"). Der Selektor bleibt stehen, damit die Angebote wieder richtig
   aussehen, falls der Zwischenschritt zurueckkommt — er kostet nichts. */
#portalStep2 .btn.btn-success,
#rescue_offer_modal .btn.btn-success {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

#portalStep2 .btn.btn-primary,
#rescue_offer_modal .btn.btn-primary {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #ffffff;
}

/* Dark Mode: dieselben Fuellfarben tragen auf dunklem Grund, nur der
   Kontrast der Schrift wird geprueft — beide Fuellungen sind kraeftig genug,
   dass Weiss darauf lesbar bleibt. Eigener Block, damit eine spaetere
   Palette-Aenderung hier ansetzen kann, ohne den Light-Fall anzufassen. */
[data-theme="dark"] #portalStep2 .btn.btn-success,
[data-theme="dark"] #rescue_offer_modal .btn.btn-success {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

[data-theme="dark"] #portalStep2 .btn.btn-primary,
[data-theme="dark"] #rescue_offer_modal .btn.btn-primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

/* === ./css/core/forms.css === */
/* Base form surface styling - v30 */
.form-control,
.form-select {
  background-color: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--form-control-radius, 8px);
  padding: var(--form-control-padding, 10px);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: var(--form-control-placeholder, rgba(0, 0, 0, 0.5));
  opacity: 1;
}

.form-control:focus::placeholder {
  color: var(--form-control-placeholder-focus, var(--form-control-placeholder, rgba(0, 0, 0, 0.5)));
}

.form-control:-webkit-autofill {
  background-color: var(--form-control-autofill-bg, var(--form-control-bg, #ffffff)) !important;
  color: var(--form-control-autofill-color, var(--form-control-color, inherit)) !important;
}

.form-control[readonly],
.form-control:disabled,
.form-select[readonly],
.form-select:disabled {
  background-color: var(--form-control-disabled-bg, var(--form-control-bg, #ffffff));
  color: var(--form-control-disabled-color, var(--form-control-color, inherit));
  opacity: 1;
}

/* Locked/readonly fields in modals — flat "gestempelt" look, no float-halo
   (Float-Halo signalisiert Bearbeitbarkeit; gesperrte Felder dürfen keinen
   Schatten tragen). Wirkt generisch über das Klassenpaar .kv-input-locked
   (Wrapper) + .kv-readonly-control (Input) für alle Modals. Der Halo-Reset
   unten trägt .modal-body-Scope, weil der Pauschal-Halo aus modals.css:54
   nur dort gesetzt wird; Specificity (0,3,0) überstimmt die (0,2,0) der
   Pauschalregel zuverlässig — Bundle-Reihenfolge irrelevant. */
.kv-input-locked {
  position: relative;
  opacity: 1;
  pointer-events: none;
}

.kv-input-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: var(--form-control-radius, 8px);
  pointer-events: none;
}

.kv-readonly-control {
  background-color: var(--locked-input-bg, var(--form-control-disabled-bg)) !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  cursor: not-allowed !important;
  border-style: solid !important;
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12)) !important;
}

.modal-body .form-control.kv-readonly-control {
  box-shadow: none;
}

.form-check-label {
  color: var(--form-check-label-color, inherit);
}

.form-group label,
.form-label {
  color: var(--form-check-label-color, inherit);
  font-weight: var(--form-label-weight, normal);
  font-size: var(--form-label-font-size, 0.75rem);
}

.form-check-label a {
  color: var(--form-check-link-color, inherit);
  text-decoration: underline;
}

.form-check-label a:hover {
  color: var(--form-check-link-hover-color, var(--form-check-link-color, inherit));
}

.form-check-label:hover,
.form-check-label:focus-visible {
  color: var(--form-check-label-hover-color, var(--form-check-label-color, inherit));
}

/* Form focus and switch theming */
.form-control:focus,
.form-select:focus {
  outline: 0;
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-shadow);
  background-color: var(--form-control-bg-focus, var(--form-control-bg, #ffffff));
  color: var(--form-control-color, inherit);
}

/* v31: Fix light mode switch - use background-image for gradient */
.form-switch .form-check-input {
  width: 2.6rem;
  height: 1.35rem;
  border-radius: 999px;
  background-color: var(--switch-track-solid-bg, #b8bfc6) !important;
  background-image: var(--switch-track-bg) !important;
  border: 1px solid var(--switch-track-border);
  box-shadow: var(--switch-track-shadow);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}

.form-switch .form-check-input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.12rem;
  width: 1.04rem;
  height: 1.04rem;
  border-radius: 50%;
  background: var(--switch-thumb-bg) !important;
  box-shadow: var(--switch-thumb-shadow);
  transform: translate(0, -50%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease;
}

.form-switch .form-check-input:hover:not(:disabled) {
  background-color: var(--switch-track-hover-solid-bg, #a8b0b9) !important;
  background-image: var(--switch-track-hover-bg) !important;
  border-color: var(--switch-track-hover-border);
  box-shadow: var(--switch-track-hover-shadow);
}

.form-switch .form-check-input:hover:not(:disabled)::after {
  box-shadow: var(--switch-thumb-hover-shadow);
}

.form-switch .form-check-input:focus {
  border-color: var(--switch-track-focus-border);
  box-shadow: var(--switch-track-focus-shadow);
  background-image: var(--switch-track-bg) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--switch-track-checked-solid-bg, #0f62ff) !important;
  background-image: var(--switch-track-checked-bg) !important;
  border-color: var(--switch-track-checked-border);
  box-shadow: var(--switch-track-checked-shadow);
}

.form-switch .form-check-input:checked::after {
  transform: translate(1.2rem, -50%);
  background: var(--switch-thumb-checked-bg) !important;
  box-shadow: var(--switch-thumb-checked-shadow);
}

.form-switch .form-check-input:checked:hover:not(:disabled) {
  background-color: var(--switch-track-checked-hover-solid-bg, #1d4ed8) !important;
  background-image: var(--switch-track-checked-hover-bg) !important;
}

.form-switch .form-check-input:disabled {
  cursor: not-allowed;
  opacity: var(--switch-track-disabled-opacity, 0.55);
  box-shadow: var(--switch-track-disabled-shadow);
}

.subContractsAccordion {
  position: fixed;
  z-index: 9999;
  display: none;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--sub-accordion-background);
  border: 1px solid var(--sub-accordion-border);
  border-radius: 12px;
  box-shadow: var(--sub-accordion-shadow);
  backdrop-filter: var(--sub-accordion-blur);
  pointer-events: auto;
  color: var(--sub-accordion-text);
}

.custom-control-input {
  border-color: #ccc;
  background-color: #333;
  box-shadow: none;
}

.custom-control-input:checked {
  background-color: #0a74da;
  border-color: #0a74da;
}

.custom-control-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(10, 116, 218, 0.25);
}

.input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-container .form-control {
  padding-right: 2.5rem;
  box-sizing: border-box;
}

.input-container .input-unit {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  pointer-events: none;
}

.input-container.small-input {
  width: 110px;
  display: inline-block;
}

.input-container.input-with-action {
  position: relative;
  width: 100%;
}

.input-container.input-with-action .form-control {
  width: 100%;
  padding-right: 6.25rem;
  min-height: 42px;
}

.input-container.input-with-action .input-unit {
  position: absolute;
  right: 3.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--form-control-placeholder, rgba(0, 0, 0, 0.55));
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
}

.input-container.input-with-action .input-action-btn {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: 0.75rem;
  background: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.input-container.input-with-action .input-action-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.input-container.input-with-action .input-action-btn:hover,
.input-container.input-with-action .input-action-btn:focus {
  background: var(--form-control-bg-focus, #f8f9fa);
  border-color: var(--form-focus-border, rgba(0, 0, 0, 0.24));
}

.input-container.input-with-action .input-action-btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 576px) {
  .input-container.small-input {
    width: calc(50% - 0.6rem);
  }
}

.shrink-costs-line {
  gap: 0.4rem;
}

/* Range input thumb styling */
.custom-range::-webkit-slider-thumb {
  background: var(--range-thumb-bg, rgb(15, 76, 154));
  border: var(--range-thumb-border, hidden) !important;
  box-shadow: var(--range-thumb-shadow, none) !important;
}

.custom-range::-moz-range-thumb {
  background: var(--range-thumb-bg, rgb(15, 76, 154));
  border: var(--range-thumb-border, hidden) !important;
  box-shadow: var(--range-thumb-shadow, none) !important;
}

.custom-range::-ms-thumb {
  background: var(--range-thumb-bg, rgb(15, 76, 154));
  border: var(--range-thumb-border, hidden) !important;
  box-shadow: var(--range-thumb-shadow, none) !important;
}

/* Breiter Erklaer-Tooltip (data-bs-custom-class="tooltip-wide") fuer mehrsaetzige
   Hinweise, z.B. die Begruendung der Voreinstellung "Rendite Entnahmephase 3,5 %"
   im Auszahlphasen-Modal. Der Bootstrap-Default (200px) macht aus drei Saetzen
   einen schmalen Turm. Doppelklasse wie .tooltip.tooltip-thin (Spezifitaet). */
.tooltip.tooltip-wide .tooltip-inner {
  max-width: 360px;
  text-align: left;
}

/* Bootstrap Tooltip styling for Light Mode */
/* Light Mode: Force white text on dark tooltip background */
[data-theme="light"] .tooltip-inner {
  color: #ffffff !important;
  background-color: #212529 !important;
}

[data-theme="light"] .tooltip-inner ul {
  color: #ffffff !important;
  padding-left: 1.2rem;
  margin-bottom: 0;
}

[data-theme="light"] .tooltip-inner li {
  color: #ffffff !important;
}

[data-theme="light"] .bs-tooltip-end .tooltip-arrow::before,
[data-theme="light"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #212529 !important;
}

[data-theme="light"] .bs-tooltip-start .tooltip-arrow::before,
[data-theme="light"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #212529 !important;
}

[data-theme="light"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme="light"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #212529 !important;
}

[data-theme="light"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme="light"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #212529 !important;
}

/* Anlagefinder-Sidebar: Form-Control bekommt --radius-sm (8px) — konsistent mit allen anderen
   Sidebar-Elementen (Toggle-Buttons, Tarifauswahl-Accordion, Sekundaerbuttons). Plus min-height
   matched die anderen Sidebar-Elemente. Scope auf .bg-left-col, damit Inputs ausserhalb der
   Sidebar unveraendert bleiben (Standard-Default --form-control-radius greift dort). */
.bg-left-col .form-control,
.bg-left-col .form-select {
  border-radius: var(--radius-md, 12px);
  min-height: var(--sidebar-element-height, 45px);
}

/* Auszahlungs-/Rentenphase-Modal (#entnahmeplan_form_wrapper): Feld-Radius auf
   --radius-md (12px) anheben, damit die Modal-Felder (pension_years,
   pens_pers_tax_override, monthly_rent, rest_money) mit der Sidebar-Optik
   fluchten. Gleicher Mechanismus wie die .bg-left-col-Regel darueber; Scope
   auf das Modal-Wrapper, damit nur DIESES Modal betroffen ist (kvStatus/
   legalPension haben eigene Overrides, global bleibt --form-control-radius). */
#entnahmeplan_form_wrapper .form-control {
  border-radius: var(--radius-md, 12px);
}

/* TEST: Light-only — Sidebar-Inputs bekommen zusaetzlich zur 1px-Border aus
   der globalen .form-control-Regel (Z.~6, var(--form-control-border)) einen
   weichen Drop-Shadow als Ruhe-Halo, damit sie auf dem blauen Halo-Verlauf-BG
   sowohl umrandet als auch leicht floatend wirken. Scope strikt auf
   [data-theme="light"] .bg-left-col, damit:
     - Dark-Mode-Sidebar voellig unberuehrt bleibt,
     - Inputs in Cards/Modals (ausserhalb der Sidebar) unveraendert sind,
     - die Hover-Regel (~Z.305) und :focus weiter den blauen Halo
       (--form-focus-shadow) liefern (overriden den Ruhe-Shadow).
   Revert: diesen Block komplett loeschen. */
[data-theme="light"] .bg-left-col .form-control,
[data-theme="light"] .bg-left-col .form-select {
  box-shadow: 0 1px 6px rgba(15, 42, 97, 0.10);
}

/* Hover-Glow auf Eingabefeldern GLOBAL: gleicher blauer Halo wie der
   :focus-State, damit Hover- und Focus-Look konsistent sind. Galt
   vorher nur scoped in .bg-left-col mit grauem --hover-glow-shadow —
   jetzt überall, mit --form-focus-shadow als gemeinsamer Token-Quelle.
   :not(:focus) verhindert Doppel-Anwendung wenn das Feld bereits
   focussiert ist (sonst hat es nur die Focus-Regel von Z.~85).
   :not([readonly]):not(:disabled) hält gesperrte Felder neutral. */
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-select:hover:not(:focus):not([readonly]):not(:disabled) {
  box-shadow: var(--form-focus-shadow);
}

/* Rentenfaktor-Dropdown im Rürup-Einstellungs-Modal — form-select-Optik.
   Mechanik (data-bs-toggle, dropdown-menu, input[type=submit]) bleibt 100%
   unverändert; nur der Button-Look wird auf form-control-Vars umgestellt.
   Scoped auf .rent-fac-dropdown → kein Einfluss auf andere Dropdowns. */
.rent-fac-dropdown {
  width: 100%; /* inline-block auf Spaltenbreite zwingen; btn hat w-100 → füllt diese Breite */
}
.rent-fac-dropdown .dropdown-toggle {
  background-color: var(--form-control-bg, #ffffff) !important;
  color: var(--form-control-color, inherit) !important;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12)) !important;
  border-radius: var(--form-control-radius, 8px) !important;
  padding: var(--form-control-padding, 10px) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}
.rent-fac-dropdown .dropdown-toggle::after {
  display: none !important; /* Bootstrap-Dreieck-Caret unterdrücken */
}
.rent-fac-dropdown .dropdown-toggle:hover:not(:focus) {
  background-color: var(--form-control-bg, #ffffff) !important;
  color: var(--form-control-color, inherit) !important;
  border-color: var(--form-focus-border, rgba(0, 0, 0, 0.25)) !important;
  box-shadow: var(--form-focus-shadow) !important;
}
.rent-fac-dropdown .dropdown-toggle:focus,
.rent-fac-dropdown .dropdown-toggle.show {
  background-color: var(--form-control-bg-focus, var(--form-control-bg, #ffffff)) !important;
  color: var(--form-control-color, inherit) !important;
  border-color: var(--form-focus-border) !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: 0 !important;
}

/* === ./css/core/dropdowns.css === */
.dropdown,
.btn-group {
  overflow: visible;
}
/* Shared dropdown styling */
.dropdown-menu {
  background-color: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  padding: 10px 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-menu .dropdown-item {
  color: var(--dropdown-item-color);
  padding: 10px 12px;
  transition: color 0.3s ease, background-color 0.3s ease;
  font-weight: 500;
  border-radius: 6px;
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-color);
}

.dropdown-menu .dropdown-item.active {
  background-color: var(--dropdown-item-active-bg);
  color: var(--dropdown-item-active-color);
  font-weight: 600;
}

.dropdown-divider {
  border-color: var(--dropdown-divider-color);
}

.dropdown-toggle {
  color: var(--dropdown-toggle-color);
  background-color: transparent;
  border: 1px solid var(--dropdown-toggle-border);
  border-radius: 8px;
  padding: 10px 20px;
  transition: all 0.4s ease;
}

.dropdown-toggle:hover {
  background-color: var(--dropdown-toggle-hover-bg);
  color: var(--dropdown-toggle-hover-color);
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 15px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--dropdown-arrow-color) transparent;
}

/* Ensure info icons within dropdown toggles don't shift Popper positioning */

.dropdown {
  position: relative;
  display: inline-block;
}

.btn-group {
  position: relative;
}

.dropdown > .span_info {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  float: none !important;
  z-index: 3;
}

.dropdown-menu[data-bs-popper] {
  transform: none !important;
}

.dropup,
.dropend,
.dropstart {
  position: relative;
}

.dropdown:not(.dropup):not(.dropend):not(.dropstart) > .dropdown-menu[data-popper-placement^="bottom"] {
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 0.125rem;
  transform: none !important;
}

.dropdown > .dropdown-menu[data-popper-placement^="bottom"]:not(.dropdown-menu-end) {
  inset: auto auto auto 0 !important;
}

.dropdown.show > .dropdown-menu.dropdown-menu-end[data-bs-popper],
.btn-group.show > .dropdown-menu.dropdown-menu-end[data-bs-popper] {
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 0.125rem;
  transform: none !important;
}

/* === ./css/core/tables.css === */
/* Shared table styling */
/* TEST: Tabellen-Grunddesign Etappe 2 — Radius an --card-radius angeglichen,
   umlaufende Außen-Border in --form-control-border (wie Cards/Form-Controls).
   Revert: border-radius zurück auf 12px, border-Zeile entfernen. */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--table-text-color);
  background-color: var(--table-background);
  border: 1px solid var(--form-control-border);
  border-radius: var(--card-radius, 12px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  backdrop-filter: var(--table-backdrop-filter);
  box-shadow: var(--table-box-shadow);
}

/* Sticky table header variant - removes overflow:hidden and border-radius from table */
.table-sticky-header {
  border-radius: 0;
  overflow: visible;
}

/* TEST: Etappe 2 — Header weiß/transparent (kein Grauton), Trennlinie zur
   ersten Body-Zeile wie zwischen den Body-Zeilen. Vorher überschrieb
   "border-bottom: none" die globale Cell-Divider-Regel weiter unten.
   Revert: border-bottom: none wiederherstellen, Header-Tokens zurück. */
.table thead th {
  background-color: var(--table-header-bg);
  color: var(--table-header-color);
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--table-row-divider, var(--form-control-border));
}

/* Sticky table header - works inside .table-responsive with overflow-y */
/* TEST: Tabellen-Grunddesign Etappe 2 — Sticky-Header/Sticky-Col Hex-BGs
   auf neutrale (nicht-blaue) opake Töne umgestellt, Zebra-Regel für
   sticky-col entfernt. Sticky muss opaque sein (sonst scrollt Content
   durch); deshalb keine rgba-Tokens. Revert: alte Hex-Werte
   (#1b263e/#f0f4ff/#1e293b/#1a2435/#2a3a52/#f5f7ff/#fafbff/#e8edff)
   wiederherstellen und nth-of-type(even)-Regeln zurück. */
.table-sticky-header thead th {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 10;
  /* Opaque backgrounds required for sticky headers */
  background-color: #1a2030; /* Dark mode fallback, neutral dark */
}

/* Light mode sticky header background */
[data-theme="light"] .table-sticky-header thead th {
  background-color: #f3f4f6;
}

/* Sticky first column (Alter) - stays fixed on horizontal scroll */
.table-sticky-header .sticky-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: inherit;
  white-space: nowrap;
}

/* Header cell needs higher z-index (top+left sticky intersection) */
.table-sticky-header thead th.sticky-col {
  z-index: 15;
  background-color: #1a2030 !important;
  box-shadow: none !important;
}

[data-theme="light"] .table-sticky-header thead th.sticky-col {
  background-color: #f3f4f6 !important;
  box-shadow: none !important;
}

/* Body sticky-col needs OPAQUE background (not rgba) so scrolling content doesn't show through.
   Must use !important to override Bootstrap's .table > :not(caption) > * > * { background-color; box-shadow: inset } */
.table-sticky-header tbody th.sticky-col {
  background-color: #161b25 !important;
  box-shadow: none !important;
}

.table-sticky-header tbody tr:hover th.sticky-col {
  background-color: #262d3a !important;
  box-shadow: none !important;
}

[data-theme="light"] .table-sticky-header tbody th.sticky-col {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme="light"] .table-sticky-header tbody tr:hover th.sticky-col {
  background-color: #eef0f3 !important;
  box-shadow: none !important;
}

/* Special rows */
.table-sticky-header tbody tr.table-info th.sticky-col,
.table-sticky-header tbody tr.table-warning th.sticky-col,
.table-sticky-header tbody tr.table-light th.sticky-col {
  background-color: inherit;
}

/* TEST: Tabellen-Grunddesign Etappe 2 — Zebra entfernt, weiße/neutral-BG
   + Zeilen-Trennlinien (var(--table-row-divider)). Letzte Zeile ohne
   border, damit der Außen-Radius nicht doppelt wirkt. Revert: alten
   nth-of-type(even)-Block + border-top:none auf td/th wiederherstellen. */
.table tbody tr {
  background-color: var(--table-row-bg);
  transition: background-color 0.3s ease;
}

.table tbody tr:hover {
  background-color: var(--table-row-hover-bg);
}

.table td,
.table th {
  padding: 12px 15px;
  border-top: none;
  border-bottom: 1px solid var(--table-row-divider, var(--form-control-border));
  vertical-align: middle;
}

/* TEST: Etappe 2 — nur die ALLERLETZTE Zeile bekommt border-bottom:none
   (sonst doppelt zum Außen-Border/Radius). Vorher griff die Regel auch
   für die letzte tbody-Zeile vor einem tfoot und hat damit die Trennlinie
   vor der Ergebniszeile verschluckt. tbody:last-child sorgt jetzt dafür,
   dass die Regel nur greift, wenn tbody das wirklich letzte Row-Group ist.
   Revert: tbody:last-child wieder zu tbody machen. */
.table > tbody:last-child > tr:last-child > td,
.table > tbody:last-child > tr:last-child > th,
.table > tfoot:last-child > tr:last-child > td,
.table > tfoot:last-child > tr:last-child > th {
  border-bottom: none;
}

/* TEST: Etappe 2 Fix — overflow:hidden auf <table> ist laut CSS-Spec nicht
   zuverlässig (table ist display:table, nicht block). Bootstrap setzt zudem
   pro Zelle background-color + inset-box-shadow, die die Rundung der Tabellen-
   BG überdecken. Robuster Fix: Radius direkt auf die Eck-Zellen ziehen, damit
   die Cell-BG selbst rund clippt. .table-sticky-header bleibt eckig.
   2026-05-21: Radius um 1px reduziert (calc(... - 1px)), weil die Zellen
   1px innerhalb des Tabellen-Outer-Borders sitzen. Vorher gab es an der
   oberen rechten Ecke einen sichtbaren Curve-Mismatch (Zell-Curve fluchtete
   nicht mit Border-Curve). Revert: calc(... - 1px) wieder auf
   var(--card-radius, 12px). */
.table:not(.table-sticky-header) > thead > tr:first-child > *:first-child,
.table:not(.table-sticky-header) > tbody:first-child > tr:first-child > *:first-child {
  border-top-left-radius: calc(var(--card-radius, 12px) - 1px);
}
.table:not(.table-sticky-header) > thead > tr:first-child > *:last-child,
.table:not(.table-sticky-header) > tbody:first-child > tr:first-child > *:last-child {
  border-top-right-radius: calc(var(--card-radius, 12px) - 1px);
}
.table:not(.table-sticky-header) > tfoot > tr:last-child > *:first-child,
.table:not(.table-sticky-header) > tbody:last-child > tr:last-child > *:first-child {
  border-bottom-left-radius: calc(var(--card-radius, 12px) - 1px);
}
.table:not(.table-sticky-header) > tfoot > tr:last-child > *:last-child,
.table:not(.table-sticky-header) > tbody:last-child > tr:last-child > *:last-child {
  border-bottom-right-radius: calc(var(--card-radius, 12px) - 1px);
}

.table a:not(.btn) {
  color: var(--table-link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.table a:not(.btn):hover {
  color: var(--table-link-hover-color);
  text-decoration: underline;
}

.table .btn-outline-warning {
  color: #ffc107 !important;
}

.table .btn-outline-warning:hover {
  color: #000 !important;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Bedarfsermittlung: Tabelle in schmaler Spalte nicht abschneiden ── */
.bg-left-col .table {
  overflow: visible;
  font-size: 0.85rem;
}
.bg-left-col .table td,
.bg-left-col .table th {
  padding: 8px 10px;
  word-break: break-word;
}

/* === ./css/core/versorgung_table.css === */
/* ─── Versorgungslücke-Tabelle (av_input.html linke Sidebar) ──────────
   TEST: Etappe 2 Teil 2 — eine spezifische Tabelle bekommt ein eigenes
   Layout: Sign-Chips (+/−), Zahnrad/i-Icon im Wert-Td statt im Label-Th,
   3-Slot-Grid (Gear | Zahl | Info) damit alle Zahlen linksbündig zueinander
   stehen — egal ob Slot 1 oder 3 belegt sind. Ergebnis-Zeile (Tfoot) als
   Highlight: --surface-soft-bg + 3px blauer Linker-Border.

   Scope: AUSSCHLIESSLICH .versorgung-table. Andere Tabellen unberührt.
   Revert: diesen ganzen File entfernen + @import in base_common.css raus +
   Markup-Änderungen in av_input.html zurückrollen. */

/* ── Eckenfix via Wrapper-Div ──
   TEST: Etappe 2 Final v3 — <table> implementiert overflow:hidden laut
   CSS-Spec nicht zuverlässig. An einzelnen Ecken (sichtbar v.a. oben rechts)
   überzeichnete der Bootstrap-Inset-Box-Shadow das Border-Radius-Clipping.
   Lösung: Border + Radius + overflow:hidden auf einen Block-Wrapper-Div
   verlagern; <table> selbst bare lassen. Block-Elemente respektieren
   overflow zuverlässig — alle 4 Ecken clippen sauber. Revert: diesen
   Wrapper-Block entfernen, .versorgung-table.table darf seine eigene
   Border/Radius/Overflow zurück. */
.versorgung-table-wrap {
  border: 1px solid var(--form-control-border);
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
  background-color: var(--table-background);
}

.versorgung-table.table {
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
  background-color: transparent;
}

/* Eck-Cell-Radii in versorgung-table neutralisieren — der Wrapper macht
   das Clipping; die globalen Corner-Cell-Regeln (tables.css) sind hier
   redundant + visuell aufdringlich. !important nötig wegen :not-Specificity. */
.versorgung-table > thead > tr > *,
.versorgung-table > tbody > tr > *,
.versorgung-table > tfoot > tr > * {
  border-radius: 0 !important;
}

/* ── Sign-Chips: GENERISCHE Komponente (kleines quadratisches Icon-Kästchen)
   Verwendung: Versorgungslücke-Tabelle (+ − =), Bestehende-Vorsorgen-Modal
   (= in der Summenzeile) — und prinzipiell überall im Tool.
   TEST: Selektor-Präfix .versorgung-table ENTFERNT (war ursprünglich
   scoped, wurde generisch hochgezogen für Wiederverwendung im
   #existingPensionsModal Bündel D). Die Versorgungslücke-Tabelle sieht
   visuell unverändert aus — Properties sind identisch geblieben, nur
   die Specificity sinkt (kein Override durch andere Regeln im Projekt).
   Revert: .versorgung-table-Präfix wieder vor jeden Sign-Chip-Selektor. */
.sign-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  /* +/− Glyph: padding-bottom-Mikrokorrektur, weil U+2212 (Minus) in den
     meisten Fonts leicht über der geometrischen Mitte sitzt. */
  padding-bottom: 1px;
}

.sign-chip--plus {
  background-color: rgba(25, 135, 84, 0.16);
  color: #198754;
}

.sign-chip--minus {
  background-color: rgba(220, 53, 69, 0.16);
  color: #dc3545;
}

/* Equals-Chip — Fonder-Blau mit hellem Tint, für Ergebnis-/Summenzeilen.
   TEST: padding-bottom auf 2px hochgesetzt (statt der globalen 1px aus
   .sign-chip). Das Gleichzeichen (U+003D) sitzt glyph-bedingt visuell
   leicht tief; mit etwas mehr padding-bottom wird die Content-Area
   verkleinert, der Glyph rückt nach oben in die optische Mitte. +/−-Chips
   behalten die 1px-Mikrokorrektur aus .sign-chip — sie sind schon mittig.
   Revert: padding-bottom-Zeile entfernen. */
.sign-chip--equals {
  background-color: rgba(13, 110, 253, 0.16);
  color: #0d6efd;
  padding-bottom: 2px;
}

/* Platzhalter-Chip: hält Chip-Platz frei, ohne sichtbar zu sein. */
.sign-chip--placeholder {
  visibility: hidden;
}

/* ── Versorgungs-spezifische Label-/Text-Properties (scoped) ── */
.versorgung-table th[scope="row"] .label-text,
.versorgung-table th[scope="row"] .label-sub {
  vertical-align: middle;
}

/* TEST: Etappe 2 — Body-Row-Labels nicht fett. Gezielt auf .label-text
   scoped — der Chip ist ein SIBLING-Span, nicht Teil von .label-text,
   und bleibt damit klar bei font-weight 700. Tfoot-Label bleibt
   unverändert (Regel ist auf tbody scoped). .label-sub bringt seine
   eigene font-weight: 400 mit. Revert: diese Regel entfernen. */
.versorgung-table > tbody > tr > th .label-text {
  font-weight: 400;
}

/* ── 2-Slot-Grid im Wert-Td: Icon (Zahnrad ODER Info) | Zahl ── */
/* .value-grid sitzt auf einem INNER-DIV im <td>, NICHT direkt auf der <td>.
   Ursache: display:grid auf <td> macht die Zelle zu einem Block-Grid-
   Container — die TD verliert ihr Table-Cell-Verhalten, ihre Höhe wird von
   der Grid-Content-Höhe bestimmt, nicht mehr vom Table-Layout. Fix: TD
   bleibt Table-Cell und erbt vertical-align:middle von .align-middle.
   Alle Icons teilen sich den LINKEN Slot (einheitliche Icon-Spalte), die
   Zahl bekommt die volle Restbreite bis zum rechten Zellenrand — der
   frühere dritte Slot (Info rechts, 20px) ist entfallen, damit lange
   Beträge nicht mehr umbrechen. */
.versorgung-table .value-grid {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  column-gap: 8px;
}

.versorgung-table .value-grid > .settings-btn {
  grid-column: 1;
  justify-self: start;
}

/* Zahl rechtsbündig, einzeilig (white-space: nowrap) — bei knapper Breite
   gibt das Auto-Table-Layout dem Label-Th nach, nie dem Betrag. */
.versorgung-table .value-grid > .value {
  grid-column: 2;
  justify-self: end;
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Zahl + Euro-Zeichen dürfen nie umbrechen — ein zweizeiliger Wert sprengt
     die Zeilenhöhe und wirkt kaputt. Auf Tablet-Breiten (siehe Media-Query
     unten) reicht die Wert-Spalte sonst nicht für "754,08 €" in einer Zeile. */
  white-space: nowrap;
}

/* Info-Icon im selben linken Slot wie das Zahnrad — eine gemeinsame
   Icon-Spalte für die ganze Tabelle. justify-self: center statt start:
   das i (~16px) ist schmaler als der 28px-Zahnrad-Button, zentriert
   liegen beide Icon-Mittelachsen exakt übereinander. */
.versorgung-table .value-grid > .span_info {
  grid-column: 1;
  justify-self: center;
  /* .span_info ist global float:right ([info_icons.css]); im Grid
     blockiert float die Spalten-Zuweisung. Hier scoped neutralisieren. */
  float: none;
}

/* Wert-Zellen: linkes Padding halbiert — die Icon-Spalte rückt näher ans
   Label, die rechtsbündige Zahl gewinnt entsprechend Platz. */
.versorgung-table > tbody > tr > td,
.versorgung-table > tfoot > tr > td {
  padding-left: 0.25rem;
}

/* ── Label-Th: Chip + Label-Text in einer Zeile, ohne Flex-Wrapper ── */
.versorgung-table th[scope="row"] .label-text {
  vertical-align: middle;
}

/* ── Ergebniszeile (Tfoot) — ins Raster integriert ──
   TEST: Etappe 2 Final v2 — Hintergrund WEISS (Tint raus), blaue ::before-
   Linie ENTFERNT, stattdessen blauer .sign-chip--equals an der gleichen
   Chip-Position wie +/−. Die Zeile nutzt damit das exakt gleiche Layout
   wie die Body-Zeilen: [Chip] [Label] | [Wert]. Label zweizeilig via
   .label-block-Wrapper (label-text + label-sub als Block-Kinder), damit
   beide Labelzeilen auf gleicher X-Position sind und mit den anderen
   Labels fluchten. Revert: Wrapper raus, ::before + padding-left + Tint
   wiederherstellen. */
.versorgung-table .label-block {
  display: inline-block;
  vertical-align: middle;
}

.versorgung-table .label-block > .label-text,
.versorgung-table .label-block > .label-sub {
  display: block;
}

/* Ergebniszahl: betont (bold + etwas größer als die Body-Werte), aber nicht zu
   groß — sonst überläuft der Wert die schmale Wert-Spalte. Grid
   (align-items:center) zentriert sie automatisch zur 2-zeiligen Beschriftung.
   white-space:nowrap hält den Euro-Betrag immer einzeilig. */
.versorgung-table .versorgung-total .value {
  font-size: 1.2rem;
  line-height: 1.15;
  white-space: nowrap;
}

/* (Der frühere 1/3-Span der Ergebniszahl ist mit dem 2-Slot-Grid obsolet:
   das Info-Icon sitzt jetzt links in Slot 1, die Zahl hat Slot 2 komplett.) */

/* "in heutiger Kaufkraft"-Zeile unter dem Netto-Ergebnis: gleiche Struktur wie
   die übrigen Zeilen (Chip + Label + Wert im 3-Slot-Grid), damit Wert und
   Spaltenflucht erhalten bleiben. Neutraler ≈-Chip + gedämpfter, kleiner Text
   — liest sich als Zusatzinfo und konkurriert nicht mit dem Ergebnis. Nur
   gerendert, wenn der Kaufkraft-Schalter an ist (passt die Tabelle ans
   deflationierte Balkendiagramm an). Sitzt direkt unter der Ergebniszeile,
   ohne Trennlinie dazwischen — beide lesen als eine Einheit. */
.versorgung-table .versorgung-heute-row > th,
.versorgung-table .versorgung-heute-row > td {
  border-top: none;
  padding-top: 0;
}

.versorgung-table .versorgung-heute-row th .label-text,
.versorgung-table .versorgung-heute-row .value {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
}

/* Euro-Betrag der Kaufkraft-Zeile etwas markanter: fett, leicht kräftigere
   Farbe als das Label (bleibt aber sekundär, damit das Netto-Ergebnis führt). */
.versorgung-table .versorgung-heute-row .value {
  font-weight: 700;
  color: var(--bs-body-color);
}

/* (Kein Spalten-Span mehr nötig: im 2-Slot-Grid endet Slot 2 für alle
   Zeilen am rechten Zellenrand — die Beträge fluchten automatisch.) */

/* Neutraler Chip für die Kaufkraft-Zeile (kein +/−/=, sondern ≈). */
.sign-chip--heute {
  background-color: rgba(108, 117, 125, 0.14);
  color: #6c757d;
}

[data-theme="dark"] .sign-chip--heute {
  background-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* TEST: Etappe 2 Final v3 — Trennlinie über der Ergebniszeile als kurze
   Fonder-blaue Pille (3px, ~12px Inset von beiden Außenseiten). Die globale
   graue Divider-Linie zwischen Steuern und Gesamteinkommen wird auf der
   letzten tbody-tr ausgeblendet, damit nur die blaue Linie sichtbar ist.
   Linie über zwei ::after-Pseudos (TH + TD), die sich an der Mittelnaht
   treffen; Außenenden mit border-radius gepillt.
   Revert: diesen Block entfernen, border-bottom auf Steuern-tr wieder erlauben. */
.versorgung-table > tbody > tr:last-child > th,
.versorgung-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.versorgung-table .versorgung-total > th,
.versorgung-table .versorgung-total > td {
  position: relative;
}

.versorgung-table .versorgung-total > th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 0;
  height: 3px;
  background-color: #0d6efd;
  border-radius: 2px 0 0 2px;
  pointer-events: none;
}

.versorgung-table .versorgung-total > td::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 12px;
  height: 3px;
  background-color: #0d6efd;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* Untertitel unter den Zeilen-Labels ("brutto monatlich", "monatlich",
   "netto monatlich") — gilt für Body-Zeilen UND die Tfoot-Ergebniszeile
   (war vorher auf .versorgung-total gescoped). */
.versorgung-table .label-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: 2px;
}

/* Dark Mode: Sign-Chips etwas heller, damit Kontrast erhalten bleibt.
   .versorgung-table-Präfix entfernt — generisch wie die Light-Mode-Regeln. */
[data-theme="dark"] .sign-chip--plus {
  background-color: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

[data-theme="dark"] .sign-chip--minus {
  background-color: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

[data-theme="dark"] .sign-chip--equals {
  background-color: rgba(92, 152, 255, 0.22);
  color: #5c98ff;
}

/* ── Tablet-Breiten (992-1399px, zoom-to-fit-Faktor 0.75) ──
   Bei diesem Zoom-Faktor wird die Sidebar schmaler als das Layout eigentlich
   braucht; die nowrap-Wert-Spalte (siehe .value oben) sprengt dann die
   verfügbare Breite und drückt das Label-Th zusammen. Fix: Schrift der
   Tabellenzeilen einen Tick kleiner, damit Label + einzeiliger Wert
   nebeneinander passen. Nur .versorgung-table gescoped, keine anderen
   Sidebar-Elemente betroffen.
   Gear-Spalte (Slot 1) bewusst NICHT verschmälert: .settings-btn--sm ist
   fest 28px breit (buttons.css) — ein schmalerer Grid-Track (frueher 22px)
   liess den Button ueber den Track hinaus in den column-gap ragen und hat
   dabei genau den gesamten Gap "aufgefressen" (28px Button − 22px Track =
   6px Overflow = die vollen 6px Gap), wodurch Zahnrad und Wert ohne
   sichtbaren Abstand aneinanderklebten. Ein margin-right auf dem Button half
   nicht: er ist explizit auf grid-column:1 platziert, der Wert explizit auf
   grid-column:2 — margin auf einem Grid-Item mit expliziter Position schiebt
   NIE ein anderes explizit platziertes Item weg, das geht nur ueber
   column-gap/Track-Groessen. Fix: Track 1 bleibt bei 28px (Button-Breite).
   column-gap bleibt bei 6px (gilt sonst auch fuer die Wert-Info-Luecke vor
   Slot 3 und wuerde .value dort messbar nach links verschieben). Stattdessen
   margin-left auf .value: die Zahl bleibt via justify-self:end weiterhin
   exakt an der rechten Trackkante verankert (der 1fr-Track hat reichlich
   Leerraum links vom rechtsbuendigen Text, margin-left zehrt nur davon),
   der Abstand zum Zahnrad wird trotzdem sichtbar groesser. */
@media (min-width: 992px) and (max-width: 1399px) {
  .versorgung-table th[scope="row"] .label-text,
  .versorgung-table th[scope="row"] .label-sub,
  .versorgung-table .value-grid > .value {
    font-size: 0.85em;
  }

  .versorgung-table .value-grid {
    grid-template-columns: 28px 1fr 16px;
    column-gap: 6px;
  }

  .versorgung-table .value-grid > .value {
    margin-left: 10px;
  }
}

/* ── Unteres Ende der Tablet-Spanne (992-1179px, z.B. iPad mini quer 1133px) ──
   Ab 1180px (iPad Air) reicht die 0.85em-Stufe oben; darunter brechen die
   beiden längsten Labels ("Gesetzliche Rente brutto mtl.",
   "Gesamteinkommen im Ruhestand") trotzdem um, weil die Label-Th-Spalte zu
   schmal wird. Zusätzliche, engere Stufe: Schrift nochmal einen Tick kleiner
   (0.85em -> 0.8em) + Zeilen-Padding links/rechts leicht reduziert (10px ->
   8px), damit beide Labels bei 1133px einzeilig bleiben. Nur diese Tabelle,
   nur dieser schmale Bereich — ab 1180px unverändert. */
@media (min-width: 992px) and (max-width: 1179px) {
  .versorgung-table th[scope="row"] .label-text,
  .versorgung-table th[scope="row"] .label-sub {
    font-size: 0.8em;
  }

  .versorgung-table > thead > tr > th,
  .versorgung-table > thead > tr > td,
  .versorgung-table > tbody > tr > th,
  .versorgung-table > tbody > tr > td,
  .versorgung-table > tfoot > tr > th,
  .versorgung-table > tfoot > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* === ./css/core/accordion.css === */
/* Shared accordion and list group styling */
.accordion-button {
  background: var(--accordion-bg, transparent);
  color: var(--accordion-text, inherit);
  border: 1px solid var(--accordion-border, transparent);
  border-radius: 8px;
  box-shadow: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.accordion-button::after {
  filter: var(--accordion-icon-filter, none);
  opacity: var(--accordion-icon-opacity, 0.75);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.accordion-button:hover {
  background: var(--accordion-hover-bg, var(--accordion-bg, transparent));
  color: var(--accordion-hover-text, var(--accordion-text, inherit));
}

.accordion-button:focus {
  box-shadow: none;
  outline: 0;
}

.accordion-button:not(.collapsed) {
  background: var(--accordion-bg-active, var(--accordion-bg, transparent));
  color: var(--accordion-text, inherit);
  box-shadow: none;
  border-color: var(--accordion-border, transparent);
}

.accordion-button:not(.collapsed)::after {
  filter: var(--accordion-icon-active-filter, var(--accordion-icon-filter, none));
  opacity: var(--accordion-icon-active-opacity, 1);
}

.accordion-item {
  border: none;
  border-radius: 8px;
  background: var(--accordion-bg, transparent);
  margin-bottom: 10px;
}

.accordion-collapse {
  border: none;
  background: var(--accordion-body-bg, transparent);
}

.accordion-body {
  background: var(--accordion-body-bg, transparent);
  color: var(--accordion-body-text, inherit);
  border-radius: 8px;
}

.list-group-item,
.list-group-item-action {
  background: var(--accordion-list-bg, inherit) !important;
  color: var(--accordion-list-text, inherit) !important;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.list-group-item:hover,
.list-group-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--accordion-list-hover-bg, var(--accordion-list-bg, inherit)) !important;
  color: var(--accordion-list-hover-text, var(--accordion-list-text, inherit)) !important;
}

.list-group-item-action.active,
.list-group-item.active {
  background: var(--accordion-bg-active, var(--accordion-list-hover-bg, inherit)) !important;
  color: var(--accordion-hover-text, var(--accordion-list-hover-text, inherit)) !important;
  border-color: transparent;
}

.list-group-flush .list-group-item {
  background: var(--accordion-list-bg, inherit);
  border: none;
}

/* Sidebar Tarifauswahl: Accordion soll wie ein grosses Eingabefeld wirken,
   damit es zu .form-control / .btn-sidebar-secondary passt. */
/* TEST: min-height auf das WRAPPER-Item verschoben (statt nur auf Button).
   .bg-left-col .form-control hat min-height direkt auf sich selbst → mit
   box-sizing:border-box ist die Outer-Höhe 45px inkl. Border. Vorher saß
   min-height nur auf dem Button (45) und der Item-Wrapper addierte +2px
   Border → Item-Outer war 47, Form-Control 45 → 2px Diskrepanz. Jetzt:
   Item-Outer = 45 inkl. Border, Button drinnen = 43 (siehe weiter unten).
   Revert: min-height-Zeile entfernen. */
.sidebar-selector-accordion .accordion-item {
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  margin-bottom: 0;
  /* TEST: Bündel F — min-height um +1px erhoeht (45→46), damit das
     Accordion-Item exakt die effektive Render-Hoehe der Sidebar-Form-
     Controls/Selects matched. Hintergrund: Form-Controls haben natuerliche
     Content-Hoehe (1rem × 1.5 + 20px padding + 2px border = 46), die das
     45px-min-height ueberschreitet → rendern 46px. Accordion-Button hat
     kleinere natuerliche Hoehe (0.925rem × 1.55 + 20px padding ≈ 42.94 <
     43px min-height), Button = 43, Item = 45. +1px-Korrektur hier +
     -1px-Korrektur am Button-min-height (siehe unten ~Z.135) bringt Item
     auf 46 = matched Form-Control. Token --sidebar-element-height
     bewusst NICHT angetastet (wuerde segmented-control etc. mitziehen).
     Revert: zurueck auf var(--sidebar-element-height, 45px) und Button
     auf -2px statt -1px. */
  min-height: calc(var(--sidebar-element-height, 45px) + 1px);
  /* TEST: Bündel D — Float-Halo (--surface-shadow-soft) am Accordion-Item,
     analog Versorgungslücke-Tabelle. Greift in beiden Verwendungsstellen
     (av_input.html:820 Bedarfsermittlung + choose_rurup.html:80 Tarifauswahl),
     beide sitzen in .bg-left-col-Sidebars auf App-BG. Hover/Open-Regeln
     unten (~Z.159 + ~Z.168) ueberschreiben mit komma-kombiniertem
     Float-Halo + Form-Focus-Halo, damit der Halo beim Aktivieren nicht
     wegspringt. Token in Dark = none → Halo nur Light. Revert: diese
     Zeile entfernen und die Hover/Open-Regeln auf reinen Form-Focus-Halo
     zurueck. */
  box-shadow: var(--surface-shadow-soft);
}

/* Padding auf Sidebar-Accordion-Button matcht .form-control (~45px Light / ~43px Dark).
   Hoeher gewichtete Selektoren noetig, weil Bootstrap mit S=30 und S=40 das Padding und
   den Radius am .accordion-button setzt (siehe :first-of-type / :last-of-type-Regeln).
   Bewusst feste Werte (font-size, line-height, font-weight) statt inherit oder Theme-
   Variablen, damit die Komponente in jedem Kontext identisch wirkt — auch wenn sie
   spaeter ausserhalb der Sidebar wiederverwendet wird (z.B. in Modalen oder anderen
   Bereichen, wo Eltern-Elemente wie h2 oder Cards andere Schriftgroessen haben). */
.sidebar-selector-accordion .accordion-item .accordion-button,
.sidebar-selector-accordion .accordion-item:first-of-type .accordion-button,
.sidebar-selector-accordion .accordion-item:last-of-type .accordion-button.collapsed {
  /* Button-min-height: Item-Outer ist nach Bündel F (~Z.113) auf 46 px
     angehoben (= Form-Control-Hoehe). Item border-box 46 = 44 Innenraum
     + 2 Border. Button min-height = -1 (statt -2), weil das Token weiter
     45 ist und wir nach Item-+1 jetzt 44 brauchen.
     Vor Bündel F war: Item 45 (=Token) − 2 Border = 43 Innenraum → Button
     -2. Revert: zusammen mit Item-min-height zurueckdrehen. */
  min-height: calc(var(--sidebar-element-height, 45px) - 1px);
  padding: var(--form-control-padding, 10px);
  /* Keine eigene Border am Button — das .accordion-item liefert die einzige
     sichtbare Border (vorher doppelt: 1px aussen + 1px innen = wirkt 2px dick). */
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
  color: var(--form-control-color, inherit);
  font-size: 0.925rem;
  line-height: 1.55;
  font-weight: 400;
  box-shadow: none;
}

.sidebar-selector-accordion .accordion-item .accordion-button:hover {
  /* Innerer Background bleibt am Default. Box-shadow wird hier NICHT
     gesetzt, weil das Wrapper-Item overflow:hidden hat und den Halo am
     Button clippen wuerde. Halo kommt via :has()-Regel weiter unten auf
     dem Wrapper. */
}

.sidebar-selector-accordion .accordion-item .accordion-button:not(.collapsed) {
  background: var(--form-control-bg-focus, var(--form-control-bg, #ffffff));
  color: var(--form-control-color, inherit);
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  /* Trennstrich Button <-> Accordion-Body bei geoeffnetem Zustand: noetig im
     Light-Mode, weil Button-Bg (#fff) und Body-Bg (#fff) identisch sind und
     ohne Strich kein visueller Uebergang erkennbar ist. */
  border-bottom: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
}

.sidebar-selector-accordion .accordion-item .accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

/* TEST: Hover (zugeklappt) auf BLAUEN Glow umgestellt — gleicher Look wie
   Offen-Zustand (--form-focus-border + --form-focus-shadow), konsistent
   mit dem blauen Hover der Form-Controls in .bg-left-col (forms.css ~Z305).
   Wirkt auch auf choose_rurup (nutzt dieselbe Klasse) — vom User abgenickt
   als gewünschte Konsistenz. Revert: zurück auf var(--hover-glow-shadow),
   border-color-Zeile raus. */
.sidebar-selector-accordion .accordion-item:has(.accordion-button.collapsed:hover) {
  border-color: var(--form-focus-border);
  /* TEST: Bündel D — Float-Halo + Form-Focus-Halo komma-kombiniert,
     damit der Ruhe-Float-Halo beim Hover nicht wegspringt. In Dark ist
     --surface-shadow-soft = none → effektiv nur Form-Focus-Halo. */
  box-shadow: var(--surface-shadow-soft), var(--form-focus-shadow);
}

/* Aufgeklappter Tarifauswahl-Zustand: blauer Border-Glow auf dem WRAPPER
   .accordion-item, damit der Halo Header + Body umschliesst (statt nur den
   Button). Werte gespiegelt am Form-Control-Focus-Stil. Selektor via :has(),
   weil .accordion-item selbst keine state-Klasse bekommt. */
.sidebar-selector-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--form-focus-border);
  /* TEST: Bündel D — Float-Halo + Form-Focus-Halo komma-kombiniert,
     analog Hover-Regel oben. Im aufgeklappten Zustand bleibt der
     Ruhe-Halo unter dem blauen Form-Focus-Halo erhalten. */
  box-shadow: var(--surface-shadow-soft), var(--form-focus-shadow);
}

/* Pfeil-Farbe in der Tarifauswahl: Bootstrap setzt den Chevron als
   background-image-SVG mit hardcoded fill #212529 + globale opacity 0.7
   (light theme) — wirkt heller als die €/% Suffixe in den Eingabefeldern.
   Loesung: SVG als mask, Color via --form-control-color → matched exakt
   die Form-Control-Textfarbe in Light + Dark, Opacity zurueck auf 1.

   TEST: Bündel E — SVG von Bootstrap-Default-Filled-Accordion-Icon
   (geschlossener Path mit fill-rule:evenodd, wirkte klobig) auf das
   stroked Bootstrap-.form-select-Pendant umgestellt: 2px Strichdicke,
   runde Endkappen + Verbindung, schlanker. stroke='%23000' damit
   mask-image die Stroke-Pixel als opak interpretiert (mask wertet
   Alpha-Channel des Source-SVG aus — funktioniert auch mit gestrichenen
   Paths). mask-size von 1.25rem auf 1rem reduziert, damit der Pfeil
   genauso filigran wirkt wie im .form-select. Farbe bleibt theme-aware
   via --form-control-color (Plus gegenueber dem hardcoded #343a40 im
   Bootstrap-.form-select-SVG). Rotation (180° beim Aufklappen) erbt
   unveraendert vom Bootstrap-Default .accordion-button:not(.collapsed)
   ::after { transform: rotate(-180deg) } — wir aendern nur Icon + Groesse,
   nicht transform. Revert: SVG zurueck auf das gefuellte Path,
   mask-size zurueck auf var(--bs-accordion-btn-icon-width, 1.25rem). */
.sidebar-selector-accordion .accordion-item .accordion-button::after,
.sidebar-selector-accordion .accordion-item .accordion-button:not(.collapsed)::after {
  background-image: none;
  background-color: var(--form-control-color);
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 0.75rem;
  mask-size: 1rem 0.75rem;
  opacity: 1;
  filter: none;
}

/* === ./css/core/payout.css === */
/* Auszahlung highlight chips */
.payout-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: var(--payout-highlight-bg);
  border: 1px solid var(--payout-highlight-border);
  color: var(--payout-highlight-text);
}

.payout-highlight-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.payout-highlight-title {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--payout-highlight-title);
}

.payout-highlight-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--payout-highlight-sub);
}

.payout-highlight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.payout-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--payout-chip-bg);
  border: 1px solid var(--payout-chip-border);
  color: var(--payout-chip-color);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payout-chip strong {
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
}

.payout-chip-net {
  background: var(--payout-chip-net-bg);
  border: 1px solid var(--payout-chip-net-border);
  color: var(--payout-chip-net-color);
}

.payout-chip-brut {
  background: var(--payout-chip-brut-bg);
  border: 1px solid var(--payout-chip-brut-border);
  color: var(--payout-chip-brut-color);
}

.payout-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--payout-chip-hover-shadow);
}

/* === ./css/core/dep_fon_plot.css === */
/* Styles for dep_fon_plot_all cost and progress components */
/* Note: Base progress bar styles (including height) are in utility_blocks.css */

/* Anlage-Ueberschrift ueber jedem Bar (z.B. "Depot", "Allianz PrivatRente ...").
   Bootstrap .lead hat font-weight:300 — hier explizit fett, damit die
   Anlagen-Bezeichnung gegen den restlichen Bar-Inhalt visuell anchort. */
.lead.dep-bar-heading {
  font-weight: 700;
}

/* Specificity-Hinweis: Selektor bewusst .progress.dep-progress (S=0,2,0)
   statt .dep-progress (S=0,1,0). Grund: utility_blocks.css ist nach
   dep_fon_plot.css importiert (siehe base_common.css), und das dortige
   .progress { background-color:#e9ecef; box-shadow:0 2px 6px rgba(0,0,0,.08); }
   wuerde sonst per Source-Order gewinnen — die wahrgenommene "Schattierung"
   im ungefuellten Bereich war exakt dieser geerbte outer drop-shadow plus
   der dunklere #e9ecef-Hintergrund. Mit S=0,2,0 gewinnt unsere Regel
   unabhaengig von der Reihenfolge. */
.progress.dep-progress {
  /* Height is controlled by .progress in utility_blocks.css */
  border-radius: 999px;
  /* Volltonfarbe (kein semi-transparenter Tint, kein inset-Ring, kein outer
     drop-shadow) — sauberes ungefuelltes Grau identisch zum Container-Card-Token. */
  background-color: var(--surface-soft-bg, #f5f5f7);
  overflow: visible;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  box-shadow: none;
}

[data-bs-theme="dark"] .progress.dep-progress,
:root[data-bs-theme="dark"] .progress.dep-progress,
[data-theme="dark"] .progress.dep-progress {
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.dep-progress .progress-bar {
  /* font-size and font-weight inherited from utility_blocks.css */
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.4rem;
  color: #f8fafc;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.65);
}

.dep-progress .dep-progress-bar--depot {
  color: #1f2937;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

/* Light background colors need dark text for contrast */
.dep-progress .progress-bar[style*="ffc107"],
.dep-progress .progress-bar[style*="255, 193, 7"],
.dep-progress .progress-bar[style*="255, 201, 80"],
.dep-progress .progress-bar[style*="ffcd39"],
.dep-progress .progress-bar[style*="ffd700"],
.dep-progress .progress-bar[style*="ffeb3b"],
.dep-progress .progress-bar[style*="fff176"],
.dep-progress .progress-bar[style*="f8f9fa"],
.dep-progress .progress-bar[style*="248, 249, 250"],
.dep-progress .progress-bar[style*="20c997"],
.dep-progress .progress-bar[style*="32, 201, 151"] {
  color: #1f2937 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .dep-progress .dep-progress-bar--depot,
:root[data-bs-theme="dark"] .dep-progress .dep-progress-bar--depot {
  color: #0f172a;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .dep-progress .progress-bar,
:root[data-bs-theme="dark"] .dep-progress .progress-bar {
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
}

.dep-progress-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.5rem;
}

.dep-progress-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  flex: 1;
}

.dep-progress-value {
  white-space: nowrap;
}

.dep-progress-subtext {
  font-size: 0.82rem;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

/* Leibrente: angehängtes Restkapital-Segment — ausgeblasst (faded), als Teil
   DESSELBEN Balkens an die Entnahme angehängt, nur dezent abgesetzt. Es ist
   keine echte Entnahme (nur bei Verrentung verfügbar).
   Farbe = Leibrente-Indigo rgb(99,102,241). */
.dep-progress .dep-progress-bar--rest {
  background-color: rgba(99, 102, 241, 0.30) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.14) 0px,
    rgba(255, 255, 255, 0.14) 10px,
    transparent 10px,
    transparent 20px
  ) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.7);
}

.dep-progress .dep-progress-bar--rest .dep-progress-value,
.dep-progress .dep-progress-bar--rest .dep-progress-subtext {
  color: #3730a3;
  text-shadow: none;
}

[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest,
:root[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest,
[data-theme="dark"] .dep-progress .dep-progress-bar--rest {
  background-color: rgba(139, 142, 255, 0.34) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.10) 0px,
    rgba(255, 255, 255, 0.10) 10px,
    transparent 10px,
    transparent 20px
  ) !important;
  border-left-color: rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-value,
:root[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-value,
[data-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-value,
[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-subtext,
:root[data-bs-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-subtext,
[data-theme="dark"] .dep-progress .dep-progress-bar--rest .dep-progress-subtext {
  color: #e0e7ff;
  text-shadow: none;
}

.dep-progress-delta {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Delta badge in light-colored progress bars (yellow/depot) */
.dep-progress-bar--depot .dep-progress-delta {
  color: #0f172a;
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

[data-bs-theme="dark"] .dep-progress-delta,
:root[data-bs-theme="dark"] .dep-progress-delta {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

[data-bs-theme="dark"] .dep-progress-bar--depot .dep-progress-delta,
:root[data-bs-theme="dark"] .dep-progress-bar--depot .dep-progress-delta {
  color: #0f172a;
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

/* Doppelregel zu payout.css — diese hier gewinnt per Source-Order. Token-
   basiert statt hardcoded, damit --payout-highlight-bg / --payout-highlight-
   border (in theme/light.css + dark.css) tatsaechlich greifen. Der frueher
   hier stehende [data-bs-theme="dark"]-Override war tot (Projekt nutzt
   data-theme, nicht data-bs-theme) — entfernt. */
.payout-highlight {
  border: 1px solid var(--payout-highlight-border);
  border-radius: 1rem;
  padding: 0.65rem 0.85rem;
  background-color: var(--payout-highlight-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.payout-highlight-title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.payout-highlight-sub {
  font-size: 0.82rem;
  font-weight: 600;
}

.payout-highlight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.payout-chip {
  border-radius: 999px;
  font-size: 0.82rem;
  padding: 0.2rem 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.payout-chip-net {
  background-color: rgba(25, 135, 84, 0.15);
  border: 1.5px solid rgba(25, 135, 84, 0.8);
  color: rgb(25, 135, 84);
}

.payout-chip-brut {
  background-color: rgba(13, 110, 253, 0.15);
  border: 1.5px solid rgba(13, 110, 253, 0.8);
  color: rgb(13, 110, 253);
}

[data-bs-theme="dark"] .payout-chip-net,
:root[data-bs-theme="dark"] .payout-chip-net {
  background-color: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.7);
  color: rgb(16, 185, 129);
}

[data-bs-theme="dark"] .payout-chip-brut,
:root[data-bs-theme="dark"] .payout-chip-brut {
  background-color: rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.7);
  color: rgb(14, 165, 233);
}

/* NETTO / BRUTTO badges — ruhige, design-konforme Chips.
   Frueher: satte Voll-Verlaeufe (Gruen) + Alarm-Rot, uppercase -> wirkte "wild"
   und kollidierte mit der Balkenfarbe. Jetzt: dezente Chips, kein Verlauf, kein
   Alarm-Rot, kein uppercase.
   - Netto sitzt AUF dem farbigen Balken -> heller Chip mit dezent gruenem Text
     (funktioniert auf jeder Akzent-/Depotfarbe, Light + Dark).
   - Brutto sitzt auf der Card -> neutraler Slate-Chip (in Light + Dark sichtbar). */
.netto-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #047857;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.netto-badge--right {
  flex-shrink: 0;
  margin-left: auto;
}

/* Depot/helle Balken: minimal kraeftigerer Chip fuer sauberen Kontrast. */
.dep-progress-bar--depot .netto-badge {
  background: rgba(255, 255, 255, 0.95);
}

.brutto-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.28);
  margin-left: 0.5rem;
}

/* Dark Mode: korrektes Attribut ist [data-theme="dark"] (NICHT data-bs-theme —
   das griff vorher nie). Netto-Chip bleibt hell (steht auf farbigem Balken);
   Brutto-Chip etwas heller fuer Kontrast auf dunkler Card. */
[data-theme="dark"] .brutto-badge {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.32);
}

/* Stripe-Pattern entfernt — die diagonalen Streifen wurden als
   "Schattierung" auf den gefuellten Balken wahrgenommen. Sauberer Volltonfill. */
.dep-progress .progress-bar {
  background-image: none;
}

.dep-progress .dep-progress-bar--depot {
  background-image: none;
}

/* Chart legend hint */
.chart-brutto-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #64748b !important;
  margin-bottom: 0.5rem;
}

.chart-hint-center {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-hint-spacer {
  width: 20px;
  flex-shrink: 0;
}

.chart-hint-info {
  flex-shrink: 0;
}

.chart-hint-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

[data-bs-theme="dark"] .chart-brutto-hint,
:root[data-bs-theme="dark"] .chart-brutto-hint {
  color: #cbd5e1 !important;
}

/* ============================================
   Anbietervergleich: "weicht vom Standard ab"-Badge
   Markiert Anlageformen mit per-Anbieter-Werten (Begin Alter / Mtl. Investition /
   Überschuss), die vom Webapp-Default abweichen. Inline + kompakt -> keine
   vertikale Verlängerung der Produkt-Zeile. Dark via [data-theme="dark"].
   ============================================ */
.contract-diff-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
  background: #fff3cd;
  color: #7a5a00;
  border: 1px solid #ffe39e;
}

.contract-diff-badge-icon {
  width: 11px;
  height: 11px;
}

/* Zurücksetzen-Button am Ende des Badges (data-af-badge-reset) — löst den
   Voll-Reset des Tarif-Popups aus, ohne es zu öffnen */
.contract-diff-badge-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 4px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

.contract-diff-badge-reset svg {
  width: 11px;
  height: 11px;
}

.contract-diff-badge-reset:hover {
  color: #4a3800;
}

[data-theme="dark"] .contract-diff-badge-reset:hover {
  color: #ffe9a8;
}

[data-theme="dark"] .contract-diff-badge {
  background: rgba(245, 197, 66, 0.16);
  color: #f3cd6b;
  border-color: rgba(245, 197, 66, 0.34);
}

/* ============================================
   Balken-Redesign (.afbar-*)
   Anlagefinder (section_bars.html) UND Tarifvergleich
   (dep_fon_plot_all/section_list.html, live + Auswertung/PDF).
   Aufbau je Entry: Werte-Zeile + Summenzeile rechts → Segment-Balken
   (Entnahme voll, Restkapital schraffiert+blasser; Kosten gestapelt
   alpha/beta/gamma) → Beschriftungen UNTER dem Balken.
   ============================================ */
.afbar {
  margin-top: 0.1rem;
  margin-bottom: 0.8rem;
}

/* Anlageform passt nicht zum gewählten Auszahlmodus (z.B. Depot + Leibrente,
   AV-Depot/Rürup + Kapitalisierung). Solche Balken werden ans Ende sortiert und
   hier deutlich gedimmt + entsättigt — der Berater sieht die Zahlen weiterhin,
   erkennt aber sofort, dass der Vergleich so nicht passt. Theme-aware (Light +
   Dark) über opacity/grayscale; beim Hover etwas klarer für den genauen Blick. */
.afbar-unsupported {
  opacity: 0.55;
  filter: grayscale(0.6);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.afbar-unsupported:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Trennlinie zwischen passenden und nicht-passenden Anlagen, zugleich
   Klapp-Schalter: waagerechte Linie mit Label + Chevron. Ein Klick klappt die
   ausgegrauten Anlagen darunter ein/aus (general-sibling-Selektor, ohne JS-
   Sichtbarkeits-Toggle). Theme-aware (Light + Dark). */
.afbar-mode-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0.3rem 0 0.9rem;
  padding: 0.1rem 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.82em;
  cursor: pointer;
  transition: color 0.15s ease;
}

.afbar-mode-divider::before,
.afbar-mode-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--form-control-border, rgba(0, 0, 0, 0.12));
}

.afbar-mode-divider__label {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Show-/Hide-Label-Pair (analog .factor-extras-toggle): eingeklappt -> "anzeigen",
   ausgeklappt -> "ausblenden". Es wird nur das inaktive Label versteckt; das
   aktive behaelt sein Default-Display. Default-Render ist eingeklappt. */
.afbar-mode-divider.is-collapsed .afbar-mode-divider__label--hide,
.afbar-mode-divider:not(.is-collapsed) .afbar-mode-divider__label--show {
  display: none;
}

.afbar-mode-divider__chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.afbar-mode-divider:hover,
.afbar-mode-divider:focus-visible {
  color: var(--nav-link-hover-color, rgb(13, 110, 253));
  outline: none;
}

/* Eingeklappt: Chevron nach rechts drehen + alle folgenden ausgegrauten
   Anlagen ausblenden (sie sind Geschwister NACH dem Divider). */
.afbar-mode-divider.is-collapsed .afbar-mode-divider__chevron {
  transform: rotate(-90deg);
}

.afbar-mode-divider.is-collapsed ~ .afbar-unsupported {
  display: none;
}

/* Meta-Zeile direkt über dem Balken: Stats-Gruppe links, Summe rechts, Grundlinien bündig */
.afbar-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  /* wrap: auf breiten Screens unsichtbar (alles passt in eine Zeile), auf
     Tablet-Breiten (iPad quer) bricht der Summen-Block als ganze Zeile um,
     statt zerquetscht Wort-für-Wort zu stapeln. */
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin-bottom: 0.25rem;
}

/* Einzeiliges Paar-Raster: alle Pairs in einer Zeile; Trenner · via ::before.
   Cross-Entry-Alignment: :first-child bekommt min-width groß genug für die
   längste Auszahlungs-Variante ("einmalig mit 67") → Paar 2 aller Entries
   startet auf exakt derselben x-Position, egal wie lang Paar 1 ist.
   Auf schmalen Containern (iPad quer) dürfen die Pairs umbrechen, statt
   rechts aus der Card zu laufen. */
.afbar-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.8rem;
  min-width: 0;
}

.afbar-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3em;
}

/* Spalte 1 (Auszahlung) hält die längste Variante: "einmalig mit 67" */
.afbar-stat:first-child {
  min-width: 13.5rem;
}

/* iPad quer / schmale Laptops: Cross-Entry-Alignment aufgeben, bevor die
   erzwungene Spaltenbreite unnötige Umbrüche und Platzverlust verursacht. */
@media (max-width: 1499.98px) {
  .afbar-stat:first-child {
    min-width: 0;
  }
}


.afbar-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #64748b;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.afbar-stat-value {
  font-size: var(--nav-tool-font-size, 15px);
  font-weight: 600;
  white-space: nowrap;
}

/* Klammer-Zusätze "(davon Vorabpauschale: …)" / "(davon Fondswechsel: …)" neben
   Brutto mtl. (Tab "Monatliche Auszahlung", Depot) — dezenter als die Hauptzahl. */
.afbar-stat-vp,
.afbar-stat-fw {
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
  white-space: nowrap;
}

/* Hover-Kasten am Brutto-Wert: zeigt die davon-Werte selbst (eine Zeile pro
   Anteil, \n im title bleibt via pre-line erhalten) — etwas breiter als der
   tooltip-thin-Default, damit "davon Vorabpauschale: 1.234,56 €" nicht umbricht. */
/* Doppelklasse: gleiche Spezifität wie .tooltip.tooltip-thin würde per
   Bundle-Reihenfolge verlieren (profile_card_list.css kommt später). */
.tooltip.tooltip-thin.tooltip-davon .tooltip-inner {
  max-width: 320px;
  white-space: pre-line;
}

/* Klammern standardmäßig eingeklappt: Brutto-Wert ist Klick-Toggle (Tooltip als
   Hover-Affordance), .is-extras-open klappt die Klammern nach rechts aus.
   align-self:center statt baseline: overflow:hidden verschiebt die Baseline
   eines Inline-Flex auf die Box-Unterkante und würde den Text hochdrücken. */
.afbar-stat-value--toggle {
  cursor: pointer;
}

.afbar-stat-value--toggle:hover,
.afbar-stat-value--toggle:focus-visible {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.afbar-stat-extras {
  display: inline-flex;
  align-items: baseline;
  align-self: center;
  gap: 0.3em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

.afbar-stat.is-extras-open .afbar-stat-extras {
  max-width: 30rem;
  opacity: 1;
}

.afbar-stat-info svg,
.afbar-stat-info [data-feather] {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

/* Summenzeile: fette Gesamtsumme + graue Unterzeile, rechtsbündig.
   margin-left:auto: bleibt auch rechtsbündig, wenn der Block bei schmalen
   Containern (iPad quer) als eigene Zeile unter die Stats umbricht. */
.afbar-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.afbar-sum-value {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
}

.afbar-sum-sub {
  font-size: 0.72rem;
  color: #64748b;
}

/* Kosten-Tab: klickbarer „detaillierte Kosten"-Link rechtsbündig in der
   Kostenarten-Legende (afbar-labels) — float:right, damit die Kostenarten
   links daneben/darunter weiterlaufen. Gilt für Anlagefinder + Tarifvergleich. */
.afbar-costdetail {
  float: right;
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0d6efd;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease;
}

.afbar-costdetail:hover {
  text-decoration: underline;
}

.afbar-costdetail svg,
.afbar-costdetail [data-feather] {
  width: 14px;
  height: 14px;
}

[data-theme="dark"] .afbar-costdetail {
  color: #6ea8fe;
}

/* Kompakt-Modus der Kosten-Legende (afbar_label_compact.js schaltet ihn bei
   drohendem Zeilenumbruch) — ZWEISTUFIG seit 30.07.2026:
     Stufe 1 (.afbar-labels--compact):  nur Kurz-Labels, Prozente BLEIBEN.
     Stufe 2 (.afbar-labels--nodetail): bricht es dann noch um, fallen auch
                                        die %-Klammerzusätze.
   Vorher fiel beides gleichzeitig: Tarife mit drei Kostenblöcken verloren
   sofort saemtliche Prozentsätze, Tarife mit zwei behielten sie — beim
   Ab-/Anwählen von Anlageformen kippte das sichtbar hin und her. Die
   Detailwerte stehen ohnehin auch im Kosten-Modal ("detaillierte Kosten"). */
.afbar-labels--nodetail .afbar-payout-detail {
  display: none;
}

/* Balken: neutrale Spur (Track) volle Breite, Segmente als Pill */
.afbar-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 0.77rem;
  border-radius: 999px;
  background-color: var(--surface-soft-bg, #f5f5f7);
  overflow: hidden;
}

.afbar-seg {
  height: 100%;
  min-width: 0;
}

/* Restkapital-Segment: gleiche Anlagenfarbe (inline background-color), aber
   blasser + schraffiert. Das Muster liegt als halbtransparentes Overlay über
   der Farbe (Vorbild .dep-progress-bar--rest) — funktioniert je Anlagenfarbe. */
.afbar-seg--rest {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.62) 0px,
    rgba(255, 255, 255, 0.62) 7px,
    rgba(255, 255, 255, 0.34) 7px,
    rgba(255, 255, 255, 0.34) 14px
  );
  border-left: 2px solid rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .afbar-seg--rest {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(13, 17, 23, 0.55) 0px,
    rgba(13, 17, 23, 0.55) 7px,
    rgba(13, 17, 23, 0.28) 7px,
    rgba(13, 17, 23, 0.28) 14px
  );
  border-left-color: rgba(255, 255, 255, 0.25);
}

/* Steuervorteil-Segment (B3): BLASSE Vollfarbe der Anlage, KEINE Schraffur —
   gleicher Look wie der helle Reinvest-Fondspolice-Stack. Aufhellung als
   deckendes Overlay über der Inline-Anlagenfarbe (Light: weiß ≈ Stack-Pastell,
   Dark: dunkel abgesenkt), Trennkante wie beim Rest-Segment. */
.afbar-seg--tax-adv {
  background-image: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62));
  border-left: 2px solid rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .afbar-seg--tax-adv {
  background-image: linear-gradient(rgba(13, 17, 23, 0.45), rgba(13, 17, 23, 0.45));
  border-left-color: rgba(255, 255, 255, 0.25);
}

/* Rürup-Variante: gestrichelte Border (Restkapital eingeschränkt vererbbar) */
.afbar-seg--rest-locked {
  border: 1.5px dashed rgba(100, 116, 139, 0.75);
  border-radius: 0 999px 999px 0;
  background-clip: padding-box;
}

[data-theme="dark"] .afbar-seg--rest-locked {
  border-color: rgba(148, 163, 184, 0.55);
}

/* Beschriftungen unter dem Balken: links Entnahme, Rest-Label am Segment-Start
   (absolute, inline left: X%) oder rechtsbündig (.is-right) wenn es überstehen würde */
.afbar-labels {
  position: relative;
  margin-top: 0.3rem;
  min-height: 1.15rem;
  font-size: 0.78rem;
  color: #64748b;
}

.afbar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.afbar-label strong {
  color: var(--bs-body-color, #1f2937);
  font-weight: 600;
}

.afbar-label--gap {
  margin-left: 1.25rem;
}

.afbar-label--rest {
  position: absolute;
  top: 0;
}

.afbar-label--rest.is-right {
  right: 0;
  left: auto;
}

/* Qualifier "(vererbbar)" hinter Restkapital bei Leibrente – dezent, kursiv */
.afbar-rest-erb {
  font-style: italic;
  font-size: 0.92em;
  color: #94a3b8;
}

/* Klammer-Erklärung "(X € jrl. × Y Jahre)" hinter dem Auszahlungs-Wert – dezent */
.afbar-payout-detail {
  font-size: 0.92em;
  font-weight: 400;
  color: #94a3b8;
}

/* Farbpunkte: voll (Entnahme) bzw. schraffiert (Restkapital, gleiches Muster klein) */
.afbar-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.afbar-dot--rest {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.62) 0px,
    rgba(255, 255, 255, 0.62) 2px,
    rgba(255, 255, 255, 0.34) 2px,
    rgba(255, 255, 255, 0.34) 4px
  );
}

/* Steuervorteil-Punkt (B3): blasse Vollfarbe passend zum Segment, ohne Muster */
.afbar-dot--tax-adv {
  background-image: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62));
}

[data-theme="dark"] .afbar-dot--tax-adv {
  background-image: linear-gradient(rgba(13, 17, 23, 0.45), rgba(13, 17, 23, 0.45));
}

/* Steuervorteil-Label (B3): reiht sich als Inline-Einheit hinter dem
   Summe-Block in Spalte 1 der Legenden-Zeile ein; nowrap hält Punkt + Wert
   zusammen, der Umbruch passiert davor (Spalte 1 hat white-space: normal) */
.afbar-taxadv-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 1.25rem;
  white-space: nowrap;
}

/* 2-Spalten-Raster: Spalte 1 endet an der Restkapital-Segment-Grenze
   (--afbar-rest-left, inline aus der enrich-Geometrie e_w%) — der Restkapital-
   Block "zeigt" auf sein Segment. Beide Clamps stecken in der Track-Funktion:
   minmax(max-content, X%) = Spalte nie schmaler als der linke Text (+ padding
   als Mindestabstand, linker Block hat Vorrang), Ziel X%. Spalte 2 braucht
   einen expliziten max-content-Floor: das Item darunter hat min-width:0 +
   overflow:hidden, ein nacktes 1fr kollabiert daher bei --afbar-rest-left:100%
   (kein Rest-Segment) auf 0px und der Block verschwindet. Mit dem Floor stoppt
   Spalte 1 an der Block-Breite — Block rutscht bei Platzmangel nur so weit
   nach links wie nötig (Umschlag-Ersatz), ohne Rest-Segment rechtsbündig. */
.afbar-labels--split {
  display: grid;
  grid-template-columns: minmax(max-content, var(--afbar-rest-left, 60%)) minmax(max-content, 1fr);
  align-items: baseline;
  gap: 0;
}

.afbar-labels--split > .afbar-label {
  white-space: normal;
  padding-right: 1rem; /* ~16px Mindestabstand zum Restkapital-Block */
  min-width: 0;
}

/* Restkapital-Spalte im Grid – kein absolute mehr */
.afbar-label--rest-grid {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.78rem;
  color: #64748b;
}


.afbar-label--rest-grid strong {
  color: var(--bs-body-color, #1f2937);
  font-weight: 600;
}

[data-theme="dark"] .afbar-label--rest-grid {
  color: #94a3b8;
}

[data-theme="dark"] .afbar-label--rest-grid strong {
  color: #e2e8f0;
}

[data-theme="dark"] .afbar-labels {
  color: #94a3b8;
}

[data-theme="dark"] .afbar-label strong {
  color: #e2e8f0;
}

[data-theme="dark"] .afbar-rest-erb {
  color: #64748b;
}

[data-theme="dark"] .afbar-payout-detail {
  color: #64748b;
}

[data-theme="dark"] .afbar-dot--rest {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(13, 17, 23, 0.55) 0px,
    rgba(13, 17, 23, 0.55) 2px,
    rgba(13, 17, 23, 0.28) 2px,
    rgba(13, 17, 23, 0.28) 4px
  );
}

[data-theme="dark"] .afbar-stat-label,
[data-theme="dark"] .afbar-stat-vp,
[data-theme="dark"] .afbar-stat-fw,
[data-theme="dark"] .afbar-sum-sub {
  color: #94a3b8;
}

/* ── Tab "Monatliche Auszahlung" (.afbar-monthly-*) ──
   Kopfzeile als Flex-Row: Produktname links, graue Restkapital/Phase-Info rechts.
   Steuer-Segment: gleiche Anlagenfarbe, aber blass über Deckkraft — bewusst
   KEINE Schraffur (semantisch anders als Restkapital = Schraffur). */
.afbar-monthly-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

/* Rechte Gruppe in der Titel-Zeile: einzeiliger Summen-Block + i-Icons, baseline-bündig.
   margin-left:auto hält den Block rechtsbündig — auch wenn er bei schmalen
   Containern (iPad quer) als eigene Zeile unter die Stats umbricht. */
.afbar-head-right {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-left: auto;
}

/* Summe im Titel-Kopf (sort_btn==0): Label links neben der großen Zahl, eine Zeile.
   nowrap: Label + Zahl bleiben IMMER eine kompakte Zeile — nie Wort-Stapel. */
.afbar-head-right .afbar-sum {
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Payout-Mode-Pill: grauer Modus-Label links neben dem Tarif-Titel
   (Leibrente / Entnahmeplan / Auszahlplan / Kapitalisierung).
   Border + Radius aus DS-Tokens; optisch sonst wie bisheriger Inline-Style. */
.dep-payout-pill {
  font-size: 0.68em;
  background: rgba(100, 100, 100, 0.08);
  color: inherit;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  font-weight: 500;
  vertical-align: middle;
}

/* Bestandsvertrags-Pill: markiert den Balken, der der laufende Vertrag des
   Kunden ist. Bewusst kräftiger als die Payout-Pill — es ist die eine
   Unterscheidung, die der Makler im Vergleich nie verwechseln darf:
   das hier ist der Ist-Zustand, alles andere sind Angebote. */
.dep-bestand-pill {
  font-size: 0.66em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.18));
  color: var(--bs-warning-text-emphasis, #7a5200);
  border: 1px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.45));
  border-radius: var(--radius-md, 12px);
  font-weight: 700;
  vertical-align: middle;
}
/* Dark: die Bootstrap-Warnton-Variablen sind hier nicht dunkel gesetzt, der
   Default-Text (#7a5200) war auf dem dunklen Bernstein kaum lesbar. */
[data-theme="dark"] .dep-bestand-pill {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.45);
}
/* Die Kernbotschaft der Wechselpruefung unter der "Gerechnet mit"-Zeile des
   Bestandsbalkens (Feedback 14.09.2026). Zugeklappt EINE Zeile in der Tonlage
   der Werte-Zeile, damit sich am Balken nichts verschiebt; die drei Saetze
   erscheinen erst auf Klick. */
.dep-bestand-werte,
.dep-bestand-erklaerung,
.dep-bar-heading ~ .ff-leiste { flex: 0 0 100%; order: 10; } /* Icons bleiben in der Kopfzeile */
/* Die Ueberschrift des Bestandsbalkens (Pill + Name + Badge-Zeile) ist so
   breit wie der Kopf; mit flex-basis auto blieb fuer die Icons kein Platz in
   der Zeile und sie rutschten unter die Erklaerbox. */
.flex-wrap > .dep-bar-heading,
.afbar-monthly-head > .dep-bar-heading { flex: 1 1 0; min-width: 0; }
.flex-wrap > .dep-bar-heading ~ div:last-child,
.afbar-monthly-head > .afbar-head-right { flex: 0 0 auto; }
.dep-bestand-erklaerung { margin-top: 0.1rem; line-height: 1.4; }
.dep-bestand-erklaerung > summary {
  list-style: none;
  cursor: pointer;
  color: var(--bs-secondary-color, #6c757d);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}
.dep-bestand-erklaerung > summary::-webkit-details-marker { display: none; }
.dep-bestand-erklaerung__kurz strong { color: var(--bs-body-color, inherit); font-weight: 600; }
.dep-bestand-erklaerung__mehr {
  font-size: 0.9em;
  color: var(--bs-link-color, #0d6efd);
  text-decoration: underline dotted;
  white-space: nowrap;
}
.dep-bestand-erklaerung[open] > summary .dep-bestand-erklaerung__mehr { text-decoration: none; opacity: .6; }
/* Info-Chip (Herkunft eines Werts, kein "weicht ab"): ruhiger Blauton, kein
   Reset-Knopf. Genutzt fuer "aus Bestandsvertrag" und "Start mit X EUR". */
.contract-diff-badge--info {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .contract-diff-badge--info {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.4);
}
.dep-bestand-erklaerung__body {
  margin-top: 0.3rem;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.6));
  background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.08));
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
}
[data-theme="dark"] .dep-bestand-erklaerung__body {
  background: rgba(251, 191, 36, 0.08);
  border-left-color: rgba(251, 191, 36, 0.45);
}
.dep-bestand-erklaerung__body > ul { padding: 0; margin: 0; list-style-position: inside; }
.dep-bestand-erklaerung > ul li + li { margin-top: 0.15rem; }
[data-theme="dark"] .dep-bestand-erklaerung > ul {
  background: rgba(251, 191, 36, 0.08);
  border-left-color: rgba(251, 191, 36, 0.45);
}

/* Lead-Vorteil-Card: grüner Vorsprung des Spitzenreiters (unterstützte Bars)
   vor Platz 2, vorgerechnet im Backend. Sitzt LINKS vom Summen-Label als
   kompakte Card (Medaille + Wert). Card-Töne über Tokens (auto dark-fähig),
   Grünwert in Light + Dark identisch. */
.afbar-lead-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px;
  padding: 4px 10px;
  background: var(--surface-soft-bg);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  white-space: nowrap;
}

/* Ablauf-Kopf (sort_btn==0): Card ganz links im Sum-Block, vertikal mittig
   (der Block selbst ist baseline-ausgerichtet). ~12px Abstand Card→Label
   (4px Card-Margin + 0.5rem Flex-Gap des Sum-Blocks). */
.afbar-head-right .afbar-sum .afbar-lead-card {
  margin: 0 4px 0 0;
  align-self: center;
}

/* Titelzeile (sort_btn==0): Card direkt in afbar-head-right (kein afbar-sum-Wrapper),
   rechts neben dem Tarif-Namen. Kein 12px-Außenabstand, vertikal mittig in der
   baseline-ausgerichteten Titelzeile. */
.afbar-head-right > .afbar-lead-card {
  margin: 0;
  align-self: center;
}

.afbar-lead-medal {
  color: #21C55E;
  width: 18px;
  height: 18px;
}

.afbar-lead-val {
  color: #21C55E;
  font-weight: 700;
  font-size: var(--nav-tool-font-size, 15px);
  line-height: 1;
}

.afbar-monthly-headinfo {
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
}

/* Balken-Zeile: Balken-Spalte (~75%) links, Netto-Block (~25%) rechts daneben,
   vertikal mittig zum Balken. Im Block: Label-Zeile, GROSSE Netto-Zahl (die
   Rente darf herausstechen — nur über Größe, kein Kasten/Hintergrund),
   Restkapital-Zeile. */
.afbar-monthly-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
}

.afbar-monthly-barcol {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 75%;
}

.afbar-monthly-value {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  white-space: nowrap;
}

.afbar-monthly-net {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

/* Brutto-Stat links über dem Balken */
.afbar-monthly-toplabels {
  margin-bottom: 0.3rem;
}

/* Track-Wrapper: traegt den Marker-Strich am Netto/Steuer-Übergang (ragt leicht
   über/unter den Balken — overflow:hidden der Spur wuerde ihn sonst kappen).
   Marker-Farbe = Anlagenfarbe, kommt inline (background-color: entry.color). */
.afbar-monthly-trackwrap {
  position: relative;
}

.afbar-monthly-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
}

/* Segment-Grenz-Marker für die Tabs Ablauf/Steuern/Kosten (sort_btn 0/1/2).
   Eigener position:relative-Kontext, dessen Breite exakt der Track entspricht
   (Block, 100%); die .afbar-track liegt darin und hat overflow:hidden, daher
   stehen die Marker als Geschwister NEBEN der Track. */
.afbar-segwrap {
  position: relative;
}

/* Gleiche Optik wie .afbar-monthly-marker (~2px, ±4px überstehend), aber
   wiederverwendbar für alle Tab-Balken. Farbe kommt inline (linkes Segment),
   daher Light + Dark identisch ohne eigenen Theme-Block. */
.afbar-seg-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
}

.afbar-seg--tax {
  opacity: 0.35;
}

.afbar-dot--tax {
  opacity: 0.35;
}

/* Punkt + fette Netto-Zahl nebeneinander (Tab "Monatliche Auszahlung", rechter Block) */
.afbar-monthly-netrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Lead-Card ganz links in der Netrow (vor dem Farbpunkt): ~11px Card→Punkt
   (0.3rem Card-Margin + 0.4rem Flex-Gap der Netrow), vertikal mittig. */
.afbar-monthly-netrow .afbar-lead-card {
  margin: 0 0.3rem 0 0;
}

[data-theme="dark"] .afbar-monthly-headinfo {
  color: #94a3b8;
}
/* ── Drag-Griff an der Segment-Grenze Entnahme|Restkapital (Anlagefinder,
   Fondspolice im Entnahmeplan-Modus, Tab Ablaufleistung). Vertikale Linie
   höher als der Balken in Anlagenfarbe (--afbar-drag-color, inline aus dem
   Template), Pfeil-Grip mittig, dezenter 2s-Puls. JS: afbar_drag.js ── */
.afbar-trackwrap--drag {
  position: relative;
}

.afbar-drag-handle {
  position: absolute;
  top: 50%;
  height: 1.7rem;
  width: 22px;
  margin-left: -11px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  z-index: 3;
  color: var(--afbar-drag-color, #0d6efd);
}

.afbar-drag-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  animation: afbar-drag-pulse 2s ease-in-out infinite;
}

[data-theme="dark"] .afbar-drag-line {
  box-shadow: 0 0 0 1.5px rgba(13, 17, 23, 0.85);
}

.afbar-drag-grip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  border-radius: 4px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid currentColor;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

.afbar-drag-grip svg {
  width: 12px;
  height: 8px;
  display: block;
}

[data-theme="dark"] .afbar-drag-grip {
  background: #1c2128;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Während des Ziehens: Puls aus (ruhige Linie unterm Cursor) */
.afbar-trackwrap--drag.is-dragging .afbar-drag-line {
  animation: none;
}

/* Server-Roundtrip läuft: Griff deaktiviert, Grip zeigt Mini-Spinner */
.afbar-trackwrap--drag.is-busy .afbar-drag-handle {
  pointer-events: none;
  opacity: 0.45;
}

.afbar-trackwrap--drag.is-busy .afbar-drag-line {
  animation: none;
}

.afbar-trackwrap--drag.is-busy .afbar-drag-grip svg {
  display: none;
}

.afbar-trackwrap--drag.is-busy .afbar-drag-grip::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: afbar-drag-spin 0.8s linear infinite;
}

@keyframes afbar-drag-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes afbar-drag-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Nach der Server-Antwort: Segmente + Griff blenden von der gezogenen auf die
   echte Server-Position über (afbar_drag.js animateToServer) — kein hartes
   Springen. Nur während .is-animating aktiv, sonst stören die Transitions
   das direkte Mitführen beim Ziehen. */
.afbar-trackwrap--drag.is-animating .afbar-seg {
  transition: width 0.3s ease;
}

.afbar-trackwrap--drag.is-animating .afbar-drag-handle {
  transition: left 0.3s ease;
}

/* Kompakte Achtung-Hinweisbox für Entry-Warnhinweise (Tab 0 + Tab 4).
   Farben identisch zu .panel-tax-hint (modal_panels.css) — keine Duplikation
   eigener Werte; shrink-to-fit via inline-flex. */
.afbar-hint-warn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 8px;
  background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 100%);
  border: 1px solid #f4d03f;
  border-radius: 5px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #856404;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.afbar-hint-warn::before {
  content: "⚠";
  font-size: 0.7rem;
  flex-shrink: 0;
  line-height: 1;
  color: #d4a106;
}

[data-theme="dark"] .afbar-hint-warn {
  background: linear-gradient(135deg, rgba(254, 249, 231, 0.1) 0%, rgba(254, 243, 205, 0.15) 100%);
  border-color: rgba(244, 208, 63, 0.4);
  color: #ffc107;
}

[data-theme="dark"] .afbar-hint-warn::before {
  color: #ffc107;
}

/* Modifier für die ausklappbare Erschöpfungs-Warnung: shrink-to-fit (nur so breit
   wie der Inhalt), links ausgerichtet. Dreieck/⚠ + Padding bleiben wie gehabt. */
.afbar-hint-warn--block {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

/* Ausklappbarer Rest der Erschöpfungs-Warnung (reines natives <details>, KEIN JS).
   Eingeklappt: nur erster Satz + blaues "…". Ausgeklappt: Rest-Text + blaues
   "(schließen)" am Ende. Reihenfolge per flex order: Body (order 1) vor dem
   Summary-Toggle (order 2), obwohl <summary> im DOM zwingend zuerst steht. */
.afbar-hint-more {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
}

/* PDF-Export: zwei html2canvas-1.4.1-Schwächen an den Hinweis-Boxen
   (empirisch reproduziert, Minimal-Repro s. Commit):
   1. Geschlossene <details> kennt es nicht — der versteckte Ausklapp-Text
      wird als 1-Zeichen-Spalte quer über die Sektion gemalt. Im PDF ist eh
      nichts klickbar -> Ausklapper beim Export komplett ausblenden.
   2. <span>-Kinder in inline-flex-Containern werden NICHT gemalt (der
      Haupttext des Hinweises fehlte im PDF komplett) -> beim Export auf
      inline-block umstellen (width:fit-content wirkt dort identisch,
      shrink-to-fit bleibt); der flex-gap zum ⚠ wird durch margin ersetzt.
   Beides nur im Export-Modus — On-Screen-Verhalten unverändert. (Light UND
   Dark abgedeckt — der Export rendert immer im Light-Theme.) */
body.pdf-exporting .afbar-hint-more {
  display: none !important;
}

body.pdf-exporting .afbar-hint-warn {
  display: inline-block !important;
}

body.pdf-exporting .afbar-hint-warn::before {
  margin-right: 0.35rem;
}

/* nativen Marker (Dreieck) entfernen */
.afbar-hint-more > summary {
  list-style: none;
}
.afbar-hint-more > summary::-webkit-details-marker {
  display: none;
}

/* Toggle-Anker: Hyperlink-Optik, kein Kasten */
.afbar-hint-more-toggle {
  order: 2;
  cursor: pointer;
  color: var(--panel-accent, #1767ff);
  white-space: nowrap;
  font-weight: 600;
}
.afbar-hint-more-toggle:hover {
  text-decoration: underline;
}
.afbar-hint-more-toggle:focus-visible {
  outline: 1px dotted var(--panel-accent, #1767ff);
  outline-offset: 2px;
}

/* Label-Wechsel rein via CSS: "(…)" geschlossen, "(schließen)" offen.
   Führendes geschütztes Leerzeichen trennt sauber vom vorausgehenden Wort. */
.afbar-hint-more-toggle::after {
  content: "\00a0(\2026)";
}
.afbar-hint-more[open] > .afbar-hint-more-toggle::after {
  content: "\00a0(schließen)";
}

/* Rest-Text fließt inline in der gelben Box, vor dem Toggle */
.afbar-hint-more-body {
  order: 1;
}

/* Dark-Mode: blauer Toggle lesbar halten (Box-Dark-Variante bleibt unberührt) */
[data-theme="dark"] .afbar-hint-more-toggle {
  color: var(--panel-accent, #4d8bff);
}

/* ============================================================
   Steuersatz-Modal — minimalistische Steuer-Herleitung
   ============================================================ */
/* Schlüssel-Botschaft (eine kompakte Callout-Zeile oben statt Fließtext je Karte) */
.steuer-key {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 12px);
  background: var(--panel-accent-light, rgba(23, 103, 255, 0.08));
  color: var(--panel-accent, #1767ff);
  font-size: 0.9rem;
  line-height: 1.4;
}
.steuer-key svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Kopfzeile Einzelspalten-Karte (Rürup): Titel + Ergebnis-Pille */
.steuer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.steuer-rate-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  background: var(--panel-accent-light, rgba(23, 103, 255, 0.1));
  color: var(--panel-accent, #1767ff);
}

/* Formel-Bausteine des ⌀-Steuersatzes: die beiden Zahlen, aus denen die
   Steuersatz-Pille berechnet wird (Brutto-Basis und gezahlte Steuer bzw.
   Steuer gesamt), bekommen einen dezenten Oval-Rand in der Akzentfarbe —
   Zahl bleibt in normaler Textfarbe (bewusst KEINE gefüllte Pille wie
   .steuer-rate-pill, nur Rand). */
.steuer-calc-pill {
  display: inline-block;
  border: 1px solid var(--panel-accent, #1767ff);
  border-radius: 999px;
  padding: 0 0.45rem;
  white-space: nowrap;
}

/* Herleitungstabelle: ruhiger; Ergebniszeile (gezahlte Steuer / Netto) hervorheben */
.steuer-table {
  font-size: 0.92em;
  margin-bottom: 0.35rem;
}
.steuer-table td {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}
.steuer-table tr.is-result td {
  background: var(--panel-accent-light, rgba(23, 103, 255, 0.08));
  border-top: 0;
}
.steuer-table tr.is-result td:first-child {
  border-radius: 7px 0 0 7px;
}
.steuer-table tr.is-result td:last-child {
  border-radius: 0 7px 7px 0;
}

/* Formel-Caption unter der Tabelle (Ø-Satz = Steuer ÷ Brutto) — Rechnung bleibt,
   ohne die große Satz-Zeile zu doppeln */
.steuer-formula {
  font-size: 0.82em;
  color: var(--bs-secondary-color, #868e96);
  margin-bottom: 0;
}

/* Vergleichstabelle: Schritt-Beschriftung einmal links, je Phase eine Wertspalte.
   Kopf je Phase = Name + Effektivsatz-Pille. */
.steuer-compare thead th {
  border: 0;
  padding-bottom: 0.5rem;
  vertical-align: bottom;
}
.steuer-col-head {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.steuer-col-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.steuer-compare td,
.steuer-compare th {
  vertical-align: middle;
}
/* Kopfzeile oben ausrichten: die Entnahmephase-Zelle ist durch den Hinweissatz
   ("Summe der Phase …") höher — ohne top-Ausrichtung rutscht der Restkapital-
   Kopf (ohne Hinweis) vertikal in die Mitte und steht tiefer als die
   Entnahmephase-Überschrift. */
.steuer-compare .steuer-compare-head th {
  vertical-align: top;
}
.steuer-compare td.text-end,
.steuer-compare th.text-end {
  white-space: nowrap;
}
/* Inline-Hinweis ersetzt die frühere dritte Notiz-Spalte */
.steuer-hint {
  color: var(--bs-secondary-color, #868e96);
  font-size: 0.8em;
  font-weight: 400;
  margin-left: 0.3rem;
}

/* Auswertung: opt-in Block "Erklärung zum Steuersatz" (compact-Variante des
   Steuersatz-i-Tooltips, partials/_steuersatz_detail.html). Untergeordnet zu
   "Steuern" → dezente Einrückung + engere Abstände, damit die Auswertung
   möglichst einseitig bleibt. Reuse der steuer-table/-compare-Styles; Farben
   über --bs-* (Light + Dark gleichermaßen). */
/* Kein border-left/padding-left am Wrapper: im PDF wird die Sektion an
   Kartengrenzen segmentiert (data-pdf-split) — ein Rahmen liefe sonst als
   durchgehender vertikaler Strich ueber ALLE betroffenen PDF-Seiten. */
.steuersatz-explain-block .card {
  margin-bottom: 0.5rem !important;
  border: none;
  background: transparent;
  box-shadow: none;
}
.steuersatz-explain-block .card-body {
  padding: 0.15rem 0 !important;
}
.steuersatz-explain-block h6 {
  font-size: 0.9rem;
}
.steuersatz-explain-block .steuer-kernsatz {
  margin-bottom: 0.35rem;
}
.steuersatz-explain-block .steuer-table,
.steuersatz-explain-block .steuer-table td,
.steuersatz-explain-block .steuer-table th {
  font-size: 0.82rem;
}
.steuersatz-explain-block .steuer-formula {
  font-size: 0.78rem;
}
.steuersatz-explain-block .panel-info-box {
  margin-bottom: 0.4rem;
}

/* Platzhalter-Canvas kommt vom Server mit festem 200x100- (interaktiv) bzw.
   720x360-Attribut (PDF) — der Lazy-Loader/Chart.js-Renderer braucht IRGENDeine
   Startgroesse, bevor er ~200-500ms spaeter (Idle-Callback + Render-Queue,
   dep_fon_chart_runtime.js/chart_lazy_loader.js) die echte Config baut. Ohne
   diese Regel painted der Browser das Canvas erst bei 200x100 und Chart.js
   zieht es dann sichtbar auf Containerbreite hoch — v.a. beim Tab-Wechsel
   Tarifvergleich -> Anlagefinder (autocalc.js-Partial-Update, kein Reload,
   das Zoom-Script laeuft dabei NICHT neu) als Klein->Gross-Sprung wahrnehmbar.
   Chart.js' Default-aspectRatio ist 2 — alle .chart-container-Canvases
   (Linien- + Kosten-Charts) rendern final bei ~2:1, daher deckt eine einzige
   Regel beide ab.
   Breite bewusst NICHT 100%: Chart.js liest die Containerbreite unter Zoom
   per getBoundingClientRect() (VISUELLE px) und setzt sie 1:1 als
   canvas.style.width (LAYOUT-px) — genau die im Zoom-Regelwerk oben
   beschriebene Faktor-Vermischung (website/CLAUDE.md, "Koordinaten-Modell").
   Ergebnis: das fertige Chart landet nicht bei 100% Containerbreite, sondern
   bei Containerbreite x Zoomfaktor (bestehendes, von diesem Fix unabhaengiges
   Verhalten — separat zu beheben, siehe Folge-Ticket). Der Platzhalter muss
   DENSELBEN (kleineren) Wert vorwegnehmen, sonst ersetzt der Sprung
   klein->gross nur durch einen neuen gross->klein-Sprung beim Chart.js-Init.
   --zoom-factor (documentElement, siehe base_base.html) ist exakt der hier
   noetige Korrekturfaktor. Canvas painted so von Anfang an in Endgroesse,
   Chart.js zieht beim Init nur noch den Inhalt nach, nicht mehr die Box.
   PDF-Pfad unberuehrt: setCanvasDimensions() (dep_fon_chart_core.js) setzt
   dort explizite inline width/height/maxWidth/maxHeight — Inline-Styles haben
   hoehere Spezifitaet als diese Klassenregel und gewinnen. */
canvas.chart-container {
  width: calc(100% * var(--zoom-factor, 1));
  height: auto;
  aspect-ratio: 2 / 1;
}

/* === ./css/core/component_colors.css === */
/* Shared component color hooks (badges, flash messages, etc.) */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-secondary,
.badge.bg-purple,
.badge.bg-orange,
.badge.bg-dark {
  color: var(--badge-strong-text-color) !important;
}

.badge.bg-light,
.badge.bg-soft,
.badge.bg-outline,
.badge.bg-body,
.badge.bg-surface {
  color: var(--badge-soft-text-color, inherit) !important;
}

.flash-message {
  border-radius: var(--flash-border-radius, 14px);
  border-width: 1px;
  border-style: solid;
  border-color: var(--flash-border-color, transparent);
  background: var(--flash-background-color, transparent);
  color: var(--flash-text-color, inherit);
  box-shadow: var(--flash-shadow, none);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.flash-message.alert-success {
  background: var(--flash-success-background, var(--flash-background-color, transparent));
  border-color: var(--flash-success-border, var(--flash-border-color, transparent));
  color: var(--flash-success-text, var(--flash-text-color, inherit));
}

.flash-message.alert-warning {
  background: var(--flash-warning-background, var(--flash-background-color, transparent));
  border-color: var(--flash-warning-border, var(--flash-border-color, transparent));
  color: var(--flash-warning-text, var(--flash-text-color, inherit));
}

.flash-message.alert-danger,
.flash-message.alert-error {
  background: var(--flash-danger-background, var(--flash-background-color, transparent));
  border-color: var(--flash-danger-border, var(--flash-border-color, transparent));
  color: var(--flash-danger-text, var(--flash-text-color, inherit));
}

.flash-message.alert-info {
  background: var(--flash-info-background, var(--flash-background-color, transparent));
  border-color: var(--flash-info-border, var(--flash-border-color, transparent));
  color: var(--flash-info-text, var(--flash-text-color, inherit));
}

/* Bootstrap alerts (non-flash) - Dark mode compatible */
.alert.alert-success:not(.flash-message) {
  background: var(--alert-success-background, #d1e7dd);
  border-color: var(--alert-success-border, #badbcc);
  color: var(--alert-success-text, #0f5132);
}

.alert.alert-info:not(.flash-message) {
  background: var(--alert-info-background, #cff4fc);
  border-color: var(--alert-info-border, #b6effb);
  color: var(--alert-info-text, #055160);
}

/* TEST: Warnbanner global auf Fonder-Orange — Tokens
   (--alert-warning-background/-border/-text) sind in light.css/dark.css auf
   Orange-Werte gesetzt. Plus: border-radius wie überall (--radius-md statt
   Bootstrap-Default), explizite Border-Width/-Style sichern, und Inline-SVGs
   (alert-triangle etc.) erben die Schriftfarbe für ein konsistentes Orange.
   Revert: border-radius/border-width/border-style-Zeilen + svg-Selektor raus,
   Tokens in light.css zurück (in dark.css Wert-Block revert). */
.alert.alert-warning:not(.flash-message) {
  background: var(--alert-warning-background, #fff3cd);
  border: 1px solid var(--alert-warning-border, #ffecb5);
  border-radius: var(--radius-md, 12px);
  color: var(--alert-warning-text, #664d03);
}

.alert.alert-warning:not(.flash-message) svg,
.alert.alert-warning:not(.flash-message) [data-feather] {
  color: var(--alert-warning-text, #664d03);
}

/* KOMPONENTEN-BAUKASTEN: .fonder-badge — zwei Varianten (soft = Tint+Border+Schrift
   / solid = Fill+weiss), semantische Farb-Modifier. Standard-Radius 12px.
   Vorbild: .alert-warning. Accent-Farbe pro Modifier als --fb-c; soft leitet
   Background/Border via color-mix daraus ab (Alpha pro Theme steuerbar). */
.fonder-badge {
  --fb-c: #6c757d;
  --fb-soft-bg-alpha: 10%;
  --fb-soft-border-alpha: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-md, 12px);
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Layout-neutral: erbt Display/Padding/Wrap vom Caller (z.B. Bootstrap d-flex,
   p-3, text-center). Nur Farb-/Border-/Radius-Logik der Komponente bleibt
   aktiv. Für grosse Kacheln statt kleiner Pills. */
.fonder-badge--block {
  display: block;
  padding: 0;
  gap: 0;
  white-space: normal;
  font-weight: inherit;
  line-height: inherit;
}

.fonder-badge--soft {
  background: color-mix(in srgb, var(--fb-c) var(--fb-soft-bg-alpha), transparent);
  border-color: color-mix(in srgb, var(--fb-c) var(--fb-soft-border-alpha), transparent);
  color: var(--fb-c);
}

.fonder-badge--solid {
  background: var(--fb-c);
  border-color: var(--fb-c);
  color: #fff;
}

.fonder-badge--danger  { --fb-c: #dc3545; }
.fonder-badge--info    { --fb-c: #0d6efd; }
.fonder-badge--success { --fb-c: #198754; }
.fonder-badge--neutral { --fb-c: #6c757d; }
.fonder-badge--warning { --fb-c: #f59e0b; }

[data-theme="dark"] .fonder-badge {
  --fb-soft-bg-alpha: 16%;
  --fb-soft-border-alpha: 55%;
}

/* Labels innerhalb der Badge sollen die Badge-Farbe erben statt .text-muted.
   Bootstrap's .text-muted hat !important, deshalb hier ebenfalls — nur scoped
   auf .fonder-badge, nicht global. */
.fonder-badge--soft .text-muted,
.fonder-badge--solid .text-muted {
  color: inherit !important;
}

/* Innere <strong>-Werte (Effekt-/Benoetigtes-Kapital-Pattern) auf Badge-Default-
   Gewicht (600) ziehen statt Browser-Default "bolder" (= 700 ueber font-weight:600).
   Damit matchen Pill-Werte das Semibold der Sidebar-Zahlen, und Pills mit/ohne
   <strong> sehen identisch aus. */
.fonder-badge strong {
  font-weight: 600;
}

/* Optionaler Icon-Kreis als Sub-Part der Badge (z.B. fuehrendes "+"-Symbol).
   Bg leitet sich via currentColor aus der Badge-Farbe ab → orange in --warning,
   rot in --danger usw. */
.fonder-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-weight: 700;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.alert.alert-danger:not(.flash-message) {
  background: var(--alert-danger-background, #f8d7da);
  border-color: var(--alert-danger-border, #f5c2c7);
  color: var(--alert-danger-text, #842029);
}

/* === ./css/core/cards.css === */
/* Shared card surface styling driven by theme tokens */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius, 16px) !important;
  border: var(--card-border-width, 1px) solid var(--card-border, rgba(255, 255, 255, 0.12));
  padding: var(--card-padding, 10px);
  background: var(--card-background, #161b26);
  box-shadow: var(--card-shadow, none);
  backdrop-filter: var(--card-backdrop-filter, none);
  transition: var(--card-transition, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease);
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: var(--card-overlay-inset, -40%);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: var(--card-overlay-opacity, 0.45);
  z-index: 0;
}

.card::before {
  background: var(--card-overlay, radial-gradient(120% 120% at 0% 0%, rgba(92, 152, 255, 0.15), transparent 55%));
  transform: var(--card-overlay-transform, rotate(12deg));
}

.card::after {
  background: var(--card-overlay-secondary, radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%));
  opacity: var(--card-overlay-secondary-opacity, 0.25);
  transform: var(--card-overlay-secondary-transform, rotate(-12deg));
}

.card > * {
  position: relative;
  z-index: 1;
}

/* Disable card overlays for cards containing progress bars */
.card:has(.progress)::before,
.card:has(.progress)::after {
  display: none;
}

.card:hover {
  box-shadow: var(--card-shadow-hover, var(--card-shadow, none));
  transform: var(--card-hover-transform, translateY(-4px));
}

.card:hover::before {
  opacity: var(--card-overlay-hover-opacity, 0.65);
  transform: var(--card-overlay-hover-transform, rotate(0deg));
}

.card:hover::after {
  opacity: var(--card-overlay-secondary-hover-opacity, 0.4);
  transform: var(--card-overlay-secondary-hover-transform, rotate(0deg));
}

/* Hauptbereich-Container im Anlagefinder: aussen grau, innen gestapelte
   weisse Sub-Cards. Eigene Klassen (nicht .card), damit Bootstrap-
   Card-Overlays + hover-Translate nicht greifen.
   Background ueber --surface-soft-bg-Token, der auch Header und
   Sekundaer-Buttons faerbt — gemeinsamer Soft-Surface-Grauton. */
/* TEST: Container-Card weiß + form-control-Border, Revert: background transparent + border none */
.main-area-container {
  background: #ffffff;
  /* Keine Border — Container hebt sich allein durch den Soft-Surface-
     Grauton vom weissen App-Hintergrund ab. */
  border: 1px solid var(--form-control-border, rgba(15, 42, 97, 0.24));
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  /* Float-Halo via Token (light.css: weicher Drop-Shadow; dark.css: none).
     Theme-agnostisch — kein eigener [data-theme=...]-Scope mehr, das Token
     liefert die Theme-Variante. */
  box-shadow: var(--surface-shadow-soft);
}

/* xl+: Card vertikal nach oben ziehen, sodass Card-Top den gleichen
   Abstand zur horizontalen Topbar-Linie hat wie Card-Left zur vertikalen
   Sidebar-Trennlinie (Symmetrie oben/links).
   Card-Left-Abstand zur Vertikalen = Bootstrap-col-padding-left 0.75rem
   (12 px) + Vertikalen-Inset 9 px = 21 px.
   Card-Top soll also 21 px unter der Topbar-Linie sitzen. Linie bei
   Y = baseline (60 px), Card-Top-Ziel: Y = 81. Tab-Row startet bei
   topbar-row-bottom (= 60 + status-margin 12 + heading-Hoehe 34 = 106).
   Card-margin-top = 81 − 106 = −25 px = −1.5625 rem.
   Templates wurden mit my-3 → mb-3 angepasst, sodass der Bootstrap-
   margin-top-Token (1rem !important) nicht mehr ueberschreibt; die
   negative margin-top greift damit direkt.
   ⚠️ Magic-Number: gekoppelt an Topbar-Layout (baseline, status-margin,
   heading-Hoehe). Beim grossen Topbar-Refactor strukturell loesen.
   Sub-xl: Heading nicht sichtbar → keine Negativ-Margin noetig (Card
   bleibt im normalen Flow direkt unter der Topbar). */
@media (min-width: 1200px) {
  .main-area-container {
    /* TEST: -9px mehr negativ, kompensiert Heading-Shift, hält Card-Top
       auf Y=81. Revert: zurück auf -1.5625rem. */
    margin-top: -2.125rem;
  }
}

.main-area-container > .sub-card {
  background: #ffffff;
  /* Border entfernt — Sub-Cards setzen sich allein durch den Weiss-auf-
     Grau-Kontrast vom Container ab. */
  border: none;
  border-radius: var(--radius-md, 12px);
  margin-bottom: 12px;
  overflow: hidden;
}

.main-area-container > .sub-card:last-child {
  margin-bottom: 0;
}

/* Lokaler Tight-Top-Modifier (Anlagefinder: Sub-Card 2 mit Headline/Balken,
   section_bars.html). Zieht die Bars-Sub-Card naeher an die Tab-/Alert-Sub-Card
   darueber, ohne das globale .sub-card-Spacing zu aendern.
   Wert ggf. im Browser-Check nachjustieren. */
.sub-card.sub-card--tight-top {
  margin-top: -24px;
}

.main-area-container > .alert {
  margin-bottom: 16px;
}

.sub-card-body {
  padding: 14px;
}

.sub-card-body > *:last-child {
  margin-bottom: 0 !important;
}

/* ── Dark Mode ──────────────────────────────────────
   .main-area-container + .sub-card sind im Light-Mode hartkodiert weiss
   (siehe oben), daher muss Dark-Mode explizit ueberschrieben werden.
   EINE einheitliche Flaeche (wie Light-Mode: Container + Sub-Cards gleiche
   Farbe, kein "2 Cards in einer"-Split): Container traegt das bläulich-navy
   Panel (analog --card-background), Sub-Cards sind transparent. */
[data-theme="dark"] .main-area-container {
  background: linear-gradient(145deg, rgba(24, 32, 54, 0.92), rgba(12, 21, 40, 0.96));
  border-color: rgba(var(--accent-rgb, 92, 152, 255), 0.18);
}

[data-theme="dark"] .main-area-container > .sub-card {
  background: transparent;
  color: #f8f9fa;
}

/* ── Info-Card (Erklär-Box in Modal-Bodys) ─────────────────────────
   TEST: Bündel C7 — ersetzt die Bootstrap-Utility-Combo
   .border.rounded-3.p-3 (war 16px Radius via --bs-border-radius-lg,
   Bootstrap-Border-Color, transparent BG, kein Schatten) durch eine
   semantische Klasse mit vereinheitlichter Geometrie:
   - 12px Radius (--radius-md, matched andere Sub-Cards)
   - Fonder-Border-Color (--form-control-border)
   - weisser BG (--form-control-bg) — explizit, robust gegen kuenftige
     Modal-Body-BG-Aenderungen
   - Float-Halo via --surface-shadow-soft (Token in Dark = none →
     Dark-Cards bleiben schattenlos)
   Margins bleiben Bootstrap-Utilities (mt-3 / mb-3 / mb-4) neben
   .info-card im Markup. Inhalt der ~20 Stellen sind ausschliesslich
   Erklaertext/Formeln/Listen — keine Form-Controls, daher kein
   .surface-floating-Reset noetig.
   Revert: Klasse hier entfernen, im Markup zurueck auf
   .border.rounded-3.p-3. */
.info-card {
  padding: 1rem;
  border: 1px solid var(--form-control-border, rgba(15, 42, 97, 0.24));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
  box-shadow: var(--surface-shadow-soft);
}

/* ── Formula-Box (graue Code-/Formel-Box innerhalb einer .info-card) ──
   TEST: Bündel C7b — ersetzt zwei Bootstrap-Utility-Combos
   (.d-block.bg-light.p-2.rounded und .d-block.bg-body-tertiary.p-2.rounded)
   in 18 <code>-Elementen. Vereinheitlicht den Look:
   - 12px Radius (--radius-md, matched .info-card)
   - 1px Fonder-Border (--form-control-border)
   - Fonder-Grauton (--surface-soft-bg = #f5f5f7, identisch zu Header/
     Sekundaer-Buttons) statt zwei verschiedener Bootstrap-Token
     (.bg-light vs .bg-body-tertiary)
   - display:block (war via .d-block am <code>-Element noetig)
   - padding 0.5rem (analog Bootstrap .p-2)
   Kein Box-Shadow: Formula-Box sitzt IMMER innerhalb einer .info-card
   (oder eines anderen schattentragenden Containers) — nach unserer
   Sub-Card-in-Sub-Card-Regel kein eigener Halo.
   Margins (mb-1/mb-2/mb-3) und .small bleiben Bootstrap-Utility-Klassen
   neben .formula-box im Markup.
   Revert: Klasse hier entfernen, im Markup zurueck auf die zwei
   Bootstrap-Combos. */
.formula-box {
  display: block;
  padding: 0.5rem;
  background: var(--surface-soft-bg, #f5f5f7);
  border: 1px solid var(--form-control-border, rgba(15, 42, 97, 0.24));
  border-radius: var(--radius-md, 12px);
}

/* ── av-note: dezenter, ausklappbarer Hinweis unter Kacheln/Kennzahlen der
   Bedarfsermittlung (Versorgungsluecke, benoetigtes Kapital). Zu = eine Zeile
   mit Ellipsis, offen = Rechnung + Erklaerung. Bootstrap-Collapse toggelt
   aria-expanded am Button. Light + Dark. ── */
.av-note {
  border: 1px solid var(--form-control-border, rgba(15, 42, 97, 0.18));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-soft-bg, #f7f8fa);
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
}
.av-note__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.av-note__toggle:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: var(--radius-md, 12px);
}
.av-note__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-note__toggle[aria-expanded="true"] .av-note__text { white-space: normal; }
.av-note__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.65rem;
  line-height: 0.9rem;
  text-align: center;
  font-weight: 600;
  font-style: italic;
}
.av-note__chevron {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.15rem 0.2rem 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.av-note__toggle[aria-expanded="true"] .av-note__chevron { transform: rotate(-135deg); margin-bottom: -0.15rem; }
.av-note__body { padding: 0 0.75rem 0.6rem 2.25rem; }
.av-note__body p { margin-bottom: 0.3rem; }
.av-note__body p:last-child { margin-bottom: 0; }
.av-note__calc { font-variant-numeric: tabular-nums; }
.av-note strong { color: var(--bs-body-color, #212529); }
[data-theme="dark"] .av-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.3);
  color: #adb5bd;
}
[data-theme="dark"] .av-note strong { color: #f8f9fa; }

/* === ./css/core/custom_controls.css === */
/* Unified custom checkbox and switch styles backed by tokens */
.custom-control-label {
  color: var(--custom-control-label-color, inherit);
  font-weight: var(--custom-control-label-weight, 400);
  transition: color 0.2s ease;
}

.custom-control-label:hover,
.custom-control-label:focus-visible {
  color: var(--custom-control-label-hover-color, var(--custom-control-label-color, inherit));
}

.custom-control-input {
  border-color: var(--custom-control-border-color, #ccc);
  background-color: var(--custom-control-background, #333);
  box-shadow: var(--custom-control-shadow, none);
}

.custom-control-input:checked {
  background-color: var(--custom-control-checked-background, #0a74da);
  border-color: var(--custom-control-checked-border, var(--custom-control-checked-background, #0a74da));
}

.custom-control-input:focus {
  outline: none;
  box-shadow: var(--custom-control-focus-shadow, 0 0 0 0.2rem rgba(10, 116, 218, 0.25));
}

/* === ./css/core/theme_switch.css === */
/* Theme toggle control shared across themes */
.theme-switch {
  position: relative;
  display: inline-block;
  width: var(--theme-switch-width, 60px);
  height: var(--theme-switch-height, 30px);
}

.theme-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-label {
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

.theme-label .sun,
.theme-label .moon {
  position: absolute;
  top: var(--theme-switch-icon-top, 7px);
  font-size: var(--theme-switch-icon-size, 18px);
  color: var(--theme-switch-icon-color, #ffffff);
  transition: transform 0.4s ease;
}

.theme-label .sun {
  left: var(--theme-switch-sun-left, 10px);
  color: var(--theme-switch-sun-color, #ffffff);
}

.theme-label .moon {
  right: var(--theme-switch-moon-right, 10px);
  color: var(--theme-switch-moon-color, #ffffff);
  transform: scale(0);
}

.theme-checkbox:checked + .theme-label .sun {
  transform: scale(0);
}

.theme-checkbox:checked + .theme-label .moon {
  transform: scale(1);
}

/* === ./css/core/typography.css === */
/* Typography refinements shared by both themes */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color, inherit);
  font-weight: var(--heading-weight, 600);
  transition: color 0.2s ease;
}

h1 { color: var(--heading-h1-color, var(--heading-color, inherit)); }
h2 { color: var(--heading-h2-color, var(--heading-color, inherit)); }
h3 { color: var(--heading-h3-color, var(--heading-color, inherit)); }
h4,
h5,
h6 { color: var(--heading-h456-color, var(--heading-color, inherit)); }

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
  color: var(--heading-hover-color, inherit);
}

p,
li {
  color: var(--body-text-color, inherit);
}

.lead {
  font-size: var(--lead-font-size, 1.0625rem);
  color: var(--lead-text-color, inherit);
}

.section-title {
  font-size: var(--section-title-font-size, 1.75rem);
  margin-top: var(--section-title-margin-top, 2rem);
  margin-bottom: var(--section-title-margin-bottom, 1rem);
  color: var(--section-title-color, inherit);
}

.section-subtitle {
  font-size: var(--section-subtitle-font-size, 1.5rem);
  margin-top: var(--section-subtitle-margin-top, 1.5rem);
  margin-bottom: var(--section-subtitle-margin-bottom, 1rem);
  color: var(--section-subtitle-color, inherit);
}

.strikethrough {
  position: relative;
}

.strikethrough::before {
  content: "";
  position: absolute;
  left: 0;
  right: 40%;
  top: 50%;
  border-top: var(--strikethrough-line-width, 2px) solid;
  border-color: currentColor;
  transform: rotate(-7deg);
}

.mini_info {
  color: var(--mini-info-color, inherit);
  margin-right: var(--mini-info-margin-right, 170px);
  transition: color 0.2s ease;
}

.mini_info:hover,
.mini_info:focus-visible {
  color: var(--mini-info-hover-color, currentColor);
}

/* === ./css/core/carousels.css === */
/* Shared carousel navigation styling */
.carousel-control-next,
.carousel-control-prev {
  filter: var(--carousel-control-filter, invert(30%));
  width: var(--carousel-control-size, 30px);
  height: var(--carousel-control-size, 30px);
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: var(--carousel-icon-size, 1.5rem);
  height: var(--carousel-icon-size, 1.5rem);
  display: inline-block;
}

.carousel-control-prev-icon {
  background-image: var(--carousel-prev-icon, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"));
}

.carousel-control-next-icon {
  background-image: var(--carousel-next-icon, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"));
}

.carousel-item {
  position: absolute !important;
  inset: 0;
}

/* === ./css/core/sidebar.css === */
/* Sidebar layouts shared across themes */
.custom-sidebar {
  position: sticky;
  top: var(--sidebar-offset-top, 0);
  padding: var(--sidebar-padding, 20px);
  max-height: var(--sidebar-max-height, 100vh);
  overflow-y: auto;
}

.sidebar-title {
  font-size: var(--sidebar-title-size, 1.5rem);
  margin-bottom: var(--sidebar-title-margin, 1rem);
  color: var(--sidebar-title-color, inherit);
}

.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-links-gap, 10px);
}

.sidebar-link {
  text-decoration: none;
  color: var(--sidebar-link-color, inherit);
  padding: var(--sidebar-link-padding, 5px 10px);
  border-radius: var(--sidebar-link-radius, 4px);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background-color: var(--sidebar-link-hover-bg, rgba(0, 123, 255, 0.35));
  color: var(--sidebar-link-hover-color, #ffffff);
}

.sidebar-submenu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-submenu-gap, 10px);
  margin-left: var(--sidebar-submenu-indent, 10px);
}

.sidebar-submenu .sidebar-link {
  display: inline-block;
}

.content {
  padding-top: var(--content-padding-top, var(--content-padding, 10px));
  padding-right: var(--content-padding-right, var(--content-padding, 10px));
  padding-bottom: var(--content-padding-bottom, var(--content-padding, 10px));
  padding-left: var(--content-padding-left, var(--content-padding, 10px));
}

/* === ./css/core/modals.css === */
/* Modal surfaces and accents */
.modal-content {
    background: var(--modal-bg, #ffffff);
    color: var(--modal-body-color, inherit);
    border-radius: var(--modal-radius, 18px);
    border: 1px solid var(--modal-border, rgba(0, 0, 0, 0.1));
    box-shadow: var(--modal-shadow, 0 24px 48px -24px rgba(0, 0, 0, 0.4));
    backdrop-filter: var(--modal-backdrop-filter, none);
    -webkit-backdrop-filter: var(--modal-backdrop-filter, none);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    background: var(--modal-header-bg, inherit);
    color: var(--modal-header-color, inherit);
    border-color: var(--modal-divider-color, rgba(255, 255, 255, 0.08));
}

.modal-header {
    border-bottom: 1px solid var(--modal-divider-color, rgba(255, 255, 255, 0.08));
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--modal-divider-color, rgba(255, 255, 255, 0.08));
    background: var(--modal-footer-bg, var(--modal-header-bg, inherit));
    padding: 1.1rem 1.5rem;
}

.modal-title {
    color: var(--modal-header-color, inherit);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.modal-body {
    color: var(--modal-body-color, inherit);
    /* TEST: Modal-Body weiss (war grau --surface-soft-bg), bildet mit
       Header/Footer eine durchgehende weisse Flaeche. Revert: zurueck
       auf var(--surface-soft-bg). */
    background: #ffffff;
    padding: 1.35rem 1.5rem;
}

/* Dark: transparent, damit die navy modal-content-Flaeche durchscheint
   (sonst weisser Body im dunklen Modal). Light bleibt weiss. */
[data-theme="dark"] .modal-body {
    background: transparent;
}

/* TEST: Float-Halo auf Form-Felder im Modal-Body (analog Sidebar-Inputs).
   Pauschal-Scope ueber .modal-body-Klammer — Sidebar-Felder (.bg-left-col)
   liegen ausserhalb und bleiben mit ihrer eigenen Shadow-Regel (forms.css
   Z.~310) unberuehrt. Composite-Klassen wie .form-control.kv-readonly-control
   und Form-Controls in .kv-input-locked-Wrappern werden automatisch
   getroffen, weil sie .form-control tragen. Token in Light = weicher
   Drop-Shadow, in Dark = none. */
.modal-body .form-control,
.modal-body .form-select {
    box-shadow: var(--surface-shadow-soft);
}

/* TEST: Hover/Focus kombiniert Float-Halo + blauen Form-Focus-Halo
   (analog Bündel B Zahnrad-Button), damit der Float-Halo beim Aktivieren
   nicht wegspringt. In Dark ist --surface-shadow-soft = none, dort
   bleibt nur der Form-Focus-Halo aktiv. */
.modal-body .form-control:hover,
.modal-body .form-control:focus,
.modal-body .form-select:hover,
.modal-body .form-select:focus {
    box-shadow: var(--surface-shadow-soft), var(--form-focus-shadow);
}

/* ── Sub-Card-Marker .surface-floating ─────────────────────────────
   Marker-Klasse fuer Container, die als "schattentragende Sub-Card"
   gelten — z.B. Sammelboxen in Modals, Info-Cards, Tabellen-Wrapper.
   Die Card selbst traegt den Float-Halo; Form-Controls darin bekommen
   KEINEN eigenen Halo (sonst doppelte Schichtung).
   Pflicht-Reihenfolge: Diese drei Regeln stehen NACH der C2-Pauschalregel
   (.modal-body .form-control oben). Specificity beider Selektoren ist
   identisch (0,2,0) — der spaetere Block gewinnt, daher der Reset
   uebersteuert hier den Pauschal-Halo.
   Konsumenten: Klasse wird in C6 an Templates vergeben (existing-pensions-
   summary, table-responsive border rounded, Info-Cards) — diese
   CSS-Vorbereitung allein aendert visuell noch nichts. */
.surface-floating {
    box-shadow: var(--surface-shadow-soft);
}

.surface-floating .form-control,
.surface-floating .form-select {
    box-shadow: none;
}

.surface-floating .form-control:hover,
.surface-floating .form-control:focus,
.surface-floating .form-select:hover,
.surface-floating .form-select:focus {
    box-shadow: var(--form-focus-shadow);
}

/* TEST: Float-Halo auf modal-interne Segmented-Controls (--no-settings-
   Variante in kv_modal/legalPensionModal/existingPensionsModal) + die
   .btn-caution-Reset-Buttons daneben. Strikt auf .modal-body-Scope
   beschraenkt — die Sidebar-Variante (.segmented-control-wrap in
   pers_input.html) wird in Buendel B separat behandelt und liegt nicht
   im modal-body. .btn-caution ausserhalb von Modals (falls vorhanden)
   bleibt ebenfalls unangetastet.
   Hover-Verhalten: .btn-caution:hover setzt global `box-shadow: none !important`
   (buttons.css:716-724) — der Float-Halo verschwindet beim Hover bewusst
   nicht ueberschrieben, weil der Button beim Hover auf vollen Orange-Fill
   wechselt und der Halo dort visuell stoeren wuerde. Segmented-Control
   Option-Hover wirkt auf ::before { background } (switches.css:368-370),
   nicht auf Container-box-shadow — Float-Halo am Container bleibt
   automatisch erhalten. */
.modal-body .segmented-control--no-settings,
.modal-body .btn-caution {
    box-shadow: var(--surface-shadow-soft);
}

/* TEST: Float-Halo auf Modal-Footer-Buttons (Schließen/Abbrechen/Speichern
   etc. in allen Modals inkl. Confirm-Modals). Footer hat --modal-footer-bg
   = #ffffff (light.css:597) → Buttons liegen auf blankem hellem Untergrund,
   also gemaess Hintergrund-Regel Halo-Kandidaten.

   !important hier bewusst eingesetzt — kontert zwei spezifische Blocker:
   - .btn-secondary (buttons.css:848-858) setzt im RUHEZUSTAND
     `box-shadow: none !important` → ohne lokales !important kein Halo.
   - .btn.btn-cancel:focus (buttons.css:901-909) setzt `box-shadow: none
     !important` → Bootstrap-Modal autofokussiert beim Show oft den ersten
     tab-baren Footer-Button (= Schließen), wodurch der Halo sofort wieder
     verschwinden wuerde, sobald das Modal aufgeht. :focus + :focus-visible
     in der Selektor-Liste hier sichert den Halo auch im Autofokus-State.
   Diese !important-Kette ist STRIKT lokal auf .modal-footer beschraenkt —
   kein Flaechenbrand, die globalen Skin-Regeln in buttons.css bleiben
   unberuehrt (eigener Refactor spaeter).

   Hover-Verhalten: alle hier verwendeten Skin-Klassen wechseln beim
   :hover auf vollen Farb-Fill (mit eigenem `box-shadow: none !important`
   in buttons.css:688/701/743/830/868/907). Float-Halo soll dort bewusst
   weg sein (analog C4 .btn-caution-Pattern). Die unten stehende
   :hover-Regel macht das auch mit !important explizit, damit die Ruhe-/
   :focus-Regel oben nicht versehentlich beim Hover-State weiterstrahlt
   (Specificity 0,2,1 + !important schlaegt die 0,2,0 + !important der
   Hauptregel). */
.modal-footer .btn,
.modal-footer .btn:focus,
.modal-footer .btn:focus-visible,
.panel-footer .btn,
.panel-footer .btn:focus,
.panel-footer .btn:focus-visible {
    box-shadow: var(--surface-shadow-soft) !important;
}

.modal-footer .btn:hover,
.panel-footer .btn:hover {
    box-shadow: none !important;
}

/* Scoped-Ausnahme von der Float-Halo-Regel oben: einzelne Footer-Buttons, die
   bereits auf einer floatenden Card liegen (z.B. "Max. Beginnverlegung" im
   Auszahlungsphasen-Modal, auf .anlage-settings-card.surface-floating), sollen
   keinen EIGENEN Halo tragen (sonst Doppel-Float). Marker-Klasse .mbv-no-float;
   Specificity 0,3,0 + !important schlägt die Hauptregel (0,2,0 + !important),
   inkl. :focus/:focus-visible. Andere Footer-Buttons bleiben unberührt. */
.panel-footer .btn.mbv-no-float,
.panel-footer .btn.mbv-no-float:focus,
.panel-footer .btn.mbv-no-float:focus-visible,
.modal-footer .btn.mbv-no-float,
.modal-footer .btn.mbv-no-float:focus,
.modal-footer .btn.mbv-no-float:focus-visible {
    box-shadow: none !important;
}

.modal-backdrop.show {
    /* Radialer Gradient statt blur - performant und elegant */
    background: var(--modal-backdrop-gradient, 
        radial-gradient(ellipse at center, 
            var(--modal-backdrop-bg-center, rgba(0, 0, 0, 0.4)) 0%,
            var(--modal-backdrop-bg, rgba(0, 0, 0, 0.7)) 100%
        )
    );
    backdrop-filter: var(--modal-backdrop-filter, none);
    -webkit-backdrop-filter: var(--modal-backdrop-filter, none);
}

.btn-close {
    color: var(--modal-close-color, inherit);
    opacity: 0.9;
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    filter: var(--modal-close-filter, none);
}

.btn-close:hover,
.btn-close:focus {
    opacity: 1;
    color: var(--modal-close-hover-color, var(--modal-close-color, inherit));
    background-color: var(--modal-close-hover-bg, rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    filter: var(--modal-close-hover-filter, var(--modal-close-filter, none));
}

.btn-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 152, 255, 0.3);
}

@media (max-width: 576px) {
    .modal-header,
    .modal-footer,
    .modal-body {
        padding: 1.1rem;
    }
}

/* Modal footer close/dismiss buttons - styled like outline-primary */
.modal-footer .btn-secondary[data-bs-dismiss="modal"],
.modal-footer .btn.btn-secondary:only-child,
.modal-footer .btn-secondary:last-child {
    background-color: transparent;
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-footer .btn-secondary[data-bs-dismiss="modal"]:hover,
.modal-footer .btn.btn-secondary:only-child:hover,
.modal-footer .btn-secondary:last-child:hover {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.modal-footer .btn-secondary[data-bs-dismiss="modal"]:focus,
.modal-footer .btn.btn-secondary:only-child:focus,
.modal-footer .btn-secondary:last-child:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark mode adjustments - slightly brighter primary for better contrast */
[data-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"],
[data-theme="dark"] .modal-footer .btn.btn-secondary:only-child,
[data-theme="dark"] .modal-footer .btn-secondary:last-child,
[data-bs-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"],
[data-bs-theme="dark"] .modal-footer .btn.btn-secondary:only-child,
[data-bs-theme="dark"] .modal-footer .btn-secondary:last-child {
    border-color: #5c98ff;
    color: #5c98ff;
}

[data-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"]:hover,
[data-theme="dark"] .modal-footer .btn.btn-secondary:only-child:hover,
[data-theme="dark"] .modal-footer .btn-secondary:last-child:hover,
[data-bs-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"]:hover,
[data-bs-theme="dark"] .modal-footer .btn.btn-secondary:only-child:hover,
[data-bs-theme="dark"] .modal-footer .btn-secondary:last-child:hover {
    background-color: #5c98ff;
    border-color: #5c98ff;
    color: #000;
}

[data-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"]:focus,
[data-theme="dark"] .modal-footer .btn.btn-secondary:only-child:focus,
[data-theme="dark"] .modal-footer .btn-secondary:last-child:focus,
[data-bs-theme="dark"] .modal-footer .btn-secondary[data-bs-dismiss="modal"]:focus,
[data-bs-theme="dark"] .modal-footer .btn.btn-secondary:only-child:focus,
[data-bs-theme="dark"] .modal-footer .btn-secondary:last-child:focus {
    box-shadow: 0 0 0 0.25rem rgba(92, 152, 255, 0.35);
}

/* TEST: Safety-Nowrap für Overwrite-Modal-Footer, verhindert
   Button-Wrap auch bei künftigen Geometrie-Änderungen.
   Revert: diesen Block entfernen. */
#confirmOverwriteProfileModal .modal-footer {
  flex-wrap: nowrap;
}

/* ── #existingPensionsModal: Spaltenbreiten — Versorgungsart breit genug fuer
   "Vermoegenswirksame Leistungen"/"Bankguthaben / Tagesgeld"; die Eingaben je
   Vorsorgeart liegen in der Detailzeile (colspan), nicht in der Betragsspalte. ── */
#existingPensionsModal .existing-pensions-table .existing-col-type { width: 28%; }
#existingPensionsModal .existing-pensions-table .existing-col-label { width: 22%; }
#existingPensionsModal .existing-pensions-table .existing-col-tax { width: 20%; }
#existingPensionsModal .existing-pensions-table .existing-col-amount { width: 30%; }
#existingPensionsModal .existing-pensions-table td { vertical-align: middle; }

/* ── #existingPensionsModal: Betragsspalte — Feld + zwei Icon-Buttons auf einer Hoehe ── */
#existingPensionsModal .existing-amount-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
#existingPensionsModal .existing-amount-row .input-container {
  flex: 1 1 110px;
  min-width: 0;
}
#existingPensionsModal .existing-row-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--bs-secondary-color, #6c757d);
}
#existingPensionsModal .existing-row-btn svg { width: 16px; height: 16px; }
#existingPensionsModal .existing-row-btn:hover { background: rgba(0, 0, 0, 0.05); }
#existingPensionsModal .existing-row-btn--active { color: var(--accent-color, #1767ff); }
#existingPensionsModal .existing-row-btn.text-danger { color: var(--bs-danger, #dc3545); }
#existingPensionsModal .existing-bankdepot-seg {
  width: auto;
  min-height: 31px;
  max-width: 170px;
}
#existingPensionsModal .existing-bankdepot-seg .segmented-control__option {
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  white-space: nowrap;
  gap: 0;
}
#existingPensionsModal .existing-bankdepot-seg .segmented-control__check {
  display: none !important;
}
#existingPensionsModal input.existing-bankdepot-result[readonly] {
  background-color: var(--bs-tertiary-bg, #f1f3f5) !important;
  font-weight: 600;
  cursor: default;
}
[data-theme="dark"] #existingPensionsModal input.existing-bankdepot-result[readonly] {
  background-color: #343a40 !important;
  color: #f8f9fa;
}
[data-theme="dark"] #existingPensionsModal .existing-row-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ── #bankdepotCalcModal: Erklaer-Popup "So berechnen wir die Rente aus dem
   Bankdepot" — KPI-Kacheln, Chart, Parameter, Jahrestabelle (Gutachten-Stil). */
#existingPensionsModal .existing-bankdepot-calc__details {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  text-decoration: none;
}
#existingPensionsModal .existing-bankdepot-calc__details.d-none {
  display: none;
}
#existingPensionsModal .existing-bankdepot-calc__details svg {
  width: 14px;
  height: 14px;
}
#bankdepotCalcModal .bankdepot-calc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
#bankdepotCalcModal .bankdepot-calc-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--panel-card-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
}
#bankdepotCalcModal .bankdepot-calc-kpi--accent {
  border-color: var(--accent-color, #1767ff);
}
#bankdepotCalcModal .bankdepot-calc-kpi__label {
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
}
#bankdepotCalcModal .bankdepot-calc-kpi__value {
  font-size: 1.05rem;
  font-weight: 600;
}
#bankdepotCalcModal .bankdepot-calc-chart-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}
#bankdepotCalcModal .bankdepot-calc-params td {
  padding: 0.15rem 0.2rem;
}
#bankdepotCalcModal .bankdepot-calc-table-wrap {
  max-height: 320px;
  overflow-y: auto;
}
#bankdepotCalcModal .bankdepot-calc-table th {
  position: sticky;
  top: 0;
  background: var(--form-control-bg, #ffffff);
  z-index: 1;
}
#bankdepotCalcModal .bankdepot-calc-table__pens td {
  border-top: 2px solid var(--accent-color, #1767ff);
  font-weight: 600;
}
[data-theme="dark"] #bankdepotCalcModal .bankdepot-calc-kpi,
[data-theme="dark"] #bankdepotCalcModal .bankdepot-calc-table th {
  background: #2d3238;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8f9fa;
}
[data-theme="dark"] #bankdepotCalcModal .bankdepot-calc-kpi__label {
  color: #adb5bd;
}


/* ── #existingPensionsModal: Detailzeile je Eintrag (Depot/Kapital/Zins/Steuerart) ──
   Eine Zeile mit kompakten, gleich hohen Feldern; nur die fuer die Vorsorgeart
   relevanten sind sichtbar (JS applyTypeUi). Bei Bankdepot/Kapital immer offen,
   bei Renten ueber den Optionen-Button. */
#existingPensionsModal .existing-advanced-row > td {
  padding: 0 0.5rem 0.6rem;
  border-top: 0;
}
#existingPensionsModal .existing-advanced {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.9rem;
  padding: 0.5rem 0.75rem 0.55rem;
  border-radius: 10px;
  background: var(--bs-tertiary-bg, #f4f6f8);
}
#existingPensionsModal .existing-advanced__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 0 0 auto;
  width: 150px;
}
#existingPensionsModal .existing-advanced__field--narrow { width: 110px; }
#existingPensionsModal .existing-advanced__field--link { width: auto; padding-bottom: 0.3rem; }
#existingPensionsModal .existing-advanced__field .form-select-sm,
#existingPensionsModal .existing-advanced__field .form-control-sm {
  font-size: 0.78rem;
  height: 31px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
#existingPensionsModal .existing-advanced__field .input-container { display: block; }
#existingPensionsModal .existing-advanced__label {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
#existingPensionsModal .existing-advanced__hint {
  flex: 1 1 100%;
  font-size: 0.7rem;
  margin-top: -0.15rem;
}
#existingPensionsModal .existing-effective {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1.3;
}
#existingPensionsModal .existing-effective strong { color: var(--bs-body-color, #212529); }
#existingPensionsModal .existing-bankdepot-calc__details {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  text-decoration: none;
}
#existingPensionsModal .existing-bankdepot-calc__details svg { width: 14px; height: 14px; }
#existingPensionsModal .existing-pensions-summary--sub {
  margin-top: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  box-shadow: none;
}
#existingPensionsModal .existing-pensions-summary--sub .existing-pensions-summary__label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
}
#existingPensionsModal .existing-pensions-summary__value--sm { font-size: 1rem; }
#existingPensionsModal .existing-pensions-summary--kapital { border-color: rgba(111, 66, 193, 0.4); }
#existingPensionsModal .existing-pensions-summary--kapital .existing-pensions-summary__value { color: #5a35a8; }
[data-theme="dark"] #existingPensionsModal .existing-advanced { background: #2d3238; }
[data-theme="dark"] #existingPensionsModal .existing-advanced__label,
[data-theme="dark"] #existingPensionsModal .existing-effective,
[data-theme="dark"] #existingPensionsModal .existing-row-btn,
[data-theme="dark"] #existingPensionsModal .existing-pensions-summary--sub .existing-pensions-summary__label { color: #adb5bd; }
[data-theme="dark"] #existingPensionsModal .existing-effective strong { color: #f8f9fa; }
[data-theme="dark"] #existingPensionsModal .existing-pensions-summary--kapital .existing-pensions-summary__value { color: #c6b3ff; }

/* === ./css/core/info_icons.css === */
/* Info icon pill styling */
.span_info {
  color: var(--info-icon-color, rgba(188, 197, 201, 1));
  position: relative;
  float: right;
  right: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--info-icon-size, 20px);
  height: var(--info-icon-size, 20px);
  border-radius: 50%;
  line-height: 1;
  padding: 2px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease, color 0.18s ease;
}

.span_info:hover,
.span_info:focus-visible {
  /* Kompakter Hover-Effekt: Tint + 2px-Halo + leichter Zoom. Bewusst
     NICHT der allgemeine 3px-Halo aus --hover-glow-shadow, weil ohne
     Tint/Zoom rund ums Icon ein hässlicher weisser Cut-out entsteht.
     Color-Wechsel auf --info-icon-hover-color (frueher schwarz) ist
     dauerhaft entfernt — das i soll im Hover seine Default-Farbe
     behalten, konsistent zum Zahnrad (das wegen Inline-Color sowieso
     stabil bleibt). */
  background-color: var(--info-icon-hover-bg, rgba(255, 255, 255, 0.1));
  box-shadow: var(--info-icon-hover-shadow, 0 0 0 2px rgba(255, 255, 255, 0.15));
  transform: scale(1.08);
  outline: none;
}

/* Stroke-Width-Override fuer Feather-Icons innerhalb von .span_info:
   Feather-Default ist 2 (in 24x24-viewBox) → bei 14px Icon-Render ergibt
   das ~1.17 effektive Pixel-Stroke und wirkt deutlich dicker als die
   1px-Borders der Form-Controls/Cards/Pills. 1.75 ist im Projekt etabliert
   (siehe empty_state.css) und ergibt ~1.02 effektive Pixel — visuell auf
   Augenhoehe mit den 1px-Borders. CSS-Override schlaegt das vom Feather-
   Render gesetzte stroke-width-Attribut. */
.span_info svg {
  stroke-width: 1.75;
}

.span_info[style*="dc3545"] {
  color: var(--info-icon-danger-color, #dc3545) !important;
}

.span_info[style*="dc3545"]:hover,
.span_info[style*="dc3545"]:focus-visible {
  background-color: var(--info-icon-danger-hover-bg, rgba(220, 53, 69, 0.18));
  box-shadow: var(--info-icon-danger-hover-shadow, 0 0 0 3px rgba(220, 53, 69, 0.35));
  transform: scale(1.1);
}

.span_info:active {
  transform: scale(0.95);
}

/* === ./css/core/switches.css === */
/* Range slider toggle */
.range-switch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 40px;
  height: 24px;
  outline: none;
  cursor: pointer;
  background: transparent;
  position: relative;
}

.range-switch::-webkit-slider-runnable-track,
.range-switch::-moz-range-track {
  position: absolute;
  top: calc((24px - var(--range-switch-track-height, 10px)) / 2);
  width: 100%;
  height: var(--range-switch-track-height, 10px);
  background: var(--range-switch-track-bg, #ddd);
  border-radius: 999px;
}

.range-switch::-webkit-slider-thumb,
.range-switch::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  height: var(--range-switch-thumb-size, 20px);
  width: var(--range-switch-thumb-size, 20px);
  border-radius: 50%;
  position: absolute;
  top: calc((24px - var(--range-switch-thumb-size, 20px)) / 2);
  background: var(--range-switch-thumb-default-bg, gray);
  transition: background 0.2s ease;
}

.range-switch[value="1"]::-webkit-slider-thumb,
.range-switch[value="1"]::-moz-range-thumb {
  background: var(--range-switch-thumb-default-bg, gray);
}

.range-switch[value="2"]::-webkit-slider-thumb,
.range-switch[value="2"]::-moz-range-thumb {
  background: var(--range-switch-thumb-active-bg, rgb(13, 110, 253));
}

/* Binary switch control */
.binary-switch-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.binary-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: min(320px, 100%);
  background: var(--binary-switch-background);
  border: 1px solid var(--binary-switch-border);
  border-radius: 999px;
  padding: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.binary-switch:focus-within {
  border-color: var(--binary-switch-focus-border);
  box-shadow: var(--binary-switch-focus-shadow);
}

.binary-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: 0;
  bottom: 0;
  width: 50%;
  margin: 0;
}

.binary-switch-input[value="1"] {
  left: 0;
}

.binary-switch-input[value="2"] {
  right: 0;
}

.binary-switch-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--binary-switch-color);
  cursor: pointer;
  user-select: none;
  padding: 0.45rem 0.5rem;
  border-radius: 999px;
  transition: color 0.2s ease, font-weight 0.2s ease;
  z-index: 1;
  min-height: 2.25rem;
}

.binary-switch-option:focus-visible,
.binary-switch-input:focus-visible + .binary-switch-option {
  outline: none;
  box-shadow: var(--binary-switch-focus-shadow);
}

.binary-switch-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--binary-switch-indicator-bg);
  box-shadow: var(--binary-switch-indicator-shadow);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1), background 0.25s ease, box-shadow 0.25s ease;
  z-index: 0;
  pointer-events: none;
}

.binary-switch-input[value="1"]:checked ~ .binary-switch-indicator {
  transform: translateX(0);
}

.binary-switch-input[value="2"]:checked ~ .binary-switch-indicator {
  transform: translateX(100%);
}

.binary-switch-input:checked + .binary-switch-option {
  color: var(--binary-switch-active-color);
  font-weight: 600;
}

@media (max-width: 576px) {
  .binary-switch-option {
    font-size: 0.85rem;
  }
}

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  SEGMENTED CONTROL (.segmented-control) — Pill-Switch-Optik        ║
   ║  ──────────────────────────────────────────────────────────────    ║
   ║  Zwei Pill-Optionen mit sliding Active-Pill + Settings-Button      ║
   ║  rechts. Active-Pill schiebt CSS-only via translateX, Tokens aus   ║
   ║  dem Fonder-Token-System (--nav-pills-active-bg / --radius-pill /  ║
   ║  --form-control-*).                                                ║
   ║                                                                    ║
   ║  Markup-Pattern                                                    ║
   ║  ──────────────                                                    ║
   ║  <div class="segmented-control">                                   ║
   ║    <input type="hidden" id="..." name="...">                       ║
   ║    <div class="segmented-control__group">                          ║
   ║      <input type="radio" class="form-check-input                   ║
   ║                                  segmented-control__input"  ...>   ║
   ║      <label class="segmented-control__option" for="...">           ║
   ║        <span class="segmented-control__label-text">Gesetzlich</…>  ║
   ║      </label>                                                      ║
   ║      <input type="radio" ...> <label ...>Privat</label>            ║
   ║      <span class="segmented-control__indicator"></span>            ║
   ║    </div>                                                          ║
   ║    <button class="segmented-control__settings" ...>⚙</button>      ║
   ║  </div>                                                            ║
   ║                                                                    ║
   ║  Backend-State                                                     ║
   ║  ────────────                                                      ║
   ║  Radios tragen .form-check-input + data-switch-hidden /            ║
   ║  data-checked / data-unchecked / data-switch-submit — switches.js  ║
   ║  greift unverändert (vom alten eckigen Stil 1:1 übernommen).       ║
   ║                                                                    ║
   ║  Bewusst KEIN Cross-Impact auf .binary-switch (Pill-Toggle in      ║
   ║  kv_modal.html / profile_modals.html bleibt eigenes Pattern).      ║
   ╚════════════════════════════════════════════════════════════════════╝ */
/* TEST: Outer-Grid wiederhergestellt als Single-Column (display:grid;
   grid-template-columns:1fr; align-items:stretch). Der frueher zweite
   "auto"-Slot fuer das Zahnraedchen entfaellt — der Button sitzt jetzt
   ausserhalb der Box im .segmented-control-wrap.
   Grund fuer das Re-Grid: ohne Outer-Grid war __group ein Block-Child
   und sein inneres 1fr/1fr-Sub-Grid kollabierte auf Content-Breite
   (Segmente schmal mittig). Als Grid-Item im 1fr-Slot mit
   align-items:stretch bekommt __group wieder eine vom Outer-Layout
   bestimmte definite inline-size, gegen die das innere Sub-Grid sauber
   resolved.
   Wirkt geteilt auf .segmented-control--no-settings im kv_modal — gewollt.
   Revert: display:grid + Spaltendefinition raus, Box wird wieder Block. */
.segmented-control {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  width: 100%;
  min-height: var(--sidebar-element-height, 45px);
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  /* overflow:hidden gehalten, damit Hover-BG der __option am Container-
     Radius sauber geclippt wird (kein Bleed ueber die 12px-Rundung). */
  overflow: hidden;
}

/* TEST: --no-settings-Modifier ist seit der Zahnraedchen-Auslagerung
   funktional ein No-Op (Base nutzt kein Grid mehr). Modifier-Klasse bleibt
   in kv_modal.html als semantischer Marker erhalten, Regel hier inert.
   Revert: bei Reaktivierung des Outer-Grids hier wieder
   grid-template-columns: 1fr setzen. */
.segmented-control.segmented-control--no-settings {
  /* no-op */
}

/* TEST: Neuer Outer-Flex-Wrapper fuer Sidebar-Variante — Toggle-Box +
   Zahnraedchen-Button als Geschwister mit Gap. 0.75rem Gap als
   Design-Default (Magic Number: technische Schuld, falls Token gewuenscht
   spaeter --spacing-sm o.ae. einfuehren).
   Revert: .segmented-control-wrap-Regel raus, Wrap-Div im Template raus. */
.segmented-control-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

/* "Max. Beginnverlegung"-Button im Tarifvergleich, links neben dem Auszahlmodus-
   Switch (dep_fon_plot_all.html). Höhe exakt auf die 38px des segmented-control
   getrimmt + vertikal zentrierter Inhalt; btn-info-Skin (Farbe/Border/Radius)
   bleibt. Liegt NICHT in einem .panel-footer → kein Float-Halo. */
.btn.mbv-tv-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}
.btn.mbv-tv-btn svg {
  width: 14px;
  height: 14px;
}

/* TEST: flex: 1 1 0% (Basis 0, grow:1) statt 1 1 auto. Verhindert dass die
   width:100%-Basis im flex-Kontext die Sidebar-Breite blockiert — Box waechst
   sauber in den verbleibenden Platz neben dem Zahnraedchen.
   Revert: zurueck auf flex: 1 1 auto. */
.segmented-control-wrap > .segmented-control {
  flex: 1 1 0%;
  min-width: 0;
}

/* Float-Halo auf Toggle-Box + Zahnrad-Button via Token. Strikt auf den
   Wrap-Kontext gescopt, damit die Modal-Varianten
   (.segmented-control--no-settings in kv_modal/profile_modals/av_modals)
   ohne Schatten bleiben — die liegen ausserhalb von .segmented-control-wrap.
   Token in Light = weicher Drop-Shadow, in Dark = none.
   .rendite-fond-cog (dep_fon_input.html) nutzt .segmented-control__settings
   standalone (ausserhalb des Wraps) und braucht daher den Ruhe-Halo explizit,
   damit der Rendite-Cog optisch 1:1 dem KV-Button entspricht. */
.segmented-control-wrap > .segmented-control,
.segmented-control-wrap > .segmented-control__settings,
.rendite-fond-cog.segmented-control__settings {
  box-shadow: var(--surface-shadow-soft);
}

/* Ausnahme: der ÄUSSERE Auszahlmodus-Switch (variant='auto', section_main.html)
   liegt auf einer floatenden Card und darf laut DESIGN_SYSTEM §2 KEINEN eigenen
   Float haben. Sein Markup ist .payout-mode-seg > .segmented-control-wrap >
   .segmented-control → die generische Float-Regel oben greift hier ungewollt mit.
   Per :not(.payout-mode-seg--fest) wird NUR die auto-Instanz entschattet; der
   Modal-Switch (--fest, Etappe 11) behält seinen Float, und die Sidebar-Toggle-
   Box + der Zahnrad-/Rendite-Cog (ausserhalb von .payout-mode-seg) bleiben
   ebenfalls unberührt. Spezifität (0,4,0) schlägt die generische Regel (0,2,0). */
.payout-mode-seg:not(.payout-mode-seg--fest) .segmented-control-wrap > .segmented-control {
  box-shadow: none;
}

/* Inner-Group: Anchor für den sliding Indicator + 2-Spalten-Grid
   für die Option-Labels. Padding 4px schafft Reserve, damit die
   abgerundete Pille nicht den Group-Rand berührt.
   width:100%-Symptom-Pflaster entfernt — __group ist wieder Grid-Item
   im wiederhergestellten Outer-Grid und stretcht per align-items:stretch
   von selbst auf die 1fr-Slot-Breite. */
.segmented-control__group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 4px;
}

/* Radio-Inputs visuell entfernen, aber im Tab-Order halten. */
.segmented-control__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

/* width:100%-Symptom-Pflaster entfernt — __option ist Grid-Item im
   1fr/1fr-Sub-Grid von __group und stretcht per Default auf seine
   Cell-Breite, sobald __group (als Grid-Item im Outer-Grid) eine
   definite inline-size hat. */
.segmented-control__option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--form-control-color, inherit);
  cursor: pointer;
  user-select: none;
  /* Synchron zur Indicator-Slide-Animation (550ms, sanftes Easing). */
  transition: color 800ms cubic-bezier(.22, 1, .36, 1),
              font-weight 800ms cubic-bezier(.22, 1, .36, 1);
}

/* Sliding Pill: position absolute über beide Label-Spalten, Width =
   exakt eine Spalte. translateX(0) = links, translateX(100%) = rechts.
   Pattern aus .binary-switch übernommen (top/left 4px, width
   calc(50% - 4px), height calc(100% - 8px)).

   border-radius = Container-Radius MINUS Padding (4px) → Pill-Kontur
   verläuft exakt parallel zur Container-Innenkante. Wenn --radius-md
   sich ändert, zieht der Pill-Radius automatisch nach. */
/* TEST: Indicator-Pill ausgeblendet — Active-State wird stattdessen
   ueber Text-Color (Fonder-Blau) + sichtbares Check-Icon kommuniziert.
   Restliche Properties bleiben fuer einfacheren Revert.
   Revert: display:none entfernen. */
.segmented-control__indicator {
  display: none;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  border-radius: calc(var(--radius-md, 12px) - 4px);
  /* Subtle Elevation für visuelle Hebung — kein passender Token im
     Repo, daher inline. Funktioniert in beiden Themes (rgba schwarz). */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transform: translateX(0);
  /* 800ms cubic-bezier(.22, 1, .36, 1) = sanfteres Out-Easing
     ("ease-out-quint"-Variante). background + box-shadow ändern sich
     aktuell nicht, sind aber transition-ready falls künftig der
     Active-Pill-Stil dynamisch werden sollte. */
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1),
              background 800ms cubic-bezier(.22, 1, .36, 1),
              box-shadow 800ms cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
  pointer-events: none;
}

.segmented-control__input[value="2"]:checked ~ .segmented-control__indicator {
  transform: translateX(100%);
}

/* TEST: Active-Option-Text auf Fonder-Blau statt weiß. Indicator-Pill
   ist ausgeblendet (siehe .segmented-control__indicator-Block oben),
   Active-State kommuniziert sich ueber Color + Check-Icon.
   Revert: color zurueck auf #ffffff. */
.segmented-control__input:checked + .segmented-control__option {
  color: var(--nav-tabs-link-active-color, #0d6efd);
  font-weight: 600;
}

/* Keyboard-Focus-Sichtbarkeit. Kein Hover-Effekt für die Optionen
   (Pattern soll klar und ruhig bleiben). Border-Radius spiegelt den
   Pill-Radius, damit der Focus-Ring der Pill-Kontur folgt. */
.segmented-control__input:focus-visible + .segmented-control__option {
  box-shadow: inset 0 0 0 2px var(--form-focus-border, rgba(23, 103, 255, 0.65));
  border-radius: calc(var(--radius-md, 12px) - 4px);
}

/* TEST: Inactive-Hover-BG wie Zahnraedchen — graues Highlight ueber
   --hover-glow-bg. Active-Option bekommt KEIN Hover (via :not(:checked)).
   Pseudo-Element analog zum Settings-Button-Pattern (4px-Inset, Pill-
   Radius). Revert: beide ::before-Bloecke entfernen. */
.segmented-control__option::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: calc(var(--radius-md, 12px) - 4px);
  background: transparent;
  transition: background 200ms ease;
  pointer-events: none;
  z-index: -1;
}
.segmented-control__input:not(:checked) + .segmented-control__option:hover::before {
  background: var(--hover-glow-bg, rgba(0, 0, 0, 0.06));
}

/* TEST: Always-visible Hairline-Divider ZWISCHEN den beiden Segmenten
   (Gesetzlich/Privat). Stilistisch identisch zum alten
   .segmented-control__settings::before (1px, var(--form-control-border),
   ~8px Inset oben/unten — Magic Number: technische Schuld, an die alte
   Settings-Divider-Geometrie angeglichen).
   Positioniert am right-Edge des ersten __option-Labels — entspricht der
   Mittellinie der 1fr/1fr-Grid-Spalten in __group.
   Wirkt geteilt auf .segmented-control--no-settings im kv_modal — gewollt.
   Revert: diesen Block entfernen. */
.segmented-control__group .segmented-control__option:first-of-type::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--form-control-border, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

/* 3-Segment-Variante (z.B. Eingabeart: Effektivkosten / Detailliert / PDF).
   Drei gleich breite Spalten + zweiter Hairline-Divider zwischen Option 2 und 3
   (der erste kommt aus der :first-of-type-Regel oben, gilt fuer alle Gruppen). */
.segmented-control__group--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.segmented-control__group--3 .segmented-control__option:nth-of-type(2)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--form-control-border, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

/* 1-Segment-Variante (Auszahlmodus-Switch, wenn die aktiven Anlagen nur einen
   Modus können — z.B. nur Rürup → nur "Leibrente"). Eine Spalte, kein
   Hairline-Divider (die :first-of-type-Regel oben würde sonst eine Linie an
   der rechten Containerkante zeichnen). Funktioniert in Light + Dark
   (zeichnet nichts Theme-abhängiges). */
.segmented-control__group--1 {
  grid-template-columns: minmax(0, 1fr);
}
.segmented-control__group--1 .segmented-control__option:first-of-type::after {
  display: none;
}

/* TEST: Auszahlmodus-Schalter — Check-Icon-Stil v3 (section_main.html).
   Weißer Grund (--form-control-bg), Border + radius-md. Inaktiv = gedimmtes
   Grau (--form-check-label-color). Aktiv = Akzentfarbe + fett + check-circle
   links (feather, 14px, via .segmented-control__check). Symmetrie: rechter
   Mirror-Platzhalter (--mirror) immer unsichtbar — Text bleibt exakt zentriert.
   Hover → graues Kästchen (--surface-soft-bg), 3px-Inset ringsum, keine
   Schriftfarb-Änderung. Trennstriche zwischen Segmenten (base-::after).
   Dark Mode via Token automatisch. Scoped komplett auf .payout-mode-seg.
   Revert: Block entfernen (+ Markup in section_main.html). */
.payout-mode-seg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}
.payout-mode-seg .segmented-control-wrap {
  width: auto;
  max-width: 100%;
}
/* Äußerer Container: weißer Grund, Border, radius-md, 38px.
   width:max-content → Container ist exakt so breit wie die Segmente (shrink-to-fit).
   max-width:100% als Responsive-Fallback. min-height überschreibt min-height:45px.
   Kein Float-Halo hier — der äußere Switch liegt auf einer floatenden Card (DESIGN_SYSTEM §2),
   der Float-Halo ist nur für die Modal-Instanz (--fest-Variante, siehe dort). */
.payout-mode-seg .segmented-control {
  width: max-content;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  background: var(--form-control-bg, #fff);
  border: 1px solid var(--form-control-border, #d0d0d6);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.payout-mode-seg .segmented-control-wrap > .segmented-control {
  flex: 0 1 auto;
}
/* Group: Flex statt Grid — aktives Segment darf breiter werden (flex-grow 1.5
   vs 1), Übergang per flex-grow 200ms ease animiert. padding: 0 bleibt. */
.payout-mode-seg .segmented-control__group {
  display: flex;
  padding: 0;
}
/* Segmente: Inhalt+Padding bestimmt die Breite (kein flex-grow).
   white-space:nowrap verhindert Zeilenumbruch.
   16px horizontales Padding (1rem) je Seite — identisch in allen Segmenten.
   Breiten-Animation erfolgt implizit über die max-width-Transition des Check-Icons. */
.payout-mode-seg .segmented-control__option {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: 0.2rem 1rem;
  color: var(--form-check-label-color, #6c757d);
  border-radius: 0;
  gap: 6px;
  transition: color 800ms cubic-bezier(.22, 1, .36, 1),
              font-weight 800ms cubic-bezier(.22, 1, .36, 1);
}
/* Aktives Segment: Akzentfarbe + fett, kein Hintergrund.
   Breitenänderung kommt allein vom einblendenden Check-Icon (max-width-Transition). */
.payout-mode-seg .segmented-control__input:checked + .segmented-control__option {
  color: var(--accent-color, #1767ff);
  font-weight: 600;
  background: transparent;
  border: none;
  box-shadow: none;
}
/* Check-Icon: smooth reveal via max-width (0 → 20px) + opacity.
   visibility:visible überschreibt die base-hidden-Regel; overflow:hidden
   clippt das 14px-SVG solange max-width:0. flex-shrink:0 verhindert
   Quetschen innerhalb des Flex-Items. gap auf __option übernimmt Abstand. */
.payout-mode-seg .segmented-control__check {
  visibility: visible;
  max-width: 0;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 0;
  opacity: 0;
  transition: max-width 200ms ease, opacity 200ms ease;
}
.payout-mode-seg .segmented-control__input:checked + .segmented-control__option .segmented-control__check {
  max-width: 20px;
  opacity: 1;
}
/* Mirror-Platzhalter entfällt — kein Gegenwicht mehr nötig, da Check-Icon
   keinen reservierten Platz mehr belegt (max-width:0 in inactive). */
.payout-mode-seg .segmented-control__check--mirror {
  display: none !important;
}
/* Hover-Kästchen: 3px-Inset ringsum (gleicher Abstand zu Trennstrich und
   Außenrand), radius-sm, Hintergrund nur auf inaktiven Segmenten. */
.payout-mode-seg .segmented-control__option::before {
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: var(--radius-sm, 8px);
}
.payout-mode-seg .segmented-control__input:not(:checked) + .segmented-control__option:hover::before {
  background: var(--surface-soft-bg);
}
/* Trennstriche: base-::after-Regeln (right-Kante Option 1+2), immer sichtbar. */
.payout-mode-seg .segmented-control__group .segmented-control__option:first-of-type::after {
  top: 20%;
  bottom: 20%;
  background: var(--form-control-border, #d0d0d6);
}
.payout-mode-seg .segmented-control__group--3 .segmented-control__option:nth-of-type(2)::after {
  top: 20%;
  bottom: 20%;
  background: var(--form-control-border, #d0d0d6);
}
/* Zahnrad: gleiche Höhe wie Rail, kein Schatten. */
.payout-mode-seg .segmented-control__settings {
  width: 38px;
  height: 38px;
  box-shadow: none;
}

/* Breiten-Variante "fest" (Design-System-Variante b): volle Container-Breite,
   Segmente GLEICHVERTEILT — Einsatz: Auszahlungsphasen-Modal
   (entnahmeplan_input.html via partials/_payout_mode_switch.html, variant='fest').
   Erbt die komplette payout-mode-seg-Optik (Check-Icon-Animation, Hover-
   Kästchen, Trennstriche, Tokens → Light + Dark automatisch); überschreibt nur
   die Breiten-Logik der auto-Variante (rechtsbündig, shrink-to-fit).
   Revert: Block entfernen + variant='fest'-Zweig im Macro. */
.payout-mode-seg--fest .segmented-control-wrap {
  width: 100%;
}
.payout-mode-seg--fest .segmented-control {
  width: 100%;
  /* Float-Halo nur für die Modal-Instanz (liegt nicht auf floatender Card). */
  box-shadow: var(--surface-shadow-soft);
}
.payout-mode-seg--fest .segmented-control__group {
  width: 100%;
}
.payout-mode-seg--fest .segmented-control__option {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* TEST: Check-Icon nur sichtbar wenn Option aktiv. visibility:hidden
   reserviert den Icon-Platz auch in inactive — kein Layout-Shift beim
   Wechsel. Revert: diesen Block entfernen + Icon-Spans aus Template raus. */
.segmented-control__check {
  display: inline-flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
  margin-right: 0.4em;
}
.segmented-control__check svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  display: block;
}
.segmented-control__input:checked + .segmented-control__option .segmented-control__check {
  visibility: visible;
  opacity: 1;
}

/* Settings-Button: eigene Outer-Grid-Spalte. Drei visuelle Layer:
     1. ::before — 1px-Inset-Trennlinie zum Pill-Bereich
        (oben/unten je 8px Abstand zur Container-Border).
     2. ::after — Hover-BG als Inset-Rechteck, gleicher 4px-Padding-
        Abstand und gleicher Border-Radius wie die blaue Pill —
        visuelles "Geschwister" der Pill.
     3. Icon (direct child) — über beiden Pseudo-Elementen via
        explizitem z-index. */
/* TEST: Settings-Button ist eigenes Kaestchen mit IDENTISCHEM Skin wie
   die Toggle-Box — weisser BG (--form-control-bg), 1px Border
   (--form-control-border), 12px Radius (--radius-md). Quadratisch:
   width = height = var(--sidebar-element-height, 45px). Hover: dezenter
   form-control-Style box-shadow (--form-focus-shadow), Pattern aus
   forms.css:305-308 ("Form-Control-Geschwister"-Optik).
   Revert: zurueck auf padding-basierte Maße + transparent BG + ::after-
   Hover-BG (siehe Block in switches.css davor). */
.segmented-control__settings {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sidebar-element-height, 45px);
  height: var(--sidebar-element-height, 45px);
  padding: 0;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  /* Color auf --form-check-label-color (Grau) — gleicher Wert wie
     .form-group label, damit Zahnraedchen visuell dem Inactive-Option-Text
     matched. .form-group label-Regel in forms.css:63 ueberschreibt
     .segmented-control__option, der Button kriegt das Override NICHT
     automatisch — daher hier explizit. */
  color: var(--form-check-label-color, #6c757d);
  cursor: pointer;
  /* Damit ::after-Inset (Pseudo-Element) am Border-Radius sauber clippt. */
  overflow: hidden;
  transition: color 150ms ease,
              background-color 150ms ease,
              border-color 150ms ease,
              box-shadow 150ms ease;
}

/* TEST: Hover-Skin wie .form-control:hover (forms.css:305) — Box-Shadow-
   Ring statt Inset-Background. Sorgt fuer "Geschwister-Feeling" zu den
   Form-Controls darum herum.
   Float-Halo (--surface-shadow-soft) wird zusaetzlich gesetzt, damit der
   Ruhe-Halo beim Hover/Focus nicht wegspringt — die zwei Schatten werden
   komma-separiert ueberlagert. In Dark ist --surface-shadow-soft = none,
   dort bleibt nur der Form-Focus-Halo aktiv.
   Revert: diesen Block entfernen, alten ::after-Hover-BG reaktivieren. */
.segmented-control__settings:hover:not(:disabled),
.segmented-control__settings:focus-visible {
  box-shadow: var(--surface-shadow-soft), var(--form-focus-shadow);
  outline: none;
}

/* TEST: Alter Trennstrich vor dem Zahnraedchen entfaellt (Button ist
   jetzt eigenstaendiges Kaestchen mit Border + Gap zur Toggle-Box).
   Selektor bewusst erhalten + display:none statt Loeschen, damit Revert
   trivial bleibt.
   Revert: display:none entfernen. */
.segmented-control__settings::before {
  display: none;
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--form-control-border, rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 0;
}

/* TEST: Alter ::after-Hover-BG (Inset-Grey-Rechteck) entfaellt — Hover
   ist jetzt der box-shadow-Ring oben. ::after via display:none neutralisiert,
   Properties zur einfacheren Reaktivierung erhalten.
   Revert: display:none entfernen. */
.segmented-control__settings::after {
  display: none;
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: calc(var(--radius-md, 12px) - 4px);
  background: transparent;
  transition: background 200ms ease;
  pointer-events: none;
  z-index: 0;
}

.segmented-control__settings > * {
  position: relative;
  z-index: 1;
}

.segmented-control__settings:hover::after,
.segmented-control__settings:focus-visible::after {
  background: var(--hover-glow-bg, rgba(0, 0, 0, 0.06));
}

.segmented-control__settings:focus-visible {
  outline: none;
}

.segmented-control__settings svg {
  width: 16px;
  height: 16px;
}

/* ── Gesperrte Segmente (Schloss-Sperr-Optik, Auszahlmodal) ───────────────────
   IMMER alle Optionen sichtbar; nicht-waehlbare werden GESPERRT statt versteckt.
   Marker: disabled-Radio ODER .segmented-control__option--locked am Label.
   Modus-Switch (_payout_mode_switch.html, variant='fest') setzt disabled +
   --locked aus visible_modes; Anlagen-Switch (entnahmeplan_inputs.js,
   filterAnlageSegments) setzt input.disabled + --locked statt display:none.
   ENG gescopt auf .payout-mode-seg — NICHT global, damit KV-Status/Tarifart/etc.
   (andere segmented-controls) unberuehrt bleiben. Geteilte .segmented-control-
   Basisklassen werden nicht veraendert (nur additive Regeln hier).
   Grauton = var(--bs-secondary-color) (#6c757d): real benutzter Disabled-Token,
   theme-aware -> EIN Token deckt Light + Dark; Schloss erbt via currentColor.
   Revert: diesen Block entfernen + Schloss-Spans/JS-disabled zuruecknehmen. */
/* safeFeatherReplace (core_utils.js) ersetzt das <span data-feather="lock">
   per outerHTML durch ein <svg class="segmented-control__lock ...> — die Klasse
   landet also auf dem SVG selbst (kein Kind-svg). Daher Groesse/Stroke direkt auf
   .segmented-control__lock; CSS-width/height ueberschreiben die feather-24px. */
.payout-mode-seg .segmented-control__lock {
  display: none;
}
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option .segmented-control__lock,
.payout-mode-seg .segmented-control__option--locked .segmented-control__lock {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.4em;
  width: 13px;
  height: 13px;
  color: #B0B9CC;
  stroke: currentColor;
}
/* Label-Text + Schloss im selben hellen Grauton; nicht fett, nicht akzentuiert. */
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option,
.payout-mode-seg .segmented-control__option--locked {
  color: #B0B9CC !important;
  font-weight: 400 !important;
  pointer-events: none;
  cursor: not-allowed;
}
/* Hover-Inset im Sperr-Zustand AUS. */
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option::before,
.payout-mode-seg .segmented-control__option--locked::before {
  background: transparent !important;
}
/* Haekchen (aktiv-Marker) im Sperr-Zustand AUS — gesperrt ist nie aktiv. */
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option .segmented-control__check,
.payout-mode-seg .segmented-control__option--locked .segmented-control__check {
  display: none !important;
}
/* Tooltip-Wrapper ums Schloss: traegt data-bs-toggle-tooltip + title. Der
   Tooltip BLEIBT auf dem .lock-wrap (Punkt 2 erlaubt "behalten") — statt ihn ans
   Label zu ziehen. Grund: ein Label-Tooltip waere nur server-gatebar; der
   Anlagen-Switch setzt seinen Sperr-Zustand aber per JS (live-reaktiv), ein
   Label-Tooltip dort wuerde ohne JS-Gating auch auf WAEHLBAREN Segmenten feuern.
   Stattdessen spannt ein transparentes ::after-Overlay des lock-wrap ueber das
   GANZE gesperrte .option (position:relative) → Hover ueber Schloss ODER
   Label-Text triggert den EINEN Tooltip. Gegated durch --locked / :disabled+option
   (beide Switches setzen das). Klick bleibt tot: disabled-Radio (label[for]
   toggelt es nicht) + Label pointer-events:none; nur lock-wrap + Overlay sind
   pointer-events:auto. Theme-unabhaengig (nur Hover-Faehigkeit). */
.payout-mode-seg .segmented-control__lock-wrap {
  display: inline-flex;
  align-items: center;
}
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option .segmented-control__lock-wrap,
.payout-mode-seg .segmented-control__option--locked .segmented-control__lock-wrap {
  pointer-events: auto;
  cursor: default;
}
/* Hover-Trigger = GANZES Segment: ::after des lock-wrap deckt das .option ab
   (inset:0 relativ zum position:relative .option). Transparent, fängt nur den
   Hover ab → Tooltip feuert über Schloss UND Text. Kein Klick-Effekt (s.o.). */
.payout-mode-seg .segmented-control__input:disabled + .segmented-control__option .segmented-control__lock-wrap::after,
.payout-mode-seg .segmented-control__option--locked .segmented-control__lock-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: default;
}

/* === ./css/core/sliders.css === */
/* sliders.css
 *
 * Zentrales Styling fuer ALLE native <input type="range"> mit
 * Bootstrap-Klasse .form-range. Ziel-Look (vom User vorgegeben):
 * - Track linke Haelfte BLAU gefuellt (--nav-pills-active-bg),
 *   rechte Haelfte GRAU (--form-control-border).
 * - Thumb 18x18 rund, weiss, 2px blauer Border, weicher Drop-Shadow
 *   (schwebender Look). Focus-Ring als sanfter blauer Glow.
 *
 * Mechanik: Der "links-gefuellt"-Effekt wird ueber eine CSS-Variable
 * --slider-fill (Prozentwert) auf jedem Slider-Element realisiert.
 * slider_fill.js setzt sie initial beim DOMContentLoaded und live beim
 * input-Event. Browser ohne aktives JS sehen accent-color als Fallback
 * (in modernen Chrome/Edge/Firefox = einfarbiger blauer Track,
 * akzeptabel als degradierter Look).
 *
 * Wirkt global auf jeden .form-range im Tool (Bedarfsermittlung,
 * AV-Plot, Modale, depot_2, ins_base_input, entnahmeplan, etc.).
 * Revert: diese Datei entfernen + @import in base_common.css raus.
 */

.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  /* Fallback fuer Browser ohne JS-Fill: Track + Thumb werden einfarbig
     blau. Modernes Chrome/Firefox malen die linke Haelfte trotzdem
     gefuellt, Safari ignoriert es.
     WICHTIG: hardcoded rgb(15,76,154) statt var(--nav-pills-active-bg).
     Der Token ist im Light-Theme ein linear-gradient, was als
     accent-color-Wert (braucht <color>) invalid waere → fallback auf
     Bootstrap-Blau. Hardcoded Royal-Blau garantiert konsistenten Slider-
     Akzent in beiden Themes. */
  accent-color: rgb(var(--accent-rgb, 13, 110, 253));
}

/* ─── Track ────────────────────────────────────────────────────────
   linear-gradient mit Hard-Stop bei --slider-fill (Default 50% wenn
   das JS nicht gelaufen ist) → links blau, rechts grau. Beide Vendor-
   Pseudos identisch, sonst Verhalten unsymmetrisch in Firefox vs.
   Chrome/Edge/Safari. */
/* TEST: Slider-Akzent auf Fonder-Blau (#0d6efd = rgb(13,110,253))
   umgestellt. Zuvor rgb(15,76,154) (Royal-Blau wie Sidebar-Heading) —
   visuell zu dunkel im Kontext der hellen Form-Controls; Fonder-Blau
   matched besser die Idle-/Active-Akzente in den anderen Modulen.
   Hardcoded weil --nav-pills-active-bg im Light-Theme ein linear-
   gradient ist (invalid als color-stop). background-color-Fallback +
   getrenntes background-image + Single-Position-Hard-Stops bleiben aus
   den vorherigen Fixes.
   Revert: rgb(13,110,253) → rgb(15,76,154) zurueck (oder, fuer Token-
   Lookup, var(--nav-tabs-link-active-color) — theme-aware Solid-Color). */
.form-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(
    to right,
    rgb(var(--accent-rgb, 13, 110, 253)) var(--slider-fill, 50%),
    var(--form-control-border, rgba(0, 0, 0, 0.12)) var(--slider-fill, 50%)
  );
}
.form-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(
    to right,
    rgb(var(--accent-rgb, 13, 110, 253)) var(--slider-fill, 50%),
    var(--form-control-border, rgba(0, 0, 0, 0.12)) var(--slider-fill, 50%)
  );
}

/* ─── Thumb ────────────────────────────────────────────────────────
   18×18 weisser Kreis, 2px Royal-Blau-Border, weicher Drop-Shadow
   fuer den "schwebenden" Look. margin-top -6px zentriert vertikal
   auf dem 6px-Track (Thumb 18px / 2 - Track 6px / 2 = 6px Overshoot).
   Firefox braucht border: none + eigenes Outline, Webkit nimmt border
   nativ — beide Pseudos getrennt setzen. */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ffffff;
  /* TEST: hardcoded rgb(15,76,154) statt var(--nav-pills-active-bg) — der
     Token ist im Light-Theme ein Gradient (invalid als border-color, fiel
     auf currentColor → blass-grau zurueck). Solid Royal-Blau garantiert
     kraeftigen Ring. Revert: zurueck auf var(--nav-pills-active-bg, ...). */
  border: 2px solid rgb(var(--accent-rgb, 13, 110, 253));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  /* TEST: hardcoded rgb(15,76,154) statt var(--nav-pills-active-bg) — der
     Token ist im Light-Theme ein Gradient (invalid als border-color, fiel
     auf currentColor → blass-grau zurueck). Solid Royal-Blau garantiert
     kraeftigen Ring. Revert: zurueck auf var(--nav-pills-active-bg, ...). */
  border: 2px solid rgb(var(--accent-rgb, 13, 110, 253));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

/* ─── Focus / Hover ────────────────────────────────────────────────
   Kein Browser-Standard-Outline, dafuer ein sanfter blauer Glow um
   den Thumb. Wirkt sowohl bei Keyboard-Focus als auch beim Hover. */
.form-range:focus {
  outline: none;
}
.form-range:focus::-webkit-slider-thumb,
.form-range:hover::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),
              0 0 0 4px rgba(13, 110, 253, 0.18);
}
.form-range:focus::-moz-range-thumb,
.form-range:hover::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),
              0 0 0 4px rgba(13, 110, 253, 0.18);
}

/* Disabled-State: Track grau + halbtransparenter Thumb, kein Hover-Glow */
.form-range:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ─── Dark Mode ────────────────────────────────────────────────────
   --form-control-border resolved im Dark-Theme auf rgba(255,255,255,0.22)
   — der graue Rest-Track bleibt sichtbar auf dunklem BG. Thumb-Border
   nutzt den Dark-Theme-Resolution-Wert von --nav-pills-active-bg.
   Falls Dark-Theme den Token anders auflöst, hier ggf. explizit nachjustieren.
   Aktuell keine Override noetig — Token-System haelt den Look konsistent. */

/* === ./css/core/toggles.css === */
/* Global theme toggle shared styling */
.theme-toggle {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.theme-toggle input {
  display: none;
}

.toggle-track {
  position: relative;
  width: 68px;
  height: 30px;
  background: linear-gradient(135deg, #e2e8f0, #ffffff);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

[data-theme='dark'] .toggle-track {
  background: linear-gradient(135deg, #1f2937, #0f172a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.55);
}

.toggle-track .icon {
  display: flex;
  width: 14px;
  height: 14px;
  color: #64748b;
  opacity: 0.65;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

[data-theme='dark'] .toggle-track .icon {
  color: #94a3b8;
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1), background 0.4s ease;
}

[data-theme='dark'] .toggle-knob {
  background: #0f172a;
}

.theme-toggle input:checked + .toggle-track .toggle-knob {
  transform: translateX(38px);
}

.theme-toggle input:not(:checked) + .toggle-track .moon {
  opacity: 0.25;
}

.theme-toggle input:checked + .toggle-track .sun {
  opacity: 0.25;
}

.theme-toggle input:checked + .toggle-track .moon {
  opacity: 1;
}

.theme-toggle input:not(:checked) + .toggle-track .sun {
  opacity: 1;
}

/* === ./css/core/icons.css === */
/* Feather icon adjustments */
.feather {
  width: var(--icon-feather-size, 14px);
  height: var(--icon-feather-size, 14px);
  vertical-align: text-bottom;
  stroke: currentColor;
}

/* Icon size utility classes */
.icon-sm  { width: 14px; height: 14px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }

.menu {
  width: var(--icon-menu-size, 32px);
  height: var(--icon-menu-size, 32px);
  color: var(--icon-menu-color, currentColor) !important;
}

.feather-message-circle {
  width: var(--icon-chat-size, 42px);
  height: var(--icon-chat-size, 42px);
  color: var(--icon-chat-color, currentColor) !important;
  transition: color 0.2s ease;
}

.feather-message-circle:hover {
  color: var(--icon-chat-hover-color, var(--icon-chat-color, currentColor)) !important;
}

/* === ./css/core/utility_blocks.css === */
/* Progress indicators - unified styles for all progress bars */
.progress {
  background-color: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  height: 26px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 5;
  isolation: isolate;
  color: initial;
}

[data-bs-theme="dark"] .progress,
[data-theme="dark"] .progress {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: width 0.6s ease;
  color: #fff !important;
  position: relative;
  z-index: 6;
  padding: 0 0.5rem;
  white-space: nowrap;
}

/* Warning (yellow) and light progress bars need dark text for contrast */
.progress-bar.bg-warning,
.progress-bar.bg-light {
  color: #000 !important;
}

/* Light background colors via inline styles also need dark text */
.progress-bar[style*="ffc107"],
.progress-bar[style*="255, 193, 7"],
.progress-bar[style*="ffcd39"],
.progress-bar[style*="ffd700"],
.progress-bar[style*="ffeb3b"],
.progress-bar[style*="fff176"],
.progress-bar[style*="f8f9fa"],
.progress-bar[style*="248, 249, 250"],
.progress-bar[style*="20c997"],
.progress-bar[style*="32, 201, 151"] {
  color: #000 !important;
}

/* Cost progress bar colors */
.progress-bar.bg-cost-alpha {
  background-color: rgb(220, 53, 69) !important;
}

.progress-bar.bg-cost-beta {
  background-color: rgb(13, 110, 253) !important;
}

.progress-bar.bg-cost-gamma {
  background-color: rgb(117, 126, 133) !important;
}

/* Ensure progress bars in cards are not affected by card overlays */
.card .progress {
  z-index: 5;
}
.card .progress-bar {
  z-index: 6;
}

/* Small progress indicators for compact displays (e.g., in modals/lists) */
.progress.progress-sm {
  height: 6px !important;
}

/* Utility containers */
.kasten {
  background-color: #293248;
  line-height: 15px;
  border-radius: 5px;
  border: 1px solid #293248;
  padding: 10px;
}

.overflow-scroll {
  height: calc(100vh - 100px);
  overflow-y: auto;
  position: relative;
}

.on_top_btn {
  position: fixed;
  right: 0;
  bottom: 0;
  color: var(--back-to-top-color, rgb(15, 76, 154));
}

.on_top_btn:hover {
  color: var(--back-to-top-hover-color, rgba(15, 76, 154, 0.5));
}

/* === ./css/core/support.css === */
/* Floating action button for support contact */
.support-fab {
  position: fixed;
  bottom: var(--support-fab-bottom, 24px);
  right: var(--support-fab-right, 24px);
  width: var(--support-fab-size, 64px);
  height: var(--support-fab-size, 64px);
  border-radius: var(--radius-pill);
  border: 2px solid var(--support-fab-border, rgba(118, 75, 162, 0.4));
  background: var(--support-fab-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  color: var(--support-fab-color, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  appearance: none;
  box-shadow: var(--support-fab-shadow, 
    0 8px 32px -8px rgba(102, 126, 234, 0.5),
    0 4px 16px -4px rgba(118, 75, 162, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset);
  z-index: var(--support-fab-z-index, 1080);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease, 
              background 0.3s ease, 
              border-color 0.3s ease;
}

/* Animated glow ring */
.support-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: support-fab-glow 3s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.support-fab:hover::before {
  opacity: 0.6;
}

@keyframes support-fab-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Pulse animation for attention */
.support-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: support-fab-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: -2;
}

@keyframes support-fab-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0;
  }
  50% { 
    transform: scale(1.3);
    opacity: 0.3;
  }
}

.support-fab:hover,
.support-fab:focus-visible {
  background: var(--support-fab-hover-bg, linear-gradient(135deg, #764ba2 0%, #667eea 100%));
  border-color: var(--support-fab-hover-border, rgba(255, 255, 255, 0.5));
  box-shadow: var(--support-fab-hover-shadow, 
    0 12px 40px -8px rgba(102, 126, 234, 0.6),
    0 8px 24px -4px rgba(118, 75, 162, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset);
  transform: translateY(-4px) scale(1.05);
}

.support-fab:hover::after {
  animation: none;
  opacity: 0;
}

.support-fab:focus-visible {
  outline: 3px solid var(--support-fab-hover-border, rgba(255, 255, 255, 0.6));
  outline-offset: 4px;
}

.support-fab svg,
.support-fab [data-feather] {
  width: var(--support-fab-icon-size, 26px);
  height: var(--support-fab-icon-size, 26px);
  color: inherit;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.support-fab:hover svg,
.support-fab:hover [data-feather] {
  transform: scale(1.1);
}

.support-fab .feather-message-circle {
  color: inherit !important;
}

/* Sparkle decoration — DEAKTIVIERT (siehe support-fab-sparkle in Template).
   Vorher: orange-gelber "✨"-Dot als generelle "Hier ist Hilfe!"-Anzeige.
   Jetzt: der semantisch-praezise .bot-badge ersetzt das. Zwei Punkte
   nebeneinander (gruen + orange) sahen aus wie ein Bug — siehe User-
   Report vom 2026-05-29. Wenn die Bot-Bubble-Phase mal abgebaut wird,
   diese Regel wieder entfernen. */
.support-fab-sparkle {
  display: none !important;
}

.support-fab-sparkle::before {
  content: '✨';
  font-size: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

@keyframes sparkle-bounce {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(10deg);
  }
  50% { 
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.1) rotate(-10deg);
  }
}

@media (max-width: 575.98px) {
  .support-fab {
    bottom: calc(var(--support-fab-bottom, 24px) - 6px);
    right: calc(var(--support-fab-right, 24px) - 6px);
  }
  
  .support-fab-sparkle {
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
  }
}

/* ============================================
   SUPPORT CHAT MODAL - Modern Minimalist Design
   ============================================ */

/* Modal Container */
.support-chat-dialog {
  max-width: 520px;
}

.support-chat-modal {
  border: none;
  border-radius: var(--support-chat-radius, 20px);
  overflow: hidden;
  box-shadow: var(--support-chat-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.15));
  background: var(--support-chat-bg, #ffffff);
}

/* Header */
.support-chat-header {
  background: var(--support-chat-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  border: none;
  padding: 1.25rem 1.5rem;
  color: white;
}

/* Force white text for header title - important for gradient background visibility */
.support-chat-header .modal-title,
.support-chat-header h5,
#support_chat_modal_label {
  color: #ffffff !important;
}

.support-chat-avatar-header {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.support-chat-icon {
  width: 24px;
  height: 24px;
  color: white;
}

.support-chat-status {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: var(--radius-circle);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.support-chat-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.support-chat-close:hover {
  opacity: 1;
}

/* Messages Area */
.support-chat-messages {
  height: 380px;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--support-chat-messages-bg, #f8fafc);
  scroll-behavior: smooth;
}

/* Scrollbar Styling */
.support-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.support-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.support-chat-messages::-webkit-scrollbar-thumb {
  background: var(--support-chat-scrollbar, #cbd5e1);
  /* TODO: 3px passt nicht ins Radius-Token-Schema (sm/md/lg = 8/12/16px) — Scrollbar-Thumb */
  border-radius: 3px;
}

/* Chat Avatars */
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.chat-avatar svg {
  width: 18px;
  height: 18px;
}

.bot-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.user-avatar {
  background: var(--support-chat-user-avatar-bg, #e2e8f0);
  color: var(--support-chat-user-avatar-color, #475569);
}

/* Chat Bubbles */
.chat-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  line-height: 1.5;
}

.bot-bubble {
  background: var(--support-chat-bot-bubble-bg, #ffffff);
  color: var(--support-chat-bot-bubble-color, #1e293b);
  border-bottom-left-radius: 6px;
  box-shadow: var(--support-chat-bot-bubble-shadow, 0 2px 8px rgba(0, 0, 0, 0.04));
}

.user-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  border-bottom-right-radius: 6px;
  margin-left: auto;
}

.user-bubble p,
.user-bubble span {
  color: white !important;
}

.chat-hint {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--support-chat-hint-color, #94a3b8);
}

/* Feedback Buttons */
.chat-feedback {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--support-chat-divider, rgba(0, 0, 0, 0.06));
}

.chat-feedback__label {
  /* Bewusst präsenter als der übrige Hint-Text: nur ~2 % der Antworten werden
     bewertet — die Frage muss lesbar sein, nicht dekorativ. */
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--support-chat-feedback-btn-color, #64748b);
  margin-right: 4px;
}

.chat-feedback__btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--support-chat-feedback-btn-border, #e2e8f0);
  background: var(--support-chat-feedback-btn-bg, #f8fafc);
  color: var(--support-chat-feedback-btn-color, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chat-feedback__btn svg {
  width: 16px;
  height: 16px;
}

/* Interne Links in Bot-Antworten (z.B. Mediathek-Videos). */
.chat-md-link {
  color: var(--support-chat-link-color, #1767ff);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .chat-md-link {
  color: var(--support-chat-link-color-dark, #5c98ff);
}

.chat-feedback__btn:hover {
  transform: scale(1.1);
}

.chat-feedback__btn--positive:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #16a34a;
}

.chat-feedback__btn--negative:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.chat-feedback__thanks {
  font-size: 0.75rem;
  font-weight: 500;
  animation: fadeIn 0.3s ease;
}

.chat-feedback__thanks--positive {
  color: #16a34a;
}

.chat-feedback__thanks--negative {
  color: #f59e0b;
}

/* Negativ-Feedback: Gruende-Chips + optionaler Kommentar. Farben kommen aus den
   --support-chat-chip-* Variablen (Light + Dark, gleiche wie die Quick-Reply-
   Chips) -> automatisch dark-mode-tauglich, kein Extra-[data-theme]-Block noetig. */
.chat-feedback__detail {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.3s ease;
}

.chat-feedback__detail-label {
  font-size: 0.75rem;
  color: var(--support-chat-hint-color, #94a3b8);
}

.chat-feedback__optional {
  opacity: 0.7;
}

.chat-feedback__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-feedback__chip {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--support-chat-chip-border, #e7e6f1);
  background: var(--support-chat-chip-bg, #ffffff);
  color: var(--support-chat-chip-color, #4a4660);
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-feedback__chip:hover {
  background: var(--support-chat-chip-hover-bg, rgba(124, 109, 199, 0.08));
  border-color: var(--support-chat-chip-hover-border, rgba(124, 109, 199, 0.45));
}

.chat-feedback__chip.is-selected {
  background: var(--support-accent, #7c6dc7);
  border-color: var(--support-accent, #7c6dc7);
  color: #ffffff;
}

.chat-feedback__comment {
  width: 100%;
  resize: vertical;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--support-chat-chip-border, #e7e6f1);
  background: var(--support-chat-chip-bg, #ffffff);
  color: var(--support-chat-chip-color, #4a4660);
}

.chat-feedback__comment:focus {
  outline: none;
  border-color: var(--support-chat-chip-hover-border, rgba(124, 109, 199, 0.45));
}

.chat-feedback__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chat-feedback__skip,
.chat-feedback__send {
  font-size: 0.75rem;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.chat-feedback__skip {
  background: transparent;
  border-color: var(--support-chat-chip-border, #e7e6f1);
  color: var(--support-chat-hint-color, #94a3b8);
}

.chat-feedback__skip:hover {
  background: var(--support-chat-chip-hover-bg, rgba(124, 109, 199, 0.08));
}

.chat-feedback__send {
  background: var(--support-accent, #7c6dc7);
  color: #ffffff;
}

.chat-feedback__send:hover {
  filter: brightness(1.05);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Escalation Banner */
.support-chat-escalation {
  margin: 0 1.5rem 1rem;
  padding: 12px 16px;
  background: var(--support-chat-escalation-bg, linear-gradient(135deg, #fef3c7 0%, #fde68a 100%));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--support-chat-escalation-color, #92400e);
}

.escalation-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Escalation Bestätigungs-Dialog */
.support-chat-escalation-confirm {
  margin: 0 1rem 1rem;
  padding: 16px;
  background: var(--support-chat-escalation-confirm-bg, linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%));
  border-radius: var(--radius-md);
  border: 1px solid var(--support-chat-escalation-confirm-border, #93c5fd);
  animation: fadeIn 0.3s ease;
}

.escalation-confirm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.escalation-confirm-icon {
  width: 20px;
  height: 20px;
  color: #3b82f6;
  flex-shrink: 0;
}

.escalation-confirm-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--support-chat-escalation-confirm-title, #1e40af);
}

.escalation-confirm-text {
  font-size: 0.875rem;
  color: var(--support-chat-escalation-confirm-text, #1e3a8a);
  margin-bottom: 12px;
  line-height: 1.5;
}

.escalation-confirm-note {
  margin-bottom: 14px;
}

.escalation-note-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--support-chat-escalation-confirm-label, #3b82f6);
  margin-bottom: 6px;
  font-weight: 500;
}

.escalation-note-label svg {
  width: 14px;
  height: 14px;
}

.escalation-note-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.875rem;
  border: 1px solid var(--support-chat-escalation-input-border, #93c5fd);
  border-radius: var(--radius-sm);
  background: var(--support-chat-escalation-input-bg, #ffffff);
  color: var(--support-chat-escalation-input-color, #1e3a8a);
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.escalation-note-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.escalation-note-input::placeholder {
  color: #93c5fd;
}

.escalation-confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.escalation-confirm-buttons .btn {
  font-size: 0.85rem;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.escalation-confirm-buttons .btn svg {
  width: 14px;
  height: 14px;
}

/* Input Area */
.support-chat-input-area {
  padding: 1rem 1.5rem 1.25rem;
  background: var(--support-chat-input-area-bg, #ffffff);
  border-top: 1px solid var(--support-chat-divider, #f1f5f9);
}

/* File Preview */
.chat-file-preview {
  margin-bottom: 12px;
}

.file-preview-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--support-chat-file-preview-bg, #f1f5f9);
  border-radius: var(--radius-md);
}

.file-icon {
  width: 18px;
  height: 18px;
  color: #667eea;
}

.file-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--support-chat-file-name-color, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-remove-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #ef4444;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.file-remove-btn:hover {
  opacity: 1;
}

.file-remove-btn svg {
  width: 16px;
  height: 16px;
}

.file-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--support-chat-hint-color, #94a3b8);
  font-size: 0.75rem;
}

.file-hint svg {
  width: 12px;
  height: 12px;
}

/* Chat Form */
.support-chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--support-chat-form-bg, #f8fafc);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.support-chat-form:focus-within {
  border-color: #667eea;
  box-shadow: var(--support-chat-form-focus-shadow, 0 0 0 4px rgba(102, 126, 234, 0.1));
}

.chat-action-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--support-chat-hint-color, #94a3b8);
  transition: background 0.2s, color 0.2s;
}

.chat-action-btn:hover {
  background: var(--support-chat-action-btn-hover-bg, #e2e8f0);
  color: var(--support-chat-action-btn-hover-color, #475569);
}

.chat-action-btn svg {
  width: 20px;
  height: 20px;
}

.support-chat-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 4px;
  font-size: 0.95rem;
  color: var(--support-chat-input-color, #1e293b);
  outline: none;
  /* Textarea-spezifisch */
  resize: none;
  min-height: 24px;
  max-height: 72px; /* ca. 3 Zeilen */
  line-height: 1.4;
  overflow-y: auto;
  font-family: inherit;
}

.support-chat-input::placeholder {
  color: var(--support-chat-hint-color, #94a3b8);
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chat-send-btn:active {
  transform: scale(0.98);
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.chat-send-btn svg {
  width: 20px;
  height: 20px;
}

/* Footer */
.support-chat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--support-chat-divider, #f1f5f9);
}

.footer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--support-chat-hint-color, #94a3b8);
  font-size: 0.8rem;
}

.footer-hint svg {
  width: 14px;
  height: 14px;
  color: #667eea;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: #667eea;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.footer-link:hover {
  background: var(--support-chat-footer-link-hover-bg, #f1f5f9);
  color: #4f46e5;
}

.footer-link--cta {
  border: 1.5px solid #667eea;
  font-weight: 600;
}

.footer-link--cta:hover {
  background: #667eea;
  color: #fff;
}

.footer-link svg {
  width: 14px;
  height: 14px;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  gap: 5px;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-circle);
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0; }

@keyframes typing-bounce {
  0%, 80%, 100% { 
    transform: scale(0.6); 
    opacity: 0.4; 
  }
  40% { 
    transform: scale(1); 
    opacity: 1; 
  }
}

/* Confidence Warning */
.confidence-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--support-chat-warning-bg, #fef3c7);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--support-chat-warning-color, #92400e);
}

.confidence-warning svg {
  width: 14px;
  height: 14px;
}

/* Animation for new messages */
.chat-message {
  animation: message-slide-in 0.3s ease-out;
}

@keyframes message-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quick Reply Chips — eine horizontal scrollbare Zeile (spart vertikalen Platz,
   statt in mehrere Zeilen umzubrechen). Scrollbar versteckt; rechte Kante leicht
   ausgeblendet als "mehr"-Hinweis. */
.chat-quick-replies {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0 1rem 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  animation: fade-in 0.4s ease-out;
}
.chat-quick-replies::-webkit-scrollbar { display: none; }

.quick-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 13px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--support-chat-chip-color, #475569);
  background: var(--support-chat-chip-bg, #ffffff);
  border: 1px solid var(--support-chat-chip-border, #e2e8f0);
  /* TODO: 20px passt nicht ins Radius-Token-Schema (sm/md/lg = 8/12/16px) — Chip-Element */
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.quick-reply-chip:hover {
  background: var(--support-chat-chip-hover-bg, #f1f5f9);
  border-color: var(--support-chat-chip-hover-border, #cbd5e1);
  transform: translateY(-1px);
}

.quick-reply-chip:active {
  transform: translateY(0);
}

.quick-reply-chip svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.chat-quick-replies.hidden {
  display: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   Bot-Bubble (Phase 1: Passiv-Narrator)
   Badge: kleiner Dot oben rechts am Support-FAB, pulsiert wenn Narrative pending.
   Peek: 1-Satz-Tooltip die links vom FAB ausklappt nach 2s Idle-Hover.
   ============================================================================ */

.bot-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #34d399;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.bot-badge--active {
  opacity: 1;
  transform: scale(1);
  animation: bot-badge-pulse 2.6s ease-in-out infinite;
}

@keyframes bot-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.32); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* Bot-Peek liegt UEBER dem FAB (nicht links davon — dort sitzt das
   .changelog-popup "Neuigkeiten" mit gleichem Bereich). Heller Card-Look
   passend zum bestehenden Profile/Card-Design. Mit Pfeil-Tip nach unten
   zum FAB damit der Bezug klar ist. */
.bot-peek {
  position: fixed;
  right: var(--support-fab-right, 24px);
  bottom: calc(var(--support-fab-bottom, 24px) + var(--support-fab-size, 64px) + 14px);
  max-width: 300px;
  width: max-content;
  padding: 11px 14px 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #212529;
  font-size: 0.83rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16),
              0 2px 8px -2px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  z-index: calc(var(--support-fab-z-index, 1080) - 1);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.bot-peek::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 26px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(45deg);
}

.bot-peek--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bot-peek-text {
  font-weight: 500;
  margin-bottom: 4px;
  color: #212529;
}

.bot-peek-action {
  font-size: 0.7rem;
  color: #6c757d;
}

[data-theme="dark"] .bot-peek {
  background: #2a2a35;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8e8f0;
}
[data-theme="dark"] .bot-peek-text { color: #e8e8f0; }
[data-theme="dark"] .bot-peek-action { color: #9ca3af; }
[data-theme="dark"] .bot-peek::after {
  background: #2a2a35;
  border-right-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .bot-badge { border-color: #1a1a24; }

/* ============================================================================
   Bot-UI v2 — modernes Blau-Lila (2026-05-30, Rev.2)
   ----------------------------------------------------------------------------
   Zurueck zum beliebten Blau-Lila-Verlauf (#667eea -> #764ba2), aber sauber:
   Gradient-FAB + Header, dezente Akzent-Chips, klare Guide-Card. Wir SETZEN
   nur die --support-*-Variablen (Bestandscode nutzt sie als Fallback) + ein
   paar gezielte Verfeinerungen. Dark UND Light immer zusammen.
   ============================================================================ */
:root {
  --support-accent: #764ba2;          /* Lila */
  --support-accent-2: #667eea;        /* Blau */
  --support-accent-rgb: 118, 75, 162;
  --support-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --support-gradient-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);

  --support-fab-size: 60px;
  --support-fab-icon-size: 25px;
  --support-fab-bg: var(--support-gradient);
  --support-fab-hover-bg: var(--support-gradient-hover);
  --support-fab-color: #ffffff;
  --support-fab-shadow: 0 8px 22px rgba(var(--support-accent-rgb), 0.40);
  --support-fab-hover-shadow: 0 12px 30px rgba(var(--support-accent-rgb), 0.50);

  --support-chat-radius: 18px;
  --support-chat-bg: #ffffff;
  --support-chat-messages-bg: #f7f8fc;
  --support-chat-header-bg: var(--support-gradient);
  --support-chat-shadow: 0 24px 48px -16px rgba(40, 27, 71, 0.28);

  --support-chat-chip-bg: #ffffff;
  --support-chat-chip-border: #e7e6f1;
  --support-chat-chip-color: #4a4660;
  --support-chat-chip-hover-bg: rgba(var(--support-accent-rgb), 0.08);
  --support-chat-chip-hover-border: rgba(var(--support-accent-rgb), 0.45);
}
[data-theme="dark"] {
  --support-accent: #a594e0;          /* helleres Lila fuer Dark */
  --support-accent-2: #8b9bf0;
  --support-accent-rgb: 165, 148, 224;
  --support-gradient: linear-gradient(135deg, #5a6dd8 0%, #6f4a9e 100%);
  --support-gradient-hover: linear-gradient(135deg, #6f4a9e 0%, #5a6dd8 100%);

  --support-chat-bg: #1f242b;
  --support-chat-messages-bg: #171b21;
  --support-chat-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);

  --support-chat-chip-bg: #232a32;
  --support-chat-chip-border: #36323f;
  --support-chat-chip-color: #cdd6e0;
  --support-chat-chip-hover-bg: rgba(var(--support-accent-rgb), 0.18);
  --support-chat-chip-hover-border: rgba(var(--support-accent-rgb), 0.55);
}

/* FAB: Blau-Lila-Verlauf (der beliebte Look) + dezentes Heben beim Hover. */
.support-fab:hover,
.support-fab:focus-visible {
  transform: translateY(-2px);
}

/* Header: Verlauf statt Flaeche. */
.support-chat-header {
  background: var(--support-chat-header-bg) !important;
}
.support-chat-status .status-dot { background: rgba(255, 255, 255, 0.9); }

/* Quick-Replies als DAUERHAFTE Aktionsleiste: Chips BRECHEN UM (alle sichtbar),
   max. ~2,5 Reihen, sonst dezent vertikal scrollbar. Verschwindet nicht beim
   Schreiben. (Vorher: horizontales Scrollen -> hintere Chips unsichtbar.) */
.chat-quick-replies {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.chat-quick-replies .quick-reply-chip { flex: 0 0 auto; }
.chat-quick-replies::-webkit-scrollbar { display: none; }

/* Chips: die ersten Aktions-Chips (Nächster Schritt / Für meinen Kunden /
   Kurze Tour / Geführte Beratung) mit Akzent-Rahmen als "Aktion". */
.quick-reply-chip:nth-child(-n+4) {
  border-color: rgba(var(--support-accent-rgb), 0.35);
  color: var(--support-accent);
  font-weight: 600;
}
.quick-reply-chip:nth-child(-n+4) svg { opacity: 1; }

/* Bot-Bubble: etwas weicher, modern. */
.chat-bubble.bot-bubble { border-radius: 4px 14px 14px 14px; }

/* Gefuehrter Modus / Consent — als "Neuheit" dezent hervorgehoben:
   feiner Akzent-Streifen links, klare Buttons (Bootstrap btn-primary erbt
   die Brand-Farbe nicht automatisch -> hier auf Akzent setzen). */
#bot-guide-card .chat-bubble {
  border-left: 3px solid var(--support-accent);
  background: rgba(var(--support-accent-rgb), 0.05);
}
#bot-guide-card .btn-primary {
  background: var(--support-accent);
  border-color: var(--support-accent);
  color: #fff;
}
#bot-guide-card .btn-primary:hover {
  background: var(--support-accent-2);
  border-color: var(--support-accent-2);
}
#bot-guide-card .input-group-text {
  background: rgba(var(--support-accent-rgb), 0.08);
  border-color: var(--support-chat-chip-border);
  color: var(--support-chat-chip-color);
}
#bot-guide-card .form-control {
  background: var(--support-chat-bg) !important;
  color: var(--support-chat-chip-color) !important;
  border-color: var(--support-chat-chip-border) !important;
}

/* Peek-Tooltip: Akzent-Rand als feiner moderner Touch. */
.bot-peek { border: 1px solid rgba(var(--support-accent-rgb), 0.22); }

/* Spracheingabe: aktiver Mic-Button pulsiert im Akzent. */
.chat-action-btn.listening {
  color: #fff !important;
  background: var(--support-accent) !important;
  animation: support-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes support-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--support-accent-rgb), 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--support-accent-rgb), 0); }
}

/* ============================================================================
   Spracheingabe — Aufnahme-Leiste (Timer + Live-Wellenform). Ersetzt die
   Eingabezeile waehrend der Aufnahme; WhatsApp-/Telegram-artiges Feedback.
   Farben ueber Theme-Variablen -> Dark + Light automatisch korrekt.
   ============================================================================ */
.chat-recording-bar { display: none; }
.support-chat-form.is-recording { align-items: center; }
.support-chat-form.is-recording > :not(.chat-recording-bar) { display: none !important; }
.support-chat-form.is-recording .chat-recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
}

.chat-rec-cancel,
.chat-rec-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: none; border-radius: var(--radius-md, 10px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .15s, background .2s, color .2s;
}
.chat-rec-cancel { background: transparent; color: var(--support-chat-hint-color, #94a3b8); }
.chat-rec-cancel:hover { background: rgba(239, 68, 68, .12); color: #ef4444; }
.chat-rec-send { background: var(--support-accent, #667eea); color: #fff; }
.chat-rec-send:hover { transform: scale(1.05); }
.chat-rec-send:active { transform: scale(.97); }
.chat-rec-cancel svg, .chat-rec-send svg { width: 18px; height: 18px; }

.chat-rec-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444;
  animation: chat-rec-blink 1s ease-in-out infinite;
}
@keyframes chat-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.chat-rec-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: .9rem; font-weight: 600;
  color: var(--support-chat-input-color, #1e293b);
  min-width: 38px;
}
.chat-rec-wave {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  display: block;
}

/* ----------------------------------------------------------------------------
   Transkriptions-Leiste: deutlich sichtbares "Sprache -> Text laeuft"-Feedback
   waehrend die Aufnahme an Whisper geschickt wird (statt nur blassem Placeholder).
   Theme-Variablen -> Dark + Light automatisch korrekt.
   ---------------------------------------------------------------------------- */
.chat-transcribing-bar { display: none; }
.support-chat-form.is-transcribing { align-items: center; }
.support-chat-form.is-transcribing > :not(.chat-transcribing-bar) { display: none !important; }
.support-chat-form.is-transcribing .chat-transcribing-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
}

.chat-trans-eq {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.chat-trans-eq i {
  width: 3px; height: 100%;
  border-radius: 2px;
  background: var(--support-accent, #667eea);
  transform: scaleY(.35);
  transform-origin: center;
  animation: chat-trans-eq 1s ease-in-out infinite;
}
.chat-trans-eq i:nth-child(2) { animation-delay: .15s; }
.chat-trans-eq i:nth-child(3) { animation-delay: .30s; }
.chat-trans-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes chat-trans-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.chat-trans-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9rem; font-weight: 600;
  color: var(--support-chat-input-color, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chat-trans-spin {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--support-chat-hint-color, #94a3b8);
  border-top-color: var(--support-accent, #667eea);
  animation: chat-trans-spin .7s linear infinite;
}
@keyframes chat-trans-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .chat-trans-eq i, .chat-trans-spin { animation: none; }
  .chat-trans-eq i { transform: scaleY(.7); }
}

/* ============================================================================
   Support-Chat-Modal — Layout-Refresh (2026-05-30, Rev.3)
   ----------------------------------------------------------------------------
   Saubere Flex-Spalte mit fester Hoehe: Header / Nachrichten (scrollt) /
   Chip-Leiste (persistent) / Eingabe / Footer. Behebt: Chips scrollten im
   Nachrichtenbereich weg, starre 380px-Hoehe, Ueberschneidungen.
   ============================================================================ */
.support-chat-dialog { max-width: 480px; }

.support-chat-body {
  display: flex;
  flex-direction: column;
  height: min(74vh, 600px);
  min-height: 0;
  padding: 0;
}

/* Nachrichten fuellen den Rest + scrollen (override der fixen 380px). */
.support-chat-messages {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding: 1.25rem 1.25rem 0.5rem;
}

/* Persistente Chip-Leiste zwischen Nachrichten und Eingabe. */
.support-chat-body .chat-quick-replies {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--support-chat-chip-border);
  background: var(--support-chat-bg);
}

/* Eingabebereich bleibt unten, klare Trennung. */
.support-chat-input-area {
  flex: 0 0 auto;
  border-top: 1px solid var(--support-chat-chip-border);
  background: var(--support-chat-bg);
  padding: 0.75rem 1rem 0.85rem;
}

/* Header etwas kompakter + ruhiger. */
.support-chat-header { padding: 1rem 1.25rem; }
.support-chat-avatar-header { width: 40px; height: 40px; }

/* Eingabezeile: saubere Ausrichtung, Buttons gleich gross. */
.support-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.support-chat-form .support-chat-input {
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: 12px;
}
.support-chat-form .chat-action-btn,
.support-chat-form .chat-send-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Footer: dezent, mit Abstand. */
.support-chat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

/* Datei-Preview-Abstand. */
.chat-file-preview:not(.d-none) { margin-bottom: 0.6rem; }

/* Eskalations-Dialoge: klare Abstaende, kein Ueberschneiden. */
.support-chat-escalation,
.support-chat-escalation-confirm { margin: 0.75rem 1rem; }

/* Der Bestaetigungs-Dialog liegt (seit 07.09.2026) IM scrollenden
   Nachrichtenbereich, direkt hinter der letzten Antwort — kompakt wie eine
   Blase, damit er die Antwort nicht verdeckt. */
.support-chat-messages .support-chat-escalation-confirm {
  margin: 0.5rem 0 0.75rem;
  padding: 12px 14px;
  max-width: 92%;
}
.support-chat-messages .escalation-confirm-text { margin-bottom: 8px; }
.support-chat-messages .escalation-confirm-buttons { margin-top: 4px; }

/* ============================================================================
   FAB-Discoverability (2026-05-30) — den Chat-Button staerker hervorheben,
   damit Berater ihn bemerken. Periodischer Aufmerksamkeits-Ring + sanftes Wippen.
   ============================================================================ */
.support-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--support-accent-rgb), 0.55);
  animation: support-fab-attention 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes support-fab-attention {
  0%   { box-shadow: 0 0 0 0 rgba(var(--support-accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--support-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--support-accent-rgb), 0); }
}
/* sanftes periodisches Wippen, hoert beim Hover auf */
.support-fab { animation: support-fab-bob 4s ease-in-out infinite; }
.support-fab:hover, .support-fab:focus-visible { animation: none; }
@keyframes support-fab-bob {
  0%, 92%, 100% { transform: translateY(0); }
  96%           { transform: translateY(-4px); }
}

/* Mic ohne Browser-Support: sichtbar, aber dezent ausgegraut. */
.chat-action-btn--disabled { opacity: 0.45; }

/* ============================================================================
   Chat-Markdown — saubere Formatierung der Bot-Antworten (fett/Listen/Absaetze)
   ============================================================================ */
.chat-bubble .chat-md > :first-child,
.chat-bubble .chat-md-p:first-child { margin-top: 0; }
.chat-bubble .chat-md-p { margin: 0 0 0.5rem; line-height: 1.45; }
.chat-bubble .chat-md-p:last-child,
.chat-bubble .chat-md > :last-child { margin-bottom: 0; }
.chat-bubble .chat-md-list { margin: 0.35rem 0 0.6rem; padding-left: 1.2rem; }
.chat-bubble .chat-md-list:last-child { margin-bottom: 0; }
.chat-bubble .chat-md-list li { margin-bottom: 0.25rem; line-height: 1.4; }
.chat-bubble .chat-md-list li::marker { color: var(--support-accent); }
.chat-bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.05em 0.35em;
  border-radius: 5px;
  font-size: 0.88em;
}
[data-theme="dark"] .chat-bubble code { background: rgba(255, 255, 255, 0.1); }

/* === ./css/core/flash_messages.css === */
/* Flash message container and cards */
.flash-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1200;
    pointer-events: none;
}

.flash-container.flash-container-active {
    pointer-events: auto;
}

.flash-container .flash-message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 16px 20px 16px 24px;
    border-radius: var(--flash-border-radius, 14px);
    border: 1px solid var(--flash-border-color, rgba(255, 255, 255, 0.1));
    box-shadow: var(--flash-shadow, 0 22px 48px -26px rgba(8, 18, 36, 0.55));
    background: var(--flash-background-color, rgba(10, 18, 32, 0.92));
    color: var(--flash-text-color, #f4f8ff);
    pointer-events: auto;
    overflow: hidden;
    backdrop-filter: blur(10px);
    --flash-accent: var(--flash-default-accent, #3b82f6);
    animation: flash-slide-in 0.35s ease;
}

.flash-container .flash-message::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--flash-accent);
    opacity: 0.8;
}

.flash-container .flash-message > * {
    position: relative;
    z-index: 1;
}

.flash-container .flash-message svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--flash-accent);
}

.flash-container .flash-message .flex-grow-1 {
    min-width: 0;
}

.flash-container .flash-message a {
    color: var(--flash-link-color, #93c5fd);
    text-decoration: underline;
}

.flash-container .flash-message a:hover,
.flash-container .flash-message a:focus-visible {
    color: var(--flash-link-hover-color, #bfdbfe);
}

.flash-container .flash-message .btn-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    filter: var(--flash-close-filter, invert(1));
    background-color: transparent;
}

.flash-container .flash-message .btn-close:hover,
.flash-container .flash-message .btn-close:focus-visible {
    opacity: 1;
    background-color: var(--flash-close-hover-bg, rgba(255, 255, 255, 0.12));
    outline: none;
}

.flash-container .flash-message .btn-close:focus-visible {
    box-shadow: 0 0 0 3px var(--flash-close-focus-ring, rgba(59, 130, 246, 0.45));
}

.flash-container .flash-message.alert-success {
    background: var(--flash-success-background, rgba(25, 135, 84, 0.22));
    border-color: var(--flash-success-border, rgba(25, 135, 84, 0.42));
    color: var(--flash-success-text, rgba(223, 255, 239, 0.95));
    --flash-accent: var(--flash-success-border, #22c55e);
}

.flash-container .flash-message.alert-danger {
    background: var(--flash-danger-background, rgba(220, 53, 69, 0.22));
    border-color: var(--flash-danger-border, rgba(220, 53, 69, 0.4));
    color: var(--flash-danger-text, rgba(255, 228, 232, 0.95));
    --flash-accent: var(--flash-danger-border, #ef4444);
}

.flash-container .flash-message.alert-warning {
    background: var(--flash-warning-background, rgba(255, 193, 7, 0.2));
    border-color: var(--flash-warning-border, rgba(255, 193, 7, 0.38));
    color: var(--flash-warning-text, rgba(255, 248, 220, 0.92));
    --flash-accent: var(--flash-warning-border, #f59e0b);
}

.flash-container .flash-message.alert-info {
    background: var(--flash-info-background, rgba(13, 110, 253, 0.22));
    border-color: var(--flash-info-border, rgba(13, 110, 253, 0.44));
    color: var(--flash-info-text, rgba(220, 234, 255, 0.95));
    --flash-accent: var(--flash-info-border, #38bdf8);
}

.flash-container .flash-message:hover {
    box-shadow: var(--flash-shadow-hover, 0 28px 56px -28px rgba(8, 18, 36, 0.62));
}

.flash-container .flash-message.fade-out {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes flash-slide-in {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .flash-container {
        top: 18px;
        width: min(480px, calc(100vw - 24px));
    }

    .flash-container .flash-message {
        padding: 14px 16px 14px 22px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .flash-container {
        top: 16px;
        width: calc(100vw - 16px);
    }

    .flash-container .flash-message {
        border-radius: calc(var(--flash-border-radius, 14px) - 2px);
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 14px 14px 20px;
    }

    .flash-container .flash-message .btn-close {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* === ./css/core/analytics.css === */
/* Analytical UI components shared by both themes */
.legend-item {
  display: flex;
  align-items: center;
  margin-right: var(--legend-item-gap, 20px);
}

.legend-circle {
  height: var(--legend-circle-size, 15px);
  width: var(--legend-circle-size, 15px);
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--legend-circle-margin, 5px);
}

.alpha-kosten {
  background-color: var(--legend-alpha-color, rgb(220, 53, 69));
}

/* Alpha 2 (laufende Abschlusskosten): abgeschwächtes Rot ("90 % Rot") —
   klar als Teil der Abschlusskosten-Familie erkennbar, aber von Alpha 1
   (Abschlusskosten, kräftiges Rot) unterscheidbar. */
.alpha2-kosten {
  background-color: var(--legend-alpha2-color, rgb(234, 124, 134));
}

.beta-kosten {
  background-color: var(--legend-beta-color, rgb(13, 110, 253));
}

.gamma-kosten {
  background-color: var(--legend-gamma-color, rgb(117, 126, 133));
}

.add_plot_2,
.add_plot_2:active,
.add_plot_2:visited,
.add_plot_2:focus {
  color: var(--plot-add-color, rgb(76, 154, 15));
  position: relative;
  float: right;
  bottom: var(--plot-add-offset, 3px);
  box-shadow: none;
}

.add_plot_2:hover {
  color: var(--plot-action-hover-color, rgb(255, 255, 255));
}

.del_plot_2,
.del_plot_2:active,
.del_plot_2:visited,
.del_plot_2:focus {
  color: var(--plot-delete-color, rgb(154, 76, 15));
  position: relative;
  float: right;
  bottom: var(--plot-delete-offset, 3px);
  box-shadow: none;
}

.del_plot_2:hover {
  color: var(--plot-action-hover-color, rgb(255, 255, 255));
}

.del_ins_2,
.del_ins_2:active,
.del_ins_2:visited,
.del_ins_2:focus {
  color: var(--plot-ins-delete-color, rgb(50, 50, 50));
  position: relative;
  float: right;
  bottom: var(--plot-ins-delete-offset, 3px);
  box-shadow: none;
}

.del_ins_2:hover {
  color: var(--plot-action-hover-color, rgb(255, 255, 255));
}

#multi_plot_carousel_controls {
  height: var(--multi-plot-carousel-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

#multi_plot_carousel_controls .carousel-inner {
  height: 100%;
  max-height: var(--multi-plot-carousel-max-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

#multi_plot_carousel_controls .carousel-item {
  height: 100%;
}

/* Loom embed loader */
.loom-video-container {
  position: relative;
}

.loom-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--loom-overlay-bg, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10;
}

.loom-loading-overlay.hidden {
  display: none;
}

.loom-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--loom-spinner-border, rgba(0, 0, 0, 0.25));
  border-top: 4px solid var(--loom-spinner-border-top, #007bff);
  border-radius: 50%;
  animation: loom-spin 1s linear infinite;
  margin: 0 auto;
}

.loom-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loom-loading-text {
  color: var(--loom-loading-text-color, #666666);
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}

@keyframes loom-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* DSGVO-Zwei-Klick: Drittanbieter-Video (Loom/YouTube) erst nach Social-Consent.
   Deckend (verdeckt den Loading-Spinner darunter), Light+Dark via Theme-Variablen. */
.embed-consent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--embed-consent-bg, #f1f5f9);
  border: 1px dashed var(--embed-consent-border, #94a3b8);
  border-radius: 8px;
  z-index: 11;
  padding: 12px;
  overflow: auto;
}

.embed-consent-box {
  max-width: 420px;
}

.embed-consent-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--embed-consent-title-color, #0f172a);
  margin-bottom: 6px;
}

.embed-consent-text {
  font-size: 13px;
  color: var(--embed-consent-text-color, #475569);
  margin-bottom: 10px;
}

/* Chart loader overlay */
.chart-loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chart-loader-overlay-bg, radial-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)));
  z-index: 5;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease;
}

.chart-loader-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

.chart-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--chart-spinner-border, rgba(255, 255, 255, 0.35));
  border-top-color: var(--chart-spinner-border-top, #0d6efd);
  border-radius: 50%;
  animation: chartSpin 0.8s linear infinite;
}

@keyframes chartSpin {
  to {
    transform: rotate(360deg);
  }
}

[data-theme="light"] .chart-loader-overlay {
  background: var(--chart-loader-overlay-alt-bg, radial-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.1)));
}

/* AV delay cost labels and pills */
.delay-cost-row {
  gap: 1rem;
}

.delay-cost-label {
  color: var(--bs-body-color);
}

:root[data-bs-theme="dark"] .delay-cost-label,
[data-bs-theme="dark"] .delay-cost-label,
:root[data-theme="dark"] .delay-cost-label,
[data-theme="dark"] .delay-cost-label {
  color: var(--bs-light, #f8f9fa);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.delay-base-pill {
  font-size: 1.05rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background-color: rgba(220, 53, 69, 0.12);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.4);
}

.delay-cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background-color: rgba(255, 193, 7, 0.25);
  border: 1px solid rgba(255, 193, 7, 0.6);
  color: #7a4c00;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.delay-cost-pill .delay-cost-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background-color: rgba(255, 193, 7, 0.35);
  color: #7a4c00;
}

[data-bs-theme="dark"] .delay-base-pill,
:root[data-bs-theme="dark"] .delay-base-pill,
[data-theme="dark"] .delay-base-pill,
:root[data-theme="dark"] .delay-base-pill {
  background-color: rgba(220, 53, 69, 0.35);
  color: #ffe7ea;
  border-color: rgba(220, 53, 69, 0.65);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .delay-cost-pill,
:root[data-bs-theme="dark"] .delay-cost-pill,
[data-theme="dark"] .delay-cost-pill,
:root[data-theme="dark"] .delay-cost-pill {
  background-color: rgba(255, 193, 7, 0.32);
  border-color: rgba(255, 193, 7, 0.75);
  color: #fff8e7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .delay-cost-pill .delay-cost-icon,
:root[data-bs-theme="dark"] .delay-cost-pill .delay-cost-icon,
[data-theme="dark"] .delay-cost-pill .delay-cost-icon,
:root[data-theme="dark"] .delay-cost-pill .delay-cost-icon {
  background-color: rgba(255, 193, 7, 0.45);
  color: #fff8e7;
}

/* === ./css/core/auto_calc.css === */
/* Auto-calc overlay shared styles */
.auto-calc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: 16px;
  z-index: 1080;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  visibility: hidden;
}

.auto-calc-overlay--visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.auto-calc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--auto-calc-bg);
  border: 1px solid var(--auto-calc-border);
  color: var(--auto-calc-text);
  box-shadow: var(--auto-calc-card-shadow-base);
  backdrop-filter: blur(18px);
  overflow: hidden;
  animation: autoCalcGlow 3.8s ease-in-out infinite;
}

.auto-calc-card::before {
  content: '';
  position: absolute;
  inset: -25% -35%;
  background: var(--auto-calc-sheen-gradient);
  transform: translateX(var(--auto-calc-sheen-start));
  animation: autoCalcSheen 4.2s ease-in-out infinite;
  pointer-events: none;
}

.auto-calc-spinner {
  position: relative;
  width: 34px;
  height: 34px;
}

.auto-calc-spinner::before,
.auto-calc-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--auto-calc-ring);
  border-right-color: var(--auto-calc-ring-secondary);
  animation: autoCalcSpin 0.95s linear infinite;
  filter: drop-shadow(0 0 8px var(--auto-calc-glow));
}

.auto-calc-spinner::after {
  inset: 6px;
  border-top-color: transparent;
  border-right-color: var(--auto-calc-ring);
  animation-duration: 1.4s;
  animation-direction: reverse;
  opacity: var(--auto-calc-spinner-secondary-opacity, 0.82);
  filter: drop-shadow(0 0 6px var(--auto-calc-glow));
}

.auto-calc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auto-calc-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  line-height: 1.2;
}

.auto-calc-sub {
  font-size: 0.75rem;
  color: var(--auto-calc-subtext);
  line-height: 1.25;
}

@keyframes autoCalcSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes autoCalcGlow {
  0% {
    box-shadow: var(--auto-calc-card-shadow-base);
  }
  50% {
    box-shadow: var(--auto-calc-card-shadow-peak);
  }
  100% {
    box-shadow: var(--auto-calc-card-shadow-base);
  }
}

@keyframes autoCalcSheen {
  0% {
    transform: translateX(var(--auto-calc-sheen-start));
    opacity: 0;
  }
  45% {
    opacity: var(--auto-calc-sheen-opacity, 0.7);
  }
  100% {
    transform: translateX(var(--auto-calc-sheen-end));
    opacity: 0;
  }
}

@media (max-width: 576px) {
  .auto-calc-card {
    gap: 10px;
    padding: 10px 18px;
  }

  .auto-calc-spinner {
    width: 30px;
    height: 30px;
  }

  .auto-calc-title {
    font-size: 0.88rem;
  }

  .auto-calc-sub {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auto-calc-card,
  .auto-calc-card::before {
    animation: none !important;
  }

  .auto-calc-spinner::before,
  .auto-calc-spinner::after {
    animation-duration: 1.6s;
  }
}

/* === ./css/core/cookie_banner.css === */
/* Cookie consent banner shared across themes */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--cookie-banner-padding, 24px);
  background: var(--cookie-banner-bg, rgba(255, 255, 255, 0.98));
  color: var(--cookie-banner-text, #333333);
  z-index: var(--cookie-banner-z-index, 9999);
  border-top: var(--cookie-banner-border-width, 3px) solid var(--cookie-banner-border, #007bff);
  box-shadow: var(--cookie-banner-shadow, rgba(0, 0, 0, 0.18));
  backdrop-filter: var(--cookie-banner-backdrop, blur(14px));
  -webkit-backdrop-filter: var(--cookie-banner-backdrop, blur(14px));
  transform: translateY(110%);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  overflow: hidden;
}

.cookie-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cookie-banner-highlight, linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 65%));
  opacity: var(--cookie-banner-highlight-opacity, 1);
  pointer-events: none;
}

.cookie-banner::after {
  content: "";
  position: absolute;
  inset: -45% -35% auto;
  height: 220%;
  background: var(--cookie-banner-pattern, radial-gradient(160% 120% at 0% 0%, rgba(23, 103, 255, 0.22), transparent 60%));
  opacity: var(--cookie-banner-pattern-opacity, 0.4);
  transform: var(--cookie-banner-pattern-transform, rotate(10deg));
  pointer-events: none;
}

.cookie-banner > * {
  position: relative;
  z-index: 1;
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-banner h5 {
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cookie-heading-color, inherit);
}

.cookie-banner p {
  margin-bottom: 18px;
  line-height: 1.7;
  color: var(--cookie-paragraph-color, inherit);
  opacity: 0.92;
}

.cookie-settings {
  margin-top: 20px;
}

.cookie-category {
  padding: var(--cookie-category-padding, 18px);
  border-radius: var(--cookie-category-radius, 16px);
  margin-bottom: 14px;
  background: var(--cookie-category-bg, rgba(248, 249, 250, 0.9));
  border: 1px solid var(--cookie-category-border, rgba(13, 110, 253, 0.25));
  box-shadow: var(--cookie-category-shadow, 0 10px 24px rgba(15, 42, 97, 0.12));
  backdrop-filter: var(--cookie-category-backdrop, blur(8px));
  -webkit-backdrop-filter: var(--cookie-category-backdrop, blur(8px));
}

.cookie-category h6 {
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cookie-category-heading-color, inherit);
}

.cookie-category p {
  font-size: 0.85rem;
  margin-bottom: 8px;
  opacity: 0.85;
}

.cookie-category .form-check-label {
  color: inherit;
  font-weight: 500;
}

.btn-cookie {
  padding: var(--cookie-button-padding, 0.65rem 1.4rem);
  margin: var(--cookie-button-gap, 6px);
  border-radius: var(--cookie-button-radius, 999px);
  border-width: 1px;
  border-style: solid;
  font-weight: var(--cookie-button-weight, 600);
  letter-spacing: 0.01em;
  transition: transform 0.3s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  background: var(--cookie-button-bg, linear-gradient(135deg, rgba(23, 103, 255, 0.12), rgba(23, 103, 255, 0.22)));
  color: var(--cookie-button-color, inherit);
  border-color: var(--cookie-button-border, rgba(23, 103, 255, 0.3));
  box-shadow: var(--cookie-button-shadow, 0 8px 18px rgba(15, 42, 97, 0.15));
}

.btn-cookie:hover,
.btn-cookie:focus {
  transform: translateY(-3px);
  box-shadow: var(--cookie-button-hover-shadow, 0 12px 26px rgba(15, 42, 97, 0.22));
}

.btn-cookie.btn-success {
  background: var(--cookie-button-accept-bg, linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.5)));
  color: var(--cookie-button-accept-color, #ffffff);
  border-color: var(--cookie-button-accept-border, rgba(34, 197, 94, 0.6));
  box-shadow: var(--cookie-button-accept-shadow, 0 12px 30px rgba(16, 185, 129, 0.4));
}

.btn-cookie.btn-success:hover,
.btn-cookie.btn-success:focus {
  background: var(--cookie-button-accept-hover-bg, linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(13, 148, 136, 0.75)));
}

.btn-cookie.btn-danger {
  background: var(--cookie-button-reject-bg, linear-gradient(135deg, rgba(248, 113, 113, 0.25), rgba(239, 68, 68, 0.5)));
  color: var(--cookie-button-reject-color, #ffffff);
  border-color: var(--cookie-button-reject-border, rgba(239, 68, 68, 0.6));
  box-shadow: var(--cookie-button-reject-shadow, 0 12px 30px rgba(239, 68, 68, 0.4));
}

.btn-cookie.btn-danger:hover,
.btn-cookie.btn-danger:focus {
  background: var(--cookie-button-reject-hover-bg, linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(220, 38, 38, 0.8)));
}

.btn-cookie.btn-outline-light {
  background: var(--cookie-button-settings-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35)));
  color: var(--cookie-button-settings-color, inherit);
  border-color: var(--cookie-button-settings-border, rgba(255, 255, 255, 0.45));
  box-shadow: var(--cookie-button-settings-shadow, 0 10px 22px rgba(15, 42, 97, 0.15));
}

.btn-cookie.btn-outline-light:hover,
.btn-cookie.btn-outline-light:focus {
  color: var(--cookie-button-settings-hover-color, inherit);
  background: var(--cookie-button-settings-hover-bg, rgba(255, 255, 255, 0.55));
}

.btn-cookie.btn-outline-info,
.btn-cookie.btn-outline-info:focus {
  background: var(--cookie-button-info-bg, linear-gradient(135deg, rgba(23, 103, 255, 0.12), rgba(23, 103, 255, 0.2)));
  color: var(--cookie-button-info-color, inherit);
  border-color: var(--cookie-button-info-border, rgba(23, 103, 255, 0.4));
  box-shadow: var(--cookie-button-info-shadow, 0 8px 18px rgba(23, 103, 255, 0.22));
}

.btn-cookie.btn-outline-info:hover {
  background: var(--cookie-button-info-hover-bg, rgba(23, 103, 255, 0.35));
  color: var(--cookie-button-info-hover-color, #ffffff);
}

.cookie-settings-toggle {
  display: none;
}

.cookie-settings-toggle.show {
  display: block;
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    max-height: 520px;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .cookie-banner {
    padding: 18px;
  }

  .btn-cookie {
    width: 100%;
  }

  .cookie-category {
    padding: 14px;
  }
}

.cookie-banner .form-check-input {
  filter: var(--cookie-check-filter, brightness(1.2));
}

.cookie-banner .form-check-input:checked {
  background-color: var(--cookie-banner-border, #007bff);
  border-color: var(--cookie-banner-border, #007bff);
}

.cookie-banner .fas {
  margin-right: var(--cookie-icon-spacing, 5px);
}

/* === ./css/core/modal_unified.css === */
/* ================================================
   Unified Modal Design System
   ================================================
   
   Einheitliche CSS-Variablen für alle Modal-Inhalte:
   - panel-wrapper (Fondswechsel, Entnahmeplan, etc.)
   - policy-editor-wrapper (Eigene Fondspolicen/Rürups)
   - profile-editor-wrapper (Profil bearbeiten)
   
   Alle nutzen dieselben --modal-* Variablen für konsistentes Design.
   ================================================ */

/* ================================================
   Light Mode Variables (Default)
   ================================================ */
:root {
  /* Primary accent color - Green */
  --modal-accent: #10b981;
  --modal-accent-rgb: 16, 185, 129;
  
  /* Hero section */
  --modal-hero-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  --modal-hero-border: rgba(16, 185, 129, 0.15);
  --modal-hero-icon-bg: rgba(16, 185, 129, 0.12);
  
  /* Cards and inputs */
  --modal-card-bg: var(--bs-body-bg);
  --modal-card-border: var(--bs-border-color);
  --modal-card-hover-bg: rgba(16, 185, 129, 0.04);
  --modal-card-active-bg: rgba(16, 185, 129, 0.08);
  --modal-card-ring: rgba(16, 185, 129, 0.3);
  
  /* Icons */
  --modal-icon-bg: rgba(16, 185, 129, 0.1);
  
  /* Section headers */
  --modal-section-header-bg: rgba(0, 0, 0, 0.02);
  --modal-section-header-hover: rgba(0, 0, 0, 0.04);
  
  /* Dividers */
  --modal-divider: var(--bs-border-color);
  
  /* Hints/Warnings */
  --modal-hint-bg: rgba(255, 193, 7, 0.1);
  --modal-hint-border: rgba(255, 193, 7, 0.3);
  --modal-hint-icon: #f59f00;
}

/* ================================================
   Dark Mode Variables
   ================================================ */
[data-theme="dark"],
[data-bs-theme="dark"] {
  /* Primary accent color - Lighter green for dark mode */
  --modal-accent: #34d399;
  --modal-accent-rgb: 52, 211, 153;
  
  /* Hero section */
  --modal-hero-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.02) 100%);
  --modal-hero-border: rgba(52, 211, 153, 0.2);
  --modal-hero-icon-bg: rgba(52, 211, 153, 0.15);
  
  /* Cards and inputs */
  --modal-card-bg: rgba(255, 255, 255, 0.03);
  --modal-card-border: rgba(255, 255, 255, 0.1);
  --modal-card-hover-bg: rgba(52, 211, 153, 0.06);
  --modal-card-active-bg: rgba(52, 211, 153, 0.1);
  --modal-card-ring: rgba(52, 211, 153, 0.2);
  
  /* Icons */
  --modal-icon-bg: rgba(52, 211, 153, 0.15);
  
  /* Section headers */
  --modal-section-header-bg: rgba(255, 255, 255, 0.03);
  --modal-section-header-hover: rgba(255, 255, 255, 0.06);
  
  /* Dividers */
  --modal-divider: rgba(255, 255, 255, 0.08);
  
  /* Hints/Warnings */
  --modal-hint-bg: rgba(255, 193, 7, 0.08);
  --modal-hint-border: rgba(255, 193, 7, 0.2);
}

/* ================================================
   Blue Variant (optional override)
   ================================================ */
.modal-blue {
  --modal-accent: #1767ff;
  --modal-accent-rgb: 23, 103, 255;
  --modal-hero-bg: linear-gradient(135deg, rgba(23, 103, 255, 0.08) 0%, rgba(23, 103, 255, 0.02) 100%);
  --modal-hero-border: rgba(23, 103, 255, 0.15);
  --modal-hero-icon-bg: rgba(23, 103, 255, 0.12);
  --modal-card-hover-bg: rgba(23, 103, 255, 0.04);
  --modal-card-active-bg: rgba(23, 103, 255, 0.08);
  --modal-card-ring: rgba(23, 103, 255, 0.3);
  --modal-icon-bg: rgba(23, 103, 255, 0.1);
}

[data-theme="dark"] .modal-blue,
[data-bs-theme="dark"] .modal-blue {
  --modal-accent: #5c98ff;
  --modal-accent-rgb: 92, 152, 255;
  --modal-hero-bg: linear-gradient(135deg, rgba(92, 152, 255, 0.1) 0%, rgba(92, 152, 255, 0.02) 100%);
  --modal-hero-border: rgba(92, 152, 255, 0.2);
  --modal-hero-icon-bg: rgba(92, 152, 255, 0.15);
  --modal-card-hover-bg: rgba(92, 152, 255, 0.06);
  --modal-card-active-bg: rgba(92, 152, 255, 0.1);
  --modal-card-ring: rgba(92, 152, 255, 0.2);
  --modal-icon-bg: rgba(92, 152, 255, 0.15);
}

/* ================================================
   Blue with Green Headers Variant
   ================================================
   Überschriften (Hero, Section-Headers) bleiben grün,
   Rest (Karten, Icons, etc.) ist blau.
   Verwendung: class="modal-blue-green-headers" auf dem Modal-Content
   ================================================ */
.modal-blue-green-headers {
  /* Blau als Hauptfarbe für Karten, Inputs etc. */
  --modal-accent: #1767ff;
  --modal-accent-rgb: 23, 103, 255;
  --modal-card-hover-bg: rgba(23, 103, 255, 0.04);
  --modal-card-active-bg: rgba(23, 103, 255, 0.08);
  --modal-card-ring: rgba(23, 103, 255, 0.3);
  --modal-icon-bg: rgba(23, 103, 255, 0.1);
  
  /* Grün für Hero und Section-Headers */
  --modal-hero-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  --modal-hero-border: rgba(16, 185, 129, 0.15);
  --modal-hero-icon-bg: rgba(16, 185, 129, 0.12);
  --modal-header-accent: #10b981;
}

.modal-blue-green-headers .panel-hero-icon {
  background: var(--modal-hero-icon-bg);
  color: var(--modal-header-accent);
}

.modal-blue-green-headers .panel-section-icon {
  color: var(--modal-header-accent);
}

[data-theme="dark"] .modal-blue-green-headers,
[data-bs-theme="dark"] .modal-blue-green-headers {
  /* Blau für Dark Mode */
  --modal-accent: #5c98ff;
  --modal-accent-rgb: 92, 152, 255;
  --modal-card-hover-bg: rgba(92, 152, 255, 0.06);
  --modal-card-active-bg: rgba(92, 152, 255, 0.1);
  --modal-card-ring: rgba(92, 152, 255, 0.2);
  --modal-icon-bg: rgba(92, 152, 255, 0.15);
  
  /* Grün für Headers im Dark Mode */
  --modal-hero-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.02) 100%);
  --modal-hero-border: rgba(52, 211, 153, 0.2);
  --modal-hero-icon-bg: rgba(52, 211, 153, 0.15);
  --modal-header-accent: #34d399;
}

/* === ./css/core/policy_editor.css === */
/* Policy Editor Modern Styles
 * NOTE: Uses variables from modal_unified.css
 * Inherits blue-green-headers styling from parent modal-content
 */

/* Wrapper - Uses Unified Variables */
.policy-editor-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  
  /* Map to unified variables - blue for interactive elements */
  --policy-accent: var(--modal-accent);
  --policy-card-hover-bg: var(--modal-card-hover-bg);
  --policy-card-active-bg: var(--modal-card-active-bg);
  --policy-card-ring: var(--modal-card-ring);
  --policy-icon-bg: var(--modal-icon-bg);
  --policy-card-bg: var(--modal-card-bg);
  --policy-card-border: var(--modal-card-border);
  --policy-divider: var(--modal-divider);
  
  /* Green for hero and section headers (from modal-blue-green-headers) */
  --policy-hero-bg: var(--modal-hero-bg);
  --policy-hero-border: var(--modal-hero-border);
  --policy-hero-icon-bg: var(--modal-hero-icon-bg);
  --policy-hero-icon-color: var(--modal-header-accent, #1767ff);
  --policy-section-icon-color: var(--modal-header-accent, #1767ff);
}

/* Dark mode handled by modal_unified.css */

/* Hero Section */
.policy-hero-wrapper {
  margin-bottom: 1.5rem;
}

.policy-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--policy-hero-bg, linear-gradient(135deg, rgba(23, 103, 255, 0.08) 0%, rgba(23, 103, 255, 0.02) 100%));
  border: 1px solid var(--policy-hero-border, rgba(23, 103, 255, 0.15));
  border-radius: var(--radius-lg);
}

.policy-hero-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.policy-hero-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--policy-hero-icon-bg, rgba(23, 103, 255, 0.12));
  border-radius: var(--radius-md);
  color: var(--policy-hero-icon-color, var(--policy-accent, #1767ff));
  flex-shrink: 0;
}

.policy-hero-icon svg {
  width: 24px;
  height: 24px;
}

.policy-hero-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}

.policy-subtitle {
  color: var(--policy-subtitle-color, var(--bs-secondary-color));
  font-size: 0.9rem;
  margin: 0;
}

.policy-help-btn {
  font-size: 0.8rem;
  color: var(--policy-help-color, var(--bs-secondary-color));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.policy-help-btn svg {
  width: 16px;
  height: 16px;
}

/* Type Toggle (Brutto/Netto) */
.policy-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.policy-type-card {
  position: relative;
  cursor: pointer;
}

.policy-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--policy-card-bg, var(--bs-body-bg));
  border: 2px solid var(--policy-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.policy-type-card:hover .type-card-inner {
  background: var(--policy-card-hover-bg, rgba(23, 103, 255, 0.04));
  border-color: var(--policy-card-ring, rgba(23, 103, 255, 0.3));
}

.policy-type-card input:checked ~ .type-card-inner {
  background: var(--policy-card-active-bg, rgba(23, 103, 255, 0.08));
  border-color: var(--policy-accent, #1767ff);
}

.type-icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--policy-icon-bg, rgba(23, 103, 255, 0.1));
  border-radius: var(--radius-md);
  color: var(--policy-accent, #1767ff);
  flex-shrink: 0;
}

.type-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.type-content {
  flex: 1;
  min-width: 0;
}

.type-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bs-body-color);
  display: block;
}

.type-desc {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.type-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--policy-check-border, var(--bs-border-color));
  border-radius: var(--radius-circle);
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.type-check svg {
  width: 14px;
  height: 14px;
}

.policy-type-card input:checked ~ .type-card-inner .type-check {
  background: var(--policy-accent, #1767ff);
  border-color: var(--policy-accent, #1767ff);
  color: #fff;
}

/* Section Headers */
.policy-section {
  margin-bottom: 1.5rem;
}

.policy-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--policy-divider, var(--bs-border-color));
}

.policy-section > *:not(.policy-section-header) {
  padding-left: 1.25rem;
}

/* Standalone-Sektionen (Name, Tarifart, Eingabeart) wrappen ihren Inhalt in
   .panel-section-body.policy-standalone-body. padding-left am WRAPPER (Eltern)
   verschiebt die Box-Kante der Kinder (segmented-control, info-box, form-group)
   korrekt nach rechts — anders als padding-left direkt am Element, das nur den
   Inhalt verschiebt. 2.25rem (= 1.25rem Section-Einschub + 1rem fehlender
   info-card-Padding) bringt sie bündig mit den Detail-Feldern (L≈757). */
.policy-editor-wrapper .policy-standalone-body {
  padding-left: calc(1.25rem + 1rem);
}

/* Namensfeld: Ein-Feld (Neu) ↔ Zwei-Spalten (Edit). Layout-only, theme-neutral
   (gesperrter Skin trägt .kv-input-locked/.kv-readonly-control aus forms.css,
   die selbst Light/Dark via Vars lösen). Default = volle Breite; im Edit-Modus
   schaltet .is-editing auf zwei gleich breite Spalten + zeigt die linke
   readonly-"Aktuell"-Spalte. */
.policy-name-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.policy-name-grid.is-editing {
  grid-template-columns: 1fr 1fr;
}
.policy-name-grid .policy-name-current {
  display: none;
  min-width: 0;
}
.policy-name-grid.is-editing .policy-name-current {
  display: block;
}
.policy-name-grid .policy-name-new {
  min-width: 0;
}
@media (max-width: 575.98px) {
  /* Auf sehr schmalen Viewports untereinander statt nebeneinander (kein Overflow). */
  .policy-name-grid.is-editing {
    grid-template-columns: 1fr;
  }
}

/* Modus-Cards (Effektiv/Detail/PDF) bündig einrücken: Außenkante +2.25rem nach
   rechts (≈721→757) → durchgehende linke Linie mit segmented-control / Info-Box /
   Standalone-Feldern darüber. Der interne Section-Einschub (1.25rem) ist
   neutralisiert; die info-card behält ihr 1rem-Rundum-Padding als Luft → die
   Card-internen Felder sitzen ~16px rechts von 757 (normaler Card-Innenabstand).
   margin-left auf auto-width-Block → rechte Kante bleibt stehen (kein Overflow). */
.policy-editor-wrapper > .info-card,
.policy-editor-wrapper > .effektiv-detail-block {
  margin-left: calc(1.25rem + 1rem);
}
.policy-editor-wrapper > .info-card .policy-section > *:not(.policy-section-header),
.policy-editor-wrapper > .effektiv-detail-block .policy-section > *:not(.policy-section-header) {
  padding-left: 0;
}

.policy-section-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.policy-section-icon {
  width: 18px;
  height: 18px;
  color: var(--policy-section-icon-color, var(--policy-accent, #1767ff));
}

/* Input Cards */
.policy-input-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.policy-input-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--policy-card-bg, var(--bs-body-bg));
  border: 1px solid var(--policy-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.policy-input-card:focus-within {
  border-color: var(--policy-accent, #1767ff);
}

.policy-input-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--policy-icon-bg, rgba(23, 103, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--policy-accent, #1767ff);
  flex-shrink: 0;
}

.policy-input-icon svg {
  width: 18px;
  height: 18px;
}

.policy-input-content {
  flex: 1;
  min-width: 0;
}

.policy-input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
}

.policy-input-card .input-container {
  margin: 0;
}

.policy-input-card .form-control {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}

.policy-info-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--bs-secondary-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.policy-info-btn:hover {
  background: var(--policy-icon-bg, rgba(23, 103, 255, 0.1));
  color: var(--policy-accent, #1767ff);
}

.policy-info-btn svg {
  width: 16px;
  height: 16px;
}

/* Effektiv Mode Card */
.policy-mode-card {
  padding: 1rem 1.25rem;
  background: var(--policy-card-bg, var(--bs-body-bg));
  border: 1px solid var(--policy-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.policy-mode-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.policy-mode-header .form-check {
  margin: 0;
}

.policy-mode-header .form-check-label {
  font-weight: 600;
}

.policy-mode-description {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

/* Saved Items List */
.policy-saved-list {
  margin-bottom: 1.5rem;
}

.policy-saved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--policy-card-bg, var(--bs-body-bg));
  border: 1px solid var(--policy-card-border, var(--bs-border-color));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: 600;
}

.policy-saved-count {
  background: var(--policy-accent, #1767ff);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-md);
}

.policy-saved-items {
  border: 1px solid var(--policy-card-border, var(--bs-border-color));
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
}

.policy-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--policy-divider, var(--bs-border-color));
}

.policy-saved-item:last-child {
  border-bottom: none;
}

.policy-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.policy-item-name {
  font-weight: 600;
  color: var(--bs-body-color);
}

.policy-item-date {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.policy-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Advanced Settings Accordion */
.policy-advanced {
  border: 1px solid var(--policy-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1rem;
}

.policy-advanced.has-data {
  border-color: var(--policy-accent, #1767ff);
}

.policy-advanced-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.875rem 0;
  background: var(--policy-card-bg, var(--bs-body-bg));
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  user-select: none;
}

.policy-advanced-summary::-webkit-details-marker {
  display: none;
}

.policy-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--bs-secondary-color);
  transition: transform 0.2s ease;
}

.policy-advanced[open] .policy-chevron {
  transform: rotate(180deg);
}

.policy-advanced-content {
  padding: 1rem 1rem 1rem 1.25rem;
  border-top: 1px solid var(--policy-divider, var(--bs-border-color));
}

/* Accordion-Felder auf Linie mit info-card-Feldern bringen: .info-card hat
   padding:1rem (16px) → Felder darin beginnen 1rem weiter rechts als
   Accordion-Felder (die nur policy-advanced-content padding-left:1.25rem haben).
   Extra 1rem auf das input-grid kompensiert den Unterschied exakt. */
.policy-advanced .policy-input-grid {
  padding-left: 1rem;
}

/* PDF-Auto-Analyse Dropzone: Design-System-Border + Radius statt Bootstrap
   .border.rounded. Klasse .pdf-drop-zone ist zugleich JS-Hook (initDrop). */
.pdf-drop-zone {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
}

/* Feld+Zahnrad-Zeile (Rendite-Pattern): Input auf 45px Höhe + 12px Radius,
   damit es bündig mit dem 45×45-Settings-Zahnrad (.segmented-control__settings)
   fluchtet. Der Modal-Kontext bekommt NICHT die Sidebar-Regel
   (.bg-left-col .form-control { min-height: 45px }), daher hier explizit. */
.policy-field-row .form-control {
  min-height: var(--sidebar-element-height, 45px);
  border-radius: var(--radius-md, 12px);
}

/* Footer Actions */
.policy-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.policy-footer .btn {
  min-width: 180px;
}

/* Dark mode text fixes (color inheritance) */
[data-bs-theme="dark"] .policy-hero-text h4,
[data-theme="dark"] .policy-hero-text h4,
[data-bs-theme="dark"] .type-title,
[data-theme="dark"] .type-title,
[data-bs-theme="dark"] .policy-item-name,
[data-theme="dark"] .policy-item-name,
[data-bs-theme="dark"] .policy-section-header,
[data-theme="dark"] .policy-section-header,
[data-bs-theme="dark"] .policy-advanced-summary,
[data-theme="dark"] .policy-advanced-summary,
[data-bs-theme="dark"] .policy-mode-header .form-check-label,
[data-theme="dark"] .policy-mode-header .form-check-label {
  color: #f8f9fa;
}

[data-bs-theme="dark"] .type-desc,
[data-theme="dark"] .type-desc,
[data-bs-theme="dark"] .policy-input-label,
[data-theme="dark"] .policy-input-label {
  color: #adb5bd;
}

[data-bs-theme="dark"] .policy-saved-item,
[data-theme="dark"] .policy-saved-item {
  background: rgba(16, 40, 32, 0.6);
}

[data-bs-theme="dark"] .policy-saved-header,
[data-theme="dark"] .policy-saved-header {
  background: rgba(16, 40, 32, 0.8);
}

/* =============================================================================
   Extraction Mode Toggle (PDF Auto-Analyse)
   ============================================================================= */

.extraction-mode-toggle {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-color: var(--bs-border-color, #dee2e6) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Light Mode - subtle gray */
:root:not([data-bs-theme="dark"]) .extraction-mode-toggle,
[data-bs-theme="light"] .extraction-mode-toggle {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
  border-color: #e9ecef !important;
}

/* Dark Mode - matching dark theme style */
[data-bs-theme="dark"] .extraction-mode-toggle,
[data-theme="dark"] .extraction-mode-toggle,
html[data-theme="dark"] .extraction-mode-toggle,
:root[data-theme="dark"] .extraction-mode-toggle {
  background: var(--form-control-bg, #1c2533) !important;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.15)) !important;
}

/* Dark Mode Text Colors */
[data-bs-theme="dark"] .extraction-mode-toggle .text-body,
[data-theme="dark"] .extraction-mode-toggle .text-body,
html[data-theme="dark"] .extraction-mode-toggle .text-body,
:root[data-theme="dark"] .extraction-mode-toggle .text-body,
[data-bs-theme="dark"] .extraction-mode-toggle .fw-semibold,
[data-theme="dark"] .extraction-mode-toggle .fw-semibold,
html[data-theme="dark"] .extraction-mode-toggle .fw-semibold,
:root[data-theme="dark"] .extraction-mode-toggle .fw-semibold {
  color: var(--form-control-color, #ffffff) !important;
}

[data-bs-theme="dark"] .extraction-mode-toggle .text-body-secondary,
[data-theme="dark"] .extraction-mode-toggle .text-body-secondary,
html[data-theme="dark"] .extraction-mode-toggle .text-body-secondary,
:root[data-theme="dark"] .extraction-mode-toggle .text-body-secondary,
[data-bs-theme="dark"] .extraction-mode-toggle small,
[data-theme="dark"] .extraction-mode-toggle small,
html[data-theme="dark"] .extraction-mode-toggle small,
:root[data-theme="dark"] .extraction-mode-toggle small {
  color: var(--app-text-color, rgba(241, 245, 249, 0.7)) !important;
}

/* Button Group Styling */
.extraction-mode-toggle .btn-group .btn-outline-secondary {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-color: var(--bs-border-color);
  transition: all 0.15s ease;
}

.extraction-mode-toggle .btn-group .btn-outline-secondary:hover {
  background: var(--bs-tertiary-bg);
}

.extraction-mode-toggle .btn-group .btn-check:checked + .btn-outline-secondary {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Dark Mode Button Adjustments */
[data-bs-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary,
[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary,
html[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary,
:root[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary:hover,
[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary:hover,
html[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] .extraction-mode-toggle .btn-group .btn-check:checked + .btn-outline-secondary,
[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-check:checked + .btn-outline-secondary,
html[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-check:checked + .btn-outline-secondary,
:root[data-theme="dark"] .extraction-mode-toggle .btn-group .btn-check:checked + .btn-outline-secondary {
  background: var(--bs-primary, #0d6efd) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
  color: #fff !important;
}

/* Icon sizing in buttons */
.extraction-mode-toggle .btn-group .btn svg,
.extraction-mode-toggle .btn-group .btn i {
  width: 12px;
  height: 12px;
  margin-right: 2px;
  vertical-align: -1px;
}

/* ============================================================================
   PDF Auto-Analyse — Ergebnis-UI (pdfx-*)
   Kompakte Zeilen statt Radio-Karten: pro Kostenfeld eine Zeile mit
   vorausgewähltem Top-Kandidaten, Alternativen in <details>. Quelle (Seite/
   Zitat) als Chip mit title-Tooltip. Light + Dark über CSS-Variablen.
   ========================================================================= */
.pdfx-result-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.75rem;
}
.pdfx-result-title {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--bs-success, #198754);
}
.pdfx-result-title svg { width: 16px; height: 16px; }
.pdfx-result-meta { font-size: 0.78rem; color: var(--text-muted, #6c757d); }

.pdfx-group { margin-bottom: 0.9rem; }
.pdfx-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6c757d);
  margin-bottom: 0.35rem;
}
.pdfx-group-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }

.pdfx-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.08));
}
.pdfx-group .pdfx-row:last-child { border-bottom: none; }
.pdfx-row-label {
  flex: 0 0 42%;
  max-width: 42%;
  font-size: 0.85rem;
  font-weight: 500;
  padding-top: 0.2rem;
}
.pdfx-row-options { flex: 1 1 auto; min-width: 0; }
.pdfx-row-options--wrap { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pdfx-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  cursor: pointer;
  margin: 0;
  max-width: 100%;
  background: var(--surface-card, transparent);
}
.pdfx-option .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.pdfx-option:has(.form-check-input:checked) {
  border-color: var(--bs-success, #198754);
  background: rgba(25, 135, 84, 0.08);
}
.pdfx-option-value { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.pdfx-option--none .pdfx-option-value { font-weight: 400; font-size: 0.8rem; }
.pdfx-option-meta { display: inline-flex; gap: 0.3rem; min-width: 0; }
.pdfx-chip {
  font-size: 0.68rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.06));
  color: var(--text-muted, #6c757d);
  white-space: nowrap;
  cursor: help;
}

.pdfx-alt { margin-top: 0.25rem; }
.pdfx-alt > summary {
  font-size: 0.75rem;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  user-select: none;
  width: fit-content;
}
.pdfx-alt > summary:hover { text-decoration: underline; }
.pdfx-alt-body { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.4rem; }

.pdfx-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
}
.pdfx-policy-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  margin: 0;
  min-width: 0;
  background: var(--surface-card, transparent);
}
.pdfx-policy-item .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.pdfx-policy-item:has(.form-check-input:checked) {
  border-color: var(--bs-success, #198754);
  background: rgba(25, 135, 84, 0.08);
}
.pdfx-policy-text { display: flex; flex-direction: column; min-width: 0; }
.pdfx-policy-label { font-size: 0.72rem; color: var(--text-muted, #6c757d); }
.pdfx-policy-value { font-size: 0.85rem; font-weight: 600; }

.pdfx-extras { margin-top: 0.5rem; }
.pdfx-extras > summary {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  user-select: none;
}
.pdfx-extras-body { padding-top: 0.4rem; }

/* Dark Mode: Flächen/Borders auf dunkle Variablen heben */
[data-theme="dark"] .pdfx-option,
[data-theme="dark"] .pdfx-policy-item {
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.16));
  background: var(--surface-card, rgba(255, 255, 255, 0.03));
}
[data-theme="dark"] .pdfx-option:has(.form-check-input:checked),
[data-theme="dark"] .pdfx-policy-item:has(.form-check-input:checked) {
  border-color: var(--bs-success, #2fb380);
  background: rgba(47, 179, 128, 0.16);
}
[data-theme="dark"] .pdfx-chip {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .pdfx-row { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* === ./css/core/profile_editor.css === */
/* Profile Editor Modern Styles
 * NOTE: Uses variables from modal_unified.css
 */

/* ================================================
   Profile Modal Wrapper - Uses Unified Variables
   ================================================ */
.profile-editor-wrapper {
  padding: 0;
  
  /* Map to unified variables */
  --profile-accent: var(--modal-accent);
  --profile-accent-light: var(--modal-icon-bg);
  --profile-hero-bg: var(--modal-hero-bg);
  --profile-hero-border: var(--modal-hero-border);
  --profile-hero-icon-bg: var(--modal-hero-icon-bg);
  --profile-icon-bg: var(--modal-icon-bg);
  --profile-card-bg: var(--modal-card-bg);
  --profile-card-border: var(--modal-card-border);
  --profile-section-header-bg: var(--modal-section-header-bg);
  --profile-section-header-hover: var(--modal-section-header-hover);
}

/* Hero Section */
.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--profile-hero-bg);
  border: 1px solid var(--profile-hero-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.profile-hero-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-hero-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--profile-hero-icon-bg);
  border-radius: var(--radius-md);
  color: var(--profile-accent);
  flex-shrink: 0;
}

.profile-hero-icon svg {
  width: 24px;
  height: 24px;
}

.profile-hero-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}

.profile-subtitle {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  margin: 0;
}

/* ================================================
   Profile Sections (Accordion Replacement)
   ================================================ */
.profile-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-section {
  background: var(--profile-card-bg, var(--bs-body-bg));
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--profile-section-header-bg, rgba(0, 0, 0, 0.02));
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.profile-section-header:hover {
  background: var(--profile-section-header-hover, rgba(0, 0, 0, 0.04));
}

.profile-section-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--profile-icon-bg);
  border-radius: var(--radius-md);
  color: var(--profile-accent);
  flex-shrink: 0;
}

.profile-section-icon svg {
  width: 18px;
  height: 18px;
}

.profile-section-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-section-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--profile-accent);
  color: #fff;
}

.profile-section-chevron {
  width: 20px;
  height: 20px;
  color: var(--bs-secondary-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.profile-section.expanded .profile-section-chevron {
  transform: rotate(180deg);
}

.profile-section-body {
  padding: 0 1.25rem 1.25rem;
  display: none;
}

.profile-section.expanded .profile-section-body {
  display: block;
}

/* ================================================
   Input Groups within Sections
   ================================================ */
.profile-input-group {
  margin-bottom: 1rem;
}

.profile-input-group:last-child {
  margin-bottom: 0;
}

.profile-input-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
  padding-top: 0.5rem;
}

.profile-input-group-header svg {
  width: 14px;
  height: 14px;
}

.profile-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .profile-input-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .profile-input-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================================
   Input Cards
   ================================================ */
.profile-input-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: var(--profile-input-bg, var(--bs-body-bg));
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.profile-input-card:focus-within {
  border-color: var(--profile-accent);
}

.profile-input-card.has-switch {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.profile-input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
  line-height: 1.3;
}

.profile-input-card .input-container {
  margin: 0;
}

.profile-input-card .form-control,
.profile-input-card .form-select {
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}

.profile-input-card .input-unit {
  font-size: 0.8rem;
}

.profile-input-card .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
}

/* Full-width input card */
.profile-input-card-full {
  grid-column: 1 / -1;
}

/* Zeilenlisten "Jahr | Betrag" im Block "Beiträge & Zuzahlungen" (Aenderung
   monatlicher Investition, Zuzahlungen). Optik wie die nummerierten Zeilen im
   Popup Beitragseinstellungen (.panel-payout-row aus modal_panels.css), aber
   mit den Profil-Editor-Variablen, weil hier kein .panel-wrapper drumherum liegt. */
.profile-rowlist {
  gap: 0.5rem;
}

.profile-rowlist-desc {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  line-height: 1.35;
  margin: 0;
}

.profile-rowlist .panel-payout-num {
  background: var(--profile-accent-light);
  color: var(--profile-accent);
}

.profile-rowlist-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 0.35rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.profile-rowlist-remove:hover {
  color: var(--bs-danger);
  background: var(--profile-accent-light);
}

.profile-rowlist-add {
  align-self: flex-start;
}

/* ================================================
   Existing Pensions Special Card
   ================================================ */
.profile-existing-pensions-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--profile-input-bg, var(--bs-body-bg));
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
}

.profile-existing-pensions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-existing-pensions-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.profile-existing-pensions-summary {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.profile-existing-pensions-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
}

/* ================================================
   Divider
   ================================================ */
.profile-divider {
  border: 0;
  border-top: 1px solid var(--profile-card-border, var(--bs-border-color));
  margin: 1rem 0;
}

/* ================================================
   Name Input Section
   ================================================ */
.profile-name-section {
  margin-bottom: 1.5rem;
}

.profile-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 575px) {
  .profile-name-grid {
    grid-template-columns: 1fr;
  }
}

.profile-name-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--profile-input-bg, var(--bs-body-bg));
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.profile-name-card:focus-within {
  border-color: var(--profile-accent);
}

.profile-name-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--profile-icon-bg);
  border-radius: var(--radius-sm);
  color: var(--profile-accent);
  flex-shrink: 0;
}

.profile-name-icon svg {
  width: 18px;
  height: 18px;
}

.profile-name-content {
  flex: 1;
  min-width: 0;
}

.profile-name-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
  display: block;
}

.profile-name-card .form-control {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
}

/* ================================================
   Visualization Section (read-only)
   ================================================ */
.profile-visualization-section {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--profile-section-header-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-md);
}

.profile-visualization-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

.profile-visualization-header svg {
  width: 14px;
  height: 14px;
}

.profile-visualization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.profile-visualization-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.profile-visualization-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.profile-visualization-value {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--profile-card-border, var(--bs-border-color));
  border-radius: var(--radius-sm);
  min-height: 2rem;
}

.profile-visualization-value .badge {
  font-size: 0.7rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ================================================
   Auto-Save Status-Chip (ersetzt den alten Save-Button)
   Zustände via data-state: idle | dirty | saving | saved | error.
   Klick speichert sofort (Retry/Debounce abkürzen).
   ================================================ */
.profile-save-status {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bs-secondary-color);
  transition: color 0.15s ease, border-color 0.15s ease;
  cursor: default;
}

.profile-save-status[data-state="dirty"],
.profile-save-status[data-state="error"] {
  cursor: pointer;
}

.profile-save-status[data-state="dirty"] {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.45);
}

.profile-save-status[data-state="saving"] {
  color: var(--bs-secondary-color);
  font-style: italic;
}

.profile-save-status[data-state="saved"] {
  color: #15803d;
  border-color: rgba(21, 128, 61, 0.45);
}

.profile-save-status[data-state="error"] {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.5);
}

[data-theme="dark"] .profile-save-status {
  border-color: rgba(255, 255, 255, 0.18);
  color: #9ca3af;
}

[data-theme="dark"] .profile-save-status[data-state="dirty"] {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

[data-theme="dark"] .profile-save-status[data-state="saved"] {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}

[data-theme="dark"] .profile-save-status[data-state="error"] {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
}

/* ================================================
   Inaktive abhängige Felder (Schalter aus -> Wertfeld
   gedimmt + readonly, JS: applyDependentFieldStates)
   ================================================ */
.profile-input-card.is-inactive {
  opacity: 0.45;
}

.profile-input-card.is-inactive:focus-within {
  border-color: var(--profile-card-border, var(--bs-border-color));
}

.profile-input-card.is-inactive .form-control[readonly] {
  cursor: not-allowed;
}

/* TEST: #profileModal Icon-Skin auf Sidebar-Designsprache umgestellt —
   Royal-Blau-Kaestchen mit weissem Icon, 1:1 wie .main-side-icon
   (layout.css:392) und das KV-Modal-Section-Icon. Vorher Gruen via
   --profile-icon-bg/--profile-accent (= --modal-accent #10b981).
   Betroffen sind ALLE drei Icon-Typen im Profile-Modal:
   - .profile-name-icon (Tag/Stift in der Name-Card-Reihe oben),
   - .profile-section-icon (Haupt-Section-Header user/target/...),
   - .profile-input-group-header (Sub-Section-Header Grunddaten/Einkommen/
     Krankenversicherung — vorher inline-Icon ohne Kaestchen, jetzt mit
     Kaestchen analog zu den anderen).
   Box: 2rem (32px), --radius-md, --nav-pills-active-bg BG, weisses Icon.
   SVG-Sub-Element: 1rem (16px) wie Sidebar — Anti-Pattern aus KV-Modal
   trifft hier nicht zu (data-feather sitzt jeweils auf einem inneren
   <span>, der Klassen-Wrapper bleibt erhalten — Selektor *-icon svg
   matched korrekt).
   Skoped strikt auf #profileModal, andere Modals/Templates unberuehrt.
   Revert: diesen Block entfernen, Icons fallen auf Gruen zurueck. */
#profileModal .profile-section-icon,
#profileModal .profile-name-icon {
  width: 2rem;
  height: 2rem;
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  border-radius: var(--radius-md, 12px);
  color: #ffffff;
}
#profileModal .profile-section-icon svg,
#profileModal .profile-name-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Sub-Section-Header: vorher inline-Icon im Text, jetzt eigenes
   Royal-Blau-Kaestchen davor + Text bleibt grau-Caps-Style. SVG-Sub
   matched das data-feather-Kind. Container-color bleibt --bs-secondary-
   color fuer den Text; nur das svg-Kaestchen wird blau-gefuellt. */
#profileModal .profile-input-group-header svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  border-radius: var(--radius-md, 12px);
  color: #ffffff;
  /* SVG-Inhalt im 16px-Slot — padding 0.5rem auf Box 2rem laesst 1rem fuer
     den eigentlichen Glyph (matched die anderen Icons). */
  box-sizing: border-box;
}

/* ================================================
   Dark Mode Text Fixes (color inheritance)
   Variables handled by modal_unified.css
   ================================================ */
[data-theme="dark"] .profile-hero-text h4,
[data-bs-theme="dark"] .profile-hero-text h4,
[data-theme="dark"] .profile-section-title,
[data-bs-theme="dark"] .profile-section-title,
[data-theme="dark"] .profile-existing-pensions-label,
[data-bs-theme="dark"] .profile-existing-pensions-label {
  color: #f8f9fa;
}

[data-theme="dark"] .profile-subtitle,
[data-bs-theme="dark"] .profile-subtitle,
[data-theme="dark"] .profile-section-chevron,
[data-bs-theme="dark"] .profile-section-chevron,
[data-theme="dark"] .profile-input-group-header,
[data-bs-theme="dark"] .profile-input-group-header,
[data-theme="dark"] .profile-input-label,
[data-bs-theme="dark"] .profile-input-label,
[data-theme="dark"] .profile-name-label,
[data-bs-theme="dark"] .profile-name-label,
[data-theme="dark"] .profile-existing-pensions-summary,
[data-bs-theme="dark"] .profile-existing-pensions-summary,
[data-theme="dark"] .profile-visualization-header,
[data-bs-theme="dark"] .profile-visualization-header {
  color: #adb5bd;
}

[data-theme="dark"] .profile-visualization-label,
[data-bs-theme="dark"] .profile-visualization-label {
  color: #6c757d;
}

[data-theme="dark"] .profile-visualization-value,
[data-bs-theme="dark"] .profile-visualization-value {
  color: #f8f9fa;
}

/* ================================================
   Profile Edit Placeholder (before selection)
   ================================================ */
#profile_edit_placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  border-style: dashed;
  opacity: 0.8;
}

#profile_edit_placeholder .profile-hero-content {
  flex-direction: column;
  gap: 0.75rem;
}

#profile_edit_placeholder .profile-hero-icon {
  width: 64px;
  height: 64px;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

#profile_edit_placeholder .profile-hero-icon svg {
  width: 32px;
  height: 32px;
}

#profile_edit_placeholder h4 {
  color: var(--bs-secondary-color);
}

#profile_edit_placeholder .profile-subtitle {
  max-width: 280px;
}

/* ================================================
   Transition for collapse animation
   ================================================ */
.profile-section-body {
  animation: profileSlideDown 0.2s ease-out;
}

@keyframes profileSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================
   Dark Mode Form Inputs - Profile Modal
   ================================================ */
[data-theme="dark"] #profileModal .form-control,
[data-theme="dark"] #profileModal .form-select {
  background-color: #1c2533 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8f9fa !important;
}

[data-theme="dark"] #profileModal .form-control:focus,
[data-theme="dark"] #profileModal .form-select:focus {
  background-color: #1c2533 !important;
  border-color: var(--modal-accent, #34d399) !important;
  color: #f8f9fa !important;
  box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] #profileModal .form-control::placeholder {
  color: #6c757d !important;
}

[data-theme="dark"] #profileModal .form-control[readonly] {
  background-color: #1e2124 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] #profileModal .input-unit {
  color: #adb5bd;
}

/* Dark Mode für Input Cards */
[data-theme="dark"] .profile-input-card,
[data-theme="dark"] .profile-name-card {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .profile-input-card:focus-within,
[data-theme="dark"] .profile-name-card:focus-within {
  border-color: var(--modal-accent, #34d399);
}

/* Dark Mode für Sections */
[data-theme="dark"] .profile-section {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .profile-section-header {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .profile-section-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Dark Mode für Hero */
[data-theme="dark"] .profile-hero,
[data-theme="dark"] #profile_edit_placeholder {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.02) 100%);
  border-color: rgba(52, 211, 153, 0.2);
}

/* Dark Mode für Cards in Profile Modal */
[data-theme="dark"] #profileModal .card {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #profileModal .card-header {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dark Mode für Tabellen */
[data-theme="dark"] #profileModal .table {
  color: #f8f9fa;
}

[data-theme="dark"] #profileModal .table th,
[data-theme="dark"] #profileModal .table td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #profileModal .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Modal Hintergrund und Text */
[data-theme="dark"] #profileModal .modal-content {
  background-color: #1e2124;
  color: #f8f9fa;
}

[data-theme="dark"] #profileModal .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #profileModal .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #profileModal .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] #profileModal .form-label {
  color: #f8f9fa;
}

/* Standalone "Neues Profil anlegen"-Modal (separates Lifecycle, nicht #profileModal).
   Eigene Dark-Regeln, da --modal-bg global nicht gesetzt ist -> sonst weisses Modal
   im Dark Mode. Header/Footer/Input explizit navy, da globale Var/Bootstrap-Defaults
   sie sonst weiss lassen. */
[data-theme="dark"] #profileCreateModal .modal-content {
  background-color: #1e2124;
  color: #f8f9fa;
}

[data-theme="dark"] #profileCreateModal .modal-header,
[data-theme="dark"] #profileCreateModal .modal-footer {
  background-color: #1e2124;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #profileCreateModal .modal-body {
  background-color: transparent;
}

[data-theme="dark"] #profileCreateModal .modal-title,
[data-theme="dark"] #profileCreateModal .form-label {
  color: #f8f9fa;
}

[data-theme="dark"] #profileCreateModal .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] #profileCreateModal .form-control {
  background-color: #2a2e33 !important;
  color: #f8f9fa !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] #profileCreateModal .form-control::placeholder {
  color: #8a9199 !important;
}

[data-theme="dark"] #profileCreateModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* FF-Verknüpfungs-Hinweis (alert-info) dark-konform: dezent blau getönt statt
   hellblauer Bootstrap-Default-Box auf navy. */
[data-theme="dark"] #profileCreateModalFfHint {
  background-color: rgba(13, 110, 253, 0.12);
  border-color: rgba(13, 110, 253, 0.35);
  color: #cfe2ff;
}

[data-theme="dark"] #profileModal hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ================================================
   Profil-Seite: Angebots-Kachelzeile "Navy Premium"
   (ersetzt den einzelnen .btn-fonder-upgrade-Button
   oberhalb des Formulars). Drei gleich breite Kacheln
   auf dunklem Navy-Verlauf, heben sich bewusst vom
   hellen Seitenrest ab (Karten-BG ist absichtlich
   themenunabhaengig dunkel — #040A14/#FDFDFD als
   --app-background liegen in beiden Themes weit genug
   auseinander vom Karten-Verlauf, siehe Kontrast-Notiz
   unten). Kachel 3 = Coming-Soon: nur Badge + CTA
   gedaempft, Rest bleibt vollfarbig (kein Voll-Dimmen).
   ================================================ */
.profil-offer-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}

.profil-offer-section-desc {
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 1rem;
}

.profil-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 767.98px) {
  .profil-offer-grid {
    grid-template-columns: 1fr;
  }
}

.profil-offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0f1e3d 0%, #16294f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(9, 20, 45, 0.25);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .profil-offer-card {
  box-shadow: none;
}

/* Ein Akzent-Token pro Kachel — Icon, Badge, Haekchen und CTA-Hover
   speisen sich alle aus dieser einen Variable (keine Streuwerte). */
.profil-offer-card--accent-green {
  --offer-accent: #22c55e;
}

.profil-offer-card--accent-blue {
  --offer-accent: #1767ff;
}

.profil-offer-card--accent-orange {
  --offer-accent: #ea580c;
}

/* translateY statt scale: scale() laesst die Kartenkante unter dem
   Cursor hervorwandern -> Hover/Unhover-Flackern bei langsamer
   Cursor-Bewegung ueber die Kante. translateY bewegt die Kante nur
   vertikal um 2px, die Cursor-Position bleibt currently innerhalb
   der (fast unveraenderten) Box -> kein Flacker-Loop. */
.profil-offer-card--interactive:hover,
.profil-offer-card--interactive:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(9, 20, 45, 0.4);
  z-index: 1;
}

[data-theme="dark"] .profil-offer-card--interactive:hover,
[data-theme="dark"] .profil-offer-card--interactive:focus-within {
  box-shadow: none;
}

.profil-offer-card--disabled {
  cursor: default;
}

/* Icon-Kaestchen oben links — Gradient aus dem Kachel-Akzent-Token */
.profil-offer-card__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--offer-accent) 0%, color-mix(in srgb, var(--offer-accent) 65%, white) 100%);
  color: #ffffff;
  margin-bottom: 0.9rem;
}

.profil-offer-card__icon svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

/* Badge oben rechts */
.profil-offer-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.profil-offer-card__badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Akzent-Pille (Kachel 1+2) — Grund/Rand/Text alle aus --offer-accent */
.profil-offer-card__badge--accent {
  background: color-mix(in srgb, var(--offer-accent) 16%, transparent);
  color: var(--offer-accent);
  border: 1px solid color-mix(in srgb, var(--offer-accent) 45%, transparent);
}

.profil-offer-card__badge--muted {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Eyebrow (SalesClub-Kacheln) */
.profil-offer-card__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.3rem;
}

.profil-offer-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.4rem;
  padding-right: 4.5rem;
}

.profil-offer-card__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1rem 0;
}

.profil-offer-card__footnote {
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1rem 0;
}

/* Checkliste */
.profil-offer-card__checks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.profil-offer-card__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.profil-offer-card__checks li::before {
  content: "\2713";
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--offer-accent);
}

/* Ersparnis-Zeile (Kachel 1) */
.profil-offer-card__savings {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--offer-accent);
  margin: 0 0 1rem 0;
}

/* CTA */
.profil-offer-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 46px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  margin-top: auto;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.profil-offer-card__cta svg {
  width: 1rem;
  height: 1rem;
}

/* Kachel 1+2: identisch — weiss/dunkel im Ruhezustand, Hover wechselt
   auf den Kachel-Akzent (--offer-accent), Schrift weiss. */
.profil-offer-card__cta--primary {
  background: #ffffff;
  color: #0f1e3d;
}

.profil-offer-card__cta--primary:hover,
.profil-offer-card__cta--primary:focus {
  background: var(--offer-accent);
  color: #ffffff;
  text-decoration: none;
}

.profil-offer-card__cta--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
}

/* Team-Abo-Banner unter dem 3er-Kachel-Grid — quer statt Kachel-Layout,
   gleiche Navy-Optik + selbes --offer-accent-Muster wie .profil-offer-card,
   eigener Akzent (Teal), damit er sich von den Kacheln abhebt. */
.profil-offer-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1rem;
  background: linear-gradient(135deg, #0f1e3d 0%, #16294f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(9, 20, 45, 0.25);
  padding: 20px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .profil-offer-banner {
  box-shadow: none;
}

/* translateY statt scale (Flacker-Regel, siehe .profil-offer-card--interactive oben) */
.profil-offer-banner:hover,
.profil-offer-banner:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(9, 20, 45, 0.4);
}

[data-theme="dark"] .profil-offer-banner:hover,
[data-theme="dark"] .profil-offer-banner:focus-within {
  box-shadow: none;
}

.profil-offer-banner--accent-team {
  --offer-accent: #14b8a6;
}

.profil-offer-banner__icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--offer-accent) 0%, color-mix(in srgb, var(--offer-accent) 65%, white) 100%);
  color: #ffffff;
}

.profil-offer-banner__icon svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 2;
}

.profil-offer-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.profil-offer-banner__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.profil-offer-banner__desc {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin: 0.15rem 0 0 0;
}

.profil-offer-banner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 46px;
  padding: 0 1.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md, 12px);
  background: #ffffff;
  color: #0f1e3d;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.profil-offer-banner__cta:hover,
.profil-offer-banner__cta:focus {
  background: var(--offer-accent);
  color: #ffffff;
  text-decoration: none;
}

.profil-offer-banner__cta svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 767.98px) {
  .profil-offer-banner {
    flex-wrap: wrap;
  }

  .profil-offer-banner__text {
    flex: 1 1 100%;
  }

  .profil-offer-banner__cta {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ================================================
   Team-Verwaltung (UI-DEMO) auf der Profil-Seite:
   aufgeklappte Team-Karte, ersetzt den Team-Banner bei aktivem Abo.
   Gleiche harte Navy-Welt wie .profil-offer-banner (theme-unabhaengig
   dunkel — Light + Dark identisch), Akzent Teal wie --accent-team.
   Scope: .team-mgmt-*  ================================================ */

/* ---------- Team-Karte ---------- */
.team-mgmt-card {
  margin-top: 1rem;
  background: linear-gradient(135deg, #0f1e3d 0%, #16294f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(9, 20, 45, 0.25);
  padding: 20px 24px;
  --offer-accent: #14b8a6;
}

[data-theme="dark"] .team-mgmt-card {
  box-shadow: none;
}

.team-mgmt-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.team-mgmt-head__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  flex: 1 1 auto;
  min-width: 0;
}

.team-mgmt-head__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.team-mgmt-seats {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

/* Chevron-Button: klappt .team-mgmt-body ein/aus (siehe dort) */
.team-mgmt-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.team-mgmt-toggle:hover,
.team-mgmt-toggle:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.team-mgmt-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 2.25;
  transition: transform 0.2s ease;
}

.team-mgmt-toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

/* Status-Chips (auch in der Mitgliederliste) */
.team-mgmt-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.team-mgmt-chip--active {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #4ade80;
}

.team-mgmt-chip--pending {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Klickbar (Demo: nimmt die Einladung an) — Hover/Focus zeigt schon das
   Zielergebnis (Aktiv-Gruen) an. */
.team-mgmt-chip--pending:hover,
.team-mgmt-chip--pending:focus-visible {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
  outline: none;
}

/* Dezenter Umriss-Badge — z.B. "Inhaber" neben dem Aktiv-Chip der eigenen
   Zeile. Bewusst heller als .team-mgmt-chip--pending (kein Status, nur
   Kennzeichnung), transparenter Hintergrund. */
.team-mgmt-chip--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* ---------- Ein-/Ausklappen ----------
   grid-template-rows 1fr <-> 0fr statt max-height: animiert sauber auch
   wenn der Inhalt waechst (neue Einladungszeilen), ohne feste Hoehe raten
   zu muessen. overflow:hidden sitzt auf dem inneren Wrapper, weil ein
   Grid-Item selbst nicht clippen kann. */
.team-mgmt-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
}

.team-mgmt-body.is-collapsed {
  grid-template-rows: 0fr;
}

.team-mgmt-body__inner {
  overflow: hidden;
  min-height: 0;
}

/* ---------- Einladen ---------- */
.team-mgmt-invite {
  margin-top: 1.25rem;
}

.team-mgmt-invite__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.45rem;
}

.team-mgmt-invite__row {
  display: flex;
  gap: 0.6rem;
}

/* Harte Werte + !important: Karte ist in BEIDEN Themes navy, Bootstrap-
   und Theme-Defaults (weisser bzw. dunkler Input) passen hier nie. */
.team-mgmt-invite__input.form-control {
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.team-mgmt-invite__input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.team-mgmt-invite__input.form-control:focus {
  border-color: rgba(20, 184, 166, 0.8) !important;
  box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2) !important;
}

.team-mgmt-invite__input.form-control:disabled {
  opacity: 0.45;
}

.team-mgmt-invite__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  flex-shrink: 0;
  padding: 0 1.25rem;
  border-radius: var(--radius-md, 12px);
  background: #ffffff;
  color: #0f1e3d;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.team-mgmt-invite__btn:hover:not(:disabled),
.team-mgmt-invite__btn:focus:not(:disabled) {
  background: var(--offer-accent);
  color: #ffffff;
}

.team-mgmt-invite__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.team-mgmt-invite__hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Fehlermeldung des Einladen-Formulars (Server-Antwort). Amber statt Rot:
   die Karte steht auf dunklem Navy, reines Rot liest sich dort schlecht. */
.team-mgmt-invite__hint.is-error {
  color: #fbbf24;
  font-weight: 600;
}

/* ---------- Mitglieder-/Einladungsliste ---------- */
.team-mgmt-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.team-mgmt-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-mgmt-row__mail {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Teilt sich die Basis-Pille mit .team-mgmt-chip (Radius/Hoehe/Font
   identisch zu Aktiv/Eingeladen/Inhaber) — hier nur die Button-eigenen
   Werte (Rahmen/Hintergrund/Cursor/Hover). */
.team-mgmt-row__revoke {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.team-mgmt-row__revoke:hover,
.team-mgmt-row__revoke:focus {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ---------- Fuss: Verwalten-Link ---------- */
.team-mgmt-manage {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.team-mgmt-manage:hover,
.team-mgmt-manage:focus {
  color: #ffffff;
  text-decoration: none;
}

/* ---------- Mobil ---------- */
@media (max-width: 767.98px) {
  .team-mgmt-head {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .team-mgmt-head__meta {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .team-mgmt-invite__row {
    flex-wrap: wrap;
  }

  .team-mgmt-invite__btn {
    flex: 1 1 100%;
    height: 44px;
  }

  .team-mgmt-row {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .team-mgmt-row__mail {
    flex: 1 1 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}



/* ================================================
   Kuendigungs-Tunnel (del_acc_modal -> rescue_offer_modal
   -> del_acc_modal_step2): Redesign 08/2026.

   Ziel: geiler, minimalistischer, intuitiver — und die Retention-Angebote
   (Pause/Rabatt/Jahresabo/Hilfe) sollen wirklich zum Bleiben bewegen statt
   nur pflichtschuldig danebenzustehen. Zwei Bugs vorher gefixt, hier
   strukturell ausgeschlossen: Bilanz-Text und Angebotskarten liefen auf
   UNTERSCHIEDLICHEN Bootstrap-Spalten (col-md-8 vs. volle Breite) und liefen
   an verschiedenen Raendern aus. Diese Datei nutzt fuer Bilanz, Intro-Text
   UND Angebotskarten dieselbe volle Body-Breite (kein Grid/Columns mehr) —
   ein Breiten-Mismatch ist damit strukturell nicht mehr moeglich.

   Die Angebotskarten sind dieselbe .profil-offer-card-Komponente wie im
   "fonder Upgrade"-Bereich weiter oben auf der Seite: dunkler Navy-Verlauf,
   themenunabhaengig (siehe dortiger Kommentar) — Wiederverwendung statt
   Neubau, gleiche Optik wie der Rest der Seite.
   ================================================ */

#rescue_offer_modal .modal-body,
#del_acc_modal .modal-body,
#del_acc_modal_step2 .modal-body {
  padding: 1.75rem 2rem 1.5rem;
}

@media (max-width: 575.98px) {
  #rescue_offer_modal .modal-body,
  #del_acc_modal .modal-body,
  #del_acc_modal_step2 .modal-body {
    padding: 1.25rem 1.25rem 1rem;
  }
}

/* Schritt-Marke im Modal-Header: dezent, keine eigene JS-Logik noetig —
   jeder Modal-Header traegt seine Zahl statisch. */
.cancel-step-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--modal-body-color, #1b1f24) 62%, transparent);
  margin-bottom: 0.2rem;
}

/* ── Nutzungsbilanz: Stat-Kacheln statt Aufzaehlung ─────────────────── */
.bilanz-panel {
  margin-bottom: 1.1rem;
}

.bilanz-panel__title {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--modal-body-color, #1b1f24);
  margin-bottom: 0.65rem;
}

.bilanz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
}

.bilanz-stat {
  text-align: center;
  padding: 0.8rem 0.5rem;
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.1));
}

.bilanz-stat__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--modal-body-color, #1b1f24);
  line-height: 1.2;
}

.bilanz-stat__label {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--modal-body-color, #1b1f24) 62%, transparent);
  margin-top: 0.2rem;
  line-height: 1.25;
}

/* ── Angebotskarten-Stapel im Rettungs-Modal ────────────────────────── */
.cancel-rescue-intro {
  text-align: center;
  color: color-mix(in srgb, var(--modal-body-color, #1b1f24) 62%, transparent);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

.cancel-offer-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* .profil-offer-card ist fuer <a class="stretched-link"> gebaut — hier
   sind es <button type=submit>, native Button-Defaults zuruecksetzen. */
button.profil-offer-card__cta {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

.profil-offer-card--accent-violet {
  --offer-accent: #8b5cf6;
}

.profil-offer-card--accent-teal {
  --offer-accent: #0ea5e9;
}

/* Kompaktere Variante fuer den Rettungs-Stapel (mehrere Karten koennen
   gleichzeitig sichtbar sein, anders als die 3er-Grid oben auf der Seite) */
.cancel-offer-stack .profil-offer-card {
  padding: 20px 22px;
}

.cancel-offer-stack .profil-offer-card__title {
  font-size: 1rem;
}

.cancel-offer-stack .profil-offer-card__cta {
  height: 42px;
}

/* Pause-Karte hat ein Select-Feld vor dem Button — eigener Spacing-Takt */
.cancel-offer-stack .profil-offer-card__field {
  margin-bottom: 0.85rem;
}

.cancel-offer-stack .profil-offer-card__field .form-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.3rem;
}

.cancel-offer-stack .profil-offer-card__field .form-select {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.cancel-offer-stack .profil-offer-card__field .form-select:focus {
  border-color: var(--offer-accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--offer-accent) 25%, transparent);
}

/* Hilfe-Karte: Liste aus Buttons statt Checkliste+CTA */
.cancel-offer-stack .profil-offer-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

/* ── Grund-Auswahl (Step 1): Karten statt nackter Checkbox-Liste ───── */
.cancel-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

@media (max-width: 575.98px) {
  .cancel-reason-grid {
    grid-template-columns: 1fr;
  }
}

.cancel-reason-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
  cursor: pointer;
  margin: 0;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.cancel-reason-card:hover {
  border-color: rgba(var(--accent-rgb, 92, 152, 255), 0.55);
}

.cancel-reason-card:has(input:checked) {
  border-color: var(--accent-base, #1767ff);
  background: rgba(var(--accent-rgb, 92, 152, 255), 0.08);
}

.cancel-reason-card input.feedback-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cancel-reason-card__icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb, 92, 152, 255), 0.14);
  color: var(--accent-base, #1767ff);
}

.cancel-reason-card__icon svg {
  width: 1rem;
  height: 1rem;
}

.cancel-reason-card__text {
  flex: 1 1 auto;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--form-control-color, inherit);
  line-height: 1.3;
}

.cancel-reason-card__check {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--form-control-border, rgba(0, 0, 0, 0.2));
  background: transparent;
}

.cancel-reason-card:has(input:checked) .cancel-reason-card__check {
  background: var(--accent-base, #1767ff);
  border-color: var(--accent-base, #1767ff);
  position: relative;
}

.cancel-reason-card:has(input:checked) .cancel-reason-card__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── Step 2 (endgueltige Bestaetigung): ruhiger, klarer Abschluss ──── */
.cancel-final-notice {
  text-align: center;
  font-size: 0.95rem;
  color: var(--modal-body-color, #1b1f24);
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 12px);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

/* Hilfe-Karte hat zwei echte Aktions-Links (nicht "Coming soon"-Deko wie das
   Original der Komponente) — brauchen sichtbaren statt fast-transparenten
   Text/Rand. */
.cancel-offer-stack .profil-offer-card__cta--outline {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.cancel-offer-stack .profil-offer-card__cta--outline:hover,
.cancel-offer-stack .profil-offer-card__cta--outline:focus {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  text-decoration: none;
}

.cancel-step-label--on-danger {
  color: rgba(255, 255, 255, 0.8);
}

/* Zahlweise-Umschalter im Halte-/Spar-Angebot (Raten gegen Vorauszahlung).
   Erscheint nur, wenn beide Varianten moeglich sind; Voreinstellung ist die
   monatliche Abbuchung. Light UND Dark, weil die Karte in beiden Modi steht. */
/* ACHTUNG: Die Angebots-Karte ist in BEIDEN Themes dunkelblau (eigener
   Karten-Hintergrund, kein Theme-Wechsel). Farben hier deshalb bewusst NICHT
   am data-theme aufhaengen — mit theme-abhaengiger Schrift war der nicht
   gewaehlte Button dunkel auf dunkel und unsichtbar (03.08.2026). */
.profil-pay-switch {
  display: flex;
  gap: 0.3rem;
  padding: 3px;
  margin: 0 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.profil-pay-switch button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  /* NICHT color:inherit — die Karte vererbt Dunkelblau auf dunklen Grund. */
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  border-radius: 9px;
  padding: 0.45rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  transition: 0.2s;
}

.profil-pay-switch button.active {
  background: linear-gradient(135deg, #2e7bff, #1767ff);
  color: #fff;
  box-shadow: 0 5px 14px -6px rgba(23, 103, 255, 0.6);
}

[data-theme="dark"] .profil-pay-switch {
  border-color: rgba(92, 152, 255, 0.28);
}

/* === ./css/core/profile_card_list.css === */
/* ╔════════════════════════════════════════════════════════════════════╗
   ║  Profil-Card-Liste (Tab "Personenbezogene Daten")                  ║
   ║                                                                    ║
   ║  Ersetzt die frühere <table id="profileTable">. Jedes Profil ist   ║
   ║  eine eigene horizontale Card: Avatar (Initialen), Name, Aktionen. ║
   ║  Scope: ausschliesslich .profile-card-list im pers_profile-Tab.    ║
   ║  Andere Tabellen (Wiki, Anbietervergleich, AV-Input) sind nicht    ║
   ║  betroffen.                                                        ║
   ╚════════════════════════════════════════════════════════════════════╝ */

.profile-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* TEST: Header entkernt — Caps-Optik raus, nur Flex-Container
   bleibt. __name + __actions Selektoren bleiben definiert für
   späteren Refactor falls Header anders aufgebaut wird.
   Revert: alte Caps-Properties zurück.

   TEST: Header-Padding für Button-Bündigkeit + symmetrische
   Vertikal-Abstände. padding-right: 0 → Button-Rechtskante bündig
   mit Profile-Card-Rechtskante. padding-top: 0 + padding-bottom: 1rem
   → oben (Suche-mb-3 = 1rem) ≈ unten (1rem). Revert: alte Padding-Werte
   (0.5rem 0.75rem) zurück. */
.profile-card-list-header {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 1rem 0;
}

.profile-card-list-header__name {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-card-list-header__actions {
  flex: 0 0 auto;
  text-align: right;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  position: relative;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  /* TEST: box-shadow zur Transition ergaenzt fuer smoothen Hover-Glow.
     Revert: box-shadow-Eintrag rausnehmen. */
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* TEST: is-active-BG entfernt. Geladenes Profil sieht visuell
   wie inaktiv aus — Unterschied nur durch permanent sichtbare
   Aktions-Buttons (.btn-load-profile als grüne Pill = visueller
   Indikator). Revert: alte Werte zurück:
     .profile-card.is-active {
       background: rgba(13, 110, 253, 0.08);
       border-color: rgba(13, 110, 253, 0.35);
     }
     [data-theme="dark"] .profile-card.is-active {
       background: rgba(13, 110, 253, 0.18);
       border-color: rgba(13, 110, 253, 0.45);
     }
*/

/* Abwählen: der grüne "Geladen"-Button selbst ist der Trigger
   (.profile-card-deselect liegt auf .btn-load-profile, übernimmt dessen
   Geometrie). Es gibt KEIN absolut positioniertes Eck-X mehr — die aktive
   Karte ist damit exakt gleich hoch wie eine inaktive (kein extra padding-top). */

/* Dünner/kompakter Fonder-Tooltip (§28), aktiviert via
   data-bs-custom-class="tooltip-thin". Genutzt vom "Geladen"=Abwählen-Button;
   für die Header-Tooltips (Bündel B: Speichern/Abwählen) zur Wiederverwendung
   gedacht. Greift global, da Tooltips in <body> rendern (container:'body').
   Dunkle Farbgebung kommt aus dem §28-Basis-Tooltip (forms.css) — hier nur
   kompakteres Padding/Schrift. */
.tooltip.tooltip-thin .tooltip-inner {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.25;
  max-width: 220px;
}

.profile-card-avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 12px);
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

.profile-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--form-control-color, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Laden-Button: scoped grüner Skin (Tailwind green-500 light /
   green-400 dark). Etabliertes Profil-Status-Grün (vgl.
   .profile-btn-main.is-saved). Geometrie analog Mülleimer und
   damit zur .btn-main-Linie. Bewusst NICHT mit .btn-main / .btn-success
   kombiniert — Skin-Klasse kommt erst beim zweiten grünen Konsumenten. */
/* TEST: Idle auf neutralen grauen Look wie .btn-edit-profile-card.
   Hover bleibt semantisch (grün Fill).
   Geladen-Pill auf is-active Card behält grünen Fill via separater
   Regel (.profile-card.is-active .btn-load-profile, höhere Specificity).
   Revert: border 1px solid rgba(34, 197, 94, 0.55); color #22c55e; */
.profile-card-actions .btn-load-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 2.25rem;
  /* Feste Mindestbreite: "Laden" und "Geladen ✓" gleich breit, damit die
     Badges (Kunden-Link / Fonds Finanz) über alle Cards auf einer Linie
     liegen. 6.25rem = breitester Zustand ("Geladen" + Icon) mit Luft. */
  min-width: 6.25rem;
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
  /* DS-Button-Schrift (§10) — gleicht "Bearbeiten" an, einheitliche Zeile.
     Vorher 0.825rem (13.2px); --nav-tool-font-size = 14px light / 15px dark. */
  font-size: var(--nav-tool-font-size);
  font-weight: 400;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  color: var(--bs-secondary-color, #6c757d);
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.profile-card-actions .btn-load-profile .feather {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.profile-card-actions .btn-load-profile:hover,
.profile-card-actions .btn-load-profile:focus,
.profile-card-actions .btn-load-profile:focus-visible {
  background: #22c55e !important;
  border-color: #22c55e;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* Aktiv-Zustand: permanenter Hover-Look (Profil ist geladen). */
.profile-card.is-active .btn-load-profile,
.profile-card.is-active .btn-load-profile:hover,
.profile-card.is-active .btn-load-profile:focus,
.profile-card.is-active .btn-load-profile:focus-visible {
  background: #22c55e !important;
  border-color: #22c55e;
  color: #ffffff !important;
}

/* TEST: Dark-Mode-Idle ebenfalls auf neutral grau.
   Revert: border-color rgba(74, 222, 128, 0.5); color #4ade80; */
[data-theme="dark"] .profile-card-actions .btn-load-profile {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}

[data-theme="dark"] .profile-card-actions .btn-load-profile:hover,
[data-theme="dark"] .profile-card-actions .btn-load-profile:focus,
[data-theme="dark"] .profile-card-actions .btn-load-profile:focus-visible,
[data-theme="dark"] .profile-card.is-active .btn-load-profile,
[data-theme="dark"] .profile-card.is-active .btn-load-profile:hover,
[data-theme="dark"] .profile-card.is-active .btn-load-profile:focus,
[data-theme="dark"] .profile-card.is-active .btn-load-profile:focus-visible {
  background: #4ade80 !important;
  border-color: #4ade80;
  color: #ffffff !important;
}

/* Delete-Button: scoped Geometrie wie .btn-main, eigener roter Skin.
   Bewusst NICHT mit .btn-main kombiniert, um den Standard-Baukasten
   nicht zu untergraben. Falls später ein "Danger-Baustein" entsteht,
   ist das ein separater Schritt. */
/* TEST: Idle auf neutralen grauen Look wie .btn-edit-profile-card.
   Hover bleibt semantisch (rot Fill).
   Revert: border 1px solid rgba(220, 53, 69, 0.55); color #dc3545; */
.profile-card-actions .btn-delete-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  width: 2.25rem;
  padding: 0;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  color: var(--bs-secondary-color, #6c757d);
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.profile-card-actions .btn-delete-profile .feather {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Hover analog .btn-main-Pattern: solides Akzent als Background +
   weißes Icon. Akzent hier: kräftiges Rot (#dc3545) statt Royal-Blau.
   Scoped — Danger-Skin-Baukasten erst wenn 2. Konsument auftaucht. */
.profile-card-actions .btn-delete-profile:hover,
.profile-card-actions .btn-delete-profile:focus,
.profile-card-actions .btn-delete-profile:focus-visible {
  background: #dc3545 !important;
  border-color: #dc3545;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
}

/* TEST: Dark-Mode-Idle ebenfalls auf neutral grau.
   Revert: border-color rgba(248, 113, 113, 0.5); color #f87171; */
[data-theme="dark"] .profile-card-actions .btn-delete-profile {
  background: transparent;
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.22));
  color: var(--bs-secondary-color, #adb5bd);
}

[data-theme="dark"] .profile-card-actions .btn-delete-profile:hover,
[data-theme="dark"] .profile-card-actions .btn-delete-profile:focus,
[data-theme="dark"] .profile-card-actions .btn-delete-profile:focus-visible {
  background: #f87171 !important;
  border-color: #f87171;
  color: #ffffff !important;
}

/* Edit-Button (Card-Liste): neutrale Aktion zwischen Laden und Loeschen.
   Nutzt den .btn-main-Skin (weisser Default mit subtiler Border + blauer
   Hover-Fill) — Skin kommt aus buttons.css. Hier scoped Geometrie analog
   .btn-load-profile (Icon + "Bearbeiten"-Text, gleicher Gap) sowie
   visuelle Anpassungen:
   - font-weight: 400 — overridet .btn:not(.btn-link)'s default 600.
   - color: --bs-secondary-color (Grau) statt --form-control-color
     (Dark-Blue) → visuelle Schwere matched Laden-Green. Hover-State
     (.btn-main:hover blau + weiss) bleibt unangetastet.
   - border: explizit gesetzt, weil .btn:not(.btn-link) in buttons.css:2
     "border-color: transparent" mit Specificity (0,2,0) durchschlaegt
     — höher als .btn-main (0,1,0). Same-Specificity-Tie hier loest
     source-order zugunsten der scoped-Regel auf. */
.profile-card-actions .btn-edit-profile-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
  /* DS-Button-Schrift (§10) explizit setzen — ohne diese Regel greift der
     0.95rem-Fallback von .btn:not(.btn-link) (Spec 0,2,0). Hier 0,2,0 + spätere
     Source-Order → gewinnt. --nav-tool-font-size = 14px light / 15px dark. */
  font-size: var(--nav-tool-font-size);
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
}

.profile-card-actions .btn-edit-profile-card .feather {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Search-Highlight innerhalb der Card-Liste */
.profile-card-name mark {
  background: transparent;
  color: inherit;
  padding: 0;
  font-weight: 700;
  text-decoration: underline dotted currentColor;
}

/* TEST: Card-Actions nur auf Hover sichtbar, Hover-BG hellblau
   wie is-active. Geladen-Pill (.btn-load-profile) bleibt auf der
   aktiven Card permanent sichtbar.
   Revert: diesen Block entfernen. */

.profile-card:not(.is-active) .btn-edit-profile-card,
.profile-card:not(.is-active) .btn-delete-profile {
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
}

.profile-card:not(.is-active) .btn-load-profile {
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
}

.profile-card:hover .profile-card-actions > *,
.profile-card:focus-within .profile-card-actions > * {
  visibility: visible;
  opacity: 1;
}

.profile-card:not(.is-active) .profile-card-intake-badge {
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
}

.profile-card:hover .profile-card-intake-badge,
.profile-card:focus-within .profile-card-intake-badge {
  visibility: visible;
  opacity: 1;
}

/* TEST: Card-Hover auf Form-Control-Hover-Effekt umgestellt.
   Selber Glow wie Eingabefelder, kein Background-Fill mehr.
   Geladenes Profil bekommt selben Hover-Effekt — Edit/Delete
   bleiben permanent sichtbar (vorhandene Regel).
   Revert: alte Hover-Werte (background-rgba) zurück:
     .profile-card:hover { background: rgba(13,110,253,0.08); border-color: rgba(13,110,253,0.35); }
     [data-theme="dark"] .profile-card:hover { background: rgba(13,110,253,0.18); border-color: rgba(13,110,253,0.45); }
*/
.profile-card:hover {
  box-shadow: var(--form-focus-shadow);
}

/* ── Profile-Visibility-Toggle ──
   Stil analog .factor-extras-toggle (depot_tiles.css:314).
   Sitzt linksbündig im #profileCardListHeader, Button rechts via ms-auto.
   Header bekommt align-items: flex-end → Toggle-Unterkante bündig mit Button. */
#profileCardListHeader {
  align-items: flex-end;
}

.profile-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.profile-visibility-toggle:hover,
.profile-visibility-toggle:focus-visible {
  color: var(--nav-link-hover-color, rgb(13, 110, 253));
  outline: none;
}

.profile-visibility-toggle__icon svg,
.profile-visibility-toggle__icon .feather {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  display: block;
}

/* aria-expanded="true"  → Profile sichtbar: zeige eye + "ausblenden" */
.profile-visibility-toggle[aria-expanded="true"]  .profile-visibility-toggle__icon--closed,
.profile-visibility-toggle[aria-expanded="true"]  .profile-visibility-toggle__label--show,
/* aria-expanded="false" → Profile versteckt: zeige eye-off + "einblenden" */
.profile-visibility-toggle[aria-expanded="false"] .profile-visibility-toggle__icon--open,
.profile-visibility-toggle[aria-expanded="false"] .profile-visibility-toggle__label--hide {
  display: none;
}

/* "via Kunden-Link"-Badge: Profil entstand aus dem Kunden-Funnel.
   Zeigt n/m beantwortete Felder; Tooltip listet die übersprungenen. */
.profile-card-intake-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
  color: rgb(13, 110, 253);
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.25);
}

.profile-card-intake-badge svg,
.profile-card-intake-badge .feather {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  display: block;
}

[data-theme="dark"] .profile-card-intake-badge {
  color: #6ea8fe;
  background: rgba(110, 168, 254, 0.12);
  border-color: rgba(110, 168, 254, 0.35);
}

/* "Fonds Finanz"-Badge: Profil ist mit einem PW-Kunden verknüpft.
   Gleiche Form wie der Kunden-Link-Badge, grün zur Unterscheidung. */
.profile-card-pw-badge {
  color: rgb(25, 135, 84);
  background: rgba(25, 135, 84, 0.08);
  border-color: rgba(25, 135, 84, 0.25);
}

[data-theme="dark"] .profile-card-pw-badge {
  color: #75b798;
  background: rgba(117, 183, 152, 0.12);
  border-color: rgba(117, 183, 152, 0.35);
}

/* === ./css/core/profil_karte.css === */
/* ╔════════════════════════════════════════════════════════════════════╗
   ║  Kundenakte (Tab "Personenbezogene Daten")                         ║
   ║                                                                    ║
   ║  Zweite .main-area-container-Karte unter der Profilliste. Zeigt,   ║
   ║  was am GELADENEN Profil haengt: Kontakt, Bestandsvertraege,       ║
   ║  Notizen/Wiedervorlagen, Termine.                                  ║
   ║                                                                    ║
   ║  Kein eigenes Designsystem: Container/Sub-Card kommen aus          ║
   ║  cards.css, Felder aus forms.css (.form-control/.form-select),     ║
   ║  Knopf-Geometrie folgt .btn-edit-profile-card aus                  ║
   ║  profile_card_list.css. Hier steht nur Layout + Zeilen-Optik.      ║
   ║                                                                    ║
   ║  Breite: Das Assistenten-Panel nimmt bis 440 px und verschmaelert  ║
   ║  main -> das Raster ist auto-fit und faellt dann auf eine Spalte.  ║
   ║  Keine Positions-Mathe, nichts in vw/vh, damit der Seiten-Zoom     ║
   ║  (documentElement.style.zoom 0.75-1.5) nichts verschiebt.          ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* Die negative margin-top aus cards.css zieht die ERSTE Karte unter die
   Topbar-Linie. Die zweite Karte steht im normalen Fluss und muss sie
   zuruecknehmen, sonst ueberlappt sie die Profilliste. */
@media (min-width: 1200px) {
  .main-area-container.profil-karte {
    margin-top: 0;
  }
}

.profil-karte .pk-kopf {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.profil-karte .pk-titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--form-control-color, inherit);
}

.profil-karte .pk-titel-icon {
  display: inline-flex;
  color: var(--bs-secondary-color, #6c757d);
}

.profil-karte .pk-titel-icon .feather {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Der Profilname als Pille — dieselbe Rolle wie der Avatar in der
   Profilliste: auf einen Blick sichtbar, WESSEN Akte hier steht. */
.profil-karte .pk-profil-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.profil-karte .pk-aktualisieren {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  font-size: var(--nav-tool-font-size, 0.875rem);
  white-space: nowrap;
}

/* ── Kein Profil geladen ─────────────────────────────────────────── */
.profil-karte .pk-kein-profil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--form-control-border, rgba(0, 0, 0, 0.18));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-soft-bg, #f5f5f7);
}

.profil-karte .pk-kein-profil-text {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
}

.profil-karte .pk-kein-profil-aktionen {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

/* ── Raster der vier Bereiche ──────────────────────────────────────
   Zwei Spalten, wenn die KARTE breit genug ist — nicht wenn das Fenster
   breit ist. Die Karte verschmaelert sich, sobald das Assistenten-Panel
   aufgeht (bis 440 px), und ein Media-Query wuerde das nicht mitbekommen.
   Container-Queries sind hier schon etabliert (layout.css, navs.css).
   Ohne Unterstuetzung bleibt es bei einer Spalte: laenger, aber lesbar. */
.profil-karte .sub-card-body {
  container: kundenakte / inline-size;
}

.profil-karte .pk-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@container kundenakte (min-width: 40rem) {
  .profil-karte .pk-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profil-karte .pk-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-soft-bg, #f5f5f7);
}

.profil-karte .pk-block-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.profil-karte .pk-block-titel {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--form-control-color, inherit);
}

/* Knopf-Geometrie wie .btn-edit-profile-card, nur eine Stufe kleiner. */
.profil-karte .btn.pk-btn-klein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 1.875rem;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 400;
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  color: var(--bs-secondary-color, #6c757d);
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.profil-karte .btn.pk-btn-klein:hover,
.profil-karte .btn.pk-btn-klein:focus-visible {
  border-color: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: var(--nav-pills-active-bg, rgb(15, 76, 154));
  box-shadow: none;
  outline: none;
}

/* Speichern bleibt semantisch gruen (btn-success), nur die Groesse angleichen. */
.profil-karte .btn.btn-success.pk-btn-klein {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

.profil-karte .btn.btn-success.pk-btn-klein:hover,
.profil-karte .btn.btn-success.pk-btn-klein:focus-visible {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

/* ── Listen ──────────────────────────────────────────────────────── */
.profil-karte .pk-liste {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* rem = Layout-px, damit der Seiten-Zoom nichts verrechnet. */
  max-height: 15rem;
  overflow-y: auto;
}

.profil-karte .pk-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
}

.profil-karte .pk-zeile-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.profil-karte .pk-zeile-titel {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--form-control-color, inherit);
  overflow-wrap: anywhere;
}

.profil-karte .pk-zeile-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  overflow-wrap: anywhere;
}

.profil-karte .pk-zeile-aktionen {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.profil-karte .pk-marke {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: rgba(127, 148, 190, 0.16);
  color: var(--bs-secondary-color, #6c757d);
  vertical-align: 1px;
}

.profil-karte .pk-marke--warn {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.profil-karte .pk-leer,
.profil-karte .pk-laedt {
  margin: 0;
  padding: 0.75rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
}

.profil-karte .pk-fussnote {
  margin: 0.5rem 0 0 0;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

.profil-karte .pk-fussnote a {
  color: inherit;
  text-decoration: underline;
}

/* ── Formulare ───────────────────────────────────────────────────── */
.profil-karte .pk-formular-inhalt {
  margin-bottom: 0.625rem;
  padding: 0.625rem;
  border: 1px solid var(--nav-pills-active-bg, rgb(15, 76, 154));
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
}

.profil-karte .pk-formular-titel {
  margin: 0 0 0.375rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--form-control-color, inherit);
  overflow-wrap: anywhere;
}

.profil-karte .pk-feld-label {
  display: block;
  margin: 0.375rem 0 0.125rem 0;
  font-size: 0.6875rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Feldhoehe eine Stufe kompakter als der App-Standard — hier stehen bis zu
   sechs Felder in einer Spalte, die neben der Beratung lesbar bleiben muss. */
.profil-karte .form-control.pk-feld,
.profil-karte .form-select.pk-feld {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.profil-karte textarea.form-control.pk-feld {
  min-height: 3.25rem;
}

.profil-karte .pk-feld-reihe {
  display: flex;
  gap: 0.5rem;
}

.profil-karte .pk-feld-reihe > * {
  flex: 1 1 0;
  min-width: 0;
}

.profil-karte .pk-formular-fuss {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

/* ── Meldungszeile ───────────────────────────────────────────────── */
.profil-karte .pk-meldung {
  margin-bottom: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-md, 12px);
  font-size: 0.8125rem;
  background: rgba(127, 148, 190, 0.14);
  color: var(--form-control-color, inherit);
}

.profil-karte .pk-meldung--fehler {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

/* ── Dark Mode ───────────────────────────────────────────────────────
   Die Sub-Card ist im Dark Mode transparent (cards.css), der Container
   traegt das Navy-Panel. Bloecke und Zeilen brauchen deshalb eigene,
   leicht abgesetzte Flaechen statt der Light-Tokens. */
[data-theme="dark"] .profil-karte .pk-block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .profil-karte .pk-zeile {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .profil-karte .pk-kein-profil {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .profil-karte .pk-titel,
[data-theme="dark"] .profil-karte .pk-block-titel,
[data-theme="dark"] .profil-karte .pk-zeile-titel,
[data-theme="dark"] .profil-karte .pk-formular-titel {
  color: #f8f9fa;
}

[data-theme="dark"] .profil-karte .pk-zeile-meta,
[data-theme="dark"] .profil-karte .pk-leer,
[data-theme="dark"] .profil-karte .pk-laedt,
[data-theme="dark"] .profil-karte .pk-fussnote,
[data-theme="dark"] .profil-karte .pk-feld-label,
[data-theme="dark"] .profil-karte .pk-kein-profil-text,
[data-theme="dark"] .profil-karte .pk-titel-icon {
  color: rgba(226, 232, 240, 0.72);
}

[data-theme="dark"] .profil-karte .btn.pk-btn-klein {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(226, 232, 240, 0.82);
}

[data-theme="dark"] .profil-karte .btn.pk-btn-klein:hover,
[data-theme="dark"] .profil-karte .btn.pk-btn-klein:focus-visible {
  border-color: #5c98ff;
  color: #5c98ff;
}

[data-theme="dark"] .profil-karte .btn.btn-success.pk-btn-klein {
  background: #4ade80;
  border-color: #4ade80;
  color: #0f1728;
}

[data-theme="dark"] .profil-karte .btn.btn-success.pk-btn-klein:hover,
[data-theme="dark"] .profil-karte .btn.btn-success.pk-btn-klein:focus-visible {
  background: #22c55e;
  border-color: #22c55e;
  color: #0f1728;
}

[data-theme="dark"] .profil-karte .pk-formular-inhalt {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(92, 152, 255, 0.55);
}

[data-theme="dark"] .profil-karte .pk-profil-name {
  background: #5c98ff;
  color: #0f1728;
}

[data-theme="dark"] .profil-karte .pk-marke {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.82);
}

[data-theme="dark"] .profil-karte .pk-marke--warn {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

[data-theme="dark"] .profil-karte .pk-meldung {
  background: rgba(255, 255, 255, 0.08);
  color: #f8f9fa;
}

[data-theme="dark"] .profil-karte .pk-meldung--fehler {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* === ./css/core/modal_panels.css === */
/**
 * Modal Panels - Shared Styles
 * Used by: entnahmeplan_input, fondswechsel, profile_modals, eigene_versicherungen
 * 
 * Common components:
 * - .panel-wrapper: Main container (uses unified --modal-* variables)
 * - .panel-inactive-hint: Warning when feature disabled
 * - .panel-hero: Hero section with icon and title
 * - .panel-section: Grouped content sections
 * - .panel-param-card: Parameter input cards
 * - .panel-slider-card: Slider controls
 * - .panel-footer: Footer with info/actions
 * 
 * NOTE: Uses variables from modal_unified.css
 */

/* ============================================
   Panel Wrapper - Uses Unified Variables
   ============================================ */
.panel-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  
  /* Map to unified variables (green by default) */
  --panel-accent: var(--modal-accent);
  --panel-accent-light: var(--modal-icon-bg);
  --panel-hero-bg: var(--modal-hero-bg);
  --panel-hero-border: var(--modal-hero-border);
  --panel-hero-icon-bg: var(--modal-hero-icon-bg);
  --panel-card-bg: var(--modal-card-bg);
  --panel-card-border: var(--modal-card-border);
  --panel-divider: var(--modal-divider);
  --panel-hint-bg: var(--modal-hint-bg);
  --panel-hint-border: var(--modal-hint-border);
  --panel-hint-icon: var(--modal-hint-icon);
}

/* Blue variant (optional override) */
.panel-wrapper.panel-blue {
  --panel-accent: var(--modal-accent);
  --panel-accent-light: var(--modal-icon-bg);
  --panel-hero-bg: var(--modal-hero-bg);
  --panel-hero-border: var(--modal-hero-border);
  --panel-hero-icon-bg: var(--modal-hero-icon-bg);
}

/* Green variant (explicit, same as default) */
.panel-wrapper.panel-green {
  --panel-accent: var(--modal-accent);
  --panel-accent-light: var(--modal-icon-bg);
  --panel-hero-bg: var(--modal-hero-bg);
  --panel-hero-border: var(--modal-hero-border);
  --panel-hero-icon-bg: var(--modal-hero-icon-bg);
}

.panel-wrapper.panel-wrapper--full {
  max-width: none;
  width: 100%;
}

#entnahmeplan_form_wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

#fondswechsel_form_wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

/* ============================================
   Inactive Hint (Warning Banner)
   ============================================ */
.panel-inactive-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--panel-hint-bg);
  border: 1px solid var(--panel-hint-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.panel-hint-icon {
  width: 18px;
  height: 18px;
  color: var(--panel-hint-icon);
  flex-shrink: 0;
  margin-top: 2px;
}

.panel-inactive-hint strong {
  display: block;
  color: var(--bs-body-color);
}

.panel-inactive-hint span {
  color: var(--bs-secondary-color);
}

/* ============================================
   Hero Section
   ============================================ */
.panel-hero-wrapper {
  margin-bottom: 1.5rem;
}

.panel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--panel-hero-bg);
  border: 1px solid var(--panel-hero-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

/* Hero with image below */
.panel-hero-wrapper .panel-hero {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 0;
}

.panel-hero-image {
  background: var(--panel-image-bg, #f8f9fa);
  border: 1px solid var(--panel-hero-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1rem;
  text-align: center;
}

.panel-hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.panel-hero-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.panel-hero-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-hero-icon-bg, var(--panel-accent-light));
  border-radius: var(--radius-md);
  color: var(--panel-accent);
  flex-shrink: 0;
}

.panel-hero-icon svg {
  width: 24px;
  height: 24px;
}

.panel-hero-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.panel-subtitle {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.panel-help-btn {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.panel-help-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Section Headers
   ============================================ */
.panel-section {
  margin-bottom: 1.5rem;
}

.panel-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--panel-divider);
}

.panel-section-icon {
  width: 18px;
  height: 18px;
  color: var(--panel-accent);
}

/* Box-Variante: royal-blaues 32x32-Quadrat mit weissem Feather. Generalisiert
   die frueher 4 ID-gescopten Bloecke (#kvStatusModal / #legalPensionModal /
   #existingPensionsModal / #det_dep_modal). An den Section-Header-Icons dieser
   Modals zusaetzlich zu .panel-section-icon setzen. Werte 1:1 wie zuvor.
   Ueberschreibt die kleine Basis-Groesse + die gruene
   .modal-blue-green-headers-Color (via !important) und zentriert das SVG. */
.panel-section-icon--box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md, 12px);
  background: var(--nav-pills-active-bg, rgb(15, 76, 154));
  color: #ffffff !important;
}
.panel-section-icon--box svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

.panel-section-body {
  padding-left: 1.25rem;
}

/* Rentenbezugsform ist ein Unterpunkt von „Berechnen" → mit dem
   panel-section-body-Inhalt darüber fluchten (gleiche Einrückung). */
.leibrente-bezugsform {
  padding-left: 1.25rem;
}

.panel-section-desc {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-bottom: 1rem;
}

/* ============================================
   Strategy Cards (Radio Selection)
   ============================================ */
.panel-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 576px) {
  .panel-strategy-grid {
    grid-template-columns: 1fr;
  }
}

.panel-strategy-card {
  position: relative;
  cursor: pointer;
}

.panel-strategy-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.panel-strategy-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--panel-card-bg);
  border: 2px solid var(--panel-card-border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.panel-strategy-card:hover .panel-strategy-card-inner {
  border-color: var(--panel-accent);
  background: color-mix(in srgb, var(--panel-accent) 4%, transparent);
}

.panel-strategy-card input:checked + .panel-strategy-card-inner {
  border-color: var(--panel-accent);
  background: color-mix(in srgb, var(--panel-accent) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent) 15%, transparent);
}

.panel-strategy-icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-accent-light);
  border-radius: var(--radius-sm);
  color: var(--panel-accent);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.panel-strategy-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.panel-strategy-card input:checked + .panel-strategy-card-inner .panel-strategy-icon-wrap {
  background: var(--panel-accent);
  color: #fff;
}

.panel-strategy-content {
  flex: 1;
  min-width: 0;
}

.panel-strategy-title {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  line-height: 1.2;
}

.panel-strategy-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
}

.panel-strategy-check {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--panel-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.panel-strategy-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  color: #fff;
  transition: opacity 0.15s ease;
}

.panel-strategy-card input:checked + .panel-strategy-card-inner .panel-strategy-check {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
}

.panel-strategy-card input:checked + .panel-strategy-card-inner .panel-strategy-check svg {
  opacity: 1;
}

/* ============================================
   Anlagen-Auswahl als vertikale Card-Liste
   (entnahmeplan_input.html, „Auszahlungs-/Rentenphase")
   ============================================
   Vertikale Liste kleiner Cards (links) je Anlage neben der Einstellungs-Card
   (rechts, data-anlage-content). Radios behalten id/name/value/data-anlage-switch
   aus Etappe 7b → View-State-Mechanik (applyAnlageSelection in
   entnahmeplan_inputs.js) bleibt unveraendert. Skin an segmented-control v2
   (Modus-Switch / DESIGN_SYSTEM §8b) angeglichen: weisse Flaeche, 1px
   --form-control-border, Hover = graues Inset-Kaestchen (kein Schrift-Umfaerben),
   AKTIV = check-circle links + Label in Akzentfarbe + fett. Keine Farbstriche mehr.
   Light + Dark ueber Tokens automatisch. Revert: Block entfernen + Markup zurueck. */
.anlage-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.anlage-pick-card {
  position: relative;
  display: block;
  cursor: pointer;
  margin-bottom: 0;
}

/* Radio visuell entfernt, im Tab-Order/DOM gehalten (Mechanik + :checked-Styling).
   outline:none verhindert nativen Browser-Fokusring am versteckten 1px-Input. */
.anlage-pick-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  outline: none;
  pointer-events: none;
  margin: 0;
}

/* Card-Flaeche: kein Rahmen, kein Hintergrund-Kästchen.
   inline-flex (statt flex) → shrinks auf Textinhalt; col-md-auto bekommt
   dadurch echten shrink-to-fit (kein Block-Level-Overflow über Textbreite hinaus).
   Padding-left=0 → Häkchen-Icon bündig mit Modal-Inhaltskante. */
.anlage-pick-card__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 0.75rem 0.5rem 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 12px);
  color: var(--form-check-label-color, #6c757d);
  font-size: 0.825rem;
  font-weight: 500;
  transition: color 200ms ease, font-weight 200ms ease;
}

/* Hover = nur Schrift blau; auf Label-Ebene (nicht auf __inner:hover), weil
   __inner als inline-flex schmaler als der klickbare Label-Bereich ist. */
.anlage-pick-card:hover .anlage-pick-card__inner {
  color: var(--nav-tabs-link-active-color, #0d6efd);
}

/* Keyboard-Focus: Inset-Ring nur auf NICHT gewählten Einträgen — verhindert
   blaue Pille auf dem bereits aktiven Eintrag nach Maus-Klick (macOS
   Chrome/Safari triggern :focus-visible auch auf Klick auf Radio-Inputs). */
.anlage-pick-card__input:not(:checked):focus-visible + .anlage-pick-card__inner {
  box-shadow: inset 0 0 0 2px var(--form-focus-border, rgba(23, 103, 255, 0.65));
}

/* Aktiv = Akzentfarbe + fett (wie aktives Segment im segmented-control v2). */
.anlage-pick-card__input:checked + .anlage-pick-card__inner {
  color: var(--nav-tabs-link-active-color, #0d6efd);
  font-weight: 600;
}

/* Inhalt ueber dem Hover-Kaestchen. */
.anlage-pick-card__check,
.anlage-pick-card__name {
  position: relative;
  z-index: 1;
}

/* check-circle links: nur sichtbar wenn aktiv; reservierter Platz (visibility) haelt
   die Namen buendig (kein Layout-Shift) — identisch zu .segmented-control__check. */
.anlage-pick-card__check {
  display: inline-flex;
  visibility: hidden;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 200ms ease;
}
.anlage-pick-card__check svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  display: block;
}
.anlage-pick-card__input:checked + .anlage-pick-card__inner .anlage-pick-card__check {
  visibility: visible;
  opacity: 1;
}

.anlage-pick-card__name {
  line-height: 1.2;
  white-space: nowrap;
}

/* Breadcrumb statt Section-Ueberschrift: „{Modus} › {gewaehlte Anlage}". Modus grau,
   gewaehlte Anlage in Akzentfarbe (= aktive Card). JS zieht nur den Anlagen-Text nach
   (entnahmeplan_inputs.js, applyAnlageSelection) — keine neue Logik. */
.anlage-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.825rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.anlage-breadcrumb__mode {
  color: var(--form-check-label-color, #6c757d);
}
.anlage-breadcrumb__sep {
  color: var(--form-check-label-color, #6c757d);
  opacity: 0.7;
}
.anlage-breadcrumb__current {
  color: var(--nav-tabs-link-active-color, #0d6efd);
  font-weight: 600;
}

/* Rechte Einstellungs-Card (DESIGN_SYSTEM §2 Float-Card): weisse Flaeche, Rahmen,
   Float-Schatten (via Begleit-Klasse .surface-floating). Inhalt unveraendert, nur
   umfasst. .surface-floating resettet den Halo der inneren Form-Controls.
   Border = --form-control-border (sichtbar in Light + Dark). */
.anlage-settings-card {
  background: var(--panel-card-bg);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* ============================================
   Parameter Cards
   ============================================ */
.panel-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 576px) {
  .panel-params-grid {
    grid-template-columns: 1fr;
  }
}

.panel-param-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-card-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

.panel-param-card:focus-within {
  border-color: var(--panel-accent);
}

/* Gesperrt (z. B. Überschuss-Feld wenn der Einflussfaktor-Schalter aus ist).
   opacity ist theme-agnostisch -> wirkt in Light + Dark Mode gleich. */
.panel-param-card.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.panel-param-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-accent-light);
  border-radius: var(--radius-sm);
  color: var(--panel-accent);
  flex-shrink: 0;
}

.panel-param-icon svg {
  width: 18px;
  height: 18px;
}

.panel-param-content {
  flex: 1;
  min-width: 0;
}

.panel-param-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
}

.panel-param-content .form-control {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}

.panel-param-info-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--bs-secondary-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.panel-param-info-btn:hover {
  background: var(--panel-accent-light);
  color: var(--panel-accent);
}

.panel-param-info-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Slider Cards
   ============================================ */
.panel-slider-card {
  padding: 1rem 1.25rem;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-card-border);
  border-radius: var(--radius-md);
}

/* Fondswechsel Button Group (11 buttons) */
.btn-group-fondswechsel {
  gap: 0.25rem;
}

.btn-group-fondswechsel .btn {
  flex: 1 1 auto;
  min-width: 2rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

.btn-group-fondswechsel .btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .btn-group-fondswechsel .btn {
    min-width: 1.75rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.75rem;
  }
}

.panel-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.panel-slider-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}

.panel-range-val {
  background: var(--panel-accent-light);
  color: var(--panel-accent);
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  min-width: 36px;
  text-align: center;
}

.panel-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-top: 0.5rem;
}

.panel-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.panel-slider-row .form-range {
  flex: 1;
}

/* ============================================
   Times Grid (Fondswechsel)
   ============================================ */
.panel-times-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel-times-grid .fondswechsel-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-card-border);
  border-radius: var(--radius-md);
  margin: 0 !important;
}

.panel-times-grid .fondswechsel-row label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  white-space: nowrap;
  margin: 0 !important;
  flex-shrink: 0;
}

.panel-times-grid .fondswechsel-row .input-container {
  min-width: 140px;
  margin-left: auto;
}

.panel-times-grid .fondswechsel-row .form-control {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  text-align: center;
}

/* Hide Bootstrap row/col structure */
.panel-times-grid .fondswechsel-row > .col-12,
.panel-times-grid .fondswechsel-row > .col-md-6 {
  flex: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.panel-times-grid .fondswechsel-row > .col-12.col-md-6:first-child {
  flex: 1;
}

.panel-times-grid .fondswechsel-row > .col-12.col-md-6:last-child .input-container {
  margin-left: 0;
}

/* ============================================
   Details/Accordion
   ============================================ */
.panel-details {
  border: 1px solid var(--panel-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.panel-details.has-data {
  border-color: var(--panel-accent);
}

.panel-details-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--panel-card-bg);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  user-select: none;
  color: var(--bs-body-color);
}

.panel-details-summary::-webkit-details-marker {
  display: none;
}

.panel-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--bs-secondary-color);
  transition: transform 0.2s ease;
}

.panel-details[open] .panel-chevron {
  transform: rotate(180deg);
}

.panel-badge {
  background: var(--panel-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-md);
}

.panel-details-content {
  padding: 1rem;
  border-top: 1px solid var(--panel-divider);
}

/* ============================================
   Payout List (Planned Payouts)
   ============================================ */
.panel-payout-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.panel-payout-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-payout-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-accent-light);
  color: var(--panel-accent);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.panel-payout-row .input-container {
  flex: 1;
}

/* X-Entfernen in nummerierten Eingabezeilen (Zuzahlung / Änderung mtl.
   Investition): die Picker-Klasse liefert Optik + Hover, ist dort aber
   absolut positioniert — im Flex-Row statisch einreihen. */
.panel-payout-row .anlage-picker__compare-remove-btn {
  position: static;
  flex-shrink: 0;
}

/* ── Änderungspunkte "Änderung der Abgeltungssteuer" (Karte je Punkt:
   Nr. | Raster [ab Vertragsjahr | Besteuerung | Satz] | Entfernen).
   Jede Zelle hat drei gleich hohe Zeilen (Label / Feld / Fußzeile), damit
   Felder, Buttons und Hinweise über die Karte hinweg auf einer Linie liegen. ── */
.panel-payout-row.abgst-change-card {
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--panel-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-sm);
  background: var(--panel-bg-soft, transparent);
}
.abgst-change-card__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 7.75rem minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 0 1.1rem;
  align-items: start;
}
.abgst-change-card__cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}
.abgst-change-card__label {
  display: block;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.72rem;
  color: #6c757d;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Feld-Zeile: Inputs und Button-Gruppe exakt gleich hoch */
.abgst-change-card__cell .input-container,
.abgst-change-card__modes {
  height: 2.25rem;
}
.abgst-change-card__cell .form-control {
  height: 2.25rem;
  padding: 0.3rem 1.8rem 0.3rem 0.6rem;
  font-size: 0.85rem;
  text-align: center;
}
.abgst-change-card__cell .input-unit {
  font-size: 0.8rem;
}
/* Fußzeile: Alter/Jahr, Gesamtsatz-Hinweis oder Auto-Häkchen — immer gleich hoch */
.abgst-change-card__age,
.abgst-change-card__hint,
.abgst-change-card__auto {
  min-height: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.1rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abgst-change-card__hint:empty {
  display: none;
}
.abgst-change-card__modes {
  display: flex;
  width: 100%;
}
.abgst-change-card__modes .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abgst-change-card__modes .btn.active {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
  color: #fff;
}
.abgst-change-card__auto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: #6c757d;
}
.abgst-change-card__auto .form-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  min-height: 0;
}
.abgst-change-card__auto .form-check-input {
  margin: 0;
  float: none;
  width: 0.9rem;
  height: 0.9rem;
}
.abgst-change-card__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--panel-accent);
  cursor: pointer;
}
.abgst-change-card__info svg {
  width: 0.9rem;
  height: 0.9rem;
}
/* Neu angelegter Aenderungspunkt beim Auto-Oeffnen des Popups: Glow-Ring
   (nur box-shadow/border — der Zoom-Puls laeuft als transform-Transition in
   mon_inc_einstellungen.js::abgstPopCard, blur-frei). Dauer = Puls-Dauer. */
.panel-payout-row.abgst-change-card--pop {
  position: relative;
  z-index: 1;
  border-color: var(--panel-accent, #1767ff) !important;
  animation: abgst-card-glow 1.7s ease-out;
}
@keyframes abgst-card-glow {
  0%   { box-shadow: 0 0 0 0 rgba(23, 103, 255, 0); }
  25%  { box-shadow: 0 0 0 5px rgba(23, 103, 255, 0.28), 0 10px 26px rgba(23, 103, 255, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(23, 103, 255, 0); }
}
[data-theme="dark"] .panel-payout-row.abgst-change-card--pop {
  border-color: #5c98ff !important;
  animation-name: abgst-card-glow-dark;
}
@keyframes abgst-card-glow-dark {
  0%   { box-shadow: 0 0 0 0 rgba(92, 152, 255, 0); }
  25%  { box-shadow: 0 0 0 5px rgba(92, 152, 255, 0.32), 0 10px 26px rgba(92, 152, 255, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(92, 152, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-payout-row.abgst-change-card--pop { animation: none; }
}

.abgst-change-card input[readonly] {
  background: var(--panel-bg-soft, #f3f4f6);
  color: #6c757d;
}
@media (max-width: 575.98px) {
  .abgst-change-card__grid {
    grid-template-columns: 1fr;
    gap: 0.5rem 0;
  }
}

/* ── Kinderzulage: Feld-Caption UNTER dem Feld (AV-Depot-Einstellungen) ──
   Der frühere Hover-Tooltip-Text ("Aktuelles Alter des Kindes" bzw. bei
   geplanten Kindern "Geburt in … Jahren" / "Zulage bis Alter") steht als
   kleine, dezente Beschriftung direkt unter dem jeweiligen Feld. Absolut
   positioniert (top: 100%), damit der input-container seine Feldhöhe
   behält und Unit/Wert exakt zentriert bleiben — den nötigen Platz nach
   unten schafft der row-gap-Override am Kinder-Container. Ellipsis als
   Schutz, falls das Feld doch mal schmaler wird. Farbe über
   --form-control-placeholder → theme-aware (Light + Dark), opacity
   drückt sie zusätzlich ins Unauffällige. */
.av-kind-field .av-kind-caption {
  position: absolute;
  top: calc(100% + 3px);
  left: 10px;   /* = padding-left des Inputs → bündig mit dem Wert */
  right: 0;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--form-control-placeholder, rgba(0, 0, 0, 0.55));
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Platz für die unter den Feldern hängenden Captions: Zeilenabstand
   (Basis .panel-payout-list: 0.5rem) + Abstand zum "Hinzufügen"-Button. */
#av_depot_kinder_container {
  row-gap: 1.35rem;
}
#av_depot_kinder_container .av-kind-field:last-child {
  /* Caption hängt ~13px unter das Feld → 1.4rem lässt ~9px Luft zum
     "Kinderzulage hinzufügen"-Button (gleiches Bild wie der row-gap). */
  margin-bottom: 1.4rem;
}

[data-theme="dark"] .av-kind-field .av-kind-caption {
  color: var(--form-control-placeholder, rgba(255, 255, 255, 0.55));
}

/* ============================================
   Footer
   ============================================ */
.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--panel-divider);
  flex-wrap: wrap;
}

.panel-footer-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.panel-footer-info.text-right {
  text-align: right;
}

.panel-footer-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dark Mode handled by modal_unified.css */

/* ============================================
   Info Box (hint/tip style)
   ============================================ */
.panel-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--panel-accent-light);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--panel-accent);
}

.panel-info-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================
   Neutral Info Box (gray, sofort sichtbar, wie alert-warning aber grau)
   Verwendung: <div class="panel-info-neutral d-flex align-items-start gap-2">
               + icon mit inline-style + <span>text</span>
   ============================================ */
.panel-info-neutral {
  padding: 0.875rem 1rem;
  background: var(--surface-soft-bg);
  border: 1px solid var(--form-control-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: #495057;
}

.panel-info-neutral svg {
  color: #495057;
  flex-shrink: 0;
}

[data-theme="dark"] .panel-info-neutral,
[data-bs-theme="dark"] .panel-info-neutral {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #adb5bd;
}

[data-theme="dark"] .panel-info-neutral svg,
[data-bs-theme="dark"] .panel-info-neutral svg {
  color: #adb5bd;
}

/* ============================================
   Tax Hint Box (yellow warning style)
   ============================================ */
.panel-tax-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 100%);
  border: 1px solid #f4d03f;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: #856404;
  margin-bottom: 1.25rem;
}

.panel-tax-hint-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #d4a106;
}

.panel-tax-hint-icon svg {
  width: 100%;
  height: 100%;
}

.panel-tax-hint-content {
  flex: 1;
  line-height: 1.4;
}

.panel-tax-hint-content strong {
  color: #6c5300;
}

.panel-tax-hint-info {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 161, 6, 0.15);
  border: none;
  border-radius: var(--radius-circle);
  color: #d4a106;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-tax-hint-info:hover {
  background: rgba(212, 161, 6, 0.25);
  color: #856404;
}

.panel-tax-hint-info svg {
  width: 16px;
  height: 16px;
}

/* Dark Mode for Tax Hint */
[data-bs-theme="dark"] .panel-tax-hint,
[data-theme="dark"] .panel-tax-hint {
  background: linear-gradient(135deg, rgba(254, 249, 231, 0.1) 0%, rgba(254, 243, 205, 0.15) 100%);
  border-color: rgba(244, 208, 63, 0.4);
  color: #ffc107;
}

[data-bs-theme="dark"] .panel-tax-hint-content strong,
[data-theme="dark"] .panel-tax-hint-content strong {
  color: #ffe066;
}

[data-bs-theme="dark"] .panel-tax-hint-icon,
[data-theme="dark"] .panel-tax-hint-icon {
  color: #ffc107;
}

[data-bs-theme="dark"] .panel-tax-hint-info,
[data-theme="dark"] .panel-tax-hint-info {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

[data-bs-theme="dark"] .panel-tax-hint-info:hover,
[data-theme="dark"] .panel-tax-hint-info:hover {
  background: rgba(255, 193, 7, 0.25);
}

/* Strategy override note: shown when FP-Entnahmeplan auf Vergleichsrente
   angeglichen wird → die Strategie-Auswahl ist dann inaktiv. */
.panel-strategy-override-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
  background: #eef4ff;
  border: 1px solid #bcd3ff;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #1f4b8e;
}

.panel-strategy-override-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.panel-strategy-override-note strong {
  color: #15356a;
}

[data-bs-theme="dark"] .panel-strategy-override-note,
[data-theme="dark"] .panel-strategy-override-note {
  background: rgba(96, 153, 255, 0.12);
  border-color: rgba(96, 153, 255, 0.35);
  color: #9ec1ff;
}

[data-bs-theme="dark"] .panel-strategy-override-note strong,
[data-theme="dark"] .panel-strategy-override-note strong {
  color: #c7ddff;
}

/* ============================================
   Collapsible Hint (accordion-style, passive)
   ============================================ */
.panel-hint-collapse {
  border: 1px solid var(--form-control-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* „Wie berechnen wir die {Anlage}?"-Hinweisbox auf die Einschub-Linie + Breite der
   Block-Felder bringen. Die Felder liegen in .panel-section-body (padding-left:
   1.25rem); die Hinweisbox steht als Section-Geschwister bislang bündig links.
   margin-left schiebt die linke Kante auf die Feld-Einrückung, die rechte Kante
   bleibt → identische Breite wie das Eingabefeld darüber. */
.leibrente-hint-indent {
  margin-left: 1.25rem;
}

.panel-hint-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: #6c757d;
  transition: color 0.2s ease;
}

.panel-hint-collapse-toggle:hover {
  color: #495057;
}

.panel-hint-collapse-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
}

.panel-hint-collapse-toggle .hint-chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
}

.panel-hint-collapse-toggle[aria-expanded="true"] .hint-chevron {
  transform: rotate(180deg);
}

.panel-hint-collapse-body {
  padding: 0 0.85rem 0.7rem 2.15rem;
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.5;
}

.panel-hint-collapse-body p:last-child {
  margin-bottom: 0;
}

/* Dark Mode for Collapsible Hint */
[data-bs-theme="dark"] .panel-hint-collapse,
[data-theme="dark"] .panel-hint-collapse {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .panel-hint-collapse-toggle,
[data-theme="dark"] .panel-hint-collapse-toggle {
  color: #adb5bd;
}

[data-bs-theme="dark"] .panel-hint-collapse-toggle:hover,
[data-theme="dark"] .panel-hint-collapse-toggle:hover {
  color: #dee2e6;
}

[data-bs-theme="dark"] .panel-hint-collapse-body,
[data-theme="dark"] .panel-hint-collapse-body {
  color: #9ca3af;
}

/* ============================================
   Toggle Card (switch with label)
   ============================================ */
.panel-toggle-card {
  padding: 1rem 1.25rem;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-card-border);
  border-radius: var(--radius-md);
}

.panel-toggle-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-toggle-label {
  flex: 1;
}

.panel-toggle-switch {
  flex-shrink: 0;
}

/* Dark Mode Text Colors */
[data-bs-theme="dark"] .panel-hero-text h4,
[data-theme="dark"] .panel-hero-text h4,
[data-bs-theme="dark"] .panel-section-header,
[data-theme="dark"] .panel-section-header,
[data-bs-theme="dark"] .panel-slider-label,
[data-theme="dark"] .panel-slider-label,
[data-bs-theme="dark"] .panel-details-summary,
[data-theme="dark"] .panel-details-summary,
[data-bs-theme="dark"] .panel-strategy-title,
[data-theme="dark"] .panel-strategy-title,
[data-bs-theme="dark"] .panel-times-grid .fondswechsel-row label,
[data-theme="dark"] .panel-times-grid .fondswechsel-row label {
  color: #f8f9fa;
}

[data-bs-theme="dark"] .panel-strategy-desc,
[data-theme="dark"] .panel-strategy-desc,
[data-bs-theme="dark"] .panel-param-label,
[data-theme="dark"] .panel-param-label,
[data-bs-theme="dark"] .panel-footer-info small,
[data-theme="dark"] .panel-footer-info small {
  color: #adb5bd;
}

[data-bs-theme="dark"] .panel-footer-info strong,
[data-theme="dark"] .panel-footer-info strong {
  color: #f8f9fa;
}

/* TEST: KV-Modal-Header — Help-Button wandert in den Modal-Header,
   neben btn-close. .kv-modal-header-actions ist der Flex-Container
   fuer beide Buttons. Scoped, keine globale Auswirkung.
   Revert: diesen Block entfernen. */
#kvStatusModal .kv-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#kvStatusModal .kv-modal-header-actions .panel-help-btn {
  padding: 0;
}

/* TEST: #kvStatusModal Section-Icons als blaues Kaestchen — Designsprache-
   Match zur Sidebar (.main-side-icon, layout.css:392). Aussenkaestchen 2rem
   (32px), Icon-SVG 1rem (16px) — exakt wie Sidebar-Heading-Icon. BG
   var(--nav-pills-active-bg) Royal-Blau, Icon weiss. Hero-Icon (Markup eh
   raus) behaelt das alte Blau-Color-Override fuer Revert-Sicherheit.
   Scoped — andere Modals bleiben gruen mit nacktem 18px-Icon.
   Revert: diesen Block auf alten color-only-Override zurueck. */
/* TEST: alter 1rem-svg-Block entfernt — Markup auf Wrapper-Pattern umgebaut
   (Sidebar-Style), die spaetere svg-Regel weiter unten (0.875rem +
   stroke-width:1.5) ist jetzt der single source-of-truth fuer die SVG-Groesse.
   Revert: width/height 1rem hier zurueck, spaeteren Block ggf. anpassen. */
#kvStatusModal .panel-hero-icon {
  color: var(--nav-tabs-link-active-color, #0d6efd) !important;
}

/* TEST: Outer-Karte (.panel-wrapper) UND innere Param-Card-Borders entfaellt
   — Sections + Felder liegen direkt auf dem grauen Modal-Body
   (--surface-soft-bg via globalem .modal-body). Transparent, kein Border,
   kein Radius, kein Overflow-Clip. Modal-Header + Footer bleiben weiss
   via .modal-content-Default-BG.
   Hairline-Trenner zwischen Sections bleiben (border-top --panel-divider) —
   dezenter Look auf grauem Grund.
   Revert: panel-wrapper border + radius + bg + overflow:hidden zurueck UND
   panel-param-card background/border zurueck (siehe Block dafuer). */
#kvStatusModal .panel-wrapper {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#kvStatusModal .panel-section {
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}
#kvStatusModal .panel-section:first-of-type {
  border-top: none;
}
#kvStatusModal .panel-param-card {
  background: transparent;
  border: 0;
  padding: 0;
}

/* TEST: Footer-Info-Zeile (.panel-footer) bekommt dieselbe horizontale
   Innenraumkante wie die Sections (1.25rem links/rechts) — damit Info-Icon
   und Text buendig unter der Section-Spalte stehen statt links rauszuhaengen.
   padding-top/-bottom 1rem fuer vertikalen Atemraum. Border-top stays.
   Revert: padding zurueck auf nur padding-top 1rem (Global-Default). */
#kvStatusModal .panel-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}

/* TEST: 36px-Icon-Kaestchen vor den Eingabefeldern (KV/PV mtl., PKV-Beitrag
   etc.) im KV-Modal raus — Label und Input sitzen bündig links ohne
   Icon-Spalte. .panel-param-card-Padding ist oben auf 0 gesetzt, sodass
   .panel-param-content direkt an der Section-Innenkante anliegt.
   Andere Modals behalten ihre Icons.
   Revert: display:none entfernen. */
#kvStatusModal .panel-param-icon {
  display: none;
}

/* TEST: Reset-Button (.btn.btn-caution.btn-sm im Versicherungsstatus-Slot)
   auf Toggle-Box-Hoehe (--sidebar-element-height = 45px), damit er buendig
   neben der .segmented-control sitzt. Border-Radius var(--radius-md) hat
   .btn.btn-caution global schon (buttons.css:668), kein Doppel-Set.
   Skin (Idle grau, Hover orange) bleibt.
   Revert: diesen Block entfernen. */
#kvStatusModal .btn.btn-caution {
  min-height: var(--sidebar-element-height, 45px);
}


/* TEST: KV-Modal-Eingabefelder auf Sidebar-Standard-Hoehe (45px) und
   -Radius (12px) angeglichen. Globaler .panel-param-content .form-control-
   Override (modal_panels.css:401) reduziert padding/font-size — wir
   ueberschreiben hier scoped fuer das KV-Modal alle vier Werte (min-height,
   border-radius, padding, font-size) auf Sidebar-Defaults.
   .bg-left-col .form-control (forms.css:292) als Vorlage 1:1 nachgebaut
   plus Bootstrap-Default-Padding (10px) und Default-Font (1rem) explizit.
   Revert: diesen Block entfernen → KV-Felder fallen zurueck auf den
   gedrungenen .panel-param-content-Modal-Stil. */
#kvStatusModal .panel-param-content .form-control {
  min-height: var(--sidebar-element-height, 45px);
  border-radius: var(--radius-md, 12px);
  padding: 10px;
  font-size: 1rem;
}

/* TEST: Vertikaler Atem zwischen panel-param-cards in derselben Sektion
   (z.B. PKV-Ansicht mit Steigerung / Netto-Beitrag / steuerlich absetzbar).
   Nachdem .panel-param-card-Padding auf 0 gesetzt wurde (transparent-Edit),
   stehen Karten ohne expliziten Trenner und kleben zusammen. 1rem Top-
   Margin auf JEDE Karte AUSSER der ersten gibt den Abstand zurueck —
   identisch zu Sidebar-<br/>-Spacing.
   Plus Label-zu-Input-Abstand auf 0 (statt Modal-Default 4px) — 1:1 Match
   zu Sidebar-Label (inline-block, margin-bottom:0).
   Revert: beide Bloecke entfernen. */
#kvStatusModal .panel-param-card + .panel-param-card {
  margin-top: 1rem;
}
#kvStatusModal .panel-param-label {
  margin-bottom: 0;
}

/* TEST: Section-Heading-Text ("Versicherungsstatus" etc.) auf Sidebar-Typo —
   font-weight 400 statt 600 (matched .main-side-title in beratung.html, das
   im p-Default-Weight rendert), color var(--app-text-color) statt
   --bs-body-color (= Fonder-Navy #0b1f44 light statt Bootstrap-Default
   #212529). font-size 0.9rem bleibt — laut User ok.
   Skoped — globale .panel-section-header bleibt fuer 9 andere Modals
   bolder + Bootstrap-Color.
   Revert: diesen Block entfernen → zurueck zu 600/--bs-body-color. */
#kvStatusModal .panel-section-header {
  font-weight: 400;
  color: var(--app-text-color);
}

/* TEST: Feld-Labels ("PKV-Beitrag mtl." etc.) auf Sidebar-Typo — font-weight
   400 statt 500 (matched .form-group label in forms.css:63-68), color
   var(--form-check-label-color) exakt der Sidebar-Token (statt
   --bs-secondary-color — visuell nahezu identisch in Light, formal
   anderer Variablen-Pfad).
   Skoped — globale .panel-param-label bleibt in den 9 anderen Modals 500-Medium.
   Revert: diesen Block entfernen → zurueck zu 500/--bs-secondary-color. */
#kvStatusModal .panel-param-label {
  font-weight: 400;
  color: var(--form-check-label-color);
}

/* TEST: Toggle-Label ("Pflichtversichert KVdR") auf Sidebar-Typo — color
   var(--app-text-color) (Fonder-Navy) statt globalem
   --form-check-label-color (#6c757d Grau). Matched die Sidebar-Toggle-
   Labels (Verheiratet/Kirchensteuer/Soli), die als <p> ohne Klasse die
   Body-Text-Color erben.
   SCOPING PFLICHT — .form-check-label ist Bootstrap-Standard, projektweit
   verwendet. Ein globaler Color-Override wuerde Sidebar-Switches, Profil-
   Editor, alle Modals mit form-check treffen.
   font-family/-size/-weight bleiben unangetastet (matchen schon: inherit
   System-Stack, body-size, label-Default 400).
   Revert: diesen Block entfernen → KVdR-Label wieder Grau. */
#kvStatusModal .form-check-label {
  color: var(--app-text-color);
}

/* Readonly-Felder (.kv-input-locked + .kv-readonly-control) werden generisch
   in forms.css gestylt (flacher grauer "gestempelt"-Look ohne Float-Halo).
   Modal-scoped Overrides hier sind nicht mehr nötig. */

/* ============================================================================
   #legalPensionModal — Tag-9-Facelift (Bündel B)
   Spiegelt den #kvStatusModal-Block: blaue Section-Icons, Card-Fusion,
   Sidebar-Höhe für Felder, .btn-caution auf 45px, .btn-cancel im Footer.
   Alles scoped auf #legalPensionModal — andere noch-grüne Modals
   (existingPensionsModal, rebalancing_input_modal, ueberschuss…, av_depot…)
   bleiben mit globalem --modal-accent: #10b981.
   Revert: diesen ganzen Block entfernen, Markup-Änderungen in av_modals.html
   zurückrollen.
   ============================================================================ */
#legalPensionModal .legal-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#legalPensionModal .legal-modal-header-actions .panel-help-btn {
  padding: 0;
}

/* Section-Icons als blaues Kästchen — Designsprache-Match zu .main-side-icon. */
/* Card-Fusion: panel-wrapper transparent, Sections direkt auf grauem Modal-Body,
   Hairline-Trenner zwischen Sections. */
#legalPensionModal .panel-wrapper {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#legalPensionModal .panel-section {
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}
#legalPensionModal .panel-section:first-of-type {
  border-top: none;
}
#legalPensionModal .panel-param-card {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Footer-Info konsistent indent. */
#legalPensionModal .panel-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}

/* Param-Card-Icons ($-Sign, Trend, Bar-Chart, Calendar) raus — Label + Feld
   bündig links, wie im KV-Modal. */
#legalPensionModal .panel-param-icon {
  display: none;
}

/* Reset-Button (.btn-caution.btn-sm im Modus-Slot) auf Toggle-Box-Höhe (45px). */
#legalPensionModal .btn.btn-caution {
  min-height: var(--sidebar-element-height, 45px);
}

/* Felder auf Sidebar-Standard-Höhe + Radius + Padding/Font, wie im KV-Modal. */
#legalPensionModal .panel-param-content .form-control {
  min-height: var(--sidebar-element-height, 45px);
  border-radius: var(--radius-md, 12px);
  padding: 10px;
  font-size: 1rem;
}

/* Atem zwischen panel-param-cards in derselben Sektion. */
#legalPensionModal .panel-param-card + .panel-param-card {
  margin-top: 1rem;
}
#legalPensionModal .panel-param-label {
  margin-bottom: 0;
}

/* Sidebar-Typo für Section-Heading + Feld-Labels (siehe KV-Modal-Kommentar). */
#legalPensionModal .panel-section-header {
  font-weight: 400;
  color: var(--app-text-color);
}
#legalPensionModal .panel-param-label {
  font-weight: 400;
  color: var(--form-check-label-color);
}

/* ============================================================================
   #existingPensionsModal — Tag-9-Facelift (Bündel D)
   Spiegelt den #kvStatusModal-Block (Header-Actions, blaue Section-Icons,
   Card-Fusion mit Hairline-Trennern). Plus: eigene Summenzeile-Komponente
   .existing-pensions-summary (Ergebniszeile mit =-Chip + groß-fettem Wert,
   analog Versorgungslücke-Tfoot).
   Alles scoped auf #existingPensionsModal — andere noch-grüne Modals bleiben
   grün, weil globale --modal-accent unverändert ist. Die Eingabe-Tabelle
   wird vom globalen .table-Skin gestylt (Etappe 1) und hier nicht angefasst.
   Revert: diesen ganzen Block entfernen + Markup-Änderungen zurückrollen.
   ============================================================================ */
#existingPensionsModal .existing-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#existingPensionsModal .existing-modal-header-actions .panel-help-btn {
  padding: 0;
}

/* Section-Icons als blaues Kästchen — Designsprache-Match. */
/* Card-Fusion: panel-wrapper transparent, Sections direkt auf grauem Modal-Body,
   Hairline-Trenner zwischen Sections. */
#existingPensionsModal .panel-wrapper {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#existingPensionsModal .panel-section {
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}
#existingPensionsModal .panel-section:first-of-type {
  border-top: none;
}

/* Footer-Info konsistent indent. */
#existingPensionsModal .panel-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-divider);
}

/* Sidebar-Typo für Section-Heading. */
#existingPensionsModal .panel-section-header {
  font-weight: 400;
  color: var(--app-text-color);
}

/* TEST: Bündel C6 — Tabellen-Wrapper auf 12px Radius (matched die innere
   .table (tables.css:11, var(--card-radius)) und die Summenzeile darunter
   (Z.1349, var(--radius-md))). Wrapper-Klasse .border.rounded wurde im
   Template (av_modals.html:447) entfernt, damit nur die innere .table-Border
   sichtbar bleibt (single source) — der Radius muss hier neu vom Wrapper
   gesetzt werden, damit der .surface-floating-Schatten an der gleichen
   abgerundeten Geometrie rendert wie die innere Table. Modal-scoped, damit
   andere .table-responsive-Stellen (z.B. profileModal:813) unberuehrt
   bleiben. Revert: diese Regel entfernen + Template-.border.rounded
   wiederherstellen. */
#existingPensionsModal .table-responsive {
  border-radius: var(--radius-md, 12px);
}

/* ── Summenzeile (Ergebniszeile, analog .versorgung-total) ──
   Eigene Komponente .existing-pensions-summary statt .panel-param-card —
   klare Ergebniszeilen-Optik mit kräftiger Border, =-Chip links, Label
   normal, Wert groß+fett rechts. */
/* TEST: Summenzeile auf weißen Hintergrund + .sign-chip explizit zentriert
   (align-self:center). padding-bottom kommt jetzt aus der globalen
   .sign-chip--equals-Regel (2px für korrekte =-Glyph-Mitte) — der frühere
   padding-bottom:0-Override war zu aggressiv (zog den Glyph an die
   geometrische Mitte, was optisch zu tief wirkte).
   Revert: background transparent + padding-bottom:0 zurück. */
#existingPensionsModal .existing-pensions-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--form-control-border);
  border-radius: var(--radius-md, 12px);
  background: var(--form-control-bg, #ffffff);
}

#existingPensionsModal .existing-pensions-summary > .sign-chip {
  align-self: center;
}

#existingPensionsModal .existing-pensions-summary__label {
  flex: 1 1 auto;
  font-weight: 400;
  font-size: 1rem;
  color: var(--app-text-color);
}

#existingPensionsModal .existing-pensions-summary__value {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--app-text-color);
  font-variant-numeric: tabular-nums;
}

/* PFOF-Switch (.segmented-control--no-settings) an den Form-Control-Radius
   angleichen: im #det_dep_modal sind .form-control (8px) die Mehrheit, der
   Switch soll dieselbe Aussenkante haben. Nur hier gescopt — die globale
   .segmented-control (switches.css) bleibt fuer KV-Modal/pers_input bei 12px. */
#det_dep_modal .segmented-control {
  border-radius: var(--form-control-radius, 8px);
}

/* Sichtbarer Card-Skin fuer die Phasen-Cards im Depot-Modal: WEISSE Card
   (--form-control-bg, wie .info-card) + Float-Halo (--surface-shadow-soft,
   in Dark = none). Border/Radius/Padding bleiben aus der Basis-.panel-param-card.
   Doppel-Float der inneren form-selects wird per .surface-floating am Card-
   Wrapper unterdrueckt (Template). Nur hier gescopt — kvStatus/legalPension
   machen die param-card bewusst transparent (eigene ID-Overrides). */
#det_dep_modal .panel-param-card {
  background: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  box-shadow: var(--surface-shadow-soft);
}

/* Klammer-Sublabel im Phasenheader vom text-uppercase des Containers ausnehmen:
   "ANSPARPHASE (vor Rentenbeginn)" — Hauptlabel uppercase, Klammer normal. */
.phase-header-sub {
  text-transform: none;
}

/* #expert_modal: param-cards in Accordion-Sections haben kein Icon mehr →
   Card-Padding links/rechts entfällt, damit die Felder auf derselben
   Einschub-Kante wie Inflation-Feld und Anzahl-Slider stehen.
   Stack ohne Fix: panel-details-content(1rem) + panel-section-body(1.25rem)
   + card(1rem) = 3.25rem. Mit Fix: 1rem + 1.25rem + 0 = 2.25rem = gleich
   wie Nicht-Accordion (section-body 1.25rem + card 1rem = 2.25rem).
   Revert: diesen Block entfernen. */
#expert_modal .panel-details-content .panel-param-card {
  padding-left: 0;
  padding-right: 0;
}

/* #expert_modal: Accordion-Content linksbündig auf dieselbe Kante wie die
   Nicht-Accordion-Sektionen ("Wichtige Annahmen"/"Besteuerung"). Ohne diesen
   Override schiebt panel-details-content { padding: 1rem } die zwei-Felder-
   Zeilen (§11g, .row > .col-md-6) zusätzlich nach rechts ein.
   padding-top/bottom bleiben unberührt. Revert: diesen Block entfernen. */
#expert_modal .panel-details-content {
  padding-left: 0;
  padding-right: 0;
}

/* #expert_modal: Accordion-Header (summary) auf dieselbe Kante wie die
   statischen Section-Header ("Wichtige Annahmen"). .panel-details-summary
   { padding: 0.875rem 1rem } schiebt das blaue Icon sonst 16px nach rechts
   (Icon-left 521 statt 505). Nur links/rechts auf 0 — padding-top/bottom
   (0.875rem) + Chevron rechts bleiben. Revert: diesen Block entfernen. */
#expert_modal .panel-details-summary {
  padding-left: 0;
  padding-right: 0;
}

/* ── Leibrente-Block: Rentenbezugsform (kompakter Unterpunkt) + aufklappbare
   Erklärung. Funktioniert in Light & Dark (nur Tokens, keine festen Farben). */

/* Kompakte Segmented-Control-Variante: schmaler + kleinere Schrift, damit die
   Rentenbezugsform als Unterpunkt unter „Berechnen" sichtbar wird, nicht so
   dominant wie Berechnungsmodus/Leibrente-Schalter. */
.segmented-control--sm {
  max-width: 280px;
}
.segmented-control--sm .segmented-control__option {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}

/* Aufklappbare „Wie berechnen wir die Leibrente?"-Erklärung: Heading als
   ruhiger Toggle (Body-Farbe), Hover/Active in Fonder-Blau. */
.leibrente-explain-toggle {
  color: var(--bs-body-color, inherit);
}
.leibrente-explain-toggle:hover,
.leibrente-explain-toggle:focus-visible,
.leibrente-explain-toggle[aria-expanded="true"] {
  color: var(--nav-tabs-link-active-color, #0d6efd);
}
.leibrente-explain-chevron {
  transition: transform 0.2s ease;
}
.leibrente-explain-toggle[aria-expanded="true"] .leibrente-explain-chevron {
  transform: rotate(90deg);
}

/* Erklärung als schlanker, breitgezogener Unterpunkt — keine Box (wie das
   Rentenbezugsform-Label), Text läuft über die volle Breite (nicht hoch
   gestapelt). */
.leibrente-explain {
  width: 100%;
}

/* #fond_auswahl_modal: Phase-Cards (panel-param-card surface-floating) brauchen
   eine explizite Border, weil die globale .panel-param-card-Regel
   `border: 1px solid var(--panel-card-border)` hier nicht greift —
   --panel-card-border kaskadiert über --modal-card-border auf --bs-border-color,
   das in diesem Bundle als SCSS-Variable kompiliert ist (kein CSS Custom Property
   auf :root). Da var() ein leeres Property referenziert, wird die gesamte
   Deklaration als guaranteed-invalid behandelt und fällt auf border-style:none
   zurück. Fix: direkter Wert mit --form-control-border, das nachweislich
   aufgelöst wird (#d0d0d6 Light / abgeleitet Dark). Revert: diesen Block entfernen
   + globale Variable-Kette reparieren (--modal-card-border auf --form-control-border
   umstellen). */
#fond_auswahl_modal .panel-param-card.surface-floating {
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
}
[data-theme="dark"] #fond_auswahl_modal .panel-param-card.surface-floating {
  border-color: var(--form-control-border, rgba(255, 255, 255, 0.18));
}

/* === ./css/core/command_palette.css === */
/* ============================================================
 * Command Palette (Cmd+K / Ctrl+K)
 * Globale Suche für Navigation, Tools & Aktionen
 *
 * Nutzt die App-eigenen CSS-Variablen aus light.css / dark.css
 * damit sich die Palette automatisch dem Theme anpasst.
 * ============================================================ */

/* ── Backdrop ─────────────────────────────────────── */
.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.55));
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.cmd-palette-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Main container ───────────────────────────────── */
.cmd-palette {
  position: fixed;
  top: min(20vh, 140px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  width: min(560px, calc(100vw - 2rem));
  max-height: min(440px, 60vh);
  background: var(--modal-bg, #fff);
  border: 1px solid var(--modal-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--modal-radius, 16px);
  box-shadow: var(--modal-shadow, 0 16px 48px rgba(0, 0, 0, 0.2));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  overflow: hidden;
  color: var(--modal-body-color, inherit);
}
.cmd-palette.active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* ── Search header ────────────────────────────────── */
.cmd-palette-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--modal-header-bg, transparent);
  border-bottom: 1px solid var(--modal-divider-color, rgba(0, 0, 0, 0.08));
}
.cmd-palette-header svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--body-text-color, #6c757d);
  opacity: 0.55;
}
.cmd-palette-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: var(--heading-color, #212529);
  padding: 0;
}
.cmd-palette-input::placeholder {
  color: var(--body-text-color, #6c757d);
  opacity: 0.5;
}
.cmd-palette-kbd {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--form-control-bg, #f0f0f0);
  color: var(--body-text-color, #6c757d);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.1));
  white-space: nowrap;
  font-family: inherit;
}

/* ── Results list ─────────────────────────────────── */
.cmd-palette-results {
  overflow-y: auto;
  padding: 0.5rem;
  flex: 1;
  min-height: 0;
}
/* Subtle scrollbar */
.cmd-palette-results::-webkit-scrollbar { width: 5px; }
.cmd-palette-results::-webkit-scrollbar-track { background: transparent; }
.cmd-palette-results::-webkit-scrollbar-thumb {
  background: var(--form-control-border, rgba(0,0,0,0.12));
  border-radius: 3px;
}

.cmd-palette-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--body-text-color, #6c757d);
  opacity: 0.6;
  padding: 0.5rem 0.75rem 0.25rem;
  user-select: none;
}

.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.08s;
  text-decoration: none;
  color: var(--heading-color, #212529);
}
.cmd-palette-item:hover,
.cmd-palette-item.active {
  background: var(--table-row-hover-bg, rgba(13, 110, 253, 0.1));
  color: var(--heading-color, #212529);
  text-decoration: none;
}
.cmd-palette-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--body-text-color, #6c757d);
  opacity: 0.6;
}
.cmd-palette-item.active .cmd-palette-item-icon {
  color: var(--nav-link-hover-color, #1767ff);
  opacity: 1;
}
.cmd-palette-item-text {
  flex: 1;
  min-width: 0;
}
.cmd-palette-item-label {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-item-desc {
  font-size: 0.72rem;
  color: var(--body-text-color, #6c757d);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-item-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--form-control-bg, #f0f0f0);
  color: var(--body-text-color, #6c757d);
  flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────── */
.cmd-palette-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--body-text-color, #6c757d);
  opacity: 0.65;
  font-size: 0.85rem;
}

/* ── Footer hints ─────────────────────────────────── */
.cmd-palette-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--modal-divider-color, rgba(0, 0, 0, 0.08));
  font-size: 0.7rem;
  color: var(--body-text-color, #6c757d);
  opacity: 0.6;
}
.cmd-palette-footer kbd {
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--form-control-bg, #f0f0f0);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.1));
  font-family: inherit;
}

/* ── Navbar trigger button ────────────────────────── */
.cmd-palette-trigger {
  /* Stil analog Form-Control / btn-topbar-toggle: weiss + dezente
     form-control-border + radius-md. */
  background: var(--white-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-md, 12px);
  color: var(--form-control-color, var(--nav-link-color, rgba(0, 0, 0, 0.7)));
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: box-shadow 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cmd-palette-trigger:hover,
.cmd-palette-trigger:focus,
.cmd-palette-trigger:focus-visible {
  /* Hover-Glow analog btn-topbar-toggle — innen bleibt weiss. */
  outline: none;
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  color: var(--form-control-color, inherit);
  box-shadow: var(--hover-glow-shadow);
}
.cmd-palette-trigger svg {
  width: 14px;
  height: 14px;
}

/* ── Highlight matched text ───────────────────────── */
.cmd-palette-item-label mark {
  background: transparent;
  color: var(--nav-link-hover-color, #1767ff);
  font-weight: 700;
  padding: 0;
}

/* ── Dark Mode: Trigger-Button + Kbd-Hints ─────────
   Trigger nutzt im Light-Mode --white-bg (#ffffff) — im Dark sticht das
   wie eine weisse Pille raus. Hier explizit auf Dark-Surface mappen,
   passend zu form-control im Dark (#1c2533). */
[data-theme="dark"] .cmd-palette-trigger {
  background: #1c2533;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8f9fa;
}
[data-theme="dark"] .cmd-palette-trigger:hover,
[data-theme="dark"] .cmd-palette-trigger:focus,
[data-theme="dark"] .cmd-palette-trigger:focus-visible {
  background: #1c2533;
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8f9fa;
}
[data-theme="dark"] .cmd-palette-trigger .cmd-palette-trigger-kbd,
[data-theme="dark"] .cmd-palette-trigger kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #adb5bd;
}

/* ── Mobile adjustments ───────────────────────────── */
@media (max-width: 576px) {
  .cmd-palette {
    top: 1rem;
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 2rem);
    border-radius: 10px;
  }
}

/* === ./css/core/changelog_popup.css === */
/* changelog_popup.css — "Neu in fonder" Teaser, unten LINKS (kollidiert nicht
   mit dem Support-FAB + Tour-Button unten rechts). Erscheint zufällig, max 2x
   pro Nutzer (Logik in partials/_changelog_popup.html). */

.news-teaser {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1056; /* über Inhalt, unter Modals (1060) */
  max-width: 330px;
  width: calc(100vw - 2.5rem);
  border-radius: 0.85rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  background: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 0.85rem 2.1rem 0.85rem 0.95rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #212529;
  cursor: pointer;
  animation: news-teaser-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.news-teaser.news-teaser-closing {
  opacity: 0;
  transform: translateY(12px);
}

@keyframes news-teaser-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.news-teaser-tag {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 0.2rem;
}

.news-teaser-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.news-teaser-desc {
  color: #495057;
}

.news-teaser-cta {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1767ff;
}

.news-teaser-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0.1rem 0.35rem;
  cursor: pointer;
  color: #adb5bd;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 0.3rem;
  transition: background 0.15s, color 0.15s;
}
.news-teaser-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #343a40;
}

/* ─── Dark Mode ─── */
[data-theme="dark"] .news-teaser {
  background: #1e2228;
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  color: #f8f9fa;
}
[data-theme="dark"] .news-teaser-tag { color: #fbbf24; }
[data-theme="dark"] .news-teaser-desc { color: #c2c9d2; }
[data-theme="dark"] .news-teaser-cta { color: #5c98ff; }
[data-theme="dark"] .news-teaser-close { color: #adb5bd; }
[data-theme="dark"] .news-teaser-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8f9fa;
}

/* Mobile: volle Breite unten links */
@media (max-width: 576px) {
  .news-teaser {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: calc(100vw - 1.5rem);
    width: auto;
  }
}

/* ─── Webinar-Ankündigung (Cutover) ───
   Gleiche Karte wie der Teaser, aber blauer Akzent + deutlicher CTA-Button.
   Nicht klick-zum-schließen (nur X / CTA). */
.news-teaser--webinar {
  cursor: default;
  max-width: 350px;
  border-color: rgba(23, 103, 255, 0.45);
}
.news-teaser--webinar .news-teaser-tag {
  color: #1767ff;
}

.news-teaser-line {
  margin: 0 0 0.3rem 0;
  /* globale p-Farbregel neutralisieren — sonst dunkelblauer Text auf dunkler
     Karte im Dark Mode (Farbe kommt von .news-teaser-desc). */
  color: inherit;
}
.news-teaser-line:last-child {
  margin-bottom: 0;
}

.news-teaser-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 0.95rem;
  background: #1767ff;
  color: #ffffff !important;
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.55rem;
  transition: background 0.15s ease, transform 0.1s ease;
}
.news-teaser-btn:hover {
  background: #0f54d6;
  color: #ffffff !important;
}
.news-teaser-btn:active {
  transform: translateY(1px);
}

/* ─── Webinar Dark Mode ─── */
[data-theme="dark"] .news-teaser--webinar {
  border-color: rgba(92, 152, 255, 0.5);
}
[data-theme="dark"] .news-teaser--webinar .news-teaser-tag {
  color: #5c98ff;
}
[data-theme="dark"] .news-teaser-btn {
  background: #2f6bff;
  color: #ffffff !important;
}
[data-theme="dark"] .news-teaser-btn:hover {
  background: #1f5cf0;
  color: #ffffff !important;
}

/* ─── Zoom-Hinweis "Alles etwas größer oder kleiner?" ───
   Einmaliger Systemhinweis zur automatischen Größenanpassung (Logik in
   partials/_zoom_hinweis.html). Gleiche Karte wie Webinar (Button, kein
   Klick-zum-Schließen), neutral-blauer Akzent = Information, kein Angebot. */
.news-teaser--zoom {
  cursor: default;
  max-width: 350px;
  border-color: rgba(23, 103, 255, 0.4);
}
.news-teaser--zoom .news-teaser-tag {
  color: #1767ff;
}

/* Tastenkürzel-Zeilen: leicht abgesetzt, damit sie sich vom Fließtext lösen. */
.news-teaser-shortcut {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: inherit;
}
.news-teaser-shortcut + .news-teaser-shortcut {
  margin-top: 0.1rem;
}
.news-teaser-shortcut strong {
  font-weight: 600;
}
.news-teaser-shortcut kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  margin: 0 0.05rem;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #212529;
  background: #f1f3f5;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.3rem;
  box-shadow: none;
}

[data-theme="dark"] .news-teaser--zoom {
  border-color: rgba(92, 152, 255, 0.5);
}
[data-theme="dark"] .news-teaser--zoom .news-teaser-tag {
  color: #5c98ff;
}
[data-theme="dark"] .news-teaser-shortcut kbd {
  color: #f8f9fa;
  background: #2a2f36;
  border-color: rgba(255, 255, 255, 0.16);
}

/* ─── Aktivierungs-Teaser "Beispiel-Vergleich ansehen" ───
   Gleiche Karte wie Webinar (CTA-Button, kein Klick-zum-Schließen),
   grüner Akzent = "los geht's". Dark-Mode-Regeln direkt darunter. */
.news-teaser--activation {
  cursor: default;
  max-width: 350px;
  border-color: rgba(22, 163, 74, 0.45);
}
.news-teaser--activation .news-teaser-tag {
  color: #16a34a;
}
.news-teaser--activation .news-teaser-btn {
  background: #16a34a;
}
.news-teaser--activation .news-teaser-btn:hover {
  background: #12833c;
}
[data-theme="dark"] .news-teaser--activation {
  border-color: rgba(74, 222, 128, 0.5);
}
[data-theme="dark"] .news-teaser--activation .news-teaser-tag {
  color: #4ade80;
}
[data-theme="dark"] .news-teaser--activation .news-teaser-btn {
  background: #15803d;
}
[data-theme="dark"] .news-teaser--activation .news-teaser-btn:hover {
  background: #166534;
}

/* ─── Produkt-Teaser (Jahresabo / Masterclass / Teams) ───
   Gleiche Karte wie der Aktivierungs-Teaser, aber im Marken-Blau statt
   Gruen: das ist ein Angebot, kein Schnellstart. */
.news-teaser--product {
  cursor: default;
  max-width: 360px;
  border-color: rgba(37, 99, 235, 0.45);
}
.news-teaser--product .news-teaser-tag {
  color: #2563eb;
}
.news-teaser--product .news-teaser-btn {
  background: #2563eb;
}
.news-teaser--product .news-teaser-btn:hover {
  background: #1d4ed8;
}
.news-teaser--product .news-teaser-optout {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #6c757d;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
[data-theme="dark"] .news-teaser--product {
  border-color: rgba(96, 165, 250, 0.5);
}
[data-theme="dark"] .news-teaser--product .news-teaser-tag {
  color: #60a5fa;
}
[data-theme="dark"] .news-teaser--product .news-teaser-btn {
  background: #1d4ed8;
}
[data-theme="dark"] .news-teaser--product .news-teaser-btn:hover {
  background: #1e40af;
}
[data-theme="dark"] .news-teaser--product .news-teaser-optout {
  color: #adb5bd;
}

/* ─── Produkt-Teaser: Verkaufs-Optik ───────────────────────────────
   Befund Marius 27.08.2026: "viel zu trist". Die Karte sah aus wie ein
   Systemhinweis, obwohl sie ein Angebot ist. Geaendert wird die Hierarchie,
   nicht die Menge: die Ersparnis wird zur groessten Zahl auf der Karte, der
   Preisvergleich wird sichtbar statt behauptet, und der Rahmen bekommt einen
   Akzent, der ihn vom weissen Hintergrund loest.
   Bewusst NICHT: blinkende Effekte, Countdown, Rot. Das Publikum sind
   Finanzberater, die selbst verkaufen — Marktschreierei wirkt bei ihnen
   gegen das Produkt. */
.news-teaser--product {
  padding: 0;
  overflow: hidden;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 12px 36px -8px rgba(37, 99, 235, 0.32),
              0 4px 12px -4px rgba(15, 23, 42, 0.12);
}

/* Kopf mit Farbverlauf: traegt Plakette, Produktname und Versprechen. */
.news-teaser--product .news-teaser-kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 2.1rem 0.8rem 0.95rem;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
  color: #ffffff;
}

.news-teaser--product .news-teaser-plakette {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 0.35rem 0.4rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.news-teaser--product .news-teaser-plakette-zahl {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.news-teaser--product .news-teaser-plakette-hinweis {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.1rem;
}

.news-teaser--product .news-teaser-kopftext { min-width: 0; }
.news-teaser--product .news-teaser-tag {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.12rem;
}
.news-teaser--product .news-teaser-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0;
}

/* Preiszeile: alter Preis durchgestrichen, neuer gross daneben. */
.news-teaser--product .news-teaser-preis {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem 0;
}
.news-teaser--product .news-teaser-preis-alt {
  font-size: 0.85rem;
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.news-teaser--product .news-teaser-preis-neu {
  font-size: 1.15rem;
  font-weight: 800;
  color: #16a34a;
  letter-spacing: -0.01em;
}
.news-teaser--product .news-teaser-preis-hinweis {
  font-size: 0.75rem;
  color: #64748b;
}

.news-teaser--product .news-teaser-desc { padding: 0.5rem 0.95rem 0; }
.news-teaser--product .news-teaser-btn {
  display: block;
  margin: 0.8rem 0.95rem 0;
  padding: 0.6rem 0.95rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
}
.news-teaser--product .news-teaser-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.news-teaser--product .news-teaser-optout {
  margin: 0.55rem 0.95rem 0.85rem;
}
.news-teaser--product .news-teaser-close {
  color: rgba(255, 255, 255, 0.72);
  z-index: 1;
}
.news-teaser--product .news-teaser-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ─── Dark Mode ─── */
[data-theme="dark"] .news-teaser--product {
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(96, 165, 250, 0.12);
}
[data-theme="dark"] .news-teaser--product .news-teaser-kopf {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 55%, #172554 100%);
}
[data-theme="dark"] .news-teaser--product .news-teaser-preis-alt { color: #64748b; }
[data-theme="dark"] .news-teaser--product .news-teaser-preis-neu { color: #4ade80; }
[data-theme="dark"] .news-teaser--product .news-teaser-preis-hinweis { color: #94a3b8; }
[data-theme="dark"] .news-teaser--product .news-teaser-btn {
  background: linear-gradient(135deg, #2f6bff, #1d4ed8);
}
[data-theme="dark"] .news-teaser--product .news-teaser-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* Empfehlungs-Moment (partials/_referral_moment.html): gleiche Position wie der
   News-Teaser, aber eine Karte mit Knoepfen, die bleibt, bis der Makler entscheidet. */
.news-teaser--empfehlung {
  cursor: default;
  border-color: rgba(23, 103, 255, 0.4);
  padding-right: 0.95rem;
  max-width: 360px;
}
.news-teaser--empfehlung .news-teaser-tag { color: #1767ff; }
.news-teaser--empfehlung .news-teaser-title { padding-right: 1.2rem; }
.rm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.rm-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid #cfd6e1;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rm-btn:hover { background: #f1f5fb; border-color: #9fb3d1; color: #1f2937; text-decoration: none; }
.rm-btn--primary { background: #1767ff; border-color: #1767ff; color: #ffffff; }
.rm-btn--primary:hover { background: #0f56db; border-color: #0f56db; color: #ffffff; }
.rm-never {
  margin-top: 0.55rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.74rem;
  color: #8a94a6;
  text-decoration: underline;
  cursor: pointer;
}
.rm-never:hover { color: #495057; }
[data-theme="dark"] .news-teaser--empfehlung { border-color: rgba(127, 176, 255, 0.45); }
[data-theme="dark"] .news-teaser--empfehlung .news-teaser-tag { color: #7fb0ff; }
[data-theme="dark"] .rm-btn { background: #1f2530; border-color: #3a4454; color: #e6e9ef; }
[data-theme="dark"] .rm-btn:hover { background: #2a3140; color: #ffffff; }
[data-theme="dark"] .rm-btn--primary { background: #1767ff; border-color: #1767ff; color: #ffffff; }
[data-theme="dark"] .rm-never { color: #9aa4b5; }

/* === ./css/core/hidden_feature_teaser.css === */
/* hidden_feature_teaser.css — "Wusstest du, dass fonder das kann?"
   Teaser unten LINKS (gleiche Position/Grundoptik wie .news-teaser), aber mit
   stummem Clip in Endlosschleife statt reinem Text: versteckte Funktionen
   lassen sich in zwei Saetzen nicht erklaeren, in fuenf Sekunden Bild schon.
   Logik: partials/_hidden_feature_teaser.html, Inhalte: website/hidden_features.py.
   Violetter Akzent — Amber gehoert "Neu in fonder", Blau dem Webinar/CTA. */

.hf-teaser {
  padding: 0 0 0.9rem 0;          /* Clip sitzt randlos oben in der Karte */
  max-width: 360px;
  border-color: rgba(109, 40, 217, 0.4);
  overflow: hidden;
}
.hf-teaser .news-teaser-close {
  /* Der Schliesser liegt ueber dem Clip -> eigener Hintergrund, sonst
     verschwindet er im hellen Video-Bild. */
  top: 0.4rem;
  right: 0.4rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  z-index: 2;
}
.hf-teaser .news-teaser-close:hover {
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
}

.hf-teaser-clip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0f172a;           /* Poster laedt spaeter: kein weisses Blitzen */
  overflow: hidden;
}
.hf-teaser-clip video,
.hf-teaser-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Zarter Verlauf am unteren Clip-Rand: der Uebergang zum Kartentext bleibt
   ruhig, auch wenn im Video gerade helle Flaechen laufen. */
.hf-teaser-clip::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

/* Fehlt der Clip, sitzt der Schliesser wieder auf der hellen Karte statt auf
   dem dunklen Video -> Standardoptik zurueckholen. */
.hf-teaser--noclip { padding-top: 0.35rem; }
.hf-teaser--noclip .news-teaser-close {
  color: #adb5bd;
  background: none;
}
.hf-teaser--noclip .news-teaser-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #343a40;
}
[data-theme="dark"] .hf-teaser--noclip .news-teaser-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8f9fa;
}

.hf-teaser-body {
  padding: 0.75rem 0.95rem 0 0.95rem;
}
.hf-teaser .news-teaser-tag { color: #6d28d9; }
.hf-teaser .news-teaser-cta { color: #6d28d9; }

[data-theme="dark"] .hf-teaser { border-color: rgba(167, 139, 250, 0.45); }
[data-theme="dark"] .hf-teaser .news-teaser-tag { color: #a78bfa; }
[data-theme="dark"] .hf-teaser .news-teaser-cta { color: #a78bfa; }

/* ─── Erklaer-Fenster (Klick auf den Teaser) ─── */
.hf-modal .modal-content {
  border-radius: 1rem;
  overflow: hidden;
}
.hf-modal-clip {
  background: #0f172a;
  aspect-ratio: 16 / 10;
}
.hf-modal-clip video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hf-modal-tag {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6d28d9;
  margin-bottom: 0.25rem;
}
.hf-modal-where {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(109, 40, 217, 0.07);
  border: 1px solid rgba(109, 40, 217, 0.18);
  font-size: 0.86rem;
}
.hf-modal-where svg { flex: 0 0 auto; margin-top: 0.15rem; color: #6d28d9; }

[data-theme="dark"] .hf-modal-tag { color: #a78bfa; }
[data-theme="dark"] .hf-modal-where {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.28);
}
[data-theme="dark"] .hf-modal-where svg { color: #a78bfa; }

/* === ./css/core/accent_colors.css === */
/* ── Accent Color Picker ─────────────────────────────────────────
   UI styles for the color picker modal and navbar trigger.
   Color overrides are applied dynamically via JS.
   ─────────────────────────────────────────────────────────────── */

/* ── Navbar trigger icon ─── */
.accent-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.accent-trigger:hover { opacity: 1; }
.accent-trigger .accent-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: var(--white-accent, #1767ff);
  transition: border-color 0.2s, background 0.2s;
}
[data-theme="light"] .accent-trigger .accent-swatch {
  border-color: rgba(0,0,0,0.25);
}
.accent-trigger:hover .accent-swatch {
  border-color: rgba(255,255,255,0.9);
}
[data-theme="light"] .accent-trigger:hover .accent-swatch {
  border-color: rgba(0,0,0,0.5);
}

/* ── Color picker modal ─── */
.accent-color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 56px;
  border: 2px solid var(--form-control-border, rgba(0,0,0,0.1));
  border-radius: 12px;
  cursor: pointer;
  padding: 3px;
  background: transparent;
  transition: border-color 0.2s;
}
.accent-color-input:hover {
  border-color: var(--form-focus-border, rgba(0,0,0,0.3));
}
.accent-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.accent-color-input::-webkit-color-swatch { border: none; border-radius: 9px; }
.accent-color-input::-moz-color-swatch { border: none; border-radius: 9px; }

.accent-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.accent-preset {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.accent-preset:hover {
  transform: scale(1.15);
}
.accent-preset.active {
  border-color: var(--app-text-color, #000);
  box-shadow: 0 0 0 2px rgba(128,128,128,0.2);
}

.accent-preview-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-preview-strong, #0f4ed8),
    var(--accent-preview-base, #1767ff),
    var(--accent-preview-light, #5c98ff)
  );
  transition: background 0.3s;
}

/* ── Navbar brand logo ─── */
.navbar-brand-logo {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* ── WhiteLabel Logo Upload (Design modal) ─── */
.wl-logo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 2px dashed rgba(128,128,128,0.3);
  border-radius: 10px;
  cursor: pointer;
  color: var(--app-muted-text, #6c757d);
  transition: border-color 0.2s, background 0.2s;
}
.wl-logo-dropzone:hover,
.wl-logo-dropzone.wl-logo-dragover {
  border-color: var(--accent-base, #1767ff);
  background: rgba(23, 103, 255, 0.05);
}
[data-theme="dark"] .wl-logo-dropzone:hover,
[data-theme="dark"] .wl-logo-dropzone.wl-logo-dragover {
  background: rgba(23, 103, 255, 0.1);
}

.wl-logo-preview {
  position: relative;
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 10px;
  background: rgba(128,128,128,0.04);
}
.wl-logo-preview img {
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
}
.wl-logo-remove-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--app-muted-text, #6c757d);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.wl-logo-remove-btn:hover {
  opacity: 1;
  color: var(--bs-danger, #dc3545);
}

/* === ./css/core/depot_tiles.css === */
/* ── Depot / AV-Depot Tile Cards ────────────────────────── */
.depot-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: .75rem;
}

/* Per-Produkt Farben (gleich wie Charts/Bars) */
.depot-tile--fondspolice { --tile-rgb: 13,110,253; }   /* blau */
.depot-tile--depot       { --tile-rgb: 255,201,80; }   /* gelb */
.depot-tile--rurup       { --tile-rgb: 34,197,94; }    /* grün */
.depot-tile--avdepot     { --tile-rgb: 249,115,22; }   /* orange */

.depot-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .55rem 2.2rem .5rem;
  min-height: 64px;
  border-radius: .5rem;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.depot-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.depot-tile:active {
  transform: translateY(0);
}

.depot-tile.active {
  background: linear-gradient(
    135deg,
    rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .10) 0%,
    rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .04) 100%
  );
  border-color: rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .85);
  box-shadow: 0 2px 8px rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .18);
}

.depot-tile:not(.active) {
  opacity: .50;
}

.depot-tile:not(.active):hover {
  opacity: .72;
}

/* Icon circle */
.depot-tile-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .12);
  color: rgb(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)));
  transition: background .2s, color .2s;
}

.depot-tile.active .depot-tile-icon {
  background: rgba(var(--tile-rgb, var(--accent-color-rgb, 13,110,253)), .22);
}

.depot-tile:not(.active) .depot-tile-icon {
  background: rgba(108,117,125,.10);
  color: #6c757d;
}

.depot-tile-icon svg {
  width: 14px;
  height: 14px;
}

/* Label */
.depot-tile-label {
  font-weight: 600;
  font-size: .72rem;
  line-height: 1.1;
  color: #343a40;
  white-space: nowrap;
}

/* Status dot — versteckt, da Border/Background bereits den Aktiv-Status zeigen
   und die Ecken jetzt für Cog (links) / Info (rechts) reserviert sind */
.depot-tile-status { display: none; }

/* Actions: Cog oben links, Info oben rechts (absolut positioniert) */
.depot-tile-actions {
  display: contents;
}

.depot-tile-cog,
.depot-tile-info {
  position: absolute;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #6c757d;
  cursor: pointer;
  transition: background .15s, color .15s;
  z-index: 2;
}

.depot-tile-cog  { left: 3px; }
.depot-tile-info { right: 3px; }

.depot-tile-cog svg,
.depot-tile-info svg {
  width: 16px;
  height: 16px;
}

.depot-tile-cog:hover,
.depot-tile-info:hover {
  background: rgba(0,0,0,.07);
  color: #495057;
}

/* ── Depot-dependent factors (collapsible) ─────────────── */
.depot-dependent-factors {
  max-height: 500px;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
  opacity: 1;
}

.depot-dependent-factors.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Entnahmeplan separator ─────────────────────────────── */
.entnahmeplan-separator {
  border-top: 1px solid rgba(0,0,0,0.1);
}

[data-theme="dark"] .entnahmeplan-separator {
  border-top-color: rgba(255,255,255,0.1);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .depot-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Dark Mode ─────────────────────────────────────────── */
[data-theme="dark"] .depot-tile {
  background: linear-gradient(135deg, #252a31 0%, #1e2228 100%);
  border-color: transparent;
}

[data-theme="dark"] .depot-tile:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

[data-theme="dark"] .depot-tile.active {
  background: linear-gradient(
    135deg,
    rgba(var(--tile-rgb, var(--accent-color-rgb, 52,211,153)), .14) 0%,
    rgba(var(--tile-rgb, var(--accent-color-rgb, 52,211,153)), .05) 100%
  );
  border-color: rgba(var(--tile-rgb, var(--accent-color-rgb, 52,211,153)), .85);
  box-shadow: 0 2px 10px rgba(var(--tile-rgb, var(--accent-color-rgb, 52,211,153)), .22);
}

[data-theme="dark"] .depot-tile:not(.active) {
  opacity: .40;
}

[data-theme="dark"] .depot-tile:not(.active):hover {
  opacity: .65;
}

[data-theme="dark"] .depot-tile:not(.active) .depot-tile-icon {
  background: rgba(255,255,255,.06);
  color: #8b95a1;
}

[data-theme="dark"] .depot-tile-label {
  color: #e9ecef;
}

[data-theme="dark"] .depot-tile-status {
  background: #495057;
}

[data-theme="dark"] .depot-tile-cog,
[data-theme="dark"] .depot-tile-info {
  color: #6c757d;
}

[data-theme="dark"] .depot-tile-cog:hover,
[data-theme="dark"] .depot-tile-info:hover {
  background: rgba(255,255,255,.08);
  color: #e9ecef;
}

/* ── Einflussfaktoren-Zeilen: einheitliches Layout ─────── */
/* padding L/R 0: Faktor-Labels sollen mit den Sidebar-Form-Labels
   ("Monatliche Investition" etc.) linksbuendig stehen. Diese sitzen
   direkt am Container-Content-Edge ohne eigenes Padding. Frueheres
   padding-left: 1rem war Reserve fuer den entfernten ::before-Punkt. */
/* .pb-toggle-row (pers_input.html: Verheiratet/Kirchensteuer/Soli/Freibetrag)
   teilt sich bewusst denselben Reset wie .factor-row, damit die PB-Daten-
   Toggle-Reihen 1:1 dasselbe Sidebar-Layout bekommen wie die Anlagefinder-
   Einflussfaktoren (gleiche Label-Einrueckung links, gleiche Toggle-X rechts).
   Nicht in .factor-list eingebettet -> die data-state/order-Regeln greifen
   nicht (anderer Klassenname), reine Layout-Angleichung. */
.factor-row,
.pb-toggle-row {
  background: transparent;
  border: 0;
  padding: .35rem 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: .35rem !important;
}

/* Bootstrap-Grid: col-md-7 traegt 0.75rem Eigen-padding-left aus
   --bs-gutter-x (Standard 1.5rem), das die per !important genullten
   row-Margins nicht mehr kompensieren.
   .factor-row > .col-md-7: padding-left 0, damit der Strich-Slot exakt
   auf der linken Kante der Eingabefelder (.input-container) beginnt.
   Der Slot (22 px) + Gap (4 px) liefern den neuen visuellen Einschub.
   .pb-toggle-row > .col-md-7: bleibt bei 0.75rem (kein Slot → braucht
   eigenes Einzug-Budget). col-md-5 (rechte Aktions-Spalte) NICHT
   angefasst -> Cog/Switch/Info-i bleiben auf ihrer alten X-Position. */
.factor-row > .col-md-7 {
  padding-left: 0;
}
.pb-toggle-row > .col-md-7 {
  padding-left: 0.75rem;
}

/* PB-Daten-Reihen haben rechts NUR den Toggle (kein Cog, kein Info-i wie die
   Faktor-Zeilen). Frueher stand hier eine 20-px-Kompensation, damit der
   Switch auf exakt derselben X-Linie sitzt wie der Faktor-Switch.

   AUFGEGEBEN am 10.08.2026: Die 20-px-Spur kostete Breite, die die
   Beschriftung dringender braucht. Gemessen war die Schalterspalte 102 px
   breit fuer einen 42-px-Schalter (12 padding-left + 42 + 16 margin-right +
   32 padding-right) — in einer 165-px-Zeile blieben der Beschriftung 64 px,
   und schon "Verheiratet" (78 px) lief unter den Schalter. Die Flucht mit den
   Faktor-Zeilen ist eine Feinheit zwischen zwei SEITEN, die man nie
   nebeneinander sieht; ein Knopf auf dem Wort sieht man immer.

   ⚠ 11.08.2026: Der Absatz oben stand bis heute AUSSERHALB des Kommentars —
   das schliessende Kommentar-Ende sass eine Zeile zu frueh. Der CSS-Parser
   hat den Fliesstext danach als Selektor-Prelude gelesen und die folgende
   Regel samt Block verworfen; ``padding-right`` kam nie an. Merke: Prosa
   gehoert INNERHALB eines Kommentars, und ein Kommentar-Ende darf auch nicht
   als Zitat im Fliesstext stehen (auch in Backticks beendet es den Kommentar)
   — beides kippt lautlos die naechste Regel.
   Gegenprobe im Browser: ``[...document.styleSheets].flatMap(s=>[...s.cssRules])
   .filter(r=>/pb-toggle-row/.test(r.selectorText||''))`` — die Regel muss
   in der Liste auftauchen. */
.pb-toggle-row > .col-md-5 {
  padding-right: 0.75rem;
}

/* Der Text darf UMBRECHEN, statt unter den Schalter zu laufen (10.08.2026).
   Gemessen auf /beratung, Seite 0, 1440x900: Die Label-Spalte ist 96 px breit
   (Sidebar-Container 213 px), "Solidaritätszuschlag" braucht 135 px — der
   Text lief 51 px unter den Schalter, "Kirchensteuer" 11 px. Sichtbar auch im
   Screenshot: der Knopf liegt auf dem Wort.

   Ursache ist die Flexbox-Grundregel, nicht die Spaltenbreite: Ein Flex-Item
   hat ``min-width: auto`` und schrumpft nie unter sein laengstes Wort. Der
   Text ragte also aus seiner eigenen Spalte heraus, statt umzubrechen. Mit
   ``min-width: 0`` darf er schrumpfen, mit ``overflow-wrap: anywhere`` das
   lange Wort trennen — zwei Zeilen sind hier richtig, Ueberlappung nie.

   Unabhaengig vom Assistenten-Panel: mit Panel zu exakt dieselben Werte
   (die Sidebar-Spalte ist in beiden Faellen 213 px breit).

   ZWEITER DURCHGANG, gemessen: ``overflow-wrap: anywhere`` allein war zu
   scharf. In der Freibetrag-Zeile stehen neben dem Wort noch das Zahnrad und
   der Wert ("1000 €"), zusammen 146 px in einer 96-px-Spalte; das Wort wurde
   auf 7 px Breite und 185 px Hoehe zerlegt, Buchstabe unter Buchstabe.

   DRITTER DURCHGANG — der eigentliche Punkt: Die Spalte war zu SCHMAL, nicht
   der Text zu lang. Bei 7/12 blieben der Beschriftung 84 px, "Verheiratet"
   braucht 78, "Kirchensteuer" 88 — also brach schon das kuerzeste Wort um.
   Die Aufteilung ist jetzt inhaltsgetrieben: Die Schalterspalte nimmt, was
   der Schalter braucht, der Rest gehoert der Beschriftung (112 px statt 84).
   Damit stehen alle kurzen Labels wieder einzeilig; nur
   "Solidaritätszuschlag" (135 px) passt in dieser Sidebar-Breite nicht und
   trennt sich mit Bindestrich (``hyphens`` + ``lang="de"`` am Absatz, im
   Template gesetzt — <html> traegt lang="en").

   Die 20-px-Kompensation rechts (Spur des fehlenden Info-i der
   Faktor-Zeilen) bleibt: Der Schalter steht weiter auf derselben X-Linie wie
   im Anlagefinder. */
/* nowrap ist PFLICHT: ``.row`` bricht sonst um, sobald Beschriftung plus
   Schalter breiter sind als die Zeile — gemessen sass der Schalter dann UNTER
   dem Text statt daneben. Mit nowrap schrumpft stattdessen die Beschriftung,
   und genau das soll sie. */
.pb-toggle-row {
  flex-wrap: nowrap;
}
.pb-toggle-row > .col-md-7 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding-left: 0;
  flex-wrap: wrap;
  row-gap: 0.15rem;
}
.pb-toggle-row > .col-md-5 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0;
}
/* Die Aussenabstaende des Schalters sind hier nur verschenkte Breite — er
   steht ohnehin rechtsbuendig am Spaltenrand. */
.pb-toggle-row > .col-md-5 > .form-check.form-switch {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.pb-toggle-row > .col-md-7 > p {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
}

/* Separator-Border konflikfrei mit factor-row halten */
.entnahmeplan-separator.factor-row {
  border-top: 1px solid rgba(0,0,0,0.1);
}
[data-theme="dark"] .entnahmeplan-separator.factor-row {
  border-top-color: rgba(255,255,255,0.1);
}

/* ── Faktor-Liste: Sichtbarkeit + Reihenfolge ─────────────
   .factor-list ist Flex-Column, damit CSS-`order` die hidden-Zeilen
   visuell UNTER den Chevron-Trigger schiebt (DOM-Reihenfolge bleibt
   fix wie im Template).

   Default-State (Trigger eingeklappt):
   - .factor-row[data-state="visible"]: order 0 (default), display: flex.
   - .factor-row[data-state="hidden"]:  display: none.
   - .factor-extras-toggle:             order 1 — sitzt unter visible-Reihen.

   Aufgeklappt (.factor-extras-open am Wrapper):
   - .factor-row[data-state="hidden"]:  display: flex (wie .row), order: 2 —
     sitzt unter dem Trigger.

   .row-Default ist display: flex (Bootstrap), wir setzen es nur explizit
   beim Re-Anzeigen, damit display: none des Default-States ueberschrieben
   wird. */
.factor-list {
  display: flex;
  flex-direction: column;
}

.factor-row[data-state="hidden"] {
  display: none;
}

.factor-extras-open .factor-row[data-state="hidden"] {
  display: flex;
  order: 2;
}

/* ── Chevron-Trigger fuer "Einflussfaktoren ohne Auswirkung" ──
   Rechtsbuendig im Faktoren-Container: justify-content: flex-end schiebt
   Text + Chevron ans rechte Ende. Padding L/R 0 -> Chevron-Kante sitzt
   buendig mit der rechten Kante der Sidebar-Form-Controls (gleiche
   Container-Breite).
   Hover-Farbe = Reset-Button-Blau (var(--nav-link-hover-color)). Chevron
   erbt currentColor und geht im Hover automatisch mit. */
.factor-extras-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  order: 1;
  width: 100%;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
  text-align: right;
  cursor: pointer;
  transition: color 0.15s ease;
}

.factor-extras-toggle:hover,
.factor-extras-toggle:focus-visible {
  color: var(--nav-link-hover-color, rgb(13, 110, 253));
  outline: none;
}

.factor-extras-toggle__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform 0.2s ease;
}

.factor-extras-toggle__chevron svg {
  width: 14px;
  height: 14px;
}

.factor-extras-toggle[aria-expanded="true"] .factor-extras-toggle__chevron {
  transform: rotate(180deg);
}

/* Show-/Hide-Label-Pair: eines davon per aria-expanded versteckt. */
.factor-extras-toggle[aria-expanded="false"] .factor-extras-toggle__label--hide,
.factor-extras-toggle[aria-expanded="true"] .factor-extras-toggle__label--show {
  display: none;
}

/* ── Versteckte Faktor-Labels: gedaempft im aufgeklappten State ──
   Wenn der Trigger aufgeklappt ist und die [data-state="hidden"]-Zeilen
   sichtbar werden, sollen die Labels (.col-md-7 > p) im Sidebar-Label-
   Grau erscheinen — selber Token wie .anlage-picker__label und die
   uebrigen Form-Labels. Switch/Cog/Info-Icons bleiben in ihren
   eigenen Farben. */
.factor-extras-open .factor-row[data-state="hidden"] .col-md-7 p {
  color: var(--form-check-label-color, #6c757d);
}

/* ── Faktor-Zeilen: Anlage-Strich-Slot ──────────────────────────────────
   Fixer Slot vor jedem Label: Platz für 4 Striche × 3 px + 3 Gaps × 3 px
   = 21 px → Slot 22 px, damit alle Labeltexte auf exakt derselben linken
   Kante beginnen (unabhängig davon ob 0, 1, 2 oder 4 Striche aktiv sind).
   JS (updateFactorVisibility) füllt die .factor-stripe-Spans; CSS steuert
   Form + Farbe (Light / Dark). */
.factor-label-wrap {
  display: flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-bottom: 0;
}

.factor-stripe-slot {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 22px;
  width: 22px;
  justify-content: flex-start;
}

.factor-stripe {
  display: block;
  width: 3px;
  height: 1.2em;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Light-Mode Anlage-Farben (= border-left der Picker-Cards) */
.factor-stripe--fondspolice { background: #1767ff; }
.factor-stripe--depot       { background: #f59e0b; }
.factor-stripe--avdepot     { background: #ea580c; }
.factor-stripe--rurup       { background: #22c55e; }

/* Dark-Mode (= spiegelbildlich zu den Dark-Mode-Farben der Compare-Cards) */
[data-theme="dark"] .factor-stripe--fondspolice { background: #5b8fff; }
[data-theme="dark"] .factor-stripe--depot       { background: #fbbf24; }
[data-theme="dark"] .factor-stripe--avdepot     { background: #f97316; }
[data-theme="dark"] .factor-stripe--rurup       { background: #4ade80; }

/* ── Einflussfaktoren: warum der Schalter auf dem Wort lag (11.08.2026) ──
   Zwei Ursachen, beide gemessen auf /beratung Seite 3, 1440x900, Assistenten-
   Panel offen (Sidebar 213 px visuell, zoom 0.75). Gemessen wurde NICHT
   Spalte gegen Spalte, sondern mit ``document.elementsFromPoint`` am rechten
   Rand des Textes — das oberste Element dort war ``div.col-md-5``, nicht das
   Label. Genau deshalb sahen zwei fruehere Spaltenvergleiche "0 px
   Ueberlappung", waehrend der Screenshot den Knopf auf dem Wort zeigte.

   (1) Der Text floss aus seiner EIGENEN Box heraus. ``.factor-label-wrap``
       ist ``display: flex``; der blanke Textknoten daneben wird ein ANONYMES
       Flex-Item, und ein solches laesst sich per Selektor nicht erreichen —
       ``min-width`` und ``overflow-wrap`` am <p> gingen daran vorbei. Mit
       ``min-width: auto`` schrumpft es nie unter sein laengstes Wort
       ("Überschussbeteiligung", 180 px Layout) und ragte 27 px Layout
       (20 px visuell) ueber das <p> hinaus, unter das Zahnrad.
       ``overflow-wrap: break-word`` hilft dagegen NICHT: es veraendert die
       min-content-Breite nicht, aus der die automatische Mindestgroesse
       entsteht. Kur: Der Text bekommt im Template ein eigenes
       ``<span class="factor-label-text">``. Als echtes Flex-Item darf es
       ``min-width: 0`` tragen, schrumpft mit und bricht dann um.

   (2) Die rechte Spalte lief nach LINKS aus. Ihr Inhalt (Zahnrad + Schalter
       + Info-i) braucht 137 px Layout, die Bootstrap-Spur 5/12 gibt ihr 118 —
       und bei ``justify-content: flex-end`` faellt der Ueberhang zur
       START-Seite, also nach links ueber die Label-Spalte. Gemessen begann
       das Zahnrad bei x=159,2, seine eigene Spalte erst bei x=164,7. Kur:
       Die Spaltengrenze sagt jetzt die Wahrheit — die rechte Spalte nimmt
       ihre Inhaltsbreite, die linke den Rest.

   Der frueher zurueckgenommene Versuch scheiterte an der toten Luft in der
   rechten Spalte: 0,75rem padding-left, das bei ``justify-content: flex-end``
   nichts positioniert, und 1rem margin-left am Schalter. Beides raus, dann
   kostet die ehrliche Spaltengrenze nur 2,4 px visuell (124,2 → 121,8) statt
   der damals gemessenen Haelfte. Der Schalter bleibt dabei stehen: Bei
   flex-end verschiebt sich nur, was LINKS von ihm liegt (gemessen 218,9 →
   217,5, also 1,4 px visuell).

   Die Slot-Einrueckung links (22 px + 4 px Gap) bleibt — sie traegt den
   farbigen Strich, an dem die Zeilen ihre Gruppe zeigen. */
.factor-row {
  flex-wrap: nowrap;
}
.factor-row > .col-md-7 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}
.factor-row > .col-md-5 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  /* Bei justify-content: flex-end positioniert padding-left nichts, es
     blaeht nur die Spaltenbreite auf, die jetzt aus dem Inhalt kommt. */
  padding-left: 0;
}
/* Die Luft LINKS vom Schalter geht an die Beschriftung. Rechts bleibt sie
   stehen — sonst wandert der Schalter. */
.factor-row > .col-md-5 > .form-check.form-switch {
  margin-left: 0.5rem !important;
}
.factor-row > .col-md-7 p,
.factor-row > .col-md-7 label,
.factor-row > .col-md-7 > span {
  min-width: 0;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.25;
}
/* Der Textknoten als eigenes Flex-Item: nur so greift min-width ueberhaupt
   (siehe Ursache 1). ``&shy;`` in den langen Komposita im Template setzt die
   Trennstelle; ``break-word`` ist die Reissleine, wenn selbst ein Teilwort
   nicht mehr passt. */
.factor-label-text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* === ./css/core/anlage_picker.css === */
/* ── Anlage-Picker ──────────────────────────────────────────────────────
   Kombiniertes Anlage/Tarif-Element für die Sidebar des Anlagefinders.
   Logik in /js/anlage_picker.js. Tokens aus forms.css / buttons.css /
   sidebar.css wiederverwenden. */

.anlage-picker {
  display: flex;
  flex-direction: column;
  /* gap: 0 (Baukasten-Prinzip) — Label/Combo/Settings-Button sollen
     unterschiedliche Spacings haben (Label-Combo "flush" wie Form-Group,
     Combo-Settings 8px). Statt Flex-Gap + überall korrigieren, setzen
     wir Gap am Parent auf 0 und kontrollieren Abstand pro Child via
     margin-top am Settings-Button. Selbsterklärend, kein negativer
     Margin nötig. */
  gap: 0;
  margin-bottom: .75rem;
}

/* Skin 1:1 wie .form-group label / .form-label (forms.css):
   font-weight-Fallback "normal" (= 400) statt 500, kein letter-spacing,
   kein margin-bottom. Damit klebt der Label-Box-Bottom direkt am
   Combo-Border-Top (analog Form-Group: bare <label> + <input> stacken
   flush ohne Gap). Parent .anlage-picker hat gap: 0, deshalb keine
   ungewollte Flex-Spacing zwischen Label und Combo. */
.anlage-picker__label {
  display: block;
  font-size: var(--form-label-font-size, 0.75rem);
  font-weight: var(--form-label-weight, normal);
  color: var(--form-check-label-color, inherit);
  margin-bottom: 0.1rem;
  padding-left: 0.1rem;
}

/* ── Kombi-Dropdown: zwei Selects, sichtbar verbunden ────────────────── */
.anlage-picker__combo {
  display: grid;
  /* Linke Spalte fix (Anlagetyp-Select): 130px garantiert "Rürup-Rente" +
     Padding ohne Abschneiden (analytisch: ~90px Text + 45px Padding = 135px,
     SF Pro kompakter → 130px reicht). Rechte Spalte nimmt den Rest. */
  grid-template-columns: 150px minmax(0, 1fr);
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  /* overflow:visible nötig, damit das Bootstrap-Dropdown-Panel unter dem
     Trigger nicht weggeclippt wird. Visuelle Rundung übernimmt jetzt der
     border-radius an den inneren Slots. */
  overflow: visible;
  min-height: var(--sidebar-element-height, 45px);
  /* position:relative — Anker für das absolut positionierte Tarif-Menu,
     damit das Menu zur GESAMTEN Combo-Breite ausgerichtet ist (statt nur
     zur rechten Trigger-Spalte). Siehe .anlage-picker__tarif-menu unten. */
  position: relative;
  /* Float-Halo (--surface-shadow-soft) im Resting-State, weil die Combo
     direkt auf App-BG sitzt. In Dark = none (Token). Hover/Focus unten
     ergaenzen den Halo zusaetzlich via Komma-Komposition. */
  box-shadow: var(--surface-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.anlage-picker__combo::after {
  content: "";
  position: absolute;
  left: 150px; /* exakte Spaltengrenze = linke Spaltenbreite */
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--form-control-border, rgba(0,0,0,0.12));
  pointer-events: none;
  z-index: 1;
}

/* Ohne Tarifauswahl (Depot/AV-Depot): Tarif-Dropdown wird gar nicht
   gerendert — eine Spalte, das Anlage-Select nimmt die volle Breite,
   keine Spaltengrenze, Rundung an allen vier Ecken. */
.anlage-picker__combo--no-tarif {
  grid-template-columns: minmax(0, 1fr);
}
.anlage-picker__combo--no-tarif::after {
  display: none;
}
.anlage-picker__combo--no-tarif .anlage-picker__select-anlage {
  border-radius: var(--radius-md, 12px);
}

/* Hover-Glow auf den GANZEN Combo-Container — visuell ein zusammenhängendes
   Element, ein Glow ist konsistenter als zwei Glows pro Dropdown. Innere
   Backgrounds (grau links / weiß rechts) bleiben unberührt.
   Float-Halo bleibt via Komma-Komposition zusaetzlich erhalten. */
.anlage-picker__combo:hover {
  border-color: var(--form-control-border, rgba(0, 0, 0, 0.12));
  box-shadow: var(--surface-shadow-soft), var(--hover-glow-shadow, 0 0 0 3px rgba(0, 0, 0, 0.08));
}

.anlage-picker__combo:focus-within {
  border-color: var(--form-control-focus-border, rgba(13, 110, 253, .35));
  box-shadow: var(--surface-shadow-soft), 0 0 0 3px var(--form-control-focus-ring, rgba(13, 110, 253, .15));
}

/* Die beiden Slots (linker <select> + rechter Tarif-Trigger) teilen sich
   den Container — keine eigenen Borders. Der Trigger rechts ist ein
   <button> mit Bootstrap-Dropdown, kein natives <select>. */
.anlage-picker__select-anlage,
.anlage-picker__tarif-trigger {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  color: var(--form-control-color, inherit);
  border: 0;
  border-radius: 0;
  padding: .55rem 2rem .55rem .8rem;
  font-size: .875rem;
  line-height: 1.25;
  cursor: pointer;
  min-width: 0;
  width: 100%;

  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 14px 14px;
}

/* Anlage-Select (links): leicht grauer Hintergrund, gleicher Token wie
   sidebar-secondary-Buttons (#E4E7EF im Light, surface-soft im Dark).
   Linke Ecken gerundet, weil .anlage-picker__combo overflow:visible hat. */
.anlage-picker__select-anlage {
  font-weight: 600;
  background-color: transparent;
  color: var(--bs-body-color);
  border-top-left-radius: var(--radius-md, 12px);
  border-bottom-left-radius: var(--radius-md, 12px);
}

.anlage-picker__select-anlage option {
  background-color: #ffffff !important;
  color: #212529 !important;
}

.anlage-picker__select-anlage:focus,
.anlage-picker__tarif-trigger:focus {
  outline: none;
  box-shadow: none;
}

/* ── Tarif-Custom-Dropdown (Bootstrap-Dropdown) ────────────────────────
   Der Trigger sitzt in der rechten Hälfte des .anlage-picker__combo und
   übernimmt visuell die Rolle des alten <select>. Das Panel öffnet sich
   nach unten, ist scrollbar und embedded choose_*_flat.html via
   grouped_chooser.js. */
.anlage-picker__tarif-dropdown {
  /* position:static, damit das Menu NICHT zur Trigger-Spalte anchored,
     sondern zur Combo (= ancestor mit position:relative). So füllt das
     Panel die volle Combo-Breite, nicht nur die rechte Hälfte. */
  position: static;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.anlage-picker__tarif-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  text-align: left;
  font-weight: 400;
  color: var(--bs-body-color);
  background-image: none;
  padding-right: .8rem;
  /* Rechte Ecken gerundet, weil .anlage-picker__combo overflow:visible hat. */
  border-top-right-radius: var(--radius-md, 12px);
  border-bottom-right-radius: var(--radius-md, 12px);
}

.anlage-picker__tarif-trigger-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trigger-Logo: erscheint NUR im sichtbaren Auswahlfeld (Default/Selected
   State der Tarifauswahl). Greift nicht in die Dropdown-Liste ein - dort
   gilt weiter die bestehende Logo-Logik aus grouped_chooser.js. */
.anlage-picker__tarif-trigger-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.anlage-picker__tarif-trigger-logo[hidden] { display: none; }
.anlage-picker__tarif-trigger-logo-img {
  display: block;
  height: 18px;
  width: 18px;
  object-fit: contain;
  object-position: center;
}
[data-theme="dark"] .anlage-picker__tarif-trigger-logo-img {
  filter: brightness(0.9);
}

.anlage-picker__tarif-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform .2s ease;
}

.anlage-picker__tarif-chevron svg {
  width: 14px;
  height: 14px;
}

.anlage-picker__tarif-trigger[aria-expanded="true"] .anlage-picker__tarif-chevron {
  transform: rotate(180deg);
}

.anlage-picker__tarif-trigger:disabled {
  color: var(--form-control-placeholder, rgba(0, 0, 0, .5));
  cursor: not-allowed;
  font-style: italic;
}
.anlage-picker__tarif-trigger:disabled .anlage-picker__tarif-chevron {
  display: none;
}

/* Wichtig: das Bootstrap-Default .dropdown-toggle::after-Caret unterdrücken —
   wir haben unseren eigenen Chevron via background-image (siehe oben). */
.anlage-picker__tarif-trigger::after {
  display: none;
}

.anlage-picker__tarif-menu {
  /* Position + Größe werden von anlage_picker.js gesteuert:
       - reference: combo  → Popper anchored an die Combo (volle Combo-Breite,
                              nicht nur Trigger-Spalte)
       - offset: [0, 8]    → 8px vertikaler Gap zwischen Combo und Panel
       - JS setzt menu.style.width = combo.offsetWidth bei show + ResizeObserver
     Wir lassen Popper hier in Ruhe und beschränken uns auf visuelle Styles. */
  min-width: 0;
  max-width: none;
  z-index: 1050;
  padding: .65rem .65rem .75rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  /* WICHTIG: opak. --form-control-bg ist im Light-Theme rgba(255,255,255,0.92)
     — semi-transparent, damit Form-Inputs subtil mit dem Hintergrund verschmelzen.
     Für ein Floating-Panel ist das aber falsch (Inhalt darunter würde
     durchschimmern). Daher hardcoded #ffffff, Dark-Mode-Override unten. */
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Defensiv: jeden Popper-Arrow oder ::before/::after-„Tail" am Menu killen,
   auch wenn Bootstrap-Default-Dropdown keinen rendert. Falls Theme-CSS oder
   Popper-Modifier doch einen einfügt, wäre der ein Fremdkörper. */
.anlage-picker__tarif-menu::before,
.anlage-picker__tarif-menu::after,
.anlage-picker__tarif-menu [data-popper-arrow] {
  display: none !important;
}

.anlage-picker__tarif-list {
  /* Konservatives Limit: passt auch in 14"-Sidebars rein, ohne dass das
     Panel die Sidebar überragt und vom overflow-auto clipped wird. */
  max-height: clamp(15rem, 50vh, 28rem);
  overflow-y: auto;
}

.anlage-picker__tarif-empty {
  padding: .5rem .25rem;
  color: var(--form-control-placeholder, rgba(0, 0, 0, .5));
  font-size: .85rem;
  font-style: italic;
}

/* ── AV-Depot Tarifauswahl (choose_av_depot_flat.html) ─────────────────
   Zwei statische Tarife im Tarif-Panel — gleiche Optik wie die
   grouped_chooser-Listen (flache list-group-Items, dezenter Hover über die
   accordion.css-Tokens). Auswahl-Zustand über Häkchen + font-weight statt
   der blauen Bootstrap-.active-Füllung, damit das Panel ruhig bleibt. */
.av-depot-tarif-list .av-depot-tarif-option {
  padding: .5rem .75rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.av-depot-tarif-list .av-depot-tarif-option.is-selected .av-depot-tarif-name {
  font-weight: 600;
}

.av-depot-tarif-check {
  color: var(--bs-primary, #0d6efd);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

[data-theme="dark"] .av-depot-tarif-check {
  color: #5c98ff;
}

/* Beschreibungszeile: Bootstrap-.text-muted ist auf dem dunklen Panel-BG zu
   dunkel — auf das Dark-Grau der übrigen Panel-Hinweise anheben (!important,
   weil Bootstrap .text-muted selbst !important setzt). */
[data-theme="dark"] .av-depot-tarif-list .av-depot-tarif-option .text-muted {
  color: #adb5bd !important;
}

/* ── Open-State: Combo + Panel zwei eigenständige Cards, vom gleichen
   Glow visuell zusammengefasst. Combo behält seine Rundung an ALLEN 4
   Ecken; Panel hat eigene Rundung an ALLEN 4 Ecken. Der 4px-Gap zwischen
   beiden wird durch den überlappenden Halo überbrückt. */
.anlage-picker__combo:has(.anlage-picker__tarif-trigger[aria-expanded="true"]) {
  border-color: var(--form-control-focus-border, rgba(13, 110, 253, .35));
  box-shadow: 0 0 0 3px var(--form-control-focus-ring, rgba(13, 110, 253, .15));
}

/* Bootstrap setzt .show beim Aufklappen — Panel matcht den Combo-Glow. */
.anlage-picker__tarif-menu.show {
  border-color: var(--form-control-focus-border, rgba(13, 110, 253, .35));
  box-shadow:
    0 0 0 3px var(--form-control-focus-ring, rgba(13, 110, 253, .15)),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .anlage-picker__tarif-menu {
  background: #1c2533;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Dark-Mode Open-State Glow — passt zum Dark-Combo-focus-within (Akzent grün).
   Wie Light-Mode: Combo behält Rundung, Panel behält Rundung, Glow umfasst beide. */
[data-theme="dark"] .anlage-picker__combo:has(.anlage-picker__tarif-trigger[aria-expanded="true"]) {
  border-color: rgba(92, 152, 255, .35);
  box-shadow: 0 0 0 3px rgba(92, 152, 255, .12);
}

[data-theme="dark"] .anlage-picker__tarif-menu.show {
  border-color: rgba(92, 152, 255, .35);
  box-shadow:
    0 0 0 3px rgba(92, 152, 255, .12),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .anlage-picker__tarif-empty {
  color: #adb5bd;
}

/* ── Combo-Row: Combo + Zahnrad in einer Zeile ─────────────────────────
   Ersetzt den früheren Block-Settings-Button unter der Combo.
   Combo nimmt den verfügbaren Platz (flex-grow), Zahnrad ist fix 45x45
   via .segmented-control__settings (switches.css). */
.anlage-picker__combo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.anlage-picker__combo-row .anlage-picker__combo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tarifauswahl-Accordion als flex:1-Teil der combo-row.
   Kein display:grid (das wäre .anlage-picker__combo für 2-Select-Combo) —
   accordion-item behält seine eigene Gestaltung (border/bg/overflow:hidden),
   nimmt aber als Flex-Item den verfügbaren Platz neben dem Zahnrad-Button. */
.anlage-picker__combo-row > .accordion-item {
  flex: 1 1 auto;
  min-width: 0;
}

/* Zahnrad-Button: .segmented-control__settings liefert 45x45-Look,
   BG/Border/Radius/Hover-Ring. Hier nur Flex-Verhalten + Ruhe-Halo
   (analog .rendite-fond-cog in dep_fon_input.html). */
.anlage-picker__settings-btn {
  flex: 0 0 auto;
  box-shadow: var(--surface-shadow-soft);
}

/* Zahnrad neben der Tarifauswahl (Accordion): beim Aufklappen waechst die
   combo-row — mit align-items:center wuerde der Button in die Mitte des
   geoeffneten Panels wandern. flex-start haelt ihn auf Hoehe des
   geschlossenen Headers (Item 46px vs Button 45px ≈ optisch zentriert). */
.anlage-picker__combo-row > .accordion-item + .anlage-picker__settings-btn {
  align-self: flex-start;
}

/* ── Compare-Toggle-Zeile ─────────────────────────────────────────────
   Layout 1:1 wie .factor-row in dep_fon_input.html: Bootstrap-Grid (col-md-7
   Label / col-md-5 Aktionen), Icons als .span_info, Switch als .form-switch.
   Der zuvor links sitzende graue Punkt ist entfernt — wir setzen kein eigenes
   ::before mehr. */
.anlage-picker__compare-toggle-row {
  margin-top: .15rem;
  /* Padding/Margin 1:1 wie .factor-row in depot_tiles.css nach 2026-05-28
     Re-Alignment: L/R 0, sodass Label buendig mit Sidebar-Form-Labels
     ("Monatliche Investition" etc.) startet und Aktions-Spalte (Cog/
     Switch/Info) exakt unter den Aktions-Spalten der Faktor-Zeilen sitzt. */
  padding: .35rem 0;
  margin-left: 0;
  margin-right: 0;
}

/* Mirror Faktor-Row col-md-7-Override: bewusst 0.75rem (12px) padding-left,
   damit das Vergleichen-Label leicht eingerueckt sitzt — exakt wie die
   Faktor-Labels (.factor-row > .col-md-7 in depot_tiles.css). Der frueher
   hier sitzende graue ::before-Punkt ist entfernt; der Einrueck-Slot bleibt
   als padding-left. */
.anlage-picker__compare-toggle-row > .col-md-7 {
  padding-left: 0.75rem;
}

/* font-size + color bewusst nicht gesetzt → erbt body-Default (= identisch
   zu den Faktor-Labels in dep_fon_input.html, die ebenfalls reine <p>-Tags
   ohne eigene Typo-Regeln sind). */
.anlage-picker__compare-label {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* ── Vergleichs-Card ─────────────────────────────────────────────────
   Linker 3px-Balken in Active-Tab-Blau (--sidebar-pill-active-bg), Card-
   Hintergrund mit ca. 5% Alpha aus demselben Blau für leicht bläulich-hell. */
.anlage-picker__compare-card {
  display: none;
  flex-direction: column;
  /* gap: 0 spiegelt .anlage-picker — Baukasten-Prinzip, kontrollierter
     Abstand pro Child statt globaler Flex-Gap. Title→Combo läuft über
     die kleine margin-bottom des Title-Elements (.1rem),
     Combo→Settings-Button über margin-top am Settings-Button. */
  gap: 0;
  margin-top: .25rem;
  padding: .65rem .65rem .75rem .9rem;
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-left: 3px solid var(--sidebar-pill-active-bg, #1767ff);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-soft-bg);
  position: relative;
  /* Float-Halo: die Card ist die erste schwebende Stufe ueber App-BG.
     Sub-Komponenten (Combo + Settings-Btn) bekommen unten einen Reset,
     damit sie keinen eigenen Float doppeln. */
  box-shadow: var(--surface-shadow-soft);
}

.anlage-picker__compare-card[data-open="true"] {
  display: flex;
}

.anlage-picker__compare-card[data-anlage-kind="fondspolice"] {
  border-left-color: #1767ff;
}
.anlage-picker__compare-card[data-anlage-kind="depot"] {
  border-left-color: #f59e0b;
}
.anlage-picker__compare-card[data-anlage-kind="avdepot"] {
  border-left-color: #ea580c;
}
.anlage-picker__compare-card[data-anlage-kind="rurup"] {
  border-left-color: #22c55e;
}

[data-theme="dark"] .anlage-picker__compare-card[data-anlage-kind="fondspolice"] { border-left-color: #5b8fff; }
[data-theme="dark"] .anlage-picker__compare-card[data-anlage-kind="depot"] { border-left-color: #fbbf24; }
[data-theme="dark"] .anlage-picker__compare-card[data-anlage-kind="avdepot"] { border-left-color: #f97316; }
[data-theme="dark"] .anlage-picker__compare-card[data-anlage-kind="rurup"] { border-left-color: #4ade80; }

.anlage-picker__compare-card-title {
  display: block;
  font-size: var(--form-label-font-size, 0.75rem);
  font-weight: var(--form-label-weight, normal);
  color: var(--form-check-label-color, inherit);
  margin: 0 0 0.1rem;
  padding-left: 0.1rem;
}

/* ── Float-Halo-Reset innerhalb der Compare-Card ──────────────────────
   Die Card selbst traegt den Float (oben). Sub-Komponenten Combo +
   Settings-Btn duerfen ihren eigenen Resting-Float nicht doppeln —
   sonst doppelte Schichtung. Hover/Focus der Combo bleibt erhalten.
   Beim Settings-Btn gibt es keinen eigenen Hover-Shadow (.btn-main:hover
   setzt box-shadow: none !important), daher reicht der Resting-Reset.
   MUSS nach den .anlage-picker__combo / .anlage-picker__settings-btn-
   Float-Regeln stehen (gleiche Specificity → source-order entscheidet). */
.anlage-picker__compare-card .anlage-picker__combo {
  box-shadow: none;
}
.anlage-picker__compare-card .anlage-picker__combo:hover {
  box-shadow: var(--hover-glow-shadow, 0 0 0 3px rgba(0, 0, 0, 0.08));
}
.anlage-picker__compare-card .anlage-picker__combo:focus-within {
  box-shadow: 0 0 0 3px var(--form-control-focus-ring, rgba(13, 110, 253, .15));
}
.anlage-picker__compare-card .anlage-picker__settings-btn {
  box-shadow: none;
}

/* ── Dark Mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] .anlage-picker__combo {
  background: #1c2533;
  border-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .anlage-picker__combo:focus-within {
  border-color: rgba(92, 152, 255, .35);
  box-shadow: 0 0 0 3px rgba(92, 152, 255, .12);
}

[data-theme="dark"] .anlage-picker__select-anlage {
  color: #f8f9fa;
  background-color: var(--btn-sidebar-secondary-bg, #1c2533);
  border-right-color: rgba(255, 255, 255, .1);
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
}

/* Trigger zeigt den gewaehlten Tarif (z.B. Fondspolice) — braucht wie das
   Select links einen expliziten Dark-Override, weil --bs-body-color nicht
   pro Theme umgeschaltet wird (bliebe sonst #212529 auf dunklem Combo-BG
   = unsichtbar). */
[data-theme="dark"] .anlage-picker__tarif-trigger {
  color: #f8f9fa;
}

/* :disabled muss NACH dem Dark-Override stehen bleiben (0-3-0 schlaegt
   0-2-0), sonst verliert der Disabled-State sein muted-Grau im Dark. */
[data-theme="dark"] .anlage-picker__tarif-trigger:disabled {
  color: var(--form-control-placeholder, rgba(255, 255, 255, .55));
}

[data-theme="dark"] .anlage-picker__settings-btn {
  background: #1c2533;
  color: #f8f9fa;
  border-color: rgba(255, 255, 255, .12);
}

/* Dark-Mode-Hover ersetzt durch die gemeinsame blaue Hover-Regel in
   buttons.css (BG = --nav-pills-active-bg = rgb(15,76,154) in Dark,
   weißer Text, blauer Glow). Wir lassen hier border-color: transparent
   stehen, damit der dunkle Light-Mode-Border-Rest nicht durch den
   blauen BG durchblitzt. Re-Aktivieren des alten grünen Glows:
   diese Override-Regel entfernen, alte Regel zurückbringen. */
[data-theme="dark"] .anlage-picker__settings-btn:hover,
[data-theme="dark"] .anlage-picker__settings-btn:focus-visible {
  border-color: transparent;
}

[data-theme="dark"] .anlage-picker__settings-icon {
  color: #f8f9fa;
}

[data-theme="dark"] .anlage-picker__compare-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255, 255, 255, .12);
  border-left-color: var(--sidebar-pill-active-bg, rgb(15, 76, 154));
}

/* === Anlageauswahl Main-Slot: grauer Hintergrund + Anlagetyp-Farbstreifen === */
.anlage-picker:not(.anlage-picker__compare-card) {
  background: var(--surface-soft-bg);
  border: 1px solid var(--form-control-border, rgba(0,0,0,0.12));
  border-left: 3px solid #d0d0d6;
  border-radius: var(--radius-md, 12px);
  padding: 0.5rem 0.75rem 0.75rem;
}

.anlage-picker:not(.anlage-picker__compare-card)[data-anlage-kind="fondspolice"] {
  border-left-color: #1767ff;
}
.anlage-picker:not(.anlage-picker__compare-card)[data-anlage-kind="depot"] {
  border-left-color: #f59e0b;
}
.anlage-picker:not(.anlage-picker__compare-card)[data-anlage-kind="avdepot"] {
  border-left-color: #ea580c;
}
.anlage-picker:not(.anlage-picker__compare-card)[data-anlage-kind="rurup"] {
  border-left-color: #22c55e;
}

[data-theme="dark"] .anlage-picker:not(.anlage-picker__compare-card) {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  border-left-width: 3px;
}

/* ── Compare entfernen (X-Button oben rechts in der Card) ─────────────
   Card hat position: relative (siehe .anlage-picker__compare-card). */
.anlage-picker__compare-remove-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--form-check-label-color, #6c757d);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.anlage-picker__compare-remove-btn:hover {
  opacity: 1;
  color: #dc3545;
}

/* ── "+"-Button: Vergleichsanlage hinzufügen ─────────────────────────── */
.anlage-picker__add-compare-wrapper {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.anlage-picker__add-compare-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgb(13, 110, 253);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
}
.anlage-picker__add-compare-btn:hover {
  color: var(--bs-secondary-color, #6c757d);
  opacity: 1;
}
.anlage-picker__add-compare-btn[hidden] { display: none; }

/* ── Tarifvergleich: Depot/AV-Depot-Toggles unter der Tarifauswahl ──
   Karten-Surface mit denselben Tokens wie das Tarifauswahl-Accordion
   (.sidebar-selector-accordion .accordion-item), damit die beiden Zeilen
   als Teil der ANLAGE-Auswahl lesbar sind und sich klar von den
   Einflussfaktor-Switches darunter abheben. --form-control-* /
   --surface-shadow-soft sind theme-aware (Light + Dark). */
.tv-extra-anlagen {
  background: var(--form-control-bg, #ffffff);
  border: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--surface-shadow-soft);
  padding: 0.3rem 0.85rem;
}

.tv-extra-anlagen__row {
  padding: 0.55rem 0;
}

.tv-extra-anlagen__row + .tv-extra-anlagen__row {
  border-top: 1px solid var(--form-control-border, rgba(0, 0, 0, 0.12));
}

/* Einklappbarer "Vergleichsanlagen"-Header: klickbarer Button (Label links,
   Chevron rechts), klappt die Depot/AV-Depot-Zeilen ein/aus. Theme-aware
   (Light + Dark). */
.tv-extra-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tv-extra-toggle__label {
  font-size: var(--lead-font-size, 1.0625rem);
  font-weight: 300;
  color: var(--lead-text-color, rgba(30, 46, 80, 0.88));
}

.tv-extra-toggle__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--bs-secondary-color, #6c757d);
  transition: transform 0.2s ease, color 0.15s ease;
}

.tv-extra-toggle:hover .tv-extra-toggle__chevron,
.tv-extra-toggle:focus-visible .tv-extra-toggle__chevron {
  color: var(--nav-link-hover-color, rgb(13, 110, 253));
}

.tv-extra-toggle:focus-visible {
  outline: none;
}

/* Eingeklappt: Zeilen weg, Chevron zeigt nach rechts. */
.tv-extra-toggle[aria-expanded="false"] .tv-extra-toggle__chevron {
  transform: rotate(-90deg);
}

.tv-extra-collapsed .tv-extra-anlagen {
  display: none;
}

/* === ./css/core/onboarding.css === */
/* ───── Onboarding Tour Styles ───── */

/* Restart Button (FAB neben Support-Chat) */
.onboarding-restart-fab {
  position: fixed;
  bottom: var(--support-fab-bottom, 24px);
  right: calc(var(--support-fab-right, 24px) + var(--support-fab-size, 64px) + 12px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 1080;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.15);
}
.onboarding-restart-fab:hover {
  transform: scale(1.1);
  background: rgba(52, 211, 153, 0.22);
  box-shadow: 0 4px 16px rgba(52, 211, 153, 0.3);
}
.onboarding-restart-fab-icon {
  width: 22px;
  height: 22px;
}
[data-theme="dark"] .onboarding-restart-fab {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}
[data-theme="dark"] .onboarding-restart-fab:hover {
  background: rgba(52, 211, 153, 0.25);
}

/* Welcome Modal */
.onboarding-welcome-body {
  text-align: center;
  padding: 1.5rem 1rem;
}
.onboarding-welcome-body .onboarding-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.onboarding-welcome-body h4 {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.onboarding-welcome-body p {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
}
.onboarding-welcome-body .onboarding-steps-preview {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}
.onboarding-welcome-body .onboarding-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Driver.js Overrides – fonder-Brand */
.driver-popover {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  max-width: 380px !important;
}
.driver-popover .driver-popover-title {
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.driver-popover .driver-popover-description {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #4b5563 !important;
}
.driver-popover .driver-popover-progress-text {
  font-size: 0.75rem !important;
  color: #9ca3af !important;
}
.driver-popover-next-btn,
.driver-popover-prev-btn {
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  padding: 0.35rem 0.9rem !important;
  cursor: pointer !important;
}
/* Vendor-CSS (driver-1.3.1.css) legt text-shadow: 1px 1px 0 #fff auf ALLE
   Footer-Buttons (Praege-Effekt fuer die weissen Default-Buttons). Auf dem
   gruen restylten Weiter-Button mit weisser Schrift rendert der harte
   weisse 1px-Schatten unter Root-Zoom (Subpixel-Versatz) als verschobene
   Glyphen-Kopie — Text wirkt "doppelt geschrieben". Auf unseren Buttons
   hat der Effekt keinen Zweck -> gezielt abschalten (Vendor-Datei bleibt
   unangetastet). */
.driver-popover-footer button {
  text-shadow: none !important;
}
.driver-popover-footer .driver-popover-btn-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: default !important;
}
.driver-popover-next-btn {
  background: #34d399 !important;
  color: #fff !important;
  border: none !important;
}
.driver-popover-next-btn:hover {
  background: #2bb585 !important;
}
.driver-popover-prev-btn {
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
}
.driver-popover-close-btn {
  color: #9ca3af !important;
}
.driver-popover-close-btn:hover {
  color: #374151 !important;
}

.onboarding-next-hint {
  font-size: 0.8rem;
  color: #34d399;
  font-weight: 600;
}

/* Dark Mode */

/* Modal-Hintergrund (modals.css setzt .modal-body hart auf #ffffff —
   muss hier explizit ueberschrieben werden, sonst weisser Block im Dark UI). */
[data-theme="dark"] #onboardingWelcomeModal .modal-content {
  background-color: #1e2124;
  color: #f8f9fa;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #onboardingWelcomeModal .modal-header,
[data-theme="dark"] #onboardingWelcomeModal .modal-footer {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #onboardingWelcomeModal .modal-body {
  background-color: #1e2124 !important;
  color: #f8f9fa;
}
[data-theme="dark"] #onboardingWelcomeModal h4 {
  color: #f8f9fa;
}
[data-theme="dark"] #onboardingWelcomeModal .text-muted {
  color: #adb5bd !important;
}
[data-theme="dark"] #onboardingWelcomeModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] #onboardingWelcomeModal .btn-outline-secondary {
  color: #adb5bd;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] #onboardingWelcomeModal .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f8f9fa;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .onboarding-welcome-body p {
  color: #adb5bd;
}
[data-theme="dark"] .onboarding-step-badge {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.25);
}
[data-theme="dark"] .driver-popover {
  background: #1e2228 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .driver-popover .driver-popover-title {
  color: #f8f9fa !important;
}
[data-theme="dark"] .driver-popover .driver-popover-description {
  color: #adb5bd !important;
}
[data-theme="dark"] .driver-popover-prev-btn {
  color: #adb5bd !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .driver-popover-close-btn {
  color: #6c757d !important;
}
[data-theme="dark"] .driver-popover-close-btn:hover {
  color: #f8f9fa !important;
}
/* Gehighlightetes Element im Dark Mode: heller Rand für Kontrast */
[data-theme="dark"] .driver-active-element {
  outline: 2px solid rgba(52, 211, 153, 0.5) !important;
  outline-offset: 3px;
}

/* ───── Feature-Tour FAB (Vielnutzer) — Indigo, abgesetzt vom grünen Restart-FAB ───── */
.feature-tour-fab {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}
.feature-tour-fab:hover {
  background: rgba(99, 102, 241, 0.22);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .feature-tour-fab {
  background: rgba(129, 140, 248, 0.16);
  border-color: rgba(129, 140, 248, 0.35);
  color: #a5b4fc;
}
[data-theme="dark"] .feature-tour-fab:hover {
  background: rgba(129, 140, 248, 0.26);
}

/* ───── Tour-Nudge (dezenter Toast unten links, kollidiert nicht mit den FABs) ───── */
.tour-nudge {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1085;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
  padding: 1rem 1.1rem 0.9rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tour-nudge--in { opacity: 1; transform: translateY(0); }
.tour-nudge__close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
}
.tour-nudge__close:hover { color: #4b5563; }
.tour-nudge__title { font-weight: 700; font-size: 0.95rem; color: #1f2937; margin-bottom: 0.3rem; }
.tour-nudge__text { font-size: 0.83rem; line-height: 1.45; color: #4b5563; margin-bottom: 0.75rem; }
.tour-nudge__actions { display: flex; gap: 0.5rem; align-items: center; }
.tour-nudge__cta {
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}
.tour-nudge__cta:hover { background: #4f46e5; }
.tour-nudge__later {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}
.tour-nudge__later:hover { color: #374151; }

[data-theme="dark"] .tour-nudge {
  background: #1e2330;
  border-color: rgba(129, 140, 248, 0.3);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .tour-nudge__title { color: #e5e7eb; }
[data-theme="dark"] .tour-nudge__text { color: #9ca3af; }
[data-theme="dark"] .tour-nudge__close { color: #6b7280; }
[data-theme="dark"] .tour-nudge__close:hover { color: #cbd5e1; }
[data-theme="dark"] .tour-nudge__cta { background: #6366f1; }
[data-theme="dark"] .tour-nudge__cta:hover { background: #818cf8; }
[data-theme="dark"] .tour-nudge__later { color: #9ca3af; }
[data-theme="dark"] .tour-nudge__later:hover { color: #e5e7eb; }

/* === ./css/core/grouped_chooser.css === */
/* Grouped Chooser – Provider logos */

.fp-provider-logo {
    display: inline-block;
    height: 22px;
    width: 22px;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}

[data-theme="dark"] .fp-provider-logo {
    filter: brightness(0.9);
}

/* === ./css/core/cashflow.css === */
/* ── Cashflow-Tab (Side 6) ──────────────────────────────────────
   Design an Bedarf/Anlagefinder angelehnt: links nackte Eingaben,
   rechts EINE sub-card mit Kacheln + Donut + Sparpotenzial.
   Base = Dark, [data-theme="light"] überschreibt. Accent: --white-accent.
   ─────────────────────────────────────────────────────────────── */

/* ── Linke Spalte ── */
.cf-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cf-left-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0 0 8px;
}
.cf-left-label small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cf-income-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.9rem;
}
.cf-income-total span { opacity: 0.7; }
.cf-income-total strong { color: #16a34a; font-size: 1.05rem; }
[data-theme="light"] .cf-income-total { border-color: rgba(0, 0, 0, 0.08); }
.cf-take-btn { margin-top: 8px; white-space: nowrap; }
.cf-left-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 22px 0 18px;
}
[data-theme="light"] .cf-left-divider { border-top-color: rgba(0, 0, 0, 0.10); }

/* ── KPI-Kacheln (inset, in der sub-card) ── */
.cf-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cf-kpi {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .cf-kpi { background: #f5f5f7; border-color: rgba(0, 0, 0, 0.05); }
.cf-kpi-label { font-size: 0.76rem; opacity: 0.7; }
.cf-kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.cf-kpi-in .cf-kpi-value { color: #16a34a; }
.cf-kpi-out .cf-kpi-value { color: #ef4444; }

/* Überschuss-Kachel: semantisch grün (positiv) / rot (negativ), in beiden Modi lesbar */
.cf-kpi-result.cf-pos,
[data-theme="light"] .cf-kpi-result.cf-pos { background: #059669; border-color: transparent; }
.cf-kpi-result.cf-neg,
[data-theme="light"] .cf-kpi-result.cf-neg { background: #dc2626; border-color: transparent; }
.cf-kpi-result .cf-kpi-label { color: #fff !important; opacity: 0.9; }
.cf-kpi-result .cf-kpi-value { color: #fff !important; }

/* ── Section-Titel + Divider ── */
.cf-section-title { font-weight: 600; font-size: 1.0rem; margin-bottom: 14px; }
.cf-section-title small { opacity: 0.55; font-weight: 400; }
.cf-divider { margin: 20px 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
[data-theme="light"] .cf-divider { border-top-color: rgba(0, 0, 0, 0.08); }

/* ── Donut + editierbare Legende ── */
.cf-chart-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
}
.cf-donut { width: 190px; height: 190px; border-radius: 50%; position: relative; margin: 0 auto; }
.cf-donut-empty { background: rgba(255, 255, 255, 0.07) !important; }
[data-theme="light"] .cf-donut-empty { background: rgba(0, 0, 0, 0.06) !important; }
.cf-donut-hole {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #161b26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .cf-donut-hole { background: #ffffff; }
.cf-donut-sum { font-weight: 700; font-size: 1.05rem; }
.cf-donut-cap { font-size: 0.72rem; opacity: 0.6; }

.cf-legend { list-style: none; margin: 0; padding: 0; }
.cf-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr auto 130px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cf-legend-item:last-child { border-bottom: none; }
[data-theme="light"] .cf-legend-item { border-color: rgba(0, 0, 0, 0.06); }
.cf-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.cf-legend-label { font-size: 0.92rem; }
.cf-legend-pct { font-size: 0.8rem; opacity: 0.55; min-width: 42px; text-align: right; }
.cf-legend-zero .cf-legend-dot { opacity: 0.3; }
.cf-legend-zero .cf-legend-pct { visibility: hidden; }
.cf-legend-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cf-legend-edit:focus-within { border-color: var(--white-accent, #1767ff); background: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .cf-legend-edit { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.10); }
.cf-legend-input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: right;
  font-weight: 600;
  font-size: 1.0rem;
  color: inherit;
  padding: 0;
  outline: none;
  appearance: none;
}
.cf-legend-input::-webkit-outer-spin-button,
.cf-legend-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-legend-unit { opacity: 0.55; font-size: 0.9rem; flex-shrink: 0; }


/* ── Sparpotenzial ── */
.cf-spar-lead { margin-bottom: 12px; line-height: 1.5; }
.cf-neg-text { color: #ef4444; }
.cf-spar-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}
[data-theme="light"] .cf-spar-bar { background: rgba(0, 0, 0, 0.07); }
.cf-spar-fill { height: 100%; background: var(--white-accent, #1767ff); border-radius: 999px; transition: width 0.4s ease; }
.cf-spar-hint { font-size: 0.82rem; opacity: 0.72; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cf-spar-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.cf-empty { opacity: 0.6; font-style: italic; padding: 6px 0; margin: 0; }
.cf-weiter-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; }
.cf-weiter-btn svg { width: 16px; height: 16px; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .cf-kpi-row { grid-template-columns: 1fr; }
  .cf-chart-grid { grid-template-columns: 1fr; }
}

/* Schmale Screens: die feste 130px-Eingabespalte + 12px-Gaps machten die
   Legenden-Zeile breiter als die Card -> das €-Eingabefeld lief rechts über
   ("Eingabefelder überschnitten"). Eingabespalte flexibel (minmax) + Label
   darf schrumpfen/umbrechen (minmax(0,1fr)) + kleinere Gaps. */
@media (max-width: 575px) {
  /* %-Spalte raus (Anteile zeigt der Donut) -> Label bekommt Platz, bleibt
     einzeilig. 3-Spalten-Grid: Punkt | Label | €-Eingabe. */
  .cf-legend-item {
    grid-template-columns: 12px minmax(0, 1fr) minmax(76px, 108px);
    column-gap: 8px;
  }
  .cf-legend-pct { display: none; }
  .cf-legend-edit { padding: 4px 7px; }
  .cf-legend-label {
    font-size: 0.9rem;
    /* Sicherung: lange Einzelwörter notfalls umbrechen statt überlaufen. */
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ───── Cashflow-Kassensturz als Modal (in Pers. Daten) ─────
   Größer + Look wie die frühere Cashflow-Seite: Body ohne Padding,
   cashflow.html bringt eigene Spalten-Paddings (bg-left-col) mit. */
.cashflow-modal-dialog {
  max-width: min(1500px, 97vw);
}
.cashflow-modal-body {
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
}
.cashflow-modal-body > .row {
  margin: 0;
  --bs-gutter-x: 0;
}
/* Linke Eingabe-Spalte: eigenes Padding, sonst kleben die Labels am Modalrand
   (gutter-x:0 oben entfernt das Bootstrap-Spalten-Padding). */
.cashflow-modal-body .bg-left-col {
  padding: 1.1rem 1.5rem 1.25rem 1.9rem;
}
.cashflow-modal-body .bg-left-col > .overflow-auto > .container {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* Rechter Inhalt ohne Card (schlicht, gute Abstände, füllt die Spalte) */
.cashflow-modal-body .cf-right-area {
  padding: 1.25rem 1.9rem 1.6rem 1.75rem;
}
.cashflow-modal-body .cf-kpi-row {
  margin-bottom: 1.25rem;
}
.cashflow-modal-body .cf-section-title {
  margin-top: 0.25rem;
}
/* Donut + Legende sollen die volle Breite nutzen (kein Leerraum rechts) */
.cashflow-modal-body .cf-chart-grid {
  width: 100%;
}
.cashflow-modal-body .cf-legend {
  flex: 1;
}

/* === ./css/core/timeline.css === */
/* ============================================================
   Interaktiver Zeitstrahl (.fwt-*) — Light + Dark.

   Design "Accent-Pill": hoher Pill-Track auf Soft-Surface, Ansparphase
   als Akzent-Verlauf (an --nav-pills-active-bg angelehnt), Auszahlphase
   schraffiert. Marker = Lollipop: Akzent-Punkt + Stiel + Label als
   Pill-Chip. Nutzt --accent-rgb und färbt sich damit automatisch mit
   dem Accent-Picker/Whitelabel um.

   Verwendet von:
   - Fondswechsel "Zeitpunkte der Wechsel" (#fondswechsel_timeline,
     fondswechsel_rows.js)
   - Zuzahlung + Aenderung mtl. Investition im Modal "Beitragseinstellungen"
     (#zuzahlung_timeline / #money_change_timeline, mon_inc_einstellungen.js
     — nummerierte Punkte)

   Revert: diese Datei entfernen + @import in base_common.css raus.
   ============================================================ */
.fondswechsel-timeline { padding: 2.9rem 0.6rem 1.9rem 1.25rem; }
.fwt-track-wrap { position: relative; }
.fwt-track {
  position: relative; height: 14px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-soft-bg, #f5f5f7);
  border: 1px solid var(--form-control-border, #d0d0d6);
  cursor: pointer; touch-action: none;
}
.fwt-seg-anspar {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: var(--radius-pill, 999px) 0 0 var(--radius-pill, 999px);
  background: linear-gradient(90deg,
      rgba(var(--accent-rgb, 23, 103, 255), 0.10),
      rgba(var(--accent-rgb, 23, 103, 255), 0.45));
}
.fwt-seg-auszahl {
  position: absolute; top: 0; bottom: 0; right: 0;
  border-radius: 0 var(--radius-pill, 999px) var(--radius-pill, 999px) 0;
  background: repeating-linear-gradient(135deg,
      rgba(var(--accent-rgb, 23, 103, 255), 0.20) 0 6px,
      rgba(var(--accent-rgb, 23, 103, 255), 0.07) 6px 12px);
}
/* Rentenbeginn-Marker (vertikale Linie + Label darunter) */
.fwt-rente {
  position: absolute; top: -8px; bottom: -8px; width: 2px;
  background: rgb(var(--accent-rgb, 23, 103, 255));
  transform: translateX(-1px);
}
.fwt-rente-label {
  position: absolute; top: calc(100% + 4px); transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 700;
  color: rgb(var(--accent-rgb, 23, 103, 255));
  white-space: nowrap;
}
/* Start-/End-Beschriftung */
.fwt-ends { display: flex; justify-content: space-between; margin-top: 1.6rem; font-size: 0.72rem; color: #6c757d; }
.fwt-ends b { color: #343a40; font-weight: 600; }
/* Ereignis-Punkt (Button, ziehbar) — Akzentfarbe, beide Phasen gleich */
.fwt-point {
  position: absolute; top: 50%; width: 22px; height: 22px; padding: 0;
  border-radius: 50%;
  border: 2px solid var(--white-surface, #ffffff);
  background: rgb(var(--accent-rgb, 23, 103, 255));
  transform: translate(-50%, -50%); cursor: grab;
  box-shadow: var(--white-shadow-xs, 0 3px 10px rgba(15, 42, 97, 0.06));
  transition: box-shadow .12s, transform .05s; z-index: 2;
}
.fwt-point:hover, .fwt-point:focus-visible {
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 23, 103, 255), 0.28);
  outline: none;
}
.fwt-point.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); }
/* Zuletzt angefasster Punkt (+ sein Label) liegt dauerhaft ueber den anderen
   — JS setzt die Klassen bei pointerdown/focus (mon_inc_einstellungen.js,
   fondswechsel_rows.js). Punkte ohne --top behalten die DOM-Reihenfolge
   (rechts ueberlappt links). Doppelte Klasse = hoehere Spezifitaet, damit
   die spaeter folgenden Basis-Regeln (z-index 2/3) nicht gewinnen. */
.fwt-point.fwt-point--top { z-index: 6; }
.fwt-point-label.fwt-point-label--top { z-index: 7; }
/* Lollipop-Stiel zwischen Punkt und Label-Chip */
.fwt-point::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 100%;
  width: 2px; height: 10px;
  background: rgba(var(--accent-rgb, 23, 103, 255), 0.45);
  transform: translateX(-50%);
}
/* Nummerierter Punkt (Zuzahlung/Beitragsaenderung): Ziffer im Punkt,
   korrespondiert mit der nummerierten Eingabezeile darunter. */
.fwt-point--num {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 700; color: #fff; line-height: 1;
}
/* Persistentes Label ueber jedem Punkt (Alter + Jahr) als Pill-Chip */
.fwt-point-label {
  position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; line-height: 1.15; text-align: center; white-space: nowrap;
  padding: 0.18rem 0.55rem;
  background: var(--white-surface, #ffffff);
  border: 1px solid var(--white-border-strong, rgba(15, 42, 97, 0.16));
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--white-shadow-xs, 0 3px 10px rgba(15, 42, 97, 0.06));
  color: var(--white-text-muted, #4d5f7c);
  pointer-events: none; z-index: 3;
}
.fwt-point-label b {
  display: inline; margin-right: 0.3rem; font-weight: 700;
  color: rgb(var(--accent-rgb, 23, 103, 255));
}
.fwt-point.dragging + .fwt-point-label, .fwt-point:hover + .fwt-point-label, .fwt-point:focus-visible + .fwt-point-label { color: #212529; }
/* Automatischer Vorwechsel (Rendite-Split): Umschichtung Anspar- -> Entnahmephase.
   Neutral-graue Fuellung + Umschichtungs-Pfeile; ziehbar wie normale Punkte,
   aber nicht entfernbar. Badge "Umschichtung" im Label-Chip. */
.fwt-point--forced {
  background: var(--white-text-muted, #4d5f7c);
  cursor: grab;
}
.fwt-point--forced:hover, .fwt-point--forced:focus-visible {
  box-shadow: 0 0 0 4px rgba(77, 95, 124, 0.25);
}
.fwt-point--forced::before { background: rgba(77, 95, 124, 0.5); }
.fwt-forced-ico {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 0.62rem; line-height: 1;
  color: #fff; font-weight: 700;
}
.fwt-point-label--forced b { color: var(--white-text-muted, #4d5f7c); }
.fwt-forced-badge {
  display: block; margin-top: 1px;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white-text-muted, #4d5f7c);
}
.fwt-empty { font-size: 0.8rem; color: #6c757d; text-align: center; padding: 0.5rem 0; }

[data-theme="dark"] .fwt-track {
  background: #1c2533;
  border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .fwt-seg-anspar {
  background: linear-gradient(90deg,
      rgba(var(--accent-rgb, 92, 152, 255), 0.14),
      rgba(var(--accent-rgb, 92, 152, 255), 0.50));
}
[data-theme="dark"] .fwt-seg-auszahl {
  background: repeating-linear-gradient(135deg,
      rgba(var(--accent-rgb, 92, 152, 255), 0.26) 0 6px,
      rgba(var(--accent-rgb, 92, 152, 255), 0.10) 6px 12px);
}
[data-theme="dark"] .fwt-ends { color: #adb5bd; }
[data-theme="dark"] .fwt-ends b { color: #e9ecef; }
[data-theme="dark"] .fwt-point {
  border-color: #1a1d20;
  box-shadow: none;
}
[data-theme="dark"] .fwt-point--num { color: #fff; }
[data-theme="dark"] .fwt-point-label {
  background: #1c2533;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  color: #adb5bd;
}
[data-theme="dark"] .fwt-point-label b { color: #f8f9fa; }
[data-theme="dark"] .fwt-point.dragging + .fwt-point-label,
[data-theme="dark"] .fwt-point:hover + .fwt-point-label,
[data-theme="dark"] .fwt-point:focus-visible + .fwt-point-label { color: #e9ecef; }
[data-theme="dark"] .fwt-point--forced { background: #6b7894; }
[data-theme="dark"] .fwt-forced-ico { color: #f8f9fa; }
[data-theme="dark"] .fwt-point-label--forced b { color: #aab6cc; }
[data-theme="dark"] .fwt-forced-badge { color: #aab6cc; }
[data-theme="dark"] .fwt-empty { color: #adb5bd; }

/* === ./css/core/cost_chart_hint.css === */
/* ============================================================
   In-Chart-Kostenbox (Anlagefinder, Tab "Kosten")
   Kompakte Hinweisbox, die per JS (dep_fon_chart_dep.js) in den
   datenfreien Bereich der Kosten-Grafik positioniert wird.
   Fallback (Mobile / zu wenig Platz): Box wird in den
   .cost-hint-fallback Collapse unter der Grafik verschoben.
   ============================================================ */

.cost-chart-wrap {
  position: relative;
}

.cost-hintbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  max-width: min(74%, 440px);
  /* Chart-Tooltips & Hover dürfen nicht blockiert werden */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0.6rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #495057;
  /* Erst nach JS-Platzierung einblenden (verhindert Aufblitzen oben links) */
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cost-hintbox.is-placed {
  opacity: 1;
}

.cost-hintbox-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #868e96;
  margin-bottom: 0.2rem;
}

.cost-hintbox-head svg {
  width: 12px;
  height: 12px;
}

.cost-hintbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Zweispaltig: hält die Box flach, damit sie über den Kurven Platz findet */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: 1rem;
  row-gap: 1px;
}

.cost-hintbox-list .span2 {
  grid-column: 1 / -1;
}

.cost-hintbox-warn {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  color: #b45309;
  font-size: 0.7rem;
}

.cost-hintbox-foot {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: #868e96;
}

[data-theme="dark"] .cost-hintbox {
  background: rgba(45, 50, 56, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #e9ecef;
}

[data-theme="dark"] .cost-hintbox-head,
[data-theme="dark"] .cost-hintbox-foot {
  color: #adb5bd;
}

[data-theme="dark"] .cost-hintbox-warn {
  border-top-color: rgba(255, 255, 255, 0.15);
  color: #fbbf24;
}

/* Fallback-Modus: Box liegt im Collapse unter der Grafik — Overlay-Optik aus */
.cost-hint-fallback .cost-hintbox {
  position: static;
  opacity: 1;
  pointer-events: auto;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

[data-theme="dark"] .cost-hint-fallback .cost-hintbox {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ============================================================
   Hinweis "keine Kosten bei Beitragsfreistellung"
   Eigene Fondspolice mit Gammakosten, aber 0 % bei Beitrags-
   freistellung: die Kurve faellt am Rentenbeginn senkrecht auf 0,
   rechts davon bleibt die Flaeche leer. Genau dort sitzt der Kasten.
   Bewusst KEINE JS-Positionsmathe (die .cost-hintbox-Skyline
   konkurriert um denselben Platz) — prozentbasiert und damit
   zoom-invariant. Farben wie .afbar-hint-warn (dep_fon_plot.css).
   ============================================================ */
.cost-bfrei-hint {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  z-index: 6;
  width: min(42%, 320px);
  background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 100%);
  border: 1px solid #f4d03f;
  border-radius: 8px;
  padding: 0.5rem 1.6rem 0.55rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #856404;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cost-bfrei-hint-close {
  position: absolute;
  top: 2px;
  right: 6px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  color: #856404;
  opacity: 0.75;
  cursor: pointer;
}

.cost-bfrei-hint-close:hover {
  opacity: 1;
}

.cost-bfrei-hint-text {
  display: block;
}

.cost-bfrei-hint-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: #7a5c00;
  text-decoration: underline;
}

.cost-bfrei-hint-link svg {
  width: 13px;
  height: 13px;
}

.cost-bfrei-hint-link:hover {
  color: #5c4500;
}

/* Schmale Viewports: der leere Bereich ist zu klein fuer eine
   Overlay-Box — dann volle Breite unter der Grafik. */
@media (max-width: 640px) {
  .cost-bfrei-hint {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.5rem;
  }
}

[data-theme="dark"] .cost-bfrei-hint {
  background: linear-gradient(135deg, rgba(254, 249, 231, 0.1) 0%, rgba(254, 243, 205, 0.15) 100%);
  border-color: rgba(244, 208, 63, 0.4);
  color: #ffc107;
}

[data-theme="dark"] .cost-bfrei-hint-close,
[data-theme="dark"] .cost-bfrei-hint-link {
  color: #ffc107;
}

/* Kurzes Hervorheben des Zielfelds nach dem Sprung aus dem Hinweis. */
.field-highlight-pulse {
  animation: fonder-field-pulse 0.9s ease-in-out 2;
  border-color: #f4d03f !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.35) !important;
}

@keyframes fonder-field-pulse {
  0%, 100% { box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.15); }
  50%      { box-shadow: 0 0 0 0.35rem rgba(244, 208, 63, 0.55); }
}

/* ============================================================
   Kostenverlauf im Tarifvergleich-Kostenmodal
   Grafik ist klickbar (Chip + Panel wie im Steuern-Tab). Darunter die
   Spalten-Tabelle: eine Spalte je Tarif, max. 6 -> horizontal scrollbar
   in eigenem Container (die Seite darf nie horizontal scrollen).
   ============================================================ */
.tv-cost-chart-wrap {
  position: relative;
}

.tv-cost-table-wrap {
  overflow-x: auto;
}

.tv-cost-table th.tv-cost-th,
.tv-cost-table td.tv-cost-td {
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  padding: 0.3rem 0.5rem;
}

.tv-cost-table th.tv-cost-th {
  font-size: 0.75rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tv-cost-table td.tv-cost-td .cost-detail-formula {
  white-space: normal;
  max-width: 14rem;
  margin-left: auto;
}

.tv-cost-sum-row td {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .tv-cost-table th.tv-cost-th,
[data-theme="dark"] .tv-cost-sum-row td {
  border-color: rgba(255, 255, 255, 0.12);
}

/* === ./css/core/tax_chart_detail.css === */
/* ============================================================
   Steuern-Tab (Anlagefinder): klickbare Datenpunkte
   - .tax-chart-hint: Hinweis-Chip oben links im Chart, per Pfeil
     einklappbar (Zustand in localStorage, eingeklappt = "Details")
   - .tax-year-detail: Detail-Panel unter der Grafik mit der
     Jahres-Steuerrechnung (gefüllt von dep_fon_chart_dep.js)
   ============================================================ */

.tax-chart-wrap {
  position: relative;
}

.tax-chart-wrap canvas {
  cursor: pointer;
}

.tax-chart-hint {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 70%;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.25rem 0.4rem 0.25rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.3;
  color: #495057;
  /* Aufblitzen vor der Zustands-Initialisierung (localStorage) vermeiden */
  visibility: hidden;
}

.tax-chart-hint.is-ready {
  visibility: visible;
}

.tax-chart-hint-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tax-chart-hint-text svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.tax-chart-hint-mini {
  display: none;
  font-weight: 600;
}

.tax-chart-hint-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0.1rem;
  border-radius: 50%;
  color: #868e96;
  cursor: pointer;
}

.tax-chart-hint-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #495057;
}

.tax-chart-hint-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

/* Eingeklappt: nur "Details" + Pfeil zeigt nach rechts; ganzer Chip klickbar */
.tax-chart-hint.is-collapsed {
  cursor: pointer;
  padding-left: 0.55rem;
}

.tax-chart-hint.is-collapsed .tax-chart-hint-text {
  display: none;
}

.tax-chart-hint.is-collapsed .tax-chart-hint-mini {
  display: inline;
}

.tax-chart-hint.is-collapsed .tax-hint-chevron {
  transform: rotate(180deg);
}

/* ── Detail-Panel unter der Grafik ── */

.tax-year-detail {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  background: rgba(0, 0, 0, 0.015);
}

.tax-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tax-detail-title {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Klammer-Hinweis hinter der Panel-Überschrift ("Klicke auf ein anderes
   Jahr, …") — dezent, nicht fett, damit die Überschrift dominant bleibt. */
.tax-detail-title-hint {
  font-weight: 400;
  font-size: 0.8rem;
  color: #64748b;
}

[data-theme="dark"] .tax-detail-title-hint {
  color: #94a3b8;
}

.tax-detail-close {
  font-size: 0.7rem;
}

.tax-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
}

.tax-detail-product-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.tax-detail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tax-detail-event {
  margin-bottom: 0.5rem;
}

.tax-detail-event-title {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #868e96;
  margin-bottom: 0.15rem;
}

.tax-detail-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}

.tax-detail-table td {
  padding: 0.1rem 0;
  vertical-align: top;
}

.tax-detail-table td + td {
  white-space: nowrap;
  padding-left: 0.75rem;
}

.tax-detail-table .tax-row-sub td {
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.tax-detail-table .tax-row-result td {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

.tax-detail-table .tax-row-muted td {
  color: #868e96;
}

.tax-detail-table .tax-row-note {
  color: #868e96;
  font-size: 0.72rem;
  font-weight: 400;
}

/* AV-Depot Zwei-Topf-Herleitung: Topf-Überschrift (gefördert/ungefördert) und
   hervorgehobener Ø-Effektivsatz (Steuer ÷ Brutto, der angezeigte Steuersatz). */
.tax-detail-table .tax-row-pot td {
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  padding-top: 0.3rem;
}

.tax-detail-table .tax-row-pot .tax-pot-name {
  font-weight: 600;
  color: #495057;
}

.tax-detail-table .tax-row-rate td {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  font-weight: 600;
  color: #1971c2;
}

.tax-detail-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
}

.tax-detail-empty {
  font-size: 0.8rem;
  color: #868e96;
}

.tax-detail-foot {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: #868e96;
}

/* ── Dark Mode ── */

[data-theme="dark"] .tax-chart-hint {
  background: rgba(45, 50, 56, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #e9ecef;
}

[data-theme="dark"] .tax-chart-hint-toggle {
  color: #adb5bd;
}

[data-theme="dark"] .tax-chart-hint-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8f9fa;
}

[data-theme="dark"] .tax-year-detail {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .tax-detail-event-title,
[data-theme="dark"] .tax-detail-empty,
[data-theme="dark"] .tax-detail-foot,
[data-theme="dark"] .tax-detail-table .tax-row-muted td,
[data-theme="dark"] .tax-detail-table .tax-row-note {
  color: #adb5bd;
}

[data-theme="dark"] .tax-detail-table .tax-row-sub td {
  border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .tax-detail-table .tax-row-result td {
  border-top-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .tax-detail-table .tax-row-pot td {
  border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .tax-detail-table .tax-row-pot .tax-pot-name {
  color: #dee2e6;
}

[data-theme="dark"] .tax-detail-table .tax-row-rate td {
  border-top-color: rgba(255, 255, 255, 0.35);
  color: #74c0fc;
}

[data-theme="dark"] .tax-detail-sum {
  border-top-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .tax-detail-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Kostentab: Formelzeilen im Detail-Panel (Chip nutzt .tax-chart-hint) ── */
.cost-detail-formula {
  font-size: 0.72rem;
  color: #6c757d;
  margin-top: 2px;
}

[data-theme="dark"] .cost-detail-formula {
  color: #9ca3af;
}

/* Kosten-Chip (data-cost-hint-chip): die Chip-Flaeche darf keine Klicks auf die
   darunterliegende Kurve schlucken (Jahr 0..~35 liegen unter dem Chip). Nur
   Text (zum Aufklappen) und Pfeil bleiben klickbar. */
.tax-chart-hint[data-cost-hint-chip] {
  pointer-events: none;
}

.tax-chart-hint[data-cost-hint-chip] .tax-chart-hint-toggle,
.tax-chart-hint[data-cost-hint-chip].is-collapsed {
  pointer-events: auto;
}

/* === ./css/core/chart_scale_toggle.css === */
/* ============================================================
   Linear/Log-Toggle für Chart-y-Achsen (Variante D)
   Kleiner Overlay-Pill-Chip oben rechts im Plotbereich — erzeugt
   und positioniert von dep_fon_chart_dep.js (yScaleTogglePlugin).
   Eingesetzt im Anlagefinder (Steuern-/Kosten-Tab) und Tarifvergleich.
   ============================================================ */

.y-scale-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: 0.68rem;
  line-height: 1;
  /* Aufblitzen vor der ersten Positionierung vermeiden */
  visibility: hidden;
}

.y-scale-toggle.is-ready {
  visibility: visible;
}

.y-scale-toggle-seg {
  border: 0;
  background: transparent;
  padding: 0.28rem 0.55rem;
  color: #868e96;
  cursor: pointer;
  font-size: inherit;
}

.y-scale-toggle-seg:hover {
  color: #495057;
  background: rgba(0, 0, 0, 0.04);
}

.y-scale-toggle-seg.is-active {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  font-weight: 600;
  cursor: default;
}

[data-theme="dark"] .y-scale-toggle {
  background: rgba(45, 50, 56, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .y-scale-toggle-seg {
  color: #adb5bd;
}

[data-theme="dark"] .y-scale-toggle-seg:hover {
  color: #f8f9fa;
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .y-scale-toggle-seg.is-active {
  background: rgba(13, 110, 253, 0.3);
  color: #9ec5fe;
}

/* === ./css/core/assistent.css === */
/* ===========================================================================
   fonder Assistent — Chat als Arbeitsflaeche.

   Zwei Modi, ein Regelwerk:
     .aix--seite  Vollflaeche auf Seite 5
     .aix--panel  angedockt neben der Beratung

   Dark und Light durchgaengig ueber die --aix-*-Variablen; der Selektor ist
   [data-theme="dark"] (NICHT data-bs-theme).
   =========================================================================== */

.aix {
  --aix-bg: #f6f8fc;
  --aix-panel: #ffffff;
  --aix-border: rgba(20, 32, 58, .10);
  --aix-text: #14203a;
  --aix-muted: #5b6b85;
  --aix-accent: #1767ff;
  --aix-user: #e8f0ff;
  --aix-good: #10b981;
  --aix-warn: #f59e0b;
  --aix-soft: rgba(127, 148, 190, .09);
  --aix-schatten: 0 18px 48px rgba(16, 30, 62, .16);
  /* Untergrund der Bewertungs-Daumen (Hover und gewaehlter Zustand). Eigene
     Variablen, weil sie in beiden Farbmodi unterschiedlich decken muessen. */
  --aix-daumen-gut: rgba(16, 185, 129, .16);
  --aix-daumen-schlecht: rgba(245, 158, 11, .18);
}

[data-theme="dark"] .aix {
  --aix-bg: #0f1728;
  --aix-panel: #16213a;
  --aix-border: rgba(255, 255, 255, .12);
  --aix-text: #e8eefc;
  --aix-muted: #9fb0cc;
  --aix-accent: #5c98ff;
  --aix-user: #1e2f52;
  --aix-good: #34d399;
  --aix-warn: #fbbf24;
  --aix-soft: rgba(255, 255, 255, .05);
  --aix-schatten: 0 18px 48px rgba(0, 0, 0, .48);
  --aix-daumen-gut: rgba(52, 211, 153, .22);
  --aix-daumen-schlecht: rgba(251, 191, 36, .22);
}

.aix {
  display: flex;
  flex-direction: column;
  background: var(--aix-bg);
  color: var(--aix-text);
  overflow: hidden;
}

.aix--seite {
  height: calc(100vh - 150px);
  min-height: 520px;
  border: 1px solid var(--aix-border);
  border-radius: 16px;
}

.aix--panel { height: 100%; }

/* --- Kopf (nur Vollflaeche) ---------------------------------------------- */
.aix-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--aix-border);
  background: var(--aix-panel);
  display: flex;
  align-items: center;
  gap: 10px;
}
.aix-head h5 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--aix-text); }
.aix-head small { color: var(--aix-muted); }
.aix-kunde {
  margin-left: auto;
  font-size: .8rem;
  color: var(--aix-muted);
  background: var(--aix-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

/* --- Verlauf -------------------------------------------------------------- */
.aix-stream { flex: 1; overflow-y: auto; padding: 22px; }
.aix--panel .aix-stream { padding: 16px; }

.aix-msg { max-width: 860px; margin: 0 auto 18px; }
.aix-msg.user { text-align: right; }
.aix-bubble {
  display: inline-block;
  text-align: left;
  padding: 11px 15px;
  border-radius: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--aix-panel);
  border: 1px solid var(--aix-border);
  max-width: 100%;
}
.aix-msg.user .aix-bubble { background: var(--aix-user); border-color: transparent; }

/* ---------------------------------------------------------------------------
   Wartezeile ("was tue ich gerade").

   Der Assistent braucht fuer eine Antwort mit Werkzeugen rund 25 Sekunden, und
   der Text kommt zwangslaeufig ZULETZT — erst arbeitet die Schleife, dann
   redet das Modell. Drei statische Punkte sagen in dieser Zeit nur "irgendwas
   passiert"; sie sehen bei 2 s und bei 30 s identisch aus. Diese Zeile zeigt
   stattdessen den echten Schritt aus der Schleife (SSE-Ereignis ``schritt``).

   Beide Farbmodi kommen ueber die --aix-*-Variablen; eigene Farben stehen hier
   bewusst keine.
   --------------------------------------------------------------------------- */
.aix-schritt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--aix-muted);
}
.aix-schritt-punkte { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.aix-schritt-punkte b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aix-accent);
  opacity: .35;
  animation: aix-punkt 1.1s ease-in-out infinite;
}
.aix-schritt-punkte b:nth-child(2) { animation-delay: .16s; }
.aix-schritt-punkte b:nth-child(3) { animation-delay: .32s; }
@keyframes aix-punkt {
  0%, 100% { opacity: .3; transform: translateY(0); }
  40%      { opacity: 1;  transform: translateY(-2px); }
}
/* Der Text selbst wandert nicht, er schimmert: ein heller Streifen laeuft
   einmal je 2,4 s durch die Schrift. Bewegung ohne Sprung — daneben steht
   gleich die fertige Antwort, ein hueppfender Text waere dort Unruhe. */
.aix-schritt-text {
  background: linear-gradient(
    90deg,
    var(--aix-muted) 0%, var(--aix-muted) 38%,
    var(--aix-text) 50%,
    var(--aix-muted) 62%, var(--aix-muted) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aix-schimmer 2.4s linear infinite;
}
@keyframes aix-schimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
/* Wechselt der Schritt, blendet der neue Text kurz auf: sonst ist bei zwei
   aehnlichen Schritten nicht zu sehen, DASS es weiterging. */
.aix-schritt-text.aix-schritt-neu { animation: aix-schimmer 2.4s linear infinite, aix-auf .28s ease-out; }
@keyframes aix-auf {
  from { opacity: .25; transform: translateY(2px); }
  to   { opacity: 1;   transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .aix-schritt-punkte b,
  .aix-schritt-text,
  .aix-schritt-text.aix-schritt-neu { animation: none; }
  .aix-schritt-text { color: var(--aix-muted); background: none; -webkit-text-fill-color: currentColor; }
  .aix-schritt-punkte b { opacity: .6; }
}

/* Formatierte Bot-Antwort (Markdown-Renderer des Support-Chats). Ohne
   white-space-Reset wuerde pre-wrap die Absaetze doppelt umbrechen. */
.aix-bubble.aix-md { white-space: normal; }
/* Eine globale Regel (p, li { color: var(--body-text-color) }) faerbt sonst
   den Antworttext in die Body-Farbe — im dunklen Panel war die Antwort damit
   dunkelblau auf dunkelblau und praktisch unlesbar. Die Bubble bestimmt ihre
   Textfarbe selbst (--aix-text), Absaetze erben sie. */
.aix-bubble.aix-md p,
.aix-bubble.aix-md li,
.aix-bubble.aix-md strong { color: inherit; }
.aix-bubble.aix-md .chat-md-p { margin: 0 0 .55em; }
.aix-bubble.aix-md .chat-md-p:last-child { margin-bottom: 0; }
.aix-bubble.aix-md .chat-md-list { margin: 0 0 .55em; padding-left: 1.25em; }
.aix-bubble.aix-md .chat-md-list:last-child { margin-bottom: 0; }
.aix-bubble.aix-md li { margin-bottom: .2em; }
.aix-bubble.aix-md code {
  background: var(--aix-soft);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .88em;
}
.aix-bubble.aix-md a { color: var(--aix-accent); }
.aix-bubble.aix-md .chat-md-h {
  font-size: .95rem;
  font-weight: 700;
  margin: .7em 0 .3em;
  color: inherit;
}
.aix-bubble.aix-md .chat-md-h:first-child { margin-top: 0; }

/* Tabellen: Ein Kostenvergleich in Prosa ist unlesbar. Schmale Spalten und
   waagerechtes Scrollen im eigenen Kasten, damit eine breite Tabelle im Panel
   nicht die Blase sprengt. */
.aix-bubble.aix-md .chat-md-tablewrap {
  overflow-x: auto;
  margin: .5em 0;
  border: 1px solid var(--aix-border);
  border-radius: 8px;
}
.aix-bubble.aix-md .chat-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86em;
}
.aix-bubble.aix-md .chat-md-table th,
.aix-bubble.aix-md .chat-md-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--aix-border);
  white-space: nowrap;
}
.aix-bubble.aix-md .chat-md-table th {
  background: var(--aix-soft);
  font-weight: 600;
}
.aix-bubble.aix-md .chat-md-table tr:last-child td { border-bottom: 0; }
/* Zahlen rechtsbündig: In einer Kostenspalte muss man die Größenordnung
   auf einen Blick vergleichen können. */
.aix-bubble.aix-md .chat-md-table td:not(:first-child),
.aix-bubble.aix-md .chat-md-table th:not(:first-child) { text-align: right; }

/* --- Ergebnis-Karte: Zahlen als UI statt als Prosa ------------------------ */
.aix-card {
  max-width: 860px;
  margin: 0 auto 18px;
  background: var(--aix-panel);
  border: 1px solid var(--aix-border);
  border-radius: 14px;
  padding: 18px 20px;
}
.aix--panel .aix-card { padding: 14px 16px; }
.aix-card h6 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; color: var(--aix-text); }
.aix-sub { color: var(--aix-muted); font-size: .86rem; margin-bottom: 14px; }
.aix-rows { display: flex; flex-direction: column; gap: 8px; }
.aix-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--aix-soft);
}
.aix-row .k { color: var(--aix-muted); }
.aix-row .v { font-weight: 600; }
.aix-row.gut .v { color: var(--aix-good); }
.aix-row.warnung .v { color: var(--aix-warn); }

/* --- Eingabe-Karte: der Assistent fragt, der Berater traegt ein ------------
   Bewusst ruhig gehalten. Die Karte erscheint MITTEN im Gespraech, oft vor
   dem Kunden — sie soll wie ein Teil der Unterhaltung wirken, nicht wie ein
   aufpoppendes Antragsformular. Deshalb kein Schatten, keine eigene
   Rahmenfarbe, Signalfarbe nur am Fokus.

   Dark und Light laufen ueber dieselben --aix-*-Variablen wie der Rest; eine
   eigene Regel steht nur dort, wo eine Flaeche im Dunkeln sonst mit dem
   Karten-Hintergrund verschmelzen wuerde. */
.aix-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
  margin-top: 4px;
}
/* Angedockt ist der Platz schmal — zwei Spalten wuerden die Labels umbrechen. */
.aix--panel .aix-felder { grid-template-columns: 1fr; gap: 12px; }

.aix-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aix-feld-label { font-size: .82rem; color: var(--aix-muted); font-weight: 500; }
.aix-feld-eingabe { position: relative; display: flex; align-items: center; }

.aix-input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;   /* Zahlen springen beim Tippen nicht */
  color: var(--aix-text);
  background: var(--aix-bg);
  border: 1px solid var(--aix-border);
  border-radius: 9px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.aix-input:focus {
  border-color: var(--aix-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aix-accent) 22%, transparent);
}
.aix-input::placeholder { color: var(--aix-muted); opacity: .65; }
/* Auswahllisten muessen zur Flaeche des Textfelds passen, sonst sitzt im
   Formular ein systemweisser Fremdkoerper. */
select.aix-input { appearance: none; padding-right: 30px; cursor: pointer; }
.aix-feld-eingabe:has(select.aix-input)::after {
  content: '';
  position: absolute;
  right: 12px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--aix-muted);
  border-bottom: 1.5px solid var(--aix-muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* Einheit IM Feld statt daneben: spart eine Spalte und sagt beim Tippen,
   worin gerechnet wird (EUR/Jahr vs EUR/Monat ist der haeufigste Irrtum). */
.aix-einheit {
  position: absolute;
  right: 12px;
  font-size: .78rem;
  color: var(--aix-muted);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--aix-bg) 22%);
  padding-left: 10px;
}

/* Ja/Nein: zwei Schaltflaechen statt Auswahlliste — im Kundengespraech ist
   Aufklappen-und-Waehlen ein Schritt zu viel. */
.aix-seg {
  display: inline-flex;
  align-self: flex-start;   /* sonst zieht der Flex-Container ihn auf volle Breite */
  padding: 3px;
  gap: 3px;
  background: var(--aix-soft);
  border: 1px solid var(--aix-border);
  border-radius: 9px;
}
.aix-seg-btn {
  flex: 1 1 auto;
  min-width: 62px;
  padding: 7px 14px;
  font-size: .88rem;
  color: var(--aix-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.aix-seg-btn:hover { color: var(--aix-text); }
.aix-seg-btn.ist-an {
  background: var(--aix-panel);
  color: var(--aix-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 30, 62, .12);
}
[data-theme="dark"] .aix-seg-btn.ist-an { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

.aix-feld-fehler { font-size: .78rem; color: var(--aix-warn); }

.aix-eingabe-fuss { display: flex; justify-content: flex-end; margin-top: 16px; }
.aix-btn-primaer {
  padding: 9px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: var(--aix-accent);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: filter .12s ease;
}
.aix-btn-primaer:hover:not(:disabled) { filter: brightness(1.08); }
.aix-btn-primaer:disabled { opacity: .6; cursor: default; }

/* --- Anklickbare Vorschlaege: die Rueckfrage zum Antippen ------------------
   Der Berater soll die Antwort nicht formulieren muessen, sondern waehlen
   koennen. Deshalb deutlich groesser und heller als die Chips unter der
   Eingabezeile (.aix-hint): Die sind Beispiele und duerfen uebersehen werden,
   diese hier sind die Frage selbst.

   Sie sitzen direkt unter der Antwort, in Kartenfarbe — sie gehoeren zu ihr
   und nicht zur Werkzeugleiste. Beide Farbmodi laufen ueber die
   --aix-*-Variablen; eine eigene Dunkel-Regel steht nur beim Hover-Grund, der
   mit dem hellen Mischverhaeltnis im Dunkeln unsichtbar bliebe. */
.aix-vorschlaege {
  max-width: 860px;
  margin: -8px auto 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Angedockt sind es ~360px Breite: untereinander statt dreifach umgebrochen. */
.aix--panel .aix-vorschlaege { flex-direction: column; align-items: stretch; }

.aix-vorschlag {
  max-width: 100%;
  padding: 9px 16px;
  font-size: .9rem;
  font-weight: 500;
  text-align: left;
  color: var(--aix-text);
  background: var(--aix-panel);
  border: 1px solid var(--aix-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.aix-vorschlag:hover,
.aix-vorschlag:focus-visible {
  border-color: var(--aix-accent);
  background: color-mix(in srgb, var(--aix-accent) 9%, var(--aix-panel));
  outline: none;
}
[data-theme="dark"] .aix-vorschlag:hover,
[data-theme="dark"] .aix-vorschlag:focus-visible {
  background: color-mix(in srgb, var(--aix-accent) 24%, var(--aix-panel));
}
@media (prefers-reduced-motion: reduce) { .aix-vorschlag { transition: none; } }

/* Eingebettete Auswertungs-Abschnitte. Die Karte gibt nur den Rahmen; das
   Aussehen kommt aus den Auswertungs-Templates selbst — genau das ist der
   Punkt. Randlos, damit die Seiten wirken wie in der Auswertung und nicht wie
   ein Bildschirmfoto davon. */
.aix-card--auswertung { padding: 16px 16px 12px; }
.aix-frame {
  margin-top: 12px;
  border: 1px solid var(--aix-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
[data-theme="dark"] .aix-frame { background: #0f1728; }
.aix-frame-el {
  display: block;
  width: 100%;
  height: 420px;            /* Startwert; das Dokument meldet seine echte Höhe */
  border: 0;
  transition: height .2s ease;
}
/* Verwaltung: niedrigerer Startwert, weil eine leere Liste sonst als großer
   leerer Kasten erscheint, bevor die gemeldete Höhe greift. */
.aix-frame-el--verwaltung { height: 220px; }

/* Miniatur im angedockten Panel: dort ist die Auswertung nur ~360px breit und
   damit nicht lesbar. Sie soll zeigen, DASS etwas da ist, und zum großen
   Bild führen — nicht zum Lesen einladen. Ohne pointer-events:none fing der
   Rahmen das Mausrad ab, und der Berater scrollte im Dokument statt im Chat
   (Beratertest 31.07.). */
.aix-frame--mini {
  position: relative;
  cursor: zoom-in;
  max-height: 300px;
}
.aix-frame--mini .aix-frame-el { pointer-events: none; }
/* Verlauf am unteren Rand: macht sichtbar, dass der Ausschnitt weitergeht,
   statt ihn wie ein abgeschnittenes Bild wirken zu lassen. */
.aix-frame--mini::after {
  content: "Zum Vergrößern klicken";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 8px;
  font-size: .74rem;
  text-align: center;
  color: #1b2841;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 62%);
}
[data-theme="dark"] .aix-frame--mini::after {
  color: #cfe0ff;
  background: linear-gradient(to bottom, rgba(15, 23, 40, 0), rgba(15, 23, 40, .96) 62%);
}
.aix-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--aix-accent);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Präsentationsmodus: die Vorschau bildschirmfüllend. Über allem, damit der
   Berater den Bildschirm einfach zum Kunden drehen kann. */
.aix-gross {
  position: fixed;
  inset: 0;
  z-index: 1080;              /* über dem Panel (1035) und über Modals (1055) */
  background: rgba(10, 18, 34, .72);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(12px, 4vw, 64px) 28px;
  /* Safari kennt backdrop-filter nur mit Prefix. Ohne ihn bleibt der
     Hintergrund scharf — der Präsentationsmodus wirkt dann nicht wie eine
     Ebene darüber, sondern wie ein Kasten im Weg. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.aix-gross-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0 4px 10px;
  font-size: 1rem;
}
.aix-gross-zu {
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.aix-gross-zu:hover { background: rgba(255, 255, 255, .26); }
.aix-gross-frame {
  flex: 1;
  width: 100%;
  /* Die Auswertung ist auf 1100px Layoutbreite gebaut und wächst nicht mit.
     Ein Rahmen über vollen 1900px zeigte deshalb 1100px Inhalt und daneben
     800px weiße Fläche. Der Rahmen endet jetzt dort, wo der Inhalt endet, und
     steht mittig — wie ein Dokument auf dem Tisch. */
  max-width: 1160px;
  margin: 0 auto;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
}
/* Der Kopf (Titel + Schließen) richtet sich am Rahmen aus, nicht am Fenster —
   sonst steht das Kreuz weit rechts neben dem Inhalt. */
.aix-gross-kopf {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
[data-theme="dark"] .aix-gross-frame { background: #0f1728; }

.aix-chart-wrap { margin-top: 16px; height: 240px; }
.aix--panel .aix-chart-wrap { height: 190px; }
.aix-note { margin-top: 12px; font-size: .78rem; color: var(--aix-muted); }

/* --- Eingabe -------------------------------------------------------------- */
.aix-input {
  border-top: 1px solid var(--aix-border);
  background: var(--aix-panel);
  padding: 14px 20px;
}
.aix--panel .aix-input { padding: 12px 14px; }
.aix-input-inner { max-width: 860px; margin: 0 auto; display: flex; gap: 10px; }
.aix-input textarea {
  flex: 1;
  resize: none;
  border-radius: 12px;
  padding: 11px 14px;
  border: 1px solid var(--aix-border) !important;
  background: var(--aix-bg) !important;
  color: var(--aix-text) !important;
  font: inherit;
  line-height: 1.4;
  /* Waechst mit dem Text (JS setzt die Hoehe), startet aber hoch genug fuer
     zwei Zeilen — bei rows="1" wurde der Platzhalter abgeschnitten und das
     Feld zeigte einen Scrollbalken statt Text. */
  min-height: 46px;
  max-height: 140px;
  overflow-y: auto;
}
.aix-input textarea:focus { outline: 2px solid var(--aix-accent); outline-offset: -1px; }

/* Im angedockten Panel teilten sich Büroklammer, Mikrofon, Textfeld und
   "Senden" EINE Zeile — für das Textfeld blieben 205px, in denen schon der
   Platzhalter zweizeilig umbrach und abgeschnitten wurde (Beratertest 31.07.).
   Das Feld bekommt deshalb die volle Breite, die Knöpfe rücken darunter. */
.aix--panel .aix-input-inner { flex-wrap: wrap; }
.aix--panel .aix-input-inner textarea {
  order: -1;
  flex: 1 0 100%;
  min-height: 60px;
}
.aix--panel .aix-input-inner .aix-attach { padding: 6px 12px; }
/* "Senden" ans rechte Ende der zweiten Zeile — die Knöpfe links, die Aktion
   rechts, wie in der Zeilenversion. */
.aix--panel .aix-input-inner .aix-send { margin-left: auto; padding: 8px 18px; }
.aix-send {
  border: 0;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 600;
  background: var(--aix-accent);
  color: #fff;
  cursor: pointer;
}
.aix-send:disabled { opacity: .55; cursor: default; }
.aix-attach {
  border: 1px solid var(--aix-border);
  background: transparent;
  color: var(--aix-muted);
  border-radius: 12px;
  padding: 0 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.aix-attach:hover { color: var(--aix-accent); border-color: var(--aix-accent); }
.aix-attach:disabled { opacity: .5; cursor: default; }
/* Spracheingabe: Aufnahme- und Transkriptions-Leiste ersetzen die Eingabezeile,
   solange sie laufen. Die Klassen setzt das gemeinsame Voice-Modul am
   Formular-Container (is-recording / is-transcribing). */
.aix-recbar,
.aix-transbar { display: none; }
.aix-input.is-recording .aix-input-inner,
.aix-input.is-transcribing .aix-input-inner { display: none; }
.aix-input.is-recording .aix-recbar,
.aix-input.is-transcribing .aix-transbar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  padding: 6px 4px;
}
.aix-transbar { color: var(--aix-muted); font-size: .86rem; }
.aix-rec-btn {
  border: 1px solid var(--aix-border);
  background: transparent;
  color: var(--aix-muted);
  border-radius: 10px;
  padding: 6px 9px;
  cursor: pointer;
  line-height: 1;
}
.aix-rec-btn:hover { color: var(--aix-accent); border-color: var(--aix-accent); }
.aix-rec-ok { color: #fff; background: var(--aix-accent); border-color: transparent; }
.aix-rec-ok:hover { color: #fff; opacity: .9; }
.aix-rec-btn svg { width: 15px; height: 15px; }
.aix-rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444;
  animation: aix-rec-puls 1.1s ease-in-out infinite;
}
@keyframes aix-rec-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .aix-rec-dot { animation: none; } }
.aix-rec-time { font-variant-numeric: tabular-nums; color: var(--aix-text); font-size: .86rem; }
.aix-rec-wave { flex: 1; height: 26px; min-width: 60px; }
.aix-attach.listening { color: #ef4444; border-color: #ef4444; }

.aix-hints { max-width: 860px; margin: 10px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.aix-hint {
  border: 1px solid var(--aix-border);
  background: transparent;
  color: var(--aix-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .8rem;
  cursor: pointer;
}
.aix-hint:hover { color: var(--aix-text); border-color: var(--aix-accent); }
/* Bewertung und Eskalation unter einer Antwort.

   Ruhig, aber auffindbar — und das war sie nicht: bei opacity .45 auf einer
   Klickfläche von 27x19 px kamen auf 3.684 Assistenten-Antworten 4 Bewertungen
   zusammen, seit dem 05.08.2026 auf 919 Antworten keine einzige (gemessen in
   support_chat_log). Geändert wird genau zweierlei: Fläche 27x19 → 34x28 px
   (1,9-fach) und Ruhe-Deckung .45 → .72. KEIN Kasten, kein Popup, kein Text
   darunter — der Berater sitzt live vor dem Kunden, und was dort erscheint,
   liest der mit. Die Emoji tragen die Farbe schon selbst; der Untergrund kommt
   erst beim Zeigen dazu und bleibt danach am gewählten Daumen stehen. */
.aix-aktionen {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  opacity: .72;
  transition: opacity .15s ease;
}
.aix-msg:hover .aix-aktionen,
.aix-aktionen:focus-within { opacity: 1; }
.aix-daumen {
  border: 0;
  background: none;
  width: 34px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .12s ease, transform .12s ease;
}
.aix-daumen:hover { transform: scale(1.12); }
.aix-daumen:focus-visible { outline: 2px solid var(--aix-accent); outline-offset: 1px; }
.aix-daumen--gut:hover,
.aix-daumen--gut.is-gewaehlt { background: var(--aix-daumen-gut); }
.aix-daumen--schlecht:hover,
.aix-daumen--schlecht.is-gewaehlt { background: var(--aix-daumen-schlecht); }
/* Bereits bewertet (aus dem Verlauf wiederhergestellt): der gewählte Daumen
   bleibt stehen, der andere tritt zurück. Kein "Danke"-Text unter jeder alten
   Antwort — das wäre die Zeile, die im Kundengespräch stört. */
.aix-daumen:disabled { cursor: default; }
.aix-daumen:disabled:hover { transform: none; }
.aix-daumen:disabled:not(.is-gewaehlt) { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .aix-daumen:hover { transform: none; } }
.aix-danke { font-size: .78rem; color: var(--aix-muted); }
.aix-eskalieren { font-size: .78rem; margin-left: 4px; }

/* Kunden-Modus: ein Schalter, kein Vorschlag — deshalb mit Symbol und
   sichtbarem Ein-Zustand. */
.aix-hint--modus { display: inline-flex; align-items: center; gap: 5px; }
.aix-hint--modus svg { width: 13px; height: 13px; }
.aix-hint--modus.is-aktiv {
  color: #fff;
  background: var(--aix-accent);
  border-color: transparent;
}

/* --- Leerer Zustand ------------------------------------------------------
   Zeigt, was der Assistent KANN. Eine blanke Aufforderung ("Womit kann ich
   helfen?") laesst den Berater raten — die Faehigkeiten muessen sichtbar sein,
   sonst wird die Flaeche einmal geoeffnet und nie wieder. */
.aix-empty { max-width: 780px; margin: 6vh auto 0; text-align: center; }
.aix--panel .aix-empty { margin-top: 12px; }
.aix-empty h4 { color: var(--aix-text); font-weight: 700; margin-bottom: 6px; }
.aix--panel .aix-empty h4 { font-size: 1.05rem; }
.aix-empty > p { color: var(--aix-muted); margin-bottom: 26px; }
.aix--panel .aix-empty > p { margin-bottom: 16px; font-size: .88rem; }
.aix-starts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}
.aix--panel .aix-starts { grid-template-columns: 1fr; gap: 8px; }
@media (max-width: 700px) { .aix-starts { grid-template-columns: 1fr; } }
.aix-start {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--aix-panel);
  border: 1px solid var(--aix-border);
  color: var(--aix-text);
  font: inherit;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}
.aix--panel .aix-start { padding: 10px 12px; }
.aix-start:hover { border-color: var(--aix-accent); transform: translateY(-1px); }
.aix-start svg { width: 18px; height: 18px; color: var(--aix-accent); flex: 0 0 auto; margin-top: 2px; }
.aix-start .t { font-weight: 600; display: block; margin-bottom: 2px; }
.aix-start .d { color: var(--aix-muted); font-size: .82rem; }
.aix--panel .aix-start .d { font-size: .78rem; }
.aix-empty-fuss {
  color: var(--aix-muted);
  font-size: .8rem;
  margin: 14px 0 0;
  text-align: center;
}

/* KI-Offenlegung (Art. 50 Abs. 1 KI-VO). Beide Themes ueber die vorhandenen
   aix-Variablen — die Marke soll erkennbar sein, aber nicht wie ein Fehler
   aussehen, deshalb Akzentfarbe statt Warnrot. */
.aix-ki-hinweis {
  color: var(--aix-muted);
  font-size: .8rem;
  line-height: 1.45;
  margin: 10px 0 0;
  text-align: left;
}
.aix-ki-hinweis a { color: var(--aix-accent); }
.aix-ki-marke {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  margin-right: 6px;
  color: var(--aix-accent);
  background: rgba(23, 103, 255, .12);
  border: 1px solid rgba(23, 103, 255, .28);
  vertical-align: baseline;
}
[data-theme="dark"] .aix-ki-marke {
  background: rgba(92, 152, 255, .16);
  border-color: rgba(92, 152, 255, .38);
}
.aix-panel-titel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.aix-panel-titel .aix-ki-marke { margin-right: 0; }

/* ===========================================================================
   Panel-Rahmen: andockbarer Chat neben der Beratung
   =========================================================================== */

/* Die Breite steht als Variable am <html> und wird per Ziehgriff verstellt.
   Panel UND Inhaltsbereich rechnen aus DERSELBEN Quelle — sonst laufen
   Panelbreite und Freiraum auseinander, sobald eine der Regeln angefasst wird. */
:root { --aix-panel-breite: 440px; }

.aix-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--aix-panel-breite), 100vw);
  z-index: 1035;               /* unter Bootstrap-Modals (1055), ueber Inhalt */
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid rgba(20, 32, 58, .12);
  box-shadow: 0 18px 48px rgba(16, 30, 62, .16);
  transform: translateX(100%);
  transition: transform .22s ease;
  visibility: hidden;
}

/* Ziehgriff am linken Rand. Bewusst schmal, aber mit großzügiger Trefferfläche
   (::before) — 4 px trifft man mit der Maus nicht zuverlässig. */
.aix-griff {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 2;
}
.aix-griff::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  bottom: 0;
}
.aix-griff::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 42px;
  border-radius: 3px;
  background: rgba(20, 32, 58, .18);
  transition: background .15s ease;
}
[data-theme="dark"] .aix-griff::after { background: rgba(255, 255, 255, .22); }
.aix-griff:hover::after,
.aix-griff:focus-visible::after { background: #1767ff; }
[data-theme="dark"] .aix-griff:hover::after { background: #5c98ff; }
.aix-griff:focus-visible { outline: 2px solid #1767ff; outline-offset: -2px; }

/* Während des Ziehens: Text-Auswahl aus und Zeiger stabil. Ohne das markiert
   der Zug quer über die Seite alles, was er berührt. */
body.aix-zieht { user-select: none; cursor: col-resize; }
body.aix-zieht iframe { pointer-events: none; }
[data-theme="dark"] .aix-panel {
  background: #16213a;
  border-left-color: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
}
.aix-panel.is-offen { transform: translateX(0); visibility: visible; }

.aix-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(20, 32, 58, .10);
  color: #14203a;
}
[data-theme="dark"] .aix-panel-head {
  border-bottom-color: rgba(255, 255, 255, .12);
  color: #e8eefc;
}
.aix-panel-actions { display: flex; gap: 4px; }
.aix-panel-btn {
  border: 0;
  background: transparent;
  color: #5b6b85;
  border-radius: 8px;
  padding: 5px 7px;
  cursor: pointer;
  line-height: 1;
}
[data-theme="dark"] .aix-panel-btn { color: #9fb0cc; }
.aix-panel-btn:hover { background: rgba(127, 148, 190, .14); color: #1767ff; }
[data-theme="dark"] .aix-panel-btn:hover { background: rgba(255, 255, 255, .08); color: #5c98ff; }
.aix-panel-btn svg { width: 16px; height: 16px; }

.aix-panel-body { flex: 1; min-height: 0; display: flex; }
.aix-panel-body > .aix { flex: 1; min-width: 0; }

/* Inhalt schmaler ziehen statt ueberdecken — der Berater soll die Seite sehen,
   auf der der Assistent arbeitet. Unterhalb von 1200px waere der Rest zu
   schmal; dort liegt das Panel als Overlay darueber. */
/* Die Beratung hat rechts eine leere Abstandsspalte (col-xxl-1), damit der
   Inhalt am breiten Bildschirm nicht bis an den Rand läuft. Mit offenem Panel
   ist diese Luft überflüssig — das Panel bildet den Abschluss —, und es blieb
   eine sichtbare Lücke zwischen den Karten und dem Chat. Bootstrap merkt das
   nicht: Seine Breakpoints hängen an der Fensterbreite, nicht am tatsächlich
   verfügbaren Raum.

   Deshalb bei offenem Panel: Abstandsspalte weg, Inhaltsspalte nimmt den
   freigewordenen Platz. Nur innerhalb von #collapseIntern, damit andere
   Bereiche unberührt bleiben. */
/* Ohne :empty — die Platzhalterspalten enthalten Whitespace und sind damit
   nicht leer im CSS-Sinn.

   Auch nicht auf die volle Klassenkombination festnageln: Die fünf Seiten
   schreiben den Abstandshalter unterschiedlich (col-xxl-1 bei Persönliche
   Daten/Anlagefinder/Auswertung, col-xl-1 bei Bedarfsermittlung und
   Tarifvergleich). Eine Aufzählung traf genau zwei Seiten nicht — dort blieb
   die Lücke stehen. "col-lg-0"/"col-md-0" ist der verlässliche Teil: eine
   Null-Breite kennt Bootstrap nicht, die Klasse steht im ganzen Projekt nur
   an diesen Abstandshaltern. */
/* NUR solange das Panel den Inhalt tatsaechlich schmaler macht. Liegt es
   darueber (.aix-panel-ueberlagert), behaelt die Beratung ihre normale Breite —
   dann waere das Dehnen falsch: Der Inhalt schoebe sich weiter unter das
   undurchsichtige Panel. Gemessen 10.08. bei 1280x900 (Panel deckt ab x=825):
   rechte Kante der Inhaltsspalte 1247 statt 1165, also 82 px mehr verdeckt. */
body.aix-panel-offen:not(.aix-panel-ueberlagert) #collapseIntern .row > [class*="col-lg-0"],
body.aix-panel-offen:not(.aix-panel-ueberlagert) #collapseIntern .row > [class*="col-md-0"] {
  display: none;
}
body.aix-panel-offen:not(.aix-panel-ueberlagert) #collapseIntern .row > .col-md-8 {
  flex: 1 1 0%;
  max-width: none;
}

@media (min-width: 1200px) {
  body.aix-panel-offen .main-content-wrapper,
  body.aix-panel-offen main {
    padding-right: min(var(--aix-panel-breite), 100vw);
  }
  /* Kein Übergang während des Ziehens — sonst hinkt der Inhalt dem Griff
     sichtbar nach. Beim Öffnen und Schließen ist er erwünscht. */
  body.aix-panel-offen:not(.aix-zieht) .main-content-wrapper,
  body.aix-panel-offen:not(.aix-zieht) main {
    transition: padding-right .22s ease;
  }

  /* Ab einer gewissen Panelbreite bleibt für die Beratung zu wenig übrig: Die
     Kopfzeile bricht in drei Reihen um, die linke Spalte wird zu einem
     unlesbaren Streifen, Beschriftungen stehen senkrecht. Genau das passierte
     beim Knopf „Auf ganzer Breite öffnen“ (Beratertest 31.07.).

     Statt den Inhalt weiter zu quetschen, legt sich das Panel ab hier DARÜBER:
     Die Beratung behält ihr Layout und ist beim Zurückschalten sofort wieder
     da — ohne Neuaufbau, ohne verrutschte Charts. */
  body.aix-panel-offen.aix-panel-ueberlagert .main-content-wrapper,
  body.aix-panel-offen.aix-panel-ueberlagert main {
    padding-right: 0;
  }

  /* Kopfzeile neu aufteilen, solange das Panel den Inhalt schmaler macht.
     Bootstrap teilt die Topbar nach FENSTERbreite (3 / 7 / 2): bei 1440 mit
     offenem Panel bleiben der linken Spalte davon 237 px — zu wenig fuer
     Profilname und Seitentitel, waehrend die Schrittleiste daneben mit
     Kurzlabels nur noch 431 px braucht. Also: linke Spalte auf ihren Bedarf
     (22rem, gedeckelt auf ein Drittel), Schrittleiste nimmt den Rest.
     Gemessen 10.08. (1440x900, Panel 440): linke Spalte 237 -> 323 px,
     Profilname 0 -> 232 px, Schrittleiste von zwei Reihen auf eine. */
  body.aix-panel-offen:not(.aix-panel-ueberlagert) .topbar-row > .bg-left-col {
    flex: 0 0 auto;
    width: min(22rem, 34%);
  }
  body.aix-panel-offen:not(.aix-panel-ueberlagert) .topbar-row > .main-side-tabs-wrap {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Kurzes Aufblitzen des Feldes, das der Assistent gerade gesetzt hat. Ohne
   diesen Hinweis aendert sich irgendwo im Formular still eine Zahl — der
   Berater soll vor dem Kunden sehen, was passiert ist. */
@keyframes aix-feld-blitz {
  0%   { box-shadow: 0 0 0 0 rgba(23, 103, 255, .45); }
  35%  { box-shadow: 0 0 0 5px rgba(23, 103, 255, .22); }
  100% { box-shadow: 0 0 0 0 rgba(23, 103, 255, 0); }
}
.aix-feld-blitz {
  animation: aix-feld-blitz 1.6s ease-out;
  border-color: #1767ff !important;
}
[data-theme="dark"] .aix-feld-blitz { border-color: #5c98ff !important; }
@media (prefers-reduced-motion: reduce) {
  .aix-feld-blitz { animation: none; }
}

/* ---------------------------------------------------------------------------
   SPOTLIGHT — "zeig mir, wo das steht".

   Der Assistent stellt EIN Feld frei und dunkelt den Rest ab. Gedacht fuers
   Einlernen: Ein Wert, den der Assistent setzt, ist erledigt; ein Feld, das
   der Berater einmal an seinem Platz gesehen hat, kann er beim naechsten Mal
   selbst finden.

   Das Feld bleibt BEDIENBAR (kein pointer-events:none darauf) — es soll
   angefasst werden. Das Overlay faengt nur die Klicks daneben ab und beendet
   sich dabei selbst.
   --------------------------------------------------------------------------- */
.aix-spot-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;              /* ueber der Seite, unter Bootstrap-Modals (1055+ Backdrop) */
  background: rgba(15, 23, 42, .55);
  animation: aix-spot-auf .18s ease-out;
  cursor: pointer;
}
[data-theme="dark"] .aix-spot-overlay { background: rgba(0, 0, 0, .66); }

@keyframes aix-spot-auf { from { opacity: 0; } to { opacity: 1; } }

/* Das freigestellte Feld liegt UEBER dem Overlay. position:relative ist
   noetig, damit z-index ueberhaupt greift — viele Eingabe-Container haben
   von Haus aus static. */
.aix-spot-ziel {
  position: relative;
  z-index: 1081;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23, 103, 255, .55), 0 10px 30px rgba(0, 0, 0, .25);
  animation: aix-spot-puls 2s ease-in-out infinite;
}
[data-theme="dark"] .aix-spot-ziel {
  background: #1b2436;
  box-shadow: 0 0 0 4px rgba(92, 152, 255, .6), 0 10px 30px rgba(0, 0, 0, .5);
}

@keyframes aix-spot-puls {
  0%, 100% { box-shadow: 0 0 0 4px rgba(23, 103, 255, .55), 0 10px 30px rgba(0, 0, 0, .25); }
  50%      { box-shadow: 0 0 0 7px rgba(23, 103, 255, .28), 0 10px 30px rgba(0, 0, 0, .25); }
}
[data-theme="dark"] .aix-spot-ziel {
  animation-name: aix-spot-puls-dark;
}
@keyframes aix-spot-puls-dark {
  0%, 100% { box-shadow: 0 0 0 4px rgba(92, 152, 255, .6), 0 10px 30px rgba(0, 0, 0, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(92, 152, 255, .3), 0 10px 30px rgba(0, 0, 0, .5); }
}

/* Die Fahne sagt, WOFUER das Feld gut ist. Ueber dem Feld statt darunter:
   Unter Eingaben stehen in der Beratung oft schon Hilfetexte. */
.aix-spot-fahne {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  max-width: 320px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1767ff;
  color: #fff;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
}
[data-theme="dark"] .aix-spot-fahne { background: #3f7dff; }

@media (prefers-reduced-motion: reduce) {
  .aix-spot-overlay,
  .aix-spot-ziel { animation: none; }
}

/* Die schwebenden Knoepfe (Support-Chat, Tour) liegen sonst ueber der
   Eingabezeile des Panels — beide sitzen unten rechts. Solange das Panel offen
   ist, treten sie zurueck; der Support-Chat ist ueber den Assistenten ohnehin
   erreichbar. */
body.aix-panel-offen .support-fab,
body.aix-panel-offen .bot-peek,
body.aix-panel-offen .onboarding-restart-fab {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* --- Oeffner: schwebend unten rechts -------------------------------------
   Dort, wo bisher der Support-Chat sass. Bewusst ANDERS gestaltet als dessen
   runde Sprechblase — als Rechteck mit Beschriftung, damit auf den ersten Blick
   erkennbar ist, dass hier ein anderes Werkzeug wartet. */
.aix-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1030;              /* unter dem Panel (1035) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #1767ff 0%, #6d4bff 100%);
  box-shadow: 0 10px 28px rgba(23, 103, 255, .34);
  transition: transform .15s ease, box-shadow .15s ease, opacity .18s ease;
}
.aix-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(23, 103, 255, .42); }
.aix-fab svg { width: 18px; height: 18px; }
/* Offen: Der Knopf tritt zurueck, damit er die Eingabezeile nicht verdeckt. */
.aix-fab.is-aktiv { opacity: 0; pointer-events: none; }

/* Faellige Wiedervorlage: ein Punkt, kein Popup. Der Berater sitzt vor dem
   Kunden — er entscheidet, wann er hinschaut. */
.aix-fab.has-anliegen::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px #fff;
}
[data-theme="dark"] .aix-fab.has-anliegen::after { box-shadow: 0 0 0 3px #0f1728; }

.aix-anliegen {
  text-align: left;
  border: 1px solid var(--aix-warn);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--aix-panel);
}
.aix-anliegen-titel {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
  color: var(--aix-text);
}
.aix-anliegen-punkt {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 3px 0;
  font: inherit;
  font-size: .84rem;
  color: var(--aix-muted);
  cursor: pointer;
}
.aix-anliegen-punkt:hover { color: var(--aix-accent); }

/* Die anderen schwebenden Knoepfe (Tour, Onboarding) positionieren sich
   relativ zum Support-Chat. Der ist bei Assistenten-Accounts weg, wodurch sie
   unter dem Assistenten-Knopf lagen. Sie ruecken deshalb DARUEBER statt
   danebem: Der Assistent traegt eine Beschriftung, seine Breite haengt am Text
   — nebeneinander waere die Kollision nur verschoben. */
body.aix-vorhanden .onboarding-restart-fab,
body.aix-vorhanden .feature-tour-fab {
  right: 22px;
  bottom: 88px;
}

@media (max-width: 720px) {
  .aix-fab-text { display: none; }
  .aix-fab { padding: 14px; border-radius: 50%; right: 16px; bottom: 16px; }
  body.aix-vorhanden .onboarding-restart-fab,
  body.aix-vorhanden .feature-tour-fab { right: 16px; bottom: 76px; }
}

/* --- Native CRM-Liste ------------------------------------------------------
   Ersetzt fuer Aufgaben und Termine die eingebettete Seite. Eine Liste mit
   Ein-Klick-Aktionen braucht keinen zweiten Rollbalken und keine zweite
   Typografie im Chat — sie soll Teil der Antwort sein, nicht ein Kasten
   darin. Bewusst flach: eine Trennlinie je Zeile, sonst nichts. */
.aix-zeilen { display: flex; flex-direction: column; margin-top: 4px; }
.aix-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--aix-border);
}
.aix-zeile:last-child { border-bottom: 0; }
.aix-zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.aix-zeile-titel { font-weight: 600; font-size: .92rem; }
.aix-zeile-unter {
  font-size: .84rem;
  color: var(--aix-muted);
  /* Lange Notizen duerfen die Zeile nicht sprengen — im Panel ist wenig Platz. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aix-marke {
  flex: 0 0 auto;
  font-size: .76rem;
  color: var(--aix-muted);
  background: var(--aix-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.aix-marke.ist-warnung {
  color: var(--aix-warn);
  background: color-mix(in srgb, var(--aix-warn) 14%, transparent);
}
.aix-marke.ist-gut {
  color: var(--aix-good);
  background: color-mix(in srgb, var(--aix-good) 14%, transparent);
}
.aix-zeile-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: .82rem;
  color: var(--aix-text);
  background: var(--aix-soft);
  border: 1px solid var(--aix-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.aix-zeile-btn:hover:not(:disabled) { background: var(--aix-panel); }
.aix-zeile-btn:disabled { opacity: .55; cursor: default; }
/* Abgehakt bleibt sichtbar stehen: Der Berater soll sehen, was er in dieser
   Runde schon erledigt hat — verschwundene Zeilen wirken wie ein Fehler. */
.aix-zeile.ist-erledigt .aix-zeile-titel,
.aix-zeile.ist-erledigt .aix-zeile-unter { text-decoration: line-through; opacity: .55; }

/* ===========================================================================
   Der gefuehrte Beratungsweg (beratungsweg.py, 10.08.2026)

   Marius: "so das nur die aller wichtigsten eingaben angezeigt werden und
   alle tiefergehenden versteckt sind aber wenn man die eingaben will kann man
   die öffnen". Drei Zutaten, alle in DERSELBEN Eingabekarte — ein Ausklapper
   statt einer zweiten Karte, weil ein Wechsel der Karte mitten im
   Kundengespraech den Faden reisst.

   Beide Farbmodi laufen ueber die Variablen oben; hier steht keine feste
   Farbe ausser der Deckung der Trennlinie.
   =========================================================================== */

/* Schritt 2 von 6 — klein und ueber der Ueberschrift, damit die Karte nicht
   wie ein Fortschrittsbalken aussieht. */


/* Der Ausklapper. Zu bleibt er unauffaellig, offen bekommt er eine
   Trennlinie — sonst laufen Kern- und Tieferfelder optisch ineinander und
   der Berater weiss nicht mehr, was er dem Kunden gerade zeigt. */
.aix-weg-mehr {
  margin-top: 10px;
  border-top: 1px solid var(--aix-border);
  padding-top: 8px;
}
.aix-weg-mehr > summary {
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--aix-accent);
  list-style: none;
  padding: 2px 0;
}
.aix-weg-mehr > summary::-webkit-details-marker { display: none; }
.aix-weg-mehr > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform .12s ease;
}
.aix-weg-mehr[open] > summary::before { transform: rotate(90deg); }
.aix-weg-mehr[open] > summary { margin-bottom: 8px; }
.aix-weg-mehr > summary:hover { filter: brightness(1.15); }

/* Weiter-Knopf: zweite Rolle neben "Uebernehmen", deshalb sichtbar
   nachrangig — der haeufigere Griff ist das Uebernehmen der Werte. */
.aix-btn-sekundaer {
  padding: 9px 18px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--aix-accent);
  background: transparent;
  border: 1px solid var(--aix-border);
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease;
}
.aix-btn-sekundaer:hover:not(:disabled) { background: var(--aix-soft); }
.aix-btn-sekundaer:disabled { opacity: .6; cursor: default; }

/* Der Chip "Naechster Schritt". Er ist kein Thema wie die anderen, sondern
   die Fortsetzung des Weges — deshalb in Akzentfarbe abgesetzt. Zurueckhaltend
   genug, dass die Leiste nicht bunt wird (10.08.2026). */

/* === ./css/core/feature_feedback.css === */
/* Feedback-Leiste fuer Features in Erprobung (static/js/feature_feedback.js).
   Hell und dunkel: nur Rahmen/Text aus den Bootstrap-Variablen, der
   Hintergrund bleibt transparent — die Leiste sitzt in Karten beider Themes. */
.ff-leiste {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border: 1px dashed rgba(128, 128, 128, .35);
  border-radius: 10px;
  font-size: .82rem;
}
.ff-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.ff-frage { font-weight: 600; margin-right: .25rem; }
.ff-daumen { line-height: 1; padding: .2rem .5rem; }
.ff-daumen.is-gewaehlt { border-color: var(--bs-primary, #3b82f6); background: rgba(59, 130, 246, .12); }
.ff-schreiben { font-size: .8rem; padding: 0 .25rem; }
.ff-danke { color: var(--bs-success, #16a34a); font-size: .8rem; }
.ff-box { margin-top: .5rem; }
.ff-box-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .35rem; }
.ff-hinweis { opacity: .65; font-size: .74rem; }

[data-theme="dark"] .ff-leiste { border-color: rgba(255, 255, 255, .22); }
[data-theme="dark"] .ff-daumen.is-gewaehlt { background: rgba(96, 165, 250, .18); border-color: #60a5fa; }
[data-theme="dark"] .ff-danke { color: #4ade80; }

/* === ./css/core/feedback_video.css === */
/* Video-Rückmeldung (static/js/feedback_video.js, partials/_feedback_video.html).
   Knopf unten rechts, Aufnahme-Leiste oben mittig, Modal in beiden Themes. */
/* Der Knopf ist eine senkrechte Lasche am rechten Bildschirmrand, mittig.
   Unten rechts wohnen schon Support-FAB, Support-Peek, Onboarding-Neustart,
   Assistent-FAB, PDF-Toast und Back-to-top; unten links die Teaser. Die
   Mitte des rechten Rands nutzt sonst nichts. z-index 1034: unter dem
   Assistent-Panel (1035, deckt die Lasche ab, wenn es offen ist) und unter
   Modals/Backdrop (1055). */
.fv-fab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 1034;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  padding: 12px 7px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-left: 0;                    /* nach der Drehung: die Kante am Bildschirmrand */
  border-radius: 0 10px 10px 0;      /* nach der Drehung: die sichtbaren linken Ecken */
  background: #ffffff;
  color: #1e293b;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: -4px 0 16px -6px rgba(15, 23, 42, .3);
  cursor: pointer;
  opacity: .92;
  transition: opacity .2s ease, padding .2s ease;
}
.fv-fab svg { transform: rotate(180deg); flex: none; }
.fv-fab:hover { opacity: 1; padding-right: 10px; }
[data-theme="dark"] .fv-fab { background: #1f2937; color: #e5e7eb; border-color: rgba(255, 255, 255, .16); box-shadow: -4px 0 16px -6px rgba(0, 0, 0, .7); }

.fv-pill {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem .4rem .9rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(185, 28, 28, .6);
}
.fv-pill-dot, .fv-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block;
  animation: fv-blink 1.1s infinite;
}
.fv-rec-dot { background: #ef4444; margin-right: .25rem; animation: none; }
.fv-pill-zeit { font-variant-numeric: tabular-nums; opacity: .9; }
.fv-pill-stop { font-weight: 600; }
@keyframes fv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.fv-modal .modal-content { border-radius: 14px; }
.fv-liste { padding-left: 1.1rem; }
.fv-liste li { margin-bottom: .2rem; }
.fv-preview { width: 100%; max-height: 300px; border-radius: 10px; background: #000; }
.fv-progress { height: 6px; }
.fv-done { text-align: center; padding: .5rem 0; }
.fv-done-icon {
  width: 48px; height: 48px; margin: 0 auto .75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 163, 74, .14); color: #16a34a; font-size: 1.4rem; font-weight: 700;
}
[data-theme="dark"] .fv-done-icon { background: rgba(74, 222, 128, .16); color: #4ade80; }
[data-theme="dark"] .fv-modal .form-check-label { color: #cbd5e1; }

/* === ./css/core/zoom_overlays.css === */
/* ═══════════════════════════════════════════════════════════════════
   ZOOM-TO-FIT-KOMPENSATION FÜR VOLLFLÄCHEN-OVERLAYS

   Unter Root-Zoom f (zoom-to-fit in base_base.html, --zoom-factor auf
   documentElement) lösen 100vw/100vh weiterhin gegen die UNGEZOOMTE
   Viewportgröße auf, das Ergebnis wird beim Rendern aber um f skaliert:
   bei f < 1 bleibt rechts/unten ein ungedeckter Streifen, bei f > 1
   entsteht Overshoot (potenziell Scrollbars). /f rechnet das hoch —
   gleiche Mechanik wie html/body-minHeight (base_base.html) und
   #loader-container (auswertung_intern.css). Ohne Zoom ist die
   Variable 1 → No-Op, bit-identisches Verhalten.

   NICHT betroffen (empirisch geprüft, Playwright-Probe 05.08.2026):
   position:fixed mit inset:0 oder width/height:100% skaliert der
   Browser über den Containing Block korrekt mit — z.B. Bootstrap
   .modal (100%, daher stimmt auch die Dialog-Zentrierung) und
   .cmd-palette-backdrop (inset:0) brauchen KEINE Regel.

   Additiv: überschreibt nur die Größen der betroffenen Selektoren,
   keine Bestandsregeln/Stacking-Mechaniken (data-settings-modal etc.).
   ═══════════════════════════════════════════════════════════════════ */

/* Bootstrap-Backdrops (bootstrap.min.css: width:100vw;height:100vh) —
   betrifft alle Modals (Reset-Dialog, White-Label, data-settings-modals)
   und Offcanvas/Drawer. Gleiche Spezifität wie die Bootstrap-Regel,
   gewinnt über die Ladereihenfolge (Bundle lädt nach Bootstrap). */
.modal-backdrop,
.offcanvas-backdrop {
  width: calc(100vw / var(--zoom-factor, 1));
  height: calc(100vh / var(--zoom-factor, 1));
}

/* driver.js-Tour (Onboarding): das Overlay ist ein fixed SVG, dessen
   width/height-ATTRIBUTE das JS auf innerWidth/innerHeight px setzt —
   unter Zoom derselbe Effekt wie 100vw/vh. CSS gewinnt über
   Präsentations-Attribute; !important sichert gegen künftige
   Inline-Style-Varianten der Lib. Das SVG trägt eine viewBox
   (0 0 innerWidth innerHeight), dadurch skaliert die Größenkorrektur
   auch den Highlight-Cutout geometrisch korrekt mit. */
svg.driver-overlay {
  width: calc(100vw / var(--zoom-factor, 1)) !important;
  height: calc(100vh / var(--zoom-factor, 1)) !important;
}

/* === Inline-Styles aus base_common.css === */






















































/* CSP-friendly replacements for previously JS-injected <style> blocks */
input.form-control[data-euro-autohide] {
    visibility: hidden !important;
}

#profileModal mark {
    background: transparent;
    color: inherit;
    padding: 0;
    font-weight: 600;
    text-decoration: underline dotted currentColor;
}

#profileModal .rounded.p-3 {
    box-shadow: none;
}