/* FR Vergleich — Neuaufbau nach dem freigegebenen Entwurf (22.09.2026).
   Filterzeile, darunter der Funding-Vergleich und die Markt-Matrix (seit
   23.09.2026 in dieser Reihenfolge).
   Alles ist auf #frCompareView begrenzt: `fr-blacklist-*`, `hedged-more-*`
   und `.bl-*` teilen sich andere Reiter. Farben nur über die
   Katalog-Tokens aus design-tokens.css; Grün und Rot nur für Werte. */

#frCompareView {
  --frv-hoch: var(--check);
  --frv-tief: color-mix(in srgb, var(--danger) 62%, var(--text-1));
  --frv-mittel: var(--text-warning);
  /* Heatmap der Sätze (23.09.2026): positiv grün, negativ rot, Deckkraft
     steigt mit dem Betrag. Stufen aus frCompareHeatClass (frCompareTab.js):
     ab 1 / 5 / 10 / 20 / 30 / 45 % APR. */
  --frv-heat-pos: var(--success);
  --frv-heat-neg: var(--danger);
  color: var(--text-1);
  font-family: var(--font-sans);
  min-width: 0;
}
/* Hell (Light Mode, 01.10.2026): Heatmap nur gut halb so kräftig, sonst
   verlieren grüne/rote Zahlen auf den satten Stufen den Kontrast. */
html[data-theme="light"] #frCompareView {
  --frv-hoch: #036446;          /* 4,5:1 auch auf der roten Stufe (#f9dcdc) */
  --frv-heat-pos: color-mix(in srgb, var(--success) 55%, transparent);
  --frv-heat-neg: color-mix(in srgb, var(--danger) 55%, transparent);
}

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

#frCompareView .frv-leise { color: var(--text-3); font-size: var(--fs-13); font-weight: var(--fw-medium); }

#frCompareView .frv-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;
  line-height: 16px;
}

#frCompareView button { font-family: var(--font-sans); letter-spacing: var(--tracking-normal); text-transform: none; }
#frCompareView button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

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

#frCompareView .frv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--space-7);
  min-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-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
#frCompareView .frv-pill:hover:not(:disabled) { border-color: var(--border-3); background: var(--surface-3); }
#frCompareView .frv-pill:disabled { opacity: .45; cursor: default; }
#frCompareView .frv-pill[hidden] { display: none; }
#frCompareView .frv-pill-klein { height: 26px; min-height: 26px; padding: 0 10px; color: var(--text-2); font-size: var(--fs-12); }

#frCompareView .frv-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);
}
#frCompareView [aria-expanded="true"] > .frv-chevron { transform: rotate(225deg); margin-top: 3px; }

#frCompareView .frv-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-3);
  font-size: var(--fs-14);
}
#frCompareView .frv-feld:focus-within { border-color: var(--border-3); box-shadow: var(--focus-ring); }
#frCompareView .frv-feld input {
  all: unset;
  min-width: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
#frCompareView .frv-feld input::placeholder { color: var(--input-placeholder); }
#frCompareView .frv-feld-suche { width: 200px; }
#frCompareView .frv-feld-suche input { flex: 1; }
#frCompareView .frv-feld-oi { width: 112px; }
#frCompareView .frv-feld-oi input { width: 100%; text-align: right; }
#frCompareView .frv-feld input[aria-invalid="true"] { color: var(--text-danger); }
#frCompareView .frv-feld:has(input[aria-invalid="true"]) { border-color: var(--danger); }
#frCompareView .frv-einheit { color: var(--text-3); }

#frCompareView .frv-stepper { gap: var(--space-2); padding: 0 var(--space-3) 0 3px; }
#frCompareView .frv-step {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#frCompareView .frv-step:hover { background: var(--surface-3); color: var(--text-1); }
#frCompareView .frv-stepper input {
  width: 2.2ch;
  text-align: center;
  font-weight: var(--fw-semibold);
  -moz-appearance: textfield;
  appearance: textfield;
}
#frCompareView .frv-stepper input::-webkit-outer-spin-button,
#frCompareView .frv-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#frCompareView .frv-stepper-text { color: var(--text-2); font-size: var(--fs-13); font-weight: var(--fw-semibold); }

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

/* Wie Cross OI: Beschriftung klein über dem Feld, alle Felder an einer
   Unterkante; „Was zeigt dieser Vergleich?" vorn, rechts Datenstand und
   Ausblenden-Liste. */
#frCompareView .frv-filter {
  position: relative;
  z-index: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

#frCompareView .frv-feldgruppe {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

