/* Börsen ▸ Carry (02.10.2026): Carry-Simulator aus dem Trade-Rechner im
   FRF-Design. Alles auf #carryView begrenzt, nur Katalog-Tokens
   (design-tokens.css) und FRF-Variablen (style.css, dunkel und hell; als
   Schrift die Text-Stufen --text-success/-warning/-danger, die Grundtöne nur
   für Flächen, Linien, Punkte). Dropdowns nutzen die catalog-*-Klassen
   (catalog-controls.css), ihr Panel hängt am <body> (.cy-popup).
   Umbau 02.10.2026 abends (Nutzerwunsch: ansprechender, kürzer, weniger
   Text): Kopf mit Wellen, Tacho und Kennzahlen; Konto und Simulation bzw.
   Stresstests und Aufblasen ab 1200 px nebeneinander; Stresstests als
   Balken, Aufblasen als Diagramm (Tabelle zum Aufklappen); blasse Motive je
   Karte (.cy-wz, nur Linien, pointer-events: none; carryTab.js setzt sie
   nur auf freien Platz, damit kein Text an Kontrast verliert).
   Regeln des Nutzers: nichts scrollt in sich (Ausnahme: die aufgeklappte
   Stufentabelle in ihrer eigenen Hülle); am Handy werden die Tabellen zu
   Karten (Beschriftung aus data-label). Schrift nie unter 12 px.
   Logik in modules/carryTab.js. Nicht im Demo-Paket. */

#carryView {
  --cy-gruen: var(--success);
  --cy-gelb: var(--warning);
  --cy-rot: var(--danger);
  --cy-gruen-bg: var(--success-soft);
  --cy-gelb-bg: var(--warning-soft);
  --cy-rot-bg: color-mix(in srgb, var(--danger) 15%, transparent);
  --cy-gruen-leiste: color-mix(in srgb, var(--success) 55%, transparent);
  --cy-gelb-leiste: color-mix(in srgb, var(--warning) 70%, transparent);
  --cy-rot-leiste: color-mix(in srgb, var(--danger) 75%, transparent);
  /* Zonen hinter Balken und Diagramm: nur ein Hauch der Zustandsfarbe. */
  --cy-gruen-zone: color-mix(in srgb, var(--success) 10%, transparent);
  --cy-gelb-zone: color-mix(in srgb, var(--warning) 13%, transparent);
  --cy-rot-zone: color-mix(in srgb, var(--danger) 13%, transparent);
  /* Wasserzeichen und Wellen: Tinte (text-1) mit sehr kleiner Deckkraft. */
  --cy-wz-deckkraft: .07;
  color: var(--text-1);
  font-family: var(--frf-font, var(--font-sans));
  min-width: 0;
}
html[data-theme="light"] #carryView { --cy-wz-deckkraft: .08; }
#carryView[hidden], #carryView [hidden] { display: none !important; }
#carryView .cy-mount {
  display: grid;
  gap: var(--space-4);
  /* Volle Breite wie die übrigen Reiter (Nutzer 03.10.2026; vorher höchstens 1320 px). */
  width: 100%;
  min-width: 0;
  padding: var(--space-4) 0 var(--space-6);
  font-variant-numeric: tabular-nums;
}
#carryView .cy-mount > * { min-width: 0; }
#carryView :is(h2, h3, h4, p) { margin: 0; }
#carryView :is(th, td, p, span, b, button, small) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
#carryView .cy-text-gruen { color: var(--text-success); }
#carryView .cy-text-gelb { color: var(--text-warning); }
#carryView .cy-text-rot { color: var(--text-danger); }

