/*
 * Web3-Design (12.10.2026): das FRF im Aussehen der Web3-Universe-Plattform.
 *
 * Nur im Web3-Modus geladen (src/services/web3Shell.ts hängt die Datei an,
 * unsere index.html kennt sie nicht) und zusätzlich jede Regel an
 * html[data-frf-design="web3"] gebunden: im normalen Modus ändert sich nichts.
 * Nur Aussehen – keine Logik, keine Daten, keine Bedienwege.
 *
 * Vorbild: Web3-Repo defi-tools, app/globals.css (Tokens, dunkel #040811,
 * Akzent #9ed3ff, Geist), components/tools/v3-dex-simulator/ui.tsx (Karte mit
 * Glanz unten rechts und doppelter Innenkante, SegmentedToggle, Stepper),
 * components/ui/hint.tsx (Tooltip-Kasten #141b2b), components/admin/*View.tsx
 * (Tabellenkopf white/4, Zeilenlinien white/6). Zweites Vorbild: unser
 * Simulator im Web3-Design (style.css, Mindestschrift 12 px im Rahmen).
 *
 * Abweichungen vom Vorbild (Begründung in
 * WebApp/Tests/research/web3-platform-2026/DESIGN-FUNDINGRATES.md):
 *  - Größen in px wie im übrigen FRF, nicht in der fließenden rem-Skala der
 *    Plattform (dort 1rem = 8px bei 1920 px, darunter kleiner) – sonst fiele
 *    die Schrift im Rahmen unter 12 px (FRF-Regel).
 *  - Flächen deckend statt white/2 über dem Grund: fixierte Tabellenköpfe und
 *    -spalten müssen den Inhalt darunter verdecken.
 *
 * Aufbau: 1. Schrift  2. Tokens  3. Grundlage (Seite, Karten, Felder,
 * Tabellen, Tooltips, Ladezustand)  4. je Reiter die Besonderheiten.
 */

/* ── 1. Schrift: Geist wie die Plattform (OFL, fonts/GEIST-OFL.txt) ───── */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Tokens ──────────────────────────────────────────────────────────
   Erst die Plattform-Werte (--w3-*), dann die Katalog-/FRF-Tokens darauf
   umgelegt. Die Reiter-Stylesheets nutzen fast nur diese Tokens, darum
   trägt die Umlegung den Großteil des Umbaus. Spezifität (0,1,1) schlägt
   :root und [data-theme="dark"] aus design-tokens.css/style.css. */

html[data-frf-design="web3"] {
  color-scheme: dark;

  /* Plattform (app/globals.css). Deckende Flächen = Web3-Weiß-Stufe über #040811. */
  --w3-grund: #040811;          /* --background */
  --w3-karte: #080c15;          /* Card: white/2 über dem Grund, deckend */
  --w3-flaeche: #11141d;        /* --surface (Dialoge, Menüs, Tabellenkopf) */
  --w3-popover: #0a1120;        /* --popover */
  --w3-tip: #141b2b;            /* Hint-Kasten (components/ui/hint.tsx) */
  --w3-hover: #171b26;          /* white/8 über der Karte */
  --w3-zeile-hover: #0f131c;    /* white/3 über der Karte (Zeilen-Hover, deckend für fixierte Spalten) */
  --w3-akzent: #9ed3ff;         /* --primary, --ring, --chart-1 */
  --w3-akzent-hell: #6abef2;    /* --primary-light, --chart-2 */
  --w3-akzent-tief: #1783ff;    /* --chart-3 */
  --w3-akzent-text: #040811;    /* --primary-foreground */
  --w3-positiv: #9effa2;        /* --positive */
  --w3-negativ: #e3465b;        /* --negative, --chart-5 */
  --w3-fehler: #e84142;         /* --destructive */
  --w3-negativ-text: #ff6369;   /* Rot als Schrift (Simulator --red-soft): 4,5:1 auf dem Grund */
  --w3-warnung: #ffb224;        /* Simulator --warning */
  --w3-text: #ffffff;
  --w3-text-2: rgba(255, 255, 255, 0.6);   /* --muted-foreground */
  --w3-text-3: rgba(255, 255, 255, 0.45);  /* Beschriftungen (Plattform white/40–50) */
  --w3-rand: rgba(255, 255, 255, 0.1);     /* --border */
  --w3-rand-leise: rgba(255, 255, 255, 0.06);
  --w3-fuellung: rgba(255, 255, 255, 0.05);        /* --input, --muted */
  --w3-fuellung-stark: rgba(255, 255, 255, 0.1);   /* --accent, aktive Segmente */
  --w3-kopf: rgba(255, 255, 255, 0.04);            /* Tabellenkopf */
  --w3-akzent-hauch: rgba(158, 211, 255, 0.08);   /* Bandflächen, Zeitleisten-Fenster */
  --w3-akzent-flaeche: rgba(158, 211, 255, 0.12);  /* Kalender-Spanne, Legende */
  --w3-akzent-rand: rgba(158, 211, 255, 0.55);
  --w3-akzent-stark: rgba(158, 211, 255, 0.22);  /* Hover auf Akzentflächen */
  --w3-akzent-auswahl: rgba(158, 211, 255, 0.3);   /* Textauswahl */
  --w3-fuellung-mittel: rgba(255, 255, 255, 0.08); /* Hover auf Feldern */
  --w3-scroll: rgba(255, 255, 255, 0.14);
  --w3-scroll-hover: rgba(255, 255, 255, 0.26);
  --w3-scroll-leise: rgba(255, 255, 255, 0.16);
  --w3-text-tip: rgba(255, 255, 255, 0.8);         /* Hint-Text */
  /* Figma Cards_box: Glanz unten rechts, doppelte Innenkante. */
  --w3-glanz: radial-gradient(121.97% 89.31% at 100% 105.16%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70.54%);
  --w3-kante: inset -1px -1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 1px 0 0 rgba(255, 255, 255, 0.1);
  --w3-kante-feld: inset -1px -1px 0 0 rgba(0, 0, 0, 0.1), inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
  --w3-schatten: 0 12px 40px -9px rgba(0, 0, 0, 0.6);
  --w3-ring: 0 0 0 2px rgba(158, 211, 255, 0.5);
  --w3-radius-karte: 12px;      /* rounded-[1.5rem] bei 8px */
  --w3-radius-feld: 999px;      /* rounded-full (Felder, Segmente, Pillen) */
  --w3-radius-tip: 8px;

  /* Katalog-Tokens (design-tokens.css) */
  --surface-0: var(--w3-grund);
  --surface-1: var(--w3-karte);
  --surface-2: var(--w3-flaeche);
  --surface-3: var(--w3-hover);
  --text-1: var(--w3-text);
  --text-2: var(--w3-text-2);
  --text-3: var(--w3-text-3);
  --text-inv: var(--w3-grund);
  --border-1: var(--w3-rand-leise);
  --border-2: var(--w3-rand);
  --border-3: rgba(255, 255, 255, 0.2);
  /* „Primary“ ist im FRF der aktive Zustand (Chips, Segmente): wie das
     gewählte Segment der Plattform (white/10 + Innenkante), kein Blau. */
  --primary-bg: var(--w3-fuellung-stark);
  --primary-border: rgba(255, 255, 255, 0.14);
  --primary-text: var(--w3-text);
  --primary-hover-border: rgba(255, 255, 255, 0.24);
  --primary-glow: var(--w3-kante);
  --secondary-bg: transparent;
  --secondary-border: var(--w3-rand);
  --secondary-hover-bg: rgba(255, 255, 255, 0.08);
  --secondary-hover-border: rgba(255, 255, 255, 0.16);
  --secondary-text: var(--w3-text);
  --danger: var(--w3-negativ);
  --danger-hover: var(--w3-fehler);
  --success: var(--w3-positiv);
  --success-soft: rgba(158, 255, 162, 0.12);
  --check: var(--w3-positiv);
  --warning: var(--w3-warnung);
  --warning-soft: rgba(255, 178, 36, 0.14);
  --info: var(--w3-akzent);
  --info-soft: rgba(158, 211, 255, 0.1);
  --focus-ring: var(--w3-ring);
  --focus-color: var(--w3-akzent);
  --overlay: rgba(4, 8, 17, 0.6);
  --overlay-solid: rgba(4, 8, 17, 0.88);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: var(--w3-schatten);
  --shadow-lg: 0 24px 80px -12px rgba(0, 0, 0, 0.7);
  --input-bg: var(--w3-fuellung);
  --input-border: var(--w3-rand-leise);
  --input-placeholder: rgba(255, 255, 255, 0.4);
  --input-focus-ring: 0 0 0 3px rgba(158, 211, 255, 0.22);
  --scrollbar-thumb: var(--w3-scroll);
  --scrollbar-thumb-hover: var(--w3-scroll-hover);

  /* FRF-eigene Tokens (style.css, typografie.css) */
  --text-success: var(--w3-positiv);
  --text-warning: var(--w3-warnung);
  --text-danger: var(--w3-negativ-text);
  --c-blue: var(--w3-akzent);
  --c-green: var(--w3-positiv);
  --c-red: var(--w3-negativ-text);
  --c-yellow: var(--w3-warnung);
  --auth-surface-0: var(--w3-grund);
  --auth-surface-1: var(--w3-karte);
  --auth-surface-2: var(--w3-flaeche);
  --auth-surface-3: var(--w3-hover);
  --auth-text-1: var(--w3-text);
  --auth-text-2: var(--w3-text-2);
  --auth-text-3: var(--w3-text-3);
  --auth-border-1: var(--w3-rand-leise);
  --auth-border-2: var(--w3-rand);
  --auth-border-3: rgba(255, 255, 255, 0.2);

  /* Diagramme: Gitter/Achsen wie DepegChart (white/5, white/40), Long/Short
     in den Signalfarben. Börsenlinien behalten ihre Profilfarben (Datenpalette,
     wie die Plattform es für Protokoll-/Kettenfarben hält). */
  --chart-gitter: rgba(255, 255, 255, 0.06);
  --chart-null: rgba(255, 255, 255, 0.24);
  --chart-achse-text: rgba(255, 255, 255, 0.45);
  --chart-punkt-rand: var(--w3-grund);
  --chart-short: var(--w3-negativ);
  --chart-long: var(--w3-positiv);

  /* Schrift: Geist, Gewichte wie die Plattform (400/500 statt 450/550). */
  --frf-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: var(--frf-font);
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  /* Geist wirkt kräftiger als Ubuntu Sans: Halbfett/Fett eine Stufe leichter
     (Plattform setzt Titel und Werte in medium). */
  --fw-semibold: 500;
  --fw-bold: 600;
  /* Schrift nie unter 12 px (FRF-Regel): die 11-px-Stufe aus design-tokens.css
     steigt in allen Reitern auf 12 px (vorher je Gruppe einzeln). */
  --fs-11: var(--fs-12);

  /* Ask FRF: Akzent seitenweit (Knopf unten rechts in allen Reitern),
     vorher das Orange (--akf-akzent = --warning). */
  --akf-akzent: var(--w3-akzent);
  /* Aufklapplisten „Ausgeblendete Märkte“ u. a. (style.css): deckende
     Plattform-Fläche statt #161619. */
  --th-grund-161619-98: var(--w3-flaeche);

  background: var(--w3-grund);
  scrollbar-width: thin;
  scrollbar-color: var(--w3-scroll-leise) transparent;
}

