:root {
  color-scheme: light;

  --color-bg: #f3f4f6;
  --color-surface: rgba(255, 255, 255, .88);
  --color-surface-soft: rgba(241, 245, 249, .92);
  --color-border: rgba(100, 116, 139, .24);
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-accent: #0284c7;
  --color-backdrop: rgba(15, 23, 42, .36);
  --color-warn: #b45309;
  /* Warnung und Erfolg. Bis 09/2026 nirgends gesetzt - jede Verwendung
     fiel auf ihren Ersatzwert zurueck, das dunkle Rot #dc2626 auch im
     Dunkelmodus, wo es kaum lesbar ist. */
  --color-danger: #dc2626;
  --color-success: #16a34a;

  --font-family-app: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 19px;
  --line-tight: 1.2;
  --line-normal: 1.45;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 14px;
  --space-xl: 18px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --module-gap: 12px;
  --module-padding-x: 12px;
  --module-padding-y: 12px;

  font-family: var(--font-family-app);
  background: var(--color-bg);
  color: var(--color-text);
}

:root[data-resolved-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f172a;
  --color-surface: rgba(15, 23, 42, .82);
  --color-surface-soft: rgba(30, 41, 59, .72);
  --color-border: rgba(148, 163, 184, .28);
  --color-text: #e5e7eb;
  --color-muted: #94a3b8;
  --color-accent: #38bdf8;
  --color-backdrop: rgba(2, 6, 23, .62);
  --color-warn: #fbbf24;
  /* Heller im Dunkelmodus - dieselben Toene wie --bar-down/--bar-up. */
  --color-danger: #f87171;
  --color-success: #22c55e;
}

:root[data-resolved-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.appShell {
  min-height: 100vh;
  /* Oben kein Abstand: Er steckt im sticky Header (.appHeader, padding-top).
     Stand er hier, lief der Header beim Scrollen erst um diesen Abstand mit
     nach oben, bevor er haengen blieb (sticky greift erst bei top: 0). */
  --app-shell-pad: var(--space-md);
  padding: 0 var(--app-shell-pad) var(--app-shell-pad);
}

.appHeaderTitle {
  min-width: 0;
  text-align: center;
}

.appHeaderTitle h1,
.viewHeader h1 {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-tight);
}

.eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs);
  line-height: 1.25;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.selectField,
.inputField {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
}

.headerActionButton {
  min-width: 46px;
  font-size: var(--font-size-lg);
}

.drawerCloseButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
  min-width: 46px;
  min-height: 46px;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0 var(--space-sm);
}

.headerActions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.headerActionButton--csv {
  min-width: 58px;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.headerActionButton--settings {
  font-size: var(--font-size-lg);
}

.selectFieldWrap,
.inputFieldWrap {
  display: grid;
  gap: 3px;
  /* Ohne min-width: 0 bemisst sich ein Rasterfeld an seinem breitesten Kind
     und laesst sich nicht schmaler ziehen als dieses. */
  min-width: 0;
}

.selectFieldLabel,
.inputFieldLabel {
  font-size: 11px;
  line-height: 1.1;
  color: var(--color-muted);
}

.selectField,
.inputField {
  min-height: 46px;
  padding: 0 10px;
  font-size: var(--font-size-sm);
  /* Ein <select> ist von sich aus so breit wie seine laengste Option. Bei
     Fondsnamen wie "iShares Edge MSCI World Quality Factor UCITS ETF USD
     (Acc)" sind das auf dem Handy 439 statt 388 Pixel - die Karte war 64
     Pixel zu schmal, und alle Geschwister im selben Raster wurden
     mitgezogen. Gemessen, nicht geschaetzt. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.selectField {
  /* Der abgeschnittene Name ist besser als eine Karte, die seitlich
     wegläuft: die Auswahl steht ohnehin aufgeklappt vollstaendig da. */
  text-overflow: ellipsis;
}

.drawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.drawerHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.appNavigation {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: 0 0 var(--space-md);
  margin: 0 0 var(--space-md);
}

.navButton.isActive {
  border-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  color: var(--color-text);
}

.appView {
  display: grid;
  gap: var(--module-gap);
}

.viewHeader {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--module-padding-y) var(--module-padding-x);
  background: var(--color-surface);
}

.moduleGrid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: eine 1fr-Spur hat min-width: auto und waechst
     mit ihrem breitesten Kind ueber den Behaelter hinaus. Das ist der
     Grund, warum ein einziges zu breites Element eine ganze Karte
     verschiebt. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--module-gap);
}

.moduleCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}

.moduleCardHeader {
  padding: var(--module-padding-y) var(--module-padding-x) var(--space-sm);
}

.moduleCardHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.moduleCardSubtitle,
.emptyHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.moduleBody {
  padding: 0 var(--module-padding-x) var(--module-padding-y);
}

/* Titel links, Knopf rechts - in jeder Karte an derselben Stelle.
   Vorher sass der CSV-Knopf in einer Leiste ueber der Tabelle und landete
   dadurch je nach Karteninhalt unter dem Titel, unter einem Auswahlfeld
   oder zwischen Kennzahl-Kacheln und Tabelle. */
.moduleCardHeadline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.moduleCardHeadline > :first-child {
  margin: 0;
  min-width: 0;
}

/* Der Knopf schrumpft nicht und wandert nicht in die zweite Zeile. */
.moduleCardHeadline > .uiButton {
  flex: 0 0 auto;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 9px;
  font-size: var(--font-size-xs);
  line-height: var(--line-tight);
  color: var(--color-muted);
  background: var(--color-surface-soft);
}

.statusPill--info {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Fuer einen Stand, der aus der Zeit gelaufen ist - etwa Kurse, die aelter
   sind als der Takt, in dem die App nachsieht. */
.statusPill--warn {
  color: var(--color-warn);
  border-color: color-mix(in srgb, var(--color-warn) 45%, transparent);
}

/* Hinweisleiste unter dem Kopf: offline, "Als App installieren". Eine
   Zeile je Hinweis, auf dem Handy brechen die Knoepfe darunter um. */
.appNoticeBar {
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.appNotice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.appNotice--offline {
  color: var(--color-warn);
  border-color: color-mix(in srgb, var(--color-warn) 45%, transparent);
}

.appNotice--install {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.appNoticeActions {
  display: inline-flex;
  gap: var(--space-sm);
}

@media (min-width: 860px) {
  .appShell {
    --app-shell-pad: var(--space-xl);
  }

  .appHeaderTitle {
    text-align: left;
  }

  .appHeaderMeta {
    justify-content: flex-end;
    margin: 0 0 var(--space-md);
  }

  .moduleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Settings panel foundation */

.settingsPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.settingsPanelHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.settingsCloseButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-width: 46px;
  min-height: 46px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.settingsGroup {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
}

.settingsGroup h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.settingsHint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

/* Version ganz unten in den Einstellungen (settingsPanelRenderer.js). */
.settingsVersion {
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Central reusable UI renderer styles */

.uiButton--md {
  min-height: 40px;
}

.uiButton--primary {
  color: var(--color-text);
}

.uiButton--secondary {
  background: var(--color-surface-soft);
}

/* Central reusable UI renderer styles */
.uiButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}

.uiButton--sm {
  min-height: 34px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
}

.uiButton--primary {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--ghost {
  background: transparent;
}

.uiButton--full {
  width: 100%;
}

.actionList {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.actionList--column {
  display: grid;
}

.noticeBox,
.emptyState {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
}

.noticeBox h3,
.emptyState h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.noticeBox p,
.emptyState p,
.fieldHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.noticeBox--success {
  border-color: rgba(34, 197, 94, .42);
}

.noticeBox--warning {
  border-color: rgba(245, 158, 11, .48);
}

.noticeBox--danger {
  border-color: rgba(239, 68, 68, .45);
}

.dataTableWrap {
  display: grid;
  gap: var(--space-sm);
}

/* Die Leiste ueber der Tabelle. Sie traegt bisher nur den CSV-Knopf und
   bleibt deshalb rechtsbuendig und ohne eigenen Rahmen - sie soll die Karte
   nicht in zwei Bloecke teilen. */
/* Depots im Ueberblick: zwei Zeilen je Depot statt einer Tabelle mit fuenf
   Spalten. Auf dem Handy lief die Tabelle seitlich weg, und abgeschnitten
   wurde ausgerechnet die Spalte mit dem Kursstand. */
.brokerOverviewList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.brokerOverviewRow {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.brokerOverviewRow--total {
  background: var(--color-surface-soft);
  font-weight: 600;
}

.brokerOverviewTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.brokerOverviewName {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
}

.brokerOverviewValue {
  /* Der Betrag bricht nicht um - er ist die Zahl, wegen der man hinsieht. */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.brokerOverviewBadge {
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
}

.brokerOverviewMeta {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-tight);
}

.dataTableScroller {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.dataTable th,
.dataTable td {
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.dataTable th {
  color: var(--color-muted);
  line-height: var(--line-tight);
}

.dataTable tr:last-child td {
  border-bottom: 0;
}

.dataTable [data-align="right"] {
  text-align: right;
}

/* Suche, Filter, Sortierung ueber einer Tabelle (dataTableRenderer.js).
   Die Leiste gehoert zur Tabelle, nicht zur Karte: ohne eigenen Rahmen,
   damit sie die Karte nicht in zwei Bloecke teilt. */
.dataTableToolbar {
  display: grid;
  gap: var(--space-sm);
}

.dataTableToolbarRow {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.dataTableSearch {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
}

.dataTableSearch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
  outline-offset: 1px;
}

/* Die Auswahlliste sortiert auf dem Telefon; am Schreibtisch sortiert der
   Spaltenkopf, und die Liste bleibt weg. */
.dataTableSortSelect {
  display: none;
  min-height: 36px;
  min-width: 0;
  max-width: 50%;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
}

.dataTableChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) 14px;
}

.dataTableChipGroup {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dataTableChipGroupLabel {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.dataTableChip {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: pointer;
}

.dataTableChip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  font-weight: 600;
}

.dataTableCount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.dataTableCount .uiButton {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: var(--font-size-xs) !important;
}

/* Sortierbare Spaltenkoepfe: der Pfeil sagt die Richtung, ein stiller
   Doppelpfeil, dass sich die Spalte sortieren laesst. */
.dataTable th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}

.dataTable th[data-sort-key]::after {
  content: "↕";
  margin-left: 4px;
  opacity: .35;
}

.dataTable th[aria-sort="ascending"]::after {
  content: "▲";
  opacity: 1;
}

.dataTable th[aria-sort="descending"]::after {
  content: "▼";
  opacity: 1;
}

.dataTable th[aria-sort="ascending"],
.dataTable th[aria-sort="descending"] {
  color: var(--color-text);
}

.dataTableNoMatch td {
  color: var(--color-muted);
  text-align: center !important;
}

@media (max-width: 480px) {
  .dataTableSortSelect {
    display: block;
  }
}

/* CSV file input foundation */
.visuallyHiddenFileInput {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  inset: auto auto 0 0;
}

/* Import panel foundation */
.importPanel {
  position: fixed;
  inset: 0;

  opacity: 0;
}

.importPanel.isOpen {
  opacity: 1;
}

.importBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
}

.importPanelBody {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);

}

.importPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.importPanelHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importCloseButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-width: 46px;
  min-height: 46px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.importHint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

/* Import panel visual refinement */
.importPanelBody {
  width: min(420px, 94vw);
  padding: 18px 14px 22px;
}

.importPanelHeader {
  align-items: flex-start;
  margin-bottom: 14px;
}

.importPanelTitle {
  min-width: 0;
}

.importPanelTitle h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.importHeaderHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.importCloseButton {
  flex: 0 0 auto;
}

.importDropCard {
  display: grid;
  gap: 12px;
  border: 1px dashed color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-accent) 8%);
  padding: 16px;
  margin: 0 0 12px;
}

.importDropIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: .04em;
}

.importDropContent {
  display: grid;
  gap: 4px;
}

.importDropContent h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

@media (min-width: 860px) {
  .importPanelBody {
    padding: 20px 18px 24px;
  }
}

/* Targeted status cards in previous import drawer */
.importStatusCard,
.importStoredCard {
  display: grid;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
  margin: 0 0 var(--space-md);
}

.importMetaLabel {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}

.importStatusCard h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importStatusText {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.importStoredCard strong {
  display: block;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.1;
}

.importStatusCard--success {
  border-color: rgba(34, 197, 94, .42);
}

.importStatusCard--warning {
  border-color: rgba(245, 158, 11, .52);
}

.importStatusCard--danger {
  border-color: rgba(239, 68, 68, .48);
}

/* Upload trigger via icon, no separate file button */
.importDropIconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 74px;
  height: 62px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  padding: 0;
}

.importDropIconButton .importDropIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #2f6df6, #47c8ff);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

.importDropIconButton:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Zentrale DataTable- und TableLimit-Darstellung */
.rawTableLimitNotice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:root[data-resolved-theme="light"] .rawTableLimitNotice {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rawTableLimitNotice strong {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--color-text);
}

.rawTableLimitNotice > span {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.rawTableLimitNotice > button,
.rawTableLimitNotice .uiButton {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  white-space: nowrap;
  width: auto;
  min-width: max-content;
  margin-left: auto;
}

.dataTable {
  font-size: 12px;
  table-layout: auto;
}

.dataTable th,
.dataTable td {
  padding: 7px 8px;
  white-space: nowrap;
  vertical-align: middle;
}

.dataTable th {
  font-size: 12px;
  font-weight: 750;
}

[data-table-id="portfolio-history-table"] {
  min-width: 1180px;
}

[data-table-id="portfolio-history-table"] th:first-child,
[data-table-id="portfolio-history-table"] td:first-child {
  min-width: 260px;
  text-align: left;
}

@media (min-width: 860px) {
  .rawTableLimitNotice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    width: 100%;
  }

  .rawTableLimitNotice > button,
  .rawTableLimitNotice .uiButton {
    justify-self: end;
    align-self: center;
  }
}

@media (max-width: 859px) {
  .rawTableLimitNotice {
    display: block;
  }

  .rawTableLimitNotice > button,
  .rawTableLimitNotice .uiButton {
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    margin-left: 0;
  }

  .dataTable th,
  .dataTable td {
    font-size: 12px;
    padding: 7px 8px;
  }
}

/* QuoteMapping Status read-only */
.quoteMappingStatus {
  padding: 10px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.35);
}

.quoteMappingStatus strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.quoteMappingStatus p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
}

/* Settings Accordion Struktur */
.settingsAccordion {
  display: block;
}

.settingsAccordionSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 800;
  color: var(--color-text);
}

.settingsAccordionSummary::-webkit-details-marker {
  display: none;
}

.settingsAccordionSummary::after {
  content: "▾";
  font-size: 13px;
  color: var(--color-muted);
  transform: rotate(-90deg);
  transition: transform .16s ease;
}

.settingsAccordion[open] .settingsAccordionSummary::after {
  transform: rotate(0deg);
}

.settingsAccordionSummary span {
  font-size: 15px;
}

.settingsAccordion > :not(summary) {
  margin-top: 12px;
}

.moduleCardHeader > .moduleSubCardTitle:first-child {
  margin-top: 0;
}

.moduleSubCard .moduleCardHeader {
  padding-top: calc(var(--module-padding-y) * 0.55);
  padding-bottom: 3px;
}

.moduleSubCard .moduleBody {
  padding-top: 0;
  padding-bottom: calc(var(--module-padding-y) * 0.6);
}

.moduleSubCard .moduleCardHeader > .moduleSubCardTitle:first-child {
  margin-top: 0;
  margin-bottom: 0;
}

.moduleSubCard .moduleCardHeader {
  padding-left: calc(var(--module-padding-x) * 0.72);
  padding-right: calc(var(--module-padding-x) * 0.72);
}

.moduleSubCard .moduleBody {
  padding-left: calc(var(--module-padding-x) * 0.72);
  padding-right: calc(var(--module-padding-x) * 0.72);
}

.buttonStack {
  display: grid;
  gap: var(--space-sm);
}

/* RapidAPI Settings UI Removal Fallback */
details:has(#rapidApiProviderFamilySelect),
details:has([data-rapid-api-enabled]) {
  display: none !important;
}

/* Settings Area Accordion Module Subcards START */

.settingsAreaAccordionSummary::-webkit-details-marker {
  display: none;
}

.settingsAreaAccordionCard[open] .settingsAreaChevron {
  transform: rotate(-90deg);
}

.settingsAreaActiveText {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.settingsModuleTitle {
  display: block;

}

/* Settings Area Accordion Module Subcards END */

/* Settings Area Text Clean Module Normal START */

/* Settings Area Text Clean Module Normal END */

/* Settings Compact Override START */

.settingsAreaAccordionList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.settingsAreaAccordionCard {
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.26);
  overflow: hidden;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.035);
}

.settingsAreaAccordionCard[open] {
  background: rgba(255, 255, 255, 0.72);
}

.settingsAreaSummaryText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

.settingsAreaTitle {
  display: block;

}

.settingsAreaChevron {
  flex: 0 0 auto;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
  font-size: 14px;
  font-weight: 800;
}

.settingsAreaActiveText small {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.4;
  display: none;
}

.settingsModuleToggleText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

@media (max-width: 640px) {
  .settingsAreaAccordionList {
    gap: 8px;
    margin-top: 10px;
  }

  .settingsModuleTitle,
  .settingsModuleToggleText strong {
    font-size: 13px;
  }
}
/* Settings Compact Override END */

/* Settings Area Title Normal Module Borderless START */

.settingsAreaAccordionSummary:hover,
.settingsAreaAccordionSummary:focus,
.settingsAreaAccordionSummary:active {
  background: transparent;
}

/* Settings Area Title Normal Module Borderless END */

/* Settings Spacing Area Title Module List Frame START */

/* Abstand zwischen den Haupt-Accordions im Settings-Panel */
.settingsPanelBody > .settingsAccordion + .settingsAccordion,
.settingsPanelBody > .settingsGroup + .settingsGroup {
  margin-top: 12px !important;
}