/* ── Kopf: Titel, Status, Tacho, Kennzahlen; Wellen im Hintergrund ─── */
#carryView .cy-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(0, 1.7fr);
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-7);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
}
#carryView .cy-wellen {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  width: 100%;
  /* Nur das untere Band (Polster des Kopfs): die Wellen liegen unter keinem Text. */
  height: 44px;
  color: var(--text-1);
  pointer-events: none;
}
#carryView .cy-welle { fill: currentColor; }
#carryView .cy-welle-1 { opacity: calc(var(--cy-wz-deckkraft) * .55); }
#carryView .cy-welle-2 { opacity: calc(var(--cy-wz-deckkraft) * .8); }
#carryView .cy-welle-3 { opacity: var(--cy-wz-deckkraft); }
#carryView .cy-titel { display: grid; gap: var(--space-2); align-content: center; min-width: 0; }
#carryView .cy-titel h2 { justify-self: start; font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
#carryView .cy-unterzeile { color: var(--text-2); font-size: var(--fs-13); }
#carryView .cy-status, #carryView .cy-fazit, #carryView .cy-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
#carryView .cy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
#carryView .cy-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
#carryView .cy-chip.is-ok::before { background: var(--cy-gruen); }
#carryView .cy-chip.is-warn::before { background: var(--cy-gelb); }
#carryView .cy-chip.is-rot::before { background: var(--cy-rot); }
#carryView .cy-chip.is-sim { color: var(--text-1); border-color: var(--border-3); }
#carryView .cy-chip.is-sim::before { background: var(--text-1); }
#carryView .cy-chip.is-laedt::before { background: var(--text-2); animation: cy-puls 1s ease-in-out infinite; }
#carryView .cy-chip-frage { cursor: help; color: var(--text-1); border-style: dashed; }
#carryView .cy-chip-frage::before { display: none; }
@keyframes cy-puls { 50% { opacity: .25; } }

/* Ergebnis in einem Satz (Zeichen + Wort, nie nur Farbe). */
#carryView .cy-ergebnis { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
#carryView .cy-ergebnis.is-gruen { color: var(--text-success); }
#carryView .cy-ergebnis.is-gelb { color: var(--text-warning); }
#carryView .cy-ergebnis.is-rot { color: var(--text-danger); }
#carryView .cy-ergebnis-gross { font-size: var(--fs-17); }
#carryView .cy-ikon {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: var(--fs-12); font-style: normal; font-weight: var(--fw-bold); line-height: 1;
}
#carryView .cy-ikon.cy-gruen { color: var(--text-success); background: var(--cy-gruen-bg); }
#carryView .cy-ikon.cy-gelb { color: var(--text-warning); background: var(--cy-gelb-bg); }
#carryView .cy-ikon.cy-rot { color: var(--text-danger); background: var(--cy-rot-bg); }

/* Tacho */
#carryView .cy-tacho-block { display: grid; justify-items: center; gap: 2px; }
#carryView .cy-tacho-bild { position: relative; width: 216px; height: 124px; }
#carryView .cy-tacho { display: block; overflow: visible; }
#carryView .cy-tacho-zone { fill: none; }
#carryView .cy-tacho-zone.cy-gruen { stroke: var(--cy-gruen-leiste); }
#carryView .cy-tacho-zone.cy-gelb { stroke: var(--cy-gelb-leiste); }
#carryView .cy-tacho-zone.cy-rot { stroke: var(--cy-rot-leiste); }
#carryView .cy-tacho-zeiger { stroke: var(--text-1); stroke-width: 4; stroke-linecap: round; }
#carryView .cy-tacho-zeiger-heute { stroke: var(--text-3); stroke-width: 2.5; stroke-dasharray: 3 3; }
#carryView .cy-tacho-ruhe { stroke: var(--text-2); stroke-width: 2.5; stroke-linecap: round; }
#carryView .cy-tacho-wert { position: absolute; inset: auto 0 0; display: grid; justify-items: center; gap: 2px; }
#carryView .cy-tacho-wert strong { font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1; }
#carryView .cy-tacho-wert small { color: var(--text-3); font-size: var(--fs-12); }

/* Kennzahlen */
#carryView .cy-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
#carryView .cy-kpi { display: grid; gap: 3px; align-content: start; min-width: 0; }
#carryView .cy-kpi-titel { justify-self: start; color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
#carryView .cy-kpi strong { font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
#carryView .cy-kpi small { color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Raster ────────────────────────────────────────────────────────── */
#carryView .cy-raster { display: grid; gap: var(--space-4); align-items: start; min-width: 0; }
#carryView .cy-raster > * { min-width: 0; }
@media (min-width: 1200px) {
  #carryView .cy-raster-oben { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  #carryView .cy-raster-unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #carryView .cy-raster { align-items: stretch; }
}

/* ── Karten ────────────────────────────────────────────────────────── */
#carryView .cy-karte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
#carryView .cy-karte > * { min-width: 0; }
/* Platz und Größe setzt carryTab.js (platziereMotive): nur wo nichts darunter liegt. */
#carryView .cy-wz {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  display: none;
  width: 176px;
  height: 176px;
  color: var(--text-1);
  opacity: var(--cy-wz-deckkraft);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#carryView .cy-wz.is-an { display: block; }