/* Hell (16.10.2026, Nutzerwunsch): nur im privaten FRF – die Plattform kennt
   kein Hell, im Web3-Modus bleibt data-theme fest dunkel (thema.js). Eigene
   Palette im Sinn der Plattform: heller Grund, weiße Karten, Tinte statt
   Weiß-Stufen, Blau kräftiger (#0b6fe0, 4,9:1 auf Weiß; das Plattform-Hellblau
   hätte als Schrift nur 1,6:1), Signalfarben abgedunkelt (Text ≥ 4,5:1).
   Nur Tokens: alle Regeln der Design-Dateien bleiben dieselben. */
html[data-frf-design="web3"][data-theme="light"] {
  color-scheme: light;

  --w3-grund: #f3f6fb;
  --w3-karte: #ffffff;
  --w3-flaeche: #f7f9fc;
  --w3-popover: #ffffff;
  --w3-tip: #ffffff;
  --w3-hover: #eaeff6;
  --w3-zeile-hover: #f2f6fb;
  --w3-akzent: #0b6fe0;
  --w3-akzent-hell: #3b8ef5;
  --w3-akzent-tief: #0a58b8;
  --w3-akzent-text: #ffffff;
  --w3-positiv: #15803d;
  --w3-negativ: #d6304a;
  --w3-fehler: #c62828;
  --w3-negativ-text: #b91c35;
  --w3-warnung: #b45309;
  --w3-text: #0b1220;
  --w3-text-2: rgba(11, 18, 32, 0.66);
  --w3-text-3: rgba(11, 18, 32, 0.54);
  --w3-rand: rgba(11, 18, 32, 0.12);
  --w3-rand-leise: rgba(11, 18, 32, 0.07);
  --w3-fuellung: rgba(11, 18, 32, 0.04);
  --w3-fuellung-stark: rgba(11, 18, 32, 0.08);
  --w3-kopf: rgba(11, 18, 32, 0.03);
  --w3-akzent-hauch: rgba(11, 111, 224, 0.06);
  --w3-akzent-flaeche: rgba(11, 111, 224, 0.1);
  --w3-akzent-rand: rgba(11, 111, 224, 0.45);
  --w3-akzent-stark: rgba(11, 111, 224, 0.16);
  --w3-akzent-auswahl: rgba(11, 111, 224, 0.22);
  --w3-fuellung-mittel: rgba(11, 18, 32, 0.06);
  --w3-scroll: rgba(11, 18, 32, 0.18);
  --w3-scroll-hover: rgba(11, 18, 32, 0.3);
  --w3-scroll-leise: rgba(11, 18, 32, 0.2);
  --w3-text-tip: rgba(11, 18, 32, 0.86);
  --w3-glanz: radial-gradient(121.97% 89.31% at 100% 105.16%, rgba(11, 111, 224, 0.035) 0%, rgba(11, 111, 224, 0) 70.54%);
  --w3-kante: inset -1px -1px 0 0 rgba(11, 18, 32, 0.06), inset 1px 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(11, 18, 32, 0.06);
  --w3-kante-feld: inset -1px -1px 0 0 rgba(11, 18, 32, 0.05), inset 1px 1px 0 0 rgba(255, 255, 255, 0.8);
  --w3-schatten: 0 12px 32px -12px rgba(11, 18, 32, 0.22);
  --w3-ring: 0 0 0 2px rgba(11, 111, 224, 0.45);

  --text-inv: #ffffff;
  --border-3: rgba(11, 18, 32, 0.2);
  --primary-border: rgba(11, 18, 32, 0.14);
  --primary-hover-border: rgba(11, 18, 32, 0.24);
  --secondary-hover-bg: rgba(11, 18, 32, 0.05);
  --secondary-hover-border: rgba(11, 18, 32, 0.16);
  --success-soft: rgba(21, 128, 61, 0.1);
  --warning-soft: rgba(180, 83, 9, 0.1);
  --info-soft: rgba(11, 111, 224, 0.08);
  --overlay: rgba(11, 18, 32, 0.32);
  --overlay-solid: rgba(243, 246, 251, 0.92);
  --shadow-sm: 0 4px 12px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 24px 64px -12px rgba(11, 18, 32, 0.24);
  --input-placeholder: rgba(11, 18, 32, 0.42);
  --input-focus-ring: 0 0 0 3px rgba(11, 111, 224, 0.18);
  --auth-border-3: rgba(11, 18, 32, 0.2);
  --chart-gitter: rgba(11, 18, 32, 0.07);
  --chart-null: rgba(11, 18, 32, 0.26);
  --chart-achse-text: rgba(11, 18, 32, 0.54);
  /* Ask FRF: askFrf.css (nachgeladen) legt hell --akf-akzent auf die
     Warnfarbe – mit gleicher Spezifität gewänne das Orange. */
  --akf-akzent: var(--w3-akzent);
}

/* ── 3. Grundlage ───────────────────────────────────────────────────── */

