/*
 * Web3-Design, privates FRF – Paket 3: Tracking, xStocks Points, RH Punkte (16.10.2026).
 *
 * Nur das Aussehen der Teile, die es in der Web3-Fassung nicht gibt:
 * Tracking (.tracking-scope, tracking/tracking.css, alle Unterreiter),
 * Points / Vaults ▸ xStocks Points, TEAM ▸ RH Punkte.
 *
 * Regeln wie web3-design.css: jede Regel beginnt mit
 * html[data-frf-design="web3"] (Schalter Nutzer ▸ Seiten, sonst wirkungslos),
 * Farben nur über die --w3-*-Tokens aus web3-design.css (keine festen Werte),
 * Schrift nie unter 12 px, am Handy (≤ 640 px) geprüft. Lädt nach
 * web3-design*.css (src/services/web3Shell.ts, DESIGN_LINKS).
 *
 * Alle drei Reiter sind im Web3-Modus abgeschaltet (WEB3_AUS_RECHTE), darum
 * ohne :not([data-frf-modus="web3"]).
 *
 * Reihenfolge: tracking/tracking.css wird erst beim Öffnen des Reiters ans
 * Ende von <head> gehängt und kommt damit NACH dieser Datei. Jede Regel hier
 * ist deshalb um html[data-frf-design="web3"] (0,1,1) spezifischer als ihr
 * Gegenstück dort; die !important-Flächen des Schimmers (.tk-glanz) bleiben
 * und lesen nur die hier umgelegten Variablen.
 *
 * Aufbau: 1. Tracking (Variablen, Bausteine, Karten, Tabellen, Dialoge)
 *         2. xStocks Points  3. RH Punkte  4. Handy
 */

/* ── 1. Tracking ────────────────────────────────────────────────────────
   Die lokalen Variablen des Bereichs auf die Plattform-Tokens. Der Schimmer
   „gute Kachel“ (kacheln.ts) leuchtet im Akzent statt Grün – Zahlen und
   Zustände behalten Grün/Rot. Die Reihenfarben (--tk-reihe-*) bleiben die
   geprüfte Datenpalette. */
html[data-frf-design="web3"] .tracking-scope {
  --tk-grund: var(--w3-grund);
  --tk-flaeche: var(--w3-karte);
  --tk-flaeche-2: var(--w3-flaeche);
  --tk-kachel: var(--w3-fuellung);
  --tk-rahmen: var(--w3-rand-leise);
  --tk-text: var(--w3-text);
  --tk-text-leise: var(--w3-text-2);
  --tk-akzent: var(--w3-akzent);
  --tk-radius: var(--w3-radius-karte);
  --tk-gitter: var(--w3-rand-leise);
  --tk-glanz-gruen: var(--w3-akzent-hauch);
  --tk-glanz-gruen-rand: var(--w3-akzent-rand);
  --tk-glanz-rand: var(--w3-rand);
  --tk-glanz-rand-mitte: var(--w3-rand-leise);
  --tk-glanz-licht: var(--w3-fuellung-mittel);
  --tk-glanz-hauch: var(--w3-kopf);
  --tk-silber-hell: var(--w3-text);
  --tk-silber-mitte: var(--w3-text-2);
  --tk-silber-gruen: var(--w3-akzent);
  color: var(--w3-text);
}