#carryView .cy-karte h3 { justify-self: start; font-size: var(--fs-17); font-weight: var(--fw-semibold); }
#carryView .cy-karte h4 {
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
#carryView .cy-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
#carryView .cy-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
#carryView .cy-abschnitt { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
#carryView .cy-kopf-ergebnis { flex: 1 1 auto; display: flex; min-width: 0; }
#carryView .cy-laedt { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-14); }
#carryView .cy-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--border-3); border-top-color: var(--text-1); border-radius: 50%;
  animation: cy-dreh .8s linear infinite;
}
@keyframes cy-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #carryView .cy-spinner, #carryView .cy-chip.is-laedt::before { animation: none; } }

#carryView .cy-notiz { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-relaxed); max-width: 92ch; }
#carryView .cy-leise { color: var(--text-3); font-size: var(--fs-13); }
#carryView .cy-warnungen { display: grid; gap: var(--space-2); }
#carryView .cy-warnungen:empty { display: none; }
#carryView .cy-warn {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cy-gelb) 55%, transparent);
  border-radius: var(--radius-sm);
  background: var(--cy-gelb-bg);
  color: var(--text-1);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
}
#carryView .cy-doku { color: var(--text-2); font-size: var(--fs-12); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#carryView .cy-doku:hover { color: var(--text-1); }
#carryView .cy-wert-tip { cursor: help; }
#carryView .cy-fuss { color: var(--text-3); font-size: var(--fs-12); }
#carryView .cy-fuss .help-label { color: var(--text-3); }

/* ── Knöpfe ────────────────────────────────────────────────────────── */
#carryView :is(.cy-btn, .cy-dazu, .cy-weg) {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--secondary-border);
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  color: var(--secondary-text);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#carryView :is(.cy-btn, .cy-dazu):hover { background: var(--secondary-hover-bg); border-color: var(--secondary-hover-border); }
#carryView .cy-btn-primaer { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-text); font-weight: var(--fw-semibold); }
#carryView .cy-btn-primaer:hover { border-color: var(--primary-hover-border); box-shadow: var(--primary-glow); }
#carryView .cy-btn:disabled { opacity: .55; cursor: progress; }
/* + leicht grün, × leicht rot (Nutzerwunsch 03.10.); beim Hover kräftiger. */
#carryView .cy-dazu {
  min-width: 28px; min-height: 26px; padding: 0 var(--space-2); border-style: dashed; font-size: var(--fs-12);
  color: var(--text-success);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
#carryView .cy-dazu:hover { border-color: var(--success); background: var(--cy-gruen-bg); }
#carryView .cy-weg {
  min-height: 28px; padding: 0 9px;
  color: var(--text-danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
#carryView .cy-weg:hover { border-color: var(--danger); background: var(--cy-rot-bg); }
#carryView :is(.cy-btn, .cy-dazu, .cy-weg, .cy-segment, .cy-input, .cy-range, .cy-doku, .cy-wert-tip):focus-visible,
#carryView .help-label:focus-visible,
#carryView .cy-aufklapp summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Felder ────────────────────────────────────────────────────────── */
#carryView .cy-felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
#carryView .cy-feld { display: grid; gap: 3px; min-width: 0; }
#carryView .cy-feld-name { justify-self: start; color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; }
#carryView .cy-feld-reihe { display: flex; align-items: center; gap: 6px; min-width: 0; }
#carryView .cy-wallet-reihe { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
#carryView .cy-input.cy-wallet { width: 25em; max-width: 100%; text-align: left; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-12); }
#carryView .cy-feld-wallet { flex: 1 1 100%; }
#carryView .cy-wallet-meldung { display: block; margin-top: 4px; font-size: var(--fs-12); }
#carryView .cy-einheit { color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; }
#carryView .cy-fokus-reihe { display: flex; align-items: center; gap: 6px; }
#carryView .cy-input {
  width: 104px;
  min-width: 0;
  height: 32px;
  box-sizing: border-box;
  padding: 0 var(--space-2);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-14);
  text-align: right;
}
#carryView .cy-input:focus { border-color: var(--border-3); box-shadow: var(--input-focus-ring); }
#carryView .cy-input::placeholder { color: var(--input-placeholder); }
#carryView .cy-input.cy-zahl { width: 80px; }
#carryView .cy-input.cy-zahl-s { width: 54px; }
#carryView .cy-input.cy-coin { width: 84px; text-align: left; text-transform: uppercase; }
#carryView .cy-wahl { min-width: 0; }
#carryView .cy-wahl .catalog-trigger { height: 32px; }
#carryView .cy-regel-wahl { width: 250px; max-width: 100%; }
#carryView .cy-coin-wahl { width: 116px; }
#carryView .cy-fokus-wahl { width: 96px; }
#carryView .cy-wahl .catalog-trigger.cy-ungueltig { border-color: var(--danger); color: var(--text-danger); }
#carryView .cy-wahl .catalog-trigger.cy-leer .catalog-trigger-label { color: var(--text-3); }
.cy-popup .cy-mehr { font-size: var(--fs-12); padding: var(--space-2) var(--space-3); }
/* Börse und Modus: eine Zeile je Börse (Nutzer 03.10.2026), Panel 640 px breit; schmaler als das nur am Handy. */
@media (min-width: 700px) { .cy-popup.cy-popup-einzeilig .catalog-option-name { white-space: nowrap; } }

