/* Musterportfolio — Neuaufbau nach dem freigegebenen Entwurf (23.09.2026).
   Unterreiter Positionen · Umsetzen · Alternativen · Neue Börsen · Verlauf,
   Werkzeugleiste ohne Titelblock, Parameter im Seitenpanel.
   Seit diesem Umbau im Katalog-Look: nur Tokens aus design-tokens.css, keine
   eigenen Hex-Werte. Grün, Rot und Gelb nur für Werte und Zustände.
   Alles ist auf #samplePortfolioView begrenzt; einzige Ausnahme sind die
   Symbol-Kästchen in Tooltips (die Tooltip-Ebene hängt am <body>). */

#samplePortfolioView {
  color: var(--text-1);
  font-family: var(--font-sans);
  min-width: 0;
}

#samplePortfolioView .mp {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

#samplePortfolioView button { font-family: var(--font-sans); letter-spacing: var(--tracking-normal); text-transform: none; }
#samplePortfolioView :is(button, a, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }
#samplePortfolioView [hidden] { display: none !important; }

/* ── Grundbausteine ───────────────────────────────────────────────── */

#samplePortfolioView .mp-num { font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-pos { color: var(--text-success); }
#samplePortfolioView .mp-neg { color: var(--text-danger); }
#samplePortfolioView .mp-warn { color: var(--text-warning); }
#samplePortfolioView .mp-mut { color: var(--text-2); }
#samplePortfolioView .mp-leise { color: var(--text-3); }
#samplePortfolioView .mp-lbl { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-medium); }
#samplePortfolioView .mp-th {
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
#samplePortfolioView .mp-th.help-label:hover,
#samplePortfolioView .mp-th.help-label:focus-visible { color: var(--text-1); }
#samplePortfolioView .help-label { outline: none; }
#samplePortfolioView .help-label:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
#samplePortfolioView .mp-gruppe-titel {
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

#samplePortfolioView .mp-karte {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  min-width: 0;
}

#samplePortfolioView .mp-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--space-7);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-1);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#samplePortfolioView .mp-knopf:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-3); }
#samplePortfolioView .mp-knopf:disabled { opacity: .5; cursor: default; }
#samplePortfolioView .mp-knopf-primaer {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-text);
  box-shadow: var(--primary-glow);
  font-weight: var(--fw-semibold);
}
#samplePortfolioView .mp-knopf-primaer:hover:not(:disabled) { border-color: var(--primary-hover-border); }
#samplePortfolioView .mp-knopf-primaer.ist-offen { box-shadow: var(--primary-glow), 0 0 0 2px var(--warning-soft); border-color: var(--warning); }
#samplePortfolioView .mp-knopf-klein { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
#samplePortfolioView .mp-knopf-gefahr { color: var(--text-danger); }
#samplePortfolioView .mp-knopf svg,
#samplePortfolioView .mp-icon-knopf svg { flex: 0 0 auto; }

#samplePortfolioView .mp-icon-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
#samplePortfolioView .mp-icon-knopf:hover:not(:disabled) { background: var(--surface-3); color: var(--text-1); }
#samplePortfolioView .mp-icon-knopf:disabled { opacity: .4; cursor: default; }
#samplePortfolioView .mp-icon-knopf.ist-erledigt {
  color: var(--text-success);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
#samplePortfolioView .mp-icon-knopf .mp-dreh { display: inline-flex; transition: transform var(--t-base); }
#samplePortfolioView .mp-icon-knopf[aria-expanded="true"] .mp-dreh { transform: rotate(180deg); }
#samplePortfolioView .mp-icon-knopf.ist-dreht svg { animation: mp-drehen 480ms ease-out; }

#samplePortfolioView .mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-12);
  white-space: nowrap;
}
#samplePortfolioView .mp-chip-klein { padding: 0 6px; }
#samplePortfolioView .mp-chip-hell { color: var(--text-1); }
#samplePortfolioView .mp-chip-warn,
#samplePortfolioView .mp-chip-rot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
#samplePortfolioView .mp-chip-warn { color: var(--text-warning); background: color-mix(in srgb, var(--warning) 13%, transparent); }
/* Lange Grenztexte brechen in schmalen Zellen um, statt überzustehen. */
#samplePortfolioView :is(.mp-chip-warn, .mp-chip-rot) { max-width: 100%; white-space: normal; }
#samplePortfolioView .mp-chip-rot { color: var(--text-danger); background: color-mix(in srgb, var(--danger) 13%, transparent); font-weight: var(--fw-semibold); }

/* Asset-Symbol: Bild vom MDS über createAssetTokenMark, sonst Kreis mit
   Buchstaben (erkennbarer Platzhalter, nie über den Ticker geraten). */
#samplePortfolioView .mp-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--border-3);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  overflow: hidden;
}
#samplePortfolioView .mp-av-klein { width: 20px; height: 20px; }
#samplePortfolioView .mp-av .asset-token-mark,
#samplePortfolioView .mp-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#samplePortfolioView .asset-token-mark.mp-av { padding: 0; }
#samplePortfolioView .asset-token-mark.asset-icon-inline.mp-av { width: 24px; height: 24px; flex: 0 0 24px; margin-right: 0; border-color: var(--border-3); background: var(--surface-3); color: var(--text-1); font-size: var(--fs-12); }
#samplePortfolioView .asset-token-mark.asset-icon-inline.mp-av-klein { width: 20px; height: 20px; flex-basis: 20px; }
#samplePortfolioView .value-tip:focus-visible,
#samplePortfolioView [data-tip]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
#samplePortfolioView .mp-knopf.mp-warn { color: var(--text-warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
#samplePortfolioView .mp-icon-knopf.ist-sicher { color: var(--text-danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#samplePortfolioView .mp-dynamisch { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* Börse mit Logo; Spot und Unbekanntes mit Buchstaben-Kästchen. */
#samplePortfolioView .mp-ex { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
#samplePortfolioView .mp-ex .ex-icon { margin-right: 0; }
#samplePortfolioView .mp-ex-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: 1;
}
#samplePortfolioView .mp-rolle { color: var(--text-3); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-beine { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); min-width: 0; }
#samplePortfolioView .mp-bein { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-medium); }
#samplePortfolioView .mp-bein-marke { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
#samplePortfolioView .mp-bein.ist-fehlt .mp-bein-marke { background: var(--danger); }

#samplePortfolioView .mp-paar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-paar b { font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; }
#samplePortfolioView .mp-unter { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); }

/* ── Werkzeugleiste ───────────────────────────────────────────────── */

#samplePortfolioView .mp-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) 6px;
  min-width: 0;
}
#samplePortfolioView .mp-kopf-luecke { flex: 1 1 auto; }
#samplePortfolioView .mp-stand { white-space: nowrap; }
#samplePortfolioView .mp-stand.ist-alt { color: var(--text-warning); }

#samplePortfolioView .mp-reiter {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}
#samplePortfolioView .mp-reiter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
#samplePortfolioView .mp-reiter button:hover { color: var(--text-1); }
#samplePortfolioView .mp-reiter button[aria-selected="true"],
#samplePortfolioView .mp-reiter button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-anzahl {
  padding: 0 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

