/* Cross OI FRF — Neuaufbau nach dem freigegebenen Entwurf (22.09.2026).
   Eine kompakte Zeile je Paar, die Beine und die Rechnung im aufgeklappten
   Detail. Alles ist auf #crossOiTab begrenzt: `hedged-*`, `fr-blacklist-*`
   und `hedged-more-*` teilen sich andere Reiter. Farben nur über die
   Katalog-Tokens aus design-tokens.css. */

#crossOiTab {
  --coi-gut: var(--check);
  --coi-mittel: var(--text-warning);
  --coi-schwach: color-mix(in srgb, var(--danger) 62%, var(--text-1));
  color: var(--text-1);
  font-family: var(--font-sans);
}

#crossOiTab .coi {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

#crossOiTab .coi-zahl { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
#crossOiTab .coi-rechts { text-align: right; }
#crossOiTab .coi-leise { color: var(--text-3); }
#crossOiTab .coi-leise2 { color: var(--text-2); }
#crossOiTab .coi-hell { color: var(--text-1); }
#crossOiTab .coi-gut { color: var(--coi-gut); }
#crossOiTab .coi-mittel { color: var(--coi-mittel); }
#crossOiTab .coi-schwach { color: var(--coi-schwach); }
#crossOiTab .coi-bg-gut { background: var(--coi-gut); }
#crossOiTab .coi-bg-mittel { background: var(--coi-mittel); }
#crossOiTab .coi-bg-schwach { background: var(--coi-schwach); }

#crossOiTab .coi-th {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* ── Pills und Felder ─────────────────────────────────────────────── */

#crossOiTab .coi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--space-7);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

#crossOiTab .coi-pill:hover:not(:disabled) { border-color: var(--border-3); background: var(--surface-3); }
#crossOiTab .coi-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#crossOiTab .coi-pill:disabled { opacity: .45; cursor: default; }

#crossOiTab .coi-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--text-2);
  transform: rotate(45deg);
  transition: transform var(--t-fast);
}

#crossOiTab .coi-feld {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--space-7);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  color: var(--text-1);
  font-size: var(--fs-14);
}

#crossOiTab .coi-feld:focus-within { border-color: var(--border-3); box-shadow: var(--focus-ring); }

#crossOiTab .coi-feld input {
  all: unset;
  min-width: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}

#crossOiTab .coi-feld-oi { width: 92px; }
#crossOiTab .coi-feld-oi input { width: 100%; text-align: right; }
#crossOiTab .coi-einheit { color: var(--text-3); }

/* ── Filterleiste ─────────────────────────────────────────────────── */

/* Beschriftung klein über dem Feld, alle Felder an einer Unterkante
   (Wunsch des Nutzers, 22.09.2026). Was keine Beschriftung trägt — die
   Erklärung vorn, „Gewichten", rechts Stand/Anzahl/Ausblenden — ist so hoch
   wie ein Feld und steht damit auf dessen Mittellinie. */
#crossOiTab .coi-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

#crossOiTab .coi-feldgruppe {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
#crossOiTab .coi-feldgruppe > .coi-th { line-height: 16px; }

/* Trenner vor den Fenstern (Korrelation, Stability, Funding): seit 13.10.2026
   ein ::before an „Korrelation“, damit er mit dem Feld unter „Mehr“ wandert.
   Abstand wie vorher: Lücke · 1 px Linie · Lücke. */
#crossOiTab .coi-abschnitt { position: relative; margin-left: calc(var(--space-4) + 1px); }
#crossOiTab .coi-abschnitt::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-4) - 1px);
  bottom: 4px;
  width: 1px;
  height: 24px;
  background: var(--border-2);
}

#crossOiTab .coi-versteckt { display: none; }

#crossOiTab .coi-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
}

#crossOiTab .coi-chip {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