/* Segmentierte Wahl (Katalog Tabs/Segmented Control) */
#carryView .cy-segmente {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
}
#carryView .cy-segment {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
}
#carryView .cy-segment[aria-checked="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); box-shadow: 0 0 0 1px var(--border-3); }

/* Schalter (Katalog Toggle) */
#carryView .cy-schalter { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
#carryView .cy-schalter input { position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer; }
#carryView .cy-schalter-spur {
  position: relative; flex: none; width: 34px; height: 20px;
  border: 1px solid var(--border-3); border-radius: var(--radius-pill); background: var(--surface-3);
  transition: background var(--t-fast);
}
#carryView .cy-schalter-spur::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);
}
#carryView .cy-schalter input:checked + .cy-schalter-spur { background: color-mix(in srgb, var(--check) 30%, transparent); border-color: var(--check); }
#carryView .cy-schalter input:checked + .cy-schalter-spur::after { transform: translateX(14px); background: var(--check); }
#carryView .cy-schalter input:focus-visible + .cy-schalter-spur { box-shadow: var(--focus-ring); }

/* ── Tabellen (Konto, Stufen) ──────────────────────────────────────── */
#carryView .cy-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
#carryView .cy-tabelle th {
  padding: 2px 6px 5px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-align: left;
  white-space: nowrap;
}
#carryView .cy-tabelle td { padding: 4px 4px; border-bottom: 1px solid var(--border-1); vertical-align: middle; white-space: nowrap; }
#carryView .cy-tabelle :is(th, td):first-child { padding-left: 0; }
/* Erste Kopfzelle ist der Abschnittstitel (Sicherheiten / Positionen), die letzte trägt „+“. */
#carryView :is(.cy-sicherheiten, .cy-positionen) th:first-child { color: var(--text-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
#carryView .cy-tabelle th:last-child { text-align: right; }
#carryView .cy-tabelle th .cy-dazu { white-space: nowrap; }
#carryView .cy-tabelle :is(th, td):last-child { padding-right: 0; }
#carryView .cy-tabelle tbody tr:last-child td { border-bottom: 0; }
#carryView .cy-aus[data-vorzeichen="+"] { color: var(--text-success); }
#carryView .cy-aus[data-vorzeichen="-"] { color: var(--text-danger); }
#carryView .cy-tabelle td:has(> .cy-weg) { width: 1%; text-align: right; }
/* Wert → angerechnet mit Balken (Anteil, der zählt) */
#carryView .cy-anr { display: grid; gap: 4px; min-width: 150px; }
#carryView .cy-anr-text { display: flex; align-items: baseline; gap: 6px; }
#carryView .cy-anr-text .cy-aus:first-child { color: var(--text-2); }
#carryView .cy-pfeil { color: var(--text-3); }
#carryView .cy-anr-balken { position: relative; display: block; height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
#carryView .cy-anr-balken i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--text-2); }
/* Größe, darunter PnL und Max-Hebel */
#carryView .cy-groesse { display: grid; gap: 1px; justify-items: end; text-align: right; }
#carryView .cy-groesse small { display: flex; gap: 6px; color: var(--text-3); font-size: var(--fs-12); }
#carryView .cy-positionen th:nth-child(7) { text-align: right; }
#carryView .cy-maxh { cursor: help; }
#carryView .cy-stufen td:not(:first-child), #carryView .cy-stufen th:not(:first-child) { text-align: right; }
#carryView .cy-pill {
  display: inline-block;
  min-width: 52px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-align: center;
}
#carryView .cy-pill.cy-gruen { color: var(--text-success); background: var(--cy-gruen-bg); }
#carryView .cy-pill.cy-gelb { color: var(--text-warning); background: var(--cy-gelb-bg); }
#carryView .cy-pill.cy-rot { color: var(--text-danger); background: var(--cy-rot-bg); }
#carryView .cy-stufen tr.cy-grenze td { background: var(--cy-gruen-bg); }
#carryView .cy-stufen tr.cy-grenze td:first-child { box-shadow: inset 3px 0 0 var(--cy-gruen); padding-left: var(--space-2); font-weight: var(--fw-bold); }