html[data-frf-design="web3"] body {
  background: var(--w3-grund);
  color: var(--w3-text);
  font-weight: 400;
}

/* Im Rahmen der Plattform: die Seite steht direkt im Inhaltsbereich (ohne
   obere Leiste). Abstand wie die Tool-Seiten der Plattform, am Handy 16 px. */
html.w3-eingebettet[data-frf-design="web3"] body {
  padding: 24px clamp(16px, 2.5vw, 40px) 40px;
}
/* Handy (13.10.2026): oben 16, unten 32 px wie der Inhaltsbereich der
   Plattform am Handy; vorher 24/40 px – die Seiten waren dadurch rund 40 px
   höher als vor dem Design (z. B. Börsen Hedges 390). */
@media (max-width: 640px) {
  html.w3-eingebettet[data-frf-design="web3"] body {
    padding: 16px 16px 32px;
  }
}

html[data-frf-design="web3"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-frf-design="web3"] ::-webkit-scrollbar-track { background: transparent; }
html[data-frf-design="web3"] ::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: var(--w3-scroll);
}
html[data-frf-design="web3"] ::-webkit-scrollbar-thumb:hover { background-color: var(--w3-scroll-hover); }
html[data-frf-design="web3"] ::-webkit-scrollbar-corner { background: transparent; }

/* Native Häkchen (z. B. „Nach Stability gewichten“) im Akzent. */
html[data-frf-design="web3"] input[type="checkbox"],
html[data-frf-design="web3"] input[type="radio"] {
  accent-color: var(--w3-akzent);
}

html[data-frf-design="web3"] ::selection { background: var(--w3-akzent-auswahl); color: var(--w3-text); }

/* Links im Akzent (Plattform: text-primary). */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab, #liquidityView, #kostenMarginView, #carryView) a:not([class]) {
  color: var(--w3-akzent);
}

/* ── Bausteine (13.10.2026: aus den Gruppen-Dateien zusammengezogen) ────
   Karte, Kennzahl-Kachel, Feld, Segment-Spur, Sekundär- und Primärknopf
   gelten für alle Gruppen; jede Gruppe trägt hier nur ihre Klassen ein, ihre
   Datei behält, was davon abweicht (Radius, Gewicht, Abstände).
   Selektorlisten statt eines gemeinsamen :is(): :is() nimmt die höchste
   Spezifität seiner Liste, damit würden Hover-/Gewählt-Regeln der Gruppen
   überstimmt. Reihenfolge Sekundär- vor Primärknopf ist Absicht (gleich
   spezifische Hover-Regeln: der Primärknopf muss später stehen). */

/* Karte (Figma Cards_box): Glanz unten rechts über der Kartenfläche, keine
   sichtbare Randlinie, doppelte Innenkante. Der Rand bleibt 1px breit
   (transparent), damit sich kein Maß verschiebt. */
html[data-frf-design="web3"] :is(
  #fundingratesTab .fr-toolbar, #fundingratesTab .chart-panel, #fundingratesTab .exchange-sidebar,
  #frCompareView .frv-filter, #frCompareView .frv-karte,
  #backtesterTab .bt-config-card, #backtesterTab .bt-chart-card, #backtesterTab .bt-side-card, #backtesterTab .bt-settlements,
  #topSpreadsTab .ts-filter, #topSpreadsTab .ts-karte,
  #boersenHedgesView .bh-leiste, #boersenHedgesView .bh-block,
  #crossOiTab .coi-filter, #crossOiTab .coi-karte
),
html[data-frf-design="web3"] #backtesterTab .bt-result-empty,
html[data-frf-design="web3"] #topSpreadsTab :is(.ts-bein-karte, .ts-rechnung),
html[data-frf-design="web3"] #boersenHedgesView .bh-karte,
html[data-frf-design="web3"] #crossOiTab :is(.coi-bein-karte, .coi-rechnung),
html[data-frf-design="web3"] #liquidityView :is(.liq-filters, .liq-table-scroll, .lh-leiste, .lh-block),
html[data-frf-design="web3"] #liquidityView .lh-dtab,
html[data-frf-design="web3"] #kostenMarginView .km-block,
html[data-frf-design="web3"] #kostenMarginView .km-karte,
html[data-frf-design="web3"] #carryView :is(.cy-hero, .cy-karte),
html[data-frf-design="web3"] #depegView .dep-filter,
html[data-frf-design="web3"] #etfView .etf-panel,
html[data-frf-design="web3"] #etfView .etf-block,
html[data-frf-design="web3"] .route-lens-scope :is(.card, .row),
html[data-frf-design="web3"] #rstPoolsView :is(.rst-fkarte:not(.pp), .rst-karte, .rst-kachelgross),
html[data-frf-design="web3"] #samplePortfolioView .mp-karte,
html[data-frf-design="web3"] #usersView .panel,
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-block {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}

/* Kennzahl-Kachel = Karte in der Karte (Stat-Karten des Simulators bzw.
   DepegStats): Glanz über white/4. */
html[data-frf-design="web3"] #backtesterTab .bt-kpi,
html[data-frf-design="web3"] #boersenHedgesView .bh-kz,
html[data-frf-design="web3"] #carryView .cy-kpi,
html[data-frf-design="web3"] #depegView .dep-kachel,
html[data-frf-design="web3"] #etfView .etf-kachel,
html[data-frf-design="web3"] #usersView :is(.ns-kennzahl, .ng-top-karte) {
  background: var(--w3-glanz), var(--w3-kopf);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}

/* Feld (Suche, Zahl, Stepper, Auswahl): Plattform-Feld white/5 mit leiser
   Innenkante, ohne Randlinie; Fokus im Plattform-Ring. */
html[data-frf-design="web3"] :is(
  #fundingratesTab .asset-input-row, #fundingratesTab .days-stepper, #fundingratesTab .time-input,
  #frCompareView .frv-feld, #frCompareView .fr-blacklist-search,
  #topSpreadsTab .ts-feld, #topSpreadsTab .ts-suche, #topSpreadsTab .fr-blacklist-search,
  #crossOiTab .coi-feld, #crossOiTab .fr-blacklist-search
),
html[data-frf-design="web3"] #liquidityView :is(.liq-search, .lh-suche, .fr-blacklist-search),
html[data-frf-design="web3"] #liquidityView :is(.liq-notional, .lh-zahlfeld) input[type="number"]:not([hidden]),
html[data-frf-design="web3"] #kostenMarginView .km-suche,
html[data-frf-design="web3"] #carryView .cy-input,
html[data-frf-design="web3"] #depegView .dep-feld,
html[data-frf-design="web3"] #depegView .dep-select .catalog-trigger,
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-blacklist-search,
html[data-frf-design="web3"] #rstPoolsView :is(.rst-dd, input[type="text"], input[type="search"], .rst-eingabe, .rst-tkartefeld),
html[data-frf-design="web3"] #samplePortfolioView :is(.catalog-trigger, .catalog-number, .mp-eingabe, .mp-feld select:not([hidden])) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
/* Ganz gerundet (rounded-full) dort, wo die Vorlage es nicht schon ist. */
html[data-frf-design="web3"] #liquidityView :is(.liq-search, .lh-suche, .fr-blacklist-search),
html[data-frf-design="web3"] #liquidityView :is(.liq-notional, .lh-zahlfeld) input[type="number"]:not([hidden]),
html[data-frf-design="web3"] #kostenMarginView .km-suche,
html[data-frf-design="web3"] #carryView .cy-input,
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-blacklist-search,
html[data-frf-design="web3"] #rstPoolsView :is(.rst-dd, input[type="text"], input[type="search"], .rst-eingabe, .rst-tkartefeld),
html[data-frf-design="web3"] #samplePortfolioView :is(.catalog-trigger, .catalog-number, .mp-eingabe, .mp-feld select:not([hidden])) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] :is(
  #fundingratesTab .asset-input-row, #fundingratesTab .days-stepper,
  #frCompareView .frv-feld, #topSpreadsTab .ts-feld, #topSpreadsTab .ts-suche, #crossOiTab .coi-feld
):focus-within,
html[data-frf-design="web3"] #backtesterTab .bt-input:focus,
html[data-frf-design="web3"] #liquidityView :is(.liq-search, .lh-suche):focus-within,
html[data-frf-design="web3"] #kostenMarginView .km-suche:focus-within,
html[data-frf-design="web3"] #carryView .cy-input:focus,
html[data-frf-design="web3"] #depegView .dep-feld:focus-within,
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-blacklist-search:focus,
html[data-frf-design="web3"] .route-lens-scope .amt:focus,
html[data-frf-design="web3"] #rstPoolsView :is(.rst-dd.offen, .rst-dd:focus-visible, input:focus),
html[data-frf-design="web3"] #samplePortfolioView .mp-eingabe:focus-within {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}