#frCompareView .frv-hilfe {
  display: inline-flex;
  align-items: center;
  height: var(--space-7);
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
}

#frCompareView .frv-filter-rechts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-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. Knopf = frv-pill hinter dem Datenstand (der
   trägt das margin-left: auto); im Menü je Feld eine Reihe, Beschriftung
   links, Feld rechts, wie in Top Spreads. */
#frCompareView .frv-filter > .filter-mehr { margin-left: 0; }
#frCompareView .filter-mehr-knopf { padding: 0 var(--space-2) 0 var(--space-3); }
#frCompareView .filter-mehr-menue > .frv-feldgruppe {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
#frCompareView .filter-mehr-menue > :is(.frv-boersen, .fr-blacklist-dropdown) > button { width: 100%; justify-content: space-between; }
#frCompareView .filter-mehr-menue :is(.hedged-more-panel, .fr-blacklist-panel) { left: auto; right: 0; }
#frCompareView .filter-mehr-menue .frv-auswahl-panel { left: auto; right: 0; }

#frCompareView .frv-zaehler {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* Ausblenden-Pill: ohne die Lupe aus style.css, Breite nach Inhalt. */
#frCompareView .frv-pill.fr-blacklist-toggle {
  min-width: 0;
  width: auto;
  justify-content: flex-start;
  padding: 0 6px 0 var(--space-3);
  background-image: none;
}

/* Datenstand als kleines Kärtchen rechts in der Filterzeile (22.09.2026).
   Erscheint erst ab 10 Minuten Alter, ab 30 Minuten rot (frCompareTab.js). */
#frCompareView .fr-compare-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-7);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
#frCompareView .fr-compare-status.is-stale-cache {
  color: var(--text-warning) !important;
  border-color: color-mix(in srgb, var(--warning) 45%, transparent) !important;
  background: var(--warning-soft) !important;
}
#frCompareView .fr-compare-status.is-stale-cache::before { background: var(--warning); }
#frCompareView .fr-compare-status.is-stale-old {
  color: var(--text-danger) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent) !important;
  background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
}
#frCompareView .fr-compare-status.is-stale-old::before { background: var(--danger); }
#frCompareView .fr-compare-status.hidden { display: none; }

/* ── Dropdowns (Börsen, Ausgeblendete Märkte) ─────────────────────── */

/* Börsen: Auslöser, Panel und Liste wie im Reiter Liquidität
   (hedged-more-* aus style.css und catalog-controls.css). Hier nur der
   Pfeil im Auslöser und die Lage des Panels. */
#frCompareView .frv-boersen-pill svg { flex: 0 0 auto; color: var(--text-2); }
#frCompareView .frv-boersen .hedged-more-panel { left: 0; right: auto; }

/* Ausgeblendete Märkte. Das Panel sitzt in `.frv-filter-rechts`, dessen
   `white-space: nowrap` es erbte: der Hinweis „Keine Märkte ausgeblendet …"
   lief rechts hinaus, die Liste bekam eine waagrechte Scrollleiste
   (Screenshot des Nutzers, 23.09.2026). Panels und Listen scrollen im
   FR Vergleich in keine Richtung: Text bricht um, die Liste wächst mit
   (höchstens 8 Vorschläge, siehe frCompareTab.js), viele Ausgeblendete
   stehen zweispaltig. Reicht die Fensterhöhe trotzdem nicht, begrenzt
   panelImFenster (utils.js) das Panel. */
#frCompareView .fr-blacklist-panel {
  width: min(360px, calc(100vw - 48px));
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  white-space: normal;
  overflow-wrap: anywhere;
}
#frCompareView .fr-blacklist-panel .bl-liste { max-height: none; overflow: visible; }
#frCompareView .fr-blacklist-panel .bl-leer { white-space: normal; }
#frCompareView .fr-blacklist-panel:has(.frv-bl-zweispaltig) { width: min(480px, calc(100vw - 24px)); }
#frCompareView .bl-liste.frv-bl-zweispaltig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
#frCompareView .bl-liste.frv-bl-zweispaltig > :not(.ist-ausgeblendet) { grid-column: 1 / -1; }
#frCompareView .bl-liste.frv-bl-zweispaltig > .bl-zeile.ist-ausgeblendet { column-gap: var(--space-2); padding: 0 var(--space-3); }
#frCompareView .fr-blacklist-search {
  width: 100%;
  height: var(--space-7);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font: var(--fw-medium) var(--fs-14) / var(--lh-normal) var(--font-sans);
  outline: none;
}
#frCompareView .fr-blacklist-search::placeholder { color: var(--input-placeholder); }
#frCompareView .fr-blacklist-search:focus { border-color: var(--border-3); box-shadow: var(--input-focus-ring); }