/* ── Kurse simulieren ──────────────────────────────────────────────── */
#carryView .cy-regler-liste { display: grid; }
#carryView .cy-regler {
  display: grid;
  grid-template-columns: 84px 92px minmax(0, 1fr) auto;
  grid-template-areas: "coin kurs faktor wert" "spur spur spur spur";
  gap: 6px var(--space-3);
  align-items: center;
  padding: var(--space-2) 0 22px;
  border-bottom: 1px solid var(--border-1);
}
#carryView .cy-regler:last-child { border-bottom: 0; }
#carryView .cy-regler > :nth-child(1) { grid-area: coin; }
#carryView .cy-regler > :nth-child(2) { grid-area: kurs; }
#carryView .cy-regler > :nth-child(3) { grid-area: faktor; }
#carryView .cy-regler > :nth-child(4) { grid-area: wert; }
#carryView .cy-regler > .cy-spur { grid-area: spur; }
#carryView .cy-regler-kopf { grid-template-areas: "coin kurs faktor wert"; padding: 0 0 4px; color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
#carryView .cy-regler-kopf > span { justify-self: start; }
#carryView .cy-regler-kopf > :nth-child(4) { justify-self: end; }
#carryView .cy-regler-coin { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-15); }
#carryView .cy-coin-bild.asset-token-mark { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; font-size: var(--fs-12); }
#carryView .cy-regler .cy-input.cy-zahl { width: 92px; }
#carryView .cy-faktor { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
#carryView .cy-korr { color: var(--text-3); font-size: var(--fs-12); }
#carryView .cy-sim-wert { font-size: var(--fs-14); font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; }
#carryView .cy-spur { position: relative; min-width: 0; }
#carryView .cy-range { width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
#carryView .cy-range::-webkit-slider-runnable-track { height: 10px; border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--cy-leiste, var(--surface-3)); }
#carryView .cy-range::-moz-range-track { height: 10px; border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--cy-leiste, var(--surface-3)); }
#carryView .cy-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -5px; border: 3px solid var(--surface-1); border-radius: 50%; background: var(--text-1); box-shadow: 0 0 0 1px var(--border-3); }
#carryView .cy-range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--surface-1); border-radius: 50%; background: var(--text-1); }
#carryView .cy-marken { position: absolute; top: 0; right: 9px; left: 9px; height: 100%; pointer-events: none; }
#carryView .cy-marke { position: absolute; transform: translateX(-50%); }
#carryView .cy-marke-heute { top: 2px; width: 2px; height: 18px; border-radius: 1px; background: var(--text-1); opacity: .55; }
#carryView .cy-marke-liq { top: 23px; color: var(--text-danger); font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; pointer-events: auto; }
#carryView .cy-marke-liq::before { content: ""; position: absolute; top: -7px; left: 50%; width: 2px; height: 6px; background: var(--cy-rot); }
#carryView .cy-marke-liq.cy-aussen::before { display: none; }
#carryView .cy-marke-liq.cy-links { transform: none; }
#carryView .cy-marke-liq.cy-rechts { transform: translateX(-100%); }