/* Segment-Spur (SegmentedToggle): Spur white/5 mit Innenkante; das gewählte
   Segment white/10 + Innenkante steht bei der Gruppe (Klassen je Reiter). */
html[data-frf-design="web3"] #topSpreadsTab .ts-seg,
html[data-frf-design="web3"] #boersenHedgesView .bh-segment,
html[data-frf-design="web3"] #crossOiTab .coi-seg,
html[data-frf-design="web3"] #liquidityView :is(.liq-segment, .lh-seg),
html[data-frf-design="web3"] #carryView .cy-segmente,
html[data-frf-design="web3"] #depegView .dep-seg,
html[data-frf-design="web3"] .route-lens-scope .seg,
html[data-frf-design="web3"] #rstPoolsView :is(.rst-unterreiter, .rst-pillgrp, .rst-segs),
html[data-frf-design="web3"] #samplePortfolioView .mp-reiter,
html[data-frf-design="web3"] #usersView .ns-segment {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}

/* Sekundärknopf (components/ui/button.tsx, secondary): white/5 mit
   Innenkante, ohne Randlinie; Hover white/10. */
html[data-frf-design="web3"] #fundingratesTab .sidebar-action,
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView) .chart-reset-zoom,
html[data-frf-design="web3"] #frCompareView :is(.frv-pill, .frv-step, .frv-suche-plus),
html[data-frf-design="web3"] #backtesterTab .bt-btn-secondary,
html[data-frf-design="web3"] #topSpreadsTab :is(.ts-pill, .ts-step, .ts-vol, .ts-bein),
html[data-frf-design="web3"] #boersenHedgesView .bh-pill,
html[data-frf-design="web3"] #crossOiTab :is(.coi-pill, .coi-step, .coi-vol, .coi-bein-chip),
html[data-frf-design="web3"] #liquidityView :is(.liq-pill, .lh-pill),
html[data-frf-design="web3"] #carryView .cy-btn,
html[data-frf-design="web3"] #depegView :is(.dep-pill, .dep-link),
html[data-frf-design="web3"] #depegView .dep-art,
html[data-frf-design="web3"] #depegView .dep-mehrfach .hedged-more-action-btn,
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-dropdown-action-btn,
html[data-frf-design="web3"] #etfView .etf-btn,
html[data-frf-design="web3"] .route-lens-scope :is(.chipbtn, .amt, .flip, .iconbtn, .wallet-btn),
html[data-frf-design="web3"] .route-lens-scope .btn,
html[data-frf-design="web3"] #rstPoolsView :is(.rst-btn, .rst-btn.grau),
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-knopf, .mp-icon-knopf, .mp-akt),
html[data-frf-design="web3"] #usersView .lz-knopf:not(.lz-primaer),
html[data-frf-design="web3"] :is(.akf-chip, .akf-btn) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #fundingratesTab .sidebar-action:hover,
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView) .chart-reset-zoom:not(:disabled):hover,
html[data-frf-design="web3"] #frCompareView :is(.frv-pill, .frv-step, .frv-suche-plus):hover:not(:disabled),
html[data-frf-design="web3"] #backtesterTab .bt-btn-secondary:hover:not(:disabled),
html[data-frf-design="web3"] #topSpreadsTab :is(.ts-pill, .ts-step):hover:not(:disabled),
html[data-frf-design="web3"] #boersenHedgesView .bh-pill:hover:not(:disabled),
html[data-frf-design="web3"] #crossOiTab :is(.coi-pill, .coi-step):hover:not(:disabled),
html[data-frf-design="web3"] #liquidityView :is(.liq-pill, .lh-pill):hover:not(:disabled),
html[data-frf-design="web3"] #carryView .cy-btn:hover:not(:disabled),
html[data-frf-design="web3"] #depegView :is(.dep-pill, .dep-link):hover:not(:disabled),
html[data-frf-design="web3"] #depegView .dep-pill[aria-expanded="true"],
html[data-frf-design="web3"] #etfView .etf-btn:hover,
html[data-frf-design="web3"] .route-lens-scope :is(.chipbtn, .flip, .iconbtn, .wallet-btn):hover:not([disabled]),
html[data-frf-design="web3"] .route-lens-scope .btn:hover:not([disabled]),
html[data-frf-design="web3"] #rstPoolsView :is(.rst-btn, .rst-btn.grau):hover:not([disabled]),
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-knopf, .mp-icon-knopf, button.mp-akt):hover:not(:disabled),
html[data-frf-design="web3"] #usersView .lz-knopf:not(.lz-primaer):hover:not(:disabled),
html[data-frf-design="web3"] :is(.akf-chip, .akf-btn):hover {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}