#samplePortfolioView .mp-anwesend { display: inline-flex; margin: 0 var(--space-1); }
#samplePortfolioView .mp-anwesend .mp-av { width: 22px; height: 22px; font-size: var(--fs-12); }
#samplePortfolioView .mp-anwesend .mp-av + .mp-av { margin-left: -6px; }
#samplePortfolioView .mp-anwesend .mp-av.ist-ich { border-color: var(--text-2); }

#samplePortfolioView .mp-kurz { color: var(--text-2); font-weight: var(--fw-regular); }
#samplePortfolioView .mp-chevron { color: var(--text-2); transition: transform var(--t-fast); }
#samplePortfolioView [aria-expanded="true"] > .mp-chevron { transform: rotate(180deg); }

/* Konten, Log, Neue Position: am Handy hinter „Mehr". */
#samplePortfolioView .mp-mehr { position: relative; display: none; }
#samplePortfolioView .mp-mehr-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 180px;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
#samplePortfolioView .mp-mehr-panel .mp-knopf { justify-content: flex-start; height: 44px; border-color: transparent; }

/* Laufende Rechnung (202): Fortschritt aus ladeZustand.js unter der Leiste. */
#samplePortfolioView .mp-status:empty { display: none; }
#samplePortfolioView .mp-status .lz-fortschritt { max-width: 520px; }
#samplePortfolioView .mp-hinweise { display: flex; flex-direction: column; gap: var(--space-1); }
#samplePortfolioView .mp-hinweise:empty { display: none; }
#samplePortfolioView .mp-hinweis { color: var(--text-warning); font-size: var(--fs-13); }

/* ── Filterzeile ──────────────────────────────────────────────────── */

#samplePortfolioView .mp-filter {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}
#samplePortfolioView .mp-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#samplePortfolioView .mp-feld-name { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; }
#samplePortfolioView .mp-filter-luecke { flex: 1 1 auto; }
#samplePortfolioView .mp-feld .catalog-select { min-width: 136px; }
#samplePortfolioView .mp-feld-breit .catalog-select { min-width: 176px; }
#samplePortfolioView #mpAltArt button { padding: 6px 10px; }
#samplePortfolioView .mp-parameter-chips .mp-chip { padding: 3px var(--space-2); }
#samplePortfolioView .mp-feld .mp-skel-feld { display: none; }
#samplePortfolioView .mp-feld.ist-skelett .mp-skel-feld { display: block; }
#samplePortfolioView .mp-feld.ist-skelett :is(select, .catalog-select) { display: none; }
#samplePortfolioView .mp-feld select:not([hidden]) {
  height: var(--space-7);
  min-width: 150px;
  padding: 0 10px;
  background: var(--surface-0);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-13);
  color-scheme: dark;
}
#samplePortfolioView .catalog-trigger {
  height: var(--space-7);
  padding: 0 10px 0 var(--space-3);
  background: var(--surface-0);
  border-color: var(--border-2);
  font-size: var(--fs-13);
}
#samplePortfolioView .mp-parameter-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#samplePortfolioView .mp-feld-rechts { align-items: flex-end; }

#samplePortfolioView .mp-kennzahlen { display: flex; align-items: flex-end; gap: var(--space-6); }
#samplePortfolioView .mp-kennzahl-wert { margin-top: 2px; font-size: var(--fs-17); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Tabellen (div-Raster wie im Entwurf) ─────────────────────────── */

#samplePortfolioView .mp-tabelle { position: relative; min-width: 0; }
#samplePortfolioView .mp-zeile {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 11px var(--space-4);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-13);
  line-height: 1.35;
  min-width: 0;
}
#samplePortfolioView .mp-zeile > * { min-width: 0; }
#samplePortfolioView .mp-kopfzeile { padding-top: 10px; padding-bottom: 10px; border-top: 0; }
#samplePortfolioView .mp-kopfzeile .mp-rechts,
#samplePortfolioView .mp-rechts { text-align: right; justify-self: end; }
#samplePortfolioView .mp-kopfzeile .mp-rechts { justify-self: stretch; }
#samplePortfolioView .mp-mitte { text-align: center; justify-self: center; }
#samplePortfolioView .mp-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#samplePortfolioView .mp-fett { font-weight: var(--fw-semibold); }
/* Sortierköpfe (23.09.2026): die Beschriftung ist Knopf und Tooltip-Auslöser.
   Der Pfeil hat immer seinen Platz — die Spalte springt beim Umschalten nicht. */
#samplePortfolioView .mp-sortier {
  all: unset;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--t-fast);
}
#samplePortfolioView .mp-sortier:hover,
#samplePortfolioView .mp-sortier.ist-aktiv { color: var(--text-1); }
#samplePortfolioView .mp-sortier:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
#samplePortfolioView .mp-sortier-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#samplePortfolioView .mp-sortier-pfeil { display: inline-block; flex: none; width: 1.1em; margin-left: 2px; text-align: left; color: var(--text-1); font-size: var(--fs-12); }

#samplePortfolioView .mp-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-top: 1px solid var(--border-1);
  color: var(--text-2);
  font-size: var(--fs-12);
}
#samplePortfolioView .mp-blaettern { display: flex; gap: var(--space-2); }
#samplePortfolioView .mp-fuss-info { justify-content: flex-start; flex-wrap: wrap; }
#samplePortfolioView .mp-fuss-liste { display: flex; flex-wrap: wrap; gap: 6px; }
#samplePortfolioView .mp-fuss-liste .mp-chip { padding-right: 3px; }
#samplePortfolioView .mp-zeile-leer { border-top: 1px solid var(--border-1); }
#samplePortfolioView .mp-zeile-leer .lz-leer { border: 0; background: transparent; }
#samplePortfolioView .mp-zelle-paar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#samplePortfolioView .mp-abgleich { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

/* Positionen */
#samplePortfolioView .mp-tab-positionen .mp-zeile {
  /* Anteile wie im Entwurf bei 1440 px; breitere Fenster verteilen sich auf alle Spalten. */
  grid-template-columns: minmax(110px, 1.24fr) minmax(200px, 2.5fr) minmax(100px, 1.2fr) minmax(56px, .7fr) minmax(70px, .84fr) minmax(70px, .84fr) minmax(70px, .84fr) minmax(84px, .96fr) minmax(220px, 2.6fr);
}
#samplePortfolioView .mp-tab-positionen .mp-empf { display: flex; align-items: center; gap: 10px; padding-left: var(--space-3); min-width: 0; }
#samplePortfolioView .mp-tab-positionen .mp-kopf-empf { padding-left: var(--space-3); }
#samplePortfolioView .mp-empf-luecke { flex: 1 1 auto; }

#samplePortfolioView .mp-akt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
#samplePortfolioView button.mp-akt:hover { background: var(--surface-3); color: var(--primary-text); }
#samplePortfolioView .mp-akt.ist-rot { color: var(--text-danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
#samplePortfolioView .mp-akt.ist-gelb { color: var(--text-warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); }
#samplePortfolioView .mp-akt.ist-ruhig { color: var(--text-2); border-color: var(--border-2); background: transparent; font-weight: var(--fw-medium); cursor: default; }
#samplePortfolioView .mp-akt-wert { font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

#samplePortfolioView .mp-menue { position: relative; }
#samplePortfolioView .mp-menue > .mp-icon-knopf { border-color: transparent; }
#samplePortfolioView .mp-menue > .mp-icon-knopf:hover,
#samplePortfolioView .mp-menue > .mp-icon-knopf[aria-expanded="true"] { border-color: var(--border-2); }
#samplePortfolioView .mp-menue-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
#samplePortfolioView .mp-menue-panel button {
  height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