/* ── Stresstests als Balken ────────────────────────────────────────── */
#carryView .cy-stress-ergebnis { display: grid; gap: var(--space-3); }
#carryView .cy-stress-liste { display: grid; }
#carryView .cy-stress-zeile {
  display: grid;
  grid-template-columns: minmax(118px, .9fr) minmax(0, 2fr) 76px 48px;
  gap: var(--space-3);
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-13);
}
#carryView .cy-stress-zeile:last-child { border-bottom: 0; }
#carryView .cy-stress-kopf { padding: 0 0 4px; border-bottom-color: var(--border-2); color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
#carryView .cy-stress-kopf > span { justify-self: start; }
#carryView .cy-stress-kopf > :nth-child(n+3), #carryView .cy-zahl-zelle { justify-self: end; text-align: right; white-space: nowrap; }
#carryView .cy-zahl-zelle { color: var(--text-2); }
#carryView .cy-stress-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
#carryView .cy-hist {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: var(--fw-semibold);
}
#carryView .cy-stress-balken { display: grid; grid-template-columns: minmax(0, 1fr) 64px 18px; align-items: center; gap: var(--space-2); }
#carryView .cy-stress-spur {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cy-gruen-zone) 0 var(--z1), var(--cy-gelb-zone) var(--z1) var(--z2), var(--cy-rot-zone) var(--z2) 100%);
  box-shadow: inset 0 0 0 1px var(--border-1);
}
#carryView .cy-stress-fuell { position: absolute; inset: 0 auto 0 0; min-width: 3px; border-radius: var(--radius-pill); }
#carryView .cy-stress-fuell.cy-gruen { background: var(--cy-gruen); }
#carryView .cy-stress-fuell.cy-gelb { background: var(--cy-gelb); }
#carryView .cy-stress-fuell.cy-rot { background: var(--cy-rot); }
#carryView :is(.cy-stress-grenze, .cy-stress-liq) { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; transform: translateX(-1px); }
#carryView .cy-stress-grenze { left: var(--z1); background: var(--cy-gelb); }
#carryView .cy-stress-liq { left: var(--z2); background: var(--cy-rot); }
#carryView .cy-stress-wert { font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; }

/* ── Aufblasen: Diagramm ───────────────────────────────────────────── */
#carryView .cy-aufblasen-inhalt { display: grid; gap: var(--space-3); min-width: 0; }
#carryView .cy-legende { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--text-2); font-size: var(--fs-12); }
#carryView .cy-legende-item { display: inline-flex; align-items: center; gap: 6px; }
#carryView .cy-diagramm-flaeche { min-width: 0; }
#carryView .cy-diagramm { display: block; max-width: 100%; overflow: visible; font-family: inherit; }
#carryView .cy-zone-gruen { fill: var(--cy-gruen-zone); }
#carryView .cy-zone-gelb { fill: var(--cy-gelb-zone); }
#carryView .cy-zone-rot { fill: var(--cy-rot-zone); }
#carryView .cy-gitter { stroke: var(--chart-gitter); stroke-width: 1; }
#carryView .cy-achse { stroke: var(--chart-null); stroke-width: 1; }
#carryView .cy-achse-text { fill: var(--chart-achse-text); font-size: 12px; }
#carryView .cy-diagramm-text { fill: var(--text-2); font-size: 12px; font-weight: var(--fw-semibold); }
#carryView .cy-text-freigestellt { paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
#carryView .cy-ref-grenze { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 5 4; }
#carryView .cy-ref-grenze-text { fill: var(--text-warning); }
#carryView .cy-ref-liq { stroke: var(--danger); stroke-width: 1.5; }
#carryView .cy-ref-liq-text { fill: var(--text-danger); }
#carryView .cy-ref-sicher { stroke: var(--success); stroke-width: 2; }
#carryView .cy-ref-sicher-text { fill: var(--text-success); }
#carryView .cy-beleihung { fill: url(#cy-schraffur); }
#carryView .cy-schraffur-linie { stroke: var(--text-3); stroke-width: 1.5; opacity: .45; }
#carryView .cy-beleihung-linie { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 2 3; }
#carryView .cy-linie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#carryView .cy-linie-heute { stroke: var(--text-3); stroke-width: 1.5; }
#carryView .cy-linie-h1 { stroke: var(--text-1); }
#carryView .cy-linie-h3 { stroke: var(--text-1); stroke-dasharray: 6 4; }
#carryView .cy-linie-h7 { stroke: var(--text-2); stroke-dasharray: 1 4; stroke-width: 2.5; }
#carryView .cy-punkt { stroke: var(--surface-1); stroke-width: 1.5; }
#carryView .cy-punkt.cy-gruen { fill: var(--success); }
#carryView .cy-punkt.cy-gelb { fill: var(--warning); }
#carryView .cy-punkt.cy-rot { fill: var(--danger); }
#carryView .cy-spalte { cursor: crosshair; outline: none; }
#carryView .cy-spalte-flaeche { fill: transparent; pointer-events: all; }
#carryView .cy-spalte-linie { stroke: var(--text-2); stroke-width: 1; opacity: 0; pointer-events: none; }
#carryView .cy-spalte:is(:hover, :focus) .cy-spalte-flaeche { fill: color-mix(in srgb, var(--text-1) 7%, transparent); }
#carryView .cy-spalte:is(:hover, :focus) .cy-spalte-linie { opacity: .7; }
#carryView .cy-spalte:focus-visible .cy-spalte-flaeche { stroke: var(--focus-color, var(--text-1)); stroke-width: 2; }
/* Tabelle zum Aufklappen (eigene Hülle darf quer rollen) */
#carryView .cy-aufklapp { border-top: 1px solid var(--border-1); padding-top: var(--space-2); }
#carryView .cy-aufklapp summary { justify-self: start; width: fit-content; color: var(--text-2); font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; border-radius: var(--radius-sm); }
#carryView .cy-aufklapp summary:hover { color: var(--text-1); }
#carryView .cy-aufklapp[open] summary { margin-bottom: var(--space-2); }
#carryView .cy-ohne-margin { margin-top: var(--space-2); }
#carryView .cy-tabelle.cy-ohne-margin-tabelle { width: auto; min-width: min(100%, 420px); }
#carryView .cy-ohne-margin-tabelle :is(th, td) { text-align: right; padding-inline: var(--space-2) var(--space-4); }
#carryView .cy-ohne-margin-tabelle :is(th, td):first-child { text-align: left; padding-left: 0; }
#carryView .cy-ohne-margin-text { margin: 0 0 var(--space-2); color: var(--text-3); font-size: var(--fs-12); max-width: 70ch; }
#carryView .cy-tabelle-huelle { overflow-x: auto; }