/* Primärknopf (button.tsx, default): Akzent mit dunkler Schrift, Hover 80 %. */
html[data-frf-design="web3"] .catalog-button-primary,
html[data-frf-design="web3"] .lz-knopf.lz-primaer,
html[data-frf-design="web3"] #backtesterTab .bt-btn-primary,
html[data-frf-design="web3"] #topSpreadsTab .ts-aktion,
html[data-frf-design="web3"] #carryView .cy-btn.cy-btn-primaer,
html[data-frf-design="web3"] .route-lens-scope .btn-primary,
html[data-frf-design="web3"] #rstPoolsView .rst-btn.orange,
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf-primaer {
  background: var(--w3-akzent);
  border-color: var(--w3-akzent);
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .catalog-button-primary:hover:not(:disabled),
html[data-frf-design="web3"] .lz-knopf.lz-primaer:hover:not(:disabled),
html[data-frf-design="web3"] #backtesterTab .bt-btn-primary:hover:not(:disabled),
html[data-frf-design="web3"] #topSpreadsTab .ts-aktion:hover,
html[data-frf-design="web3"] #carryView .cy-btn.cy-btn-primaer:hover:not(:disabled),
html[data-frf-design="web3"] .route-lens-scope .btn-primary:hover:not([disabled]),
html[data-frf-design="web3"] #rstPoolsView .rst-btn.orange:hover:not([disabled]),
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf-primaer:hover:not(:disabled) {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  border-color: transparent;
}
/* Ohne Innenkante, wo die Vorlage sonst die Sekundär-Kante mitgäbe. */
html[data-frf-design="web3"] .catalog-button-primary:hover:not(:disabled),
html[data-frf-design="web3"] .lz-knopf.lz-primaer:hover:not(:disabled),
html[data-frf-design="web3"] #backtesterTab .bt-btn-primary:hover:not(:disabled),
html[data-frf-design="web3"] #carryView .cy-btn.cy-btn-primaer,
html[data-frf-design="web3"] #carryView .cy-btn.cy-btn-primaer:hover:not(:disabled),
html[data-frf-design="web3"] .route-lens-scope .btn-primary,
html[data-frf-design="web3"] #rstPoolsView .rst-btn.orange,
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf-primaer {
  box-shadow: none;
}

/* Auswahlfelder aus dem Katalog (catalog-controls.css), überall im Modus. */
html[data-frf-design="web3"] .catalog-trigger,
html[data-frf-design="web3"] .catalog-number {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .catalog-trigger:hover:not(:disabled) { background: var(--w3-fuellung-mittel); }
/* In den Reitern der Fundingrates- und Börsen-Gruppe ganz gerundet wie die Plattform-Auswahl (Simulator). */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab, #liquidityView, #kostenMarginView, #carryView) :is(.catalog-trigger, .catalog-number) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab, #liquidityView, #kostenMarginView, #carryView) .catalog-number-step {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] .catalog-trigger:focus-visible,
html[data-frf-design="web3"] .catalog-number:focus-within { box-shadow: var(--w3-kante-feld), var(--w3-ring); }

/* Aufklapplisten und Kalender: deckende Plattform-Fläche (--surface) mit
   Plattform-Schatten; gewählte Zeile white/10. */
html[data-frf-design="web3"] .catalog-popup {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
  scrollbar-color: var(--w3-scroll-leise) transparent;
}
html[data-frf-design="web3"] .catalog-search {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .catalog-option:hover,
html[data-frf-design="web3"] .catalog-option:focus-visible,
html[data-frf-design="web3"] .catalog-asset-popup .catalog-option[aria-selected="true"],
html[data-frf-design="web3"] .catalog-option-spot {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] .catalog-day.is-in-range { background: var(--w3-akzent-flaeche); }
html[data-frf-design="web3"] .catalog-day.is-endpoint {
  background: var(--w3-akzent);
  border-color: var(--w3-akzent);
  color: var(--w3-akzent-text);
}

/* „Mehr“-Menü der Filterzeilen (modules/filterMehr.js, catalog-controls.css):
   Plattform-Popover mit Rand white/10, Radius und Schatten wie die übrigen
   Aufklapplisten. Der Knopf ist der Sekundärknopf des Reiters (Top Spreads:
   ts-pill oben, offen/Zahl im Abschnitt des Reiters). */
html[data-frf-design="web3"] .filter-mehr-menue {
  background: var(--w3-popover);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .filter-mehr-pfeil { color: var(--w3-text-2); }
/* Für alle Reiter (Cross OI, FR Vergleich, Liquidität, Depeg & Staking,
   13.10.2026): offen wie der Hover des Sekundärknopfs, Zahl im Akzent. */
html[data-frf-design="web3"] .filter-mehr-knopf[aria-expanded="true"] {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
html[data-frf-design="web3"] .filter-mehr-knopf .filter-mehr-zahl {
  background: var(--w3-akzent);
  color: var(--w3-akzent-text);
}

/* Tabellen der sechs Reiter: Kopf white/4 mit Großbuchstaben in white/45,
   Zeilenlinien white/6, Hover white/4 (components/admin/*View.tsx). */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab) th {
  background-color: var(--w3-flaeche);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab) :is(th, td) {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] :is(#frCompareView, #topSpreadsTab, #boersenHedgesView, #crossOiTab) tbody tr:hover > td {
  background-color: var(--w3-zeile-hover);
}
/* Sortierte Spalte: Beschriftung weiß, Pfeil im Akzent. */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab) [aria-sort="ascending"],
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView, #backtesterTab, #topSpreadsTab, #boersenHedgesView, #crossOiTab) [aria-sort="descending"] {
  color: var(--w3-text);
}

/* Tooltips (hilfe-tooltips.css): Plattform-Hint – Kasten #141b2b, Rand
   white/10, Text white/80, Überschrift im Akzent. Schrift bleibt ≥ 12 px. */
html[data-frf-design="web3"] .value-tip-layer,
html[data-frf-design="web3"] .depeg-tip-layer,
html[data-frf-design="web3"] .reiter-tip-layer {
  background: var(--w3-tip);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-schatten);
  color: var(--w3-text-tip);
  font-weight: 400;
}
html[data-frf-design="web3"] .value-tip-layer .tip-formel,
html[data-frf-design="web3"] .depeg-tip-layer .tip-formel {
  background: var(--w3-fuellung);
  border-left-color: var(--w3-akzent);
  font-weight: 500;
}

/* Chart-Tooltip (Fundingrates, FR Vergleich, Depeg) im selben Hint-Stil;
   Status-Zeile 12 statt 11 px. */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .hover-tooltip {
  background: var(--w3-tip);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .tooltip-status {
  font-size: 12px;
}

/* Ladezustand (ladezustand.css): Skelett in white/5 statt Grau. */
html[data-frf-design="web3"] :is(.lz-skel, .lz-skel-flaeche) {
  background-color: var(--w3-fuellung);
}

/* Schalter (alle Gruppen): an = Akzent wie der Plattform-Switch, Knopf in
   der Grundfarbe. Aus = white/10. Je Bauart eigene Klassen, darum je Reiter. */
html[data-frf-design="web3"] :is(.ts-schalter-spur, .bh-schalter-spur, .coi-schalter-spur) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #topSpreadsTab .ts-schalter input:checked + .ts-schalter-spur,
html[data-frf-design="web3"] #boersenHedgesView .bh-schalter[aria-pressed="true"] .bh-schalter-spur {
  background: var(--w3-akzent);
}
html[data-frf-design="web3"] #topSpreadsTab .ts-schalter input:checked + .ts-schalter-spur .ts-schalter-knopf,
html[data-frf-design="web3"] #boersenHedgesView .bh-schalter[aria-pressed="true"] .bh-schalter-knopf {
  background: var(--w3-akzent-text);
}

/* Liquidität: Schalter „Nur auf ≥ 2 Börsen“: an = Akzent, Knopf in der Grundfarbe. */
html[data-frf-design="web3"] #liquidityView .liq-switch-track {
  background: var(--w3-fuellung-stark);
  box-shadow: none;
}
html[data-frf-design="web3"] #liquidityView .liq-switch[aria-checked="true"] .liq-switch-track {
  background: var(--w3-akzent);
}
html[data-frf-design="web3"] #liquidityView .liq-switch[aria-checked="true"] .liq-switch-thumb {
  background: var(--w3-akzent-text);
}

/* Carry: Schalter „Mitlaufen“. */
html[data-frf-design="web3"] #carryView .cy-schalter-spur {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
html[data-frf-design="web3"] #carryView .cy-schalter input:checked + .cy-schalter-spur {
  background: var(--w3-akzent);
  border-color: var(--w3-akzent);
}
html[data-frf-design="web3"] #carryView .cy-schalter input:checked + .cy-schalter-spur::after {
  background: var(--w3-akzent-text);
}

/* Depeg: Schalter „Nur Kaufzone“: aus white/10, an im Akzent wie der Plattform-Switch. */
html[data-frf-design="web3"] #depegView .dep-schalter {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
html[data-frf-design="web3"] #depegView .dep-schalter[aria-checked="true"] {
  background: var(--w3-akzent);
  border-color: transparent;
}
html[data-frf-design="web3"] #depegView .dep-schalter[aria-checked="true"] span {
  background: var(--w3-akzent-text);
}

/* Route Lens: Schalter „Nur mit Preis“: an im Akzent wie der Plattform-Switch. */
html[data-frf-design="web3"] .route-lens-scope .sw-track {
  background: var(--w3-fuellung-stark);
  box-shadow: none;
}
html[data-frf-design="web3"] .route-lens-scope .sw input:checked + .sw-track {
  background: var(--w3-akzent);
  box-shadow: none;
}
html[data-frf-design="web3"] .route-lens-scope .sw input:checked + .sw-track::after {
  background: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .route-lens-scope .sw input:focus-visible + .sw-track {
  box-shadow: var(--w3-ring);
}

/* TEAM ▸ Pools (Schalter-Pillen) und Musterportfolio */
html[data-frf-design="web3"] #rstPoolsView .rst-sw { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #rstPoolsView .an .rst-sw { background: var(--w3-akzent); }
html[data-frf-design="web3"] #rstPoolsView .an .rst-sw i { background: var(--w3-akzent-text); }
html[data-frf-design="web3"] #samplePortfolioView .mp-schalter-bahn { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #samplePortfolioView .mp-schalter input:checked + .mp-schalter-bahn { background: var(--w3-akzent); border-color: var(--w3-akzent); }
html[data-frf-design="web3"] #samplePortfolioView .mp-schalter input:checked + .mp-schalter-bahn::after { background: var(--w3-akzent-text); }

/* Fokus überall sichtbar im Plattform-Ring. Eine Erklärkarte (Einführungen,
   Nachrichten, „Mehr dazu“) hat beim Öffnen selbst den Fokus (tabindex -1):
   dort bleibt ihr eigener Schatten statt eines Rings um die ganze Karte.
   Der Nachrichten-Dialog (Hülle um die Karte) steht in web3-design-team.css. */
html[data-frf-design="web3"] :is(button, a, [tabindex], input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--w3-ring);
}
html[data-frf-design="web3"] dialog.ek:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: var(--ek-schatten);
}