#samplePortfolioView .mp-menue-panel button:hover { background: var(--surface-3); }

#samplePortfolioView .mp-abgleich { margin-top: 2px; }

/* Neu gefunden, nicht im Musterportfolio */
#samplePortfolioView .mp-neu-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-2);
  background: var(--surface-2);
  font-size: var(--fs-13);
}
#samplePortfolioView .mp-neu-zeile:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
#samplePortfolioView .mp-neu-zeile + .mp-neu-zeile { border-top-color: var(--border-1); }

/* Hervorhebung nach dem Sprung vom Chip */
#samplePortfolioView .ist-angesprungen { animation: mp-aufleuchten 1400ms ease-out; }

/* ── Umsetzen ─────────────────────────────────────────────────────── */

#samplePortfolioView .mp-summe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: 14px var(--space-4);
}
#samplePortfolioView .mp-summe-block { display: flex; flex-direction: column; gap: var(--space-2); }
#samplePortfolioView .mp-summe-syms { display: flex; align-items: center; gap: 14px; }
#samplePortfolioView .mp-summe-sym { display: inline-flex; align-items: center; gap: 6px; }
#samplePortfolioView .mp-summe-sym b { font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-summe-fortschritt { width: 220px; }
#samplePortfolioView .mp-summe-kopf { display: flex; justify-content: space-between; align-items: baseline; }
#samplePortfolioView .mp-summe-kopf b { font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-summe-luecke { flex: 1 1 auto; }
#samplePortfolioView .mp-pfeil { color: var(--text-3); font-weight: var(--fw-regular); }

#samplePortfolioView .mp-balken {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
#samplePortfolioView .mp-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--text-2); transition: width var(--t-slow); }
#samplePortfolioView .mp-balken-dick { height: 6px; border-radius: 3px; }
#samplePortfolioView .mp-balken-dick > span { background: var(--check); }

#samplePortfolioView .mp-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: help;
}
#samplePortfolioView .mp-sym-s { width: 22px; height: 22px; border-radius: 6px; }
#samplePortfolioView .mp-sym.ist-rot { color: var(--text-danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#samplePortfolioView .mp-sym.ist-ruhig { color: var(--text-2); border-color: var(--border-2); background: transparent; }

#samplePortfolioView .mp-tab-umsetzen .mp-zeile {
  grid-template-columns: minmax(150px, 1.6fr) 44px minmax(0, 6.8fr) minmax(130px, 1.15fr) minmax(70px, .84fr) minmax(56px, .64fr) minmax(70px, .84fr) 100px;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 0;
}
#samplePortfolioView .mp-tab-umsetzen .mp-kopfzeile { padding-top: 10px; padding-bottom: 10px; }
#samplePortfolioView .mp-auftrag { border-top: 1px solid var(--border-1); transition: opacity var(--t-base); }
#samplePortfolioView .mp-auftrag.ist-erledigt { opacity: .5; }
#samplePortfolioView .mp-pos-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); min-width: 0; }
#samplePortfolioView .mp-pos-kopf b { font-size: var(--fs-15); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-pos-beine { margin-top: 6px; gap: 6px 10px; }
#samplePortfolioView .mp-aktion { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#samplePortfolioView .mp-pips { display: flex; gap: 3px; }
#samplePortfolioView .mp-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--border-3); }
#samplePortfolioView .mp-pip.ist-aktiv { background: var(--text-1); }
#samplePortfolioView .mp-order-liste { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#samplePortfolioView .mp-order-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); }
#samplePortfolioView .mp-tok-extern { display: inline-flex; color: var(--text-3); }

/* Auftrag als „Bisher → Neu" (24.09.2026): links die Handlung an der
   bisherigen Position, rechts die neue — beide Token · Long · Short. */
#samplePortfolioView .mp-umzug {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}
#samplePortfolioView .mp-umzug-pfeil { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
#samplePortfolioView .mp-umzug-seite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}
#samplePortfolioView .mp-handlung { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-handlung .mp-sym { cursor: help; }
#samplePortfolioView .mp-handlung-text { min-width: 0; color: var(--text-1); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-handlung.ist-rot .mp-handlung-text { color: var(--text-danger); }
#samplePortfolioView .mp-handlung-weg { color: var(--text-2); font-weight: var(--fw-medium); }
#samplePortfolioView .ist-neu .mp-handlung-text { color: var(--text-2); }
#samplePortfolioView .mp-seite-token { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); min-width: 0; min-height: 22px; }
#samplePortfolioView .mp-token { font-size: var(--fs-15); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-seite-menge { color: var(--text-2); font-size: var(--fs-13); }
#samplePortfolioView .mp-seite-betrag { margin-left: auto; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-seite-leer { color: var(--text-2); font-size: var(--fs-13); }
#samplePortfolioView .mp-seite-beine { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#samplePortfolioView .mp-seite-hinweis { display: flex; flex-wrap: wrap; gap: 6px; }
#samplePortfolioView .mp-btok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  max-width: 100%;
  padding: 0 var(--space-2) 0 4px;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: var(--fs-13);
  white-space: nowrap;
  text-decoration: none;
}
#samplePortfolioView a.mp-btok:hover { border-color: var(--border-3); background: var(--surface-2); }
#samplePortfolioView .mp-btok.ist-geht { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
#samplePortfolioView .mp-btok.ist-neu { border-color: color-mix(in srgb, var(--success) 55%, transparent); }
#samplePortfolioView .mp-btok.ist-bleibt { color: var(--text-2); border-style: dashed; }
#samplePortfolioView .mp-btok-marke { display: inline-flex; margin-left: 2px; }
#samplePortfolioView .mp-btok-marke svg { width: 12px; height: 12px; }
#samplePortfolioView .mp-btok-marke.ist-geht { color: var(--text-danger); }
#samplePortfolioView .mp-btok-marke.ist-neu { color: var(--text-success); }
#samplePortfolioView .mp-btok-boerse { font-weight: var(--fw-medium); }
#samplePortfolioView .mp-btok-menge { color: var(--text-2); }
/* Richtung als eigener Chip, klar getrennt vom (fetten) Token-Namen. */
#samplePortfolioView .mp-richtung {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* Aufgeklappt: jede Order einzeln mit exakter Menge. */
#samplePortfolioView .mp-orders { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
#samplePortfolioView .mp-orders-liste { display: flex; flex-direction: column; gap: 6px; }
#samplePortfolioView .mp-orders-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); min-width: 0; font-size: var(--fs-13); }
#samplePortfolioView .mp-summe .mp-kennzahl-wert { font-size: var(--fs-17); }
#samplePortfolioView .mp-apr-paar { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-wert-gross { font-size: var(--fs-14); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-knoepfe { display: flex; justify-content: flex-end; gap: 4px; }
#samplePortfolioView .mp-annahme { margin-left: 3px; color: var(--text-warning); font-size: var(--fs-12); font-weight: var(--fw-semibold); cursor: help; }
#samplePortfolioView .mp-gas-unbekannt { white-space: nowrap; }
/* In schmalen Zahlenspalten steht „+ Gas?" unter dem Wert. */
#samplePortfolioView :is(.mp-zelle-wert, .mp-kennzahl-wert, .mp-werte-mobil) .mp-gas-unbekannt { display: block; margin-left: 0; line-height: 1.3; }
#samplePortfolioView .mp-uebernehmen-zeile { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }

/* ↻: neue Empfehlung fährt von rechts ein. */
#samplePortfolioView .mp-ein { animation: mp-ein 280ms ease-out; }

#samplePortfolioView .mp-details { padding: 0 var(--space-4) var(--space-4); }
#samplePortfolioView .mp-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
#samplePortfolioView .mp-kachel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
}
#samplePortfolioView .mp-apr-balken { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px; gap: var(--space-2); align-items: center; font-size: var(--fs-12); }
#samplePortfolioView .mp-hbar { position: relative; height: 10px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
#samplePortfolioView .mp-hbar > span { display: block; height: 100%; border-radius: 3px; background: var(--text-3); }
#samplePortfolioView .mp-hbar > span.ist-ziel { background: var(--success); }
#samplePortfolioView .mp-hbar > span.ist-neg { background: var(--danger); }
#samplePortfolioView .mp-stapel { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
#samplePortfolioView .mp-stapel .mp-stapel-kosten { background: var(--danger); }
#samplePortfolioView .mp-stapel .mp-stapel-ertrag { background: var(--success); opacity: .85; }
#samplePortfolioView .mp-stapel .mp-stapel-ertrag.ist-neg { background: var(--danger); opacity: .55; }
#samplePortfolioView .mp-stapel-legende { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-12); }
#samplePortfolioView .mp-be { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); }
#samplePortfolioView .mp-be-spur { position: relative; flex: 1 1 auto; height: 10px; border-radius: 3px; background: var(--surface-3); }
#samplePortfolioView .mp-be-marke { position: absolute; top: -2px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--text-1); }
#samplePortfolioView .mp-pruefungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
#samplePortfolioView .mp-pruefung { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-12); }
#samplePortfolioView .mp-pruefung b { margin-left: auto; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
#samplePortfolioView .mp-punkt { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
#samplePortfolioView .mp-punkt.ist-ok { background: var(--success); }
#samplePortfolioView .mp-punkt.ist-warn { background: var(--warning); }
#samplePortfolioView .mp-punkt.ist-schlecht { background: var(--danger); }
#samplePortfolioView .mp-legende { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); color: var(--text-2); font-size: var(--fs-12); }
#samplePortfolioView .mp-strich { display: inline-block; width: 12px; height: 2px; background: var(--text-3); }
#samplePortfolioView .mp-strich.ist-ziel { background: var(--success); }

/* 30-Tage-Minichart: chart.js wie im Reiter Fundingrates, nur kleiner und
   ohne Zeitleiste. Die Wurzel trägt `.frv-chart`, damit die gemeinsamen
   Chartstile aus fundingrates.css greifen. */
#samplePortfolioView .mp-minichart { display: block; min-width: 0; }
#samplePortfolioView .mp-minichart .chart-container {
  position: relative;
  height: 96px;
  padding: var(--space-1) var(--space-1) 22px 40px;
}
#samplePortfolioView .mp-minichart .chart-y-axis { width: 34px; top: var(--space-1); bottom: 22px; }
#samplePortfolioView .mp-minichart .chart-x-axis { left: 40px; right: var(--space-1); }
/* !important seit dem Light Mode (01.10.2026): chart.js setzt die Linienfarbe als Inline-Stil (var(--ex-*)), der sonst diese Regeln schlägt. */
#samplePortfolioView .mp-minichart .chart-line[data-boerse="jetzt"] { stroke: var(--text-3) !important; }
#samplePortfolioView .mp-minichart .chart-line[data-boerse="ziel"] { stroke: var(--success) !important; }
#samplePortfolioView .mp-minichart .tooltip-row[data-reihe="jetzt"] .tooltip-strich { background: var(--text-3) !important; }
#samplePortfolioView .mp-minichart .tooltip-row[data-reihe="ziel"] .tooltip-strich { background: var(--success) !important; }
#samplePortfolioView .mp-minichart .hover-tooltip { width: 200px; }
#samplePortfolioView .mp-minichart .tooltip-status { display: none; }
#samplePortfolioView .mp-minichart .chart-empty-state .lz-leer { padding: var(--space-2); }
#samplePortfolioView .mp-minichart-leer { display: flex; align-items: center; justify-content: center; height: 96px; color: var(--text-3); font-size: var(--fs-12); text-align: center; }

#samplePortfolioView .mp-halten-link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 6px 2px;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
#samplePortfolioView .mp-halten-link:hover { color: var(--text-1); }
#samplePortfolioView .mp-halten-link .mp-sym { cursor: inherit; }

/* ── Alternativen ─────────────────────────────────────────────────── */

#samplePortfolioView .mp-tab-alternativen .mp-zeile {
  grid-template-columns: minmax(100px, 1.3fr) minmax(190px, 2.2fr) minmax(56px, .64fr) minmax(56px, .64fr) minmax(56px, .64fr) minmax(40px, .44fr) minmax(56px, .64fr) minmax(170px, 2.2fr) minmax(130px, 1.5fr) minmax(90px, 1fr) minmax(104px, 1.04fr);
  gap: var(--space-3);
}
#samplePortfolioView .mp-verletzt { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Neue Börsen ──────────────────────────────────────────────────── */

#samplePortfolioView .mp-bestand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) 18px;
  padding: var(--space-3) var(--space-4);
}
#samplePortfolioView .mp-bestand-titel { min-width: 110px; }
#samplePortfolioView .mp-bestand-boerse { display: flex; flex-direction: column; gap: 5px; min-width: 118px; }
#samplePortfolioView .mp-bestand-boerse .mp-ex { font-size: var(--fs-13); }
#samplePortfolioView .mp-boersen-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#samplePortfolioView .mp-boerse-karte { display: flex; flex-direction: column; gap: 14px; padding: var(--space-4); }
#samplePortfolioView .mp-boerse-kopf { display: flex; align-items: center; gap: 10px; }
#samplePortfolioView .mp-boerse-kopf .ex-icon { width: 28px; height: 28px; border-radius: 7px; margin-right: 0; }
#samplePortfolioView .mp-boerse-kopf .mp-ex-ph { width: 28px; height: 28px; border-radius: 7px; font-size: var(--fs-13); }
#samplePortfolioView .mp-boerse-kopf b { font-size: var(--fs-17); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-beste { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
#samplePortfolioView .mp-beste-wert { font-size: var(--fs-24); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-boerse-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-3); }
#samplePortfolioView .mp-boerse-zahlen b { font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-tab-boerse { border-top: 1px solid var(--border-1); }
#samplePortfolioView .mp-tab-boerse .mp-zeile {
  grid-template-columns: 76px minmax(0, 1fr) 58px 40px 58px;
  gap: 10px;
  padding: 7px 0;
}
#samplePortfolioView .mp-tab-boerse .mp-kopfzeile { padding: var(--space-2) 0 var(--space-1); }
#samplePortfolioView .mp-tab-boerse .mp-beine { gap: 4px var(--space-2); }
#samplePortfolioView .mp-boerse-fuss { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; }
#samplePortfolioView .mp-boerse-fuss .mp-lbl { flex: 1 1 auto; }
#samplePortfolioView .mp-ohne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── Verlauf ──────────────────────────────────────────────────────── */