/* ── Mittlere Breite: Kopf in zwei Zeilen ──────────────────────────── */
@media (max-width: 1099px) {
  #carryView .cy-hero { grid-template-columns: auto minmax(0, 1fr); }
  #carryView .cy-titel { grid-column: 1 / -1; }
  #carryView .cy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Handy: eine Spalte, Tabellen als Karten, nichts rollt quer ────── */
@media (max-width: 760px) {
  #carryView .cy-mount { gap: var(--space-3); padding-top: var(--space-3); }
  #carryView .cy-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-3); }
  #carryView .cy-tacho-block { justify-self: center; }
  #carryView .cy-kpis { gap: var(--space-3); }
  #carryView .cy-kpi strong { font-size: var(--fs-17); }
  #carryView .cy-karte { padding: var(--space-4) var(--space-3); }
  #carryView .cy-abschnitt { display: flex; }
  #carryView .cy-titel h2 { font-size: var(--fs-20); }
  #carryView .cy-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  #carryView .cy-feld-regel { grid-column: 1 / -1; }
  #carryView .cy-feld-wallet { grid-column: 1 / -1; }
  #carryView .cy-wallet-reihe > .cy-input { flex: 1 1 auto; width: auto; min-width: 0; }
  #carryView .cy-feld-regel .cy-regel-wahl { width: 100%; }
  #carryView .cy-feld .cy-input { width: 100%; }
  #carryView .cy-feld-reihe { min-width: 0; }
  #carryView .cy-feld-reihe > .cy-input { flex: 1 1 auto; }
  /* Stresstests: Zeitraum und „Nur … ↓“ in einer Zeile, darunter Alles ↑ / ↓ */
  #carryView .cy-stress-felder > :nth-child(4) { grid-column: 2; grid-row: 1; }
  #carryView .cy-feld-reihe > .cy-fokus-reihe { flex: 1 1 auto; width: auto; min-width: 0; }
  #carryView .cy-fokus-reihe .cy-input { flex: 1 1 0; width: 0; min-width: 40px; }
  #carryView .cy-fokus-reihe .cy-fokus-wahl { flex: 0 0 88px; width: 88px; }
  /* Beschriftungen der Felder nur in der ersten Zeile (wie ein Kopf). */
  #carryView :is(.cy-sicherheiten, .cy-positionen) tbody tr:not(:first-child) td[data-label]::before { display: none; }
  #carryView .cy-tabelle, #carryView .cy-tabelle tbody { display: block; }
  #carryView .cy-tabelle thead { display: none; }
  #carryView .cy-tabelle tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-1);
  }
  #carryView .cy-tabelle tbody tr:last-child { border-bottom: 0; }
  #carryView .cy-tabelle td { display: grid; gap: 2px; align-content: start; justify-items: start; padding: 0 !important; border: 0; text-align: left !important; white-space: normal; min-width: 0; }
  #carryView .cy-tabelle td:has(> .cy-input, > .cy-wahl, > .cy-segmente) { justify-items: stretch; }
  #carryView .cy-tabelle td[data-label]::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
  #carryView .cy-tabelle .cy-input { width: 100%; }
  #carryView .cy-tabelle td:last-child:not([data-label]) { position: absolute; top: var(--space-2); right: 0; width: auto; }
  /* Sicherheiten: Coin | Menge | Anr. über die Zeile, darunter Wert → angerechnet */
  #carryView .cy-sicherheiten tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 36px; }
  #carryView .cy-sicherheiten td:nth-child(4) { grid-column: 1 / -1; }
  #carryView .cy-sicherheiten td:nth-child(4)::before { display: none; }
  #carryView .cy-anr { width: 100%; min-width: 0; }
  /* Positionen: Coin + Seite, dann vier Felder, dann Größe */
  #carryView .cy-positionen tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #carryView .cy-positionen td:nth-child(1) { grid-column: 1 / 3; }
  #carryView .cy-positionen td:nth-child(2) { grid-column: 3 / 5; padding-right: 40px !important; }
  #carryView .cy-positionen td:nth-child(1)::before, #carryView .cy-positionen td:nth-child(2)::before { display: none; }
  #carryView .cy-positionen td:nth-child(7) { grid-column: 1 / -1; }
  #carryView .cy-positionen td:nth-child(7)::before { display: none; }
  #carryView .cy-groesse { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--space-2); }
  #carryView .cy-sicherheiten td:first-child::before { display: none; }
  #carryView .cy-sicherheiten td:first-child { align-self: end; }
  #carryView .cy-stufen tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #carryView .cy-stufen td:first-child { font-weight: var(--fw-semibold); }
  #carryView .cy-stufen tr.cy-grenze { margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--cy-gruen-bg); box-shadow: inset 3px 0 0 var(--cy-gruen); }
  #carryView .cy-stufen tr.cy-grenze td { background: transparent; }
  #carryView .cy-stufen tr.cy-grenze td:first-child { box-shadow: none; }
  #carryView .cy-tabelle-huelle { overflow: visible; }
  /* Regler: Coin, Kurs, Faktor in einer Zeile, simulierter Kurs neben dem Coin */
  /* Regler: Coin, Kurs, Faktor und simulierter Kurs in einer Zeile (Kopf bleibt als Beschriftung) */
  #carryView .cy-regler { grid-template-columns: 62px 76px auto minmax(0, 1fr); gap: 6px var(--space-2); padding-bottom: 24px; }
  #carryView .cy-regler .cy-input.cy-zahl { width: 76px; }
  #carryView .cy-regler .cy-input.cy-zahl-s { width: 50px; }
  #carryView .cy-regler-coin { font-size: var(--fs-14); }
  #carryView .cy-faktor { gap: 4px; }
  #carryView .cy-sim-wert { font-size: var(--fs-13); white-space: normal; }
  #carryView .cy-regler-kopf > :nth-child(3) { white-space: nowrap; }
  #carryView .cy-regler.cy-regler-kopf { padding-bottom: 4px; }
  /* Stresstests: Name und Zahlen oben, Balken darunter */
  #carryView .cy-stress-zeile { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name wert hebel" "balken balken balken"; gap: 4px var(--space-3); padding: var(--space-2) 0; }
  #carryView .cy-stress-zeile > :nth-child(1) { grid-area: name; }
  #carryView .cy-stress-zeile > :nth-child(2) { grid-area: balken; }
  #carryView .cy-stress-zeile > :nth-child(3) { grid-area: wert; }
  #carryView .cy-stress-zeile > :nth-child(4) { grid-area: hebel; }
  #carryView .cy-stress-kopf { display: none; }
}