/* ── Karten und Tabellen ──────────────────────────────────────────── */

#frCompareView .frv-karte {
  /* Nach dem Klick in der Matrix scrollt die Seite zum Funding-Vergleich —
     sein Kopf soll dann unter der festen Reiterleiste stehen. */
  scroll-margin-top: 72px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

#frCompareView .frv-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  box-sizing: border-box;
}
#frCompareView .frv-kopf-links { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-width: 0; }
#frCompareView .frv-titel { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-1); }
#frCompareView .frv-detail-marke:empty { display: none; }
#frCompareView .frv-leise[hidden] { display: none; }

#frCompareView .frv-kpis { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--fs-13); color: var(--text-2); }
#frCompareView .frv-kpis:empty { display: none; }
#frCompareView .frv-kpi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#frCompareView .frv-kpi-wert { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-1); font-variant-numeric: tabular-nums; }
#frCompareView .frv-kpi-wert.is-hoch { color: var(--frv-hoch); }
#frCompareView .frv-kpi-wert.is-tief { color: var(--frv-tief); }
#frCompareView .frv-kpi-boerse { display: inline-flex; align-items: center; color: var(--text-2); }

/* Schmaler als die Tabelle: sie scrollt in ihrer Hülle, die Seite nicht.
   `position: relative` hält absolut gesetzte Kinder in der Hülle. */
#frCompareView .frv-huelle {
  position: relative;
  overflow-x: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#frCompareView .frv-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-14);
}
#frCompareView .frv-tabelle th,
#frCompareView .frv-tabelle td {
  padding: 0 var(--space-2);
  border: 0;
  vertical-align: middle;
  background: none;
}
#frCompareView .frv-tabelle th:first-child,
#frCompareView .frv-tabelle td:first-child { padding-left: var(--space-4); }
#frCompareView .frv-tabelle th:last-child,
#frCompareView .frv-tabelle td:last-child { padding-right: var(--space-5); }

#frCompareView .frv-tabelle thead th {
  height: 44px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
#frCompareView .frv-tabelle thead th.frv-col-markt,
#frCompareView .frv-tabelle thead th.frv-col-boerse { text-align: left; }
#frCompareView .frv-tabelle thead .help-label { text-transform: uppercase; }

/* Sortierköpfe: ganze Beschriftung ist Knopf und Tooltip-Auslöser. */
#frCompareView .fr-sort-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
#frCompareView .fr-sort-head > span:not(.frv-sortpfeil) { overflow: hidden; text-overflow: ellipsis; }
#frCompareView .fr-sort-head .ex-icon { margin-right: 0; }
#frCompareView .fr-sort-head:hover,
#frCompareView .fr-sort-head.active { color: var(--text-1); }
#frCompareView .frv-col-markt .fr-sort-head,
#frCompareView .frv-col-boerse .fr-sort-head { justify-content: flex-start; padding-left: 0; }
/* Börsenköpfe der Matrix: oben Logo und Sortierpfeil, darunter der
   (gekürzte) Name in 12 px ohne Sperrung. Voller Name im Tooltip. */
#frCompareView .frv-matrix thead th { height: 56px; padding: 0 2px; }
#frCompareView .fr-matrix-sort-head { flex-direction: column; gap: 3px; width: 100%; height: auto; padding: 4px 0; letter-spacing: 0; }
#frCompareView .frv-kopf-zeile { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 18px; }
#frCompareView .frv-kopf-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-12);
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#frCompareView .frv-sortpfeil { color: var(--text-2); }
#frCompareView .frv-sortpfeil:empty { display: none; }

#frCompareView .frv-zeile td { height: 52px; border-top: 1px solid var(--border-1); text-align: center; }
#frCompareView .frv-matrix .frv-zeile td { height: 56px; }
#frCompareView .frv-zeile.ist-waehlbar { cursor: pointer; }
#frCompareView .frv-zeile:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
#frCompareView .frv-zeile:focus-visible { outline: none; }
#frCompareView .frv-zeile:focus-visible td { background: var(--surface-2); }
#frCompareView .frv-zeile.is-aktiv td { background: var(--surface-2); }
#frCompareView .frv-zeile.is-aktiv td:first-child { box-shadow: inset 2px 0 0 var(--text-1); }
#frCompareView .frv-zeile.blacklisted-search-hit td { opacity: .6; }
#frCompareView .fr-empty-cell { height: 56px; padding: 0 var(--space-5); border-top: 1px solid var(--border-1); color: var(--text-2); font-size: var(--fs-14); text-align: left; }