#samplePortfolioView .mp-abschnitt { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
#samplePortfolioView .mp-wochen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#samplePortfolioView .mp-woche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 150px;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
#samplePortfolioView .mp-woche:hover { border-color: var(--border-3); }
#samplePortfolioView .mp-woche[aria-pressed="true"] { background: var(--surface-3); border-color: var(--border-3); box-shadow: var(--primary-glow); }
#samplePortfolioView .mp-woche.ist-laufend { border-style: dashed; }
#samplePortfolioView .mp-woche-kopf { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
#samplePortfolioView .mp-tab-geschlossen .mp-zeile { grid-template-columns: minmax(80px, 1.1fr) minmax(190px, 2.3fr) minmax(80px, 1fr) minmax(84px, .9fr) minmax(84px, .9fr) minmax(56px, .7fr) minmax(64px, .74fr) minmax(76px, .9fr) minmax(0, 2fr) 72px; gap: var(--space-3); }
#samplePortfolioView .mp-tab-aenderungen .mp-zeile { grid-template-columns: minmax(90px, 1fr) minmax(80px, 1.1fr) minmax(190px, 2.3fr) minmax(0, 4fr) minmax(100px, 1.4fr); gap: var(--space-3); }
#samplePortfolioView .mp-art { font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-art.ist-gruen { color: var(--text-success); }
#samplePortfolioView .mp-art.ist-rot { color: var(--text-danger); }
#samplePortfolioView .mp-art.ist-neutral { color: var(--text-1); }

/* ── Hyperliquid live (unter den Positionen) ──────────────────────── */

#samplePortfolioView .mp-hl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 10px var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-12);
}
#samplePortfolioView .mp-hl.ist-laedt { opacity: .6; }
#samplePortfolioView .mp-hl b { color: var(--text-1); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-hl-luecke { flex: 1 1 auto; }

/* ── Seitenpanel Parameter ─────────────────────────────────────────── */

#samplePortfolioView .mp-schleier {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--overlay);
}
#samplePortfolioView .mp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(480px, 100vw);
  box-sizing: border-box;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--surface-1);
  border-left: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  animation: mp-panel-ein var(--t-slow);
}
#samplePortfolioView .mp-panel-kopf { display: flex; align-items: center; gap: var(--space-2); }
#samplePortfolioView .mp-panel-kopf b { flex: 1 1 auto; font-size: var(--fs-17); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-panel-hinweis { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-normal); }
#samplePortfolioView .mp-panel-gruppe { display: flex; flex-direction: column; gap: var(--space-2); }
#samplePortfolioView .mp-panel-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-3); }
#samplePortfolioView .mp-panel-fuss { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-1); }
#samplePortfolioView .mp-panel-fuss .mp-luecke { flex: 1 1 auto; }

#samplePortfolioView .mp-eingabe {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--space-7);
  padding: 0 10px;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: var(--fs-13);
}
#samplePortfolioView .mp-eingabe:focus-within { border-color: var(--border-3); box-shadow: var(--input-focus-ring); }
#samplePortfolioView .mp-eingabe input {
  all: unset;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
#samplePortfolioView .mp-eingabe input:disabled { color: var(--text-3); }
#samplePortfolioView .mp-eingabe-einheit { flex: 0 0 auto; color: var(--text-3); white-space: nowrap; }

/* Umschalter (Katalog Toggle) */
#samplePortfolioView .mp-schalter { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--space-7); color: var(--text-1); font-size: var(--fs-13); cursor: pointer; }
#samplePortfolioView .mp-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#samplePortfolioView .mp-schalter-bahn {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  transition: background var(--t-fast);
}
#samplePortfolioView .mp-schalter-bahn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--t-fast), background var(--t-fast);
}
#samplePortfolioView .mp-schalter input:checked + .mp-schalter-bahn { background: color-mix(in srgb, var(--check) 30%, transparent); border-color: var(--check); }
#samplePortfolioView .mp-schalter input:checked + .mp-schalter-bahn::after { transform: translateX(14px); background: var(--check); }
#samplePortfolioView .mp-schalter input:focus-visible + .mp-schalter-bahn { box-shadow: var(--focus-ring); }
#samplePortfolioView .mp-schalter input:disabled + .mp-schalter-bahn { opacity: .5; }

/* Auswahl im Panel (Börsen, Airdrop-Punkte): Katalog-Mehrfachauswahl. */
#samplePortfolioView .mp-auswahl { position: relative; }
#samplePortfolioView .mp-auswahl-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: var(--space-7);
  padding: 0 10px 0 var(--space-3);
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-1);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
#samplePortfolioView .mp-auswahl-knopf:disabled { opacity: .55; cursor: default; }
#samplePortfolioView .mp-auswahl-knopf > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#samplePortfolioView .mp-auswahl .hedged-more-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  min-width: 100%;
}
#samplePortfolioView .mp-punkte-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--space-7); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-13); }
#samplePortfolioView .mp-punkte-zeile:hover { background: var(--surface-3); }
#samplePortfolioView .mp-punkte-knoepfe { display: inline-flex; gap: 2px; }
#samplePortfolioView .mp-punkte-knoepfe button {
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-12);
  cursor: pointer;
}
#samplePortfolioView .mp-punkte-knoepfe button[aria-pressed="true"] { background: var(--surface-3); border-color: var(--border-3); color: var(--text-1); }
#samplePortfolioView .mp-punkte-erklaerung { grid-column: 1 / -1; padding: var(--space-1) var(--space-2) var(--space-2); color: var(--text-2); font-size: var(--fs-12); }

/* ── Dialoge (Neue Position, Bearbeiten, Schließen, Übernehmen, Log, Konten) ── */

#samplePortfolioView .mp-dialog {
  width: min(520px, calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  padding: var(--space-5);
  overflow: visible;
  background: var(--surface-1);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
#samplePortfolioView .mp-dialog-breit { width: min(980px, calc(100vw - 2 * var(--space-4))); }
#samplePortfolioView .mp-dialog::backdrop { background: var(--overlay-solid); }
#samplePortfolioView .mp-form { display: flex; flex-direction: column; gap: var(--space-3); }
#samplePortfolioView .mp-form h3 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-form-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
#samplePortfolioView .mp-form-breit { grid-column: 1 / -1; }
#samplePortfolioView .mp-form label,
#samplePortfolioView .mp-form .mp-form-feld { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-medium); }
#samplePortfolioView .mp-form input[type="text"],
#samplePortfolioView .mp-form input[type="number"],
#samplePortfolioView .mp-form input[type="date"],
#samplePortfolioView .mp-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--space-7);
  padding: 6px 10px;
  background: var(--input-bg);
  color: var(--text-1);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color-scheme: dark;
}
#samplePortfolioView .mp-form input:focus,
#samplePortfolioView .mp-form textarea:focus { outline: none; border-color: var(--border-3); box-shadow: var(--input-focus-ring); }
#samplePortfolioView .mp-form-text { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal); }
#samplePortfolioView .mp-form label.mp-schalter { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--text-1); font-size: var(--fs-13); }
#samplePortfolioView .mp-form label.hedged-more-item { flex-direction: row; align-items: center; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-13); }
#samplePortfolioView .mp-form label.hedged-more-item:has(input:checked) { color: var(--text-1); }
#samplePortfolioView .hedged-more-item input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#samplePortfolioView .hedged-more-item:has(input:focus-visible) { box-shadow: var(--focus-ring); }
#samplePortfolioView .mp-form-fehler { color: var(--text-danger); font-size: var(--fs-13); }
#samplePortfolioView .mp-form-fehler:empty { display: none; }
#samplePortfolioView .mp-form-aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-1); }
#samplePortfolioView .mp-form .mp-schalter { color: var(--text-1); }
#samplePortfolioView .mp-konto { min-height: 44px; padding-block: 6px; }
#samplePortfolioView .mp-konto .mp-ex { white-space: normal; align-items: flex-start; }
#samplePortfolioView .mp-dialog .hedged-more-list:not(.is-zweispaltig) { display: flex; flex-direction: column; gap: var(--space-1); }