#crossOiTab .coi-chip:hover { color: var(--text-1); }
#crossOiTab .coi-chip.is-on { background: var(--primary-bg); color: var(--primary-text); box-shadow: var(--primary-glow); }
#crossOiTab .coi-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Auswahlfelder: Katalog-Auslöser als Pill; im Fenster-Block mit Namen davor. */
#crossOiTab .coi-select { display: inline-flex; align-items: center; min-width: 0; }
#crossOiTab .coi-select .catalog-select { min-width: 0; }
#crossOiTab .coi-select .catalog-trigger {
  width: auto;
  height: var(--space-7);
  min-height: var(--space-7);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}
#crossOiTab .coi-select-korr .catalog-trigger { min-width: 84px; }
#crossOiTab .coi-select .catalog-trigger:hover { border-color: var(--border-3); }
#crossOiTab .coi-select .catalog-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

#crossOiTab .coi-fenster .catalog-trigger { min-width: 76px; }

#crossOiTab .coi-stepper { gap: var(--space-2); padding: 0 3px; }
#crossOiTab .coi-step {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#crossOiTab .coi-step:hover { background: var(--surface-3); color: var(--text-1); }
#crossOiTab .coi-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#crossOiTab .coi-step-wert { display: inline-flex; align-items: baseline; gap: 3px; font-weight: var(--fw-semibold); }
#crossOiTab .coi-step-wert input { width: 2.1ch; text-align: right; -moz-appearance: textfield; appearance: textfield; }
#crossOiTab .coi-step-wert input::-webkit-outer-spin-button,
#crossOiTab .coi-step-wert input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#crossOiTab .coi-gewichten {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-7);
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
}
#crossOiTab .coi-gewichten input { accent-color: var(--check); margin: 0; }

/* Börsen-Mehrfachauswahl: Panel und Häkchen kommen aus catalog-controls.css. */
#crossOiTab .coi-boersen .hedged-more-toggle { min-width: 0; max-width: 300px; }
#crossOiTab .coi-boersen #hedgedExchangesLabel { overflow: hidden; text-overflow: ellipsis; }
#crossOiTab .hedged-more-toggle[aria-expanded="true"] .coi-chevron { transform: rotate(225deg); margin-top: 3px; }
#crossOiTab .hedged-more-panel { left: 0; right: auto; }

/* ── Rechts in der Filterzeile: Stand, Anzahl, Ausblenden ─────────── */
/* Die Legendenzeile darunter ist am 22.09.2026 entfallen; ihre Erklärungen
   stehen in den Tooltips der Spaltenköpfe Beine, Einstieg und Engpass-OI. */

#crossOiTab .coi-stand.is-alt { color: var(--text-warning); }
#crossOiTab .coi-hilfe {
  display: inline-flex;
  align-items: center;
  height: var(--space-7);
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
}

#crossOiTab .coi-pill.fr-blacklist-toggle {
  min-width: 0;
  width: auto;
  justify-content: flex-start;
  padding: 0 6px 0 var(--space-3);
  font-weight: var(--fw-semibold);
}
#crossOiTab .coi-pill.fr-blacklist-toggle::before { content: none; display: none; }

#crossOiTab .coi-filter-rechts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--space-7);
  margin-left: auto;
  font-size: var(--fs-13);
  white-space: nowrap;
}

/* „Mehr“ (modules/filterMehr.js, 13.10.2026): was nicht in die Zeile passt,
   wandert von hinten hierher. Der Knopf ist eine coi-pill und steht hinter
   Stand/Anzahl (die tragen das margin-left: auto); im Menü je Feld eine
   Reihe, Beschriftung links, Feld rechts, wie in Top Spreads. */