/* Auge */
#frCompareView .frv-col-auge { width: 48px; }
#frCompareView .frv-auge-zelle { text-align: left !important; }
#frCompareView .fr-eye-button.frv-auge {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
#frCompareView .fr-eye-button.frv-auge:hover { background: var(--surface-3); color: var(--text-1); }
#frCompareView .fr-eye-glyph { display: inline-flex; color: inherit; }
#frCompareView .fr-eye-glyph-hidden { color: var(--check); }

/* Markt */
#frCompareView .frv-col-markt { width: 190px; }
#frCompareView .frv-markt-zelle { text-align: left !important; overflow: hidden; }
#frCompareView .frv-markt { display: flex; align-items: center; gap: 10px; min-width: 0; }
#frCompareView .frv-namen { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#frCompareView .frv-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
#frCompareView .frv-name:hover { text-decoration: underline; text-underline-offset: 3px; }
#frCompareView .frv-anzahl { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
#frCompareView .asset-token-mark.frv-kreis {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
}
#frCompareView .asset-token-mark.frv-kreis.fallback { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
#frCompareView .frv-detail-marke .asset-token-mark.frv-kreis { display: inline-flex; }

/* Matrix, gestaucht (23.09.2026): 16 Börsen passen bei 1440 px ohne
   waagrechtes Scrollen. Auge 40 px, Markt 136 px, je Börse der Rest (bei
   1440 px rund 75 px); die Mindestbreite setzt frCompareTab.js (68 px je
   Börse). Schmaler scrollt die Tabelle in ihrer Hülle, Auge und Markt
   bleiben dabei stehen. */
#frCompareView .frv-matrix .frv-col-auge { width: 40px; }
#frCompareView .frv-matrix .frv-col-markt { width: 136px; }
#frCompareView .frv-matrix th:first-child,
#frCompareView .frv-matrix td:first-child { padding-left: var(--space-2); padding-right: 0; }
#frCompareView .frv-matrix th:last-child,
#frCompareView .frv-matrix td:last-child { padding-right: var(--space-2); }
#frCompareView .frv-matrix .frv-matrix-zelle { padding: 0 2px; }
#frCompareView .frv-matrix .frv-markt-zelle { padding: 0 var(--space-1) 0 var(--space-2); }
#frCompareView .frv-matrix .frv-markt { gap: var(--space-2); }
#frCompareView .frv-matrix .frv-name { font-size: var(--fs-14); }
#frCompareView .frv-matrix .frv-col-auge,
#frCompareView .frv-matrix .frv-auge-zelle { position: sticky; left: 0; z-index: 1; background: var(--surface-1); }
#frCompareView .frv-matrix .frv-col-markt,
#frCompareView .frv-matrix .frv-markt-zelle { position: sticky; left: 40px; z-index: 1; background: var(--surface-1); }
#frCompareView .frv-matrix thead .frv-col-auge,
#frCompareView .frv-matrix thead .frv-col-markt { background: var(--surface-2); z-index: 2; }
#frCompareView .frv-matrix .frv-zeile:hover .frv-auge-zelle,
#frCompareView .frv-matrix .frv-zeile:hover .frv-markt-zelle { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface-1)); }
#frCompareView .frv-matrix .frv-zeile.is-aktiv .frv-auge-zelle,
#frCompareView .frv-matrix .frv-zeile.is-aktiv .frv-markt-zelle,
#frCompareView .frv-matrix .frv-zeile:focus-visible .frv-auge-zelle,
#frCompareView .frv-matrix .frv-zeile:focus-visible .frv-markt-zelle { background: var(--surface-2); }

#frCompareView .frv-zelle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 76px;
  height: 30px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Höchster/niedrigster Satz der Zeile: Rahmen und fette Schrift über der
   Heatmap-Fläche (die Fläche selbst sagt nur Vorzeichen und Stärke). */
#frCompareView .frv-zelle.is-hoch {
  box-shadow: inset 0 0 0 1.5px var(--frv-hoch);
  color: var(--frv-hoch);
  font-weight: var(--fw-bold);
}
#frCompareView .frv-zelle.is-tief {
  box-shadow: inset 0 0 0 1.5px var(--frv-tief);
  color: var(--frv-tief);
  font-weight: var(--fw-bold);
}
#frCompareView .frv-zelle.is-leer { color: var(--text-3); opacity: .7; }
/* Hell: ohne Abdimmen, sonst nur 3:1 (Light Mode, 01.10.2026). */
html[data-theme="light"] #frCompareView .frv-zelle.is-leer { opacity: 1; }