/* Bereichstitel kleiner und normal */
.settingsAreaAccordionSummary .settingsAreaTitle {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.settingsAreaTitle {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Bereich-Accordion kompakt halten */
.settingsAreaAccordionSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  gap: 8px;
  min-height: 0;
  font-weight: 500;
  padding: 9px 12px !important;
}

.settingsAreaAccordionBody {
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px !important;
  gap: 8px !important;
}

/* Ein gemeinsamer Rahmen um alle Module im geöffneten Bereich */
.settingsModuleSubcards {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 10px !important;
  background: transparent !important;
}

/* Module selbst ohne Einzelrahmen und ohne Card-/Hover-Effekt */
.settingsModuleSubcard {
  display: block;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleSubcard:hover,
.settingsModuleSubcard:focus-within,
.settingsModuleSubcard:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleToggle {
  display: flex;
  width: 100%;
  margin: 0;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleToggle:hover,
.settingsModuleToggle:focus,
.settingsModuleToggle:active {
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleToggleText span {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

.settingsModuleTitle {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

.settingsModuleToggleText strong {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* Checkboxen kompakt ausrichten */
.settingsAreaActiveToggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.18rem 0 0;
  width: 14px !important;
  height: 14px !important;
  margin-top: 1px !important;
}

.settingsModuleToggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.18rem 0 0;
  width: 14px !important;
  height: 14px !important;
  margin-top: 1px !important;
}

/* Bereich-aktiv bleibt separat, aber kompakt */
.settingsAreaActiveToggle {
  display: flex;
  align-items: flex-start;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.035);
  cursor: pointer;
  gap: 8px;
  padding: 7px 8px !important;
  border-radius: 10px !important;
}

.settingsAreaActiveText strong {
  display: block;
  line-height: 1.25;
  font-size: 13px !important;
  font-weight: 650 !important;
}

/* Settings Spacing Area Title Module List Frame END */

/* Import Broker Actions Compact START */
.brokerImportCard {
  display: grid;
  gap: 8px;
}

.brokerImportCard.isActive {
  border-color: #37a2ff;
}

.brokerImportCardHeader {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.brokerImportCardText {
  min-width: 0;
}

.brokerImportCard h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.brokerImportCard .moduleCardSubtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.brokerActiveBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #37a2ff;
  border-radius: 999px;
  background: rgba(55, 162, 255, 0.09);
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Im Dunkelmodus war die Schrift dasselbe Dunkelblau wie im hellen
   (#2563eb auf fast schwarzem Grund, Kontrast unter 3). Die Plakette nimmt
   dort den Akzent des Themas (Q15). */
[data-resolved-theme="dark"] .brokerActiveBadge {
  color: var(--color-accent);
}

.brokerImportActions {
  margin-top: 2px;
}

.brokerImportActions .uiButton,
.brokerImportActions .uiButton--full {
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* --danger war nie gesetzt: galt immer das dunkle Rot, im Dunkelmodus
   kaum lesbar. --color-danger hat je Modus einen lesbaren Ton. */
.brokerImportActions [data-import-delete-broker] {
  color: var(--color-danger) !important;
  border-color: color-mix(in srgb, var(--color-danger) 24%, transparent) !important;
  background: transparent !important;
}

.brokerImportActions [data-import-delete-broker]:hover,
.brokerImportActions [data-import-delete-broker]:focus {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent) !important;
}
/* Import Broker Actions Compact END */

/* Import Stored Broker Card Structure START */
.importStoredBrokerImportsCard {
  display: grid;
  gap: 12px;
}

.importStoredBrokerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brokerImportList {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.importStoredBrokerImportsCard .brokerImportCard {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.importStoredBrokerImportsCard .brokerImportCard + .brokerImportCard {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.importStoredBrokerImportsCard .brokerImportCard.isActive {
  border-color: rgba(148, 163, 184, 0.18);
}

.importStoredBrokerImportsCard .brokerImportActions {
  margin-top: 6px;
}
/* Import Stored Broker Card Structure END */

.importPanelBody,
.importStoredBrokerImportsCard,
.brokerImportList,
.brokerImportCard,
.brokerImportCardHeader,
.brokerImportCardText {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.importPanelBody {
  overflow-x: hidden;
}

.brokerImportCardHeader {
  display: block;
}

.brokerImportCard .moduleCardSubtitle {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.brokerImportActions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

.brokerActiveBadge {
  position: static;
  flex: 0 0 auto;
  max-width: 100%;
}

.brokerImportActions .uiButton,
.brokerImportActions .uiButton--full {
  flex: 0 0 auto;
  max-width: 100%;
}

.importStatusCard,
.importStatusCard *,
.importStatusText,
.importHeaderHint {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.importStatusText,
.importStatusCard h3,
.importHeaderHint {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.importStatusCard {
  overflow-x: hidden;
}

.settingsStrategyEditPanel {
  display: grid !important;
  gap: 14px !important;
}

.settingsStrategySelectStack {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.settingsStrategySelectField {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
}

.settingsStrategySelectLabel {
  display: block !important;
  width: 100% !important;
  line-height: 1.25 !important;
}

.settingsStrategySelectControl {
  display: block !important;
  width: 100% !important;
}

.settingsStrategySelect {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.settingsStrategyStyleInfo {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
}

.settingsStrategyStyleInfo > summary {
  cursor: pointer;
  font-weight: 700;
}

.settingsStrategyStyleInfoBody {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.settingsStrategyMetaGrid {
  display: grid;
  gap: 8px;
}

.settingsStrategyMetaItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.crashModeVisibleNotice.crashModeBottomHint {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: var(--color-muted) !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-normal) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* FONT_WEIGHT_METRIC_TONE_START */

/* Dashboard: Treemap-Titel und Prozentwerte normal */
#assetClassTreemapLegend b {
  font-weight: 400 !important;
}

/* Dashboard: Ziel vs. Ist Asset-Titel normal */
#chartGoalContent [data-goal-asset] {
  font-weight: 400 !important;
}

/* Dashboard: Vermögensprognose Titel/Werte normal, Tabelle darunter bleibt Tabellenstil */

#chartForecastContent table th,
#chartForecastContent table td,
#chartForecastContent table th *,
#chartForecastContent table td * {
  font-weight: inherit;
}

/* Portfolio-Modus: Werte fett */
[id^="portfolioMode"][id$="Value"],
#portfolioModeDashboardBox .extensionMetric .value,
#portfolioModeDashboardBox .value {
  font-weight: 700 !important;
}

/* Währungsrisiko und Faktor/Style: Kennzahlenwerte fett, Tabellen normal */
[id^="currencyRisk"][id$="Value"],
[id^="factorStyle"][id$="Value"],
#currencyRiskBox .extensionMetric .value,
#factorStyleBox .extensionMetric .value,
#currencyRiskBox .value,
#factorStyleBox .value {
  font-weight: 700 !important;
}

#currencyRiskBox table th,
#currencyRiskBox table td,
#currencyRiskBox table th *,
#currencyRiskBox table td *,
#factorStyleBox table th,
#factorStyleBox table td,
#factorStyleBox table th *,
#factorStyleBox table td * {
  font-weight: inherit !important;
}

/* FONT_WEIGHT_METRIC_TONE_END */

/* ACTIVE_CARD_FONT_WEIGHTS_START */

/* Heatmap/Treemap + Assetklassen-Treemap: Card-Titel und Prozentwerte nicht fett */
#dashboardTreemapContent > div > div,
#dashboardTreemapContent > div > div *,
#assetClassTreemapContent > div > div,
#assetClassTreemapContent > div > div * {
  font-weight: 400 !important;
}

/* Ziel vs. Ist: Asset-Titel nicht fett */
#chartGoalContent .chartBox > div > div:first-child,
#chartGoalContent .chartBox > div > div:first-child *,
#chartGoalContent > div > div > div:first-child,
#chartGoalContent > div > div > div:first-child *,
#chartGoalContent b,
#chartGoalContent strong {
  font-weight: 400 !important;
}

/* Vermögensprognose: Titel/Werte außerhalb Tabelle normal */
#chartForecastContent :where(b, strong, .value):not(table *),
#chartForecastContent > div:not(.tableWrap) *,
#chartForecastContent .chartBox:not(.tableWrap) * {
  font-weight: 400 !important;
}

/* Portfolio-Modus: Labels normal, Werte fett */
#portfolioModeDashboardBox .extensionMetric > :first-child,
#portfolioModeDashboardBox .moduleCardSubtitle:first-child {
  font-weight: 400 !important;
}

#portfolioModeDashboardBox .extensionMetric > :not(:first-child),
#portfolioModeDashboardBox [id^="portfolioMode"][id$="Value"],
#portfolioModeDashboardBox .value {
  font-weight: 700 !important;
}

/* Währungsrisiko/Faktor bleiben: Tabellen nicht fett erzwingen */
#currencyRiskBox table *,
#factorStyleBox table * {
  font-weight: inherit !important;
}

/* ACTIVE_CARD_FONT_WEIGHTS_END */

/* TITLE_AWARE_FONT_WEIGHTS_START */
.uiWeightNormal {
  font-weight: 400 !important;
}

.uiWeightBold {
  font-weight: 700 !important;
}
/* TITLE_AWARE_FONT_WEIGHTS_END */

/* METRICS_OVERVIEW_START */
/* Portfolio-Kennzahlen Übersicht: Hauptzahl + Raster
   (renderers/metricsOverviewRenderer.js). Die Kacheln teilen sich die
   Breite selbst: drei Spalten auf der Desktop-Karte, zwei am Handy -
   ohne Medienabfrage, weil die Karte je nach Raster verschieden breit ist. */
.metricsOverview {
  --metrics-pos: #15803d;
  --metrics-neg: #b91c1c;
  --metrics-pos-bg: rgba(22, 163, 74, .12);
  --metrics-neg-bg: rgba(220, 38, 38, .12);
  --metrics-invested: #93c5fd;
  --metrics-gain: #16a34a;
  --metrics-loss: #dc2626;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .metricsOverview {
  --metrics-pos: #4ade80;
  --metrics-neg: #f87171;
  --metrics-invested: #1d4ed8;
  --metrics-gain: #22c55e;
  --metrics-loss: #ef4444;
}

.metricsOverviewHero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.metricsOverviewHero .metricsOverviewLabel {
  flex-basis: 100%;
}

.metricsOverviewHeroValue {
  font-size: 1.9rem;
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.metricsOverviewChip {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--font-size-sm, .85rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.metricsOverviewChip--pos { color: var(--metrics-pos); background: var(--metrics-pos-bg); }
.metricsOverviewChip--neg { color: var(--metrics-neg); background: var(--metrics-neg-bg); }

.metricsOverviewSplit {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.metricsOverviewSegment { display: block; min-width: 3px; }
.metricsOverviewSegment--invested,
.metricsOverviewSegment--value { background: var(--metrics-invested); }
.metricsOverviewSegment--gain { background: var(--metrics-gain); }
.metricsOverviewSegment--loss {
  background: repeating-linear-gradient(45deg, var(--metrics-loss) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--metrics-loss);
}

.metricsOverviewLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--font-size-sm, .85rem);
  font-variant-numeric: tabular-nums;
}

.metricsOverviewKey::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

.metricsOverviewKey--invested::before { background: var(--metrics-invested); }
.metricsOverviewKey--gain::before { background: var(--metrics-gain); }
.metricsOverviewKey--loss::before { background: var(--metrics-loss); }

.metricsOverviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.metricsOverviewTile {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-soft);
}

.metricsOverviewLabel,
.metricsOverviewSub {
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
}

.metricsOverviewValue {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.metricsOverviewValue--pos { color: var(--metrics-pos); }
.metricsOverviewValue--neg { color: var(--metrics-neg); }

.metricsOverviewProgress {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.metricsOverviewProgress > span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}
/* METRICS_OVERVIEW_END */

/* VALUE_DEVELOPMENT_START */
/* Karte Wertentwicklung (renderers/valueDevelopmentRenderer.js). Der
   Vergleich ist gestrichelt und bernsteinfarben - Rot heisst sonst Verlust. */
.valueDev {
  --value-dev-line: #2563eb;
  --value-dev-invested: #6b7280;
  --value-dev-gain: #16a34a;
  --value-dev-loss: #dc2626;
  --value-dev-benchmark: #b45309;
  --value-dev-pos: #15803d;
  --value-dev-neg: #b91c1c;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .valueDev {
  --value-dev-line: #60a5fa;
  --value-dev-invested: #9ca3af;
  --value-dev-gain: #22c55e;
  --value-dev-loss: #f87171;
  --value-dev-benchmark: #f59e0b;
  --value-dev-pos: #4ade80;
  --value-dev-neg: #f87171;
}

.valueDevKpis { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.valueDevKpi { display: grid; gap: 2px; }
.valueDevKpiLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.valueDevKpiValue { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.valueDevKpiValue--pos { color: var(--value-dev-pos); }
.valueDevKpiValue--neg { color: var(--value-dev-neg); }

.valueDevControls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--font-size-sm, .85rem); }
.valueDevKey::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid; }
.valueDevKey--value::before { border-color: var(--value-dev-line); }
.valueDevKey--invested::before { border-color: var(--value-dev-invested); }

.valueDevToggle,
.valueDevRange {
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.valueDevToggle::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px dashed var(--value-dev-benchmark); }
.valueDevToggle.is-active,
.valueDevRange.is-active { background: var(--color-surface-soft); border-color: var(--color-accent); }
.valueDevRange:disabled { opacity: .45; cursor: default; }
.valueDevRanges { display: inline-flex; gap: 4px; margin-left: auto; }

.valueDevSurface { position: relative; min-width: 0; }
.valueDevSvg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.valueDevGrid { stroke: var(--color-border); stroke-width: 1; }
.valueDevAxisLabel { fill: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.valueDevLine { fill: none; stroke: var(--value-dev-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.valueDevInvested { fill: none; stroke: var(--value-dev-invested); stroke-width: 1.5; }
.valueDevBenchmark { fill: none; stroke: var(--value-dev-benchmark); stroke-width: 1.5; stroke-dasharray: 5 4; }
.valueDevGain { fill: var(--value-dev-gain); fill-opacity: .14; stroke: none; }
.valueDevLoss { fill: var(--value-dev-loss); fill-opacity: .16; stroke: none; }
.valueDevHoverLine { stroke: var(--color-muted); stroke-width: 1; }
.valueDevHoverDot { fill: var(--color-surface); stroke: var(--value-dev-line); stroke-width: 2; }

.valueDevTooltip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs, .75rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.valueDevTooltip[hidden] { display: none; }
.valueDevNotice { margin: 0; color: var(--color-muted); }
.valueDevDetails summary { cursor: pointer; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.valueDevTable { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, .85rem); }
.valueDevTable td { padding: 4px 0; border-top: 1px solid var(--color-border); }
.valueDevTableValue { text-align: right; font-variant-numeric: tabular-nums; }
/* VALUE_DEVELOPMENT_END */

/* MONTHLY_RETURNS_START */
/* Karte Rendite je Monat (renderers/monthlyReturnsRenderer.js). */
.monthlyReturns {
  --monthly-returns-pos: #16a34a;
  --monthly-returns-neg: #dc2626;
  --monthly-returns-pos-text: #15803d;
  --monthly-returns-neg-text: #b91c1c;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .monthlyReturns {
  --monthly-returns-pos: #22c55e;
  --monthly-returns-neg: #f87171;
  --monthly-returns-pos-text: #4ade80;
  --monthly-returns-neg-text: #f87171;
}

.monthlyReturnsSurface { position: relative; min-width: 0; }
.monthlyReturnsSvg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.monthlyReturnsGrid { stroke: var(--color-border); stroke-width: 1; }
.monthlyReturnsZero { stroke: var(--color-muted); stroke-width: 1; }
.monthlyReturnsAxisLabel { fill: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.monthlyReturnsBar--pos { fill: var(--monthly-returns-pos); }
.monthlyReturnsBar--neg { fill: var(--monthly-returns-neg); }
.monthlyReturnsWorst { fill: var(--monthly-returns-neg-text); font-size: 11px; font-variant-numeric: tabular-nums; }

.monthlyReturnsTooltip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs, .75rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.monthlyReturnsTooltip[hidden] { display: none; }

.monthlyReturnsYears {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.monthlyReturnsYear {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-soft);
}

.monthlyReturnsYearLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.monthlyReturnsYearValue { font-weight: 700; font-variant-numeric: tabular-nums; }
.monthlyReturnsYearValue--pos { color: var(--monthly-returns-pos-text); }
.monthlyReturnsYearValue--neg { color: var(--monthly-returns-neg-text); }
.monthlyReturnsNotice,
.monthlyReturnsBasis { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
/* MONTHLY_RETURNS_END */

/* DRAWDOWN_CARD_START */
/* Karte Rueckgang vom Hoechststand (renderers/drawdownRenderer.js). */
.drawdown {
  --drawdown-color: #dc2626;
  --drawdown-text: #b91c1c;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .drawdown {
  --drawdown-color: #f87171;
  --drawdown-text: #f87171;
}

.drawdownKpis { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.drawdownKpi { display: grid; gap: 2px; }
.drawdownKpiLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.drawdownKpiValue { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.drawdownKpiValue--neg { color: var(--drawdown-text); }
.drawdownSvg { display: block; width: 100%; height: auto; overflow: visible; }
.drawdownGrid { stroke: var(--color-border); stroke-width: 1; }
.drawdownZero { stroke: var(--color-muted); stroke-width: 1; }
.drawdownAxisLabel { fill: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.drawdownArea { fill: var(--drawdown-color); fill-opacity: .15; stroke: none; }
.drawdownLine { fill: none; stroke: var(--drawdown-color); stroke-width: 1.8; stroke-linejoin: round; }
.drawdownTrough { fill: var(--drawdown-color); stroke: var(--color-surface); stroke-width: 2; }
.drawdownNotice,
.drawdownBasis { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
/* DRAWDOWN_CARD_END */

/* EXPOSURE_CARDS_START */
/* Portfolio-Risiko, Waehrungsrisiko, Faktor-/Style-Analyse
   (renderers/exposureRenderer.js). Farben aus der Balken-Palette. */
.exposure { display: grid; gap: 10px; min-width: 0; }
.exposureNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.exposureStackWrap { position: relative; padding-bottom: 20px; }
.exposureStack { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bar-track); }
.exposureStackPart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exposureLimit { position: absolute; top: -3px; bottom: 16px; width: 2px; margin-left: -1px; background: var(--color-text); }
.exposureLimitLabel {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
}
.exposureLegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--font-size-xs, .75rem); }
.exposureLegendItem { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.exposureLegendName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.exposureLegendPct { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exposureSwatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.exposureRows { border-top: 1px solid var(--color-border); }
.exposureRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.exposureRowValue { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exposureRowValue--ok { color: var(--bar-good); }
.exposureRowValue--warn { color: var(--bar-serious); }
.exposureJump {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.exposureHeadline { margin: 0; font-size: var(--font-size-sm, .85rem); }
.exposureHeadlineValue { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.exposureSplit { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bar-track); }
.exposureBox {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bar-track);
  font-size: var(--font-size-sm, .85rem);
}
.exposureBars { gap: 6px; }
.exposureBar {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: var(--font-size-sm, .85rem);
}
.exposureBarLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exposureBarTrack { height: 12px; border-radius: 6px; overflow: hidden; background: var(--bar-track); }
.exposureBarTrack i { display: block; height: 100%; border-radius: 6px; }
.exposureBarValue { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.exposureBarEuro { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
@media (max-width: 480px) {
  .exposureBar { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; }
}
/* Die Wert-Spalte der Risiko- und der Dividenden-Tabelle darf umbrechen.
   Alle Tabellen stehen sonst auf nowrap !important (.dataTable td,
   .tableWrap td) - lange Werte wie die Texte zum Rueckgang oder "88 %
   weniger als im Jahr davor" liefen rechts aus der Karte und waren
   abgeschnitten, samt der Spaltenueberschrift "Wert". Nur diese beiden:
   Bei den anderen sind die Werte kurz. Der Vorsatz .appView[...] ist
   noetig, weil die Handy-Fassung der nowrap-Regel ihn auch traegt. */
.appView[data-view-id] table[data-table-id="risk-analysis-table"] td:nth-child(2),
.appView[data-view-id] table[data-table-id="dividend-summary-table"] td:nth-child(2) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* Und die Tabelle selbst nur so breit wie die Karte - sonst bleibt sie bei
   width: max-content und scrollt seitlich, statt umzubrechen. */
.appView[data-view-id] table[data-table-id="risk-analysis-table"],
.appView[data-view-id] table[data-table-id="dividend-summary-table"] {
  width: 100% !important;
}
/* Ziel von "→ Karte": unter der festen Kopfzeile landen, nicht dahinter. */
[data-module-id="drawdownStandalone"] { scroll-margin-top: 96px; }
/* EXPOSURE_CARDS_END */

/* PORTFOLIO_HISTORY_START */
/* Portfolio Historie (renderers/portfolioHistoryRenderer.js). Werte und
   Beschriftungen brechen nie um; lange Namen werden mit "…" gekuerzt. */
.historyOverview { display: grid; gap: 10px; min-width: 0; }
.historyKpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px 16px; }
.historyKpi { display: grid; gap: 1px; min-width: 0; }
.historyKpiLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); white-space: nowrap; }
.historyKpiValue { font-size: 1.1rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.historyFilters { display: flex; flex-wrap: wrap; gap: 6px; }
.historyFilter {
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.historyFilter--active { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.historyRows { border-top: 1px solid var(--color-border); }
.historyRow {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(3rem, 1fr) auto 4.2rem;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.historyName { display: grid; min-width: 0; }
.historyNameMain,
.historyNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historyNameSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.historyBar { position: relative; height: 10px; }
.historyBar::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--color-muted); }
.historyBarFill { position: absolute; top: 0; height: 10px; border-radius: 3px; }
.historyBarFill--pos { background: var(--bar-up); }
.historyBarFill--neg { background: var(--bar-down); }
.historyGain,
.historyPct { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.historyTone--pos { color: var(--bar-up); }
.historyTone--neg { color: var(--bar-down); }
.historyNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
@media (max-width: 480px) {
  /* Am Handy weicht der Balken - Name, Betrag und Prozent bleiben lesbar. */
  .historyRow { grid-template-columns: minmax(0, 1fr) auto 3.8rem; }
  .historyBar { display: none; }
}
/* PORTFOLIO_HISTORY_END */

/* ASSET_PROFILE_START */
/* Steckbrief im Asset-Details Drilldown (renderers/assetProfileRenderer.js).
   Werte brechen nie um; wird es eng, rutscht nur die Prozentzahl unter
   den Betrag. */
.profileContent:empty { display: none; }
.profile { display: grid; gap: 12px; min-width: 0; }
.profileKpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px 16px; }
.profileKpi { display: grid; gap: 1px; min-width: 0; }
.profileKpiLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); white-space: nowrap; }
.profileKpiValue { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.profileKpiSub { font-size: var(--font-size-xs, .75rem); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.profileTone--pos { color: var(--bar-up); }
.profileTone--neg { color: var(--bar-down); }
.profileLegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--font-size-xs, .75rem); }
.profileLegendItem { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.profileTimeline { position: relative; height: 16px; margin: 8px 6px 0; border-bottom: 1px solid var(--color-border); }
.profileTimeline .profileDot { position: absolute; bottom: -6px; transform: translateX(-50%); }
.profileDot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--color-surface); box-sizing: content-box; }
.profileLegend .profileDot { width: 9px; height: 9px; border: 0; }
.profileDot--buy { background: var(--bar-series-1); }
.profileDot--sell { background: var(--bar-series-2); }
.profileDot--income { background: var(--bar-series-3); }
.profileAxis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.profileChips { display: flex; flex-wrap: wrap; gap: 6px; }
.profileChip {
  padding: 2px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profileNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
/* ASSET_PROFILE_END */

/* REBALANCE_OVERVIEW_START */
/* Uebersicht der Rebalancing-Handlungsliste (renderers/rebalanceOverviewRenderer.js).
   Namen, Quoten und Abzeichen brechen nie um; nur der Hinweis darunter
   (Steuerschaetzung, Crash-Modus) ist Fliesstext. */
.rebalanceContent:empty { display: none; }
.rebalanceOverview { display: grid; gap: 10px; min-width: 0; }
.rebalanceHead { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rebalanceHead--ok { color: var(--bar-up); }
.rebalanceRows { border-top: 1px solid var(--color-border); }
.rebalanceRow {
  display: grid;
  /* Feste Breite fuer das Abzeichen: jede Zeile ist ein eigenes Raster -
     mit auto finge jeder Balken woanders an. */
  grid-template-columns: minmax(0, 1.4fr) minmax(3rem, 1.6fr) 7.5rem;
  gap: 4px 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.rebalanceName { display: grid; min-width: 0; }
.rebalanceNameMain,
.rebalanceNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rebalanceNameSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.rebalanceBullet { position: relative; height: 12px; border-radius: 3px; background: var(--bar-track); }
/* Ist blau wie im Entwurf, das Band hellblau dahinter. Nur was zu pruefen
   ist (Budget prüfen, Übergewicht), faerbt den Balken orange. */
.rebalanceBand { position: absolute; top: -3px; bottom: -3px; border-radius: 3px; background: color-mix(in srgb, var(--bar-magnitude) 22%, transparent); }
.rebalanceActual { position: absolute; left: 0; top: 3px; height: 6px; border-radius: 3px; background: var(--bar-magnitude); }
.rebalanceRow--check .rebalanceActual,
.rebalanceRow--over .rebalanceActual { background: var(--bar-serious); }
.rebalanceTarget { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-text); }
.rebalanceBadge {
  justify-self: end;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rebalanceBadge--muted { color: var(--color-muted); background: var(--bar-track); }
.rebalanceBadge--buy { color: var(--bar-magnitude); background: color-mix(in srgb, var(--bar-magnitude) 14%, transparent); }
.rebalanceBadge--check { color: var(--bar-serious); background: color-mix(in srgb, var(--bar-serious) 16%, transparent); }
.rebalanceNote { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.rebalanceNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
@media (max-width: 480px) {
  .rebalanceRow { grid-template-columns: minmax(0, 1fr) auto; }
  .rebalanceBullet { grid-column: 1 / -1; grid-row: 2; }
}
/* REBALANCE_OVERVIEW_END */

/* IMPORT_OVERVIEW_START */
/* Uebersicht der Broker-Importe (renderers/importOverviewRenderer.js).
   Jahre als Chips wie bei "Realisierte FIFO", zwoelf Monate als Leiste,
   Buchungen nach Tag. Plaketten, Betraege und Monatsnamen brechen nie um;
   lange Namen werden mit "…" gekuerzt. */
.importOverviewContent:empty { display: none; }
.importOverview { display: grid; gap: 10px; min-width: 0; }
.importYears { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.importChip {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.importChip.isActive { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.importCount { margin-left: auto; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); white-space: nowrap; }
.importMonths { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.importMonth {
  display: grid;
  grid-template-rows: 36px auto;
  justify-items: center;
  align-items: end;
  gap: 3px;
  padding: 4px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-xs, .75rem);
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
}
.importMonth i { display: block; width: 60%; max-width: 14px; border-radius: 2px; background: color-mix(in srgb, var(--bar-magnitude) 45%, transparent); }
.importMonth span { overflow: hidden; text-overflow: clip; }
.importMonth.isActive { background: var(--color-text); color: var(--color-bg); }
.importMonth.isActive i { background: currentColor; }
.importMonth.isEmpty { opacity: .35; cursor: default; }
.importMonthTitle { margin: 2px 0 0; font-weight: 700; white-space: nowrap; }
.importDay { display: grid; }
.importDayTitle { margin: 6px 0 2px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-weight: 700; white-space: nowrap; }
.importRow {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.importBadge {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  white-space: nowrap;
}
.importBadge--trade { color: var(--bar-magnitude); background: color-mix(in srgb, var(--bar-magnitude) 14%, transparent); }
.importBadge--sell { color: #6d28d9; background: color-mix(in srgb, #7c3aed 14%, transparent); }
.importBadge--income { color: var(--bar-up); background: color-mix(in srgb, var(--bar-up) 14%, transparent); }
.importBadge--muted { color: var(--color-muted); background: var(--bar-track); }
.importName { display: grid; min-width: 0; }
.importNameMain, .importNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importNameMain { font-weight: 600; }
.importNameSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.importAmount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.importAmount--in { color: var(--bar-up); }
.importNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
@media (max-width: 480px) {
  .importRow { grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: 8px; }
  .importCount { margin-left: 0; flex-basis: 100%; }
}
/* Geladene Broker-Importe (O3): eine Zeile je Broker. Name, Plaketten und
   Uhrzeit brechen nie um; lange Namen werden mit "…" gekuerzt. */
.brokerListContent:empty { display: none; }
.brokerList { display: grid; }
.brokerRow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.brokerRow--switch { cursor: pointer; opacity: .75; }
.brokerRow--switch:hover { opacity: 1; }
.brokerRadio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-muted);
  border-radius: 50%;
}
.brokerRadio.isActive { border-color: var(--bar-up); background: radial-gradient(circle, var(--bar-up) 0 45%, transparent 50%); }
.brokerMain { display: grid; gap: 5px; min-width: 0; }
.brokerName { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.brokerName strong { overflow: hidden; text-overflow: ellipsis; }
.brokerActive { color: var(--bar-up); font-size: var(--font-size-xs, .75rem); font-weight: 700; }
.brokerTags { display: flex; flex-wrap: wrap; gap: 6px; }
.brokerTag {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bar-track);
  font-size: var(--font-size-xs, .75rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.brokerTime { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* IMPORT_OVERVIEW_END */

/* QUOTE_TILES_START */
/* Kursdaten als Kacheln (renderers/quoteTilesRenderer.js). Drei je Zeile,
   am Handy zwei. Kurs, Kuerzel und Aenderung brechen nie um; lange Namen
   werden mit "…" gekuerzt. Eine gelbe Kachel hat keinen aktuellen Kurs. */
.quoteTilesContent:empty { display: none; }
.quoteTilesWrap { display: grid; gap: 10px; min-width: 0; }
.quoteTilesHead { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quoteTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.quoteTile { border: 1px solid var(--color-border); border-radius: 12px; min-width: 0; }
.quoteTile--stale { border-color: color-mix(in srgb, var(--color-warn) 60%, transparent); background: color-mix(in srgb, var(--color-warn) 8%, transparent); }
.quoteTileFace { display: grid; gap: 1px; padding: 10px; cursor: pointer; list-style: none; min-width: 0; }
.quoteTileFace::-webkit-details-marker { display: none; }
.quoteTileName, .quoteTileSymbol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quoteTileName { font-size: var(--font-size-sm, .85rem); font-weight: 650; }
.quoteTileSymbol { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.quoteTilePrice { margin-top: 5px; font-size: 1.1rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quoteTileChange, .quoteTileStale { font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quoteTileChange--up { color: var(--bar-up); }
.quoteTileChange--down { color: var(--bar-down); }
.quoteTileChange--flat { color: var(--color-muted); }
.quoteTileStale { color: var(--color-warn); }
.quoteTileSpark { display: block; width: 100%; height: 22px; margin-top: 6px; overflow: visible; }
.quoteTileSpark polyline { fill: none; stroke: var(--bar-magnitude); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.quoteTileFacts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; padding: 0 10px 10px; font-size: var(--font-size-xs, .75rem); }
.quoteTileFacts dt { color: var(--color-muted); white-space: nowrap; }
.quoteTileFacts dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quoteTileManual { margin: 0 10px 10px; padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: var(--font-size-xs, .75rem); font-weight: 700; cursor: pointer; white-space: nowrap; }
.quoteTilesNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
@media (max-width: 640px) {
  .quoteTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* QUOTE_TILES_END */

/* GOALS_OVERVIEW_START */
/* Uebersicht der Zielquoten (renderers/goalsOverviewRenderer.js). Balken wie
   in der Rebalancing-Handlungsliste. Namen, Quoten, Ziel und Abweichung
   brechen nie um; lange Namen werden mit "…" gekuerzt. */
.goalsContent:empty { display: none; }
.goalsOverview { display: grid; gap: 10px; min-width: 0; }
.goalsHead { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; min-width: 0; }
.goalsHead strong,
.goalsHead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goalsHead span { font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.goalsHead--ok { color: var(--bar-up); background: color-mix(in srgb, var(--bar-up) 12%, transparent); }
.goalsHead--act { color: var(--bar-serious); background: color-mix(in srgb, var(--bar-serious) 14%, transparent); }
.goalsRowsHead,
.goalsRow {
  display: grid;
  /* Feste Breiten fuer Ziel und Abweichung: jede Zeile ist ein eigenes
     Raster - mit auto finge jeder Balken woanders an. */
  grid-template-columns: minmax(0, 1.3fr) minmax(3rem, 1.5fr) 6.5rem 4.5rem;
  gap: 4px 12px;
  align-items: center;
}
.goalsRowsHead { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); white-space: nowrap; }
.goalsRowsHead span { overflow: hidden; text-overflow: ellipsis; }
.goalsRowsHead span:nth-child(n+3) { text-align: right; }
.goalsRows { border-top: 1px solid var(--color-border); }
.goalsRow { padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm, .85rem); }
.goalsName { display: grid; min-width: 0; }
.goalsNameMain,
.goalsNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goalsNameSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.goalsBullet { position: relative; height: 12px; border-radius: 3px; background: var(--bar-track); }
.goalsBand { position: absolute; top: -3px; bottom: -3px; border-radius: 3px; background: color-mix(in srgb, var(--bar-magnitude) 22%, transparent); }
.goalsActual { position: absolute; left: 0; top: 3px; height: 6px; border-radius: 3px; background: var(--bar-magnitude); }
.goalsRow--outside .goalsActual { background: var(--bar-serious); }
.goalsTarget { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-text); }
.goalsStepper {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
}
.goalsStepButton {
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.goalsStepButton:disabled { opacity: .35; cursor: default; }
.goalsStepValue {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--color-border);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.goalsDeviation { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.goalsRow--outside .goalsDeviation { color: var(--bar-serious); font-weight: 700; }
.goalsFoot { display: grid; gap: 4px; }
.goalsSum { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--font-size-sm, .85rem); white-space: nowrap; }
.goalsSum span { color: var(--color-muted); }
.goalsSum--ok strong { color: var(--bar-up); }
.goalsSum--off strong { color: var(--bar-serious); }
.goalsNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
/* Die Hinweise (frueher Karte Smart Insights) als schlichte Zeilen unter der
   Uebersicht statt als farbige Kaesten - Titel fett, Text darf umbrechen.
   !important nur, weil die Kastenregeln (.portfolioSmartInsightItem.is-*)
   Rahmen und Hintergrund selbst mit !important setzen. */
.goalsHints:empty { display: none; }
.goalsHints { margin-top: 10px; }
.goalsHints .portfolioSmartInsightList { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.goalsHints .portfolioSmartInsightItem,
.goalsHints .portfolioSmartInsightItem.is-good,
.goalsHints .portfolioSmartInsightItem.is-warn,
.goalsHints .portfolioSmartInsightItem.is-bad,
.goalsHints .portfolioSmartInsightItem.is-neutral {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--color-muted);
  font-size: var(--font-size-sm, .85rem);
}
.goalsHints .portfolioSmartInsightTitle { color: var(--color-text); font-weight: 700; white-space: nowrap; }
.goalsHints .portfolioSmartInsightTitle::after { content: ': '; }
.goalsHints .portfolioSmartInsightItem.is-warn .portfolioSmartInsightTitle,
.goalsHints .portfolioSmartInsightItem.is-bad .portfolioSmartInsightTitle { color: var(--bar-serious); }
@media (max-width: 480px) {
  .goalsRowsHead { display: none; }
  .goalsRow { grid-template-columns: minmax(0, 1fr) 6.5rem auto; }
  .goalsName { grid-column: 1 / -1; }
  .goalsBullet { grid-column: 1; }
}
/* GOALS_OVERVIEW_END */

/* SAVINGS_OVERVIEW_START */
/* Uebersicht der Sparplan-Optimierung (renderers/savingsPlanOverviewRenderer.js).
   Betraege, Pfeile und Abzeichen brechen nie um; lange Namen werden mit
   "…" gekuerzt. */
.savingsContent:empty { display: none; }
.savingsOverview { display: grid; gap: 10px; min-width: 0; }
.savingsHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.savingsHeadValue { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.savingsSignal,
.savingsBadge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  white-space: nowrap;
}
.savingsSignal { color: var(--bar-magnitude); background: color-mix(in srgb, var(--bar-magnitude) 14%, transparent); }
.savingsStack { display: flex; height: 22px; overflow: hidden; border-radius: 6px; background: var(--bar-track); }
.savingsSegment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.savingsSegment + .savingsSegment { border-left: 2px solid var(--color-surface); }
.savingsSegment.savingsColor--1, .savingsDot.savingsColor--1 { background: var(--bar-series-1); }
.savingsSegment.savingsColor--2, .savingsDot.savingsColor--2 { background: var(--bar-series-2); }
.savingsSegment.savingsColor--3, .savingsDot.savingsColor--3 { background: var(--bar-series-3); }
.savingsSegment.savingsColor--4, .savingsDot.savingsColor--4 { background: var(--bar-series-4); }
.savingsSegment.savingsColor--5, .savingsDot.savingsColor--5 { background: var(--bar-series-5); }
.savingsSegment.savingsColor--6, .savingsDot.savingsColor--6 { background: var(--bar-series-6); }
.savingsSegment.savingsColor--other, .savingsDot.savingsColor--other { background: var(--bar-other); }
.savingsDot.savingsColor--none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bar-other); }
.savingsRows { border-top: 1px solid var(--color-border); }
.savingsRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 6.5rem;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.savingsName { display: grid; min-width: 0; }
.savingsNameMain { display: flex; align-items: center; gap: 6px; min-width: 0; }
.savingsNameMain > span,
.savingsNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savingsNameSubPart + .savingsNameSubPart::before { content: ' · '; }
.savingsNameSub { padding-left: 15px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.savingsDot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.savingsAmount,
.savingsDelta { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.savingsDelta { font-size: var(--font-size-xs, .75rem); font-weight: 700; }
.savingsDelta--up { color: var(--bar-up); }
.savingsDelta--down { color: var(--bar-down); }
.savingsDelta--even { color: var(--color-muted); }
.savingsBadge { justify-self: end; }
.savingsBadge--up { color: var(--bar-up); background: color-mix(in srgb, var(--bar-up) 14%, transparent); }
.savingsBadge--down { color: var(--bar-down); background: color-mix(in srgb, var(--bar-down) 14%, transparent); }
.savingsBadge--muted { color: var(--color-muted); background: var(--bar-track); }
.savingsNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
@media (max-width: 480px) {
  /* Am Handy weicht das Abzeichen - der Pfeil sagt dasselbe. */
  .savingsRow { grid-template-columns: minmax(0, 1fr) auto 3.8rem; }
  .savingsBadge { display: none; }
  /* Ist/Ziel und Verteilung/Basis untereinander - nebeneinander passen sie
     nicht und wuerden abgeschnitten. */
  .savingsNameSub { display: grid; }
  .savingsNameSubPart { overflow: hidden; text-overflow: ellipsis; }
  .savingsNameSubPart + .savingsNameSubPart::before { content: none; }
}
/* SAVINGS_OVERVIEW_END */

/* CRASH_OVERVIEW_START */
/* Uebersicht der Karte Crash-Modus (renderers/crashOverviewRenderer.js).
   Lage, Werte und Achsenbeschriftung brechen nie um. */
.crashOverviewContent:empty { display: none; }
.crashOverview { display: grid; gap: 10px; min-width: 0; }
.crashState {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--bar-other);
  border-radius: 10px;
}
.crashState--normal { border-left-color: var(--bar-up); }
.crashState--warning { border-left-color: var(--bar-warning); }
.crashState--crash { border-left-color: var(--bar-down); background: color-mix(in srgb, var(--bar-down) 8%, transparent); }
.crashStateText { display: grid; min-width: 0; }
.crashStateTitle,
.crashStateSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crashStateSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.crashStateBadge { flex: none; padding: 2px 9px; border-radius: 999px; font-size: var(--font-size-xs, .75rem); font-weight: 700; white-space: nowrap; }
.crashStateBadge--off { color: var(--color-muted); background: var(--bar-track); }
.crashStateBadge--on { color: var(--bar-down); background: color-mix(in srgb, var(--bar-down) 14%, transparent); }
.crashScaleWrap { padding: 4px 0 0; }
.crashScale {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--bar-up) 0 var(--crash-warn),
    var(--bar-warning) var(--crash-warn) var(--crash-crash),
    var(--bar-down) var(--crash-crash));
}
.crashScaleMarker {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface);
}
.crashScaleAxis { position: relative; height: 1.2em; margin-top: 5px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.crashScaleTick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.crashScaleTick--start { left: 0; transform: none; }
.crashScaleTick--end { right: 0; transform: none; }
.crashBuyHead { margin: 4px 0 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.crashBuyRows { border-top: 1px solid var(--color-border); }
.crashBuyRow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(3rem, 1.6fr) 4.5rem;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm, .85rem);
}
.crashBuyName { display: grid; min-width: 0; }
.crashBuyNameMain,
.crashBuyNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crashBuyNameSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); font-variant-numeric: tabular-nums; }
.crashBuyGap { position: relative; height: 8px; border-radius: 4px; background: var(--bar-track); }
.crashBuyGap > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--bar-magnitude); }
.crashBuyValue { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .crashBuyRow { grid-template-columns: minmax(0, 1fr) 4.2rem; }
  .crashBuyGap { grid-column: 1 / -1; grid-row: 2; }
}
/* CRASH_OVERVIEW_END */

/* LIQUIDITY_BUDGET_START */
/* Karte Monatsbudget & Liquiditaet (liquidityViewRenderer.js). Betraege,
   Beschriftungen und Abzeichen brechen nie um; nur die Befundtexte sind
   Fliesstext. */
.budgetOverview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.budgetHero { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.budgetHeroLabel { color: var(--color-muted); font-size: var(--font-size-sm, .85rem); white-space: nowrap; }
.budgetHeroValue { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budgetTone--neg { color: var(--bar-down); }
.budgetTone--pos { color: var(--bar-up); }
.budgetSteps { display: grid; gap: 6px; }
.budgetStep { display: grid; grid-template-columns: 9.5rem minmax(3rem, 1fr) 6.5rem; gap: 10px; align-items: center; font-size: var(--font-size-sm, .85rem); }
.budgetStepLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budgetStepTrack { position: relative; height: 12px; border-radius: 3px; background: var(--bar-track); }
.budgetStepTrack > i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--bar-magnitude); }
.budgetStep--out .budgetStepTrack > i { background: color-mix(in srgb, var(--bar-magnitude) 45%, transparent); }
.budgetStep--negative .budgetStepTrack > i { background: var(--bar-down); }
.budgetStep--rest .budgetStepTrack > i { background: var(--bar-up); }
.budgetStep--total .budgetStepLabel,
.budgetStep--rest .budgetStepLabel,
.budgetStep--negative .budgetStepLabel { font-weight: 700; }
.budgetStepValue { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budgetStep--total .budgetStepValue,
.budgetStep--rest .budgetStepValue,
.budgetStep--negative .budgetStepValue { font-weight: 750; }
.budgetStep--negative .budgetStepValue { color: var(--bar-down); }
.budgetReserve { margin: 0; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.budgetFindings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.budgetFinding { padding: 9px 12px; border: 1px solid var(--color-border); border-left: 4px solid var(--bar-other); border-radius: 10px; }
.budgetFinding--critical { border-left-color: var(--bar-down); }
.budgetFinding--check { border-left-color: var(--bar-warning); }
.budgetFinding--ok { border-left-color: var(--bar-up); }
/* Passt der Titel nicht neben das Abzeichen, rutscht er ganz darunter -
   der Titel selbst bricht nicht um. */
.budgetFindingHead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.budgetFindingTitle { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgetBadge { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--font-size-xs, .75rem); font-weight: 700; white-space: nowrap; }
.budgetBadge--critical { color: var(--bar-down); background: color-mix(in srgb, var(--bar-down) 14%, transparent); }
.budgetBadge--check { color: var(--bar-serious); background: color-mix(in srgb, var(--bar-warning) 22%, transparent); }
.budgetBadge--ok { color: var(--bar-up); background: color-mix(in srgb, var(--bar-up) 14%, transparent); }
.budgetBadge--info { color: var(--color-muted); background: var(--bar-track); }
.budgetFindingText { margin: 4px 0 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.budgetFindingLink { display: inline-block; margin-top: 4px; color: var(--color-accent); font-size: var(--font-size-sm, .85rem); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 480px) {
  .budgetStep { grid-template-columns: minmax(0, 1fr) auto; }
  .budgetStepTrack { grid-column: 1 / -1; grid-row: 2; }
  /* "Planung reduzieren oder Einzahlung vornehmen" passt in voller Groesse
     nicht in die Zeile - etwas kleiner statt abgeschnitten oder umgebrochen. */
  .budgetFindingTitle { font-size: .75rem; }
}
/* LIQUIDITY_BUDGET_END */

/* DIVIDEND_CARD_START */
/* Karte Dividenden (renderers/dividendRenderer.js): Kalender der Zahlungen.
   Vier Stufen derselben Farbe; der Betrag steht im Kaestchen oder Tooltip,
   die Farbe allein traegt nichts. */
.dividends { display: grid; gap: 12px; min-width: 0; }
.dividendNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.dividendHero { margin: 0; font-size: var(--font-size-sm, .85rem); }
.dividendHeroValue { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dividendCalendar {
  display: grid;
  grid-template-columns: 2.6rem repeat(12, minmax(0, 1fr));
  gap: 3px;
  font-size: 11px;
}
.dividendMonthHead { color: var(--color-muted); text-align: center; }
.dividendYear { align-self: center; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dividendCell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 5px;
  background: var(--bar-track);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dividendCell--l1 { background: color-mix(in srgb, var(--bar-series-1) 38%, transparent); }
.dividendCell--l2 { background: color-mix(in srgb, var(--bar-series-1) 58%, transparent); }
.dividendCell--l3 { background: color-mix(in srgb, var(--bar-series-1) 78%, transparent); color: #fff; }
.dividendCell--l4 { background: var(--bar-series-1); color: #fff; }
.dividendCell--future { background: none; border: 1px dashed var(--color-border); }
/* Hochgerechnet (Punkt I): gestrichelt in der Reihenfarbe, Zahl gedaempft. */
.dividendCell--forecast { border-color: var(--bar-series-1); color: var(--color-muted); }
.dividendForecast { margin: 8px 0 0; font-size: 0.92rem; }
.dividendForecastNote { color: var(--color-muted); font-size: 0.85rem; }
.dividendScale { display: flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.dividendScale .dividendCell { width: 14px; height: 10px; border-radius: 3px; }
.dividendCompare { display: grid; gap: 6px; font-size: var(--font-size-sm, .85rem); }
.dividendCompareRow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dividendCompareRow strong { font-variant-numeric: tabular-nums; }
.dividendCompareTrack { height: 10px; border-radius: 5px; overflow: hidden; background: var(--bar-track); }
.dividendCompareBar { display: block; height: 100%; border-radius: 5px; background: var(--bar-series-1); }
.dividendCompareBar--before { background: color-mix(in srgb, var(--bar-series-1) 35%, transparent); }
.dividendStats { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.dividendStat { display: grid; gap: 1px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.dividendStat strong { color: var(--color-text); font-size: 1rem; font-variant-numeric: tabular-nums; }
/* DIVIDEND_CARD_END */

/* FIRE_CARD_START */
/* Karte FIRE Simulation (renderers/fireSimulationRenderer.js), Entwurf B:
   Projektion als Linie mit Spanne. Linien im gestreckten SVG
   (non-scaling-stroke), Beschriftung und Punkte als HTML darueber. */
.fireSimulation {
  --fire-color: #2563eb;
  --fire-band: color-mix(in srgb, var(--fire-color) 14%, transparent);
  display: grid;
  gap: 12px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .fireSimulation { --fire-color: #60a5fa; }

.fireKpis { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.fireKpi { display: grid; gap: 2px; align-content: start; }
.fireKpiLabel,
.fireKpiSub { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.fireKpiValue { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fireChart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 240px auto;
  column-gap: 8px;
  margin-top: 6px;
}
.fireChartAxisY { position: relative; grid-row: 1; min-width: 3.4rem; }
.fireChartTickY {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fireChartPlot { position: relative; grid-row: 1; grid-column: 2; min-width: 0; }
.fireChartSvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.fireChartGrid { stroke: var(--color-border); stroke-width: 1; }
.fireChartBand { fill: var(--fire-band); stroke: none; }
.fireChartNominal { fill: none; stroke: var(--fire-color); stroke-width: 2.5; stroke-linejoin: round; }
.fireChartReal { fill: none; stroke: var(--color-muted); stroke-width: 1.8; stroke-dasharray: 3 4; }
.fireChartTarget { stroke: var(--color-text); stroke-width: 1.5; stroke-dasharray: 6 5; }
.fireChartDrop { stroke: var(--fire-color); stroke-width: 1.2; stroke-dasharray: 2 4; }
.fireChartTargetLabel {
  position: absolute;
  left: 8px;
  transform: translateY(calc(-100% - 3px));
  color: var(--color-text);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 600;
  white-space: nowrap;
}
.fireChartDot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--fire-color);
  box-shadow: 0 0 0 2px var(--color-surface);
}
.fireChartDot--target { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.fireChartAxisX { position: relative; grid-row: 2; grid-column: 2; height: 1.4rem; }
.fireChartTickX {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
  font-variant-numeric: tabular-nums;
}
.fireChartTickX:first-child { transform: none; }
.fireChartTickX:last-child:not(:first-child) { transform: translateX(-100%); }

.fireLegend,
.fireAssumptions { display: flex; flex-wrap: wrap; gap: 6px; }
.fireLegendItem,
.fireAssumption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: var(--font-size-xs, .75rem);
}
.fireLegendSwatch { width: 12px; height: 0; border-top: 3px solid var(--fire-color); }
.fireLegendSwatch--real { border-top: 2px dotted var(--color-muted); }
.fireLegendSwatch--band { height: 10px; border: 0; border-radius: 2px; background: var(--fire-band); }
.fireNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.fireSettings { justify-self: start; }

@media (max-width: 480px) {
  .fireChart { grid-template-rows: 200px auto; }
}
/* FIRE_CARD_END */

/* DATA_QUALITY_CARD_START */
/* Karte Datenqualitaet (renderers/dataQualityRenderer.js). Status immer
   mit Zeichen und Wort, die Farbe kommt nur dazu. */
.dataQuality {
  --dq-ok: #16a34a;
  --dq-check: #d97706;
  --dq-open: #64748b;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .dataQuality {
  --dq-ok: #4ade80;
  --dq-check: #fbbf24;
  --dq-open: #94a3b8;
}

.dataQualitySummary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dataQualityCount { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dataQualitySummaryText { color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.dataQualitySegments { display: flex; gap: 3px; }
.dataQualitySegment { flex: 1 1 0; height: 8px; border-radius: 3px; background: var(--dq-ok); }
.dataQualitySegment--check { background: var(--dq-check); }
.dataQualitySegment--open { background: var(--dq-open); }
.dataQualityFinding {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--dq-check);
  border-radius: 8px;
}
.dataQualityFinding--open { border-left-color: var(--dq-open); }
.dataQualityFindingHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dataQualityBadge { font-size: var(--font-size-xs, .75rem); font-weight: 700; color: var(--dq-check); }
.dataQualityBadge--open { color: var(--dq-open); }
.dataQualityFindingText { margin: 0; font-size: var(--font-size-sm, .85rem); overflow-wrap: anywhere; }
.dataQualityAction { justify-self: start; color: var(--color-accent); font-size: var(--font-size-sm, .85rem); font-weight: 600; }
.dataQualityOkList { display: flex; flex-wrap: wrap; gap: 6px; }
.dataQualityOk {
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
}

/* Grafik oben, Tabelle zugeklappt darunter (Typ contentTable). */
.contentTable { display: grid; gap: 10px; min-width: 0; }
.contentTableSummary { cursor: pointer; color: var(--color-muted); font-size: var(--font-size-sm, .85rem); }
.contentTableDetails[open] > .contentTableSummary { margin-bottom: 8px; }
/* DATA_QUALITY_CARD_END */

/* Portfolio-Score (portfolioScoreRenderer.js): Zahl, Veraenderung, Linie,
   dann nur die Bestandteile, die Punkte kosten. Bis September 2026 stand
   hier ein Ring (conic-gradient) mit fuenf gleich langen Balken. Die
   Veraenderung in --bar-up/--bar-down wie vorher der Pfeil: je Modus ein
   lesbarer Ton. Das Minus in --color-warn, nicht Rot - fehlende Punkte sind
   Hinweis, kein Fehler. */
.scoreCard { display: grid; min-width: 0; }
.scoreHero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.scoreValue { font-size: 40px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text); }
.scoreOf { color: var(--color-muted); font-size: var(--font-size-md); }
.scoreVerdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 8px; font-weight: 700; color: var(--color-text); }
.scoreNotice { margin: 0 0 8px; color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 500; }
.scoreDelta { font-size: var(--font-size-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.scoreDelta--up { color: var(--bar-up); }
.scoreDelta--down { color: var(--bar-down); }
.scoreDelta--flat { color: var(--color-muted); }
.scoreSpark { margin: 2px 0 6px; }
.scoreSparkPlot { position: relative; height: 56px; margin: 16px 0 0; }
.scoreSparkSvg { display: block; width: 100%; height: 100%; overflow: visible; }
.scoreSparkLine { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; }
.scoreSparkArea { fill: var(--color-accent); opacity: .12; }
.scoreSparkDot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface); }
.scoreSparkValue { position: absolute; transform: translate(0, -150%); color: var(--color-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.scoreSparkValue--last { transform: translate(-100%, -150%); color: var(--color-text); font-weight: 700; }
.scoreSparkAxis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--color-muted); font-size: var(--font-size-xs); }
.scoreSparkNote { margin: 0 0 8px; color: var(--color-muted); font-size: var(--font-size-sm); }
.scoreMiss { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.scoreMinus { color: var(--color-warn); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2; }
.scoreMissBody { min-width: 0; }
.scoreMissHead { margin: 0; color: var(--color-text); }
.scoreMissHead span { color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 600; }
.scoreBar { height: 6px; margin: 6px 0 4px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.scoreBar i { display: block; height: 100%; border-radius: 4px; background: var(--color-accent); }
.scoreReason { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); line-height: var(--line-normal); }
.scoreLink { display: inline-block; margin-top: 2px; color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.scoreFull { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.scoreChip { padding: 3px 9px; border-radius: 999px; background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--font-size-xs); }
.scoreChip b { color: var(--color-success); }

#portfolioModeDashboardContent [data-dashboard-content-part="portfolio-mode-cards"] > :has(#portfolioModeSelectedStrategyCard) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

.importQuoteLayerV2[data-open="true"] {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.importQuoteLayerV2Card {
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  padding: 14px 16px;
  color: var(--color-text);
}

.importQuoteLayerV2Header {
  display: flex;
  justify-content: space-between;
}

.importQuoteLayerV2Eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted);
}

.importQuoteLayerV2 h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.importQuoteLayerV2Badge {
  flex: 0 0 auto;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  font-weight: 800;
}

.importQuoteLayerV2Meta {
  margin: 8px 0 10px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.importQuoteLayerV2Item {
  margin: 0;
  border-radius: 14px;
  background: rgba(240, 249, 255, 0.82);
  padding: 7px 9px;
  font-size: 0.82rem;
  line-height: 1.28;
  color: var(--color-text);
}

.importQuoteLayerV2Meta[hidden] {
  display: none !important;
}

.importQuoteLayerV2List {
  display: grid;
}

.importQuoteLayerV2Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(232, 242, 249, 0.88);
}

.importQuoteLayerV2RowName {
  color: #172033;
}

.importQuoteLayerV2RowMeta {
  margin-top: 4px;
  color: #66768a;
  font-size: 0.9rem;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
}

.importQuoteLayerV2RowIcon {
  position: relative;
}

.importQuoteLayerV2Icon {
  font-weight: 800;
}

.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2IconPause,
.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2IconSpinner,
.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2IconDone,
.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2IconError {
  display: flex;
}

.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2IconPause {
  color: #8a98aa;
}

.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2IconDone {
  color: #1f9b62;
}

.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2IconError {
  color: #c64f4f;
}

@keyframes importQuoteLayerV2Spin {
  to {
    transform: rotate(360deg);
  }
}

.importQuoteLayerV2RowIcon {
  border: 1.5px solid rgba(117, 135, 155, 0.38);
  background: rgba(255, 255, 255, 0.78);
}

.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2RowIcon {
  color: #8a98aa;
  border-color: rgba(138, 152, 170, 0.42);
}

.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2RowIcon {
  color: #1f8acb;
}

.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2RowIcon {
  color: #209764;
  border-color: rgba(32, 151, 100, 0.52);
  background: rgba(236, 253, 245, 0.86);
}

.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2RowIcon {
  color: #c84d4d;
  border-color: rgba(200, 77, 77, 0.52);
  background: rgba(255, 241, 241, 0.88);
}

.importQuoteLayerV2::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(244, 248, 252, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  backdrop-filter: blur(22px) saturate(118%);
}

.importQuoteLayerV2RowName {
  font-size: 0.91rem !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.importQuoteLayerV2RowIcon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 2px 6px rgba(24, 39, 64, 0.06);
}

.importQuoteLayerV2Badge {
  font-size: 0.88rem;
}

.importQuoteLayerV2Header h3,
.importQuoteLayerV2 [data-import-quote-layer-v2-title] {
  font-size: 1rem;
  line-height: 1.15;
}

.importQuoteLayerV2 {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 2147482000 !important;
  display: none !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(env(safe-area-inset-top, 0px) + 92px) 16px 24px !important;
  background: rgba(15, 23, 42, 0.42) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
  pointer-events: none !important;
  isolation: auto !important;
}

.importQuoteLayerV2[data-open="true"] {
  display: flex !important;
  pointer-events: auto !important;
}

.importQuoteLayerV2::before {
  content: none !important;
  display: none !important;
}

.importQuoteLayerV2Card {
  position: relative !important;
  z-index: 1 !important;
  width: min(680px, 100%) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 24px !important;
}

.importQuoteLayerV2Header {
  align-items: center !important;
  gap: 10px !important;
}

.importQuoteLayerV2Eyebrow,
.importQuoteLayerV2 [data-import-quote-layer-v2-eyebrow],
.importQuoteLayerV2Badge,
.importQuoteLayerV2RowName {
  font-size: 0.78rem !important;
  line-height: 1.18 !important;
  letter-spacing: -0.005em !important;
}

.importQuoteLayerV2Eyebrow,
.importQuoteLayerV2 [data-import-quote-layer-v2-eyebrow],
.importQuoteLayerV2Badge {
  font-weight: 600 !important;
}

.importQuoteLayerV2RowName {
  font-weight: 500 !important;
}

.importQuoteLayerV2 [data-import-quote-layer-v2-title],
.importQuoteLayerV2 [data-import-quote-layer-v2-title][hidden] {
  display: none !important;
}

.importQuoteLayerV2Badge {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.importQuoteLayerV2List {
  gap: 6px !important;
  margin-top: 9px !important;
}

.importQuoteLayerV2Row {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 13px !important;
  gap: 8px !important;
}

.importQuoteLayerV2RowText {
  flex: 1 1 auto !important;
}

.importQuoteLayerV2RowName {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.importQuoteLayerV2RowMeta {
  display: none !important;
}

.importQuoteLayerV2RowIcon {
  border-width: 1px !important;
}

.importQuoteLayerV2Icon {
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

.importQuoteLayerV2IconSpinner {
  border-width: 1.4px !important;
}

.importQuoteLayerV2RowIcon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.importQuoteLayerV2Icon {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.importQuoteLayerV2IconPause,
.importQuoteLayerV2IconDone,
.importQuoteLayerV2IconError {
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.importQuoteLayerV2IconSpinner {
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  border: 2px solid rgba(31, 138, 203, 0.20) !important;
  border-top-color: rgba(31, 138, 203, 0.98) !important;
  border-right-color: rgba(31, 138, 203, 0.58) !important;
  background: transparent !important;
  animation: importQuoteLayerV2Spin 0.72s linear infinite !important;
}

.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2RowIcon {
  border-color: rgba(31, 138, 203, 0.58) !important;
  background: rgba(238, 249, 255, 0.86) !important;
}

.importQuoteLayerV2 {
  overflow: hidden !important;
}

.importQuoteLayerV2Card {
  display: flex !important;
  flex-direction: column !important;
}

@supports not (height: 100dvh) {
  .importQuoteLayerV2Card {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 116px) !important;
  }
}

.importQuoteLayerV2Header {
  flex: 0 0 auto !important;
}

.importQuoteLayerV2Meta {
  flex: 0 0 auto !important;
}

.importQuoteLayerV2List::-webkit-scrollbar {
  width: 4px;
}

.importQuoteLayerV2List::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.28);
}

.importQuoteLayerV2Card {
  padding-right: 16px !important;
}

.importQuoteLayerV2List {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.importQuoteLayerV2Row {
  box-sizing: border-box !important;
}

.importQuoteLayerV2 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  align-items: flex-start !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px) !important;
}

.importQuoteLayerV2Card {
  max-height: none !important;
  overflow: visible !important;
}

.importQuoteLayerV2List {
  flex: none !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  scrollbar-gutter: auto !important;
}

.importQuoteLayerV2Row {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

.importQuoteLayerV2RowText {
  min-width: 0 !important;
}

.importQuoteLayerV2RowIcon {
  margin-right: 0 !important;
}

.importQuoteLayerV2[data-open="true"] .importQuoteLayerV2Eyebrow::after {
  content: "";
  display: inline-block;
  min-width: 1.2em;
  text-align: left;
  animation: importQuoteLayerV2Dots 1.15s steps(4, end) infinite;
}

@keyframes importQuoteLayerV2Dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

/* Kursdaten-Ebene beim Import im Dunkelmodus (Q15). Die Ebene war nur hell
   gebaut - weisse Karte, helle Zeilen, dunkle Schrift als feste Werte -,
   im Dunkelmodus erbte die Karte aber die helle Textfarbe: heller Text auf
   fast weissem Grund. Die Regeln oben arbeiten mit !important, deshalb
   hier auch. Statt fester Werte die Tokens, damit die Ebene dem Thema folgt. */
[data-resolved-theme="dark"] .importQuoteLayerV2::before {
  background: var(--color-backdrop) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Card {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Row,
[data-resolved-theme="dark"] .importQuoteLayerV2Item {
  background: var(--color-surface-soft) !important;
  color: var(--color-text) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2RowName {
  color: var(--color-text) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2RowMeta {
  color: var(--color-muted) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Badge {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important;
  color: var(--color-accent) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2RowIcon {
  background: var(--color-surface) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2RowIcon {
  background: color-mix(in srgb, var(--color-success) 16%, transparent) !important;
  color: var(--color-success) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2RowIcon {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent) !important;
  color: var(--color-danger) !important;
}

[data-resolved-theme="dark"] .importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2RowIcon {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important;
}

/* UI_CONTENT_UIBUTTON_PRIMARY_BORDER_START */
/*
  Einheitliche dezente Primary-Border nur für zentrale Inhaltsbuttons.
  Bewusst NICHT betroffen:
  - Navigation / navButton
  - Header / CSV / Einstellungen / Hamburger
  - Drawer-Buttons
  - native button global
*/
.uiButton:not(.uiButton--danger) {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--secondary,
.uiButton--ghost {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--danger {
  border-color: rgba(239, 68, 68, .45);
}

.uiButton:focus-visible:not(.uiButton--danger) {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 58%, transparent);
  outline-offset: 2px;
}
/* UI_CONTENT_UIBUTTON_PRIMARY_BORDER_END */

/*
  Gesperrte Knöpfe sichtbar machen: "Börse geschlossen" und "Kurshistorie
  aktuell" sahen sonst aus wie drückbare Knöpfe. Grauer Rand statt der
  Akzentfarbe, dazu blasser - der Text bleibt lesbar, weil er der Grund ist.
*/
.uiButton:disabled {
  border-color: var(--color-border);
  opacity: .6;
  cursor: not-allowed;
}

/* UI_RAW_TABLE_LIMIT_BUTTON_PRIMARY_BORDER_START */
/*
  Sonderfall: Tabellenlimit-Buttons wie
  "Alle Zeilen anzeigen" / "Monatsansicht vollständig".
  Diese haben eigene rawTableLimitNotice-Regeln mit !important
  und brauchen deshalb einen gezielten Override.
*/
.rawTableLimitNotice > button,
.rawTableLimitNotice .uiButton {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent) !important;
}

.rawTableLimitNotice > button:focus-visible,
.rawTableLimitNotice .uiButton:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 58%, transparent);
  outline-offset: 2px;
}
/* UI_RAW_TABLE_LIMIT_BUTTON_PRIMARY_BORDER_END */

.appHeaderTitle--area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.appHeaderAreaTitle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--color-text) !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.appHeaderAreaTitleText {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.appHeader1Icon,
.navIcon {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.menuButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
  min-width: 46px;
  min-height: 46px;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0 var(--space-sm);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.headerActionButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
  min-height: 46px;
  line-height: 1;
  padding: 0 var(--space-sm);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menuButton .appHeader1Icon,
.headerActionButton .appHeader1Icon {
  width: 22px !important;
  height: 22px !important;
}

.navButton {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.navButtonText {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.appHeaderMeta {
  display: none !important;
}

.appDrawer {
  position: fixed;
  inset: 0;
  opacity: 0;
  z-index: 99998 !important;
  pointer-events: none !important;
}

.appDrawer.isOpen {
  opacity: 1;
  pointer-events: auto !important;
}

.importPanel {
  z-index: 99998 !important;
  pointer-events: none !important;
}

.settingsPanel {
  position: fixed;
  inset: 0;
  opacity: 0;
  z-index: 99998 !important;
  pointer-events: none !important;
}

.importPanel.isOpen {
  pointer-events: auto !important;
}

.settingsPanel.isOpen {
  opacity: 1;
  pointer-events: auto !important;
}

.importBackdrop {
  z-index: 99998 !important;
}

.importPanelBody {
  z-index: 99999 !important;
  will-change: transform !important;
  transform: translateX(102%) !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
}

.importPanel.isOpen .importPanelBody {
  transform: translateX(0) !important;
}

.settingsPanel.isOpen .settingsPanelBody {
  transform: translateX(0) !important;
}

.appHeader .menuButton,
.appHeader .headerActionButton {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

.appHeader .menuButton .appHeader1Icon,
.appHeader .headerActionButton .appHeader1Icon {
  width: 20px !important;
  height: 20px !important;
}

.appHeader .appHeaderAreaTitle .appHeader1Icon {
  width: 19px !important;
  height: 19px !important;
}

@media (max-width: 859px) {
  .appHeader .menuButton,
  .appHeader .headerActionButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  .appHeader .menuButton .appHeader1Icon,
  .appHeader .headerActionButton .appHeader1Icon {
    width: 19px !important;
    height: 19px !important;
  }

  .appHeader .appHeaderAreaTitle {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .appHeader .appHeaderAreaTitle .appHeader1Icon {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 420px) {
  .appHeader .menuButton,
  .appHeader .headerActionButton {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .appHeader .menuButton .appHeader1Icon,
  .appHeader .headerActionButton .appHeader1Icon {
    width: 18px !important;
    height: 18px !important;
  }

  .appHeader .appHeaderAreaTitle {
    font-size: 15.5px !important;
  }
}

.appNavigation--drawer .navButton {
  min-height: 40px !important;
}

@media (max-width: 420px) {
  .appNavigation--drawer .navButton {
    min-height: 38px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .appNavigation--drawer .navButton .navIcon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
}

.appNavigation--drawer {
  overflow: visible;
  padding: 0;
  margin: 0;
  display: grid !important;
  gap: 8px !important;
}

.appNavigation--drawer .navButton {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(18, 28, 47, .72) !important;
  color: var(--color-text) !important;
  text-align: left !important;
  font-weight: 750 !important;
}

.appNavigation--drawer .navButton .navIcon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

.appNavigation--drawer .navButtonText {
  display: inline-block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 860px) {
  .appNavigation--drawer .navButton .navIcon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

.appHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  margin-top: 0 !important;
  padding-top: calc(8px + var(--app-shell-pad, 0px)) !important;
  padding-bottom: 8px !important;
}

.appShell.isOverlayOpen .appHeader {
  z-index: 5 !important;
}

.importPanelBody,
.importBackdrop {
  position: fixed;
}

.settingsBackdrop {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
  z-index: 99998 !important;
  position: fixed;
}

.settingsPanelBody {
  top: 0;
  right: 0;
  width: min(360px, 90vw);
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  overflow-y: auto;
  z-index: 99999 !important;
  will-change: transform !important;
  transform: translateX(102%) !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
  position: fixed;
}

.drawerBackdrop {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
  z-index: 99998 !important;
  position: fixed;
}

.drawerPanel {
  top: 0;
  left: 0;
  width: min(330px, 86vw);
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  z-index: 99999 !important;
  will-change: transform !important;
  transform: translateX(-102%) !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
  position: fixed;
}

.portfolioModeHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.portfolioModeStrategy {
  min-width: 0;
  color: var(--color-text);
  font-weight: 750;
  line-height: 1.25;
}

.portfolioModeDescription,
.portfolioModeAllocation {
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

.portfolioSmartInsightList,
.portfolioStockCapList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolioSmartInsightItem,
.portfolioStockCapItem {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, .18);
}

.portfolioSmartInsightTitle,
.portfolioStockCapTitle {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.portfolioSmartInsightText,
.portfolioStockCapText {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .portfolioSmartInsightItem,
  .portfolioStockCapItem {
    padding: 9px 10px;
  }

  .portfolioSmartInsightTitle,
  .portfolioSmartInsightText,
  .portfolioStockCapTitle,
  .portfolioStockCapText {
    font-size: 12.5px;
  }
}

/* kleines Badge direkt neben Portfolio-Modus Titel */
[data-module-id="dashboard.portfolioMode"] h1,
[data-module-id="dashboard.portfolioMode"] h2,
[data-module-id="dashboard.portfolioMode"] h3,
[data-module-id="dashboard.portfolioMode"] .moduleTitle,
[data-module-id="dashboard.portfolioMode"] .moduleCardTitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.portfolioModeTitleBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent) !important;
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) !important;
  color: var(--color-text) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.portfolioModeHeader--content {
  margin-bottom: 8px !important;
}

.portfolioModeHeader--content .portfolioModeStrategy {
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Portfolio-Modus-Karten tag/nacht-konform */
.portfolioSmartInsightItem,
.portfolioStockCapItem {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.portfolioSmartInsightTitle,
.portfolioStockCapTitle {
  color: var(--color-text) !important;
}

.portfolioSmartInsightText,
.portfolioStockCapText,
.portfolioModeDescription,
.portfolioModeAllocation {
  color: var(--color-muted) !important;
}

.portfolioSmartInsightItem.is-good,
.portfolioStockCapItem.is-good {
  border-color: color-mix(in srgb, #22c55e 52%, var(--color-border)) !important;
  background: color-mix(in srgb, #22c55e 5%, var(--color-surface)) !important;
}

.portfolioSmartInsightItem.is-warn,
.portfolioStockCapItem.is-warn {
  border-color: color-mix(in srgb, #facc15 55%, var(--color-border)) !important;
  background: color-mix(in srgb, #facc15 6%, var(--color-surface)) !important;
}

.portfolioSmartInsightItem.is-bad,
.portfolioStockCapItem.is-bad {
  border-color: color-mix(in srgb, #f87171 58%, var(--color-border)) !important;
  background: color-mix(in srgb, #f87171 6%, var(--color-surface)) !important;
}

.portfolioSmartInsightItem.is-neutral,
.portfolioStockCapItem.is-neutral {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
}

/* Navigation tag/nacht-konform */
.appNavigation--drawer .navButton:not(.isActive):not([aria-current="page"]) {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.appNavigation--drawer .navButton:not(.isActive):not([aria-current="page"]) .navIcon {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: .95 !important;
}

.appNavigation--drawer .navButton.isActive {
  box-shadow: none !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #001527 !important;
}

.appNavigation--drawer .navButton[aria-current="page"] {
  box-shadow: none !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #001527 !important;
}

.appNavigation--drawer .navButton.isActive .navIcon,
.appNavigation--drawer .navButton[aria-current="page"] .navIcon {
  color: #001527 !important;
  stroke: #001527 !important;
}

/* Portfolio-Modus: Core/Satellite-Ausgabe oben nicht an der Card kleben lassen */
#portfolioModeStrategyAllocationCard {
  padding-top: 1.25rem;
}

#portfolioModeStrategyAllocationCard > :first-child {
  margin-top: 0;
}

/* Nur Vermögensprognose: Annahmen-Badges Schlecht / Realistisch / Gut */
.apP5ForecastThemeScope .apP5ForecastAssumptionLabel {
  color: var(--color-muted) !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface-soft) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  filter: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge * {
  color: inherit !important;
  opacity: 1 !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-bad {
  border-color: color-mix(in srgb, #ef4444 64%, var(--color-border)) !important;
  background: color-mix(in srgb, #ef4444 12%, var(--color-surface-soft)) !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-neutral {
  border-color: color-mix(in srgb, var(--color-accent) 62%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-soft)) !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-good {
  border-color: color-mix(in srgb, #22c55e 64%, var(--color-border)) !important;
  background: color-mix(in srgb, #22c55e 12%, var(--color-surface-soft)) !important;
}

@media (max-width: 520px) {
  .apP5ForecastThemeScope .apP5ForecastPaBadge {
    min-height: 25px !important;
    padding: 5px 9px !important;
    font-size: 11.5px !important;
  }
}

/* Nur während aktiver Eingabe in Planungswerte/Budgets: teure Drawer-Paints abschalten */
html.apBudgetInputEditing .settingsBackdrop,
html.apBudgetInputEditing .drawerBackdrop,
html.apBudgetInputEditing .importBackdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
}

html.apBudgetInputEditing .settingsPanelBody,
html.apBudgetInputEditing .settingsPanel,
html.apBudgetInputEditing .drawerPanel {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

html.apBudgetInputEditing [data-broker-planning-settings="1"] * {
  scroll-behavior: auto !important;
}

html.apBudgetInputEditing [data-broker-planning-settings="1"] {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  scroll-behavior: auto !important;
}

html.apBudgetInputEditing [data-broker-planning-input] {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  touch-action: manipulation;
}

@media (min-width: 761px) {
  .apMobileDashboardCarousel {
    display: contents !important;
  }

  .apMobileDashboardCarouselViewport,
  .apMobileDashboardCarouselTrack,
  .apMobileDashboardCarouselSlide {
    display: contents !important;
  }

  .apMobileDashboardCarouselDots {
    display: none !important;
  }
}

/* Direkte Share-/Ranking-Liste für Heatmap/Treemap und Assetklassen-Treemap */
#dashboardTreemapContent.apTreemapShareListContent,
#assetClassTreemapContent.apTreemapShareListContent {
  display: grid !important;
  gap: 12px !important;
}

.apTreemapShareListEmpty {
  margin: 0 !important;
  color: var(--color-muted) !important;
  font-size: var(--font-size-sm, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.apTreemapShareList {
  display: grid;
  gap: 12px;
}

.apTreemapShareRow {
  --ap-share-color: var(--color-accent);
  --ap-share-width: 0%;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--ap-share-color);
  background: var(--color-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.apTreemapShareTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.apTreemapShareIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ap-share-color) 14%, transparent);
  color: var(--color-text);
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
}

.apTreemapShareName {
  min-width: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.22;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
}

.apTreemapSharePct {
  white-space: nowrap;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apTreemapShareBar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ap-share-color) 13%, var(--color-border));
}

.apTreemapShareBar span {
  display: block;
  width: var(--ap-share-width);
  height: 100%;
  border-radius: inherit;
  background: var(--ap-share-color);
}

.apTreemapShareMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apTreemapShareName,
.apTreemapSharePct,
.apTreemapShareMeta,
.apTreemapShareIndex {
  font-weight: 400 !important;
}

#dashboardTreemapContent .apTreemapShareName,
#dashboardTreemapContent .apTreemapSharePct,
#dashboardTreemapContent .apTreemapShareMeta,
#assetClassTreemapContent .apTreemapShareName,
#assetClassTreemapContent .apTreemapSharePct,
#assetClassTreemapContent .apTreemapShareMeta {
  font-weight: 400 !important;
}

.apTreemapShareRow b,
.apTreemapShareRow strong,
.apTreemapShareRow [style*="font-weight"] {
  font-weight: 400 !important;
}

.apTreemapShareName,
.apTreemapSharePct {
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  #dashboardTreemapContent.apTreemapShareListContent,
  #assetClassTreemapContent.apTreemapShareListContent {
    gap: 11px !important;
  }

  .apTreemapShareList {
    gap: 11px;
  }

  .apTreemapShareRow {
    padding: 10px 11px;
    border-radius: 14px;
    gap: 6px;
  }

  .apTreemapShareName {
    font-size: 0.86rem;
    line-height: 1.2;
    font-weight: 400 !important;
  }

  .apTreemapSharePct {
    font-size: 0.84rem;
    font-weight: 400 !important;
  }

  .apTreemapShareMeta {
    font-size: 0.72rem;
    font-weight: 400 !important;
  }

  .apTreemapShareBar {
    height: 5px;
  }
}

/* Vermögensprognose: kompakte Szenario-Cards aus vmBuildForecastRows(), ohne Tabelle */
#chartForecastContent {
  min-width: 0;
}

.apForecastCompactShell {
  display: grid;
  gap: 12px;
}

.apForecastCompactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.apForecastCompactCard {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.apForecastCompactCard.bad {
  border-left: 4px solid #f59e0b;
}

.apForecastCompactCard.mid {
  border-left: 4px solid #38bdf8;
}

.apForecastCompactCard.good {
  border-left: 4px solid #22c55e;
}

.apForecastCompactTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.apForecastCompactTitle {
  margin: 0 !important;
  color: var(--color-text);
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apForecastCompactRate {
  white-space: nowrap;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apForecastCompactRows {
  display: grid;
  gap: 10px;
}

.apForecastCompactRow {
  --ap-forecast-width: 0%;
  display: grid;
  gap: 5px;
}

.apForecastCompactRowTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.apForecastCompactYear {
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apForecastCompactValue {
  color: var(--color-text);
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 400 !important;
  text-align: right;
}

.apForecastCompactTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border);
}

.apForecastCompactFill {
  display: block;
  width: var(--ap-forecast-width);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.apForecastCompactCard.bad .apForecastCompactFill {
  background: #f59e0b;
}

.apForecastCompactCard.mid .apForecastCompactFill {
  background: #38bdf8;
}

.apForecastCompactCard.good .apForecastCompactFill {
  background: #22c55e;
}

/* Kaufkraft: eine Zeile je Szenario, eine Fussnote fuer die Annahme.
   Bewusst kein eigener Balken - der nominale Balken darueber ist die
   Aussage, die Kaufkraft ist die Einordnung dazu. */
.apForecastCompactReal {
  margin: 0.4rem 0 0 !important;
  color: var(--color-muted) !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.apForecastCompactNote {
  margin: 0.55rem 0 0 !important;
  color: var(--color-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.apForecastCompactEmpty {
  margin: 0 !important;
  color: var(--color-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

#chartForecastContent b,
#chartForecastContent strong,
#chartForecastContent [style*="font-weight"],
.apForecastCompactCard b,
.apForecastCompactCard strong,
.apForecastCompactCard [style*="font-weight"] {
  font-weight: 400 !important;
}

@media (max-width: 859px) {
  .apForecastCompactGrid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .apForecastCompactCard {
    border-radius: 15px;
    padding: 11px;
  }

  .apForecastCompactRows {
    gap: 9px;
  }

  .apForecastCompactTitle {
    font-size: 0.9rem;
  }

  .apForecastCompactRate,
  .apForecastCompactValue {
    font-size: 0.8rem;
  }

  .apForecastCompactYear {
    font-size: 0.74rem !important;
  }
}

/* Zentrale Mobile-Basis für Cards innerhalb von Modulen */
.apInnerCardsMobileDots {
  display: none;
}

@media (max-width: 760px) {
  [data-ap-innercards-mobile="1"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--ap-innercards-gap, 12px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  [data-ap-innercards-mobile="1"]::-webkit-scrollbar {
    display: none;
  }

  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-inline: 0;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"],
  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"] * {
    box-sizing: border-box;
    max-width: 100%;
  }

  .apInnerCardsMobileDots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 18px;
    margin-top: 8px;
  }

  .apInnerCardsMobileDots[hidden] {
    display: none !important;
  }

  .apInnerCardsMobileDot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-border);
    opacity: .78;
    transition: width .18s ease, opacity .18s ease, background .18s ease;
  }

  .apInnerCardsMobileDot.active,
  .apInnerCardsMobileDot[aria-current="true"] {
    width: 22px;
    background: var(--color-accent);
    opacity: 1;
  }
}

/* Mobile: Carousel-Höhe folgt aktiver Slide, Dots rücken direkt darunter */
@media (max-width: 760px) {
  :root {
    --ap-mobile-carousel-after-gap: 10px;
    --ap-mobile-carousel-dot-top-gap: 6px;
  }

  .apPortfolioPositionCardsSwipe,
  [data-ap-mobile-dashboard-carousel],
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-portfolio-position-cards-swipe="1"] {
    overflow: visible !important;
  }

  .apPortfolioPositionCardsSwipeViewport,
  .apPortfolioPositionsSwipeViewport,
  [data-ap-mobile-carousel-viewport] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: height .14s ease;
  }

  .apPortfolioPositionCardsSwipeTrack,
  .apPortfolioPositionsSwipeTrack,
  [data-ap-mobile-carousel-track] {
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: height .14s ease;
  }

  [data-ap-mobile-carousel-slide],
  [data-ap-portfolio-position-card-slide],
  [data-ap-portfolio-position-slide] {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }

  [data-ap-mobile-carousel-slide] > *,
  [data-ap-portfolio-position-card-slide] > *,
  [data-ap-portfolio-position-slide] > * {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-ap-mobile-carousel-dots] {
    margin-top: var(--ap-mobile-carousel-dot-top-gap) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .apPortfolioPositionCardsSwipe + *,
  [data-ap-mobile-carousel] + *,
  [data-ap-carousel-root] + *,
  [data-ap-portfolio-position-cards-swipe="1"] + * {
    margin-top: var(--ap-mobile-carousel-after-gap) !important;
  }
}

/* Mobile: alle Carousel-/Swipe-Dots einheitlich färben */
@media (max-width: 760px) {
  :root {
    --ap-mobile-dot-active-color: #0284c7;
    --ap-mobile-dot-inactive-color: rgba(203, 213, 225, 0.75);
  }

  .apInnerCardsMobileDot,
  .apInnerCardsMobileDots button,
  [data-ap-mobile-carousel-dots] button,
  [data-ap-innercards-dots] button {
    background: var(--ap-mobile-dot-inactive-color) !important;
  }

  .apInnerCardsMobileDot.active,
  .apInnerCardsMobileDot[aria-current="true"],
  .apInnerCardsMobileDots button.active,
  .apInnerCardsMobileDots button[aria-current="true"],
  [data-ap-mobile-carousel-dots] button.active,
  [data-ap-mobile-carousel-dots] button[aria-current="true"],
  [data-ap-innercards-dots] button.active,
  [data-ap-innercards-dots] button[aria-current="true"] {
    background: var(--ap-mobile-dot-active-color) !important;
  }
}

/* Mobile: Zusatzabstand nach Swipe-Gruppen entfernen.
   Übrig bleibt nur der normale Parent-Grid-Gap. */
@media (max-width: 760px) {
  .apPortfolioPositionCardsSwipe,
  [data-ap-mobile-dashboard-carousel],
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-portfolio-position-cards-swipe="1"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apPortfolioPositionCardsSwipe + *,
  [data-ap-mobile-dashboard-carousel] + *,
  [data-ap-mobile-carousel] + *,
  [data-ap-carousel-root] + *,
  [data-ap-portfolio-position-cards-swipe="1"] + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .apInnerCardsMobileDots,
  [data-ap-mobile-carousel-dots],
  [data-ap-innercards-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .apPortfolioPositionCardsSwipeViewport,
  .apPortfolioPositionCardsSwipeTrack,
  .apPortfolioPositionsSwipeViewport,
  .apPortfolioPositionsSwipeTrack,
  [data-ap-mobile-carousel-viewport],
  [data-ap-mobile-carousel-track] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Analyse: mobile Modul-Swipe-Gruppen über zentrale Carousel-Attribute */
@media (max-width: 760px) {
  .apAnalysisModuleSwipe,
  [data-ap-analysis-module-swipe="1"] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apAnalysisModuleSwipeViewport,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-viewport] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
  }

  .apAnalysisModuleSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apAnalysisModuleSwipeTrack,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-track] {
    --ap-analysis-module-swipe-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ap-analysis-module-swipe-gap);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .apAnalysisModuleSwipeTrack > [data-ap-analysis-module-swipe-slide],
  [data-ap-analysis-module-swipe="1"] [data-ap-analysis-module-swipe-slide] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button.active,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button.isActive,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button[aria-current="true"] {
    width: 18px;
  }
}

/* Rebalancing/Sparplan/Crash-Modus/Liquidität: mobile Paar-Swipes mit zentralen Carousel-Dots */
@media (max-width: 760px) {
  .apSectionPairMobileSwipe,
  [data-ap-section-pair-mobile-swipe="1"] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apSectionPairMobileSwipeViewport,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-viewport] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
  }

  .apSectionPairMobileSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apSectionPairMobileSwipeTrack,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-track] {
    --ap-section-pair-mobile-swipe-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ap-section-pair-mobile-swipe-gap);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .apSectionPairMobileSwipeTrack > [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-section-pair-mobile-swipe-slide] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button.active,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button.isActive,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button[aria-current="true"] {
    width: 18px;
  }
}

/* Mobile: keine Module/Swipe-Tracks dürfen den Body initial horizontal verbreitern.
   clip statt hidden: overflow-x: hidden zieht overflow-y: auto nach sich und
   macht jedes dieser Elemente zu einem eigenen Scroll-Bereich. Der sticky
   Header (.appHeader) klebte dann oben in .appShell - die selbst nie
   scrollt - und scrollte mit der Seite weg. clip schneidet genauso ab, ohne
   Scroll-Bereich. hidden bleibt davor stehen fuer Browser ohne clip
   (Safari vor 16): Dort bleibt es beim alten Verhalten. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  #app,
  .appShell,
  .viewContent,
  .appViewContent,
  .moduleGrid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  .moduleCard,
  .card,
  [data-module-id] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .apPortfolioPositionCardsSwipe,
  .apAnalysisModuleSwipe,
  .apSectionPairMobileSwipe,
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-analysis-module-swipe="1"],
  [data-ap-section-pair-mobile-swipe="1"],
  [data-ap-portfolio-position-cards-swipe="1"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: inline-size !important;
  }

  .apPortfolioPositionCardsSwipeViewport,
  .apAnalysisModuleSwipeViewport,
  .apSectionPairMobileSwipeViewport,
  [data-ap-mobile-carousel-viewport] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .apPortfolioPositionCardsSwipeTrack,
  .apAnalysisModuleSwipeTrack,
  .apSectionPairMobileSwipeTrack,
  [data-ap-mobile-carousel-track] {
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  [data-ap-mobile-carousel-slide],
  [data-ap-analysis-module-swipe-slide],
  [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-portfolio-position-card-slide] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tableWrap,
  .chartBox,
  .moduleCardBody,
  .moduleBody,
  .cardBody {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tableWrap {
    overflow-x: auto !important;
  }
}

/* Mobile: Karten, die in Swipe-Gruppen gehören, nicht kurz normal untereinander anzeigen.
   Sobald JS sie ins Carousel verschiebt, bekommen sie data-ap-mobile-carousel-slide und werden sichtbar.

   Hier darf nur stehen, was eine Karussell-Gruppe auch wirklich aufnimmt.
   Fehlt die Gruppe, bleibt die Karte auf dem Handy dauerhaft unsichtbar,
   während sie auf dem Desktop normal aussieht. scripts/check-repo.mjs prüft
   das unter "Mobile-Karussell".

   Versteckt wird nur, wenn die erste Karte der Gruppe davor steht (`~`). Ist
   sie in den Einstellungen ausgeblendet, entsteht kein Karussell - ohne diese
   Bedingung blieb dann die zweite Karte unsichtbar (Crash-Steuerung aus →
   Crash-Modus weg, Liquiditätsübersicht aus → Monatsbudget weg). */
@media (max-width: 760px) {
  [data-module-id="dashboard.treemap"] ~ [data-module-id="dashboard.assetClassTreemap"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dashboard.topPriorities"] ~ [data-module-id="dashboard.buyPriority"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dashboard.topPriorities"] ~ [data-module-id="dashboard.taxCockpit"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dashboard.buyPriority"] ~ [data-module-id="dashboard.taxCockpit"]:not([data-ap-mobile-carousel-slide]),

  [data-module-id="analysisPortfolioScore"] ~ [data-module-id="dataQualityStandalone"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="monthlyReturnsStandalone"] ~ [data-module-id="drawdownStandalone"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="riskAnalysisStandalone"] ~ [data-module-id="currencyRiskBoxPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="riskAnalysisStandalone"] ~ [data-module-id="factorStyleBoxPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="currencyRiskBoxPanel"] ~ [data-module-id="factorStyleBoxPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="fifoSummaryPanel"] ~ [data-module-id="fifoSalesAssistantPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="crashControlPanel"] ~ [data-module-id="crashTablePanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="crashControlPanel"] ~ [data-module-id="crashDailyPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="crashTablePanel"] ~ [data-module-id="crashDailyPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="liquiditySummaryPanel"] ~ [data-module-id="liquidityBudgetPanel"]:not([data-ap-mobile-carousel-slide]) {
    display: none !important;
  }

  [data-ap-mobile-carousel-slide],
  [data-ap-analysis-module-swipe-slide],
  [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-portfolio-position-card-slide] {
    display: block !important;
  }
}

@media (max-width: 760px) {
  [data-ap-mobile-carousel-slide] {
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

}

/* Handy-Karussell des Dashboards (mobileDashboardCarousel.js; die Punkte
   nutzt auch analysisModuleSwipe.js). Vorher auf zwoelf Stellen verteilt,
   die einander teils ueberschrieben; hier je Selektor der Wert, der am
   Ende galt (Q15). Ab 761 px gilt display: contents - Block darunter.
   Die Folie bekommt display: block von [data-ap-mobile-carousel-slide]
   weiter oben; das display: flex, das hier einmal stand, hat nie gegolten. */
@media (max-width: 760px) {
  .apMobileDashboardCarousel {
    display: block;
    margin: 0;
    --ap-mobile-dashboard-carousel-slide-gap: 14px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: inline-size !important;
  }

  .apMobileDashboardCarouselViewport {
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0 !important;
    transition: height .14s ease;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .apMobileDashboardCarouselTrack {
    gap: var(--ap-mobile-dashboard-carousel-slide-gap) !important;
    align-items: flex-start !important;
    transition: height .14s ease;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] {
    margin: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .apMobileDashboardCarouselDots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 8px 0 12px;
    padding: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .apMobileDashboardCarouselDot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
    padding: 0;
    border-radius: 999px;
    border: 0;
    opacity: .72;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    background: var(--ap-mobile-dot-inactive-color) !important;
  }

  .apMobileDashboardCarouselDot.isActive {
    width: 18px;
    background: var(--color-accent);
    opacity: 1;
  }

  .apMobileDashboardCarouselDot:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  .apMobileDashboardCarouselSlide {
    align-items: stretch !important;
    flex: 0 0 100% !important;
    scroll-snap-stop: always;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] > .moduleCardBody {
    flex: 1 1 auto !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] > .moduleBody {
    flex: 1 1 auto !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] > .cardBody {
    flex: 1 1 auto !important;
  }

  .apMobileDashboardCarouselSlide > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .apMobileDashboardCarousel + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .apMobileDashboardCarouselDots button {
    background: var(--ap-mobile-dot-inactive-color) !important;
  }

  .apMobileDashboardCarouselDot.active {
    background: var(--ap-mobile-dot-active-color) !important;
  }

  .apMobileDashboardCarouselDot[aria-current="true"] {
    background: var(--ap-mobile-dot-active-color) !important;
  }

  .apMobileDashboardCarouselDots button.active {
    background: var(--ap-mobile-dot-active-color) !important;
  }

  .apMobileDashboardCarouselDots button[aria-current="true"] {
    background: var(--ap-mobile-dot-active-color) !important;
  }

  .apMobileDashboardCarouselViewport::-webkit-scrollbar {
    display: none;
  }

  .apMobileDashboardCarouselTrack > .apMobileDashboardCarouselSlide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* AP_SETTINGS_AREAS_MODULES_DARK_SURFACE_FIX_START */
[data-resolved-theme="dark"] :where(.settingsAreaAccordionCard) {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-resolved-theme="dark"] :where(.settingsAreaAccordionSummary),
[data-resolved-theme="dark"] :where(.settingsAreaAccordionBody),
[data-resolved-theme="dark"] :where(.settingsAreaAccordionList),
[data-resolved-theme="dark"] :where(.settingsModuleSubcards) {
  background: transparent !important;
  background-color: transparent !important;
}

[data-resolved-theme="dark"] :where(.settingsAreaActiveToggle) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-resolved-theme="dark"] :where(.settingsModuleSubcard),
[data-resolved-theme="dark"] :where(.settingsModuleToggle) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

[data-resolved-theme="dark"] :where(
  .settingsAreaAccordionCard,
  .settingsAreaAccordionSummary,
  .settingsAreaActiveToggle,
  .settingsModuleSubcard,
  .settingsModuleToggle
) {
  color: var(--color-text) !important;
}
/* AP_SETTINGS_AREAS_MODULES_DARK_SURFACE_FIX_END */

/* AP_24C2_DRAWER_VERTICAL_SCROLL_START */

/* AP_24C2_DRAWER_VERTICAL_SCROLL_END */

/* AP_24C3_DRAWER_VERTICAL_ONLY_SCROLL_START */
.appDrawer.isOpen .drawerPanel {
  transform: translateX(0) !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overflow-x: hidden !important;
}

.appDrawer.isOpen .appNavigation--drawer {
  overflow: visible !important;
  padding-bottom: 24px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}
/* AP_24C3_DRAWER_VERTICAL_ONLY_SCROLL_END */

/* PORTFOLIO_ASSET_DRILLDOWN_SELECT_STYLE_START */
.portfolioAssetDrilldownSelectField {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.portfolioAssetDrilldownSelectLabel {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.portfolioAssetDrilldownSelect {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-normal);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ASSET_DRILLDOWN_SELECT_TABLE_FONT_FIX */
@media (max-width: 760px) {
  .portfolioAssetDrilldownSelect {
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: var(--line-normal);
  }
}
/* PORTFOLIO_ASSET_DRILLDOWN_SELECT_STYLE_END */

/* RELEASE_LOG_STRUCTURED_VIEW_START */
/* ReleaseLog (renderers/releaseLogViewRenderer.js): Versionsdaten als ein
   Block, darunter die Aenderungen nach Tag (<details>) und die
   aelteren als Tabelle. Titel brechen um (ein PR-Titel ist oft laenger als
   eine Zeile), Kuerzel und Plaketten nicht. */
.appView--releaseLog { display: block; }
/* Hinweise & Datenschutz (noticesViewRenderer.js) - gebaut wie die Karte
   des Release-Logs, Text in Lesebreite. */
.noticesCard {
  max-width: 760px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 24px);
  background: var(--color-surface);
  padding: 18px;
}
.noticesTitle { margin: 0 0 6px; color: var(--color-text); font-size: 1.05rem; line-height: 1.25; }
.noticesSection { margin-top: 16px; }
.noticesSectionTitle { margin: 0 0 4px; color: var(--color-text); font-size: var(--font-size-sm); font-weight: 700; }
.noticesText,
.noticesList { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); line-height: var(--line-normal); }
.noticesList { padding-left: 18px; display: grid; gap: 6px; }
.noticesList strong { color: var(--color-text); font-weight: 600; }
.noticesBack { display: inline-block; margin-top: 18px; color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 600; }
/* Die Zeile unter dem Willkommenstext vor dem ersten Import. */
.csvGateNoticeHint { margin: 12px 0 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.csvGateNoticeHint a { color: var(--color-accent); font-weight: 600; }

.releaseLogView { display: grid; gap: 16px; }
.releaseLogCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 24px);
  background: var(--color-surface);
  box-shadow: none;
  padding: 18px;
  min-width: 0;
}
.releaseLogCardTitle { margin: 0 0 14px; color: var(--color-text); font-size: 1.05rem; line-height: 1.25; }
.releaseLogMuted { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.releaseMono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }

.releaseFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--color-surface-soft);
}
.releaseFact { display: grid; gap: 2px; min-width: 0; }
.releaseFactLabel { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.releaseFactValue { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tage: Datum als Ueberschrift, darunter je PR eine Zeile. Die Plaketten
   der Module stehen nur am zugeklappten Tag - aufgeklappt stehen sie an
   jeder Zeile. */
.releaseDays { display: grid; gap: 6px; }
.releaseDay > summary,
.releaseDayMore > summary,
.releaseOlder > summary { list-style: none; cursor: pointer; }
.releaseDay > summary::-webkit-details-marker,
.releaseDayMore > summary::-webkit-details-marker,
.releaseOlder > summary::-webkit-details-marker { display: none; }
.releaseDayHead,
.releaseOlderHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.releaseDayHead::before,
.releaseOlderHead::before {
  content: "▸";
  color: var(--color-muted);
  font-size: .8rem;
  transition: transform .15s;
}
.releaseDay[open] > .releaseDayHead::before,
.releaseOlder[open] > .releaseOlderHead::before { transform: rotate(90deg); }
.releaseDayCount { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.releaseDayModules { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.releaseDay[open] .releaseDayModules { display: none; }
.releaseDayList { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.releasePull {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-soft);
  min-width: 0;
}
.releasePullBody { display: grid; gap: 2px; min-width: 0; }
.releasePullTitle { color: var(--color-text); line-height: 1.3; }
.releasePullNumber { min-width: 2.6rem; color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.releasePullMeta { color: var(--color-muted); font-size: var(--font-size-xs, .75rem); }
.releasePullDetails { margin: 2px 0 0; padding-left: 18px; color: var(--color-muted); font-size: var(--font-size-xs, .75rem); line-height: 1.4; }
/* "weitere N anzeigen": aufgeklappt verschwindet der Knopf, die Liste bleibt. */
.releaseDayMoreButton {
  margin-top: 6px;
  padding: 7px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
}
.releaseDayMore[open] > .releaseDayMoreButton { display: none; }

/* Aeltere Aenderungen: zugeklappt nur die Ueberschrift, offen eine Tabelle. */
.releaseOlder { margin-top: 18px; }
.releaseOlderScroll { overflow-x: auto; margin-top: 8px; }
.releaseOlderTable { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.releaseOlderTable th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 600;
  text-align: left;
}
.releaseOlderTable td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: top; }
.releaseOlderTable td:first-child { color: var(--color-muted); white-space: nowrap; }
.releaseOlderTable td.releasePullNumber { color: var(--color-accent); white-space: nowrap; }

/* Audits & Pruefungen: eine Zeile je Audit. */
.releaseList { display: grid; }
.releaseRow {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.releaseHash { color: var(--color-muted); white-space: nowrap; }
.releaseTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.releaseArea {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bar-track);
  color: var(--color-muted);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .releaseRow { grid-template-columns: 3.8rem minmax(0, 1fr) auto; gap: 8px; }
  /* Am Handy rutscht das Modul unter den Titel; die Tabelle laesst es weg. */
  .releasePull { grid-template-columns: auto minmax(0, 1fr); }
  .releasePull > .releaseArea { grid-column: 2; justify-self: start; }
  .releaseDayModules { display: none; }
  .releaseOlderTable th:nth-child(4),
  .releaseOlderTable td:nth-child(4) { display: none; }
}
/* RELEASE_LOG_STRUCTURED_VIEW_END */

/* Manuelle Kursdaten ohne Eintrag: keine leere Tabelle, kein CSV-Knopf
   (showManualQuoteTable in rapidApiViewRenderer.js). Eigene Regel, weil
   .dataTableWrap und .uiButton ein display setzen, das hidden sonst schlaegt. */
[data-table-wrap="manualQuoteTable"][hidden],
[data-table-export="manualQuoteTable"][hidden] { display: none; }

/* Z9.78: Baustein-/Asset-Auflistung einheitlich klein.
   Nur die einzelnen Tabellen-Einträge werden angepasst.
   Kartenüberschrift und Beschreibung bleiben unverändert. */
#portfolioModeStrategyAllocationCard .dataTable tbody td {
  font-size: 0.875rem !important;
}

/* Z9.79: Portfolio-Baustein-Auflistung deutlich kleiner darstellen.
   Überschrift und Modus-Beschreibung bleiben unverändert. */
#portfolioModeStrategyAllocationCard .portfolioModeAllocation {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* ============================================================
   Aus app.js hierher verschoben (B11).

   Diese elf Bloecke wurden frueher zur Laufzeit als <style> an
   <head> gehaengt. Sie haben nur deshalb gegen base.css gewonnen,
   weil sie zuletzt kamen - bei gleicher Spezifitaet und
   beidseitigem !important entscheidet allein die Reihenfolge.

   Deshalb stehen sie unveraendert und ganz am Ende dieser Datei.
   Die Reihenfolge untereinander ist nicht willkuerlich: von 151
   Selektoren ueberschneiden sich nur drei Gruppen, und fuer die
   gibt die bisherige Aufrufreihenfolge vor, wer gewinnt.
   Wer hier etwas einfuegt, fuegt es ans ENDE an.
   ============================================================ */

/* --- Ziel-vs-Ist: Kartenansicht
   (war vmGoalEnsureHorizontalCardStyles) --- */
.apGoalVsIstList {
  display: grid;
  gap: 12px;
}

.apGoalVsIstRow {
  --ap-goal-status-color: var(--color-accent);
  --ap-goal-actual-width: 0%;
  --ap-goal-target-left: 0%;
  --ap-goal-corridor-left: 0%;
  --ap-goal-corridor-width: 0%;
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 15px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--ap-goal-status-color);
  background: var(--color-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.apGoalVsIstRow.ok,
.apGoalVsIstRow.good {
  --ap-goal-status-color: #22c55e;
}

.apGoalVsIstRow.watch {
  --ap-goal-status-color: #f59e0b;
}

.apGoalVsIstRow.action {
  --ap-goal-status-color: #ef4444;
}

.apGoalVsIstRow.noTarget {
  --ap-goal-status-color: #94a3b8;
}

.apGoalVsIstTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.apGoalVsIstIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ap-goal-status-color) 14%, transparent);
  color: var(--color-text);
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
}

.apGoalVsIstName {
  min-width: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.22;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
}

.apGoalVsIstDelta {
  white-space: nowrap;
  color: var(--color-text);
  font-size: 0.86rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apGoalVsIstMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apGoalVsIstTrack {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border);
}

.apGoalVsIstCorridor {
  position: absolute;
  inset-block: 0;
  left: var(--ap-goal-corridor-left);
  width: var(--ap-goal-corridor-width);
  border-radius: inherit;
  background: color-mix(in srgb, var(--ap-goal-status-color) 18%, transparent);
}

.apGoalVsIstActual {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--ap-goal-actual-width);
  border-radius: inherit;
  background: var(--ap-goal-status-color);
}

.apGoalVsIstMarker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--ap-goal-target-left);
  width: 2px;
  border-radius: 999px;
  background: var(--color-text);
  opacity: .72;
  transform: translateX(-1px);
}

.apGoalVsIstStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apGoalVsIstStatusLabel {
  color: var(--ap-goal-status-color);
  font-weight: 400 !important;
}

.apGoalVsIstNote {
  margin: 2px 0 0 !important;
  color: var(--color-muted) !important;
  font-size: var(--font-size-sm, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.apGoalVsIstEmpty {
  margin: 0 !important;
  color: var(--color-muted) !important;
  font-size: var(--font-size-sm, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

#chartGoalContent .apGoalVsIstName,
#chartGoalContent .apGoalVsIstDelta,
#chartGoalContent .apGoalVsIstMeta,
#chartGoalContent .apGoalVsIstStatus,
#chartGoalContent .apGoalVsIstStatusLabel {
  font-weight: 400 !important;
}

#chartGoalContent b,
#chartGoalContent strong,
#chartGoalContent [style*="font-weight"],
.apGoalVsIstRow b,
.apGoalVsIstRow strong,
.apGoalVsIstRow [style*="font-weight"] {
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  .apGoalVsIstList {
    gap: 11px;
  }

  .apGoalVsIstRow {
    padding: 10px 11px;
    border-radius: 14px;
    gap: 7px;
  }

  .apGoalVsIstName {
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .apGoalVsIstDelta {
    font-size: 0.82rem;
  }

  .apGoalVsIstMeta {
    font-size: 0.72rem;
  }

  .apGoalVsIstStatus {
    font-size: 0.71rem;
  }

  .apGoalVsIstTrack {
    height: 7px;
  }
}

.apGoalVsIstShell {
  display: grid;
  gap: 18px;
  align-items: start;
}

.apGoalVsIstShell > .apGoalVsIstList {
  margin: 0 !important;
}

.apGoalVsIstHint,
.apGoalVsIstNote {
  display: block;
  margin: 0 !important;
  padding: 2px 2px 0 !important;
  color: var(--color-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  .apGoalVsIstShell {
    gap: 20px;
  }

  .apGoalVsIstHint,
  .apGoalVsIstNote {
    padding-top: 2px !important;
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }
}

/* --- Analyse: Statusfarben an der Zellkante
   (war vmEnsureAnalysisStatusBadgeStyles) --- */
.vmStatusEdgeCell {
  border-left: 3px solid rgba(148, 163, 184, 0.36) !important;
  padding-left: 0.75rem !important;
}

.vmStatusEdgeCell-ok {
  border-left-color: rgba(34, 197, 94, 0.7) !important;
}

.vmStatusEdgeCell-warn {
  border-left-color: rgba(245, 158, 11, 0.76) !important;
}

.vmStatusEdgeCell-bad {
  border-left-color: rgba(239, 68, 68, 0.76) !important;
}

.vmStatusEdgeCell-info {
  border-left-color: rgba(14, 165, 233, 0.7) !important;
}

.vmStatusEdgeCell-neutral {
  border-left-color: rgba(148, 163, 184, 0.48) !important;
}

/* --- Kompakte Tabellen auf Mobil
   (war ensureMobileCompactTableStyles) --- */
.dataTableWrap,
.tableWrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.dataTableScroller,
.tableWrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

.dataTable,
.tableWrap table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

.dataTable th,
.dataTable td,
.tableWrap th,
.tableWrap td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  vertical-align: middle !important;
}

.dataTable th:first-child,
.dataTable td:first-child,
.tableWrap th:first-child,
.tableWrap td:first-child {
  text-align: left !important;
}

.dataTable th[data-align="right"],
.dataTable td[data-align="right"],
.dataTable th:not(:first-child),
.dataTable td:not(:first-child),
.tableWrap th:not(:first-child),
.tableWrap td:not(:first-child) {
  text-align: right !important;
}

@media (max-width: 859px) {
  .appView[data-view-id] .dataTableWrap,
  .appView[data-view-id] .tableWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .appView[data-view-id] .dataTableScroller,
  .appView[data-view-id] .tableWrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  .appView[data-view-id] .dataTable,
  .appView[data-view-id] .tableWrap table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  .appView[data-view-id] .dataTable th,
  .appView[data-view-id] .dataTable td,
  .appView[data-view-id] .tableWrap th,
  .appView[data-view-id] .tableWrap td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }
}

/* DEPOT_STRIP_START */
/* Der Depot-Streifen ueber den Karten (depotStripRenderer.js): gefuellt
   fuer "Alle Depots", umrandet fuer ein Depot. Je Broker ein Farbpunkt,
   damit man ein Depot ueberall wiedererkennt - die Farben sind weder Gruen
   noch Rot, die sagen in der App Richtung. */
:root {
  --depot-tr: #0f766e;
  --depot-sc: #7c3aed;
  --depot-ing: #ea580c;
  --depot-other: #64748b;
}

:root[data-resolved-theme="dark"] {
  --depot-tr: #2dd4bf;
  --depot-sc: #a78bfa;
  --depot-ing: #fb923c;
  --depot-other: #94a3b8;
}

.depotStripWrap {
  position: relative;
  margin: 0 0 var(--module-gap);
}

.depotStrip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}

.depotStrip--all {
  background: var(--color-accent);
  color: #fff;
}

/* Im dunklen Thema ist der Akzent hellblau - dunkle Schrift liest sich. */
:root[data-resolved-theme="dark"] .depotStrip--all {
  color: var(--color-bg);
}

.depotStripLabel {
  overflow: hidden;
  text-overflow: ellipsis;
}

.depotStripMeta {
  font-weight: 500;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
}

.depotStripAction {
  margin-left: auto;
  font-weight: 500;
  font-size: var(--font-size-xs);
  opacity: .85;
}

.depotDot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--depot-other);
}

.depotDot--tr { background: var(--depot-tr); }
.depotDot--sc { background: var(--depot-sc); }
.depotDot--ing { background: var(--depot-ing); }
.depotDot--all {
  background: conic-gradient(var(--depot-tr) 0 33%, var(--depot-sc) 0 66%, var(--depot-ing) 0);
  box-shadow: 0 0 0 1.5px var(--color-surface);
}

/* Die Punkte vor einer Position (depotDotsRenderer.js), nur in der
   Gesamtsicht: ein Papier in zwei Depots traegt zwei Punkte. */
.depotDots {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.historyNameMain .depotDots,
.apTreemapShareName .depotDots,
.quoteTileName .depotDots { margin-right: 5px; }

.depotMenu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: min(300px, 100%);
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

.depotMenuItem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}

.depotMenuItem:hover:not(:disabled),
.depotMenuItem.is-chosen {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.depotMenuItem:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}

.depotMenuLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.depotMenuValue {
  margin-left: auto;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.depotMenuReason {
  margin: 0;
  padding: 0 10px 6px 27px;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.depotMenuDivider {
  height: 1px;
  margin: 4px 2px;
  background: var(--color-border);
}

/* Bereiche nur je Depot, waehrend "Alle Depots" gilt (navigationRenderer). */
.navButton.is-locked {
  opacity: .5;
  cursor: not-allowed;
}

.navButtonLock {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Karte, die in der Gesamtsicht nur je Depot gilt (dashboardViewRenderer). */
.depotOnlyNotice {
  margin: 0;
  padding: 12px 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}
/* DEPOT_STRIP_END */

/* PRICE_CHART_STYLE_START */
/* Kursverlauf im Bereich Portfolio. Gruen und Rot je nach Richtung des
   gewaehlten Zeitraums; der Gleichstand bekommt keine der beiden Farben. */
.priceChart {
  --price-chart-up: #16a34a;
  --price-chart-down: #dc2626;
  --price-chart-color: var(--color-muted);
  /* GD 50 und GD 200: weder Gruen noch Rot, die sagen hier schon die
     Richtung. Bernstein und Violett bleiben neben beiden unterscheidbar. */
  --price-chart-gd50: #d97706;
  --price-chart-gd200: #7c3aed;
  display: grid;
  gap: 10px;
  min-width: 0;
}

:root[data-resolved-theme="dark"] .priceChart {
  --price-chart-up: #22c55e;
  --price-chart-down: #f87171;
  --price-chart-gd50: #fbbf24;
  --price-chart-gd200: #a78bfa;
}

.priceChart--up { --price-chart-color: var(--price-chart-up); }
.priceChart--down { --price-chart-color: var(--price-chart-down); }

.priceChartSelectField {
  display: grid;
  gap: 6px;
  /* Ein langer Fondsname im select dehnt sonst die Rasterspur ueber den
     Kartenrand - siehe 03-fallstricke.md, "1fr-Rasterspur". */
  min-width: 0;
}

.priceChartSelectLabel {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.priceChartSelect {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
}

.priceChartHeadline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.priceChartLast {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.priceChartChange {
  color: var(--price-chart-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.priceChartRangeTag {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* Die Legende der gleitenden Durchschnitte ist zugleich ihr Schalter
   (renderAverageLegend). Ausgeschaltet durchgestrichen und blass, nicht
   ausgeblendet: Sonst faende niemand den Weg zum Einschalten. */
.priceChartAverages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
}

.priceChartAverage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.priceChartAverage[aria-pressed="false"] {
  color: var(--color-muted);
}

.priceChartAverage[aria-pressed="false"] .priceChartAverageLabel {
  text-decoration: line-through;
}

.priceChartAverageSwatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--price-chart-average-color, var(--color-muted));
}

.priceChartAverage[aria-pressed="false"] .priceChartAverageSwatch {
  opacity: .35;
}

.priceChartAverage--gd50 { --price-chart-average-color: var(--price-chart-gd50); }
.priceChartAverage--gd200 { --price-chart-average-color: var(--price-chart-gd200); }

.priceChartAverageLabel {
  font-weight: 600;
}

.priceChartAverageGap {
  color: var(--color-muted);
}

.priceChartAverageLine {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.priceChartAverageLine--gd50 { stroke: var(--price-chart-gd50); }
.priceChartAverageLine--gd200 { stroke: var(--price-chart-gd200); }

/* Kreuzungen GD 50 / GD 200 (renderChartSvg, renderCrossingSignal):
   gruen hoch, rot runter - die Richtungsfarben der App, denn ein Signal
   sagt Richtung. Der weisse Rand hebt den Punkt von beiden Linien ab. */
.priceChartCrossDot {
  stroke: var(--color-surface);
  stroke-width: 1.5;
}
.priceChartCross--golden .priceChartCrossDot { fill: var(--bar-up); }
.priceChartCross--death .priceChartCrossDot { fill: var(--bar-down); }
.priceChartCrossLabel {
  font-size: 10px;
  font-weight: 600;
  fill: var(--color-text);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3;
  stroke-linejoin: round;
}
.priceChartSignal {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.priceChartSignal--golden { color: var(--bar-up); }
.priceChartSignal--death { color: var(--bar-down); }

.priceChartSurface {
  position: relative;
  min-width: 0;
}

.priceChartSvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.priceChartGrid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.priceChartAxisLabel {
  fill: var(--color-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.priceChartLine {
  fill: none;
  stroke: var(--price-chart-color);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.priceChartArea {
  fill: var(--price-chart-color);
  fill-opacity: .12;
  stroke: none;
}

.priceChartEndDot {
  fill: var(--price-chart-color);
}

.priceChartBuyIn {
  stroke: var(--color-text);
  stroke-opacity: .55;
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.priceChartBuyInLabel {
  fill: var(--color-text);
  fill-opacity: .7;
  font-size: 11px;
}

.priceChartVenueBand {
  fill: var(--color-text);
  fill-opacity: .045;
  stroke: none;
}

.priceChartVenueLabel {
  fill: var(--color-muted);
  font-size: 10.5px;
}

.priceChartNow {
  stroke: var(--price-chart-color);
  stroke-opacity: .6;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.priceChartNowLabel {
  fill: var(--price-chart-color);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Handelsplatz geschlossen (marketHintRenderer.js): ueber dem Kursverlauf 1D
   und ueber den Kursdaten-Kacheln. Akzentfarbe statt Warnfarbe - die Kurse
   stimmen, es wird nur gerade nicht gehandelt. */
.marketHint {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  align-items: center;
  margin: 2px 0 6px;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.marketHintDetail {
  grid-column: 2;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 400;
}

.priceChartHoverLine {
  stroke: var(--color-muted);
  stroke-width: 1;
}

.priceChartHoverDot {
  fill: var(--color-surface);
  stroke: var(--price-chart-color);
  stroke-width: 2;
}

.priceChartTooltip {
  position: absolute;
  top: 0;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.priceChartTooltip[hidden] {
  display: none;
}

/* Die Zeitraeume als eine Leiste, die sich die Breite teilt. Nicht
   umbrechen - acht Knoepfe in zwei Zeilen lesen sich wie zwei Gruppen -
   und nicht seitlich scrollen: Gemessen auf 412 px Geraetebreite war "MAX"
   dann abgeschnitten, und ein halb sichtbarer Knopf sieht nicht aus wie
   einer, der noch da ist. */
.priceChartRanges {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.priceChartRange {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 4px 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.priceChartRange:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.priceChartRange.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

/* Im dunklen Thema ist der Akzent hellblau; weisse Schrift darauf kaeme auf
   gut 2:1 Kontrast. Dunkle Schrift liest sich. */
:root[data-resolved-theme="dark"] .priceChartRange.is-active {
  color: var(--color-bg);
}

.priceChartNotice,
.priceChartFooter {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.priceChartNotice {
  padding: 24px 0;
  text-align: center;
}
.priceChartNotice--retry {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.priceChartNoticeText {
  margin: 0;
}

.priceChartRetry {
  min-height: 34px;
  padding: 4px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}
.priceChartRefresh {
  /* Rechts in der Kopfzeile, auch wenn diese umbricht. */
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.priceChartRefreshIcon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nur das Symbol (schmale Karte): ein runder Knopf. */
.priceChartRefresh:not(:has(.priceChartRefreshTime)) {
  padding: 0;
}

.priceChartRefresh--fresh,
.priceChartRefresh--loading {
  color: var(--color-muted);
  cursor: default;
}

.priceChartRefresh--loading .priceChartRefreshIcon {
  animation: priceChartRefreshDreht 0.9s linear infinite;
}

@keyframes priceChartRefreshDreht {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .priceChartRefresh--loading .priceChartRefreshIcon {
    animation: none;
  }
}
/* PRICE_CHART_STYLE_END */

/* CRASH_MODE_STYLE_START */
/* Crash-Steuerung und Crash-Tabelle. Vorher Inline-Styles in HTML-Strings
   aus app.js, mit eigenen Farbvariablen neben denen des Themas. */
.crashControl {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.crashControlHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.crashPill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
}

.crashControl--active .crashPill {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.crashControlSource,
.crashReason,
.crashNotice {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.crashControlSelects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.crashFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
}

.crashFact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crashFactLabel {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.crashFactValue {
  font-variant-numeric: tabular-nums;
}

.crashFactValue--strong {
  font-weight: 700;
}

/* Die Einstufung als Kante an der ersten Zelle - vorher je Zelle als
   Inline-Style gesetzt. Das app-weite vmApplyStatusBadges faerbt die erste
   Zelle nach der Status-Spalte und kennt nur "KRITISCH"; ERHOEHT und STABIL
   landen dort bei neutral (grau, mit !important). Die Tabelle-ID macht diese
   Regeln spezifischer, damit sie gewinnen. */
table[data-table-id="crashTable"] tr[data-crash-severity] > td:first-child {
  border-left-width: 3px !important;
  border-left-style: solid !important;
  padding-left: 10px;
}

table[data-table-id="crashTable"] tr[data-crash-severity="red"] > td:first-child { border-left-color: #dc2626 !important; }
table[data-table-id="crashTable"] tr[data-crash-severity="yellow"] > td:first-child { border-left-color: #d97706 !important; }
table[data-table-id="crashTable"] tr[data-crash-severity="green"] > td:first-child { border-left-color: #16a34a !important; }
.crashDaily {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crashDailySvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.crashDailyGrid { stroke: var(--color-border); stroke-width: 1; }
.crashDailyZero { stroke: var(--color-muted); stroke-width: 1; }

.crashDailyAxis {
  fill: var(--color-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crashDailyBar--up { fill: #16a34a; }
.crashDailyBar--down { fill: #dc2626; }

:root[data-resolved-theme="dark"] .crashDailyBar--up { fill: #22c55e; }
:root[data-resolved-theme="dark"] .crashDailyBar--down { fill: #f87171; }

.crashDailyLine {
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.crashDailyLine--warning { stroke: #d97706; }
.crashDailyLine--crash { stroke: #7f1d1d; }
:root[data-resolved-theme="dark"] .crashDailyLine--crash { stroke: #fecaca; }

.crashDailyLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.crashDailyKey::before {
  content: '';
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px dashed currentColor;
}

.crashDailyKey--warning::before { color: #d97706; }
.crashDailyKey--crash::before { color: #7f1d1d; }
:root[data-resolved-theme="dark"] .crashDailyKey--crash::before { color: #fecaca; }

/* CRASH_MODE_STYLE_END */

/* BAR_CHARTS_STYLE_START */
/* Kleine Balken-Diagramme (ui/renderers/barChartRenderer.js).
   Kategorienfarben: die geprüfte Palette, sechs Stellen, hell und dunkel
   getrennt gestuft (nicht einfach umgedreht). Im hellen Modus liegen drei
   Stellen unter 3:1 zur Fläche - deshalb steht neben jedem Balken eine
   Legende mit Namen und Zahl. Zustandsfarben (good ... critical) sind fest
   und nie eine Kategorie. */
:root {
  --bar-series-1: #2a78d6;
  --bar-series-2: #eb6834;
  --bar-series-3: #1baf7a;
  --bar-series-4: #eda100;
  --bar-series-5: #e87ba4;
  --bar-series-6: #008300;
  --bar-other: #9aa3b2;
  --bar-good: #0ca30c;
  --bar-warning: #fab219;
  --bar-serious: #ec835a;
  --bar-critical: #d03b3b;
  --bar-magnitude: #2a78d6;
  --bar-up: #16a34a;
  --bar-down: #dc2626;
  --bar-track: rgba(100, 116, 139, .16);
}

:root[data-resolved-theme="dark"] {
  --bar-series-1: #3987e5;
  --bar-series-2: #d95926;
  --bar-series-3: #199e70;
  --bar-series-4: #c98500;
  --bar-series-5: #d55181;
  --bar-series-6: #008300;
  --bar-other: #64748b;
  --bar-magnitude: #3987e5;
  --bar-up: #22c55e;
  --bar-down: #f87171;
  --bar-track: rgba(148, 163, 184, .18);
}

.barTone--series-1 { background: var(--bar-series-1); }
.barTone--series-2 { background: var(--bar-series-2); }
.barTone--series-3 { background: var(--bar-series-3); }
.barTone--series-4 { background: var(--bar-series-4); }
.barTone--series-5 { background: var(--bar-series-5); }
.barTone--series-6 { background: var(--bar-series-6); }
.barTone--other { background: var(--bar-other); }
.barTone--good { background: var(--bar-good); }
.barTone--warning { background: var(--bar-warning); }
.barTone--serious { background: var(--bar-serious); }
.barTone--critical { background: var(--bar-critical); }

/* Punkte-Balken */
.barMeterList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.barMeterHead {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9rem;
}

.barMeterLabel { color: var(--color-text); }
.barMeterValue { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.barMeterTrack {
  display: block;
  height: 8px;
  margin-top: .3rem;
  border-radius: 4px;
  background: var(--bar-track);
  overflow: hidden;
}

.barMeterFill {
  display: block;
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: 4px;
  background: var(--bar-magnitude);
}

.barMeterFill--warn { background: var(--color-warn); }
.barMeterFill--danger { background: var(--color-danger); }

.barMeterDetail {
  margin: .3rem 0 0;
  font-size: .8rem;
  color: var(--color-muted);
}

/* Gestapelter Balken */
.barStackTrack {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bar-track);
}

.barStackSegment {
  display: block;
  flex: 0 0 auto;
  width: var(--bar-width, 0%);
  min-width: 2px;
}

.barLegend {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}

.barLegendItem {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--color-text);
}

.barLegendSwatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.barLegendValue { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-muted); }

/* Wasserfall */
.barWaterfall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.barWaterfallRow {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--color-text);
}

.barWaterfallTrack {
  position: relative;
  display: block;
  height: 12px;
}

.barWaterfallTrack::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--zero-left, 0%);
  border-left: 1px solid var(--color-border);
}

.barWaterfallBar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bar-left, 0%);
  width: var(--bar-width, 0%);
  min-width: 2px;
  border-radius: 3px;
}

.barWaterfallRow--up .barWaterfallBar { background: var(--bar-up); }
.barWaterfallRow--down .barWaterfallBar { background: var(--bar-down); }
.barWaterfallRow--total .barWaterfallBar { background: var(--bar-magnitude); }
.barWaterfallRow--total { font-weight: 700; border-top: 1px solid var(--color-border); padding-top: .35rem; }

.barWaterfallValue { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

@media (max-width: 760px) {
  .barWaterfallRow { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) auto; }
}

/* Kennzahlen neben einem Balken (Steuer-Cockpit, Kursqualität) */
.barFigures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .6rem;
  margin: .8rem 0 0;
}

.barFigure { margin: 0; }
.barFigure dt { font-size: .8rem; color: var(--color-muted); }
.barFigure dd { margin: .1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }

.barCaption {
  margin: .6rem 0 0;
  font-size: .85rem;
  color: var(--color-muted);
}

/* BAR_CHARTS_STYLE_END */

/* DESKTOP_LAYOUT_START */
/*
  Desktop: Karten nach Inhalt statt fest in zwei Spalten.

  Ab 860 px teilt .moduleGrid jeden Bereich in zwei gleiche Spalten, ab drei
  Karten legt desktopAutoHeightCards.js ein Spaltenlayout (CSS columns)
  darueber. Beides fragt nicht, wie viele Karten es gibt oder wie breit ihr
  Inhalt ist: Eine einzelne Karte stand in der linken Haelfte, rechts war
  nichts, und breite Tabellen scrollten seitlich neben leerer Flaeche.

  Nur ab 860 px - auf dem Handy steht ohnehin alles untereinander.
*/
@media (min-width: 860px) {
  /* Allein im Raster: volle Breite. Trifft einzelne Karten eines Bereichs
     und einzelne Kacheln in einer Karte
     (Portfolio-Modus). Die Kachel im Portfolio-Modus stand in einem Raster
     fuer fuenf, von denen vier beim Aufraeumen entfallen sind. */
  .moduleGrid > :only-child {
    grid-column: 1 / -1;
  }

  /*
    Karten mit breiten Tabellen ueber die volle Breite. Eine feste Liste
    statt einer Messung: Gemessen wuerde erst nach dem Zeichnen, und die
    Karte spraenge dann sichtbar von halber auf volle Breite.

    In Zielquoten stehen die beiden Karten nach der Tabelle darunter
    nebeneinander. Sparplan-Optimierung und Handlungsliste stehen
    untereinander, wie vor dem Zusammenlegen jede fuer sich: Beide haben eine
    Tabelle zum Aufklappen, die Handlungsliste mit Steuerschaetzung. In RapidAPI ist auch die Karte nach der Tabelle dabei,
    sonst stuende sie allein in der linken Haelfte.
  */
  .moduleGrid > [data-module-id]:is(
    [data-module-id="goalsTable"],
    [data-module-id="rapidApiQuoteTablePanel"],
    [data-module-id="fmpAlphaQualityPanel"],
    [data-module-id="dashboard.treemap"],
    [data-module-id="dashboard.buyPriority"],
    [data-module-id="portfolio.history"],
    [data-module-id="crashTablePanel"],
    [data-module-id="rawBrokerImportsPanel"],
    [data-module-id="brokerImportOverviewPanel"],
    [data-module-id="fifoSalesAssistantPanel"],
    [data-module-id="realizedFifoPanel"],
    [data-module-id="fifoLotsPanel"],
    [data-module-id="autoSavingsOptimizationPanel"],
    [data-module-id="rebalanceActionListPanel"]
  ) {
    grid-column: 1 / -1;
  }

  /*
    Eine halbe Karte zwischen zwei breiten - oder zwischen einer breiten und
    dem Anfang oder Ende - stuende allein in der linken Haelfte. Sie geht
    dann ebenfalls ueber die volle Breite. Laengere Folgen halber Karten
    stehen paarweise; bleibt dort eine uebrig, faengt diese Regel sie nicht,
    dafuer muesste CSS zaehlen koennen.
  */
  .moduleGrid > [data-module-id]:is(:first-child, :is(
      [data-module-id="goalsTable"],
      [data-module-id="rapidApiQuoteTablePanel"],
      [data-module-id="fmpAlphaQualityPanel"],
      [data-module-id="dashboard.treemap"],
    [data-module-id="dashboard.buyPriority"],
      [data-module-id="portfolio.history"],
      [data-module-id="crashTablePanel"],
      [data-module-id="rawBrokerImportsPanel"],
      [data-module-id="brokerImportOverviewPanel"],
      [data-module-id="fifoSalesAssistantPanel"],
      [data-module-id="realizedFifoPanel"],
      [data-module-id="fifoLotsPanel"],
      [data-module-id="autoSavingsOptimizationPanel"],
      [data-module-id="rebalanceActionListPanel"]
    ) + *):is(:last-child, :has(+ :is(
      [data-module-id="goalsTable"],
      [data-module-id="rapidApiQuoteTablePanel"],
      [data-module-id="fmpAlphaQualityPanel"],
      [data-module-id="dashboard.treemap"],
    [data-module-id="dashboard.buyPriority"],
      [data-module-id="portfolio.history"],
      [data-module-id="crashTablePanel"],
      [data-module-id="rawBrokerImportsPanel"],
      [data-module-id="brokerImportOverviewPanel"],
      [data-module-id="fifoSalesAssistantPanel"],
      [data-module-id="realizedFifoPanel"],
      [data-module-id="fifoLotsPanel"],
      [data-module-id="autoSavingsOptimizationPanel"],
      [data-module-id="rebalanceActionListPanel"]
    ))) {
    grid-column: 1 / -1;
  }

  /* Ohne Risikocaps gibt es die Risikocap-Karte nicht (goalsViewRenderer.js),
     und die Zielquoten stuenden allein auf der halben Breite. Als letzte
     Karte gehen sie deshalb ueber die volle Breite; mit Risikocap-Karte
     dahinter stehen beide nebeneinander. (Bis O1 war das die Karte Smart
     Insights - sie steht jetzt als Hinweise in den Zielquoten.) */
  .moduleGrid > [data-module-id="goalsTable"]:last-child {
    grid-column: 1 / -1;
  }

  /*
    Ab drei Karten legt desktopAutoHeightCards.js ein Spaltenlayout ueber
    den Bereich (CSS columns, Karten als inline-block, alles !important).
    Darin kann eine Karte nicht einfach ueber beide Spalten gehen:
    column-span: all ausprobiert - die Karten daneben landeten dann alle in
    der linken Spalte untereinander. Ein Bereich mit einer breiten Karte
    bleibt deshalb ein Raster; die Spalten gleichen sich dort nicht in der
    Hoehe aus, bei zwei Karten je Zeile faellt das kaum auf.

    :has() hebt die Spezifitaet ueber die von desktopAutoHeightCards.js,
    das sein Stylesheet ans Ende des Kopfs haengt.
  */
  body [data-ap-desktop-card-masonry="1"]:has(> :is(
    [data-module-id="goalsTable"],
    [data-module-id="rapidApiQuoteTablePanel"],
    [data-module-id="fmpAlphaQualityPanel"],
    [data-module-id="dashboard.treemap"],
    [data-module-id="dashboard.buyPriority"],
    [data-module-id="portfolio.history"],
    [data-module-id="crashTablePanel"],
    [data-module-id="rawBrokerImportsPanel"],
    [data-module-id="brokerImportOverviewPanel"],
    [data-module-id="fifoSalesAssistantPanel"],
    [data-module-id="realizedFifoPanel"],
    [data-module-id="fifoLotsPanel"],
    [data-module-id="autoSavingsOptimizationPanel"],
    [data-module-id="rebalanceActionListPanel"]
  )) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: auto !important;
    align-items: start;
  }

  body [data-ap-desktop-card-masonry="1"]:has(> :is(
    [data-module-id="goalsTable"],
    [data-module-id="rapidApiQuoteTablePanel"],
    [data-module-id="fmpAlphaQualityPanel"],
    [data-module-id="dashboard.treemap"],
    [data-module-id="dashboard.buyPriority"],
    [data-module-id="portfolio.history"],
    [data-module-id="crashTablePanel"],
    [data-module-id="rawBrokerImportsPanel"],
    [data-module-id="brokerImportOverviewPanel"],
    [data-module-id="fifoSalesAssistantPanel"],
    [data-module-id="realizedFifoPanel"],
    [data-module-id="fifoLotsPanel"],
    [data-module-id="autoSavingsOptimizationPanel"],
    [data-module-id="rebalanceActionListPanel"]
  )) > [data-module-id] {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* RapidAPI Kursdaten: Die Knoepfe standen gestapelt in der linken
     Haelfte eines Zwei-Spalten-Rasters, rechts daneben ein leerer Status.
     Jetzt eine Zeile Knoepfe, darunter die Status ueber die volle Breite;
     leere Status nehmen keinen Platz. */
  [data-rapidapi-content-type="quote-actions"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-rapidapi-content-type="quote-actions"] > .moduleCardSubtitle:empty {
    display: none;
  }

  /* Manuelle Kursdaten: Papier und Kurs nebeneinander, darunter die Knoepfe
     in einer Zeile und der Stand ueber die volle Breite. Vorher stand
     "Kurs speichern" links und der Stand versetzt rechts daneben. */
  [data-manual-quote-form] > .buttonStack,
  [data-manual-quote-form] > .moduleCardSubtitle {
    grid-column: 1 / -1;
  }

  :is([data-rapidapi-content-type="quote-actions"], [data-manual-quote-form]) > .buttonStack {
    display: flex;
    flex-wrap: wrap;
  }

  :is([data-rapidapi-content-type="quote-actions"], [data-manual-quote-form]) > .buttonStack > .uiButton {
    width: auto;
    min-width: 11rem;
    padding: 0 16px;
  }

  /* Heatmap: eine Zeile je Position statt einer Kachel - Name und Wert
     links, Balken in der Mitte, Anteil rechts. Sechs Positionen brauchten
     als Kacheln mehr als eine Bildschirmhoehe. */
  .apTreemapShareList,
  #dashboardTreemapContent.apTreemapShareListContent,
  #assetClassTreemapContent.apTreemapShareListContent {
    gap: 6px !important;
  }

  .apTreemapShareRow {
    grid-template-columns: auto minmax(0, 1fr) minmax(5rem, 28%) 4.5rem;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 7px 12px;
    border-radius: 10px;
    box-shadow: none;
  }

  .apTreemapShareTop {
    display: contents;
  }

  .apTreemapShareIndex {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .apTreemapShareName {
    grid-column: 2;
    grid-row: 1;
  }

  .apTreemapShareMeta {
    grid-column: 2;
    grid-row: 2;
  }

  .apTreemapShareBar {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .apTreemapSharePct {
    grid-column: 4;
    grid-row: 1 / span 2;
    text-align: right;
  }
}
/* DESKTOP_LAYOUT_END */

/* PERFORMANCE_MAP_START */
/*
  Performance Map (app.js, PERFORMANCE_MAP): Bloecke nach Depotanteil, Farbe
  nach Wertentwicklung. Nur ab 860 px - darunter bleibt die Liste, die
  Bloecke waeren auf dem Handy zu klein zum Lesen.

  Die Farbtoene je Modus hier, nicht in JavaScript: app.js setzt nur
  data-tone (up, down, flat) und --ap-perf-strength (0 bis 100 %).
*/
.apPerformanceMap {
  display: none;
  --ap-perf-up-weak: #4ade80;
  --ap-perf-up-strong: #15803d;
  --ap-perf-down-weak: #f87171;
  --ap-perf-down-strong: #b91c1c;
  --ap-perf-flat: #94a3b8;
  --ap-perf-gap: var(--color-bg);
}

:root[data-resolved-theme="dark"] .apPerformanceMap {
  --ap-perf-up-weak: #166534;
  --ap-perf-up-strong: #22c55e;
  --ap-perf-down-weak: #7f1d1d;
  --ap-perf-down-strong: #dc2626;
  --ap-perf-flat: #475569;
}

@media (min-width: 860px) {
  /* Die Performance Map zeigt die Anlageklassen als Gruppen mit ihrem
     Anteil. Die Assetklassen-Karte wiederholte das nur, ohne Wertentwicklung;
     auf dem Handy bleibt sie. */
  /* html body ...[data-module-id] hebt die Spezifitaet ueber die Regel, die
     im Spaltenlayout jede Karte auf display: block !important setzt
     (DESKTOP_LAYOUT). */
  html body .moduleGrid > [data-module-id="dashboard.assetClassTreemap"][data-module-id],
  [data-module-id="dashboard.treemap"] #dashboardTreemapContent,
  [data-module-id="dashboard.treemap"] .moduleCardHeader .moduleCardSubtitle {
    display: none !important;
  }

  .apPerformanceMap {
    display: grid;
    gap: var(--space-sm);
  }

  /* Ohne die Assetklassen-Karte bleibt vor der Kaufprioritaet eine halbe
     Karte uebrig (Top-5) - mit dem Steuer-Cockpit dahinter waeren es zwei.
     dense zieht das Steuer-Cockpit neben die Top-5; dafuer darf es nicht als
     letzte Karte hinter einer breiten auf volle Breite gehen
     (DESKTOP_LAYOUT). */
  body .moduleGrid:has(> [data-module-id="dashboard.treemap"]) {
    grid-auto-flow: row dense;
  }

  body .moduleGrid:has(> [data-module-id="dashboard.treemap"]) > [data-module-id="dashboard.taxCockpit"]:last-child {
    grid-column: auto;
  }

  /* "Ziel vs. Ist" ist mit einer Kachel je Position gut doppelt so hoch
     wie die Vermoegensprognose daneben; rechts darunter blieb eine Luecke
     von rund 420 px. Ueber drei Zeilen gezogen stehen Prognose, Top-5 und
     Steuer-Cockpit rechts untereinander, dense rueckt sie dort hinein. Die
     Kaufprioritaet (breit) folgt darunter. */
  body .moduleGrid:has(> [data-module-id="dashboard.treemap"]) > [data-module-id="dashboard.goalChart"] {
    grid-row: span 3;
  }
}

.apPerformanceMapBar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.apPerformanceMapBasis {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}

.apPerformanceMapBasis button {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.apPerformanceMapBasis button[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
}

.apPerformanceMapPeriod {
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}

.apPerformanceMapCanvas {
  position: relative;
  height: 460px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ap-perf-gap);
}

.apPerformanceMapGroup {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--ap-perf-gap);
}

.apPerformanceMapGroupHead {
  margin: 0;
  height: 22px;
  line-height: 22px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-surface-soft);
}

.apPerformanceMapGroupBody {
  position: absolute;
  inset: 22px 0 0;
}

.apPerformanceMapTile {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--ap-perf-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: var(--ap-perf-flat);
}

.apPerformanceMapTile[data-tone="up"] {
  background: color-mix(in srgb, var(--ap-perf-up-strong) var(--ap-perf-strength, 0%), var(--ap-perf-up-weak));
}

.apPerformanceMapTile[data-tone="down"] {
  background: color-mix(in srgb, var(--ap-perf-down-strong) var(--ap-perf-strength, 0%), var(--ap-perf-down-weak));
}

.apPerformanceMapName {
  font-weight: 700;
  font-size: var(--font-size-md);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.apPerformanceMapValue {
  font-size: var(--font-size-sm);
}

.apPerformanceMapTile.is-small .apPerformanceMapName {
  font-size: 11px;
}

.apPerformanceMapTile.is-small .apPerformanceMapValue {
  font-size: 10px;
}

.apPerformanceMapTile.is-tiny .apPerformanceMapValue {
  display: none;
}

.apPerformanceMapTile.is-tiny .apPerformanceMapName {
  font-size: 9px;
}

.apPerformanceMapNote:empty {
  display: none;
}
/* PERFORMANCE_MAP_END */

/* BUY_PRIORITY_START */
/*
  Nachkauf-Ampel (app.js, vmRenderBuyPriority; Rechnung in
  strategy/buyPriority.js). Eine Zeile je Position: Ampelpunkt, Name mit
  Ist -> Ziel, Sparrate, Restbedarf nach der Sparrate, Status. Auf schmalen
  Bildschirmen rueckt der Status unter den Namen.
*/
.apBuyPriority {
  --ap-buy-ok: #16a34a;
  --ap-buy-budget: #d97706;
  --ap-buy-short: #dc2626;
  display: grid;
}

:root[data-resolved-theme="dark"] .apBuyPriority {
  --ap-buy-ok: #22c55e;
  --ap-buy-budget: #fbbf24;
  --ap-buy-short: #f87171;
}

.apBuyPriorityRow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 5.5rem 6rem minmax(8rem, 12rem);
  grid-template-areas: "dot name savings need status";
  gap: 4px var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-md);
}

.apBuyPriorityHead {
  border-top: 0;
  padding-top: 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.apBuyPriorityDot { grid-area: dot; }
.apBuyPriorityName { grid-area: name; min-width: 0; }
.apBuyPrioritySavings { grid-area: savings; }
.apBuyPriorityNeed { grid-area: need; }
.apBuyPriorityStatus { grid-area: status; }

.apBuyPriorityRow:not(.apBuyPriorityHead) .apBuyPriorityDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ap-buy-ok);
}

.apBuyPriorityRow[data-tone="budget"] .apBuyPriorityDot { background: var(--ap-buy-budget); }
.apBuyPriorityRow[data-tone="short"] .apBuyPriorityDot { background: var(--ap-buy-short); }

.apBuyPriorityName strong {
  display: block;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.apBuyPriorityName small {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.apBuyPrioritySavings,
.apBuyPriorityNeed {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.apBuyPrioritySavings { color: var(--color-muted); }
.apBuyPriorityRow:not(.apBuyPriorityHead) .apBuyPriorityNeed { font-weight: 700; }

.apBuyPriorityRow:not(.apBuyPriorityHead) .apBuyPriorityStatus {
  font-size: var(--font-size-sm);
  color: var(--ap-buy-ok);
}

.apBuyPriorityRow[data-tone="budget"] .apBuyPriorityStatus { color: var(--ap-buy-budget); }
.apBuyPriorityRow[data-tone="short"] .apBuyPriorityStatus { color: var(--ap-buy-short); }

.apBuyPriorityFooter {
  margin-top: var(--space-sm);
}

@media (max-width: 599px) {
  .apBuyPriorityRow {
    grid-template-columns: 12px minmax(0, 1fr) 4.2rem 4.8rem;
    grid-template-areas:
      "dot name savings need"
      ". status status status";
  }

  .apBuyPriorityHead .apBuyPriorityStatus {
    display: none;
  }
}
/* BUY_PRIORITY_END */

/* TABLE_CELL_NOTE_START */
/*
  Zweite, kleine Zeile in einer Tabellenzelle - in der Rebalancing-
  Handlungsliste die Steuerschaetzung einer uebergewichteten Position oder
  der Grund aus dem Crash-Modus unter der Aktion. Umbrechen erlaubt: die
  kompakte Tabelle setzt sonst nowrap, und der Satz liefe seitlich hinaus.
*/
.tableCellNote {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: normal;
  min-width: 14rem;
}
/* TABLE_CELL_NOTE_END */

/* BACKUP_PANEL_START */
/* Die Karte "Sicherung" blendet Knöpfe und das Passwortfeld je Phase über
   das hidden-Attribut aus (ui/modules/backupPanel.js). .uiButton und
   .inputFieldWrap setzen ein eigenes display und würden es sonst
   überstimmen. */
[data-backup-panel] [hidden] {
  display: none !important;
}

[data-backup-panel] [data-tone="danger"] .fieldHint {
  color: var(--color-danger, #dc2626);
}

/* Desktop: "Sicherung erstellen" und "Sicherung zurückspielen" nebeneinander.
   Die Statuszeile (#backupStatus) stand dazwischen und belegte auch leer die
   rechte Zelle des Zwei-Spalten-Rasters - "zurückspielen" rutschte in die
   nächste Zeile, rechts blieb die halbe Karte frei. Jetzt steht sie als
   volle Zeile darunter und nimmt leer keinen Platz. Am Handy (eine Spalte)
   bleibt sie unter "erstellen", wozu sie gehört. */
@media (min-width: 860px) {
  [data-backup-panel] > [data-backup-part="status"] {
    grid-column: 1 / -1;
    order: 1;
  }

  [data-backup-panel] > [data-backup-part="status"]:empty {
    display: none;
  }
}
/* BACKUP_PANEL_END */

/* FIFO_OVERVIEW_STYLE_START */
/* Uebersichten der FIFO-Karten (fifoOverviewRenderer.js). */
.fifoOverview { display: grid; gap: 10px; min-width: 0; }
.fifoSummaryTiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.fifoTile {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.fifoTileLabel, .fifoTileSub { color: var(--color-muted); font-size: var(--font-size-sm); }
.fifoBig {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fifoBigPct { margin-left: 8px; font-size: var(--font-size-md); font-weight: 600; }
.fifoUp { color: var(--color-success); }
.fifoDown { color: var(--color-danger); }
.fifoStack, .fifoBar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bar-track);
}
.fifoSegUp { background: var(--bar-up); }
.fifoSegDown { background: var(--bar-down); }
.fifoSegMuted { background: var(--bar-other); }
.fifoLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}
.fifoLegend > span { white-space: nowrap; }
.fifoDot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}
.fifoDot--up { background: var(--bar-up); }
.fifoDot--down { background: var(--bar-down); }
.fifoDot--muted { background: var(--bar-other); }
.fifoCompare {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: var(--font-size-sm);
}
.fifoCompareValue { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fifoNotice { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.fifoBanner {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.fifoBanner--warn { background: color-mix(in srgb, var(--color-warn) 12%, transparent); color: var(--color-warn); }
.fifoBanner--ok { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }
.fifoSaleRows { display: grid; }
.fifoSaleRow {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(100px, 1.3fr) 104px 128px 118px;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.fifoName { display: grid; min-width: 0; }
.fifoNameMain, .fifoNameSub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fifoNameMain { font-weight: 600; }
.fifoNameSub { color: var(--color-muted); font-size: var(--font-size-xs); }
.fifoDiverge { position: relative; height: 12px; border-radius: 6px; background: var(--bar-track); }
.fifoDiverge > i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.fifoDivergeMid { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--color-muted); }
.fifoSaleGain {
  display: grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fifoSaleGain small { font-size: var(--font-size-xs); font-weight: 500; }
.fifoSaleTax, .fifoSaleNet {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.fifoSaleTax { color: var(--color-warn); }
.fifoSaleNet { color: var(--color-muted); }
@media (max-width: 640px) {
  .fifoSaleRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name gain" "bar bar" "tax net";
    row-gap: 6px;
  }
  .fifoSaleRow > .fifoName { grid-area: name; }
  .fifoSaleRow > .fifoSaleGain { grid-area: gain; }
  .fifoSaleRow > .fifoDiverge { grid-area: bar; }
  .fifoSaleRow > .fifoSaleTax { grid-area: tax; text-align: left; }
  .fifoSaleRow > .fifoSaleNet { grid-area: net; }
}
.fifoDot--tax { background: #92400e; }
.fifoYears { display: flex; flex-wrap: wrap; gap: 8px; }
.fifoYear {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.fifoYear small { color: var(--color-muted); }
.fifoYear--selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.fifoMonths {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding-bottom: 2px;
}
.fifoMonth {
  display: grid;
  grid-template-rows: var(--fifo-up) var(--fifo-down) 18px;
  /* Eine Spalte ohne Mindestbreite: Sonst weitete die Beschriftung
     ("Jan 25") die Monate mit Jahreszahl auf. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 4px 1px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.fifoMonth--empty { cursor: default; }
.fifoMonth--selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.fifoMonthUp, .fifoMonthDown { display: flex; justify-content: center; }
.fifoMonthUp { align-items: flex-end; border-bottom: 1px solid var(--color-border); }
.fifoMonthDown { align-items: flex-start; }
.fifoMonthBar {
  position: relative;
  display: block;
  width: min(70%, 22px);
  border-radius: 2px;
}
.fifoMonthTax { position: absolute; top: 0; left: 0; right: 0; border-radius: 2px 2px 0 0; background: #92400e; }
.fifoMonthLabel {
  display: flex;
  justify-content: center;
  overflow: visible;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}
.fifoMonthLine > span:not(.fifoSep, .fifoMonthNames) { white-space: nowrap; }
.fifoMonthLine {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-size: var(--font-size-sm);
}
.fifoLotHead { margin: 0; color: var(--color-muted); font-size: var(--font-size-xs); text-align: center; }
.fifoLotRows { display: grid; }
.fifoLotRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) 104px;
  gap: 6px 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.fifoLotStrip { display: flex; gap: 2px; height: 22px; min-width: 0; }
.fifoLot {
  flex: 1 1 0;
  min-width: 3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.fifoLot--selected { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.fifoLotDetail {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.fifoLotPart { white-space: nowrap; }
.fifoLotScale { display: inline-flex; gap: 2px; }
.fifoLotScale > i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
@media (max-width: 640px) {
  .fifoLotRow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name gain" "strip strip"; }
  .fifoLotRow > .fifoName { grid-area: name; }
  .fifoLotRow > .fifoSaleGain { grid-area: gain; }
  .fifoLotRow > .fifoLotStrip { grid-area: strip; }
}
/* FIFO_OVERVIEW_STYLE_END */

/* ---------- Druckbericht (J2, reportRenderer.js) ----------
   Schwarz auf weiss, auch im Dunkelmodus: Die Vorschau soll zeigen, was aus
   dem Drucker kommt. Deshalb feste Farben statt der Themenvariablen - nur die
   Farbpunkte der Depots kommen aus denselben Variablen wie der Streifen. */
.reportPanel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow-y: auto;
  background: #cfd5df;
  color: #111827;
  color-scheme: light;
}

.reportControls {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  color: #0f172a;
}

.reportControlsTitle {
  flex: 1 1 220px;
  min-width: 0;
}

.reportControlsTitle h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.reportControlsTitle p {
  margin: 2px 0 0;
  color: #475569;
  font-size: var(--font-size-xs);
}

.reportVariants {
  display: inline-flex;
  gap: 6px;
}

.reportControls .dataTableChip {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.reportControls .dataTableChip[aria-pressed="true"] {
  border-color: #0369a1;
  background: #e0f2fe;
}

.reportActions {
  display: inline-flex;
  gap: 8px;
}

.reportControls .uiButton {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.reportControls .uiButton--primary {
  background: #0369a1;
  color: #fff;
  border-color: #0369a1;
}

.reportPages {
  display: grid;
  /* minmax(0, 1fr), nicht auto: Eine Tabelle ohne Umbruch machte sonst die
     Spur und mit ihr das Blatt breiter als das Telefon. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: center;
  padding: 18px 12px 40px;
}

/* Das Blatt: A4 in Bildschirmmassen, auf dem Telefon so breit wie es geht.
   Die Schrift ist klein, weil sie fuer Papier gedacht ist. */
.reportPage {
  box-sizing: border-box;
  width: min(100%, 210mm);
  min-width: 0;
  min-height: 297mm;
  padding: 14mm 15mm;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: #fff;
  color: #111827;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  font-size: 9.5pt;
  line-height: 1.4;
}

.reportHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #0f172a;
}

.reportTitle {
  font-size: 16pt;
  font-weight: 800;
  line-height: 1.15;
}

.reportSub {
  color: #475569;
  font-size: 8.5pt;
}

.reportSub .depotDots {
  vertical-align: middle;
}

.reportHeadRight {
  text-align: right;
  white-space: nowrap;
}

.reportSectionTitle {
  margin: 0 0 4px;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0369a1;
}

.reportSection {
  min-width: 0;
}

.reportLine {
  margin: 0 0 3px;
}

.reportMuted {
  color: #64748b;
}

.reportKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reportKpi {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.reportKpi span {
  color: #64748b;
  font-size: 8pt;
}

.reportKpi b {
  font-size: 12.5pt;
  font-variant-numeric: tabular-nums;
}

[data-tone="gain"] {
  color: #15803d;
}

[data-tone="loss"] {
  color: #b91c1c;
}

.reportChart {
  display: block;
  max-width: 100%;
}

.reportChartGrid {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.reportChartLabel {
  fill: #64748b;
  font-size: 8px;
}

.reportChartPortfolio {
  fill: none;
  stroke: #0369a1;
  stroke-width: 2;
}

.reportChartInvested {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

/* Auf dem Telefon rollt die Tabelle seitlich, statt Woerter zu zerreissen;
   im Druck ist das Blatt breit genug. */
.reportTableWrap {
  overflow-x: auto;
}

.reportTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
  font-variant-numeric: tabular-nums;
}

.reportTable th,
.reportTable td {
  padding: 3px 4px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Die Namensspalte darf umbrechen - am Wort, nicht im Wort. */
.reportTable td[data-report-cell="name"] {
  white-space: normal;
  min-width: 150px;
  overflow-wrap: normal;
}

.reportTable th {
  color: #64748b;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.reportTable [data-align="right"] {
  text-align: right;
  white-space: nowrap;
}

.reportTableSum td {
  border-bottom: 0;
  border-top: 1px solid #94a3b8;
  font-weight: 700;
}

.reportCols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reportBars {
  display: grid;
  gap: 4px;
}

.reportBar {
  display: grid;
  grid-template-columns: minmax(70px, 34%) 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 8.5pt;
}

.reportBarLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportBarTrack {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #f1f5f9;
}

.reportBarFill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: #0369a1;
}

.reportBarGoal {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #0f172a;
}

.reportBarText {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.reportMeter {
  height: 8px;
  margin: 4px 0;
  border-radius: 4px;
  background: #f1f5f9;
  overflow: hidden;
}

.reportMeter i {
  display: block;
  height: 100%;
  background: #f59e0b;
}

.reportMeter[data-tone="loss"] i {
  background: #b91c1c;
}

.reportFoot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 8pt;
}

@media (max-width: 480px) {
  .reportKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reportCols {
    grid-template-columns: 1fr;
  }

  .reportPage {
    min-height: 0;
    padding: 16px 12px;
  }

  .reportHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .reportHeadRight {
    text-align: left;
    white-space: normal;
  }
}

/* Drucken: nur die Blaetter. html[data-report-open] setzt app.js, solange der
   Bericht offen ist - ohne es druckt die App wie bisher ihre Ansicht. */
@page {
  size: A4;
  margin: 12mm;
}

@media print {
  html[data-report-open] body,
  html[data-report-open] #app,
  html[data-report-open] .appShell {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  html[data-report-open] .appShell > :not(.reportPanel) {
    display: none !important;
  }

  html[data-report-open] .reportPanel {
    position: static;
    overflow: visible;
    background: #fff;
  }

  html[data-report-open] .reportControls {
    display: none !important;
  }

  html[data-report-open] .reportPages {
    display: block;
    padding: 0;
  }

  html[data-report-open] .reportPage {
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  html[data-report-open] .reportPage:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  html[data-report-open] .reportTable tr {
    break-inside: avoid;
  }
}