/* Konten des Musterportfolios (Schema 44): Kontenliste, Zugang, Marge je Börse. */
#samplePortfolioView .mp-dialog.mp-dialog-konten { width: min(760px, calc(100vw - 2 * var(--space-4))); }
#samplePortfolioView .mp-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--space-7);
  padding: 6px 10px;
  background: var(--input-bg);
  color: var(--text-1);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-14);
  color-scheme: dark;
}
#samplePortfolioView .mp-konto-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
#samplePortfolioView .mp-konto-liste > .mp-form-text { grid-column: 1 / -1; }
#samplePortfolioView .mp-konto-zeile:has(.mp-konto-form) { grid-column: 1 / -1; }
#samplePortfolioView .mp-konto-zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  min-width: 0;
}
#samplePortfolioView .mp-konto-zeile.ist-pausiert { opacity: .7; }
#samplePortfolioView .mp-konto-kopf { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; font-size: var(--fs-14); }
#samplePortfolioView .mp-konto-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-konto-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#samplePortfolioView .mp-konto-knoepfe .ist-sicher { color: var(--text-danger); border-color: var(--danger); }
#samplePortfolioView .mp-konto-form { padding-top: var(--space-2); border-top: 1px solid var(--border-1); }
#samplePortfolioView .mp-form-aktionen.mp-links { justify-content: flex-start; margin-top: 0; }
#samplePortfolioView .mp-marge-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }
#samplePortfolioView .mp-marge-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-marge-zeile.ist-aus-konto .mp-eingabe { opacity: .6; }
#samplePortfolioView .mp-marge-zeile > .mp-ex { min-width: 0; font-size: var(--fs-14); }
#samplePortfolioView .mp-marge-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#samplePortfolioView .mp-form .mp-marge-form label.mp-eingabe { flex-direction: row; align-items: center; width: 108px; gap: 6px; }
#samplePortfolioView .mp-marge-zeile > .mp-ex { white-space: normal; }
#samplePortfolioView .mp-form .mp-marge-form .mp-eingabe input[type="text"] {
  all: unset;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  text-align: right;
}
#samplePortfolioView .mp-konto-hl summary { cursor: pointer; }
#samplePortfolioView .mp-konto-hl[open] summary { margin-bottom: var(--space-2); }
/* Schmal: eine Spalte. Passt der Dialog dann nicht mehr ins Fenster, rollt er
   in sich -- abgeschnitten wäre das Speichern unerreichbar. */
@media (max-width: 700px) {
  #samplePortfolioView .mp-konto-liste,
  #samplePortfolioView .mp-marge-liste { grid-template-columns: minmax(0, 1fr); }
  #samplePortfolioView .mp-dialog.mp-dialog-konten { max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto; }
}
#samplePortfolioView .mp-log-tabelle .mp-zeile { grid-template-columns: 110px minmax(80px, 140px) 150px minmax(120px, 1fr) minmax(0, 1.4fr); gap: var(--space-3); }

/* Börsenwahl im Dialog: einfache Auswahl ohne Suchfeld, zweispaltig. */
#samplePortfolioView .mp-wahl .hedged-more-item::after { content: '✓'; }

/* ── Skeleton beim Erstladen ──────────────────────────────────────── */

#samplePortfolioView .mp-skel-feld { width: 150px; height: var(--space-7); }
#samplePortfolioView .mp-skel-kennzahlen { width: 360px; height: 40px; }
#samplePortfolioView .mp-skel-zeile { height: 50px; }

/* ── Tooltip-Inhalte am <body> ────────────────────────────────────── */