/* Unterreiter (Übersicht, Börsen, Portfolio, Transaktionen) als Segment-Spur. */
html[data-frf-design="web3"] .tracking-scope .tk-kopfleiste { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .tracking-scope .tk-reiterleiste {
  gap: 2px;
  padding: 4px;
  background: var(--w3-fuellung);
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .tracking-scope .tk-hauptreiter-knopf {
  padding: 7px 16px;
  border-color: transparent;
  color: var(--w3-text-2);
  font-size: 14px;
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope .tk-hauptreiter-knopf:hover:not(.ist-aktiv) {
  background: var(--w3-fuellung-mittel);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-hauptreiter-knopf.ist-aktiv {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope .tk-ladebalken::after { background: var(--w3-akzent); }
html[data-frf-design="web3"] .tracking-scope .tk-kreisel { border-color: var(--w3-rand); border-top-color: var(--w3-akzent); }

/* Segmente (Ansicht, Zeitraum, Aktiv/Vergangen, Typen, Kurve zeigt) als
   Plattform-Spur: Spur white/5, gewähltes Segment white/10 mit Kante. */
html[data-frf-design="web3"] .tracking-scope .tk-seg {
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  background: var(--w3-fuellung);
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .tracking-scope .tk-seg-knopf {
  background: transparent;
  border-color: transparent;
  color: var(--w3-text-2);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope .tk-seg-knopf:hover:not(.ist-aktiv) {
  background: var(--w3-fuellung-mittel);
  border-color: transparent;
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-seg-knopf.ist-aktiv {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope .tk-zaehler { background: var(--w3-fuellung-stark); color: var(--w3-text-2); font-weight: 500; }
html[data-frf-design="web3"] .tracking-scope .tk-seg-knopf.ist-aktiv .tk-zaehler { background: var(--w3-akzent); color: var(--w3-akzent-text); }

/* Sekundärknopf: white/5 mit Innenkante, ganz gerundet; Hover white/10. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig),
html[data-frf-design="web3"] .tracking-scope .tk-historie-knopf {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig):hover:not(:disabled),
html[data-frf-design="web3"] .tracking-scope .tk-historie-knopf:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-knopf-leise { color: var(--w3-text-2); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig).tk-knopf-gefahr { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig).tk-knopf-gefahr:hover:not(:disabled) {
  background: color-mix(in srgb, var(--w3-negativ) 16%, transparent);
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-knopf-huelle { border-radius: var(--w3-radius-feld); }
/* Primärknopf: Akzent mit dunkler Schrift, Hover 80 %. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig).tk-knopf-haupt {
  background: var(--w3-akzent);
  border-color: transparent;
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig).tk-knopf-haupt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  border-color: transparent;
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-icon-knopf { border-radius: var(--w3-radius-feld); color: var(--w3-text-2); }
html[data-frf-design="web3"] .tracking-scope .tk-icon-knopf:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-knopf, .tk-knopf-klein, .tk-knopf-winzig, .tk-icon-knopf, .tk-hauptreiter-knopf, .tk-seg-knopf, .tk-dd-ausloeser, .tk-badge, .tk-sortier):focus-visible,
html[data-frf-design="web3"] .tracking-scope .tk-knopf-huelle:focus-visible {
  box-shadow: var(--w3-ring);
}

/* Felder (Eingabe, Auswahl, Adresse, Suche, Dialogfelder): Plattform-Feld. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-eingabe, .tk-dd-ausloeser, .tk-adresse, .tk-select),
html[data-frf-design="web3"] .tracking-scope .tk-feld :is(input[type="text"], input[type="date"], input[type="password"], input[type="number"], input:not([type]), select) {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-feld textarea {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-eingabe, .tk-dd-ausloeser, .tk-select):hover:not(:disabled) {
  background: var(--w3-fuellung-mittel);
  border-color: transparent;
}
html[data-frf-design="web3"] .tracking-scope .tk-dd.ist-offen > .tk-dd-ausloeser { border-color: transparent; background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-eingabe, .tk-select):focus,
html[data-frf-design="web3"] .tracking-scope .tk-feld :is(input, select, textarea):focus,
html[data-frf-design="web3"] .tracking-scope .tk-dd-ausloeser:focus-visible {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"] .tracking-scope .tk-eingabe::placeholder { color: var(--w3-text-3); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-dd-pfeil, .tk-suche .tk-ico) { color: var(--w3-text-3); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-feld-label, .tk-kachel-label, .tk-bereich-titel) { color: var(--w3-text-3); font-weight: 500; }

/* Aufklapplisten (Wallet, Sortierung, Rückgängig, Börsenauswahl, Zeitraum):
   Plattform-Popover, Rand white/10, gewählte/Hover-Zeile white/10. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-dd-menue, .tk-historie-menue, .tk-bo-auswahl-menue, .tk-tx-zeitraum-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"] .tracking-scope :is(.tk-dd-option, .tk-bo-auswahl-option) { border-radius: var(--w3-radius-tip); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-dd-option:hover:not(:disabled), .tk-dd-option:focus-visible, .tk-bo-auswahl-option:hover) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] .tracking-scope .tk-dd-option.ist-gefahr { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] .tracking-scope .tk-dd-option.ist-gefahr:hover { background: color-mix(in srgb, var(--w3-negativ) 16%, transparent); }
html[data-frf-design="web3"] .tracking-scope .tk-dd-haken { color: var(--w3-akzent); }
html[data-frf-design="web3"] .tracking-scope .tk-dd-trenner { background: var(--w3-rand-leise); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-dd-kopf, .tk-dd-rechts) { color: var(--w3-text-3); }

/* Badges: neutral white/10 ohne Linie; Erfolg/Warnung/Gefahr bleiben
   Signalfarben. „Beste Rendite“ (tk-rekord) als Hervorhebung im Akzent. */
html[data-frf-design="web3"] .tracking-scope .tk-badge-neutral {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .tracking-scope .tk-badge-umriss { border-color: var(--w3-rand); color: var(--w3-text-2); }
html[data-frf-design="web3"] .tracking-scope .tk-rekord {
  background: var(--w3-akzent-hauch);
  border-color: var(--w3-akzent-rand);
  color: var(--w3-akzent);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope .tk-rekord svg { fill: var(--w3-akzent); }
html[data-frf-design="web3"] .tracking-scope .tk-glanz-text {
  background-image: linear-gradient(90deg, var(--w3-text-2) 0%, var(--w3-text) 45%, var(--w3-akzent) 55%, var(--w3-text-2) 100%);
}

/* Karten (Kacheln, Flächen, Strategien, Konten, Tabellenhüllen): Glanz unten
   rechts über der Kartenfläche, keine Randlinie, doppelte Innenkante. Der
   Schimmer guter Kacheln (.tk-glanz, !important in tracking.css) behält seinen
   Verlaufsrand, jetzt in Weiß/Akzent. */
html[data-frf-design="web3"] .tracking-scope .tk-kachelreihe > .tk-kachel,
html[data-frf-design="web3"] .tracking-scope :is(.tk-karte-flaeche, .tk-s-karte, .tk-listen-rahmen, .tk-bo-konto, .tk-bo-waage, .tk-bo-huelle, .tk-bo-kenn, .tk-pf-huelle, .tk-tx-huelle, .tk-paare-rahmen, .tk-apr-teilen, .tk-teilen-karte, .tk-kachel),
html[data-frf-design="web3"] .tracking-scope .tk-s-kennzeile > div,
html[data-frf-design="web3"] .tracking-scope .tk-s-verlaeufe .tk-tabelle-rahmen {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] .tracking-scope .tk-s-karte:hover { background: var(--w3-glanz), var(--w3-zeile-hover); border-color: transparent; }
html[data-frf-design="web3"] .tracking-scope .tk-s-karte:focus-visible { box-shadow: var(--w3-kante), var(--w3-ring); }
/* Beendete Strategie: ohne Glanz, nur die leise Randlinie. */
html[data-frf-design="web3"] .tracking-scope .tk-s-karte.ist-beendet {
  background: transparent;
  border-color: var(--w3-rand-leise);
  box-shadow: none;
}
/* Karte in der Karte (Kette und Protokoll im Portfolio): Kennzahl-Kachel white/4. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-pf-kette, .tk-pf-protokoll) {
  background: var(--w3-glanz), var(--w3-kopf);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-s-bahn, .tk-pf-bahn, .tk-bo-meter, .tk-bo-waage-leer) { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-s-tok, .tk-bo-tok, .tk-pf-tok, .tk-pf-kettenbild-leer) { background: var(--w3-flaeche); border-color: var(--w3-rand); }
html[data-frf-design="web3"] .tracking-scope .tk-bo-logo { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-s-seite, .tk-bo-seite) { border-color: var(--w3-rand); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-s-seite, .tk-bo-seite).ist-long { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .tracking-scope .tk-ring-spur { stroke: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .tracking-scope .tk-ring-neutral .tk-ring-wert { stroke: var(--w3-akzent); }
html[data-frf-design="web3"] .tracking-scope .tk-emblem { opacity: 0.12; }

/* Leerzustand: Karte mit gestrichelter Kante white/10, Symbol im Feldton. */
html[data-frf-design="web3"] .tracking-scope .tk-leerzustand {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .tracking-scope .tk-leerzustand-symbol {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] .tracking-scope .tk-leerzustand h3 { font-weight: 500; color: var(--w3-text); }

/* Hinweisleiste: Warnung bleibt Warnung, nur Radius; neutral im Akzent-Hauch. */
html[data-frf-design="web3"] .tracking-scope .tk-hinweisleiste { border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"] .tracking-scope .tk-hinweisleiste.ist-neutral {
  background: var(--w3-akzent-hauch);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}

/* Skelett und Akkordeon. */
html[data-frf-design="web3"] .tracking-scope .tk-skel {
  background: linear-gradient(90deg, var(--w3-fuellung) 25%, var(--w3-fuellung-stark) 50%, var(--w3-fuellung) 75%);
  background-size: 200% 100%;
}
html[data-frf-design="web3"] .tracking-scope .tk-akkordeon { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .tracking-scope .tk-akkordeon-titel { font-weight: 500; }

/* Schalter: aus white/10, an im Akzent mit dunklem Knopf (Plattform-Switch). */
html[data-frf-design="web3"] .tracking-scope .tk-toggle-bahn { background: var(--w3-fuellung-stark); border-color: transparent; }
html[data-frf-design="web3"] .tracking-scope .tk-toggle-bahn::after { background: var(--w3-text-2); }
html[data-frf-design="web3"] .tracking-scope .tk-toggle input:checked + .tk-toggle-bahn { background: var(--w3-akzent); border-color: transparent; }
html[data-frf-design="web3"] .tracking-scope .tk-toggle input:checked + .tk-toggle-bahn::after { background: var(--w3-akzent-text); }
html[data-frf-design="web3"] .tracking-scope .tk-toggle input:focus-visible + .tk-toggle-bahn { box-shadow: var(--w3-ring); }

/* Tabellen (Strategien, Konten, Positionen, Paare, Portfolio, Transaktionen,
   Verläufe): Kopf wie die Admin-Tabellen – deckende Fläche, white/45, medium;
   Zeilenlinien white/6, Hover white/3. Gilt auch für die fixierte Kopf-Kopie. */
html[data-frf-design="web3"] .tracking-scope :is(.tk-tabelle, .tk-pf-tab, .tk-tx-tab, .tk-bo-tabelle, .tk-paare, .tk-liste) th {
  background-color: var(--w3-flaeche);
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-tabelle, .tk-pf-tab, .tk-tx-tab, .tk-bo-tabelle, .tk-paare, .tk-liste) td { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-tabelle, .tk-pf-tab, .tk-tx-tab, .tk-paare) tbody tr:hover > td,
html[data-frf-design="web3"] .tracking-scope .tk-liste :is(.tk-zeile:hover, .tk-zeile:focus-visible) > td {
  background-color: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] .tracking-scope .tk-liste .tk-zeile:focus-visible { box-shadow: inset 0 0 0 2px var(--w3-akzent-rand); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-bo-gruppe-zeile, .tk-bo-spacer) td,
html[data-frf-design="web3"] .tracking-scope .tk-tabelle tbody tr.tk-bo-gruppe-zeile:hover td,
html[data-frf-design="web3"] .tracking-scope .tk-tabelle tbody.tk-bo-spacer tr:hover td {
  background-color: var(--w3-kopf);
}
html[data-frf-design="web3"] .tracking-scope .tk-bo-klapp:hover { background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"] .tracking-scope .tk-kopf-klon-huelle > table.tk-kopf-klon { border-bottom-color: var(--w3-rand-leise); }
/* Sortierte Spalte: Beschriftung weiß, Pfeil im Akzent. */
html[data-frf-design="web3"] .tracking-scope .tk-sortier-pfeil { color: var(--w3-akzent); }
html[data-frf-design="web3"] .tracking-scope :is(th[aria-sort="ascending"], th[aria-sort="descending"]) > .tk-sortier,
html[data-frf-design="web3"] .tracking-scope .tk-sortier:hover { color: var(--w3-text); }

/* Drawer (Strategie-Detail), Dialoge, Toast, eigener Tooltip. */
html[data-frf-design="web3"] .tracking-scope .tk-drawer {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .tracking-scope :is(.tk-drawer-kopf, .tk-drawer-fuss) { border-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .tracking-scope .tk-drawer-kopf h2 { font-weight: 500; }
html[data-frf-design="web3"] .tracking-scope .tk-dialog {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-schatten);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tracking-scope .tk-mehrfach-kachel {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .tracking-scope .tk-mehrfach-kachel:has(input:checked) {
  background: var(--w3-akzent-hauch);
  border-color: var(--w3-akzent-rand);
}
html[data-frf-design="web3"] .tracking-scope .tk-erklaerung-zuordnung { background: var(--w3-fuellung); border-radius: var(--w3-radius-tip); }
html[data-frf-design="web3"] .tracking-scope :is(.tk-kopplung-wert, .tk-paar-leiste.ist-offen) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .tracking-scope .tk-toast {
  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"] .tracking-scope .tk-tip {
  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);
}

/* Lade- und Hinweiszeile des Loaders (trackingTab.js, vor dem Bündel). */
html[data-frf-design="web3"] #trackingView :is(.tracking-lade, .tracking-notice) { color: var(--w3-text-2); }
html[data-frf-design="web3"] #trackingView .tracking-notice {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #trackingView .tracking-lade-kreis { border-color: var(--w3-rand); border-top-color: var(--w3-akzent); }

/* ── 2. Points / Vaults ▸ xStocks Points ────────────────────────────────
   Eigene Töne des Reiters (xStocks-Grün/Türkis, style.css --th-*) auf die
   Plattform: Hervorhebungen im Akzent, Plus-Werte und „verbunden“ bleiben
   grün (Zustand), Fehler rot. Kopf und Titel normal gesetzt (medium). */
html[data-frf-design="web3"] #xstocksPointsView.xstocks-points-view {
  background: var(--w3-grund);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-kicker,
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-section-heading span, .xstocks-points-category-detail-head > span, .xstocks-points-category-columns h4) {
  color: var(--w3-akzent);
  font-weight: 500;
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-title { color: var(--w3-text); font-weight: 500; letter-spacing: -0.02em; }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-subtitle, .xstocks-points-status, .xstocks-points-hero-eyebrow, .xstocks-points-hero-since) { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-status-loading { color: var(--w3-akzent); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-status-error { color: var(--w3-negativ-text); }

/* Karten: Wallet-Leiste, Kontostand, Boosts, Kategorie, Details. */
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-form, .xstocks-points-hero, .xstocks-points-card, .xstocks-points-category-detail, .xstocks-points-details) {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallets { scrollbar-color: var(--w3-scroll) transparent; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallets::-webkit-scrollbar-thumb { background: var(--w3-scroll); }

/* Kennzahl-Kacheln = Karte in der Karte (Wallets, Verteilung). */
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card, .xstocks-points-distribution-card) {
  background: var(--w3-glanz), var(--w3-kopf);
  border-color: transparent;
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card, .xstocks-points-distribution-card):is(:hover, :focus-visible) {
  background: var(--w3-glanz), var(--w3-fuellung-mittel);
  border-color: transparent;
}
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card.is-active, .xstocks-points-wallet-card.is-connected, .xstocks-points-distribution-card.is-open) {
  background: var(--w3-glanz), var(--w3-akzent-hauch);
  border-color: var(--w3-akzent-rand);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-add {
  background: transparent;
  border-color: var(--w3-rand);
  box-shadow: none;
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-connect-slot { border-color: var(--w3-rand); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card-addr, .xstocks-points-wallet-card-total) { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card-chain, .xstocks-points-wallet-card.is-connected .xstocks-points-wallet-card-chain) { color: var(--w3-text-3); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-card.is-active .xstocks-points-wallet-card-total { color: var(--w3-akzent); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-card-label, .xstocks-points-wallet-connect-note) { color: var(--w3-text-3); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-connect-title { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-remove { color: var(--w3-text-3); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-remove:hover {
  background: color-mix(in srgb, var(--w3-negativ) 16%, transparent);
  color: var(--w3-negativ-text);
}

/* Kontostand. */
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-hero-value { color: var(--w3-text); font-weight: 500; letter-spacing: -0.03em; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-hero-caret { color: var(--w3-text-3); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-wallet-chip, .xstocks-points-pill) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-pill { color: var(--w3-text); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-wallet-chip span:last-child { border-left-color: var(--w3-rand); color: var(--w3-akzent); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-pill-positive { color: var(--w3-positiv); }

/* Boosts. */
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-section-heading h2,
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-category-detail-head h3 { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-boost-row { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-boost-label, .xstocks-points-boost-copy strong) { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-boost-copy > span:last-child, .xstocks-points-boost-next, .xstocks-points-partner-days, .xstocks-points-progress-scale, .xstocks-points-boost-note) { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-progress { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-progress > span {
  background: linear-gradient(90deg, var(--w3-akzent-tief), var(--w3-akzent));
  box-shadow: none;
}
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-connection, .xstocks-points-spin-badge) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-connection.is-connected,
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-badge {
  background: color-mix(in srgb, var(--w3-positiv) 10%, transparent);
  color: var(--w3-positiv);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-message { color: var(--w3-akzent); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-message-error { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-result {
  background: var(--w3-glanz), var(--w3-akzent-hauch);
  border-color: var(--w3-akzent-rand);
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-result strong { color: var(--w3-akzent); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-result em { color: var(--w3-positiv); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-spin-result span, .xstocks-points-spin-result small) { color: var(--w3-text-2); }

/* Knöpfe: Glücksrad drehen / Laden / Link kopieren = Primär; Verbinden =
   Sekundär (ganz gerundet); Ghost leise. */
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-load-btn, .xstocks-points-spin-btn, .xstocks-points-referral-link button) {
  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"] #xstocksPointsView :is(.xstocks-points-load-btn, .xstocks-points-spin-btn, .xstocks-points-referral-link button):hover {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  filter: none;
  transform: none;
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-spin-btn:disabled {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-connect-btn, .xstocks-points-connect-btn-ghost) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-connect-btn-ghost { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-connect-btn, .xstocks-points-connect-btn-ghost):is(:hover, :focus-visible) {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-load-btn, .xstocks-points-spin-btn, .xstocks-points-referral-link button, .xstocks-points-connect-btn, .xstocks-points-distribution-card, .xstocks-points-wallet-card, .xstocks-points-hero-btn):focus-visible {
  outline: none;
  box-shadow: var(--w3-ring);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-input {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-input:focus { border-color: transparent; box-shadow: var(--w3-kante-feld), var(--w3-ring); }

/* Verteilung. */
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-distribution-card > span { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-distribution-card > strong { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-distribution-card > em { color: var(--w3-text-3); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-category-columns h4 { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-category-columns p, .xstocks-points-empty, .xstocks-points-history-note, .xstocks-points-history-subhead, .xstocks-points-history-context, .xstocks-points-detail-stat span) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-detail-stat { background: var(--w3-fuellung); border-radius: var(--w3-radius-tip); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-history-sources li { border-top-color: var(--w3-rand-leise); }

/* Tabellen: Kopf wie die Admin-Tabellen. */
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table-wrap {
  border-radius: var(--w3-radius-tip);
  box-shadow: inset 0 0 0 1px var(--w3-rand-leise);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table :is(th, td) { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table th {
  background: var(--w3-flaeche);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table td { color: var(--w3-text); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table td.src { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table tbody tr:hover > td { background: var(--w3-zeile-hover); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-table tr.xstocks-points-row-total td { border-top-color: var(--w3-rand); font-weight: 500; }

/* Aufklappblöcke (Quests, Konfiguration, Referral, Rohdaten). */
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-details > summary { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-details > summary:hover { background: var(--w3-zeile-hover); border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-details[open] > summary { border-bottom-color: var(--w3-rand-leise); border-radius: var(--w3-radius-karte) var(--w3-radius-karte) 0 0; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-details-toggle { color: var(--w3-akzent); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-list > div { background: var(--w3-fuellung); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-list > div:first-child { border-radius: var(--w3-radius-tip) var(--w3-radius-tip) 0 0; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-list > div:last-child { border-radius: 0 0 var(--w3-radius-tip) var(--w3-radius-tip); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-list span { color: var(--w3-text-2); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-list strong { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-referral-link a { color: var(--w3-akzent); }
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-quest {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #xstocksPointsView .xstocks-points-quest strong { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #xstocksPointsView :is(.xstocks-points-quest span, .xstocks-points-quest p) { color: var(--w3-text-2); }

/* Ladezustand (Skelett in Form des Ergebnisses). */
html[data-frf-design="web3"] #xstocksPointsView .lz-skel-karte {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}

/* ── 3. TEAM ▸ RH Punkte (rh-punkte.css) ──────────────────────────────── */
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-card, .rhp-log, .rhp-add) {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #rhPunkteView .rhp-log { overflow: hidden; }
html[data-frf-design="web3"] #rhPunkteView .rhp-card-label { font-weight: 500; }
html[data-frf-design="web3"] #rhPunkteView .rhp-points-value { font-weight: 500; letter-spacing: -0.02em; }
html[data-frf-design="web3"] #rhPunkteView .rhp-spark-wrap { color: var(--w3-akzent); }
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-hint, .rhp-warnung, .rhp-key-label, .rhp-zeit) { color: var(--w3-text-2); }
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-klein, .rhp-card-addr, .rhp-card-foot, .rhp-totals dt, .rhp-key-caret, .rhp-caret, .rhp-unterzeile, .rhp-geschaetzt) { color: var(--w3-text-3); }
html[data-frf-design="web3"] #rhPunkteView .rhp-hint strong { font-weight: 500; }

/* Takt und Rang als Pillen im Feldton; fällig = grün (Zustand). */
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-countdown, .rhp-rank) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #rhPunkteView .rhp-countdown-faellig { color: var(--w3-positiv); box-shadow: inset 0 0 0 1px var(--w3-positiv); }

/* Knöpfe: Sekundär, Hinzufügen/Speichern Primär, Entfernen rot. */
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
  padding-inline: 14px;
}
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf:hover:not(:disabled) { background: var(--w3-fuellung-stark); border-color: transparent; }
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf[aria-expanded="true"] { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf.rhp-knopf-primaer {
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf.rhp-knopf-primaer:hover:not(:disabled) { background: color-mix(in srgb, var(--w3-akzent) 80%, transparent); }
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf.rhp-knopf-gefahr { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] #rhPunkteView .rhp-knopf.rhp-knopf-gefahr:hover:not(:disabled) { background: color-mix(in srgb, var(--w3-negativ) 16%, transparent); }
html[data-frf-design="web3"] #rhPunkteView .rhp-link { color: var(--w3-text-2); }
html[data-frf-design="web3"] #rhPunkteView .rhp-link:hover { color: var(--w3-text); }
html[data-frf-design="web3"] #rhPunkteView .rhp-link-gefahr { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] #rhPunkteView .rhp-eingabe {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  padding-inline: 14px;
}
html[data-frf-design="web3"] #rhPunkteView .rhp-eingabe:focus { border-color: transparent; box-shadow: var(--w3-kante-feld), var(--w3-ring); }
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-knopf, .rhp-klickbar, .rhp-key-btn, .rhp-others-head):focus-visible { outline: none; box-shadow: var(--w3-ring); }

/* Meldungen: Fehler rot, Erfolg grün – nur Radius und leiser Grund. */
html[data-frf-design="web3"] #rhPunkteView .rhp-error {
  background: color-mix(in srgb, var(--w3-negativ) 8%, transparent);
  border-color: color-mix(in srgb, var(--w3-negativ) 45%, transparent);
  border-radius: var(--w3-radius-karte);
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] #rhPunkteView .rhp-meldung {
  background: color-mix(in srgb, var(--w3-positiv) 8%, transparent);
  border-color: color-mix(in srgb, var(--w3-positiv) 40%, transparent);
  border-radius: var(--w3-radius-karte);
  color: var(--w3-positiv);
}

/* Kennzahlen-Liste in der Karte: Karte in der Karte, Zeilen white/6. */
html[data-frf-design="web3"] #rhPunkteView .rhp-keys {
  background: var(--w3-kopf);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-key + .rhp-key, .rhp-key-days + .rhp-key, .rhp-key-days) { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rhPunkteView .rhp-key-btn:hover { background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"] #rhPunkteView .rhp-key-value { font-weight: 500; }
html[data-frf-design="web3"] #rhPunkteView .rhp-key-days { background: transparent; }

/* Badges und Marken. */
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-badge, .rhp-mark) { background: var(--w3-fuellung-stark); color: var(--w3-text-2); }
html[data-frf-design="web3"] #rhPunkteView .rhp-badge-offen { background: color-mix(in srgb, var(--w3-positiv) 12%, transparent); color: var(--w3-positiv); }
html[data-frf-design="web3"] #rhPunkteView .rhp-mark-warn { background: color-mix(in srgb, var(--w3-warnung) 14%, transparent); color: var(--w3-warnung); }
html[data-frf-design="web3"] #rhPunkteView .rhp-exec { border-color: var(--w3-rand); border-radius: var(--w3-radius-feld); color: var(--w3-text-2); padding-inline: 6px; }
html[data-frf-design="web3"] #rhPunkteView .rhp-exec-maker { border-color: color-mix(in srgb, var(--w3-positiv) 45%, transparent); color: var(--w3-positiv); }

/* Tabellen (Positionslog, Tageswerte): Kopf wie die Admin-Tabellen. */
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-log-table, .rhp-mini) th {
  background: var(--w3-flaeche);
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] #rhPunkteView .rhp-log-table th { text-transform: uppercase; letter-spacing: 0.04em; }
html[data-frf-design="web3"] #rhPunkteView .rhp-mini th { background: transparent; }
html[data-frf-design="web3"] #rhPunkteView :is(.rhp-log-table, .rhp-mini) td { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rhPunkteView .rhp-gruppe td { color: var(--w3-text-3); font-weight: 500; }
html[data-frf-design="web3"] #rhPunkteView .rhp-offen td { background: var(--w3-akzent-hauch); }
html[data-frf-design="web3"] #rhPunkteView .rhp-klickbar:hover td { background: var(--w3-zeile-hover); }
html[data-frf-design="web3"] #rhPunkteView .rhp-offen.rhp-klickbar:hover td { background: var(--w3-akzent-flaeche); }
html[data-frf-design="web3"] #rhPunkteView .rhp-fill td { background: var(--w3-kopf); color: var(--w3-text-2); }
html[data-frf-design="web3"] #rhPunkteView .rhp-markt { font-weight: 500; }

/* Wallets anderer Nutzer. */
html[data-frf-design="web3"] #rhPunkteView .rhp-others { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rhPunkteView .rhp-others-head { color: var(--w3-text); font-weight: 500; }
html[data-frf-design="web3"] #rhPunkteView .rhp-others-group h4 { font-weight: 500; }

/* Ladezustand (Skelett-Karten aus ladeZustand.js). */
html[data-frf-design="web3"] #rhPunkteView .lz-skel-karte {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}

/* ── 4. Handy ─────────────────────────────────────────────────────────
   Bis 720 px legt tracking.css die Unterreiter als Raster über die volle
   Breite (6/10 px Polster, 13 px): hier dieselben Maße, sonst ragt
   „Transaktionen“ über den Rand. Segment-Spuren, die umbrechen, bekommen am
   Handy den Kartenradius, damit die Spur keine Linsenform annimmt. */
@media (max-width: 720px) {
  html[data-frf-design="web3"] .tracking-scope .tk-reiterleiste { gap: 0; padding: 3px; }
  html[data-frf-design="web3"] .tracking-scope .tk-hauptreiter-knopf { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 640px) {
  html[data-frf-design="web3"] .tracking-scope .tk-seg { border-radius: var(--w3-radius-karte); }
}