#crossOiTab .coi-filter > .filter-mehr { margin-left: 0; }
#crossOiTab .filter-mehr-knopf { padding: 0 var(--space-2) 0 var(--space-3); }
#crossOiTab .filter-mehr-menue > .coi-feldgruppe {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
#crossOiTab .filter-mehr-menue > .coi-abschnitt::before { content: none; }
#crossOiTab .filter-mehr-menue > .hedged-blacklist-dropdown .fr-blacklist-toggle { width: 100%; }
#crossOiTab .filter-mehr-menue > .hedged-blacklist-dropdown .coi-zaehler { margin-left: auto; }
/* Im Menü klappen die Listen unter ihrem Knopf rechtsbündig auf (das Menü
   steht am rechten Rand der Zeile); panelImFenster hält sie im Bild. */
#crossOiTab .filter-mehr-menue :is(.hedged-more-panel, .fr-blacklist-panel) { left: auto; right: 0; }

#crossOiTab .coi-zaehler {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
}

#crossOiTab .fr-blacklist-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

#crossOiTab .fr-blacklist-search {
  width: 100%;
  min-height: var(--space-7);
  height: var(--space-7);
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
}

#crossOiTab .fr-blacklist-action {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

#crossOiTab .fr-blacklist-item { display: flex; align-items: center; gap: var(--space-2); }

/* ── Tabelle ──────────────────────────────────────────────────────── */

#crossOiTab .coi-karte {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

/* Schmaler als die Tabelle: sie scrollt in ihrer Hülle, die Seite nicht. */
/* `position: relative`: Sonst entkommen absolut gesetzte Kinder (.sr-only)
   der Hülle und ziehen die Seite am Handy auf 1168 px (gemessen 22.09.2026). */
#crossOiTab .coi-tabelle-huelle { position: relative; overflow-x: auto; }

/* Spaltenbreiten (22.09.2026): Bis dahin nahm „Paar" als einzige freie
   Spalte den ganzen Rest — bei 1860 px gut 600 px Leere vor dem APR. Jetzt
   hat „Paar" eine feste Breite für die längsten Namen, die übrigen Spalten
   stehen in Prozent (Summe 100 %). Weil 284 px + 100 % mehr ist als die
   Tabelle, verteilt der Browser die Restbreite im Verhältnis dieser Anteile;
   die Mindestbreite sorgt dafür, dass keine Spalte unter ihren Inhalt fällt.
   Den größten Anteil hat Stability: ihr Balken wächst mit, statt Leere zu
   lassen. Die Werte stehen mittig, so verteilt sich der Rest gleichmäßig
   links und rechts statt als Block vor einer rechtsbündigen Zahl. */
#crossOiTab .coi-tabelle {
  width: 100%;
  min-width: 1284px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-14);
}

#crossOiTab .coi-col-paar { width: 284px; }   /* „EURUSD ↔ GBPUSD" samt Augen */
#crossOiTab .coi-col-apr { width: 12.8%; }       /* 128 px bei Mindestbreite */
#crossOiTab .coi-col-einstieg { width: 10.4%; }  /* 104 px */
#crossOiTab .coi-col-korr { width: 10.8%; }      /* 108 px */
#crossOiTab .coi-col-stab { width: 20%; }        /* 200 px */
#crossOiTab .coi-col-vol { width: 10.4%; }       /* 104 px */
#crossOiTab .coi-col-beine { width: 18.6%; }     /* 186 px */
#crossOiTab .coi-col-eng { width: 11.8%; }       /* 118 px */
#crossOiTab .coi-col-auf { width: 5.2%; }        /* 52 px */

#crossOiTab .coi-tabelle th,
#crossOiTab .coi-tabelle td {
  padding: 0 7px;
  vertical-align: middle;
  border: 0;
  background: none;
}

#crossOiTab .coi-tabelle th:first-child,
#crossOiTab .coi-tabelle td:first-child { padding-left: var(--space-5); }
/* Ein noch längerer Name wird am Zellrand abgeschnitten, statt über den APR
   zu laufen. */
#crossOiTab .coi-zeile > td:first-child { overflow: hidden; }
#crossOiTab .coi-tabelle th:last-child,
#crossOiTab .coi-tabelle td:last-child { padding-right: var(--space-4); }