.value-tip-layer .mp-tip-sym { display: inline-flex; align-items: center; gap: var(--space-2); }
.value-tip-layer .mp-tip-sym + .mp-tip-sym { margin-top: 6px; }
.value-tip-layer .mp-tip-sym .mp-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1px solid var(--border-3);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-1);
}
.value-tip-layer .mp-tip-sym .mp-sym.ist-rot { color: var(--text-danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.value-tip-layer .mp-tip-sym .mp-sym.ist-ruhig { color: var(--text-2); border-color: var(--border-2); background: transparent; }

/* ── Animationen ──────────────────────────────────────────────────── */

@keyframes mp-ein { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes mp-drehen { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mp-panel-ein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mp-aufleuchten { 0% { background: var(--surface-3); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  #samplePortfolioView .mp-ein,
  #samplePortfolioView .mp-panel,
  #samplePortfolioView .ist-angesprungen,
  #samplePortfolioView .mp-icon-knopf.ist-dreht svg { animation: none; }
}

/* ── Börsen-Übersicht über der Positionstabelle (24.09.2026) ─────── */
/* Karten im Raster; die Spaltenzahl setzt der Reiter (--bx-spalten), damit
   jede Reihe gleich voll ist. Am Handy untereinander. */

#samplePortfolioView .mp-bx { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-bx-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
#samplePortfolioView .mp-bx-sort button { padding: 4px 10px; font-size: var(--fs-12); }
#samplePortfolioView .mp-bx-sort .mp-sortier-pfeil { width: 0.9em; }
#samplePortfolioView .mp-bx-raster {
  display: grid;
  grid-template-columns: repeat(var(--bx-spalten, 4), minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
#samplePortfolioView .mp-bx-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-3) 14px;
  min-width: 0;
}
#samplePortfolioView .mp-bx-karte.ist-veraltet { border-color: var(--warning-soft); }
#samplePortfolioView .mp-bx-gesamt { background: var(--surface-2); border-color: var(--border-2); }
#samplePortfolioView .mp-bx-kopf { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
#samplePortfolioView .mp-bx-kopf img,
#samplePortfolioView .mp-bx-kopf .mp-ex-ph { flex: none; }
#samplePortfolioView .mp-bx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
#samplePortfolioView .mp-bx-luecke { flex: 1 1 auto; }
#samplePortfolioView .mp-bx-quelle {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#samplePortfolioView .mp-bx-quelle.ist-alt { color: var(--text-warning); border-color: var(--warning-soft); }
#samplePortfolioView .mp-bx-quelle.ist-sehr-alt { color: var(--text-danger); border-color: var(--danger); }
#samplePortfolioView .mp-bx-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}
#samplePortfolioView .mp-bx-wert { min-width: 0; }
#samplePortfolioView .mp-bx-wert dt { margin: 0; }
#samplePortfolioView .mp-bx-wert dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 2px 0 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
#samplePortfolioView .mp-bx-teil { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); }

/* ── Detail eines Vorschlags (24.09.2026) ───────────────────────── */
/* Funding beider Börsen in einem Chart (chart.js wie im Reiter Fundingrates,
   die Wurzel trägt `.frv-chart` für die gemeinsamen Chartstile), Kennzahlen
   als Kachelreihe, Preis 30 T als kleinere Kurve. Nichts scrollt. */

#samplePortfolioView .mp-klickbar { cursor: pointer; }
#samplePortfolioView .mp-klickbar:hover,
#samplePortfolioView .mp-klickbar.ist-offen { background: var(--surface-2); }
#samplePortfolioView .mp-klickbar:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
#samplePortfolioView .mp-tab-umsetzen .mp-auftrag > .mp-zeile { cursor: pointer; }
#samplePortfolioView .mp-boersen-karten > .mp-boerse-karte.ist-offen { grid-column: 1 / -1; }

#samplePortfolioView .mp-pd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--border-2);
  background: var(--surface-0);
  cursor: default;
}
#samplePortfolioView .mp-details .mp-pd { border: 1px solid var(--border-1); border-radius: var(--radius-lg); }
#samplePortfolioView .mp-pd-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
#samplePortfolioView .mp-pd-kopf b { font-size: var(--fs-15); font-weight: var(--fw-bold); }
#samplePortfolioView .mp-pd-bein { font-size: var(--fs-13); }
#samplePortfolioView .mp-pd-hinweis { color: var(--text-warning); }
#samplePortfolioView .mp-pd-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-width: 0; }
#samplePortfolioView .mp-pd-kachel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
#samplePortfolioView .mp-pd-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; font-size: var(--fs-13); }
#samplePortfolioView .mp-pd-zeile .mp-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#samplePortfolioView .mp-pd-zeile b { flex: none; font-weight: var(--fw-semibold); white-space: nowrap; }
#samplePortfolioView .mp-pd-netto { padding-top: 6px; border-top: 1px solid var(--border-1); }
#samplePortfolioView .mp-pd-gross { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: 1.1; }

#samplePortfolioView .mp-pd-chart { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--text-1); }
#samplePortfolioView .mp-pd-chart .chart-container { position: relative; flex: 0 0 auto; box-sizing: border-box; }
#samplePortfolioView .mp-pd-flaeche { height: 280px; }
#samplePortfolioView .mp-pd-flaeche-preis { height: 150px; }
#samplePortfolioView .mp-pd-chart .chart-container.ist-leer { padding: 0; }
#samplePortfolioView .mp-pd-chart .hover-tooltip { width: 230px; }
#samplePortfolioView .mp-pd-preis .tooltip-status { display: none; }
#samplePortfolioView .mp-pd-chart .chart-line[data-boerse="netto"] { stroke: var(--text-1); }
#samplePortfolioView .mp-pd-preis .chart-line { stroke: var(--text-2); }
#samplePortfolioView .mp-pd-skel { display: block; width: 100%; height: 100%; border-radius: var(--radius-md); }
#samplePortfolioView .mp-pd-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 72px;
  padding: var(--space-3);
  box-sizing: border-box;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: var(--fs-13);
  text-align: center;
}
#samplePortfolioView .mp-pd-legende { display: inline-flex; flex-wrap: wrap; gap: 4px var(--space-3); color: var(--text-2); font-size: var(--fs-12); }
#samplePortfolioView .mp-pd-strich { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--text-2); }
#samplePortfolioView .mp-pd-strich.ist-netto { background: repeating-linear-gradient(90deg, var(--text-1) 0 5px, transparent 5px 8px); }
#samplePortfolioView .mp-pd-fuss { color: var(--text-3); font-size: var(--fs-12); }
#samplePortfolioView .mp-pd-unter { color: var(--text-3); font-size: var(--fs-13); }

/* ── Schmalere Fenster ────────────────────────────────────────────── */

/* „· Tageswerte bis …" erst ab 1600 px; darunter steht es im Tooltip. */
@media (max-width: 1599px) {
  #samplePortfolioView .mp-stand-zusatz { display: none; }
}

@media (max-width: 1280px) {
  #samplePortfolioView .mp-pd-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #samplePortfolioView .mp-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #samplePortfolioView .mp-boersen-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet und Handy: Tabellen werden Karten (Entwurf „Mobil 390"). */
@media (max-width: 900px) {
  #samplePortfolioView .mp-nur-breit { display: none !important; }
  #samplePortfolioView .mp-tab-positionen .mp-zelle-paar .mp-av { display: none; }
  #samplePortfolioView .mp-tab-positionen .mp-beine-mobil { gap: 4px var(--space-2); }
  #samplePortfolioView .mp-tab-positionen .mp-beine-mobil .mp-bein .mp-rolle { display: none; }
  #samplePortfolioView .mp-tab-umsetzen .mp-zelle-knoepfe { grid-area: knoepfe; }
  #samplePortfolioView .mp-tab-umsetzen .mp-werte-mobil .mp-zahl { text-align: right; }
  #samplePortfolioView .mp-auswahl .mp-punkte-panel {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    top: 50%;
    width: auto;
    transform: translateY(-50%);
    z-index: var(--z-modal);
  }
  #samplePortfolioView .mp-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); }
  #samplePortfolioView .mp-kopf .mp-reiter { grid-column: 1 / -1; }
  #samplePortfolioView .mp-kopf-luecke,
  #samplePortfolioView .mp-kopf .mp-kurz,
  #samplePortfolioView .mp-kopf .mp-nur-breit { display: none; }
  #samplePortfolioView .mp-kopf .mp-knopf { height: 44px; }
  #samplePortfolioView .mp-mehr { display: block; }
  #samplePortfolioView .mp-mehr .mp-knopf { height: 44px; }
  #samplePortfolioView .mp-stand-zusatz { display: none; }

  #samplePortfolioView .mp-reiter { flex-wrap: wrap; border-radius: var(--radius-lg); }
  #samplePortfolioView .mp-reiter button { flex: 1 1 auto; justify-content: center; min-height: 36px; padding: 6px 10px; }
  /* Fünf Unterreiter in zwei Reihen (3 + 2), die Art-Filter in 2 × 2. */
  #samplePortfolioView .mp-kopf .mp-reiter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #samplePortfolioView .mp-kopf .mp-reiter button { grid-column: span 2; }
  #samplePortfolioView .mp-kopf .mp-reiter button:nth-child(n + 4) { grid-column: span 3; }
  #samplePortfolioView #mpAltArt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #samplePortfolioView .mp-filter { gap: var(--space-3); }
  #samplePortfolioView .mp-kennzahlen { width: 100%; justify-content: space-between; gap: var(--space-3); }
  #samplePortfolioView .mp-kennzahl-wert { font-size: var(--fs-15); }
  #samplePortfolioView .mp-filter-luecke { display: none; }
  #samplePortfolioView .mp-feld-rechts { align-items: flex-start; }
  #samplePortfolioView .mp-parameter-chips { justify-content: flex-start; }

  /* Positionen: Paar mit Beinen, 7 T, 14 T, Empfehlung. */
  #samplePortfolioView .mp-tab-positionen .mp-zeile { grid-template-columns: minmax(0, 1fr) 52px 52px 124px; gap: var(--space-2); padding: 10px var(--space-3); }
  #samplePortfolioView .mp-tab-positionen .mp-paar { flex-wrap: wrap; row-gap: 0; }
  #samplePortfolioView .mp-tab-positionen .mp-zeile:not(.mp-kopfzeile) { min-height: 60px; }
  #samplePortfolioView .mp-tab-positionen .mp-nur-breit { display: none; }
  #samplePortfolioView .mp-tab-positionen .mp-paar-mobil { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  #samplePortfolioView .mp-tab-positionen .mp-empf { padding-left: 0; justify-content: flex-end; }
  #samplePortfolioView .mp-tab-positionen .mp-empf .mp-akt { height: 36px; padding: 0 var(--space-2); }
  #samplePortfolioView .mp-tab-positionen .mp-empf .mp-akt-wert,
  #samplePortfolioView .mp-tab-positionen .mp-empf .mp-akt svg,
  #samplePortfolioView .mp-tab-positionen .mp-empf-luecke { display: none; }
  #samplePortfolioView .mp-tab-positionen .mp-kopf-empf { padding-left: 0; }

  /* Umsetzen: je Position eine Karte. */
  #samplePortfolioView .mp-summe { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 10px var(--space-3); padding: var(--space-3); }
  #samplePortfolioView .mp-summe > .mp-summe-block { grid-column: 1 / -1; }
  #samplePortfolioView .mp-summe .mp-kennzahl-wert { font-size: var(--fs-15); }
  #samplePortfolioView .mp-summe-fortschritt { width: auto; }
  #samplePortfolioView .mp-summe-luecke { display: none; }
  #samplePortfolioView .mp-tab-umsetzen { background: transparent; border: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  #samplePortfolioView .mp-tab-umsetzen .mp-kopfzeile { display: none; }
  #samplePortfolioView .mp-auftrag { border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1); }
  #samplePortfolioView .mp-tab-umsetzen .mp-zeile {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "sym pos pips"
      "order order order"
      "werte werte werte"
      "knoepfe knoepfe knoepfe";
    gap: var(--space-3) var(--space-2);
    padding: 14px;
  }
  #samplePortfolioView .mp-tab-umsetzen .mp-zelle-pos { grid-area: pos; }
  #samplePortfolioView .mp-tab-umsetzen .mp-aktion { grid-area: sym; }
  #samplePortfolioView .mp-tab-umsetzen .mp-aktion .mp-pips { display: none; }
  #samplePortfolioView .mp-tab-umsetzen .mp-pips-mobil { grid-area: pips; display: flex; align-self: center; }
  #samplePortfolioView .mp-tab-umsetzen .mp-zelle-order { grid-area: order; }
  #samplePortfolioView .mp-tab-umsetzen .mp-werte-mobil {
    grid-area: werte;
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.8fr 0.8fr;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-1);
  }
  #samplePortfolioView .mp-tab-umsetzen .mp-zelle-wert { display: none; }
  #samplePortfolioView .mp-tab-umsetzen .mp-knoepfe { grid-area: knoepfe; gap: var(--space-2); }
  #samplePortfolioView .mp-tab-umsetzen .mp-knoepfe .mp-icon-knopf { width: 44px; height: 44px; border-radius: var(--radius-sm); }
  #samplePortfolioView .mp-pos-beine { display: none; }
  /* Bisher und Neu untereinander, der Pfeil zeigt nach unten. */
  #samplePortfolioView .mp-umzug { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #samplePortfolioView .mp-umzug-pfeil { height: 18px; }
  #samplePortfolioView .mp-umzug-pfeil svg { transform: rotate(90deg); }
  #samplePortfolioView .mp-seite-beine { display: grid; grid-template-columns: minmax(0, 1fr); }
  #samplePortfolioView .mp-btok { height: 44px; width: 100%; }
  #samplePortfolioView .mp-btok .mp-btok-menge { margin-left: auto; }
  #samplePortfolioView .mp-details { padding: 0 14px 14px; }
  #samplePortfolioView .mp-kacheln { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* Alternativen: Karte je Zeile. */
  #samplePortfolioView .mp-tab-alternativen .mp-kopfzeile { display: none; }
  #samplePortfolioView .mp-tab-alternativen .mp-zeile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }
  #samplePortfolioView .mp-tab-alternativen .mp-zelle-breit { grid-column: 1 / -1; }
  #samplePortfolioView .mp-tab-alternativen [data-mobil-label]::before {
    content: attr(data-mobil-label);
    display: block;
    color: var(--text-2);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    text-align: left;
  }
  #samplePortfolioView .mp-tab-alternativen .mp-zahl { text-align: left; }
  #samplePortfolioView .mp-tab-alternativen .mp-rechts { justify-self: start; }
  #samplePortfolioView .mp-tab-alternativen .mp-zelle-aktion { grid-column: 1 / -1; justify-self: stretch; }
  #samplePortfolioView .mp-tab-alternativen .mp-zelle-aktion .mp-knopf { width: 100%; justify-content: center; height: 44px; }

  #samplePortfolioView .mp-boersen-karten { grid-template-columns: minmax(0, 1fr); }
  /* Paare je Börse: Beine in einer eigenen Zeile unter den Zahlen. */
  #samplePortfolioView .mp-tab-boerse .mp-zeile { grid-template-columns: minmax(0, 1fr) 58px 40px 58px; row-gap: 4px; }
  #samplePortfolioView .mp-tab-boerse .mp-zelle-beine { grid-column: 1 / -1; order: 5; }
  #samplePortfolioView .mp-tab-boerse .mp-kopfzeile .mp-zelle-beine { display: none; }
  #samplePortfolioView .mp-bestand-titel { min-width: 0; width: 100%; }

  /* Verlauf: Tabellen als Karten mit Beschriftung. */
  #samplePortfolioView :is(.mp-tab-geschlossen, .mp-tab-aenderungen, .mp-log-tabelle) .mp-kopfzeile { display: none; }
  #samplePortfolioView :is(.mp-tab-geschlossen, .mp-tab-aenderungen, .mp-log-tabelle) .mp-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  #samplePortfolioView :is(.mp-tab-geschlossen, .mp-tab-aenderungen, .mp-log-tabelle) [data-mobil-label]::before {
    content: attr(data-mobil-label);
    display: block;
    color: var(--text-2);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    text-align: left;
  }
  #samplePortfolioView :is(.mp-tab-geschlossen, .mp-tab-aenderungen, .mp-log-tabelle) .mp-zahl { text-align: left; }
  #samplePortfolioView :is(.mp-tab-geschlossen, .mp-tab-aenderungen, .mp-log-tabelle) .mp-zelle-breit { grid-column: 1 / -1; }

  #samplePortfolioView .mp-panel { padding: var(--space-4); }
  #samplePortfolioView .mp-form-raster { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) {
  #samplePortfolioView .mp-nur-mobil { display: none !important; }
}

/* Handy: Börsen-Karten untereinander, die Sortierleiste über die volle Breite. */
/* Die vier Werte stehen dort in EINER Reihe, damit die Karten flach bleiben. */
@media (max-width: 600px) {
  #samplePortfolioView .mp-pd { padding: var(--space-3); }
  #samplePortfolioView .mp-pd-kacheln { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  #samplePortfolioView .mp-pd-flaeche { height: 220px; }
  #samplePortfolioView .mp-pd-flaeche-preis { height: 130px; }
  #samplePortfolioView .mp-bx-raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  #samplePortfolioView .mp-bx-karte { gap: 6px; padding: 10px var(--space-3); }
  #samplePortfolioView .mp-bx-werte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-2); }
  #samplePortfolioView .mp-bx-wert dd { font-size: var(--fs-14); }
  #samplePortfolioView .mp-bx-sort { width: 100%; }
  #samplePortfolioView .mp-bx-leiste .mp-filter-luecke { display: none; }
}