/* Heatmap: sechs sanfte Stufen je Richtung, Schrift bleibt hell. */
#frCompareView :is(.frv-zelle, .frv-wert-chip)[class*="frv-heat-"] { color: var(--text-1); }
#frCompareView .frv-zelle.is-hoch[class*="frv-heat-"] { color: var(--frv-hoch); }
#frCompareView .frv-zelle.is-tief[class*="frv-heat-"] { color: var(--frv-tief); }
#frCompareView .frv-heat-p1 { background: color-mix(in srgb, var(--frv-heat-pos) 7%, transparent); }
#frCompareView .frv-heat-p2 { background: color-mix(in srgb, var(--frv-heat-pos) 12%, transparent); }
#frCompareView .frv-heat-p3 { background: color-mix(in srgb, var(--frv-heat-pos) 17%, transparent); }
#frCompareView .frv-heat-p4 { background: color-mix(in srgb, var(--frv-heat-pos) 23%, transparent); }
#frCompareView .frv-heat-p5 { background: color-mix(in srgb, var(--frv-heat-pos) 29%, transparent); }
#frCompareView .frv-heat-p6 { background: color-mix(in srgb, var(--frv-heat-pos) 36%, transparent); }
#frCompareView .frv-heat-n1 { background: color-mix(in srgb, var(--frv-heat-neg) 7%, transparent); }
#frCompareView .frv-heat-n2 { background: color-mix(in srgb, var(--frv-heat-neg) 12%, transparent); }
#frCompareView .frv-heat-n3 { background: color-mix(in srgb, var(--frv-heat-neg) 17%, transparent); }
#frCompareView .frv-heat-n4 { background: color-mix(in srgb, var(--frv-heat-neg) 23%, transparent); }
#frCompareView .frv-heat-n5 { background: color-mix(in srgb, var(--frv-heat-neg) 29%, transparent); }
#frCompareView .frv-heat-n6 { background: color-mix(in srgb, var(--frv-heat-neg) 36%, transparent); }

/* Funding-Vergleich */
#frCompareView .frv-detail { min-width: 1174px; }
#frCompareView .frv-detail:has(.frv-col-markt) { min-width: 1364px; }
#frCompareView .frv-col-apr { width: 100px; }
#frCompareView .frv-col-boerse { width: 190px; }
#frCompareView .frv-col-oi { width: 130px; }
#frCompareView .frv-col-live { width: 130px; }
#frCompareView .frv-col-stab { width: 180px; }
#frCompareView .frv-col-funding { width: 150px; }
#frCompareView .frv-boerse-zelle { text-align: left !important; overflow: hidden; }
#frCompareView .frv-boerse { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); }
#frCompareView .frv-boerse .ex-icon { margin-right: 0; border-radius: 4px; }
#frCompareView .frv-boerse-name { display: flex; flex-direction: column; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#frCompareView .frv-kontrakt { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); }
#frCompareView .frv-oi { color: var(--text-2); font-size: var(--fs-14); font-variant-numeric: tabular-nums; white-space: nowrap; }
#frCompareView .frv-wert { color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
#frCompareView .frv-wert.frv-live { color: var(--text-1); font-size: var(--fs-17); font-weight: var(--fw-bold); }
/* Wert als Kärtchen: trägt die Heatmap-Fläche (siehe oben). */
#frCompareView .frv-wert-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 28px;
  padding: 0 var(--space-2);
  box-sizing: border-box;
  border-radius: var(--radius-md);
}
#frCompareView .frv-wert.frv-live .frv-wert-chip { min-width: 92px; height: 32px; }
#frCompareView .frv-wert.is-hoch .frv-wert-chip[class*="frv-heat-"] { color: var(--frv-hoch); }
#frCompareView .frv-wert.is-tief .frv-wert-chip[class*="frv-heat-"] { color: var(--frv-tief); }
#frCompareView .frv-wert.is-hoch { color: var(--frv-hoch); font-weight: var(--fw-bold); }
#frCompareView .frv-wert.is-tief { color: var(--frv-tief); font-weight: var(--fw-bold); }
#frCompareView .frv-wert.is-leer { color: var(--text-3); }