#crossOiTab .coi-tabelle thead th {
  height: 44px;
  background: var(--surface-2);
  text-align: left;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

#crossOiTab .coi-tabelle thead th:not(:first-child),
#crossOiTab .coi-zeile > td:not(:first-child) { text-align: center; }
/* Sortierköpfe (23.09.2026): die ganze Beschriftung ist Knopf und
   Tooltip-Auslöser (Hover zeigt, Klick sortiert). Der Pfeil hat immer seinen
   Platz, damit die Spalte beim Umschalten nicht springt; mittige Köpfe
   gleichen ihn links aus, damit die Beschriftung über den Werten steht. */
#crossOiTab .coi-sortkopf {
  --coi-pfeil: 14px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast);
}
#crossOiTab .coi-tabelle thead th:not(:first-child) .coi-sortkopf { padding-left: var(--coi-pfeil); }
#crossOiTab .coi-sortkopf:hover,
#crossOiTab .coi-sortkopf.is-aktiv { color: var(--text-1); }
#crossOiTab .coi-sortkopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#crossOiTab .coi-sortpfeil { display: inline-block; width: var(--coi-pfeil, 14px); padding-left: 3px; box-sizing: border-box; text-align: left; color: var(--text-2); }

#crossOiTab .coi-zeile td { height: 60px; border-top: 1px solid var(--border-1); }
#crossOiTab .coi-zeile { cursor: pointer; transition: background var(--t-fast); }
#crossOiTab .coi-zeile:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
#crossOiTab .coi-zeile.is-offen { background: var(--surface-2); }

#crossOiTab .coi-meldung {
  height: 60px;
  padding: 0 var(--space-5);
  border-top: 1px solid var(--border-1);
  color: var(--text-2);
}

/* Paar */
#crossOiTab .coi-paar-inhalt { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
#crossOiTab .coi-kreise { display: inline-flex; flex: none; }
#crossOiTab .coi-kreise .coi-kreis + .coi-kreis { margin-left: -7px; }
#crossOiTab .asset-token-mark.coi-kreis {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--surface-1);
}
#crossOiTab .asset-token-mark.coi-kreis.fallback {
  color: var(--text-2);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
#crossOiTab .coi-zeile.is-offen .coi-kreis { box-shadow: 0 0 0 2px var(--surface-2); }
#crossOiTab .coi-namen { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#crossOiTab .coi-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
#crossOiTab .coi-asset { flex: none; cursor: pointer; }
#crossOiTab .coi-asset:hover { text-decoration: underline; text-underline-offset: 3px; }
#crossOiTab .coi-pfeil { color: var(--text-3); font-weight: var(--fw-medium); margin: 0 2px; }

#crossOiTab .coi-apr { font-size: 18px; font-weight: var(--fw-bold); white-space: nowrap; }

#crossOiTab .coi-stapel { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
#crossOiTab .coi-einstieg { font-size: var(--fs-15); white-space: nowrap; }
#crossOiTab .coi-quelle { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
#crossOiTab .indicative-spread-cost { color: inherit; }
#crossOiTab .coi-tilde { margin-right: 4px; color: var(--text-1); font-weight: var(--fw-semibold); }

#crossOiTab .coi-korr { font-size: var(--fs-15); }

#crossOiTab .coi-stab { display: flex; align-items: center; gap: 10px; }
#crossOiTab .coi-balken { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
#crossOiTab .coi-balken-fuell { display: block; height: 100%; border-radius: var(--radius-pill); }
#crossOiTab .coi-stab-zahl { width: 28px; text-align: right; font-size: var(--fs-15); }

#crossOiTab .coi-vol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  white-space: nowrap;
}
#crossOiTab .coi-vpunkt { width: 6px; height: 6px; border-radius: 50%; }