/* Erklärkarte (erklaerkarte.css, 13.10.2026): Einführungen der Reiter und
   von Tracking, Nachrichten an Nutzer (samt Ask-FRF-Vorstellung), „Mehr
   dazu“, Feedback, Passkeys und die Discord-Fenster. Gold → Plattform-Akzent,
   Karte in der deckenden Plattform-Fläche wie Dialoge und Menüs, Bildband mit
   Akzent-Schein, Hauptknopf als Primärknopf (Akzent, dunkle Schrift),
   Zweitknopf als Sekundärknopf, beide ganz gerundet. Die Tokens gelten nur in
   diesen Fenstern; Gold an anderer Stelle (Bot Testing, D-Bot) bleibt. */
html[data-frf-design="web3"] :is(.ek, .nd-dialog, .dz-sperre) {
  --gold: var(--w3-akzent);
  --gold-rand: var(--w3-akzent-rand);
  --gold-flaeche: var(--w3-akzent-flaeche);
  --gold-hauch: var(--w3-akzent-hauch);
  --ek-gold-schrift: var(--w3-akzent);
  --ek-gold-hover: var(--w3-akzent-auswahl);
  --ek-gold-tipp: var(--w3-akzent-flaeche);
  --ek-karte: var(--w3-flaeche);
  --ek-bild: var(--w3-karte);
  --ek-rand: var(--w3-rand);
  --ek-kante: var(--w3-rand-leise);
  --ek-hell: var(--w3-fuellung);
  --ek-text-2: var(--w3-text-2);
  --ek-text-3: var(--w3-text-3);
  --ek-knopf-2: var(--w3-fuellung);
  --ek-knopf-2-hover: var(--w3-fuellung-stark);
  --ek-punkt: var(--w3-fuellung-stark);
  --ek-chip-grund: var(--w3-fuellung);
  --ek-schein: radial-gradient(70% 90% at 92% 8%, var(--w3-akzent-flaeche), transparent 62%),
               radial-gradient(60% 70% at 10% 100%, var(--w3-akzent-hauch), transparent 70%);
  --ek-schleier: linear-gradient(180deg, color-mix(in srgb, var(--w3-flaeche) 55%, transparent) 0%, transparent 40%, color-mix(in srgb, var(--w3-flaeche) 35%, transparent) 100%);
  --ek-schatten: var(--w3-schatten);
  --ek-backdrop: var(--overlay-solid);
}
html[data-frf-design="web3"] :is(.ek, dialog.dz-dialog.dz-sperre) {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] .ek-chip {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] .ek-liste > li::before {
  border-radius: var(--w3-radius-feld);
  font-weight: 500;
}
html[data-frf-design="web3"] .ek-tipp {
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] :is(.ek-k, .dz-sperre .dz-knopf) {
  border-radius: var(--w3-radius-feld);
  font-weight: 500;
}
html[data-frf-design="web3"] .ek-k2,
html[data-frf-design="web3"] .dz-sperre #dzWarteKontakt {
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .ek-k1,
html[data-frf-design="web3"] .dz-sperre :is(.dz-knopf-prim, #dzNeuVerbindenBtn) {
  background: var(--w3-akzent);
  border-color: transparent;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .ek-k1:hover:not(:disabled),
html[data-frf-design="web3"] .dz-sperre :is(.dz-knopf-prim, #dzNeuVerbindenBtn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  border-color: transparent;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .mehr-dazu .md-formel {
  border-radius: var(--w3-radius-tip);
}

/* Alarme (Tool settings ▸ „Alarme verwalten“, alarms.js, style.css): der
   Dialog trug eigene warme Töne (#111210, Gold #f2c96d, --th-*). Im Modus die
   Plattform: Fläche #11141d, Rand white/10, Felder white/5 ganz gerundet,
   Akzent statt Gold (Reiter, Überschriften, Schalter), „Alarm anlegen“ als
   Primärknopf, „Abbrechen“ als Sekundärknopf, Gewichte medium statt fett.
   Die --th-*-Tokens gelten nur im Dialog (Menüs hängen darin). */
html[data-frf-design="web3"] .alarm-dialog {
  --th-grund-111210: var(--w3-flaeche);
  --th-grund-050605-82: var(--overlay-solid);
  --th-grund-11130f: var(--w3-fuellung);
  --th-grund-171815: var(--w3-fuellung);
  --th-grund-1b1c19: var(--w3-fuellung);
  --th-grund-ffffff-04: var(--w3-kopf);
  --th-grund-5aa0ff-14: var(--w3-akzent-hauch);
  --th-grund-19241b: color-mix(in srgb, var(--w3-positiv) 12%, transparent);
  --th-grund-19251a: color-mix(in srgb, var(--w3-positiv) 12%, transparent);
  --th-grund-291919: color-mix(in srgb, var(--w3-negativ) 14%, transparent);
  --th-grund-2a0f0f: color-mix(in srgb, var(--w3-negativ) 14%, transparent);
  --th-grund-292b26: var(--w3-rand-leise);
  --th-grund-34362f: var(--w3-fuellung-stark);
  --th-grund-40331d: var(--w3-fuellung-stark);
  --th-grund-756231: var(--w3-akzent);
  --th-grund-8c8f85: var(--w3-text-2);
  --th-grund-8fcf8e: var(--w3-positiv);
  --th-grund-9ad298: var(--w3-positiv);
  --th-grund-f2c96d: var(--w3-akzent);
  --th-grund-ffdc8b: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  --th-rand-25532d: color-mix(in srgb, var(--w3-positiv) 30%, transparent);
  --th-rand-292b26: var(--w3-rand-leise);
  --th-rand-2a2a2a: var(--w3-rand-leise);
  --th-rand-32342e: var(--w3-rand);
  --th-rand-34362f: var(--w3-rand);
  --th-rand-383a34: var(--w3-rand);
  --th-rand-4a1c1c: color-mix(in srgb, var(--w3-negativ) 40%, transparent);
  --th-rand-6b5b34: var(--w3-akzent-rand);
  --th-rand-f2c96d: var(--w3-akzent);
  --th-schatten-6b5b34: var(--w3-akzent-rand);
  --th-schatten-f2c96d-04: transparent;
  --th-schatten-ffffff-05: var(--w3-fuellung);
  --th-schatten-ffffff-09: var(--w3-fuellung-mittel);
  --th-schatten-8fcf8e-55: color-mix(in srgb, var(--w3-positiv) 55%, transparent);
  --th-schatten-9ad298: color-mix(in srgb, var(--w3-positiv) 55%, transparent);
  --th-text-17140d: var(--w3-akzent-text);
  --th-text-ece9df: var(--w3-text);
  --th-text-d9d5c9: var(--w3-text);
  --th-text-d4d5cf: var(--w3-text);
  --th-text-c8cac2: var(--w3-text-2);
  --th-text-a4a69c: var(--w3-text-2);
  --th-text-a5a89b: var(--w3-text-2);
  --th-text-92958b: var(--w3-text-2);
  --th-text-8f9288: var(--w3-text-2);
  --th-text-85877e: var(--w3-text-2);
  --th-text-7d8077: var(--w3-text-2);
  --th-text-959597: var(--w3-text-3);
  --th-text-8d9086: var(--w3-text-3);
  --th-text-7f8279: var(--w3-text-3);
  --th-text-777a72: var(--w3-text-3);
  --th-text-a68d50: var(--w3-akzent);
  --th-text-f2c96d: var(--w3-akzent);
  --th-text-9ad298: var(--w3-positiv);
  --th-text-d98888: var(--w3-negativ-text);
  --th-text-e98282: var(--w3-negativ-text);
  --th-text-ffcccc: var(--w3-negativ-text);
  --th-text-e0a458: var(--w3-warnung);
  --th-linie-a68d50: var(--w3-akzent);
  --th-linie-f2c96d: var(--w3-akzent);
  --th-linie-92958b: var(--w3-text-3);
  --th-linie-959597: var(--w3-text-3);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-kicker, .alarm-form-heading, .alarm-tabs button, .alarm-rule-form label, .alarm-form-field, .alarm-steps span) {
  font-weight: 500;
}
html[data-frf-design="web3"] .alarm-dialog h2 {
  font-weight: 500;
}
/* Felder und Auswahl: Plattform-Feld, ganz gerundet. */
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-code-row input, .alarm-rule-form input:not([type="checkbox"]):not([type="radio"]), .alarm-rule-form select, .alarm-exchange-trigger, .alarm-asset-trigger, .alarm-ignored-markets select, .alarm-sleep-times input[type="time"]) {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  font-weight: 400;
}
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-exchange-trigger, .alarm-asset-trigger)[aria-expanded="true"],
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-code-row input, .alarm-rule-form input, .alarm-rule-form select):focus {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
/* Karten im Dialog (Verbindung, Regeln, Formular) ohne graue Randlinie. */
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-connection-card, .alarm-rule, .alarm-steps > div) {
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .alarm-dialog .alarm-inline-form {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
/* Knöpfe: Primär im Akzent, Sekundär white/5, beide ganz gerundet. */
html[data-frf-design="web3"] .alarm-dialog :is(.alarm-primary, .alarm-secondary, .alarm-bot-link, .alarm-pill-btn, .alarm-asset-bulk-btn) {
  border-radius: var(--w3-radius-feld);
  font-weight: 500;
}
html[data-frf-design="web3"] .alarm-dialog .alarm-primary {
  border-color: transparent;
}
html[data-frf-design="web3"] .alarm-dialog .alarm-secondary {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .alarm-dialog .alarm-secondary:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
}
/* Schalter: Knopf an = dunkel auf dem Akzent (Plattform-Switch). */
html[data-frf-design="web3"] .alarm-dialog .alarm-toggle input:checked + span::after {
  background: var(--w3-akzent-text);
}

/* Knopf „Mehr dazu“ in den Tooltip-Karten: Primärknopf im Akzent statt
   FRF-Orange (mehr-dazu.css), ganz gerundet. */
html[data-frf-design="web3"] button.mehr-dazu-knopf.mehr-dazu-knopf {
  padding: 2px 12px;
  background: var(--w3-akzent);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  color: var(--w3-akzent-text);
  font-weight: 500;
}
html[data-frf-design="web3"] button.mehr-dazu-knopf.mehr-dazu-knopf:hover {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
}

/* Schrift nie unter 12 px (FRF-Regel), auch wo die Reiter-Stylesheets
   kleiner setzen (RFQ-Abzeichen 10 px, Richtungspfeil Cross OI 11 px). */
html[data-frf-design="web3"] .analysis-only-badge,
html[data-frf-design="web3"] #topSpreadsTab :is(.ts-dir, .ts-spot),
html[data-frf-design="web3"] #crossOiTab .coi-dir,
html[data-frf-design="web3"] #boersenHedgesView :is(.bh-rolle, .bh-chip-status, .bh-achse) {
  font-size: 12px;
}

/* ── 4. Reiter ──────────────────────────────────────────────────────── */

/* Fundingrates ─────────────────────────────────────────────────────────
   Der Verlauf-Chart (auch in FR Vergleich, .frv-chart, und Depeg,
   .dep-chart) steht wie der
   DepegChart direkt auf der Karte: keine eigene Fläche, Gitter white/6.
   Zeitleiste in white/4, Fenster und Griffe im Akzent. */
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .chart-container {
  background: transparent;
  border-color: transparent;
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .chart-nav-flaeche {
  background: var(--w3-kopf);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .chart-nav-flaeche-pfad {
  fill: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .chart-nav-fenster {
  background: var(--w3-akzent-hauch);
  border-color: var(--w3-akzent-rand);
}
html[data-frf-design="web3"] :is(#fundingratesTab, #frCompareView .frv-chart, #depegView .dep-chart) .chart-nav-griff {
  background: var(--w3-akzent);
}

/* Börsenliste rechts: Kopf wie Tabellenköpfe, Zeilen mit Hover white/4,
   Alle/Keine als leise Plattform-Knöpfe. */
html[data-frf-design="web3"] #fundingratesTab .exchange-list-header {
  background: var(--w3-flaeche);
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #fundingratesTab .exchange-item {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #fundingratesTab .exchange-item:hover {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #fundingratesTab .exchange-sort-button.active {
  color: var(--w3-text);
}

/* FR Vergleich ─────────────────────────────────────────────────────────
   Pillen und Stufen-Knöpfe als Plattform-Sekundärknopf (white/5 mit
   Innenkante, ohne Randlinie); Zeitraum-Gruppe im Chart als Segment
   (gewählt white/10). Marktnamen enger gesetzt (tracking-tight der
   Plattform): Geist läuft breiter als Ubuntu Sans, ohne das würden
   „1MBABYDOG“ und „1000CHEEMS“ in der Matrix abgeschnitten. */
html[data-frf-design="web3"] #frCompareView .frv-takt {
  background: var(--w3-fuellung);
  border-color: transparent;
}
html[data-frf-design="web3"] #frCompareView .frv-name {
  letter-spacing: -0.02em;
}
html[data-frf-design="web3"] #frCompareView .frv-chart-tage-gruppe {
  background: var(--w3-fuellung);
  border-color: var(--w3-rand);
}
html[data-frf-design="web3"] #frCompareView .frv-chart-tage[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}
/* Fixierte Spalten der Matrix: deckend in der Kartenfläche, Hover/aktiv wie die Zeile. */
html[data-frf-design="web3"] #frCompareView .frv-matrix .frv-zeile:hover :is(.frv-markt-zelle, .frv-auge-zelle) {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #frCompareView .frv-matrix :is(.frv-zeile.is-aktiv, .frv-zeile:focus-visible) :is(.frv-markt-zelle, .frv-auge-zelle) {
  background: var(--w3-flaeche);
}
/* „+“ der Suche (Nutzer 13.10.2026): im aktiven Suchfeld leuchtend im
   Plattform-Akzent statt im Warn-Orange (fr-compare.css). */