#frCompareView .frv-stab { display: flex; align-items: center; gap: 10px; }
#frCompareView .frv-balken { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
#frCompareView .frv-balken-fuell { display: block; height: 100%; border-radius: var(--radius-pill); }
#frCompareView .frv-bg-gut { background: var(--frv-hoch); }
#frCompareView .frv-bg-mittel { background: var(--frv-mittel); }
#frCompareView .frv-bg-schwach { background: var(--frv-tief); }
#frCompareView .frv-stab-zahl { min-width: 28px; margin-left: auto; text-align: right; font-size: var(--fs-14); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; color: var(--text-3); }
#frCompareView .frv-stab-zahl.frv-gut { color: var(--frv-hoch); }
#frCompareView .frv-stab-zahl.frv-mittel { color: var(--frv-mittel); }
#frCompareView .frv-stab-zahl.frv-schwach { color: var(--frv-tief); }

#frCompareView .frv-funding { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }
#frCompareView .frv-takt {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}
#frCompareView .frv-naechste { color: var(--text-1); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
/* Aus dem Takt gerechnet (kein Termin der Börse): „≈" davor, leiser (23.09.2026). */
#frCompareView .frv-naechste.ist-geschaetzt { color: var(--text-2); }

/* Fußzeile mit Blättern */
#frCompareView .frv-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-1);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}
#frCompareView .frv-fuss-knoepfe { display: inline-flex; gap: var(--space-2); }

/* ── Funding-Verlauf je Zeile (23.09.2026) ─────────────────────────
   Pfeil ganz rechts wie in Top Spreads; darunter die aufgeklappte Zeile.
   Der Chart ist so breit wie die Hülle der Tabelle und klebt links: Am Handy
   scrollt die Tabelle waagrecht, der Chart nie. */
#frCompareView .frv-col-auf { width: 44px; }
#frCompareView .frv-auf-zelle { padding: 0 var(--space-2) 0 0 !important; text-align: center; }
#frCompareView .frv-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;
}
#frCompareView .frv-auf .frv-chevron { margin: -4px 0 0; color: currentColor; }
#frCompareView .frv-auf:hover { background: var(--surface-3); color: var(--text-1); }
#frCompareView .frv-auf[aria-expanded="true"] { color: var(--text-1); }
#frCompareView .frv-auf[aria-expanded="true"] > .frv-chevron { margin-top: 4px; }
#frCompareView .frv-zeile.is-offen td { background: var(--surface-2); }

#frCompareView .frv-chart-zeile > td {
  padding: 0 !important;
  border-top: 1px solid var(--border-2);
  background: color-mix(in srgb, var(--surface-0) 60%, var(--surface-1));
  text-align: left;
  cursor: default;
}
/* Aufgeklappter Verlauf: derselbe Chart wie im Reiter Fundingrates
   (chart.js-Instanz). Achsen, Linie, Tooltip, Zeitleiste und Kopfzeile
   kommen aus fundingrates.css (:is(#fundingratesTab, .frv-chart) …); hier
   nur die Karte, die Höhe und die Teile, die es nur hier gibt. */
#frCompareView .frv-chart {
  position: sticky;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--space-4) var(--space-5);
  overflow: hidden;
  color: var(--text-1);
  font-family: var(--font-sans);
  white-space: normal;
}
#frCompareView .frv-chart .chart-container { flex: 0 0 auto; height: 300px; }
#frCompareView .frv-chart.ist-ohne-daten .chart-nav { visibility: hidden; }
#frCompareView .frv-chart-titel { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
#frCompareView .frv-chart-trenner { color: var(--text-3); }
#frCompareView .frv-chart-boerse { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
#frCompareView .frv-chart-boerse .ex-icon { margin-right: 0; }
#frCompareView .frv-chart-kontrakt { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); }
#frCompareView .frv-chart-tage-gruppe { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--surface-1); }
#frCompareView .frv-chart-tage {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
#frCompareView .frv-chart-tage:hover { color: var(--text-1); }
#frCompareView .frv-chart-tage[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); }
#frCompareView .frv-chart-link svg { flex: 0 0 auto; }
/* Ladezustand und Fehler: die Fläche behält die Charthöhe. */
#frCompareView .frv-chart-flaeche:has(> .frv-skel-chart),
#frCompareView .frv-chart-flaeche:has(> .frv-chart-leer) { padding: 0; }
#frCompareView .frv-chart-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  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;
}
#frCompareView .frv-skel.frv-skel-chart { display: block; width: 100%; height: 100%; border-radius: var(--radius-md); }
#frCompareView .frv-chart-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); color: var(--text-3); font-size: var(--fs-12); }
#frCompareView .frv-chart-hinweis { color: var(--text-warning); }