#crossOiTab .coi-beine { display: flex; align-items: center; justify-content: center; gap: 6px; }
#crossOiTab .coi-bein-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}
#crossOiTab .coi-dir { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--text-3); letter-spacing: .02em; }
#crossOiTab .coi-dir-s { margin-left: 3px; }

#crossOiTab .coi-logo { display: inline-flex; flex: none; border-radius: 4px; }
#crossOiTab .coi-logo .ex-icon { display: block; margin: 0; border-radius: 4px; }
/* Ohne Strichellinie (16.10.2026, Nutzer); RFQ/kein Buch steht im Tooltip der Beine. */
#crossOiTab .coi-logo-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 9px;
  font-weight: var(--fw-bold);
}

#crossOiTab .coi-eng { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--fs-15); white-space: nowrap; }

#crossOiTab .coi-auf-zelle { text-align: center; }
#crossOiTab .coi-auf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
#crossOiTab .coi-auf .coi-chevron { color: currentColor; margin: -4px 0 0; }
#crossOiTab .coi-auf:hover { color: var(--text-1); background: var(--surface-3); }
#crossOiTab .coi-auf:focus-visible { outline: none; box-shadow: var(--focus-ring); color: var(--text-1); }
#crossOiTab .coi-auf[aria-expanded="true"] .coi-chevron { transform: rotate(225deg); margin-top: 4px; }

/* Tooltip-Anker in Zellen: keine Unterstreichung, der Wert ist der Auslöser. */
#crossOiTab .coi-tabelle .value-tip { text-decoration: none; }
#crossOiTab .coi-tabelle .value-tip:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 4px; }

/* Das Auge hinter jedem Asset: erst beim Überfahren der Zeile sichtbar. */
#crossOiTab .hedged-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
#crossOiTab .coi-zeile:hover .hedged-eye-btn,
#crossOiTab .coi-zeile.is-offen .hedged-eye-btn,
#crossOiTab .hedged-eye-btn:focus-visible { opacity: 1; }
@media (hover: none) { #crossOiTab .hedged-eye-btn { opacity: .6; } }
#crossOiTab .hedged-eye-btn:hover { color: var(--text-1); background: var(--surface-3); }
#crossOiTab .hedged-eye-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Auge als Maske: Farbe über `currentColor`, durchgestrichen im ausgeblendeten
   Zustand. Siehe hedgedEyeIconHtml. */
#crossOiTab .hedged-eye-glyph {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

#crossOiTab .hedged-eye-glyph.is-hidden {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* ── Aufgeklapptes Detail ─────────────────────────────────────────── */

#crossOiTab .coi-detail-zeile > td {
  padding: var(--space-4) var(--space-5) var(--space-5) 56px;
  background: color-mix(in srgb, var(--surface-0) 60%, var(--surface-1));
  border-top: 1px solid var(--border-2);
  cursor: default;
}

#crossOiTab .coi-detail { display: flex; flex-direction: column; gap: var(--space-3); }
#crossOiTab .coi-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

#crossOiTab .coi-bein-karte {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#crossOiTab .coi-karte-kopf { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 var(--space-4); }
#crossOiTab .coi-karte-kopf .coi-kreis { box-shadow: none; }
#crossOiTab .coi-karte-asset { font-weight: var(--fw-bold); font-size: var(--fs-15); cursor: pointer; }
#crossOiTab .coi-karte-kopf .coi-leise { font-size: var(--fs-12); }
#crossOiTab .coi-karte-netto { margin-left: auto; font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; }
#crossOiTab .coi-karte-netto b { font-size: var(--fs-15); font-weight: var(--fw-bold); margin-left: 4px; }

#crossOiTab .coi-lrow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 100px 110px 80px;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 44px;
  padding: 4px var(--space-4);
  box-sizing: border-box;
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-14);
}
#crossOiTab .coi-lrow-kopf { min-height: 32px; background: var(--surface-2); }
#crossOiTab .coi-lrow > .coi-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }

#crossOiTab .coi-richtung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
}

#crossOiTab .coi-lrow-boerse { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--fw-semibold); }
#crossOiTab .coi-lrow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#crossOiTab .coi-lrow-boerse .analysis-only-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px dashed var(--text-3);
}
#crossOiTab .coi-grenze { font-size: var(--fs-12); color: var(--text-3); font-weight: var(--fw-regular); }

#crossOiTab .coi-karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  min-height: 40px;
  padding: 6px var(--space-4);
  box-sizing: border-box;
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-13);
  color: var(--text-2);
}
#crossOiTab .coi-karte-einstieg { color: var(--text-1); font-size: var(--fs-14); margin-left: 4px; }

#crossOiTab .coi-rechnung {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) 14px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  font-size: var(--fs-14);
  color: var(--text-2);
}
#crossOiTab .coi-rechnung b { font-weight: var(--fw-semibold); }
#crossOiTab .coi-op { color: var(--text-3); font-size: 16px; font-weight: var(--fw-medium); }
#crossOiTab .coi-rechnung-ergebnis { display: inline-flex; align-items: baseline; gap: var(--space-2); }
#crossOiTab .coi-rechnung-ergebnis b { font-size: 18px; font-weight: var(--fw-bold); }
#crossOiTab .coi-rechnung-rechts { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Verlauf der Fundings (historyDetail.js), zugeklappt unter der Rechnung. */
#crossOiTab .coi-verlauf-klappe > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
  color: var(--text-2);
  font-size: var(--fs-13);
  cursor: pointer;
  list-style: none;
}
#crossOiTab .coi-verlauf-klappe > summary::-webkit-details-marker { display: none; }
#crossOiTab .coi-verlauf-klappe > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-fast);
}
#crossOiTab .coi-verlauf-klappe[open] > summary::before { transform: rotate(45deg); }
#crossOiTab .coi-verlauf-klappe > summary:hover { color: var(--text-1); }
#crossOiTab .coi-verlauf-klappe > summary:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 4px; }
#crossOiTab .coi-verlauf-klappe[open] > .coi-verlauf { margin-top: var(--space-3); }
#crossOiTab .coi-verlauf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
#crossOiTab .coi-verlauf .history-detail-empty { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-13); }
#crossOiTab .coi-verlauf .hedged-detail-section {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

/* ── Fuß mit Blättern ─────────────────────────────────────────────── */

#crossOiTab .coi-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-13);
  color: var(--text-2);
}
#crossOiTab .coi-fuss-knoepfe { display: flex; gap: var(--space-2); }

@media (max-width: 720px) {
  #crossOiTab .coi-filter { padding: var(--space-3); gap: var(--space-3); }
  #crossOiTab .coi-abschnitt { margin-left: 0; }
  #crossOiTab .coi-abschnitt::before { content: none; }
  /* Eigene Zeile über die volle Breite, „Ausgeblendet" ganz rechts: So bleibt
     das rechts verankerte Panel im Bild (links verankert lief es bei 390 px
     gut 110 px über den Rand, gemessen 22.09.2026). */
  #crossOiTab .coi-filter:not(.filter-mehr-zeile) .coi-filter-rechts { margin-left: 0; width: 100%; }
  #crossOiTab .coi-filter-rechts .hedged-blacklist-dropdown { margin-left: auto; }
  /* Mit „Mehr“ (13.10.2026): Stand/Anzahl und Knopf teilen sich die Reihe. */
  #crossOiTab .coi-filter.filter-mehr-zeile .coi-filter-rechts { margin-left: auto; }
  #crossOiTab .coi-filter-rechts .fr-blacklist-panel { right: 0; left: auto; }
  #crossOiTab .coi-fuss { padding: var(--space-3) var(--space-4); }
  #crossOiTab .coi-detail-zeile > td { padding-left: var(--space-5); }
}