html[data-frf-design="web3"] #frCompareView .frv-feld-suche:focus-within .frv-suche-plus {
  color: var(--w3-akzent);
  background: var(--w3-akzent-flaeche);
  border-color: var(--w3-akzent-rand);
  box-shadow: var(--w3-kante-feld), 0 0 12px var(--w3-akzent-auswahl);
}
html[data-frf-design="web3"] #frCompareView .frv-feld-suche:focus-within .frv-suche-plus:hover:not(:disabled) {
  background: var(--w3-akzent-stark);
  border-color: var(--w3-akzent);
}

/* Funding Backtester ───────────────────────────────────────────────────
   Felder ganz gerundet (Plattform-Auswahl), Market/Limit als Segment
   (gewählt white/10 mit Innenkante), „Backtest starten“ als Primärknopf im
   Akzent, übrige Knöpfe als Sekundärknopf. Kennzahl-Kacheln wie die
   Stat-Karten des Simulators (Karte in der Karte). */
html[data-frf-design="web3"] #backtesterTab .bt-input {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  padding: 0 var(--space-4);
}
html[data-frf-design="web3"] #backtesterTab .bt-order-options {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #backtesterTab .bt-order-options span {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #backtesterTab .bt-order-options input:checked + span {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}
/* Aktionszeile im Raster der Felder darüber (16.10.2026, Nutzer): Umschalter
   unter der ersten Spalte, jeder Knopf füllt eine Spalte, alle so hoch wie
   der Umschalter (34 px) und ganz gerundet wie die Pillen. Spaltenzahl und
   Abstand wie .bt-config-grid (backtester.css: 6 / 3 / 2 Spalten). */
html[data-frf-design="web3"] #backtesterTab .bt-config-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  align-items: end;
}
html[data-frf-design="web3"] #backtesterTab .bt-order-type {
  min-width: 0;
  margin: 0;
}
html[data-frf-design="web3"] #backtesterTab .bt-order-options {
  width: max-content;
  max-width: 100%;
}
html[data-frf-design="web3"] #backtesterTab :is(.bt-btn-primary, .bt-btn-secondary) {
  width: 100%;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border-radius: var(--w3-radius-feld);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  html[data-frf-design="web3"] #backtesterTab .bt-config-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 750px) {
  html[data-frf-design="web3"] #backtesterTab .bt-config-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-frf-design="web3"] #backtesterTab .bt-order-type { grid-column: 1 / -1; margin: 0; }
}
html[data-frf-design="web3"] #backtesterTab .bt-event-row:not(.bt-event-kopf) {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #backtesterTab .bt-breakdown-bar {
  background: var(--w3-fuellung-stark);
}