/* ── Ladezustand (Designkatalog Skeleton/standard, 23.09.2026) ────────
   Erstladen: Skeleton-Zeilen (frCompareTab.js appendFrCompareSkeletonRows,
   renderFrExchangeMatrixSkeleton) in der Höhe der echten Zeilen — die
   Zeilenhöhe setzt `.frv-zeile td`. Grund `--surface-2`, Schimmer 1,6 s.
   Nachladen: alter Stand abgedimmt, oben in der Karte ein schmaler
   Ladebalken (absolut, kein Layoutsprung). Reiterintern gekapselt
   (frv-skel-*, is-nachladen), damit eine gemeinsame Hilfe es später
   ersetzen kann. */
#frCompareView .frv-skel {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 60px;
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  vertical-align: middle;
}
#frCompareView .frv-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text-1) 5%, transparent) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: frv-skel-schimmer 1.6s linear infinite;
}
#frCompareView .frv-skel-kreis { border-radius: 50%; }
#frCompareView .frv-skel-logo { border-radius: 4px; }
#frCompareView .frv-skel-chip { border-radius: var(--radius-md); }
#frCompareView .frv-skel-pill,
#frCompareView .frv-skel-balken { border-radius: var(--radius-pill); }
#frCompareView .frv-skel-gruppe { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
#frCompareView :is(.frv-auge-zelle, .frv-markt-zelle, .frv-boerse-zelle) > .frv-skel-gruppe { justify-content: flex-start; }
#frCompareView .frv-stab-zelle > .frv-skel-gruppe { display: flex; }
#frCompareView .frv-stab-zelle .frv-skel-balken { flex: 1 1 auto; min-width: 0; }
#frCompareView .frv-skel-namen { display: inline-flex; flex-direction: column; gap: 6px; }
#frCompareView .frv-skel-kopf { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; }
#frCompareView .frv-matrix .frv-skel-chip { max-width: 100%; }
/* Zusammenfassung im Kopf der Matrix: so breit wie ihr Text am Desktop
   (eine Zeile), am Handy zwei Zeilen wie der umbrechende Text. */
#frCompareView .frv-leise:has(> .frv-skel-summe) { display: inline-block; max-width: 100%; }
#frCompareView .frv-skel-summe { display: inline-flex; flex-direction: column; width: 420px; max-width: 100%; vertical-align: middle; }
#frCompareView .frv-skel-summe > .frv-skel { width: 100%; height: 12px; margin: 3px 0; }
#frCompareView .frv-skel-summe > .frv-skel + .frv-skel { display: none; width: 55%; }
#frCompareView .frv-skel-zeile,
#frCompareView .frv-skel-zeile:hover td { cursor: default; background: none; }
@keyframes frv-skel-schimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

#frCompareView .frv-karte { position: relative; }
#frCompareView .frv-karte .frv-huelle { transition: opacity var(--t-base); }
#frCompareView .frv-karte.is-nachladen .frv-huelle { opacity: .5; }
#frCompareView .frv-karte.is-nachladen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 30%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--text-2);
  animation: frv-ladebalken 1.2s ease-in-out infinite;
}
@keyframes frv-ladebalken {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
  #frCompareView .frv-skel::after { animation: none; }
  #frCompareView .frv-karte.is-nachladen::before { width: 100%; animation: none; opacity: .6; }
}