/* Top Spreads ──────────────────────────────────────────────────────────
   Filter: Ranking/Größe als Segment-Spur (white/5), Pillen, Stufen,
   Volatilität und Bein-Pillen als Plattform-Sekundärknopf. Bein-Namen enger
   gesetzt, damit „HYPERLIQUID“ in der festen Spur nicht abgeschnitten wird.
   Aufgeklapptes Detail: Bein-Karten und Rechnung als Karte in der Karte,
   „In Fundingrates öffnen“ als Primärknopf. */
html[data-frf-design="web3"] #topSpreadsTab .ts-bein {
  letter-spacing: -0.02em;
}
html[data-frf-design="web3"] #topSpreadsTab .ts-namen .analysis-only-badge,
html[data-frf-design="web3"] #topSpreadsTab .ts-karte-kopf .analysis-only-badge {
  font-size: 12px;
}
html[data-frf-design="web3"] #topSpreadsTab .ts-auf:hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #topSpreadsTab .ts-detail-zeile > td {
  background: var(--w3-grund);
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #topSpreadsTab .ts-balken {
  background: var(--w3-fuellung-stark);
}
/* „Mehr“ (filterMehr.js): offen wie der Hover des Sekundärknopfs, die Zahl
   abweichender Filter im Akzent. */
html[data-frf-design="web3"] #topSpreadsTab .filter-mehr-knopf[aria-expanded="true"] {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
html[data-frf-design="web3"] #topSpreadsTab .filter-mehr-knopf .filter-mehr-zahl {
  background: var(--w3-akzent);
  color: var(--w3-akzent-text);
}

/* Börsen Hedges ────────────────────────────────────────────────────────
   Ansicht und Richtung als Segment-Spur (gewählt white/10 mit Innenkante),
   Kategorien und Blättern als Plattform-Sekundärknopf. Detail: Karten als
   Karte in der Karte, Kennzahlen als Kacheln, Hinweis-Kasten in white/4.
   Verlauf: Linie, Band und Jetzt-Punkt in der ersten Chartfarbe der
   Plattform (--chart-1), Short gestrichelt in white/45 wie bisher. */
html[data-frf-design="web3"] #boersenHedgesView .bh-chip[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-pill[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-auf:hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-detail-zeile > td {
  background: var(--w3-grund);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-kv-summe {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-signal {
  background: var(--w3-kopf);
  border-color: var(--w3-rand);
}
html[data-frf-design="web3"] #boersenHedgesView :is(.bh-linie, .bh-linie-long) {
  stroke: var(--w3-akzent);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-band-flaeche {
  fill: var(--w3-akzent-hauch);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-jetzt {
  fill: var(--w3-akzent);
  stroke: var(--w3-karte);
}
/* Legende passend zu den Linien. */
html[data-frf-design="web3"] #boersenHedgesView .bh-legende i {
  border-top-color: var(--w3-akzent);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-legende .bh-leg-median { border-top-color: var(--w3-text-2); }
html[data-frf-design="web3"] #boersenHedgesView .bh-legende .bh-leg-short { border-top-color: var(--w3-text-3); }
html[data-frf-design="web3"] #boersenHedgesView .bh-legende .bh-leg-band { background: var(--w3-akzent-flaeche); }
html[data-frf-design="web3"] #boersenHedgesView .bh-band-spur {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #boersenHedgesView .bh-band-j {
  border-color: var(--w3-karte);
}

/* Cross OI ─────────────────────────────────────────────────────────────
   Wie Top Spreads: Max-Vol als Segment-Spur, Pillen/Stufen/Volatilität und
   Bein-Chips als Plattform-Sekundärknopf, Auswahlfelder ganz gerundet.
   Detail: Bein-Karten und Rechnung als Karte in der Karte; die
   Verlaufs-Charts nutzen --chart-long/--chart-short (Signalfarben). */
html[data-frf-design="web3"] #crossOiTab .coi-auf:hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #crossOiTab .coi-detail-zeile > td {
  background: var(--w3-grund);
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #crossOiTab .coi-lrow-kopf {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #crossOiTab .coi-balken {
  background: var(--w3-fuellung-stark);
}

/* ── 5. Breitenausgleich für Geist (13.10.2026) ───────────────────────────
   Geist läuft breiter als Ubuntu Sans, und im Rahmen der Plattform ist die
   Seite schmaler (Seitenabstand). Wo dadurch eine Leiste in eine zweite Zeile
   bricht oder eine Beschriftung abgeschnitten wird, bekommt sie hier etwas
   Platz zurück – nie über kleinere Schrift (≥ 12 px bleibt), nur über
   Abstände, Laufweite und Feldbreiten. Gemessen bei 1440 und 390 px. */

/* Fundingrates: „Eigener Zeitraum“ ist ein Eingabefeld mit Browser-Breite
   (20 Zeichen); in Geist 251 px. Mit field-sizing so breit wie sein Text
   (gewählter Zeitraum inklusive) – das Fenster rechts bleibt in Zeile 1.
   Browser ohne field-sizing behalten die alte Breite. */
html[data-frf-design="web3"] #fundingratesTab .fr-eigener-zeitraum .range-input {
  field-sizing: content;
}

/* Top Spreads, aufgeklappt: die Rechnung braucht in Geist 1302 px bei 1264 px
   Platz. Abstände 10 statt 14 px und Laufweite wie die Plattform (tight) –
   „In Fundingrates öffnen“ bleibt in der Zeile. */
html[data-frf-design="web3"] #topSpreadsTab .ts-rechnung {
  column-gap: 10px;
  letter-spacing: -0.01em;
}

/* Liquidität: die Filterkarte braucht 1418 px Grundbreite bei 1334 px Platz;
   „Ausgeblendete Märkte“ fiel in eine zweite Zeile. Suche 150 statt 200 px
   (Platzhalter passt), Abstände 8 statt 12 px, Segmente 8 statt 10 px Rand. */
@media (min-width: 1101px) {
  html[data-frf-design="web3"] #liquidityView .liq-filters { column-gap: 8px; }
  html[data-frf-design="web3"] #liquidityView .liq-search { width: 150px; }
  html[data-frf-design="web3"] #liquidityView .liq-chip { padding: 0 8px; }
}

/* Kosten und Margin, Handy: „Anrechnung · Cap“ ist in Geist (12 px,
   Großbuchstaben) 127 px breit, die Spalte hatte 108 px. Die Tabelle rollt am
   Handy ohnehin quer in ihrer Hülle; etwas breiter, damit der Kopf einzeilig
   bleibt. */
@media (max-width: 900px) {
  html[data-frf-design="web3"] #kostenMarginView .km-tabelle { min-width: 1220px; }
}

/* TEAM ▸ Pools: „Netzwerk“ im Auswahlfeld wurde zu „Netzw…“ gekürzt (die
   vier Auswahlfelder teilen sich gleich breit 4 × 140 px, „Netzwerk 25/25“
   braucht in Geist mehr) – keines wird jetzt schmaler als sein Inhalt.
   „im Ergebnis suchen: Paar, Adresse…“ passte nicht ins 250-px-Feld. */
@media (min-width: 761px) {
  html[data-frf-design="web3"] #rstPoolsView .rst-fgrp.dd { min-width: max-content; }
  html[data-frf-design="web3"] #rstPoolsView .rst-ergebnissuche input { width: 290px; }
}

/* TEAM ▸ Musterportfolio: „Neu rechnen“ fiel aus der Kopfleiste in eine
   zweite Zeile (1392 px Inhalt bei 1368 px). Unterreiter und Knöpfe mit
   10 statt 12 px Rand. */
@media (min-width: 1201px) {
  html[data-frf-design="web3"] #samplePortfolioView .mp-reiter button { padding-left: 10px; padding-right: 10px; }
  html[data-frf-design="web3"] #samplePortfolioView .mp-kopf .mp-knopf { padding-left: 10px; padding-right: 10px; }
}