@media (max-width: 640px) {
  #frCompareView .frv-filter { padding: var(--space-3); }
  #frCompareView .frv-filter:not(.filter-mehr-zeile) .frv-filter-rechts { margin-left: 0; }
  #frCompareView .frv-filter-rechts { flex-wrap: wrap; white-space: normal; }
  #frCompareView .frv-feld-suche { width: 160px; }
  #frCompareView .frv-karte-kopf { padding: var(--space-2) var(--space-4); }
  /* Am Handy hängen die Panels an der Filterzeile statt am Knopf und
     nehmen deren Breite: am Knopf ragten sie rechts aus dem Bild. */
  #frCompareView .frv-filter .fr-blacklist-dropdown { position: static; }
  #frCompareView .frv-filter .fr-blacklist-panel { left: var(--space-3); right: var(--space-3); width: auto; }
  #frCompareView .frv-skel-summe > .frv-skel + .frv-skel { display: inline-block; }
  #frCompareView .frv-chart { padding: var(--space-3); }
  #frCompareView .frv-chart .chart-container { height: 240px; }
  /* Zwei Spalten mit „Wieder zeigen" passen am Handy nicht nebeneinander. */
  #frCompareView .bl-liste.frv-bl-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}

/* Mehrfachauswahl der Suche (08.10.2026): „+“ in der Suchpille (gelb, solange
   das Feld aktiv ist), daneben außerhalb des Felds die Anzahl und „ד zum
   Löschen; im Feld steht die Auswahl als Panel darunter. */
#frCompareView .frv-suche-gruppe { position: relative; }
#frCompareView .frv-feld-suche { padding-right: 3px; width: 240px; }
#frCompareView .frv-suche-plus,
#frCompareView .frv-suche-leeren {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border-2); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-1); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
/* „ד rot im Stil von „im Bau“ (Nutzer 08.10.2026). */
#frCompareView .frv-suche-leeren {
  color: var(--text-danger); background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
#frCompareView .frv-suche-leeren:hover { background: color-mix(in srgb, var(--danger) 25%, transparent); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
#frCompareView .frv-suche-leeren[hidden], #frCompareView .frv-auswahl-zahl[hidden] { display: none; }
#frCompareView .frv-suche-plus:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-3); }
#frCompareView .frv-suche-plus:disabled { opacity: .4; cursor: default; }
/* Gelb wie das Abzeichen „im Bau“, sobald man im Suchfeld ist (Nutzer 08.10.2026). */
#frCompareView .frv-feld-suche:focus-within .frv-suche-plus {
  color: var(--text-warning); background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 55%, transparent); opacity: 1;
}
#frCompareView .frv-feld-suche:focus-within .frv-suche-plus:hover:not(:disabled) {
  background: color-mix(in srgb, var(--warning) 25%, transparent); border-color: color-mix(in srgb, var(--warning) 60%, transparent);
}
#frCompareView .frv-feld-suche:focus-within .frv-suche-plus:disabled { opacity: .65; }
#frCompareView .frv-auswahl-zahl {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-1);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
#frCompareView .frv-suche-plus:focus-visible,
#frCompareView .frv-suche-leeren:focus-visible,
#frCompareView .frv-auswahl-weg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#frCompareView .frv-auswahl-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown);
  width: 300px; max-width: calc(100vw - 24px); padding: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
#frCompareView .frv-auswahl-panel[hidden] { display: none; }
#frCompareView .frv-auswahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1) var(--space-2); color: var(--text-2); font-size: var(--fs-12); }
#frCompareView .frv-auswahl-liste { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#frCompareView .frv-auswahl-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 2px 0 4px;
  border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--surface-1);
  color: var(--text-1); font-size: var(--fs-12); font-weight: var(--fw-semibold);
}
#frCompareView .frv-auswahl-chip .asset-token-mark,
#frCompareView .frv-auswahl-chip .asset-token-mark img { width: 18px; height: 18px; font-size: 9px; }
#frCompareView .frv-auswahl-weg {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-3);
  font: inherit; font-size: var(--fs-14); line-height: 1; cursor: pointer;
}
#frCompareView .frv-auswahl-weg:hover { background: var(--surface-3); color: var(--text-1); }
@media (max-width: 720px) {
  #frCompareView .frv-feld-suche { width: 200px; }
}

/* Trefferliste unter der Suche (08.10.2026): nur Assets mit Markt auf den
   gewählten Börsen; Klick oder Pfeiltasten + Enter nehmen sie auf. */
#frCompareView .frv-vorschlaege[hidden], #frCompareView .frv-auswahl-kopf[hidden], #frCompareView .frv-auswahl-liste[hidden] { display: none; }
#frCompareView .frv-vorschlaege { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-2); }
#frCompareView .frv-vorschlaege:not(:last-child) { margin-bottom: var(--space-2); border-bottom: 1px solid var(--border-1); }
#frCompareView .frv-vorschlag {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1);
  font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer;
}
#frCompareView .frv-vorschlag:hover:not(:disabled), #frCompareView .frv-vorschlag.aktiv { background: var(--surface-3); }
#frCompareView .frv-vorschlag:disabled { cursor: default; opacity: .55; }
#frCompareView .frv-vorschlag .asset-token-mark,
#frCompareView .frv-vorschlag .asset-token-mark img { width: 20px; height: 20px; font-size: 9px; }
#frCompareView .frv-vorschlag-name { font-weight: var(--fw-semibold); }
#frCompareView .frv-vorschlag-info { margin-left: auto; color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; font-variant-numeric: tabular-nums; }
#frCompareView .frv-vorschlag-leer { padding: var(--space-1) var(--space-2); color: var(--text-3); font-size: var(--fs-12); }
#frCompareView .frv-auswahl-chip.ohne-markt { opacity: .5; border-style: dashed; }