/* ---------- T1 Grundlagen: Ebenen, Farben, abgeleitete Werte, Grundstile der Elemente, Zahlen, Kleinteile
   RookiePump – Design 4.0 „Cortado“: weniger Schaum, mehr Substanz. Ruhige, matte Arbeitsfläche (Haarlinien statt Schatten,
   Setzkasten mit 1-px-Fugen); nur Bedienbares schwebt (zwei Inseln oben, Leiste links – Handy: Dock unten); Details fahren als Inspektor von rechts herein.
   Gleiche Farbtöne wie 3.0 – gebaut mit @layer, Container-Abfragen, :has(), color-mix(), @property, @starting-style,
   View Transitions mit Richtung und scroll-gesteuerten Animationen (jeweils mit Rückfall). Teile T1–T9 in fester Reihenfolge.
   Regel: Rohe Farbwerte stehen NUR in den drei Farb-Blöcken unten (Zeilen 11–59: hell und zweimal dunkel – beide
   Dunkel-Blöcke gleich halten). Alles andere leitet sich per var()/color-mix() daraus ab.
   ========================================================================================================== */
@layer reset, base;

/* ---------- Farben & Grundwerte (hell) */
:root {
  --bg: #f3ece1; --bg-2: #ebe0cf; --panel: #fffaf2; --panel-2: #f4ebdd; --hover: #faf3e8;
  --text: #2b1d12; --muted: #7b6754; --faint: #a8957f; --line: #e5d7c3; --line-2: #d9c7ad;
  --accent: #8a5528; --accent-2: #c48a4f; --accent-soft: #f1e1cb; --on-accent: #fffaf2;
  --good: #5b8a37; --warn: #bf8418; --bad: #bf4a33;
  --meme: #b8573c; --tech: #4f7a8c;
  --logo-grund: transparent;   /* Seitenlogos (logoLink): hell ohne Untergrund */
  --grad: linear-gradient(135deg, #9a5f2c 0%, #c48a4f 100%);
  --hi: rgba(255, 255, 255, .78); --glow: rgba(196, 138, 79, .34);
  --shade: #3c230f;                         /* Grundton aller Schatten */
  --scrim: rgba(30, 18, 9, .38);            /* Abdunklung hinter Fenstern */
  --sheen: rgba(255, 255, 255, .34);        /* Glanzstreifen über Verlaufs-Knöpfen */
  --sheen-edge: rgba(255, 255, 255, .3);    /* Lichtkante oben auf Verlaufsflächen */
  --qr-bg: #ffffff;                         /* QR-Code braucht immer hellen Grund */
  --grain: .05;                             /* Stärke des Korns im Hintergrund */
  --shadow-sm: 0 1px 2px rgba(60, 35, 15, .07);
  --shadow: 0 1px 2px rgba(60, 35, 15, .05), 0 10px 30px -14px rgba(60, 35, 15, .2);
  --shadow-lg: 0 2px 6px rgba(60, 35, 15, .07), 0 30px 60px -22px rgba(60, 35, 15, .36);
  color-scheme: light;
}
/* ---------- Farben (dunkel) – zweimal: automatisch nach System und fest gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110d0a; --bg-2: #1a140f; --panel: #1c1611; --panel-2: #271e17; --hover: #231b15;
    --text: #f3e8d9; --muted: #b6a28c; --faint: #7f6d5b; --line: #322720; --line-2: #45372b;
    --accent: #d9a065; --accent-2: #ecc08b; --accent-soft: #382818; --on-accent: #1a120c;
    --good: #8fc46a; --warn: #e6ad4c; --bad: #e57a5f; --meme: #e58a6c; --tech: #8ab8c9;
    --logo-grund: #efe7dc;   /* dunkle Seitenlogos (Etherscan, BaseScan) brauchen eine helle Kachel */
    --grad: linear-gradient(135deg, #c98b4f 0%, #ecc08b 100%);
    --hi: rgba(255, 236, 210, .06); --glow: rgba(217, 160, 101, .3);
    --shade: #000000; --scrim: rgba(6, 4, 2, .62); --grain: .07;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -16px rgba(0, 0, 0, .75);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 32px 70px -22px rgba(0, 0, 0, .85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #110d0a; --bg-2: #1a140f; --panel: #1c1611; --panel-2: #271e17; --hover: #231b15;
  --text: #f3e8d9; --muted: #b6a28c; --faint: #7f6d5b; --line: #322720; --line-2: #45372b;
  --accent: #d9a065; --accent-2: #ecc08b; --accent-soft: #382818; --on-accent: #1a120c;
  --good: #8fc46a; --warn: #e6ad4c; --bad: #e57a5f; --meme: #e58a6c; --tech: #8ab8c9;
  --logo-grund: #efe7dc;
  --grad: linear-gradient(135deg, #c98b4f 0%, #ecc08b 100%);
  --hi: rgba(255, 236, 210, .06); --glow: rgba(217, 160, 101, .3);
  --shade: #000000; --scrim: rgba(6, 4, 2, .62); --grain: .07;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -16px rgba(0, 0, 0, .75);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 32px 70px -22px rgba(0, 0, 0, .85);
  color-scheme: dark;
}
/* ---------- abgeleitete Werte (gelten für beide Designs, weil sie aus den Farben oben gemischt werden) */
:root {
  /* aus 3.0 – Namen und Formeln unverändert (viele Bausteine und Skripte nutzen sie) */
  --border: color-mix(in srgb, var(--text) 10%, transparent);       /* feine Haarlinie, passt auf Glas und Fläche */
  --border-2: color-mix(in srgb, var(--text) 17%, transparent);
  --border-hot: color-mix(in srgb, var(--accent-2) 58%, transparent);
  --glass: color-mix(in srgb, var(--panel) 76%, transparent);
  --glass-2: color-mix(in srgb, var(--bg) 70%, transparent);
  --well: color-mix(in srgb, var(--panel-2) 78%, transparent);      /* eingelassene Fläche in Karten */
  --tint: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));  /* zarter Karamell-Ton für Auswahl */
  --ring: color-mix(in srgb, var(--accent) 85%, transparent);       /* Fokus-Rahmen (hell ≥ 5:1, dunkel ≥ 8:1) */
  --good-ink: color-mix(in srgb, var(--good) 70%, var(--text));    /* farbiger Text auf --tone-*-Flächen: ≥ 4,5:1 in hell und dunkel */
  --warn-ink: color-mix(in srgb, var(--warn) 60%, var(--text));
  --bad-ink: color-mix(in srgb, var(--bad) 80%, var(--text));
  /* neu in 4.0 */
  --ink: var(--text);            --on-ink: var(--bg);            /* Auswahl, Primärknopf, Hinweise – kehrt sich im Dunkeln um */
  --rule: var(--line);           --rule-2: var(--line-2);        /* Haarlinien und Fugen */
  --deck-glass: color-mix(in srgb, var(--panel) 80%, transparent);   /* Inseln, Leiste */
  --sunk: color-mix(in srgb, var(--panel-2) 55%, var(--bg));         /* eingelassene Felder, Knopf-Grund */
  --hl: color-mix(in srgb, var(--accent-2) 14%, transparent);        /* Überfahren, gewählte Zeile */
  --tone-good: color-mix(in srgb, var(--good) 10%, transparent);
  --tone-warn: color-mix(in srgb, var(--warn) 12%, transparent);
  --tone-bad: color-mix(in srgb, var(--bad) 10%, transparent);
  --hatch: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 8%, transparent) 0 6px, transparent 6px 12px);
  /* Maße */
  --edge: clamp(16px, 2.4vw, 40px);   --isle-h: 44px;   --dock-h: 0px;                  /* Dock unten nur am Handy (64 px) */
  --side-w: 228px;   --side-w-mini: 68px;                  /* Leiste links: mit Namen / nur Icons */
  --side-space: calc(max(var(--edge), env(safe-area-inset-left)) + var(--side-w));   /* links belegt: Rand + Leiste (Handy 0) */
  --top-safe: calc(14px + var(--isle-h) + 10px);           /* 68 px: klebende Köpfe sitzen unter den Inseln */
  --insp-w: clamp(400px, 30vw, 520px);   --rep-w: clamp(560px, 44vw, 820px);   --buy-w: 400px;   --stack-peek: 28px;
  --deck-r: 0px;                                           /* rechts belegter Platz (T8 setzt ihn, T2 nutzt ihn) */
  /* Radien */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --radius: var(--r-lg);
  /* Abstände (4er-Raster) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* Schrift: Fraunces (Überschriften), Instrument Sans (Text), Geist Mono (Zahlen, Adressen, Versal-Etiketten) */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: 44px; --fs-h2: 28px; --fs-h3: 20px; --fs-lg: 16px; --fs: 14.5px; --fs-sm: 12.5px; --fs-xs: 10.5px;
  /* Bewegung: Feder zum Ankommen, --out zum Gehen */
  --ease: cubic-bezier(.2, .9, .3, 1);   --out: cubic-bezier(.4, 0, 1, 1);
  /* Feder (gedämpfte Schwingung, ~5 % Überschwingen) – ältere Browser nehmen automatisch „ease“ */
  --spring: linear(0, .039, .135, .261, .397, .531, .653, .759, .846, .914, .965, 1.001, 1.025, 1.039, 1.045, 1.046, 1.043,
                   1.038, 1.032, 1.026, 1.02, 1.014, 1.01, 1.006, 1.003, 1.001, 1 65%, 1);
  --t-fast: .12s; --t-out: .2s; --t-in: .38s; --t-pill: .42s;
}
/* Wert mit Typ – damit füllt sich der Signal-Ring weich (JS setzt --v, Keyframes „sigRing“ in T9) */
@property --v { syntax: "<number>"; inherits: false; initial-value: 100; }

/* ---------- Grundstile der HTML-Elemente (als Ebene: jede Bausteinregel weiter unten gewinnt automatisch) */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords;
         -webkit-tap-highlight-color: transparent; }
  button, select, input, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; }
}
@layer base {
  /* Sprünge und Fokus landen nie unter den Inseln (oben) oder dem Handy-Dock (unten) */
  html { scrollbar-gutter: stable; scroll-padding: calc(var(--top-safe) + 8px) 0 calc(var(--dock-h) + 40px); }
  body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); background: var(--bg);
         font: 400 var(--fs)/1.5 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  h1, h2, h3, h4 { text-wrap: balance; font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 100; letter-spacing: -.03em; }
  ::selection { background: var(--hl); }
  /* Rollbalken: dünn, in Fugenfarbe */
  * { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
  ::-webkit-scrollbar-track { background: transparent; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* Eingabefelder und Auswahllisten: 36 px hoch, ruhiger Rand, Fokus als Karamell-Ring */
  select, input:is(:not([type]), [type=text], [type=search], [type=number], [type=url], [type=email], [type=password]), textarea {
    height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background-color: var(--panel); color: var(--text);
    font-size: 13.5px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  textarea { height: auto; min-height: 72px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
  input[type=number] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  select:focus, input:is(:not([type]), [type=text], [type=search], [type=number], [type=url], [type=email], [type=password]):focus, textarea:focus {
    outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }   /* transparent: im Kontrastmodus sichtbar */
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  /* Pfeil der Auswahlliste aus zwei Verläufen (Farbe --muted), Grund --panel */
  select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
           background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 17px) 52% / 5px 5px no-repeat,
                       linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 12px) 52% / 5px 5px no-repeat, var(--panel); }
  input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
  /* Schieberegler: feine Spur, runder Tinten-Knopf (Firefox zeigt den gefüllten Teil in --accent) */
  input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; padding: 0; background: none;
                      accent-color: var(--accent); cursor: pointer; }
  input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--rule-2); }
  input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--rule-2); }
  input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
                                            border: 3px solid var(--panel); background: var(--ink); box-shadow: 0 0 0 1px var(--border-2);
                                            transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
  input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--panel);
                                        background: var(--ink); box-shadow: 0 0 0 1px var(--border-2); }
  input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
  input[type=range]:focus-visible { outline: 2px solid transparent; }
  input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ring); }
  input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ring); }

  /* Tabellen: Haarlinien, Kopf in Mono-Versalien */
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: 13px; vertical-align: middle; white-space: nowrap; }
  th { color: var(--muted); font: 600 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; background: var(--panel); }
  code, kbd { font-family: var(--mono); }
}
[hidden] { display: none !important; }   /* bewusst ohne Ebene – siehe .pop-body .drawer (T3) */

/* ---------- Hintergrund: feste Lichtkante oben (ohne Bewegung, kein Punktraster, kein Korn) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120vw 50vh at 50% -12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent); }

/* ---------- Schrift, Zahlen, Icons
   Zahlen-Sammelregel (Mono + gleich breite Ziffern) – die einzige erlaubte Regel über Teile hinweg; die Klassen gehören
   weiter ihren Teilen (Kurse, Zähler und Glocken-Zahl in T2 stehen dort) */
.num, .kpis b, td.n, .lnum b, .mini-kpis b, .bot-kpis b, .st-grid b, .skpis b, .since .big b, .bilanz b, .cm-price b,
.mixcell b, .lage, b.up, b.down, .pill, .lsig, .rank, .br-num b, .rd-sum b, .buy-amt input, .bw-addr code,
.waddr, .shero .addr, .sparts td.n, .kv dd, .wstats b, .gauge span b, .ring text, .subtabs button b, .lnum, .cm-axis, .cm-tip,
.ph-stats b, .mk-price, .mk-stats b, .mk-big b, .fng-val b, .tp-sum b, .gs-num b, .hm-t span, .hm-t small, .pl-age, .pl-nums b {
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { letter-spacing: -.02em; }
td.n, th.n { text-align: right; }
/* Icons aus dem SVG-Sprite (Anfang von <body>, im Skript über ic("name")): Linien in Textfarbe */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Prüf-Zeilen (checkLine): Haken, Hinweis, Kreuz */
.ic.ok { color: var(--good); } .ic.warn { color: var(--warn); } .ic.bad { color: var(--bad); }
.chn { white-space: nowrap; } .chn .ic { margin-right: 3px; }
.up { color: var(--good); } .down { color: var(--bad); }
.note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
/* Tasten-Kappe (Tastenkürzel, Palette): Mono, unten etwas dicker wie eine echte Taste */
.kbd { display: inline-block; min-width: 22px; text-align: center; font: 600 11px/1.5 var(--mono); padding: 1px 6px; color: var(--muted);
       border-radius: var(--r-xs); border: 1px solid var(--border-2); border-bottom-width: 2px; background: var(--panel); }
.spacer { flex: 1; }

/* ---------- Breiten: am Handy läuft der Kopf mit – klebende Köpfe und Sprungziele sitzen dann ganz oben */
@media (max-width: 720px) {
  :root { --top-safe: 8px; --dock-h: 64px; --side-space: 0px; }
  html { scroll-padding: 12px 0 calc(var(--dock-h) + 40px + env(safe-area-inset-bottom)); }
}
/* ---------- Leiste schmal (nur Icons): per Schalter (html.side-mini) und auf Tablets immer; im Schiebe-Modus siehe T2 */
html.side-mini { --side-w: var(--side-w-mini); }
@media (min-width: 721px) and (max-width: 1023px) {
  :root { --side-w: var(--side-w-mini); }
}
/* ---------- T2 Rahmen & Navigation: Arbeitsfläche, Inseln oben, Kurse, Glocke, Leiste links (Handy: Dock unten) mit
   Bereichen, Mehr-Menü, Hinweise */

/* ---------- Rahmen: die Arbeitsfläche ist ein Container „main“ (Bausteine richten sich nach ihrer echten Breite – auch
   neben offenem Inspektor). Raster mit zwei Spalten: Reiterlinie (.subtabs) und Werkzeuge (.toolbar) teilen sich eine
   Zeile (#pageHead ist display: contents – T3); alle direkten Kinder laufen über die ganze Breite (ohne Gewicht, damit T3
   die Werkzeuge in Spalte 2 stellen kann). Ab 1280 px rückt die Fläche um --deck-r (Inspektor rechts) – ein Umbruch, kein
   Übergang – und bleibt bei breiten Fenstern mittig im freien Platz. .shell hält links Platz für die Leiste frei
   (--side-space, Handy 0) und bleibt sonst ohne eigene Gestaltung (extras.js schaltet sie bei deckenden Ebenen „inert“). */
.shell { padding-left: var(--side-space); }
main.wrap { container: main / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px;
            max-width: calc(1480px + var(--deck-r)); margin-inline: auto;
            padding: calc(var(--top-safe) + 16px) calc(max(var(--edge), env(safe-area-inset-right)) + var(--deck-r))
                     calc(var(--dock-h) + 68px + env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left)); }
:where(main.wrap) > * { grid-column: 1 / -1; }

/* ---------- Inseln oben: Marke links; Kurse, Design und Glocke rechts – fest, nur sie (und die Leiste) schweben.
   Achtung: Glas (backdrop-filter) ist Bezugsrahmen für position: fixed – Kinder darin sitzen deshalb nur absolute */
.deck-top { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: max(var(--edge), env(safe-area-inset-left));
            right: max(var(--edge), env(safe-area-inset-right)); z-index: 30; display: flex; justify-content: space-between;
            align-items: flex-start; gap: 12px; pointer-events: none; }
.isle { pointer-events: auto; height: var(--isle-h); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 8px;
        border: 1px solid var(--border); border-radius: var(--r-md); background: var(--deck-glass);
        -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
        box-shadow: var(--shadow-lg), inset 0 1px 0 var(--hi); }
/* Marke: Logo ohne Kachel, Name in Fraunces */
.brand { display: flex; align-items: center; white-space: nowrap; }
.isle-brand { gap: 9px; padding: 0 14px 0 8px; }
.isle-brand b { --t2-cut: -9px; max-width: 8em; overflow: hidden; font: 600 17px/1.35 var(--serif); font-variation-settings: "SOFT" 100;
                letter-spacing: -.03em; }
/* Logos: RookiePump (Kreis, Pfeil nach oben, Punkt) und RookieDrop (Kreis, Paket, Klebeband) – Sprite #i-rp/#i-rd,
   Farben folgen Hell/Dunkel. Die Marke ist ein Knopf: öffnet die Bereichswahl (Startbildschirm) */
.logo { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--text); transition: rotate var(--t-in) var(--spring); }
.logo svg { width: 28px; height: 28px; }
#brandBtn { color: var(--text); text-align: left; }

/* ---------- Drei Bereiche (html[data-area]: RookiePump = Standard ohne Attribut, RookieDrop = "drop", RookieManager =
   "manager"): Leiste nur mit den Einträgen des eigenen Bereichs (data-area im HTML, ohne = in allen), Marke mit passendem
   Logo und Namen, außerhalb von RookiePump keine Kurse */
html[data-area] .tabs [data-area="pump"], html:not([data-area="drop"]) .tabs [data-area="drop"],
html:not([data-area="manager"]) .tabs [data-area="manager"],
html[data-area] .lg-pump, html:not([data-area="drop"]) .lg-drop, html:not([data-area="manager"]) .lg-manager,
html[data-area] :is(.majors, .isle-sep, .solstat) { display: none; }
/* rechte Insel gleitet zur Seite, wenn rechts der Inspektor offen ist */
.isle-status { gap: 4px; padding: 0 6px; translate: calc(-1 * var(--deck-r)) 0; transition: translate var(--t-in) var(--spring); }
.isle-sep { width: 1px; height: 20px; flex: none; margin: 0 4px; background: var(--rule-2); }

/* ---------- Kurse SOL / BTC / ETH (Link zu CoinGecko): drei Text-Felder ohne Pillen, durch Haarlinien getrennt */
.majors { display: flex; align-items: center; }
.majors:empty { display: none; }   /* vor den ersten Kursen kein leeres Feld (Handy: Rahmen) */
.mj { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: var(--r-sm);
      color: var(--text); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast); }
.mj + .mj::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--rule-2); }
.mj .ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--text); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.mj span { font: 600 11px/1 var(--font); letter-spacing: .02em; color: var(--muted); }
.mjv { display: inline-flex; align-items: baseline; gap: 6px; font: 500 12.5px/1.1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums;
       letter-spacing: -.02em; }
.mj b { font: 600 11px/1.1 var(--mono); font-variant-numeric: tabular-nums; }   /* Änderung: nur farbiger Text (.up/.down aus T1) */
/* Mini-Kurve 7 Tage: nur die Linie, grün oder rot */
.spark.mj-sp { --t2-cut: -7px; width: 44px; max-width: 44px; height: 16px; flex: none; overflow: visible; }
.mj-sp .sp-area { display: none; }
.mj-sp .sp-line { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mj-sp.up .sp-line { stroke: var(--good); } .mj-sp.down .sp-line { stroke: var(--bad); }

/* ---------- Solana-Daten (nur Admin): Premium über Helius (grün), Premium sparsam (gelb), öffentlich (rot; ohne Helius
   grau) – Symbol und Balken (restliches Tagesguthaben) in der Farbe der Stufe, Text bleibt in Schriftfarbe */
.solstat { --sol: var(--muted); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0;
           border-radius: var(--r-sm); background: transparent; color: var(--text); font: 600 11.5px/1 var(--font); white-space: nowrap;
           cursor: pointer; transition: background-color var(--t-fast); }
body.pub .solstat { cursor: default; }   /* Besucher: nur Anzeige */
.solstat[data-stufe="premium"] { --sol: var(--good); }
.solstat[data-stufe="teilweise"] { --sol: var(--warn); }
.solstat[data-stufe="oeffentlich"] { --sol: var(--bad); }
.solstat .ic { width: 16px; height: 16px; color: var(--sol); }
.sol-bar { width: 28px; height: 4px; flex: none; border-radius: 2px; background: var(--rule-2); overflow: hidden; }
.sol-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sol); }
.sol-rest { display: none; }   /* „87 % übrig“ nur in der Handy-Zeile (am Mac steht es im Tooltip) */

/* ---------- Runde Knöpfe in der Insel: Design wechseln, Mitteilungen */
.bellbox { position: relative; display: flex; }
.bell { position: relative; width: 32px; height: 32px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
        background: transparent; color: var(--muted);
        transition: background-color var(--t-fast), color var(--t-fast), scale var(--t-fast) var(--ease); }
.bell .ic { width: 18px; height: 18px; }
.bell:active { scale: .92; }
.bell[aria-expanded="true"] { background: var(--hl); color: var(--text); }
.bell.ring .ic { animation: ringBell 1.2s ease-in-out 2; transform-origin: 50% 15%; }   /* neue Mitteilung: Glocke schwingt */
.themebtn .ic { transition: rotate var(--t-in) var(--spring); }
/* Zähler ungelesener Mitteilungen */
.bell-n { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; text-align: center;
          font: 600 10px/16px var(--mono); font-variant-numeric: tabular-nums; background: var(--bad); color: var(--on-accent);
          box-shadow: 0 0 0 2px var(--panel); }

/* ---------- Glocken-Liste: deckend (kein zweites Glas in der Insel), klappt unter der Glocke auf */
.bellpop { position: absolute; right: -6px; top: calc(100% + 14px); z-index: 60; width: min(380px, calc(100vw - 24px)); max-height: 60vh;
           overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel);
           box-shadow: var(--shadow-lg); transform-origin: top right;
           transition: opacity var(--t-in) var(--ease), translate var(--t-in) var(--spring); }
@starting-style { .bellpop { opacity: 0; translate: 0 -6px; } }
.bp-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 14px 14px 12px 16px;
           border-bottom: 1px solid var(--rule); background: var(--panel); }
.bp-head b { font: 600 17px/1.2 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.02em; }
/* Ton / Benachrichtigungen: kleiner Umriss-Knopf (blockiert = nur Text) */
.bp-notify { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 999px;
             background: transparent; color: var(--muted); font: 600 11.5px/1 var(--font); white-space: nowrap;
             transition: color var(--t-fast), border-color var(--t-fast); }
span.bp-notify { cursor: default; border-style: dashed; }
.bp-notify.on { color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--tone-good); }
.bp-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.45;
           cursor: pointer; transition: background-color var(--t-fast); }
.bp-item:last-child { border-bottom: 0; }
.bp-item > div { min-width: 0; overflow-wrap: anywhere; }
.bp-item.new { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }   /* ungelesen */
.bp-item .ti { width: 30px; height: 30px; }
.bp-item .ti .ic { width: 16px; height: 16px; }
.bp-item.k-up .ti, .bp-item.k-signal .ti { color: var(--good); background: var(--tone-good); }
.bp-item.k-down .ti, .bp-item.k-rug .ti { color: var(--bad); background: var(--tone-bad); }
.bp-item small { display: block; margin-top: 3px; font: 500 11px/1.3 var(--mono); color: var(--faint); }
.bp-empty { padding: 32px 22px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; text-wrap: pretty; }

/* ---------- Icon-Kachel (Mitteilungen, Mehr-Menü; Seitenkopf, Bericht und Vorlagen gestalten ihre eigene – in der Leiste ohne Kachel) */
.ti { position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); font-style: normal;
      background: var(--sunk); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.ti .ic { width: 17px; height: 17px; }

/* ---------- Leiste (aside#side.dock): ab 721 px links unter der Marke über die ganze Höhe – Befehlstaste, Bereiche in
   Gruppen, unten abgetrennt „Mehr“ (Aussortiert, Kontakt, Anmelden; .grow schiebt die Gruppe ans Ende), darunter der
   Namen-Schalter. Breite --side-w (T1). Die Leiste ist ein Container „dock“: ist sie schmal, zeigen ihre Einträge nur
   Icons (Name als Schild daneben, siehe unten). Am Handy ist sie das Dock unten (Regeln am Ende von T2).
   Achtung: Glas (backdrop-filter) ist Bezugsrahmen für position: fixed – Kinder darin sitzen deshalb nur absolute */
.dock { position: fixed; top: var(--top-safe); bottom: calc(16px + env(safe-area-inset-bottom)); left: max(var(--edge), env(safe-area-inset-left));
        z-index: 40; width: var(--side-w); padding: 8px; display: flex; flex-direction: column; gap: 6px; container: dock / inline-size;
        border: 1px solid var(--border); border-radius: var(--r-xl);
        background: var(--panel); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--hi); }   /* ohne Glas: links liegt nichts darunter (spart Rechenzeit beim Scrollen) */
/* Befehlstaste (#searchBtn): öffnet die Befehlspalette (Strg/⌘ K) */
.gs-open { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 8px 0 13px; border: 1px solid var(--border);
           border-radius: var(--r-md); background: var(--sunk); color: var(--muted); font: 500 13px/1 var(--font); white-space: nowrap;
           transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.gs-open .ic { width: 18px; height: 18px; color: var(--accent); }
.gs-open span { overflow: hidden; text-overflow: ellipsis; }
.gs-open kbd { margin-left: auto; padding: 4px 6px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--r-xs);
               background: var(--panel); color: var(--muted); font: 600 10.5px/1 var(--mono); }
.dock-cmd { flex: none; }
.dock-sep { flex: none; height: 1px; margin: 0 6px; background: var(--rule); }

/* ---------- Bereiche (#tabs): Zeilen mit Icon und Name, die Tinten-Pille gleitet hinter den gewählten Bereich. Reicht die
   Höhe nicht, rollt die Liste in sich. moveTabPill() misst offsetLeft/Top/Width/Height relativ zu #tabs – .tabs muss
   deshalb position: relative behalten */
.tabs { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden auto; overscroll-behavior: contain;
        scrollbar-width: none; }   /* ohne Rollbalken – er nähme den Zeilen (und der Pille) Breite weg */
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px 0 12px;
               border: 0; border-radius: var(--r-md); background: none; color: var(--muted); text-align: left; white-space: nowrap;
               transition: color var(--t-out) var(--ease), background-color var(--t-fast); }
.tabs button.on { color: var(--on-ink); }
.tabs .ti { width: 24px; height: 24px; border-radius: 0; background: none; box-shadow: none; color: inherit; }
.tabs .ti .ic { width: 21px; height: 21px; stroke-width: 1.8; }
.tabs .tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 13.5px/1.2 var(--font); }
.tabs .tl small { display: none; }
/* „Mehr“ gibt es nur am Handy – in der Leiste steht alles; die Pille springt dorthin, wenn der gewählte Bereich im Mehr-Menü steht */
.tabs .more-btn { display: none; }
.more-btn[aria-expanded="true"]:not(.on) { color: var(--text); background: var(--hl); }
/* Tinten-Pille (#tabPill): JS setzt Breite, Höhe und Verschiebung */
.pill-bg { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r-md); background: var(--ink); pointer-events: none;
           box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--shade) 55%, transparent);
           transition: transform var(--t-pill) var(--spring), width .3s var(--ease), height .3s var(--ease); }
/* Gruppen-Überschriften als Versal-Etiketten; „Mehr“ sitzt unten (.grow davor) mit Haarlinie darüber */
.side-group { flex: none; padding: 14px 12px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--faint);
              font: 600 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.side-group.first { padding-top: 4px; }
.tabs .grow { flex: 1 0 8px; }
.grow + .side-group { margin-top: 6px; border-top: 1px solid var(--rule); }
/* Zähler: Mono-Abzeichen am Zeilenende (schmale Leiste und Handy: oben rechts am Icon); auf der Pille mit Ring in Tinte */
.count { flex: none; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
         text-align: center; font: 600 10px/16px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; pointer-events: none;
         background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--panel); }
.tabs button.on .count { box-shadow: 0 0 0 2px var(--ink); }
.count.live-n { background: color-mix(in srgb, var(--bad) 16%, var(--panel)); color: var(--bad-ink); }   /* Coins: live */
.count.bump { animation: bump .5s var(--spring); }
/* Laufen-Punkt am Trading-Bot: Übung grün, Echt rot, wartet gelb (links oben am Icon, der Zähler sitzt rechts) */
.tabs button.bot-run .ti::after { content: ""; position: absolute; top: -1px; left: -3px; width: 8px; height: 8px; border-radius: 50%;
                                  background: var(--good); box-shadow: 0 0 0 2px var(--panel); animation: runPulse 1.8s ease-in-out infinite; }
.tabs button.bot-live .ti::after { background: var(--bad); --pulse: var(--bad); }
.tabs button.bot-wait .ti::after { background: var(--warn); --pulse: var(--warn); }
/* Namen ein-/ausblenden: Chevron unten in der Leiste (zeigt nach links = einklappen, eingeklappt nach rechts) */
.side-toggle { width: 32px; height: 32px; flex: none; align-self: flex-start; margin-left: 6px; padding: 0; display: grid; place-items: center;
               border: 0; border-radius: 50%; background: transparent; color: var(--faint);
               transition: color var(--t-fast), background-color var(--t-fast), rotate var(--t-in) var(--spring); }
.side-toggle .ic { width: 16px; height: 16px; }
.dock.mini .side-toggle { rotate: 180deg; }

/* ---------- Schmale Leiste (Container „dock“ ≤ 120 px): nur Icons, Name als Schild rechts daneben beim Überfahren oder
   Fokus (zusätzlich zum title). Die Liste rollt dann nicht – sonst schnitte sie die Schilder ab; erst unter 640 px Höhe */
@container dock (max-width: 120px) {
  .gs-open { width: 48px; padding: 0; align-self: center; justify-content: center; border-radius: 50%; }
  .gs-open span, .gs-open kbd { display: none; }
  .tabs { overflow: visible; }
  .tabs button { justify-content: center; height: 44px; padding: 0; }
  .tabs .tl { position: absolute; top: 50%; left: calc(100% + 14px); flex: none; overflow: visible; padding: 5px 9px; border-radius: 8px;
              background: var(--ink); color: var(--on-ink); font-size: 11.5px; box-shadow: var(--shadow); pointer-events: none;
              opacity: 0; translate: -4px -50%; transition: opacity var(--t-fast), translate var(--t-fast) var(--ease); }
  .tabs button:focus-visible .tl { opacity: 1; translate: 0 -50%; }
  .tabs .count { position: absolute; top: 2px; left: calc(50% + 5px); }
  .side-group { height: 1px; margin: 6px 10px; padding: 0; font-size: 0; background: var(--rule-2); }
  .side-group.first { display: none; }
  .grow + .side-group { border: 0; }
  .side-toggle { align-self: center; margin: 0; }
}
/* ---------- Niedrige Fenster (≤ 760 px hoch, z. B. Laptop mit 768 px): engere Zeilen, Gruppen nur als Trennstriche – so
   passt die Leiste bis etwa 640 px Höhe ohne Rollen */
@media (min-width: 721px) and (max-height: 760px) {
  .gs-open { height: 40px; }
  .tabs button { height: 34px; }
  .side-group { height: 1px; margin: 6px 10px; padding: 0; font-size: 0; background: var(--rule-2); }
  .side-group.first { display: none; }
  .grow + .side-group { border: 0; }
  @container dock (max-width: 120px) {
    .gs-open { width: 40px; }
    .tabs button { height: 35px; }
  }
}
/* unter 700 px Höhe: Zeilen 33 px, 1 px Abstand, kein Mindestabstand vor „Mehr“ – so passt auch die längere RookieDrop-Leiste
   (mit „Bereich wechseln“) bis 640 px Höhe ohne Rollen; schmal liefe sie sonst über (overflow: visible) */
@media (min-width: 721px) and (max-height: 699px) {
  .tabs { gap: 1px; }
  .tabs button { height: 33px; }
  .tabs .grow { flex-basis: 0; }
}
@media (min-width: 721px) and (max-height: 639px) {
  @container dock (max-width: 120px) { .tabs { overflow: hidden auto; } }
}

/* ---------- Mehr-Menü (#moreSheet, nur am Handy): alles, was im Dock gerade nicht zu sehen ist (seiten.js sammelt es,
   .ms-sep trennt die Mehr-Bereiche ab); deckend, fährt über dem Dock auf */
.moresheet { position: absolute; right: 8px; bottom: calc(100% + 12px); z-index: 60; width: 260px; padding: 6px; display: grid; gap: 2px;
             border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-lg);
             transition: opacity var(--t-in) var(--ease), translate var(--t-in) var(--spring); }
@starting-style { .moresheet { opacity: 0; translate: 0 8px; } }
.moresheet button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px 6px 6px; border: 0; border-radius: var(--r-sm);
                    background: none; color: var(--text); font: 600 13.5px/1.25 var(--font); text-align: left; transition: background-color var(--t-fast); }
.moresheet button.on { background: var(--hl); }
.moresheet button.on .ti { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.moresheet small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.ms-sep { height: 1px; margin: 4px 8px; background: var(--rule); }

/* ---------- Hinweise (#toasts): Tinten-Pillen oben mittig unter den Inseln, über allen Fenstern; höchstens drei gleichzeitig */
.toasts { position: fixed; top: calc(var(--top-safe) + 4px); left: 50%; z-index: 99; width: max-content; max-width: calc(100vw - 32px);
          display: grid; gap: 8px; justify-items: center; pointer-events: none;
          translate: calc(-50% + (var(--side-space) - var(--deck-r)) / 2) 0; transition: translate var(--t-in) var(--spring); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px;
         border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--on-ink); font: 600 13px/1.35 var(--font);
         box-shadow: var(--shadow-lg); animation: toast-in var(--t-in) var(--spring) both; }
.toast.out { animation: toast-out .3s var(--out) both; }
.toast i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 72%, var(--on-ink));
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 28%, transparent); }
.toast:nth-last-child(n+4) { display: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 -12px; scale: .96; } }
@keyframes toast-out { to { opacity: 0; translate: 0 -10px; scale: .97; } }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .brand:hover .logo { rotate: -8deg; }
  .mj:hover { background: var(--hl); }
  .bell:hover, .solstat:hover { background: var(--hl); color: var(--text); }
  .themebtn:hover .ic { rotate: -25deg; }
  button.bp-notify:hover { color: var(--text); border-color: var(--border-hot); }
  .bp-item:hover { background: var(--hover); }
  .gs-open:hover { border-color: var(--border-hot); color: var(--text); }
  .tabs button:not(.on):hover { color: var(--text); background: var(--hl); }
  .side-toggle:hover { color: var(--text); background: var(--hl); }
  .moresheet button:hover { background: var(--hl); }
  @container dock (max-width: 120px) { .tabs button:hover .tl { opacity: 1; translate: 0 -50%; } }
}

/* ---------- Ohne Glas-Unterstützung: Inseln und Leiste deckend */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .isle, .dock { background: var(--panel); }
}

/* ---------- Beim Scrollen: Markenname und Mini-Kurven ziehen sich zurück (0–120 px Scrollweg), die Inseln werden schmal */
@keyframes isle-fade { to { opacity: 0; max-width: 0; margin-inline-start: var(--t2-cut, 0px); } }
@supports (animation-timeline: scroll()) {
  @media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
    .isle-brand b, .mj-sp { animation: isle-fade linear both; animation-timeline: scroll(root); animation-range: 0px 120px; }
  }
}

/* ---------- Marke so breit wie die Leiste darunter (eine Spalte links) */
@media (min-width: 721px) {
  .isle-brand { min-width: var(--side-w); }
}

/* ---------- Feinstufen: ≤ 1100 px Kurse ohne Mini-Kurve und Namen, ≤ 960 px Marke nur als Logo */
@media (max-width: 1100px) {
  .mj span, .mj .mj-sp { display: none; }   /* .mj .mj-sp: muss gegen .spark { display: block } aus T5 gewinnen */
}
@media (min-width: 721px) and (max-width: 960px) {
  .isle-brand { padding-right: 8px; }
  .isle-brand b { display: none; }
  .solstat .sol-lbl { display: none; }   /* Solana-Daten: nur Symbol und Balken (Text im Tooltip) */
}
@media (min-width: 721px) and (max-width: 1023px) {
  .side-toggle { display: none; }   /* Leiste ist hier immer schmal (T1) */
}

/* ---------- Schiebe-Modus (ab 1280 px, Inspektor oder Bericht rechts offen): Platz für die Arbeitsfläche – die Leiste wird
   bis 1679 px schmal (nur Icons, ohne Namen-Schalter; die Pille misst ein ResizeObserver neu), Marke nur als Logo,
   Kurse ohne Namen und Kurve. Ohne :has() gibt es keinen Schiebe-Modus. */
@media (min-width: 1280px) and (max-width: 1679px) {
  @supports selector(:has(*)) {
    html:has(.insp:not(.insp-narrow):not([hidden])) { --side-w: var(--side-w-mini); }
    html:has(.insp:not(.insp-narrow):not([hidden])) .side-toggle { display: none; }
  }
}
@media (min-width: 1280px) {
  @supports selector(:has(*)) {
    html:has(.insp:not(.insp-narrow):not([hidden])) .isle-brand b,
    html:has(.insp:not(.insp-narrow):not([hidden])) .mj span,
    html:has(.insp:not(.insp-narrow):not([hidden])) .mj-sp { display: none; }
    html:has(.insp:not(.insp-narrow):not([hidden])) .isle-brand { padding-right: 8px; }
  }
}

/* ---------- Windows-Kontrastmodus: Pille als Systemfarbe, schwebende Teile mit Rand */
@media (forced-colors: active) {
  .pill-bg { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  .tabs button.on { color: HighlightText; }
  .dock, .bellpop, .moresheet, .toast { border: 1px solid CanvasText; }
  .ms-sep { background: CanvasText; }
}
@media (forced-colors: active) and (min-width: 721px) {
  .isle { border: 1px solid CanvasText; }
}

/* ---------- Handy (≤ 720 px) */
@media (max-width: 720px) {
  .bp-notify { position: relative; }   /* Tippfläche 44 px */
  .bp-notify::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }
  main.wrap { grid-template-columns: minmax(0, 1fr);
              padding: 12px max(14px, env(safe-area-inset-right)) calc(var(--dock-h) + 40px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  /* Kopf läuft mit (nicht fest): Zeile 1 Marke links, Design + Glocke rechts; Zeile 2 die drei Kurse als gleich breite Felder */
  .deck-top { position: relative; inset: auto; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
              gap: 8px 2px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
              pointer-events: auto; }
  .isle { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .isle-status { display: contents; }
  .isle-sep { display: none; }
  .isle-brand { min-height: 44px; }
  .isle-brand b { font-size: 19px; }
  .majors { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule);
            border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
  .mj { min-width: 0; height: 48px; padding: 0 8px; justify-content: center; border-radius: 0; }
  .mj + .mj::before { top: 10px; bottom: 10px; }
  .mj span, .mj .mj-sp { display: none; }   /* .mj .mj-sp: muss gegen .spark { display: block } aus T5 gewinnen */
  .mjv { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .bell { width: 44px; height: 44px; }
  .bell .ic { width: 20px; height: 20px; }
  /* Solana-Daten: eigene Zeile unter den Kursen – Symbol, Text, Balken und „% übrig“ (kein Tooltip am Handy) */
  .solstat { grid-column: 1 / -1; grid-row: 3; height: 40px; gap: 8px; padding: 0 12px; border: 1px solid var(--rule);
             border-radius: var(--r-md); background: var(--panel); font-size: 12.5px; }
  .solstat .ic { width: 18px; height: 18px; }
  .solstat .sol-bar { flex: 1 1 auto; width: auto; max-width: 160px; height: 5px; }
  .sol-rest { display: inline; margin-left: auto; color: var(--muted); font: 500 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
  .bell-n { top: 4px; right: 4px; }
  /* Glocken-Liste in voller Breite unter dem Kopf */
  .bellbox { position: static; }
  .bellpop { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); top: calc(100% + 8px); width: auto;
             max-height: min(70vh, calc(100dvh - 210px)); }
  /* Dock fest unten: Befehl · Markt · Coins · Merkliste · Trading-Bot · Mehr (RookieDrop: Übersicht · Margen-Rechner) –
     Icon über Name, auch bei .mini */
  .dock { background: var(--deck-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }   /* Dock schwebt über dem Inhalt */
  .dock { top: auto; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
          width: auto; height: var(--dock-h); padding: 6px; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
  .gs-open { width: 48px; height: 48px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
  .gs-open .ic { color: inherit; }
  .gs-open span, .gs-open kbd { display: none; }
  .tabs { min-width: 0; flex-direction: row; align-items: center; overflow: visible; }
  .tabs button { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 2px; min-width: 44px; height: 52px; padding: 0 2px; }   /* Breite nach Name, Rest gleich verteilt */
  .tabs .tl { flex: none; max-width: 100%; font-size: 10px; letter-spacing: .01em; }
  .tabs .count { position: absolute; top: 2px; left: calc(50% + 6px); }
  .tabs button[data-v]:not([data-dock]) { display: none; }   /* Dock: data-dock im HTML; der Rest steht im Mehr-Menü */
  .tabs .more-btn { display: flex; }
  .side-group, .tabs .grow, .dock-sep, .side-toggle, #areaSwitch { display: none; }   /* Bereich wechseln: im Mehr-Menü */
  /* Mehr-Menü über dem Dock in voller Dock-Breite (Radar, Wallets, Screener | Aussortiert, Kontakt, Anmelden) */
  .moresheet { left: 0; right: 0; width: auto; }
  /* Hinweise oben unter der Sicherheitszone */
  .toasts { top: calc(10px + env(safe-area-inset-top)); translate: -50% 0; }
}
/* ---------- T3 Seitenkopf, Werkzeuge, Bedienelemente, Filter
   Seitenkopf (Titel, Messwerte, Reiterlinie, Werkzeuge in einer Zeile), Ergebniszeile, Knöpfe, Segmente, Chips,
   das Filter-Feld im Inspektor (nummerierte Zonen per CSS-Zähler), Filter je Bereich, Leer- und Ladezustände.
   Nur Werte aus T1 (var()/color-mix()), eigene Hilfswerte mit Vorsilbe --t3-. Überfahren nur bei echter Maus.
   Keine Animation beim normalen Neuzeichnen (Ergebniszeile und #view werden alle paar Sekunden neu gebaut).
   Breiten-Regeln am Ende der Datei. */

/* ---------- Seitenkopf: #pageHead ist display: contents – seine Kinder liegen direkt im Raster von main.wrap (T2:
   Spalten „minmax(0, 1fr) auto“). Zeile 1 = .ph-top über die ganze Breite, Zeile 2 = .subtabs (Spalte 1) neben der
   Werkzeugleiste (Spalte 2). Beide tragen unten eine Haarlinie, die bündig durchläuft */
.pagehead { display: contents; }
.ph-top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 32px;
          padding-bottom: 22px; }
.ph-top h1 { grid-column: 1; grid-row: 1; margin: 0; display: flex; align-items: center; min-width: 0; color: var(--text);
             font: 600 44px/1.02 var(--serif); font-size: clamp(28px, 3.4cqi, 44px); letter-spacing: -.035em;
             font-variation-settings: "SOFT" 100; }
.ph-top h1 .ti { width: auto; height: auto; flex: none; display: inline-grid; place-items: center; margin-right: 12px; padding: 0;
                 border-radius: 0; background: none; box-shadow: none; color: var(--accent); }
.ph-top h1 .ti .ic { width: 22px; height: 22px; }
.ph-top p { grid-column: 1; grid-row: 2; margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Messwerte rechts: ohne Kästen, durch Haarlinien getrennt, Zahl groß in Mono */
.ph-stats { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; padding-bottom: 2px; }
.ph-stats div { display: grid; gap: 4px; padding: 0 18px; border-left: 1px solid var(--rule); white-space: nowrap; }
.ph-stats div:first-child { border-left: 0; padding-left: 0; }
.ph-stats div:last-child { padding-right: 0; }
.ph-stats span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ph-stats b { font: 600 20px/1.1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Reiterlinie: Text-Reiter, der gewählte bekommt einen 2-px-Tintenstrich an der Unterkante (über der Haarlinie).
   Der Strich sitzt innen im Knopf – die Leiste scrollt waagerecht und würde alles außerhalb abschneiden */
.subtabs { grid-column: 1; align-self: end; min-width: 0; display: flex; gap: 22px; margin-bottom: 16px;
           border-bottom: 1px solid var(--rule); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 0 12px;
                  border: 0; border-radius: 0; background: none; color: var(--muted); font: 600 14px/1.5 var(--font); white-space: nowrap;
                  transition: color var(--t-fast); }
.subtabs button .ic { width: 15px; height: 15px; }
.subtabs button:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }   /* .subtabs scrollt waagerecht und schneidet sonst den Ring ab */
.subtabs button b { font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: -.01em; }
.subtabs button.on { color: var(--text); }
.subtabs button.on b { color: var(--accent); }
.subtabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--ink); }

/* ---------- Werkzeugleiste (Spalte 2): läuft unten bündig mit der Reiterlinie. Der Rand reicht in die Rasterlücke
   (24 px, T2) hinein, damit die Haarlinie ohne Unterbrechung durchgeht */
.wrap > .toolbar { grid-column: 2; }
.toolbar { --t3-gap: 24px; align-self: end; display: flex; align-items: center; gap: 8px; margin: 0 0 16px calc(-1 * var(--t3-gap));
           padding: 0 0 8px var(--t3-gap); border-bottom: 1px solid var(--rule); }
.toolbar .right { display: flex; align-items: center; gap: 8px; }
/* fehlt eine der beiden Hälften, nimmt die andere die ganze Breite (Bot: nur Reiter; ohne Reiter: nur Werkzeuge) */
@supports selector(:has(*)) {
  #pageHead:has(+ .toolbar[hidden]) .subtabs { grid-column: 1 / -1; }
  .wrap > #pageHead:not(:has(.subtabs)) + .toolbar { grid-column: 1 / -1; margin-left: 0; padding-left: 0; justify-content: flex-end; }
}
#hitTools #sortSel { max-width: 200px; }

/* ---------- Suchfeld: Lupe links, beim Fokus in Karamell */
.search { position: relative; display: block; min-width: 0; }
.search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none;
              transition: color var(--t-fast); }
.search:focus-within svg { color: var(--accent); }
.search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: var(--r-sm);
                background: var(--sunk); color: var(--text); font: 400 13.5px/1 var(--font); }
.search input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent-2); background: var(--panel); box-shadow: 0 0 0 3px var(--ring); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.toolbar .search { flex: 0 1 240px; width: 240px; }

/* ---------- Ergebniszeile über der Liste (#resultbar): Zahlen, Chips, Live-Punkt, Trend-Themen */
.resultbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.resultbar b { color: var(--text); font-weight: 600; }
.resultbar > small { font-size: 12px; }
.livebar-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; border-radius: 50%;
               background: var(--bad); animation: livePulse 1.6s infinite; }
.livebar-dot.off { background: var(--faint); animation: none; }
/* Trend-Themen: Text-Chips, gewählt = Tinte */
.themes { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.themes em { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font: 600 10.5px/1.4 var(--mono); font-style: normal;
             letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.themes em .ic { width: 13px; height: 13px; color: var(--accent); }
.themes button { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--border);
                 border-radius: var(--r-xs); background: transparent; color: var(--text); font: 600 12px/1 var(--font);
                 transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.themes button b { font: 500 10.5px/1 var(--mono); color: var(--faint); }
.themes button.on { background: var(--ink); border-color: transparent; color: var(--on-ink); }
.themes button.on b { color: inherit; opacity: .7; }

/* ---------- Knöpfe: 36 px hoch (über Innenabstand, damit Inline-Abstände im Skript weiter greifen), Grund eingelassen.
   .primary = Tinte (kehrt sich im Dunkeln um), .quiet = nur Text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border);
       border-radius: var(--r-sm); background: var(--sunk); color: var(--text); font: 600 13px/18px var(--font); text-decoration: none;
       white-space: nowrap; cursor: pointer;
       transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), scale var(--t-fast) var(--ease); }
.btn:active:not(:disabled) { scale: .97; }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ic { width: 15px; height: 15px; }
.btn.primary { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.btn.quiet { border-color: transparent; background: none; color: var(--muted); }
/* Zähler im Knopf (aktive Filter) */
.badge-n { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 8px; text-align: center;
           background: var(--accent); color: var(--on-accent); font: 600 10.5px/18px var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Segment-Schalter (#viewSeg, #tfSeg, Bot, Chart-Zeitraum): eingelassene Gruppe, gewählt = Tinte.
   Höhe 36 px wie Knopf und Feld (2 px Innenabstand + 1 px Rand + 30 px Knopf) */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--sunk); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 0;
              border-radius: 8px; background: none; color: var(--muted); font: 600 12.5px/1 var(--font); white-space: nowrap;
              transition: background-color var(--t-fast), color var(--t-fast); }
.seg button .ic { width: 14px; height: 14px; }
.seg button.on { background: var(--ink); color: var(--on-ink); }
.icon-seg button { width: 30px; padding: 0; }

/* ---------- Chips (Ergebniszeile, aktive Filter): 24 px, eingelassen; Zonen-Farbe als 3-px-Kante links
   (.view = nur Ansicht, bläulich · .scan = Scanner-Schwellen, Karamell – dieselben Farben wie die Filter-Zonen) */
.chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid transparent;
        border-radius: var(--r-xs); background: var(--sunk); color: var(--muted); font: 600 12px/1 var(--font); white-space: nowrap;
        transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.chip .ic { width: 13px; height: 13px; }
.chip.view { --zone: var(--tech); }
.chip.scan { --zone: var(--accent-2); }
.chip.view, .chip.scan { padding-left: 10px; color: var(--text); box-shadow: inset 3px 0 0 var(--zone); }
.chip.link { cursor: pointer; }
.chip button { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -3px; padding: 0; border: 0; border-radius: 4px;
               background: none; color: var(--faint); font-size: 10px; line-height: 1; }
.cgroup { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cgroup > em { font: 600 10.5px/1.4 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lf-chips .chip.view { padding-right: 5px; }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .subtabs button:hover { color: var(--text); }
  .themes button:hover:not(.on) { border-color: var(--border-2); background: var(--hl); }
  .btn:hover:not(:disabled) { background: var(--panel); border-color: var(--border-2); }
  .btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); border-color: transparent; }
  .btn.quiet:hover:not(:disabled) { background: var(--hl); border-color: transparent; color: var(--text); }
  .resultbar .btn.quiet:hover:not(:disabled) { background: var(--tone-bad); color: var(--bad-ink); }   /* „Alle entfernen…“ */
  .seg button:hover:not(.on) { color: var(--text); }
  .chip.link:hover { border-color: var(--border-2); color: var(--text); }
  .chip button:hover { background: var(--tone-bad); color: var(--bad-ink); }
}

/* ---------- Filter-Feld (#filters) – lebt nur im Inspektor (openPopNode verschiebt es dorthin und zurück).
   Zonen werden per CSS-Zähler nummeriert: 1 Feinfilter · 2 Nur Ansicht · 3 Scanner-Schwellen (ohne JS) */
.drawer { counter-reset: fz; }
.pop-body .drawer { display: block !important; margin: 0; border: 0; padding: 0; background: none; box-shadow: none; animation: none; }
.fzone { --zone: var(--accent-2); display: grid; gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
.fzone:first-child { padding-top: 0; border-top: 0; }
.fzone:last-child { padding-bottom: 0; }
.fzone.view { --zone: var(--tech); }
.fzone.scan, .lfzone { --zone: var(--accent-2); }
.fzone-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.ztag { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
        color: var(--zone); }
.ztag .ic { width: 14px; height: 14px; }
/* runde Tinten-Marke mit der Nummer der Zone – ersetzt das Icon */
.fzone-head .ztag::before { counter-increment: fz; content: counter(fz); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px;
                            border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 600 11px/1 var(--mono); letter-spacing: 0; }
.drawer .ztag .ic { display: none; }
.fzone-head small { flex-basis: 100%; padding-left: 30px; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Gruppen: ohne Kasten, Titel mit Icon und Wert-Pille rechts; im Inspektor durch Haarlinien getrennt */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 20px; }
.fgroup { display: grid; gap: 10px; align-content: start; min-width: 0; }
.drawer .fgrid > .fgroup { padding-top: 14px; border-top: 1px solid var(--rule); }
.fgroup.wide, .applyrow.wide { grid-column: 1 / -1; }
.fgroup h4 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--text);
             font: 600 13px/1.35 var(--font); letter-spacing: -.005em; }
.gi { display: inline-grid; place-items: center; flex: none; color: var(--accent); }
.gi .ic { width: 14px; height: 14px; }
.gv { margin-left: auto; padding: 4px 8px; border-radius: var(--r-xs); background: var(--sunk); color: var(--text);
      font: 600 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Sonderregel „Frisch & Volumen“: eingelassene Fläche, damit sie sich von den Schwellen abhebt */
.fgroup.fresh { padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); }
.fgroup.fresh .gv { background: var(--panel); }
.freshrow { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.freshrow label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.freshrow select { width: auto; height: 32px; }
/* Felder: Beschriftung links, Wert rechts (auch im Bot und im Schnellkauf) */
.field { display: grid; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.field .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field .head b { color: var(--text); font: 600 12.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.field select { width: 100%; }
.mcap { display: flex; align-items: center; gap: 6px; color: var(--faint); }
.mcap select { flex: 1; min-width: 0; }
.moverow { display: grid; gap: 12px; }
.fgroup.move .moverow { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
/* Vorwahlen: kleine Knöpfe, gewählt = Tinte */
.presets { display: flex; flex-wrap: wrap; gap: 4px; }
.presets button { position: relative; height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-xs); background: var(--sunk);
                  color: var(--muted); font: 600 12px/1 var(--font); white-space: nowrap;
                  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.presets button.on { background: var(--ink); color: var(--on-ink); }
.fgroup.fresh .presets button { background: var(--panel); }
/* Häkchen-Zeilen */
.only { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.only input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; }
.only .ic { width: 14px; height: 14px; }
.only:has(input:checked) { color: var(--text); }
.hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.err { color: var(--bad); }
/* kompaktes Raster für Chain/Quelle/Herkunft: Titel links, Auswahl rechts */
.fgrid.inline .fgroup { grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.fgrid.inline .fgroup h4 { flex-wrap: nowrap; white-space: nowrap; }
.fgrid.inline select { width: 100%; min-width: 0; }
.fgrid.scan4 { row-gap: 18px; }
/* Übernehmen: klebt unten im Inspektor. Der Schatten (rundum 24 px Grundfarbe, oben weggeschnitten) deckt den
   Innenabstand des Inspektors links, rechts und unten – darunter scrollende Felder blitzen nicht vorbei */
.applyrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.applyrow small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.applyrow small.err { color: var(--bad); }
.pop-body .applyrow { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; padding: 12px 0; border-top: 1px solid var(--rule);
                      background: var(--bg); box-shadow: 0 0 0 24px var(--bg); clip-path: inset(0 -24px -24px); }

/* ---------- Filter je Bereich (.lf – im Inspektor; im Filter-Feld der Treffer als „Feinfilter“ in #lfHits) */
.lf { display: grid; gap: 16px; }
.lf-l { display: flex; align-items: center; gap: 6px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lf-l .ic { width: 13px; height: 13px; color: var(--accent); }
.lf-pre { display: grid; gap: 8px; }
.lf-sug { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-sug button, .lf-tog button { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
                                 border: 1px solid var(--border); border-radius: var(--r-xs); background: transparent; color: var(--muted);
                                 font: 600 12px/1 var(--font); white-space: nowrap;
                                 transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.lf-sug button:active, .lf-tog button:active { scale: .96; }
.lf-sug button.on, .lf-tog button.on { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.lf-tog { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-tog button { height: 30px; padding: 0 11px; }
.lf-tog .ic { width: 13px; height: 13px; }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
/* Feld: eingelassen; mit gesetztem Wert leicht hervorgehoben */
.lf-f { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 10px 12px 12px; border: 1px solid transparent;
        border-radius: var(--r-md); background: var(--sunk); transition: background-color var(--t-fast), border-color var(--t-fast); }
.lf-f:has(input:not(:placeholder-shown)), .lf-f:has(.lf-sug button.on) { border-color: var(--border-hot); background: var(--tint); }
.lf-f input, .lf-f select { width: 100%; min-width: 0; height: 32px; padding: 0 9px; font: 500 13px/1 var(--mono); }
.lf-f select { padding-right: 28px; font-family: var(--font); }
.lf-f input::placeholder { color: var(--muted); opacity: 1; }
.lf-range { display: flex; align-items: center; gap: 6px; }
.lf-range span { color: var(--faint); }
.lf-f .lf-sug button { height: 22px; padding: 0 7px; font-size: 11px; }
.lf-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.lf-foot .btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.pop-body > .lf .lf-foot { position: sticky; bottom: 0; z-index: 2; padding: 12px 0; border-top: 1px solid var(--rule);
                           background: var(--bg); box-shadow: 0 0 0 24px var(--bg); clip-path: inset(0 -24px -24px); }
.lfzone .lf-grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }

/* ---------- Tastenkürzel (im Inspektor) */
.keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; font-size: 13px; }
.keys > .kbd { justify-self: start; }

/* ---------- Überfahren im Filter (nur mit Maus) */
@media (hover: hover) {
  .presets button:hover:not(.on) { color: var(--text); border-color: var(--border-2); }
  .lf-sug button:hover:not(.on), .lf-tog button:hover:not(.on) { color: var(--text); border-color: var(--border-2); background: var(--hl); }
}

/* ---------- Leerer Zustand, Lade-Schimmer, Platzhalter-Seiten, Hinweis unten
   Leer: kein Kasten – ein ruhiges Icon, ein Fraunces-Satz, darunter der Text */
.empty { display: grid; justify-items: center; gap: 6px; max-width: 60ch; margin: 0 auto; padding: 64px 20px; text-align: center;
         font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.empty b { display: block; color: var(--text); font: 600 22px/1.25 var(--serif); letter-spacing: -.025em; font-variation-settings: "SOFT" 100; }
.empty .radar { display: grid; place-items: center; margin-bottom: 10px; color: var(--faint); }
.empty .radar .ic { width: 32px; height: 32px; stroke-width: 1.6; }
.skel { min-height: 18px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sunk) 25%, var(--panel) 50%, var(--sunk) 75%) 0 0 / 200% 100%;
        animation: shimmer 1.4s linear infinite; }
/* Platzhalter-Seiten (Kontakt, Anmelden, Bot-Wallet einrichten): ohne Karte, mittig */
.soon { max-width: 560px; margin: 8vh auto 0; padding: 8px 20px 24px; text-align: center; }
.soon-ic { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border: 1px solid var(--rule-2); border-radius: 50%;
           color: var(--accent); }
.soon-ic .ic { width: 32px; height: 32px; stroke-width: 1.6; }
.soon h2 { margin: 0 0 10px; font: 600 34px/1.1 var(--serif); letter-spacing: -.035em; font-variation-settings: "SOFT" 100; }
.soon p { max-width: 44ch; margin: 0 auto 20px; color: var(--muted); text-wrap: pretty; }
.soon-tag { display: inline-block; padding: 5px 12px; border: 1px solid var(--ink); border-radius: 999px; color: var(--text);
            font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
footer.disclaimer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--faint);
                    text-align: center; text-wrap: balance; }

/* ==========================================================================================================
   Breiten: Container „main“ (Inhaltsbreite – auch mit offenem Inspektor) und Handy
   ========================================================================================================== */
/* schmale Inhaltsbreite: Werkzeuge rutschen unter die Reiterlinie (volle Breite, ohne eigene Linie) */
/* Reiter (~630 px) und Werkzeuge (~590 px) passen erst ab ~1250 px Inhaltsbreite nebeneinander – darunter zwei Zeilen */
@container main (max-width: 1280px) {
  .subtabs { grid-column: 1 / -1; }
  .wrap > .toolbar { grid-column: 1 / -1; flex-wrap: wrap; margin: -4px 0 16px; padding: 0; border-bottom: 0; justify-content: flex-start; }
  .toolbar .right { margin-left: auto; }
  .toolbar .search { flex: 1 1 220px; width: auto; }
}
/* schmale Fläche (auch Schiebe-Modus): engere Reiter und eine Ausblend-Kante, die zeigt, dass die Leiste weitergeht */
@container main (max-width: 760px) {
  .subtabs { gap: 16px; -webkit-mask-image: linear-gradient(to right, var(--text) calc(100% - 24px), transparent);
             mask-image: linear-gradient(to right, var(--text) calc(100% - 24px), transparent); }
}
@container main (max-width: 1000px) {
  .ph-top { column-gap: 24px; }
  .ph-stats div { padding: 0 14px; }
  .ph-stats b { font-size: 18px; }
}
@container main (max-width: 720px) {
  .ph-top { grid-template-columns: minmax(0, 1fr); }
  .ph-stats { grid-column: 1; grid-row: auto; margin-top: 10px; }
}
/* Filter im schmalen Inspektor */
@container (max-width: 400px) {
  .fgrid.inline .fgroup { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .fgroup.move .moverow { grid-template-columns: minmax(0, 1fr); }
  .lf-grid, .lfzone .lf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Handy: Kopf einspaltig, Reiterlinie bis an den Rand wischbar, Werkzeuge in voller Breite, Tippziele ≥ 44 px */
@media (max-width: 720px) {
  .ph-top { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 16px; }
  .ph-top h1 { font-size: 28px; }
  .ph-top h1 .ti { margin-right: 10px; }
  .ph-top h1 .ti .ic { width: 20px; height: 20px; }
  .ph-top p { display: none; }
  /* Messwerte als wischbare Reihe unter dem Titel */
  .ph-stats { grid-column: 1; grid-row: auto; margin: 4px -14px 0; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none;
              -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 14px, var(--text) calc(100% - 14px), transparent);
                      mask-image: linear-gradient(to right, transparent, var(--text) 14px, var(--text) calc(100% - 14px), transparent); }
  .ph-stats::-webkit-scrollbar { display: none; }
  .ph-stats div { padding: 0 14px; }
  .ph-stats b { font-size: 17px; }
  .subtabs { grid-column: 1 / -1; gap: 20px; margin: 0 -14px 16px; padding: 0 14px;
              -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 14px, var(--text) calc(100% - 14px), transparent);
                      mask-image: linear-gradient(to right, transparent, var(--text) 14px, var(--text) calc(100% - 14px), transparent); }
  .subtabs button { min-height: 44px; padding: 0; }
  .wrap > .toolbar { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; padding: 0; border-bottom: 0; }
  .toolbar .search { flex: 1 1 100%; width: auto; }
  .toolbar .right { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  #hitTools #sortSel { flex: 1; min-width: 0; max-width: none; }
  /* Felder 44 px und 16 px Schrift (sonst zoomt iOS beim Tippen hinein) */
  .search input, .lf-f input, .lf-f select, .fgroup select, .freshrow select, #hitTools #sortSel { height: 44px; font-size: 16px; }
  .btn { min-height: 40px; }
  .seg button { height: 36px; }
  .icon-seg button { width: 40px; }
  .fgroup input[type=range] { height: 32px; }
  .only { min-height: 32px; align-items: center; }
  .lf-tog button { height: 36px; }
  .resultbar { gap: 8px 6px; }
  .chip { height: 28px; }
  .empty { padding: 48px 16px; }
  .soon { margin-top: 4vh; }
  .soon h2 { font-size: 28px; }
  /* unsichtbare Tippfläche: kleine Knöpfe bleiben optisch kompakt, treffen aber auf 44 px Höhe */
  .btn, .seg button, .chip.link, .chip button, .presets button, .lf-sug button, .lf-tog button, .themes button { position: relative; }
  .btn::after, .seg button::after, .chip.link::after, .presets button::after, .lf-sug button::after, .lf-tog button::after,
  .themes button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }
  .chip button { width: 28px; height: 28px; margin: 0 -8px 0 -4px; font-size: 11px; }
  .chip button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; }
}
/* ---------- T4 Karten, Tabellen, Merkliste
   Flächen ohne Schatten, Karten als Setzkasten (Raster mit 1-px-Fugen), Etiketten mit Zustandspunkt, Score-Ringe,
   Kennzahlen-Leisten mit Haarlinien, Tabellen mit klebendem Kopf (ab 900 px Inhaltsbreite), Merkliste und Bilanz.
   Nur Werte aus T1 (var()/color-mix()), eigene Hilfswerte mit Vorsilbe --t4-. Überfahren nur bei echter Maus.
   #view wird alle paar Sekunden neu gebaut: Animation nur bei .enter und scroll-gesteuert. Breiten-Regeln am Ende. */

/* ---------- Flächen */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel > .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; font-size: 13px; color: var(--muted); }
.panel > .row b { color: var(--text); }

/* ---------- Setzkasten: Karten ohne eigenen Rand. Jede Karte trägt einen 1-px-Umriss, der in der 1-px-Fuge liegt – die
   Umrisse benachbarter Karten fallen dort zusammen (eine Linie); leere Zellen der letzten Reihe bleiben durchsichtig.
   content-visibility: nur sichtbare Karten werden gezeichnet (bei 400 Treffern spürbar schneller) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1px; padding: 1px;
        border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--rule);
        border-radius: var(--r-lg); transition: background-color var(--t-fast); }
.grid > .card { border: 0; border-radius: 0; outline: 1px solid var(--rule); box-shadow: none;
                content-visibility: auto; contain-intrinsic-size: auto 260px; }
.card.mini, .card[data-open-id] { cursor: pointer; }
/* frisch gefunden: feine Karamell-Kante oben (fest, ohne Bewegung) */
.card.fresh::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent-2); pointer-events: none; }
.card .body { flex: 1; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; }
.card.mini .body { grid-template-columns: minmax(0, 1fr); }

/* ---------- Kartenkopf: Coin-Icon, $SYM, Name; rechts der Signal-Ring (T5) – Platz für den Entfernen-Knopf */
.card-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 32px; cursor: pointer; }
.icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; object-fit: cover; border-radius: var(--r-sm);
        background: var(--sunk); color: var(--muted); font: 600 12px/1 var(--font); letter-spacing: -.01em;
        outline: 1px solid var(--rule); outline-offset: -1px; }
.icon.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.title { flex: 1; min-width: 0; }
.sym { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font: 700 16px/1.25 var(--font); letter-spacing: -.015em;
       transition: color var(--t-fast); }
.sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub .ic { width: 12px; height: 12px; }
.sub .meme, .sub .tech { font-weight: 600; }
.sub .meme { color: var(--meme); }
.sub .tech { color: var(--tech); }
/* „NEU“ als Tinten-Pille, Kursanstieg als grünes Etikett */
span.new { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
           font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mover { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--tone-good); color: var(--good-ink);
         font: 600 11px/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
/* Entfernen: oben rechts; mit Maus erst beim Überfahren der Karte sichtbar, auf Touch immer */
.remove { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
          border: 0; border-radius: var(--r-xs); background: none; color: var(--faint); font-size: 13px; line-height: 1;
          transition: opacity var(--t-fast), color var(--t-fast), background-color var(--t-fast); }

/* ---------- Kennzahlen der kompakten Karte: drei Spalten zwischen Haarlinien, Zahlen in Mono */
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr 1.2fr; padding: 10px 0; border-block: 1px solid var(--rule); }
.mini-kpis > div { display: grid; gap: 3px; min-width: 0; padding: 0 10px; }
.mini-kpis > div:first-child { padding-left: 0; }
.mini-kpis > div:last-child { padding-right: 0; }
.mini-kpis > div + div { border-left: 1px solid var(--rule); }
.mini-kpis span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-kpis b { font: 600 15px/1.3 var(--mono); letter-spacing: -.02em; white-space: nowrap; border-radius: 4px; }
.mini-kpis .sc { display: flex; gap: 3px; }
.mini-kpis .sc i { padding: 0 4px; border-radius: var(--r-xs); background: var(--sunk); font: 600 11.5px/1.65 var(--mono); font-style: normal; }

/* ---------- Etiketten (mini-flags, mchip, tag): 22 px, Radius klein; Zustand = zarte Fläche + 6-px-Punkt vorne.
   Mit Icon färbt sich das Icon und ersetzt den Punkt (wie die Etiketten im Live-Feed, T5) */
.mini-flags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.mini-flags > span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
                     background: var(--sunk); color: var(--muted); font: 600 11.5px/1 var(--font); white-space: nowrap; }
.mini-flags > span.g { --t4-dot: var(--good); background: var(--tone-good); color: var(--text); }
.mini-flags > span.w { --t4-dot: var(--warn); background: var(--tone-warn); color: var(--text); }
.mini-flags > span.b { --t4-dot: var(--bad); background: var(--tone-bad); color: var(--text); }
.mini-flags .ic { width: 12px; height: 12px; color: var(--t4-dot, currentColor); }
.mini-flags > span:is(.g, .w, .b)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t4-dot); }
.mini-flags > span:has(.ic)::before { display: none; }
.mini-flags b { font: 600 11.5px/1 var(--mono); }
.mini-flags b + b { margin-left: 5px; }
.mini-flags b.g { color: var(--good); }
.mini-flags b.w { color: var(--warn); }
.mini-flags b.b { color: var(--bad); }
.metarow { display: flex; flex-wrap: wrap; gap: 4px; }
.mchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: var(--sunk);
         color: var(--muted); font: 600 11.5px/1 var(--font); white-space: nowrap; }
.mchip .ic { width: 13px; height: 13px; color: var(--t4-dot, currentColor); }
.mchip:not(:has(.ic))::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t4-dot, var(--faint)); }
button.mchip { cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.mchip.born { --t4-dot: var(--accent); background: var(--hl); color: var(--text); }
.mchip.og { --t4-dot: var(--good); background: var(--tone-good); color: var(--text); }
.mchip.unsure, .mchip.copy { --t4-dot: var(--warn); background: var(--tone-warn); color: var(--text); }
.mchip.copy.risky { --t4-dot: var(--bad); background: var(--tone-bad); }
.mchip.since.up { --t4-dot: var(--good); background: var(--tone-good); color: var(--text); }
.mchip.since.down { --t4-dot: var(--bad); background: var(--tone-bad); color: var(--text); }
.mchip.wallet { --t4-dot: var(--tech); background: color-mix(in srgb, var(--tech) 12%, transparent); color: var(--text); }
.tag { --t4-dot: var(--accent); display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
       background: var(--hl); color: var(--text); font: 600 11px/1 var(--font); letter-spacing: 0; white-space: nowrap; vertical-align: 1px; }
.tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t4-dot); }

/* ---------- Score-Ringe (Klick = Aufschlüsselung darunter) */
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ringbox { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md);
           background: var(--sunk); }
button.ringbox { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
                 transition: border-color var(--t-fast), background-color var(--t-fast), scale var(--t-fast) var(--ease); }
button.ringbox.on { border-color: var(--ink); background: var(--panel); }
button.ringbox:active { scale: .97; }
.ringbox span { min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ringbox .ri { margin-left: 3px; font-style: normal; font-weight: 400; color: var(--faint); }
.ring { width: 40px; height: 40px; flex: none; }
.ring circle { fill: none; stroke-width: 3; }
.ring .track { stroke: var(--rule-2); }
.ring .val { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }   /* Farbe setzt das Skript (stroke) */
.ring text { font-size: 12px; font-weight: 600; letter-spacing: -.02em; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
/* Ring füllt sich nur, wenn sein Baustein neu hereingleitet (.enter) – nie beim normalen Neuzeichnen */
.enter .ring .val { animation: card-ring 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
@keyframes card-ring { from { stroke-dashoffset: 106.8; } }
/* Aufschlüsselung: Haarlinien-Zeilen, Punkte rechtsbündig (+ grün, − rot) */
.scoreinfo { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk); font-size: 12.5px;
             white-space: normal; overflow-wrap: anywhere; }
.sihead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sihead b { font-size: 13px; font-weight: 700; }
.sihead .btn { padding: 2px 7px; font-size: 11px; line-height: 16px; }
.scoreinfo p { margin: 0 0 4px; line-height: 1.45; color: var(--muted); }
.scoreinfo table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.scoreinfo td { padding: 6px 0; border-top: 1px solid var(--rule); border-bottom: 0; font-size: 12.5px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.scoreinfo td small { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
.scoreinfo td.n { width: 72px; padding-left: 10px; text-align: right; white-space: nowrap; font-weight: 600; }
.scoreinfo td.n small { display: inline; margin-left: 3px; font-weight: 400; color: var(--faint); }
.scoreinfo td.n.v { width: 48%; white-space: normal; }
.scoreinfo td.plus { color: var(--good); }
.scoreinfo td.minus { color: var(--bad); }
.scoreinfo tfoot td { border-top-color: var(--rule-2); font-weight: 700; }

/* ---------- Kennzahlen-Reihe (Pop-up „Alle Details“, Alarm): Felder zwischen Haarlinien */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
.kpis > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 0 12px; border-left: 1px solid var(--rule); }
.kpis > div:first-child { padding-left: 0; border-left: 0; }
.kpis span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis b { width: fit-content; font: 600 15px/1.3 var(--mono); letter-spacing: -.02em; white-space: nowrap; border-radius: 4px; }
.checksum { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.checksum > span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.checksum .ok { color: var(--good); }
.checksum .warn { color: var(--warn); }
.checksum .bad { color: var(--bad); }

/* ---------- Sniper-, Bundle- und Bot-Anteil am Angebot */
.mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mixcell { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--sunk); cursor: help; }
.mixcell span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mixcell b { font: 600 14px/1.25 var(--mono); letter-spacing: -.02em; }
.mixcell small { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixcell.good b { color: var(--good); }
.mixcell.warn { background: var(--tone-warn); }
.mixcell.warn b { color: var(--warn); }
.mixcell.bad { background: var(--tone-bad); }
.mixcell.bad b { color: var(--bad); }
.mix.none { display: block; font-size: 12px; color: var(--faint); }
.mixpair { font: 600 12.5px/1.2 var(--mono); letter-spacing: -.02em; white-space: nowrap; color: var(--muted); }
.mixpair .good { color: var(--good); }
.mixpair .warn { color: var(--warn); }
.mixpair .bad { color: var(--bad); }

/* ---------- Aktions-Knöpfe an Karten, im Inspektor und im Bericht
   .actions = kleine Umriss-Knöpfe; .actions.main = ruhige Fußleiste der Karte (durchsichtig, Überfahren --hl),
   Bericht-Knopf als Karamell-Umriss; .actions.links = Link-Chips */
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions a, .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px;
                              border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text);
                              font: 600 12.5px/1 var(--font); text-decoration: none; white-space: nowrap;
                              transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), scale var(--t-fast) var(--ease); }
.actions a:active, .actions button:active { scale: .96; }
.actions .ic { width: 15px; height: 15px; }
.actions [data-report] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.actions .merk.on { color: var(--warn); }
.merk.on .ic { fill: currentColor; }
.actions.main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.actions.main > * { min-width: 0; padding: 0 6px; overflow: hidden; border-color: transparent; color: var(--muted); }
.actions.main > [data-report] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.actions.main.four { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; }
.actions.main.five { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px 32px; }
.actions.main.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.actions.main.four > *, .actions.main.five > * { padding: 0 4px; }
.actions.main.four:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Trend-Coins: nur CoinGecko + Details */
.card .actions.main { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--rule); }
.actions.links { gap: 4px; }
.actions.links a, .actions.links button { min-height: 26px; padding: 0 9px; border-color: transparent; border-radius: var(--r-xs);
                                          background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 600; }
.actions.links .ic { width: 13px; height: 13px; }
.botbuy { color: var(--accent); }
.actions.links .botbuy { color: var(--accent); }
/* Fomo (dort kaufen): kleines Etikett in Blaugrau; .big als Knopf (Chart-Kopf ordnet T8 ein) */
.fomo-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--tech) 35%, transparent);
            border-radius: var(--r-xs); background: color-mix(in srgb, var(--tech) 9%, transparent); color: var(--tech);
            font: 600 12px/1 var(--font); text-decoration: none; white-space: nowrap;
            transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.fomo-btn .ic { width: 14px; height: 14px; }
.fomo-btn.big { height: 36px; padding: 0 14px; border-color: transparent; background: var(--tech); color: var(--on-accent); font-size: 13px; }
.actions.main .fomo-btn { height: auto; min-height: 32px; justify-content: center; border-color: transparent; border-radius: 8px; color: var(--tech); }

/* ---------- Info-Feld (Hintergrund & Kontext) in Karten; ausführlich im Inspektor */
.infofield { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: 12px;
             background: var(--well); color: var(--muted); font: 400 12.5px/1.45 var(--font); text-align: left; cursor: pointer;
             transition: border-color var(--t-fast), color var(--t-fast); }
.infofield .ic { flex: none; margin-top: 1px; color: var(--accent); }
.infofield b { color: var(--text); font-weight: 600; }
.infofield span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.infocat { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); }
.infocat .ti { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sunk);
               color: var(--accent); box-shadow: none; }
.infocat .ti .ic { width: 18px; height: 18px; }
.infocat b { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.infocat p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.infosrc { display: grid; gap: 4px; padding: 12px 2px 2px; border-top: 1px solid var(--rule); }
.infosrc strong { font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.infosrc p { margin: 0; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.infosrc small { font-size: 12px; color: var(--faint); }
.infosrc a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }

/* ---------- Details (Pop-up „Alle Details“, aufgeklappte Tabellenzeile) */
details.more { border-top: 1px solid var(--rule); }
details.more > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; list-style: none; cursor: pointer;
                         font-size: 12.5px; font-weight: 600; color: var(--muted); transition: color var(--t-fast), background-color var(--t-fast); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "›"; font-size: 17px; transition: rotate var(--t-in) var(--spring); }
details.more[open] > summary::after { rotate: 90deg; }
.detail { display: grid; gap: 14px; padding-top: 4px; font-size: 12.5px; }
.detail h4 { margin: 0 0 6px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.dgrid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.dgrid span { color: var(--muted); white-space: nowrap; }
.dgrid b { font-weight: 600; text-align: right; }
ul.checks { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
ul.checks li { display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
ul.checks li .ic { flex: none; margin-top: 2px; }
.why, .desc { margin: 0; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- Schlüssel/Wert-Raster und Urteil (Screener) */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; font-size: 13px; }
.kv dt, .kv dd { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.kv dt { padding-right: 16px; color: var(--muted); }
.kv dd { min-width: 0; margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.kv dd.bad { color: var(--bad); }
.kv dd.good { color: var(--good); }
.kv dd.warn { color: var(--warn); }
.kv dd a { color: var(--accent); text-decoration: none; }
.verdict { --t4-vc: var(--accent); display: grid; gap: 12px; align-content: start; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg);
           background: var(--panel); box-shadow: inset 3px 0 0 var(--t4-vc); }
.verdict.high { --t4-vc: var(--bad); background: linear-gradient(var(--tone-bad), var(--tone-bad)) var(--panel); }
.verdict.medium { --t4-vc: var(--warn); background: linear-gradient(var(--tone-warn), var(--tone-warn)) var(--panel); }
.verdict.low { --t4-vc: var(--good); background: linear-gradient(var(--tone-good), var(--tone-good)) var(--panel); }
.verdict .big { display: flex; align-items: center; gap: 10px; color: var(--t4-vc); font: 600 24px/1.2 var(--serif); letter-spacing: -.03em;
                font-variation-settings: "SOFT" 100; }
.verdict .big .ic { width: 26px; height: 26px; }
.verdict .counts { display: flex; flex-wrap: wrap; gap: 6px; }
.verdict .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.verdict .ringbox { background: color-mix(in srgb, var(--panel) 70%, transparent); }

/* ---------- Tabellen (Treffer-Liste, Aussortiert, Screener): eine Fläche, Haarlinien, Zahlen rechtsbündig,
   dichte Schrift (Instrument Sans mit schmaler Breite). Unter 900 px Inhaltsbreite scrollt die Tabelle waagerecht */
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.tablewrap :is(th, td) { font-stretch: 88%; }
.tablewrap :is(th, td):first-child { padding-left: 16px; }
.tablewrap :is(th, td):last-child { padding-right: 16px; }
.tablewrap tbody tr:last-child > td { border-bottom: 0; }
.tablewrap tr.enter { animation-name: fadeIn; }   /* Zeilen nur einblenden (kein Verschieben in der Tabelle) */
tr.row { cursor: pointer; }
tr.row > td { transition: background-color var(--t-fast); }
tr.row.open > td { background: var(--tint); border-bottom-color: transparent; }
tr.detailrow > td { padding: 8px 16px 20px; white-space: normal; background: var(--sunk); }
tr.detailrow .detail { max-width: 900px; padding: 0; }
tr.detailrow .dgrid { max-width: 560px; }
.cellcoin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cellcoin > div { min-width: 0; white-space: normal; line-height: 1.35; }
.cellcoin b { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.cellcoin .ic { width: 13px; height: 13px; color: var(--faint); }
.cellcoin small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; max-width: 210px;
                  margin-top: 1px; font-size: 11.5px; color: var(--muted); }
/* Score als Mono-Feld; Farbe kommt aus dem Skript (color), der Grund mischt sie zart */
.pill { display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: var(--r-xs); text-align: center; font: 600 12px/1.4 var(--mono);
        background: color-mix(in srgb, var(--sc, currentColor) 14%, transparent); }
.pill.none { color: var(--faint); background: none; font-weight: 400; }
.reason { display: inline-flex; align-items: flex-start; gap: 7px; max-width: 420px; font-size: 12.5px; line-height: 1.45; color: var(--muted); white-space: normal; }
.reason::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--bad); }
/* Zeilen-Knöpfe: Icon-Knöpfe 28 px */
.rowact { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.rowact a, .rowact button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 6px;
                            border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); font: 600 12px/1 var(--font);
                            text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast), scale var(--t-fast) var(--ease); }
.rowact a:active, .rowact button:active { scale: .92; }
.rowact .ic { width: 15px; height: 15px; }
.rowact [data-report] { color: var(--accent); }
.rowact .fomo-btn { border: 0; background: none; color: var(--tech); }
.rowact button.merk.on { color: var(--warn); }
.rowact button.x { color: var(--faint); }

/* ---------- Merkliste & Bilanz seit Fund */
div.since { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }   /* div: .since steht auch am Chip „seit Fund“ (mchip) */
div.since > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); }
div.since span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.since b { font: 600 15px/1.2 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
div.since .big b { font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
/* Alarm-Felder (Inspektor): Eingabe wächst mit dem Wert */
.alarm { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--muted); }
.alarm label { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.alarm .ic { color: var(--accent); }
.alarm input { height: 32px; padding: 0 8px; text-align: right; }
.alarm input[data-alarm] { field-sizing: content; min-width: 10ch; }
@supports not (field-sizing: content) { .alarm input[data-alarm] { width: 10ch; } }
.alarm button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font: 600 12.5px/1 var(--font);
                transition: background-color var(--t-fast), scale var(--t-fast) var(--ease); }
.alarm button:active { scale: .97; }
.alarm small { flex-basis: 100%; font-weight: 400; color: var(--faint); }
/* Bilanz der Treffer: Zahlenleiste, die Fugen sind der durchscheinende Grund */
.bilanz { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; overflow: clip;
          border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--rule); }
.bilanz > div { display: grid; gap: 3px; align-content: center; min-width: 0; padding: 12px 14px; background: var(--panel); }
.bilanz .bz-h { font: 600 14px/1.3 var(--font); color: var(--text); }
.bilanz .bz-h .ic { margin-right: 4px; color: var(--accent); }
.bilanz .bz-h small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--faint); }
.bilanz b { font: 600 18px/1.2 var(--mono); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilanz span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.bilanz.wait { display: block; padding: 14px 16px; background: var(--panel); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bilanz.wait .ic { color: var(--accent); }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .grid > .card:hover { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent-2); }
  .card:has(.remove:hover) { background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
  .card-head:hover .sym { color: var(--accent); }
  .remove { opacity: 0; }
  :is(.card, .panel):is(:hover, :focus-within) .remove, .remove:focus-visible { opacity: 1; }
  .remove:hover { background: var(--tone-bad); color: var(--bad-ink); }
  button.mchip:hover { color: var(--text); background: var(--hl); }
  button.ringbox:hover:not(.on) { border-color: var(--border); background: var(--panel); }
  .actions a:hover, .actions button:hover { background: var(--hl); border-color: var(--border-2); }
  .actions.main > :hover { border-color: transparent; color: var(--text); }
  .actions [data-report]:hover, .actions.main > [data-report]:hover { border-color: var(--accent); color: var(--accent); }
  .actions.links a:hover, .actions.links button:hover { background: var(--hl); border-color: transparent; color: var(--text); }
  .fomo-btn:hover, .actions.main .fomo-btn:hover { border-color: transparent; background: var(--tech); color: var(--on-accent); }
  .infofield:hover { border-color: var(--border-2); color: var(--text); }
  details.more > summary:hover { color: var(--text); background: var(--hover); }
  tr.row:hover > td { background: var(--hover); }
  tr.row:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent-2); }
  tr.row.open:hover > td { background: var(--tint); }
  .rowact a:hover, .rowact button:hover { background: var(--hl); color: var(--text); }
  .rowact .fomo-btn:hover { background: var(--tech); color: var(--on-accent); }
  .rowact button.x:hover { background: var(--tone-bad); color: var(--bad-ink); }
  .alarm button:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
}

/* ---------- Beim Scrollen: Karten unterhalb des sichtbaren Bereichs gleiten herein (nur wo der Browser das kann;
   die Position hängt am Scrollweg, nicht an der Zeit – das Neuzeichnen löst also nichts aus) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid > .card:not(.enter) { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* ==========================================================================================================
   Breiten: Container „main“ (Inhaltsbreite – auch mit offenem Inspektor), Inspektor (unbenannter Container) und Handy
   ========================================================================================================== */
/* ab 900 px Inhaltsbreite: Tabellen-Kopf klebt unter den Inseln. Das geht nur, wenn die Hülle nicht selbst scrollt
   (overflow: clip). Damit nichts abgeschnitten wird, wird die Tabelle dichter: engere Zellen, Kopfzeilen dürfen
   umbrechen, Zeilen-Knöpfe rutschen bei Bedarf in eine zweite Reihe (höchstens zwei: drei Knöpfe Mindestbreite) und
   der Coin-Name wird gekürzt. Gemessen: Treffer-Liste (13 Spalten) braucht so mindestens ~850 px ohne bzw. ~990 px mit
   Liquidität/Vol. – daher diese beiden Spalten erst ab 1100 px */
@container main (min-width: 900px) {
  .tablewrap { overflow: clip; }
  .tablewrap th { position: sticky; top: var(--top-safe); z-index: 5; white-space: normal; border-bottom-color: transparent;
                  box-shadow: inset 0 -1px 0 var(--rule); }
  .tablewrap :is(th, td) { padding-inline: 8px; }
  .tablewrap :is(th, td):first-child { padding-left: 14px; }
  .tablewrap :is(th, td):last-child { padding-right: 14px; }
  .tablewrap .rowact { flex-wrap: wrap; min-width: calc(3 * 28px + 2 * 2px); }
}
/* breite Treffer-Liste: Liquidität und Vol. 24h erst ab 1100 px Inhaltsbreite (stehen auch im Pop-up „Alle Details“) */
@container main (max-width: 1100px) {
  .tablewrap .md { display: none; }
}
/* Bilanz (im Inspektor und auf schmaler Fläche): zwei Spalten, Kopf über die ganze Breite */
@container (max-width: 720px) {
  .bilanz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilanz .bz-h { grid-column: 1 / -1; }
}
/* Inspektor und schmale Flächen: Score-Ringe mit Beschriftung darunter (nebeneinander würde „Projekt“ abgeschnitten) */
@container (max-width: 520px) {
  .rings .ringbox { flex-direction: column; justify-content: center; gap: 5px; padding: 8px 4px; text-align: center; }
  .rings .ringbox span { max-width: 100%; }
}
/* schmaler Inspektor */
@container (max-width: 400px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .actions.main.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Handy: Tippziele ≥ 44 px, kleinere Ringe */
@media (max-width: 720px) {
  .card .body { padding: 14px; }
  .ringbox { gap: 6px; padding: 7px 8px; }
  .ring { width: 34px; height: 34px; }
  .ringbox span { font-size: 10.5px; }
  .actions a, .actions button { min-height: 44px; }
  .actions.links a, .actions.links button { min-height: 34px; }
  .rowact a, .rowact button { min-width: 36px; height: 36px; }
  div.since .big b { font-size: 24px; }
  .alarm input, .alarm button { height: 44px; }
  .alarm input { font-size: 16px; }   /* sonst zoomt iOS beim Tippen hinein */
  /* unsichtbare Tippfläche 44 px um kleine Knöpfe */
  .remove::after, .rowact a::after, .rowact button::after, .actions.links a::after, .actions.links button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; translate: -50% -50%; }
  .rowact a, .rowact button, .actions.links a, .actions.links button { position: relative; }
}
/* ---------- T5 Live-Feed, Pulse, Markt, 𝕏-Radar
   Live-Feed als Tabellenband (alle Spalten bündig per Subgrid), Pulse als eine Fläche mit drei Spalten, Markt als
   12-spaltige Messwand (Setzkasten mit 1-px-Fugen), 𝕏-Radar als Haarlinien-Liste. Nur Werte aus T1 (var()/color-mix()),
   eigene Hilfswerte mit Vorsilbe --t5-. Keine Animation beim normalen Neuzeichnen von #view (nur .enter, .mk-grid.first,
   scroll-gesteuert). Breiten-Regeln am Ende der Datei. */

/* ---------- Signal-Ring (Live-Feed, Pulse, Karten, Bericht, Bot-Radar): Füllung = Wert (--v), Farbe = Ampel (--sc) */
.lsig { --sc: var(--faint); position: relative; display: inline-grid; place-items: center; flex: none;
        width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--sc);
        font: 600 12px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
        /* Rückfall ohne Masken: eine innere Scheibe deckt die Mitte des Farbkegels ab */
        background: radial-gradient(closest-side, var(--t5-sig-in, var(--panel)) calc(100% - 3px), transparent calc(100% - 2.5px)),
                    conic-gradient(var(--sc) calc(var(--v) * 1%), var(--rule-2) 0); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .lsig { background: none; }
  /* Ring als eigene Ebene mit Maske: nur der 3-px-Rand ist sichtbar, die Zahl in der Mitte bleibt frei. --v erbt der Ring
     ausdrücklich (der Wert ist mit „inherits: false“ angemeldet und wird per style am Knopf gesetzt) */
  .lsig::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; --v: inherit;
                  background: conic-gradient(var(--sc) calc(var(--v) * 1%), var(--rule-2) 0);
                  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--text) calc(100% - 2.5px));
                          mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--text) calc(100% - 2.5px)); }
}
button.lsig { cursor: pointer; transition: scale var(--t-fast) var(--ease); }
.lsig.card-sig { width: 40px; height: 40px; margin-left: auto; font-size: 12.5px; }
/* nur neue Zeilen füllen ihren Ring (keine Animation beim normalen Neuzeichnen) */
.lrow.enter .lsig, .pl-row.enter .lsig { animation: sigRing 1.2s var(--ease) both; }

/* ---------- Live-Feed: Tabellenband – eine Fläche, Zeilen mit Haarlinien, Spalten über alle Zeilen bündig (Subgrid).
   Spalten: Alter · Signal · Name · Market Cap · Vol. 5 Min · Käufe/Verk. (.md) · Holder (.md) · Knöpfe.
   Kein content-visibility an .lrow – die Layout-Eingrenzung würde das Subgrid aufheben */
.lfeed { --t5-px: 14px;
         --t5-mid: 44px minmax(160px, 1.6fr) repeat(2, minmax(86px, .6fr)) repeat(2, minmax(80px, .7fr));
         display: grid; grid-template-columns: calc(56px + var(--t5-px)) var(--t5-mid) auto; column-gap: 12px;
         background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.lfeed > :not(.lrow) { grid-column: 1 / -1; }
.lrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; align-items: center; min-height: 52px;
        padding: 6px var(--t5-px); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background-color var(--t-fast); }
.lrow:last-child { border-bottom: 0; }
.lmore { display: flex; margin: 14px auto 2px; }   /* „50 weitere anzeigen“ unter dem Live-Band */
.lmore small { color: var(--faint); font-weight: 500; }
.lrow.fresh { box-shadow: inset 3px 0 0 var(--accent-2); }   /* JS nimmt .fresh nach 60 s wieder weg */
.lage { font: 500 12px/1.2 var(--mono); letter-spacing: -.02em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lrow.fresh .lage { color: var(--accent); font-weight: 600; }
.lname { min-width: 0; display: flex; align-items: center; gap: 10px; }
.lname .icon { width: 28px; height: 28px; font-size: 10px; flex: none; }
.lname-t { min-width: 0; flex: 1; display: grid; gap: 3px; }
.lname-t > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.lname-t b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.lname-t small { margin-left: 6px; font-size: 12px; color: var(--muted); }
/* Zahlen rechtsbündig wie in einer Tabelle; die Beschriftung steht nur in der ersten Zeile (wirkt als Kopfzeile) */
.lnum { min-width: 0; display: grid; justify-items: end; text-align: right; }
.lnum > span { font: 600 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
               max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lfeed > .lrow ~ .lrow .lnum > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lnum b { max-width: 100%; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbs { display: flex; width: 100%; height: 3px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: var(--rule); }
.lbs i { display: block; background: var(--good); }
.lbs u { display: block; flex: 1; background: var(--bad); text-decoration: none; }
/* Knöpfe: Icon-Knöpfe 28 px; mit Maus erst beim Überfahren der Zeile sichtbar, auf Touch immer */
.lact { display: flex; justify-content: flex-end; gap: 2px; }
.lact button, .lact a { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
                        border-radius: var(--r-xs); background: transparent; color: var(--muted); text-decoration: none; font-size: 0;
                        transition: background-color var(--t-fast), color var(--t-fast); }
.lact .ic { width: 15px; height: 15px; }
.lact [data-report] { color: var(--accent); }
.lact .fomo-btn { border: 0; color: var(--tech); }
.lact .merk.on { color: var(--warn); }
.lact .merk.on .ic { fill: currentColor; }
.lact .botbuy .ic { color: var(--warn); }
.lact button:active, .lact a:active { scale: .92; }
.lrow .lrisk { grid-column: 3 / -1; grid-row: 2; min-width: 0; }

/* ---------- Etiketten im Live-Feed (.ltags) und Risiko-Leiste (.riskbar, auch in Karten und im Signal-Fenster)
   20 px hoch, vorne ein 6-px-Punkt in der Zustandsfarbe (wie die Etiketten in T4); mit Icon färbt sich das Icon */
.ltags, .riskbar { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ltags span, .riskbar span { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
                             font: 600 11px/1 var(--font); white-space: nowrap; background: var(--sunk); color: var(--muted); }
.ltags .ic, .riskbar .ic { width: 12px; height: 12px; }
.ltags .g, .riskbar .g { --t5-dot: var(--good); background: var(--tone-good); color: var(--text); }
.ltags .w, .riskbar .w { --t5-dot: var(--warn); background: var(--tone-warn); color: var(--text); }
.ltags .b, .riskbar .b { --t5-dot: var(--bad); background: var(--tone-bad); color: var(--text); }
.ltags .g::before, .ltags .w::before, .ltags .b::before,
.riskbar .g::before, .riskbar .w::before, .riskbar .b::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--t5-dot); }
.riskbar .n { color: var(--faint); }
.riskbar .g .ic, .riskbar .w .ic, .riskbar .b .ic, .ltags .mv .ic { color: var(--t5-dot); }
.riskbar span:has(.ic)::before, .ltags .mv::before { display: none; }   /* Icon ersetzt den Punkt */
.ltags .rt { color: var(--accent); background: var(--hl); }
.ltags .rt .ic { color: var(--accent); }
.ltags .pin { color: var(--accent); background: var(--hl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent); }
/* im Band: Etiketten einzeilig – was nicht passt, rutscht in eine unsichtbare zweite Reihe (keine abgeschnittenen Wörter) */
.lrow .ltags { max-height: 20px; overflow: hidden; overflow: clip; }
.lrow .riskbar span { height: 19px; padding: 0 6px; font-size: 10.5px; }
.chip.rt-on { color: var(--good); }   /* Ergebniszeile: Echtzeit-Verbindung steht */

/* ---------- Signal-Aufschlüsselung (im Inspektor): Haarlinien-Zeilen, Punkte rechtsbündig */
.sigparts { display: grid; border-block: 1px solid var(--rule); }
.sigparts > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; }
.sigparts > div + div { border-top: 1px solid var(--rule); }
.sigparts b { font: 600 15px/1.3 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.sigparts b.p { color: var(--good); }
.sigparts b.m { color: var(--bad); }
.sigparts strong { display: block; font-size: 13.5px; font-weight: 600; }
.sigparts small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.sigparts > .note { padding: 12px 0; }

/* ---------- Qualitäts-Score: Abzeichen „B 61“ (Live-Feed, Pulse, Karten, Radar) und Aufschlüsselung im Inspektor.
   Stufenfarbe --t5-q: A gut, B zwischen gut und Achtung, C Achtung, D schlecht (nur gemischt aus T1-Werten) */
.q-a { --t5-q: var(--good); } .q-b { --t5-q: color-mix(in srgb, var(--good) 55%, var(--warn)); }
.q-c { --t5-q: var(--warn); } .q-d { --t5-q: var(--bad); }
.qbadge { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 7px 0 2px; border: 0; border-radius: var(--r-xs);
          background: color-mix(in srgb, var(--t5-q, var(--faint)) 13%, transparent); color: var(--text); cursor: pointer;
          font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; vertical-align: middle;
          transition: background-color var(--t-fast); }
.qbadge .qg { display: inline-grid; place-items: center; gap: 0; width: 16px; height: 16px; border-radius: 4px; background: var(--t5-q, var(--faint));
              color: var(--panel); font: 700 10px/1 var(--mono); }
.qbadge:hover { background: color-mix(in srgb, var(--t5-q, var(--faint)) 24%, transparent); }
.qbadge:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.br-name .qbadge { margin-left: 4px; }
.card-head .qbadge { margin-left: auto; align-self: center; }
.card-head .qbadge + .lsig.card-sig { margin-left: 8px; }
.st-exits span.q-a, .st-exits span.q-b, .st-exits span.q-c, .st-exits span.q-d { box-shadow: inset 3px 0 0 var(--t5-q); }
/* Zeile im Signal-Fenster, die zur Aufschlüsselung führt */
.qline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 10px 0;
         padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); color: var(--text);
         text-align: left; cursor: pointer; transition: background-color var(--t-fast); }
.qline:hover { background: var(--hl); }
.qline > span b { display: block; font-size: 13.5px; }
.qline > span small { display: block; font-size: 12px; color: var(--muted); }
.qline > .ic { width: 15px; height: 15px; color: var(--muted); rotate: 180deg; }
.qhead { padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
/* fünf Säulen als waagerechte Balken */
.qbars { display: grid; gap: 7px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); }
.qbars > div { display: grid; grid-template-columns: 118px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.qbars span { font-size: 12.5px; color: var(--muted); }
.qbars i { position: relative; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; overflow: clip; }
.qbars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--qv) * 1%); border-radius: inherit; background: var(--qc); }
.qbars b { font: 600 13px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.qpil { margin-top: 14px; }
.qpil h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; font: 600 11px/1.3 var(--mono);
           text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.qpil h4 b { font: 600 14px/1 var(--mono); color: var(--text); letter-spacing: -.02em; }
.sigparts b.s { color: var(--text); }
.sigparts b.s::after { content: ""; display: block; height: 3px; margin: 4px 0 0 auto; width: calc(var(--qv) * .4px); max-width: 40px;
                       border-radius: 2px; background: var(--accent-2); }
@media (max-width: 560px) { .qbars > div { grid-template-columns: 96px minmax(0, 1fr) 30px; } }

/* ---------- Pulse: drei Phasen-Spalten in einer Fläche, senkrechte Haarlinien dazwischen */
.pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--rule);
         border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.pl-col { min-width: 0; display: flex; flex-direction: column; }
.pl-col + .pl-col { border-left: 1px solid var(--rule); }
.pl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; padding: 16px 16px 14px;
           border-bottom: 1px solid var(--rule); font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-head small { grid-column: 1; grid-row: 2; margin-top: 3px; font: 400 12px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: var(--faint); }
.pl-head b { grid-column: 2; grid-row: 1 / span 2; font: 600 28px/1 var(--mono); letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 16px;
          border-bottom: 1px solid var(--rule); cursor: pointer; transition: background-color var(--t-fast); }
.pl-row .icon { width: 30px; height: 30px; font-size: 10px; }
.pl-row .lsig { width: 34px; height: 34px; font-size: 11.5px; }
.pl-name { min-width: 0; display: grid; gap: 2px; }
.pl-name > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.pl-name b { font-size: 13.5px; font-weight: 700; }
.pl-name small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--muted); }
.pl-age { font: 600 11px/1.3 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.pl-nums { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11.5px; color: var(--faint); }
.pl-nums b { font-weight: 600; color: var(--text); }
/* Bonding-Curve: 2-px-Linie auf Haarlinie, Prozent rechts */
.pl-curve { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 600 11px/1.3 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-curve > span { flex: 1; height: 2px; background: var(--rule); }
.pl-curve i { display: block; height: 100%; background: var(--accent-2); }
.pl-row .ltags { grid-column: 1 / -1; }
.pl-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; margin-left: -6px; }
.pl-act button, .pl-act a { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
                            border-radius: var(--r-xs); background: transparent; color: var(--muted); text-decoration: none; font-size: 0;
                            transition: background-color var(--t-fast), color var(--t-fast); }
.pl-act .ic { width: 15px; height: 15px; }
.pl-act [data-report] { color: var(--accent); }
.pl-act .fomo-btn { border: 0; color: var(--tech); }
.pl-act .merk.on { color: var(--warn); }
.pl-act .merk.on .ic { fill: currentColor; }
.pl-empty { padding: 32px 16px; text-align: center; font-size: 12.5px; color: var(--faint); text-wrap: balance; }

/* ---------- Markt = Messwand: 12-Spalten-Setzkasten, Fugen 1 px (Umrisse benachbarter Kacheln liegen übereinander).
   Reihenfolge im HTML (markt.js): Begrüßung, 3× Kurs, Angst & Gier, Puls, Heatmap, 4× Liste, Themen, CoinGecko, 2× Kurzinfo.
   Begrüßung 8 × 3 Reihen, die Kurse stehen rechts daneben untereinander (Börsenspalte) */
.mk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; padding: 1px; border-radius: var(--r-lg);
           box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; overflow: clip; }
.mk-grid > * { min-width: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; outline: 1px solid var(--rule); background: var(--panel); }
.mk-tile { padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.mk-tile h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 11px/1.4 var(--font);
              text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-variation-settings: normal; }
.mk-tile h3 .ic { width: 14px; height: 14px; color: var(--accent); }
.mk-tile h3 small { font-weight: 400; font-size: 11.5px; text-transform: none; letter-spacing: 0; color: var(--faint); }
.mk-tile .note { margin: 0; }
.mk-hero { grid-column: span 8; grid-row: span 3; position: relative; overflow: hidden; overflow: clip;
           display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 30px 32px;
           background: radial-gradient(80% 120% at 0% 0%, var(--hl), transparent 60%), var(--panel); }
/* ruhige Zier: Ringe wie von oben in die Tasse geschaut, zum Rand hin ausgeblendet (::before liegt unter dem Inhalt,
   weil Text und Knopf danach als positionierte Elemente gezeichnet werden – ohne negativen z-index) */
.mk-hero > * { position: relative; }
.mk-hero::before { content: ""; position: absolute; right: -10%; bottom: -34%; width: min(62%, 520px); aspect-ratio: 1;
                  border-radius: 50%; pointer-events: none;
                  background: repeating-radial-gradient(circle, transparent 0 21px, var(--rule-2) 21px 22px);
                  -webkit-mask-image: radial-gradient(closest-side, var(--text), transparent);
                          mask-image: radial-gradient(closest-side, var(--text), transparent); }
.mk-hero > div { max-width: 58ch; }
.mk-hero h2 { margin: 0 0 14px; font: italic 500 52px/1.02 var(--serif); letter-spacing: -.03em; color: var(--text); font-variation-settings: "SOFT" 100; }
.mk-hero p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.mk-hero p b { font-weight: 600; color: var(--text); }
.mk-hero .btn { height: 44px; padding: 0 18px; font-size: 14px; }
.mk-hero .btn kbd { margin-left: 6px; padding: 0 6px; border-radius: 5px; font: 600 10.5px/1.6 var(--mono);
                    background: color-mix(in srgb, var(--on-ink) 16%, transparent); font-variant-numeric: tabular-nums; }
/* Mini-Kurven (auch in den Inseln): Linie in Richtungsfarbe, Fläche nur als Hauch */
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.sp-line { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sp-area { fill: var(--hl); stroke: none; }
.spark.up .sp-line { stroke: var(--good); }
.spark.up .sp-area { fill: var(--tone-good); }
.spark.down .sp-line { stroke: var(--bad); }
.spark.down .sp-area { fill: var(--tone-bad); }
.spark.big { height: 54px; }
/* Kurs-Kacheln (SOL, BTC, ETH): Kopf, große Mono-Zahl, Kurve als feine Linie, Kennzahlen darunter */
.mk-major { grid-column: span 4; gap: 8px; }
.mk-mh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-mh .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--sunk); color: var(--accent); }
.mk-mh > b { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.mk-chg { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; }
.mk-chg b { font: 600 13.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.mk-chg small { font: 600 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.mk-price { font: 600 30px/1.1 var(--mono); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mk-major .spark { height: 44px; margin-block: 2px; }
.mk-major .sp-area { display: none; }
.mk-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.mk-sub b { font: 600 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
/* Angst & Gier: Halbkreis mit Zeiger, Wert groß, 30-Tage-Verlauf als Balken */
.mk-fng { grid-column: span 4; text-align: center; }
.fng { display: block; width: 100%; max-width: 220px; margin: 2px auto 0; overflow: visible; }
.fng path { fill: none; stroke-width: 11; stroke-linecap: butt; }
.fng .fg-x { stroke: var(--bad); }
.fng .fg-f { stroke: color-mix(in srgb, var(--bad) 45%, var(--warn)); }
.fng .fg-n { stroke: var(--rule-2); }
.fng .fg-g { stroke: color-mix(in srgb, var(--good) 60%, var(--warn)); }
.fng .fg-xg { stroke: var(--good); }
.fg-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 92px; }
.mk-grid.first .fg-needle { animation: needle 1.3s var(--spring) .2s both; }   /* Zeiger schwingt nur beim ersten Anzeigen ein */
.fg-hub { fill: var(--text); stroke: var(--panel); stroke-width: 3; }
.fng-val { display: grid; justify-items: center; gap: 2px; margin-top: -4px; }
.fng-val b { font: 600 36px/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.fng-val span { font-size: 13px; font-weight: 600; }
.fng-val.bad span { color: var(--bad); }
.fng-val.warn span { color: var(--warn); }
.fng-val.mid span { color: var(--muted); }
.fng-val.good span { color: var(--good); }
.fng-hist { display: flex; align-items: flex-end; gap: 2px; height: 28px; padding-top: 4px; border-bottom: 1px solid var(--rule); }
.fng-hist i { flex: 1; min-width: 0; border-radius: 1px 1px 0 0; opacity: .8; }
.fng-hist i.bad { background: var(--bad); }
.fng-hist i.warn { background: var(--warn); }
.fng-hist i.mid { background: var(--rule-2); }
.fng-hist i.good { background: var(--good); }
/* Memecoin-Puls: Riesenzahl links, 3×2-Messwerte rechts, darunter die Launchpads als Balken */
.mk-pulse { grid-column: span 8; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 32px; }
.mk-pulse > * { grid-column: 1 / -1; }
.mk-pulse > .mk-big { grid-column: 1; align-self: end; }
.mk-pulse > .mk-pads { grid-column: 1; align-self: start; }
.mk-pulse > .mk-stats { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
.mk-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1.4 var(--mono);
           text-transform: uppercase; letter-spacing: .12em; color: var(--bad); font-variant-numeric: tabular-nums; }
.mk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
             box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }   /* ruhiger Punkt – #view wird alle 10 s neu gebaut */
.mk-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mk-big b { font: 600 64px/.95 var(--mono); letter-spacing: -.06em; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-big span { max-width: 14ch; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.mk-big.sm b { font: 600 22px/1.15 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.mk-big.sm b.up { color: var(--good); }
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.mk-stats > div { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.mk-stats > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.mk-stats span { font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mk-stats b { font: 600 22px/1.15 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mk-stats small { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Launchpads: Name · Balken (6 px, Spur eingelassen) · Zahl – die Spur liegt als Hintergrund in der mittleren Spalte */
.mk-pads { display: grid; gap: 8px; }
.mk-pads div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--muted);
               background: linear-gradient(var(--sunk), var(--sunk)) 120px 50% / calc(100% - 120px - 54px) 6px no-repeat; }
.mk-pads span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pads i { justify-self: start; height: 6px; min-width: 4px; border-radius: 0 3px 3px 0; background: var(--accent-2); }
.mk-pads b { font: 600 12px/1 var(--mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
/* Heatmap: Treemap über die ganze Breite, Kacheln mit 1-px-Fugen in Flächenfarbe */
.mk-heat { grid-column: 1 / -1; }
.hm { position: relative; aspect-ratio: 3; overflow: hidden; overflow: clip;   /* Seitenverhältnis wie heatmap() in markt.js (W 300 × H 100) */
      border-radius: var(--r-xs); background: var(--sunk); }
.hm-t { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 2px 4px;
        overflow: hidden; text-align: center; cursor: pointer; color: var(--text);
        border-right: 1px solid var(--panel); border-bottom: 1px solid var(--panel);
        background: color-mix(in srgb, var(--good) var(--mix), var(--sunk)); }
.hm-t.down { background: color-mix(in srgb, var(--bad) var(--mix), var(--sunk)); }
.hm-t b { max-width: 100%; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-t span { font: 600 12.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.hm-t small { font: 500 10px/1.2 var(--mono); opacity: .75; font-variant-numeric: tabular-nums; }
/* Bestenlisten und CoinGecko: 40-px-Zeilen mit Haarlinien, Rang in Fraunces */
.mk-list { grid-column: span 3; }
.mk-rows { display: grid; }
.mk-row { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px;
          margin-inline: -8px; padding: 4px 8px; color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast); }
.mk-row + .mk-row { border-top: 1px solid var(--rule); }
.mk-row.static { grid-template-columns: 24px minmax(0, 1fr) auto; cursor: default; }
.mk-row .icon { width: 24px; height: 24px; font-size: 9px; }
.mk-row > b { font-size: 13px; text-align: right; white-space: nowrap; }
.mk-rank { font: 500 18px/1 var(--serif); font-variation-settings: "SOFT" 100; font-variant-numeric: lining-nums tabular-nums; color: var(--faint); text-align: center; }
.mk-sym { display: grid; min-width: 0; line-height: 1.25; }
.mk-sym b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sym small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trend-Themen: Wörter in Fraunces, Größe = Häufigkeit (--s aus dem JS), Zahl hochgestellt */
.mk-themes { grid-column: span 8; }
.mk-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.mk-cloud button { padding: 2px 0; border: 0; background: none; color: var(--text); cursor: pointer;
                   font: 500 calc(var(--s, 1) * 18px)/1.15 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.01em;
                   text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
                   transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.mk-cloud button b { margin-left: 3px; vertical-align: super; font: 600 10px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.mk-cg { grid-column: span 4; }
.mk-mini { grid-column: span 6; }
.mk-mini .btn { justify-self: start; }
/* Einblenden: nur beim ersten Anzeigen gestaffelt; darunter gleiten Kacheln beim Scrollen herein (wo der Browser das kann) */
.mk-grid.first > * { animation: rise .6s var(--ease) both; }
.mk-grid.first > :nth-child(n+2) { animation-delay: .06s; }
.mk-grid.first > :nth-child(n+5) { animation-delay: .12s; }
.mk-grid.first > :nth-child(n+7) { animation-delay: .18s; }
.mk-grid.first > :nth-child(n+12) { animation-delay: .24s; }

/* ---------- 𝕏-Radar: Kopf mit Status, Verwalten (im Inspektor), Erwähnungen als Haarlinien-Liste */
.xhead { margin-top: 20px; overflow: hidden; }
#xStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 10px 10px 18px; font-size: 13px; color: var(--muted); }
#xStatus b { color: var(--text); }
.xhead #xStatus > .btn { order: 9; }   /* „Accounts & Einstellungen“ steht rechts am Ende (margin-left: auto kommt aus dem JS) */
.fold { border-top: 1px solid var(--rule); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  min-height: 44px; padding: 0 18px; font: 600 13px/1.3 var(--font); color: var(--text); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
                         rotate: -45deg; transition: rotate var(--t-out) var(--ease); }
.fold[open] > summary::after { rotate: 45deg; }
.fold .inner { padding: 4px 18px 18px; }
.pop-body #xManage { border: 0; }
.pop-body #xManage > summary { display: none; }
.pop-body #xManage .inner { padding: 0; }
.accts { display: flex; flex-wrap: wrap; gap: 6px; }
.acct { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 2px 0 10px; border: 1px solid var(--border);
        border-radius: var(--r-xs); background: var(--sunk); font-size: 12.5px; font-weight: 600; }
.acct a { text-decoration: none; }
.acct.bad { box-shadow: inset 3px 0 0 var(--bad); }
.acct.bad a { color: var(--bad); }
.acct button { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-xs);
               background: transparent; color: var(--faint); font-size: 11px; transition: color var(--t-fast), background-color var(--t-fast); }
.cov { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font: 500 10.5px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cov .ic { width: 11px; height: 11px; }
.xform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.xform #xAdd { field-sizing: content; min-width: 18ch; max-width: 100%; font-family: var(--mono); }
.xform input[type=range] { width: 160px; }
/* Erwähnungen: eine Fläche, Zeilen mit Haarlinien – Coin | Posts | Knöpfe */
.xlist { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
/* 300 Erwähnungen: nur sichtbare Zeilen anordnen und zeichnen (kein Subgrid hier) */
.xrow { content-visibility: auto; contain-intrinsic-size: auto 100px; }
.xrow { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; gap: 8px 22px; align-items: start; padding: 16px 18px;
        transition: background-color var(--t-fast); }
.xrow + .xrow { border-top: 1px solid var(--rule); }
.xcoin { display: grid; gap: 3px; min-width: 0; }
.xcoin .sym { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15.5px; overflow-wrap: anywhere; }
.xcoin small { font-size: 12px; color: var(--muted); }
.xbody { display: grid; gap: 6px; min-width: 0; }
.xbody > .btn { justify-self: start; }
.meta { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.meta .ic { width: 13px; height: 13px; }
.xbody details > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.xbody details > summary::-webkit-details-marker { display: none; }
.xact { display: grid; gap: 8px; justify-items: end; align-content: start; }
/* einzelner 𝕏-Post (Karten-Details, Wallets, Screener, Inspektor): Zitat mit Haarlinie links */
.xposts { display: grid; gap: 12px; }
.xpost { display: block; padding: 2px 0 2px 12px; border-left: 2px solid var(--rule-2); color: var(--text); text-decoration: none;
         transition: border-color var(--t-fast); }
.xpost small { display: block; margin-bottom: 2px; font-size: 11px; color: var(--muted); }
.xpost small .ic { width: 11px; height: 11px; }
.xpost span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.45; }
.pop-body .xpost span { -webkit-line-clamp: 8; line-clamp: 8; }   /* im Inspektor ist Platz für mehr Text */

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .lrow:hover, .pl-row:hover, .xrow:hover { background: var(--hover); }
  .lrow:hover .lsig, .pl-row:hover .lsig { --t5-sig-in: var(--hover); }
  button.lsig:hover { scale: 1.06; }
  .lrow .lact { opacity: 0; transition: opacity var(--t-fast); }
  .lrow:hover .lact, .lrow:focus-within .lact { opacity: 1; }
  .lact button:hover, .lact a:hover, .pl-act button:hover, .pl-act a:hover { background: var(--hl); color: var(--text); }
  .lact [data-report]:hover, .pl-act [data-report]:hover { color: var(--accent); }
  .mk-row:not(.static):hover { background: var(--hover); }
  .hm-t:hover { z-index: 2; outline: 2px solid var(--ink); outline-offset: -2px; }
  .mk-cloud button:hover { color: var(--accent); text-decoration-color: var(--accent); }
  .acct a:hover { color: var(--accent); }
  .acct button:hover { background: var(--tone-bad); color: var(--bad-ink); }
  .fold > summary:hover { color: var(--accent); }
  .xbody details > summary:hover { color: var(--accent); }
  a.xpost:hover { border-color: var(--accent); }
}

/* ---------- Scroll-gesteuert: Kacheln und Erwähnungen unterhalb des Bildschirms gleiten herein (nur wo der Browser das kann) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mk-grid:not(.first) > .mk-tile, .xlist > .xrow:not(.enter) {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* ---------- Rückfall ohne Subgrid (ältere Safari/Firefox): jede Zeile bekommt dieselbe Spaltenvorlage selbst –
   Knopf-Spalte fest, damit die Spalten trotzdem bündig stehen */
@supports not (grid-template-columns: subgrid) {
  .lfeed { display: block; }
  .lrow { grid-template-columns: 56px var(--t5-mid) 184px; column-gap: 12px; }
}

/* ---------- Breite: Bausteine richten sich nach der Inhaltsbreite (Container „main“) */
@container main (max-width: 1000px) {
  .mk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mk-hero { grid-column: 1 / -1; grid-row: auto; }
  .mk-major, .mk-fng { grid-column: span 2; }
  .mk-pulse { grid-column: span 4; grid-template-columns: minmax(0, 1fr); }
  .mk-pulse > .mk-big, .mk-pulse > .mk-pads, .mk-pulse > .mk-stats { grid-column: 1; grid-row: auto; }
  .mk-list, .mk-mini { grid-column: span 3; }
  .mk-themes, .mk-cg { grid-column: 1 / -1; }
  .mk-big b { font-size: 52px; }
  .mk-hero h2 { font-size: 40px; }
  .mk-hero p { font-size: 15px; }
}
@container main (max-width: 900px) {
  /* Tabellenband ohne Käufe/Verkäufe und Holder */
  .lfeed { --t5-mid: 44px minmax(0, 2fr) repeat(2, minmax(86px, .7fr)); }
  .lfeed .md { display: none; }
}
@container main (max-width: 780px) {
  .md { display: none; }   /* auch in Tabellen (Liquidität, Vol. 24h) */
  .mk-price { font-size: 24px; }
  .mk-major .spark { height: 36px; }
  .mk-hero { padding: 24px; }
  .mk-hero h2 { font-size: 34px; }
}
@container main (max-width: 720px) {
  .xrow { grid-template-columns: minmax(0, 1fr); }
  .xact { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; }
}
@container main (max-width: 600px) {
  /* Live-Feed zweizeilig: oben Name, darunter Market Cap und Volumen; Alter, Signal und Knöpfe über beide Zeilen */
  .lfeed { display: block; }
  .lrow { grid-template-columns: 46px 34px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; }
  .lrow > .lage { grid-column: 1; grid-row: 1 / 3; }
  .lrow > .lsig { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .lrow > .lname { grid-column: 3 / 5; grid-row: 1; }
  .lrow > .lname + .lnum { grid-column: 3; grid-row: 2; }
  .lrow > .lname + .lnum + .lnum { grid-column: 4; grid-row: 2; }
  .lrow > .lact { grid-column: 5; grid-row: 1 / 4; flex-direction: column; justify-content: center; gap: 8px; }
  .lrow .lname .icon { display: none; }
  .lrow .lrisk { grid-column: 1 / 5; grid-row: 3; }
  .lrow .lact > :not([data-info]):not(.fomo-btn) { display: none; }
  .lrow .lsig { width: 34px; height: 34px; font-size: 11.5px; }
  .lrow .lnum { justify-items: start; text-align: left; }
  .lrow .lnum > span, .lfeed > .lrow ~ .lrow .lnum > span { position: static; width: auto; height: auto; clip-path: none; font-size: 10px; }
  /* Pulse: Spalten waagerecht wischbar */
  .pulse { grid-template-columns: repeat(3, min(86%, 340px)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
  .pl-col { scroll-snap-align: start; }
  /* Messwand einspaltig */
  .mk-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-grid > * { grid-column: 1 / -1; grid-row: auto; }
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-stats > div:nth-child(3n+1) { border-left: 1px solid var(--rule); padding-left: 14px; }
  .mk-stats > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .mk-big b { font-size: 44px; }
  .mk-pads div { grid-template-columns: 90px minmax(0, 1fr) 40px; background-position: 100px 50%; background-size: calc(100% - 100px - 50px) 6px; }
  .mk-hero { padding: 22px; gap: 16px; }
  .mk-hero h2 { font-size: 30px; }
  .mk-hero .btn kbd { display: none; }
}

/* ---------- Heatmap-Format passend zu markt.js: unter 720 px Fensterbreite rechnet heatmap() quadratisch (W = 100) */
@media (max-width: 719.98px) {
  .hm { aspect-ratio: 1; }
}

/* ---------- Handy: Tippziele mindestens 44 px (kleine Knöpfe bekommen eine unsichtbare, größere Trefferfläche) */
@media (max-width: 720px) {
  .lrow .lact > :not([data-info]):not(.fomo-btn) { display: none; }   /* übrige Aktionen stehen im Bericht */
  .lact, .lrow > .lact, .pl-act { gap: 12px; }
  .lact button, .lact a, .pl-act button, .pl-act a { width: 32px; height: 32px; }
  .lact button::after, .lact a::after, .pl-act button::after, .pl-act a::after { content: ""; position: absolute; inset: -6px; }
  .pl-act { margin-left: 0; }
  .lrow .lsig::after, .pl-row .lsig::after { content: ""; position: absolute; inset: -5px; }
  .mk-row { min-height: 48px; }
  .mk-cloud button { min-height: 44px; }
  .mk-hero .btn { width: 100%; justify-content: center; }
  .acct { min-height: 44px; }
  .acct button { width: 40px; height: 40px; }
  .accts { gap: 8px; }
  .xform #xAdd { flex: 1 1 100%; min-height: 44px; }
  .xform .btn { min-height: 44px; }
}
/* ---------- T6 Wallets & Screener
   Wallets: eigene Wallets als Setzkasten aus Karten (1-px-Fugen), bekannte Wallets (KOLs, aus 𝕏, Zusammenhänge, Gespeichert)
   als Haarlinien-Liste in einer Fläche. Screener: „Suchschlitz“ für die Adresse, Fortschritt als Zeitleiste (auch im Bericht,
   solange er entsteht), Ergebnis mit Kopf, Kennzahlen-Leiste und Abschnitten. Nur Werte aus T1 (var()/color-mix()),
   eigene Hilfswerte mit Vorsilbe --t6-. Breiten-Regeln am Ende der Datei. */

/* ---------- Wallets: Rahmen und Formular „Hinzufügen“ */
.wallets { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.wallets.one { display: block; }
.addform { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 16px; padding: 14px; }
.addform input { width: 100%; min-width: 0; height: 40px; }
.addform #wAddr { font-family: var(--mono); font-variant-numeric: slashed-zero; }
.addform #wLabel { width: auto; field-sizing: content; min-width: 16ch; max-width: 30ch; }   /* wächst mit dem Namen */
.addform .btn { height: 40px; }
.addform .msg { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.addform .msg.err { color: var(--bad); }

/* ---------- Eigene Wallets: Karten im Setzkasten (Umrisse benachbarter Karten liegen in der Fuge übereinander) */
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 1px; padding: 1px;
         border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; overflow: clip; }
.wlist > * { min-width: 0; }
.wlist > .wcard { border: 0; border-radius: 0; box-shadow: none; outline: 1px solid var(--rule); }
.wlist > .empty { grid-column: 1 / -1; }
.wlist:has(> .empty) { box-shadow: none; }
.wcard { position: relative; display: grid; gap: 14px; align-content: start; padding: 18px 20px; }
.wcard > .note { margin: 0; }
.whead { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 36px; }
.whead > div:last-child { min-width: 0; }
/* Farbe der Kachel kommt aus dem JS (style="background: var(--…)") */
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
          color: var(--on-accent); font: 700 12.5px/1 var(--mono); letter-spacing: .02em;
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); font-variant-numeric: tabular-nums; }
.wname { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.waddr { display: flex; align-items: center; gap: 6px; font: 500 12px/1.4 var(--mono); font-variant-numeric: slashed-zero tabular-nums; color: var(--muted); }
/* Zahlenleiste: Wert groß, Beschriftung klein darunter, Trenner dazwischen */
.wstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--rule);
          font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.wstats > div { min-width: 0; padding: 10px 12px; }
.wstats > div:first-child { padding-left: 0; }
.wstats > div + div { border-left: 1px solid var(--rule); }
.wstats b { display: block; margin-bottom: 2px; font: 600 15px/1.3 var(--mono); letter-spacing: -.02em; text-transform: none; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* ---------- Trades (Wallet-Karten, Screener „Käufer & Verkäufer“, Handelspaare): Haarlinien-Zeilen */
.trades { display: grid; }
.trades > .note { margin: 0; padding: 4px 0; }
.trade { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 36px;
         margin-inline: -8px; padding: 6px 8px; font-size: 12.5px; transition: background-color var(--t-fast); }
.trade + .trade { border-top: 1px solid var(--rule); }
.trade > span:not(.tside) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade a { font-weight: 700; text-decoration: none; }
.trade small { color: var(--muted); white-space: nowrap; }
.trade > small:last-child { text-align: right; }
.t-sol { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
/* Kauf/Verkauf als Etikett */
.tside { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
         font: 600 10.5px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; background: var(--sunk); color: var(--muted); font-variant-numeric: tabular-nums; }
.tside.buy { background: var(--tone-good); color: var(--good-ink); }
.tside.sell { background: var(--tone-bad); color: var(--bad-ink); }
.tside.airdrop { background: var(--tone-warn); color: var(--warn-ink); }
.tside.out { background: var(--sunk); color: var(--muted); }

/* ---------- Bekannte Wallets (KOLs, aus 𝕏), Zusammenhänge, Gespeichert: eine Fläche, Zeilen mit Haarlinien */
.known { padding-top: 12px; overflow: hidden; overflow: clip; }
.klist { max-height: 760px; overflow-y: auto; overscroll-behavior: contain; }
.krow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
        border-top: 1px solid var(--rule); transition: background-color var(--t-fast); }
.krow.lfresh { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent-2); }   /* neu seit dem Öffnen der Seite */
.rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--sunk); color: var(--muted);
        font: 600 12px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rank.top { background: var(--ink); color: var(--on-ink); }
.rank .ic { width: 14px; height: 14px; }
.kname { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 14px; font-weight: 700; }
.kname a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.kname .waddr { font-size: 12.5px; color: var(--text); }
.kmeta { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.kmeta b { font-family: var(--mono); font-weight: 600; }
.lhead { margin: 22px 14px 6px; font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
         font-variation-settings: normal; font-variant-numeric: tabular-nums; }
/* „+ Beobachten“, „Notiz“, „Analyse“: Umriss-Knopf, Überfahren = Tinte; „✓ beobachtet“ nur Text */
.follow { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-2);
          border-radius: var(--r-sm); background: transparent; color: var(--text); font: 600 12.5px/1 var(--font); white-space: nowrap; cursor: pointer;
          transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.follow .ic { width: 14px; height: 14px; }
.follow:active { scale: .96; }
.follow.on { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.follow.done { border-color: transparent; background: none; color: var(--good); cursor: default; }
/* Wallet- und Coin-Chips in Zusammenhängen */
.wchips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.wchip, .cchip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--border);
                 border-radius: var(--r-xs); background: var(--sunk); color: var(--text); font: 600 11.5px/1 var(--font); text-decoration: none;
                 white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast); }
.wchip .ic, .cchip .ic { width: 12px; height: 12px; }
.wchip small { font-weight: 500; color: var(--muted); }
.wchip.mine { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); background: var(--hl); color: var(--accent); }
.cchip small { font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums; }
/* Market-Cap-Filter über den Listen */
.lfilter { display: grid; gap: 10px; margin: 0 14px 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sunk); }
.lfrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lfilter .mcap { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.lfilter select { width: auto; min-width: 110px; height: 32px; padding: 0 28px 0 10px; font-size: 12.5px; }
.lfilter .presets { margin: 0; }
.lfinfo { font-size: 11.5px; color: var(--muted); }
/* Speichern (☆/★), Notiz, Kurse beim Speichern und jetzt */
.lbtns { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.lsave { position: relative; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border);
         border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
         transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.lsave .ic { width: 15px; height: 15px; }
.lsave.on { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--tone-warn); color: var(--warn-ink); }
.lsave.on .ic { fill: currentColor; }
.wchips .lsave { min-width: 24px; height: 24px; margin-left: 4px; padding: 0 5px; }
.wchips .lsave .ic { width: 13px; height: 13px; }
.lnote { margin-top: 8px; padding: 6px 10px; border-radius: var(--r-xs); background: var(--sunk); box-shadow: inset 2px 0 0 var(--accent-2);
         font-size: 12px; overflow-wrap: anywhere; }
.lnote .ic { width: 12px; height: 12px; color: var(--accent); }
.lmkt { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.lmkt b { font: 600 11.5px/1.4 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.lmkt b.up { color: var(--good); }
.lmkt b.down { color: var(--bad); }

/* ---------- Screener: Suchschlitz – Adressfeld 52 px in Mono über die ganze Breite, Knopf in Tinte rechts */
.sform { display: grid; gap: 12px; margin-bottom: 20px; padding: 16px; }
.sinput { display: flex; align-items: center; gap: 8px; }
.sinput .search { flex: 1; width: auto; max-width: none; }
.sinput .search svg { left: 18px; width: 18px; height: 18px; }
.sinput input { width: 100%; height: 52px; padding: 0 18px 0 48px; border-color: var(--border-2); border-radius: var(--r-md); background: var(--sunk);
                font: 500 17px/1 var(--mono); font-variant-numeric: slashed-zero tabular-nums; letter-spacing: -.01em; }
.sinput input::placeholder { font: 400 15px/1 var(--font); letter-spacing: 0; color: var(--muted); }
.sinput .btn { height: 52px; padding: 0 24px; border-radius: var(--r-md); font-size: 14px; }
.smsg { font-size: 12.5px; color: var(--muted); }
.smsg:empty { display: none; }
.smsg.err { color: var(--bad); }
.shist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.hchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--border); border-radius: 999px;
         background: var(--panel); color: var(--text); font: 600 12px/1 var(--font); text-transform: none; letter-spacing: 0; cursor: pointer;
         transition: border-color var(--t-fast), color var(--t-fast); }
.hchip .icon { width: 20px; height: 20px; font-size: 8px; border-radius: 50%; }
/* Risiko-Stufe (Verlauf-Punkt, Urteil): rot / gelb / grün */
.rdot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--faint); }
.rdot.high { background: var(--bad); }
.rdot.medium { background: var(--warn); }
.rdot.low { background: var(--good); }

/* ---------- Fortschritt (Screener und Bericht in Arbeit): Zeitleiste – Kreis je Schritt, Verbindungslinie wird grün */
.steps { display: grid; max-width: 560px; padding: 14px 22px; }
.stp { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 14px; font-weight: 600; line-height: 1.35;
       color: var(--faint); transition: color var(--t-out); }
.stp > div { min-width: 0; }
.stp small { font-size: 12px; font-weight: 400; color: var(--muted); }
.stp i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 2px solid var(--rule-2); border-radius: 50%; background: var(--panel);
         font: normal 700 12px/1 var(--mono); color: var(--on-accent); transition: background-color var(--t-out), border-color var(--t-out); font-variant-numeric: tabular-nums; }
.stp:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: calc(50% + 15px); width: 2px; height: calc(100% - 30px); background: var(--rule-2); }
.stp.running, .stp.done, .stp.failed { color: var(--text); }
.stp.running i { border-color: var(--accent-2); border-top-color: transparent; animation: spin .8s linear infinite; }
.stp.done i { border-color: var(--good); background: var(--good); }
.stp.done:not(:last-child)::after { background: var(--good); }
.stp.failed i { border-color: var(--bad); background: var(--bad); }
.stp.skipped { opacity: .5; }

/* ---------- Screener-Ergebnis: Kopf mit Coin, Kennzahlen und Urteil */
.shero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; margin-bottom: 16px; padding: 22px 24px; }
.shero > div:first-child { display: grid; gap: 16px; align-content: start; min-width: 0; }
.shero .head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.shero .head .icon { width: 56px; height: 56px; font-size: 16px; border-radius: var(--r-md); }
.shero h2 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 600 30px/1.1 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; }
.shero .sub { font-size: 13px; color: var(--muted); }
.shero .addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font: 500 12px/1.4 var(--mono);
               font-variant-numeric: slashed-zero tabular-nums; color: var(--muted); word-break: break-all; }
/* Kennzahlen-Leiste: Felder mit 1-px-Trennern (Schatten in der Fuge; was am Rand liegt, schneidet die Leiste ab) */
.skpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 1px; margin: 0 -14px;
         border-block: 1px solid var(--rule); overflow: hidden; overflow: clip; }
.skpis > div { display: grid; gap: 2px; min-width: 0; padding: 10px 14px; box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule); }
.skpis span { font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.skpis b { font: 600 17px/1.2 var(--mono); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.counts { display: flex; flex-wrap: wrap; gap: 6px; }
.cnt { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font: 600 12px/1 var(--mono);
       background: var(--sunk); color: var(--muted); font-variant-numeric: tabular-nums; }
.cnt.bad { background: var(--tone-bad); color: var(--bad-ink); }
.cnt.warn { background: var(--tone-warn); color: var(--warn-ink); }
.cnt.good { background: var(--tone-good); color: var(--good-ink); }

/* ---------- Screener-Abschnitte: zwei Spalten, jede Fläche mit Titel in Fraunces */
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sec { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px 20px; }
.sec h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 19px/1.2 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.sec h3 small { font: 400 11.5px/1.3 var(--font); letter-spacing: 0; color: var(--muted); text-align: right; }
.sec.wide { grid-column: 1 / -1; }
.sec .tablewrap { margin-inline: -6px; border: 0; border-radius: 0; background: none; overflow-x: auto; }
/* kompakte Tabellen ohne Rahmen (Markt je Zeitraum, Top-Holder) */
.mtable th, .mtable td { padding: 7px 6px; font-size: 12.5px; }
.sec .mtable th, .mtable th { position: static; background: none; }
.mtable tr:last-child td { border-bottom: 0; }
/* Signale: Haarlinien-Zeilen mit farbiger Marke (✕ ! ✓ i) – auch in den Kapiteln des Berichts */
.siglist { display: grid; }
.sig { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.45; }
.sig + .sig { border-top: 1px solid var(--rule); }
.sig > b { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--faint);
           color: var(--on-accent); font: 700 11px/1 var(--mono); font-variant-numeric: tabular-nums; }
.sig > b .ic { width: 12px; height: 12px; }
.sig.bad > b { background: var(--bad); }
.sig.warn > b { background: var(--warn); }
.sig.good > b { background: var(--good); }
.sig.info > b { background: var(--tech); }
/* Balken: Anteil eines Holders, Käufe/Verkäufe */
.hbar { height: 4px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: var(--sunk); }
.hbar i { display: block; height: 100%; background: var(--accent-2); }
.bsbar { display: flex; min-width: 70px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--sunk); }
.bsbar i { display: block; background: var(--good); }
.bsbar em { display: block; background: var(--bad); }
.tagline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; white-space: normal; }
.kw { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); white-space: nowrap;
      background: color-mix(in srgb, var(--tech) 12%, transparent); color: var(--tech); font: 700 11.5px/1 var(--font); }
.kw .ic { width: 12px; height: 12px; }
/* Score-Aufschlüsselung (aufgeklappt unter den Ringen): Haarlinien-Tabelle, Punkte rechtsbündig */
.sparts { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sparts td { padding: 6px 0; border-top: 1px solid var(--rule); border-bottom: 0; vertical-align: top; font-size: 12px; white-space: normal; }
.sparts td small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted); }
.sparts td.n { width: 72px; padding-left: 10px; text-align: right; white-space: nowrap; font: 600 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.sparts td.n.v { width: 48%; white-space: normal; font-family: var(--font); }
.sparts td.n small { display: inline; margin-left: 3px; font-weight: 400; }
.sparts td.plus { color: var(--good); }
.sparts td.minus { color: var(--bad); }
.sparts tfoot td { border-top: 1px solid var(--rule-2); font-weight: 700; }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .trade:hover, .krow:hover { background: var(--hover); }
  .krow.lfresh:hover { background: color-mix(in srgb, var(--tint) 70%, var(--hover)); }
  .trade a:hover, .kname a:hover { color: var(--accent); }
  .follow:not(.done):hover { border-color: transparent; background: var(--ink); color: var(--on-ink); }
  .wchip:hover, .cchip:hover { border-color: var(--border-hot); }
  .lsave:hover { border-color: var(--border-hot); color: var(--accent); }
  .lsave.on:hover { color: var(--warn); }
  .hchip:hover { border-color: var(--border-hot); color: var(--accent); }
  .wcard:hover .remove, .wcard:focus-within .remove { opacity: 1; }
}

/* ---------- Breite: Bausteine richten sich nach der Inhaltsbreite (Container „main“) */
@container main (max-width: 720px) {
  .wallets, .shero, .sgrid { grid-template-columns: minmax(0, 1fr); }
  .shero { padding: 18px; }
  .shero h2 { font-size: 26px; }
}
@container main (max-width: 560px) {
  .sinput { flex-wrap: wrap; }
  .sinput .btn { width: 100%; justify-content: center; }
  .addform { grid-template-columns: minmax(0, 1fr); }
  .addform #wLabel { width: 100%; max-width: none; }
  .trade { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .trade .t-sol { display: none; }
  .wstats > div { padding-inline: 8px; }
  /* schmale Liste: Knöpfe unter den Text statt daneben */
  .krow { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .krow > .follow, .krow > .lbtns { grid-column: 2; justify-self: start; }
  .krow > .lbtns { flex-direction: row; flex-wrap: wrap; }
  .shero .head .icon { width: 44px; height: 44px; }
}

/* ---------- Handy: Tippziele mindestens 44 px (kleine Knöpfe bekommen eine unsichtbare, größere Trefferfläche) */
@media (max-width: 720px) {
  .follow, .hchip { min-height: 44px; }
  .lbtns .lsave { min-width: 44px; height: 44px; }
  .addform input, .addform .btn { height: 44px; }
  .wchips { gap: 8px; }
  .wchip, .cchip, .wchips .lsave { height: 36px; }
  .wchip::after, .cchip::after, .wchips .lsave::after { content: ""; position: absolute; inset: -4px; }
  .waddr .btn, .shero .addr .btn { position: relative; }
  .waddr .btn::after, .shero .addr .btn::after { content: ""; position: absolute; inset: -14px -6px; }
  .steps { padding: 10px 16px; }
}
/* ---------- T7 Trading-Bot (inkl. Inhalt des Schnellkaufs) */
/* Steuerpult klebt unter den Inseln: Übung = zarte Schraffur, Echtgeld = rote Kante. Kennzahlen als Setzkasten mit
   1-px-Fugen, Zeilen mit Haarlinien, alle Zahlen Mono. Die Echtgeld-Bestätigung bleibt unübersehbar (roter Rahmen).
   Hülle und Lage des Schnellkauf-Fensters macht T8 – hier nur sein Inhalt als „Beleg“. */

/* ---------- Rahmen, Überschriften, Hinweise */
.bot { display: grid; gap: 16px; align-content: start; }
.bot h3 { margin: 0; display: flex; align-items: center; gap: 9px; font: 600 16px/1.3 var(--serif); font-variation-settings: "SOFT" 100;
          letter-spacing: -.02em; }
.bot h3 .ic { width: 18px; height: 18px; color: var(--accent); }
.bot-pub { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md);
           border: 1px solid var(--border-hot); background: var(--tint); color: var(--text); font-size: 13px; }
.bot-pub > .ic { flex: none; margin-top: 2px; color: var(--accent); }
.bot-msg { margin: 0; display: flex; gap: 9px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-sm);
           background: var(--tone-warn); box-shadow: inset 3px 0 0 var(--warn); color: var(--text); font-size: 13px; font-weight: 600; }
.bot-msg > .ic { flex: none; margin-top: 2px; color: var(--warn); }
.bot-msg.ok { background: var(--tone-good); box-shadow: inset 3px 0 0 var(--good); }
.bot-msg.ok > .ic { color: var(--good); }
.bot-stop { flex-basis: 100%; margin: 0; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--warn); }
.bot-stop .ic { flex: none; }

/* ---------- Steuerpult (oben in jedem Bot-Reiter): links Übung/Echt, Mitte Zustand, rechts Starten/Stoppen */
.bot-ctl { position: sticky; top: var(--top-safe); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
           margin: 0; padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
           transition: border-color var(--t-out), box-shadow var(--t-out); }
/* Bestätigung offen: das Pult klebt nicht – die Echtgeld-Frage soll nicht über der Liste schweben */
.bot-ctl:has(> .bot-confirm) { position: static; }
.bc-act { display: contents; }   /* Knöpfe werden direkte Teile des Pults – so steht der Übung/Echt-Schalter links */
.bot-ctl .bc-seg { order: -1; }
.bc-state { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.bc-state > div { min-width: 0; }
.bc-state b { display: block; font: 700 16px/1.3 var(--font); letter-spacing: -.01em; }
.bc-state small { display: block; font-size: 12.5px; color: var(--muted); }
.bc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--faint);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 22%, transparent); }
.bot-ctl.run .bc-dot { --pulse: var(--good); background: var(--good); animation: runPulse 1.8s ease-in-out infinite; }
.bot-ctl.run.m-live .bc-dot { --pulse: var(--bad); background: var(--bad); }
.bot-ctl.run.blocked .bc-dot { --pulse: var(--warn); background: var(--warn); }
/* Zustände: Übung schraffiert, wartet = gelbe Kante, Echtgeld = rote Kante (gewinnt immer) */
.bot-ctl.run.m-paper { background: var(--hatch), var(--panel); }
.bot-ctl.blocked { border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); box-shadow: inset 4px 0 0 var(--warn); }
.bot-ctl.run.m-live { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); box-shadow: inset 4px 0 0 var(--bad); }
/* Übung/Echt als Segment (gewählt = Tinte, Echt gewählt = Rot) */
.bc-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sunk); }
.bc-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border: 0;
                 border-radius: 10px; background: none; color: var(--muted); font: 600 13px/1 var(--font); cursor: pointer;
                 transition: background-color var(--t-fast), color var(--t-fast); }
.bc-seg button .ic { width: 15px; height: 15px; }
.bc-seg button.on { background: var(--ink); color: var(--on-ink); }
.bc-seg button.m-live.on { background: var(--bad); color: var(--on-accent); }
/* Start/Stopp */
.bot-ctl .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.bc-start, .bc-stop, .bc-stopsell { justify-content: center; }
.bc-start .ic, .bc-stop .ic { width: 15px; height: 15px; }
.bc-start { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.bc-stop { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: var(--panel); color: var(--bad); }
.bc-stopsell { border-color: transparent; background: var(--bad); color: var(--on-accent); }
@supports selector(:has(*)) {
  /* „Echt“ gewählt: auch der Start-Knopf wird rot */
  .bot-ctl:has(.bc-seg .m-live.on) .bc-start { background: var(--bad); color: var(--on-accent); }
}
.bc-note { flex-basis: 100%; margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.bc-note .ic { flex: none; }
/* Warum kauft der Bot gerade (nicht)? */
.bot-why { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px;
           border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sunk); font-size: 13px; }
.bot-why > .ic { flex: none; width: 20px; height: 20px; color: var(--muted); }
.bot-why > div { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.bot-why span { color: var(--muted); }
.bot-why.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--rule)); background: var(--tone-warn); }
.bot-why.warn > .ic, .bot-why.warn b { color: var(--warn); }
.bot-why.go { border-color: color-mix(in srgb, var(--good) 40%, var(--rule)); background: var(--tone-good); }
.bot-why.go > .ic, .bot-why.go b { color: var(--good); }
/* Klebt das Pult oben, wird es kompakt (nur Browser mit Scroll-Zustand-Abfrage; sonst bleibt alles sichtbar) */
@supports (container-type: scroll-state) {
  .bot-ctl { container-type: scroll-state; }
  @container scroll-state(stuck: top) {
    .bot-ctl > .bot-why { display: none; }
  }
}

/* ---------- Echtgeld-Bestätigung (#botConfirm): roter Rahmen, Stempel, roter Start-Knopf */
.bot-confirm { flex-basis: 100%; display: grid; gap: 12px; padding: 16px 18px; border: 2px solid var(--bad); border-radius: var(--r-md);
               background: var(--tone-bad); font-size: 13.5px; }
.bot-confirm::before { content: "Echtes Geld"; justify-self: start; padding: 3px 9px; border-radius: var(--r-xs); background: var(--bad);
                       color: var(--on-accent); font: 700 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bot-confirm p { margin: 0; }
.bot-confirm label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; }
.bot-confirm div { display: flex; flex-wrap: wrap; gap: 8px; }
#botConfirm { width: 10ch; height: 40px; padding: 0 12px; border: 1.5px solid var(--bad); border-radius: var(--r-sm); background: var(--panel);
              color: var(--text); font: 700 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
#botConfirm:focus { outline: 2px solid transparent; outline-offset: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 30%, transparent); }
.bot-confirm .btn.primary { border-color: transparent; background: var(--bad); color: var(--on-accent); }

/* ---------- Kennzahlen: Setzkasten mit 1-px-Fugen (Umrisse benachbarter Felder liegen übereinander = eine Linie) */
.bot-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule);
            border-radius: var(--r-lg); background: var(--panel); overflow: clip; }
.bot-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bot-kpis > * { display: grid; gap: 3px; align-content: start; min-width: 0; margin: 0; padding: 14px 16px; border: 0; border-radius: 0;
                background: var(--panel); box-shadow: none; outline: 1px solid var(--rule); }
.bot-kpis > * > span { font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.bot-kpis b { font-family: var(--mono); font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em;
              font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-kpis small { font-size: 11.5px; color: var(--faint); }
.bot-kpis .limit { background: var(--tone-warn); }
.bot-kpis .limit small { color: var(--warn); font-weight: 600; }

/* ---------- Abschnitte mit Zeilen (Positionen, Radar, Verlauf, Coins der Wallet) */
.bot-sec, .bot-stats { padding: 0; overflow: clip; }
.bs-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 56px; padding: 10px 18px; border-bottom: 1px solid var(--rule); }
.bs-h .spacer { flex: 1; }
.bs-h .seg button { height: 28px; padding: 0 10px; font-size: 12px; }
.bot-rows { display: grid; }
.bot-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) repeat(2, minmax(84px, auto)) auto; align-items: center; gap: 6px 14px;
           padding: 10px 18px; transition: background-color var(--t-fast); }
.bot-row + .bot-row { border-top: 1px solid var(--rule); }
.bot-row .icon { width: 34px; height: 34px; }
.bot-row.tx { grid-template-columns: minmax(0, 1fr) auto; }
.bot-row.pos { grid-template-columns: 34px minmax(0, 1.4fr) minmax(96px, .5fr) minmax(120px, .6fr) auto; }
.bot-row.tr { grid-template-columns: 40px minmax(0, 1fr) minmax(96px, auto) minmax(120px, auto) 28px; }
.bot-row.rad { grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.3fr) auto; }
.bw-tok .bot-row { grid-template-columns: 34px minmax(0, 1fr) repeat(2, minmax(96px, auto)); }
.br-name { display: grid; gap: 1px; min-width: 0; }
.br-name b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.br-name small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-num { display: grid; gap: 1px; justify-items: end; min-width: 0; text-align: right; }
.br-num > span { font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.br-num b { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.br-act button, .br-act a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; min-width: 32px;
                            padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel);
                            color: var(--text); font: 600 12px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
                            transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.br-act .ic { width: 15px; height: 15px; }
.br-act [data-report] { border-color: var(--accent); color: var(--accent); }
.br-act .botbuy .ic { color: var(--warn); }
.br-err { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bad); }
.br-err .ic { flex: none; }
/* Modus-Schild (Übung schraffiert, Echt rot) */
.mtag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-xs); background: var(--sunk);
        color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: .03em; white-space: nowrap; vertical-align: 1px; }
.mtag.m-paper { background: var(--hatch), var(--sunk); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
.mtag.m-live { background: var(--bad); color: var(--on-accent); }

/* ---------- Position: Kursleiste Stop-Loss … Kauf … Ziel, Punkt = jetzt */
.br-range { grid-column: 2 / -1; padding-top: 2px; }
.prange { position: relative; height: 6px; margin: 8px 0 6px; border-radius: 99px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.pr-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; opacity: .6; }
.pr-fill.up { background: var(--good); }
.pr-fill.down { background: var(--bad); }
.pr-peak { position: absolute; top: 50%; height: 2px; margin-top: -1px; opacity: .6;
           background: repeating-linear-gradient(90deg, var(--good) 0 4px, transparent 4px 7px); }
.pr-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--muted); }
.pr-mark.entry { background: var(--ink); }
.pr-mark.tp1 { background: var(--good); }
.pr-mark.trail { background: var(--warn); }
.pr-mark.trail.off { opacity: .45; }
.pr-now { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--panel);
          background: var(--accent); box-shadow: 0 0 0 1px var(--border-2); }
.pr-scale { position: relative; display: flex; justify-content: space-between; font: 600 10px/1.4 var(--mono); font-variant-numeric: tabular-nums;
            color: var(--faint); }
.pr-entry { position: absolute; top: 0; translate: -50% 0; color: var(--ink); }

/* ---------- Verlauf: Kauf/Verkauf-Schild, Transaktions-Link */
.bt-side { display: grid; place-items: center; width: 40px; height: 30px; border-radius: var(--r-sm); background: var(--sunk); color: var(--muted);
           font: 700 10.5px/1 var(--mono); letter-spacing: -.01em; }
.bt-side.buy { background: var(--tone-good); color: var(--good-ink); }
.bt-side.sell { background: var(--tone-bad); color: var(--bad-ink); }
.bot-row.fail { opacity: .75; }
.bot-row.fail .bt-side { background: var(--tone-bad); color: var(--bad-ink); }
.bt-tx { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; }
.bt-tx .ic { width: 15px; height: 15px; }
.bt-why { grid-column: 2 / -1; margin-top: -4px; font-size: 12px; color: var(--muted); }

/* ---------- Kandidaten-Radar: Kaufweg-Schilder (grün = dieser Weg passt gerade) und fehlende Regeln */
.bot-row.rad.ok { background: var(--tone-good); box-shadow: inset 3px 0 0 var(--good); }
.bot-row.rad .lsig { width: 38px; height: 38px; }
.bot-row.rad .icon.sm { width: 22px; height: 22px; font-size: 9px; }
.rd-sum { font-size: 12.5px; color: var(--muted); }
.rd-sum b { font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-paths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rd-paths i { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--rule); border-radius: var(--r-xs);
              background: var(--sunk); color: var(--faint); font: 600 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-paths i.on { border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--tone-good); color: var(--good-ink); }
.rd-paths i.on::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.rd-checks { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-checks span { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 8px; border-radius: var(--r-xs);
                  font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rd-checks .ic { width: 12px; height: 12px; }
.rd-checks .g { background: var(--tone-good); color: var(--good-ink); }
.rd-checks .b { background: var(--tone-bad); color: var(--bad-ink); }
.rd-checks .n { background: var(--sunk); color: var(--muted); }

/* ---------- Wallet & Einzahlen (QR braucht immer hellen Grund) */
.bw-dep { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; }
.bw-qr { padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--qr-bg); line-height: 0; }
.bw-qr .qr { display: block; width: 180px; height: 180px; }
.bw-info { display: grid; gap: 12px; min-width: 0; }
.bw-info p { margin: 0; }
.bw-addr code { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--sunk);
                font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums slashed-zero; word-break: break-all; user-select: all; }
.bw-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-btns .btn { text-decoration: none; }
.bw-warn { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--tone-warn);
           box-shadow: inset 3px 0 0 var(--warn); font-size: 12.5px; font-weight: 600; }
.bw-warn .ic { flex: none; margin-top: 2px; color: var(--warn); }
/* Einrichtung (noch keine Bot-Wallet): nummerierte Schritte mit Tinten-Marken */
.bot-setup { max-width: 640px; text-align: left; }
.bot-setup h2, .bot-setup > p { text-align: center; }
.bot-steps { counter-reset: bot-schritt; display: grid; margin: 8px 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--rule); font-size: 14px; }
.bot-steps li { counter-increment: bot-schritt; position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--rule); line-height: 1.55; }
.bot-steps li::before { content: counter(bot-schritt); position: absolute; left: 0; top: 13px; display: grid; place-items: center; width: 26px; height: 26px;
                        border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 600 12px/1 var(--mono); }

/* ---------- „So entscheidet der Bot“ / Auszahlen: Regeln zweispaltig (Stichwort links, Text rechts) */
.bot-rules { margin: 0; padding: 18px 20px; font-size: 13.5px; }
.bot-rules ul { display: grid; margin: 12px 0; padding: 0; list-style: none; }
.bot-rules li { position: relative; padding: 10px 0 10px 128px; border-top: 1px solid var(--rule); color: var(--muted); line-height: 1.55; }
.bot-rules li b { color: var(--text); }
.bot-rules li > b:first-child { position: absolute; left: 0; top: 10px; width: 116px; }
.bs-h0 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bs-h0 .note { flex-basis: 100%; }
.bs-h0 .mtag { margin-left: auto; }

/* ---------- Strategie-Vorlagen: Setzkasten, gewählte Vorlage mit Tinten-Rand */
.bot-presets { display: grid; gap: 14px; margin: 0; padding: 18px 20px 20px; }
.pre-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));   /* vier Vorlagen in einer Reihe */ gap: 1px; border: 1px solid var(--rule); border-radius: var(--r-md);
            background: var(--panel); overflow: clip; }
.pre-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0; padding: 14px 16px;
            border: 0; border-radius: 0; outline: 1px solid var(--rule); background: var(--panel); color: var(--text); text-align: left;
            font: inherit; cursor: pointer; transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.pre-card .ti { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--sunk);
                color: var(--accent); font-style: normal; }
.pre-card .ti .ic { width: 18px; height: 18px; }
.pre-card b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; }
.pre-card small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.pre-card.on { background: var(--tint); box-shadow: inset 0 0 0 2px var(--ink); }
.pre-card.on .ti { background: var(--ink); color: var(--on-ink); }

/* ---------- Regeln: Formular zweispaltig (Beschriftung links, Feld rechts), Abschnitte mit Versal-Titel und Haarlinien */
.bot-set { display: grid; gap: 16px; margin: 0; }
.bot-set > section { display: grid; gap: 4px; margin: 0; padding: 18px 20px 8px; }
.bot-set .bs-h0 { padding-bottom: 10px; }
.bot-set .bs-h0 h3 { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bot-set .bs-h0 h3 .ic { width: 15px; height: 15px; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); column-gap: 32px; }
.bs-grid .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 150px); align-items: center; gap: 2px 16px; padding: 10px 0;
                  border-top: 1px solid var(--rule); font-size: 13px; color: var(--text); }
.bs-grid .field .head { grid-column: 1; display: grid; gap: 1px; font-weight: 600; }
.bs-grid .field .head small { font: 500 11px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--faint); }
.bs-grid .field input, .bs-grid .field select { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
.bs-grid input[type=number] { height: 36px; padding: 0 10px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bs-grid select { font-size: 12.5px; }
.bs-hint { grid-column: 1; font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--faint); }
.bs-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--rule);
            font-size: 13px; font-weight: 600; cursor: pointer; }
.bs-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* Speichern-Leiste klebt unten (am Handy über dem Dock) */
.bs-actions { position: sticky; bottom: calc(var(--dock-h) + 28px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
              padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); }
.bs-actions .msg { font-size: 12.5px; font-weight: 600; color: var(--good); }

/* ---------- Statistik & Gewinnkurve */
.bot-stats { padding-bottom: 18px; }
.st-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 16px 18px 0; border: 1px solid var(--rule);
           border-radius: var(--r-md); background: var(--panel); overflow: clip; }
.st-grid > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; outline: 1px solid var(--rule); }
.st-grid > div > span { font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.st-grid b { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-grid small { font-size: 11px; color: var(--faint); }
/* Schilder: Statistik je Kaufweg und Verkaufsgründe */
.st-exits { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.st-exits span { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 9px; border-radius: var(--r-xs);
                 background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 600; }
.st-exits b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.st-exits b.up { color: var(--good); }
.st-exits b.down { color: var(--bad); }
.st-exits .ex-tp, .st-exits .ex-tp1 { background: var(--tone-good); color: var(--good-ink); }
.st-exits .ex-sl, .st-exits .ex-rug { background: var(--tone-bad); color: var(--bad-ink); }
.st-exits .ex-trail { background: var(--tone-warn); color: var(--warn-ink); }
.eq-box { margin: 14px 18px 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sunk); }
.eq { display: block; width: 100%; height: 150px; overflow: visible; }
.eq-zero { stroke: var(--rule-2); stroke-dasharray: 4 4; }
.eq-area { fill: var(--hl); }
.eq-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eq-dot { fill: var(--accent-2); }
.eq.up .eq-dot { fill: var(--good); }
.eq.down .eq-line { stroke: var(--bad); }
.eq.down .eq-area { fill: var(--tone-bad); }
.eq.down .eq-dot { fill: var(--bad); }
.eq-empty { padding: 18px 6px; text-align: center; }

/* ---------- Schnellkauf-Inhalt als „Beleg“: Kopfzeile, Modus, Betrag in großen Mono-Ziffern, gestrichelte Trennlinien */
.buy-box .pop-body { gap: 0; padding: 4px 20px 20px; }
.buy-coin { display: flex; align-items: center; gap: 12px; padding: 14px 0 16px; border-bottom: 1px dashed var(--rule-2); }
.buy-coin .icon { width: 40px; height: 40px; }
.buy-coin > div { display: grid; gap: 2px; min-width: 0; }
.buy-coin b { font: 700 18px/1.2 var(--font); letter-spacing: -.01em; }
.buy-coin small { font: 400 11px/1.4 var(--mono); font-variant-numeric: slashed-zero; color: var(--faint); word-break: break-all; }
.bc-seg.buy-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding: 0; border: 0; background: none; }
.buy-mode button { flex-direction: column; gap: 5px; height: 64px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sunk);
                   font-size: 14px; }
.buy-mode button .ic { width: 18px; height: 18px; }
.buy-mode button.on { border-color: transparent; }
.buy-box .field { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--rule-2); }
.buy-box .field .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 10.5px/1.4 var(--mono);
                        letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.buy-box .field .head small { font: 500 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; color: var(--muted); }
.buy-amt { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.buy-amt input { flex: 0 1 auto; field-sizing: content; min-width: 6ch; max-width: 100%; height: 58px; padding: 0 14px; border: 1px solid var(--border);
                 border-radius: var(--r-md); background: var(--sunk); color: var(--text); text-align: center; font: 600 28px/1 var(--mono);
                 font-variant-numeric: tabular-nums; letter-spacing: -.02em; -moz-appearance: textfield; appearance: textfield; }
.buy-amt input::-webkit-inner-spin-button, .buy-amt input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy-amt input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }
@supports not (field-sizing: content) { .buy-amt input { width: 8ch; } }
.buy-amt b { font: 600 16px/1 var(--mono); color: var(--muted); }
.buy-box .presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.buy-box .presets button { height: 34px; padding: 0 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--sunk);
                           color: var(--muted); font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.buy-box .presets button.on { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.buy-info { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--rule-2); font-size: 12.5px; color: var(--muted); }
.buy-info p { margin: 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.buy-info .ic { flex: none; margin-top: 2px; color: var(--accent); }
.buy-risk { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--bad);
            border-radius: var(--r-md); background: var(--tone-bad); font-size: 13px; font-weight: 600; cursor: pointer; }
.buy-risk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--bad); }
.buy-box .bot-msg { margin-top: 14px; }
.buy-go { width: 100%; height: 48px; margin-top: 18px; justify-content: center; font-size: 15px; }
.buy-box .buy-go.bc-stop { border-color: transparent; background: var(--bad); color: var(--on-accent); }   /* Echt kaufen = rot */

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .bc-seg button:not(.on):hover { background: var(--hl); color: var(--text); }
  /* .btn.… und :not(:disabled), damit die Regel gegen „.btn:hover:not(:disabled)“ (T3) gewinnt */
  .btn.bc-start:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
  .btn.bc-stop:hover:not(:disabled) { border-color: var(--bad); background: var(--tone-bad); }
  .btn.bc-stopsell:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--bad) 88%, var(--text)); }
  .bot-confirm .btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 88%, var(--text)); }
  .bot-row:hover { background: var(--hover); }
  .bot-row.rad.ok:hover { background: color-mix(in srgb, var(--good) 14%, transparent); }
  .br-act button:hover:not(:disabled), .br-act a:hover { border-color: var(--border-2); background: var(--hl); }
  .bt-tx:hover { background: var(--hl); color: var(--accent); }
  .pre-card:not(.on):hover { background: var(--hover); }
  .buy-mode button:not(.on):hover { border-color: var(--border-2); }
  .buy-box .presets button:not(.on):hover { background: var(--hl); color: var(--text); }
  .buy-box .btn.buy-go.bc-stop:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 88%, var(--text)); }
}

/* ---------- Breiten: Bausteine richten sich nach der Inhaltsbreite (Container „main“), Tippziele nach dem Fenster */
@container main (max-width: 1000px) {
  .pre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (max-width: 720px) {
  .bc-state { order: -2; flex-basis: 100%; }
  .bot-ctl .bc-seg, .bot-ctl .btn { flex: 1 1 auto; }
  .bot-ctl .bc-seg button { flex: 1; }
  .bot-kpis, .bot-kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bot-kpis b { font-size: 20px; }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 14px; }
  .st-exits { padding-inline: 14px; }
  .eq-box { margin-inline: 14px; }
  .bs-h { padding-inline: 14px; }
  .bw-dep { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bw-info { width: 100%; }
  .bot-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 14px; }
  .bot-row .m-hide { display: none; }
  .bot-row.tr { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .bot-row .br-act { grid-column: 1 / -1; justify-content: flex-start; }
  .bot-row.pos { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .br-range { grid-column: 1 / -1; }
  .bot-row.rad { grid-template-columns: 38px minmax(0, 1fr); }
  .bot-row.rad .rd-checks { grid-column: 1 / -1; }
  .bw-tok .bot-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .bot-rules li { padding-left: 0; }
  .bot-rules li > b:first-child { position: static; width: auto; }
  .bs-grid .field { grid-template-columns: minmax(0, 1fr); }
  .bs-grid .field input, .bs-grid .field select { grid-column: 1; grid-row: auto; }
}
@container main (max-width: 560px) {
  .pre-grid { grid-template-columns: minmax(0, 1fr); }
  .bot-ctl { padding: 12px 14px; }
}
@media (max-width: 720px) {
  .bot-ctl { top: 8px; }
  .bs-actions { bottom: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)); }
  .bc-seg button, .bot-ctl .btn, .bs-actions .btn, .br-act button, .br-act a { min-height: 44px; }
  .bs-grid input[type=number], .bs-grid select, #botConfirm { height: 44px; }
  .bt-tx { width: 44px; height: 44px; }
  .buy-box .pop-body { padding-inline: 16px; }
  .buy-box .presets { gap: 4px; }
  .buy-box .presets button { height: 44px; padding: 0 2px; font-size: 11px; letter-spacing: -.03em; }
  .buy-go { height: 52px; }
}
/* ---------- T7b RookieDrop (Dropshipping): Übersicht, Margen-Rechner, Lieferanten-Vergleich (drop.js), Recherche
   (drop_recherche.js: Trend-Signale, Shop-Analyse) und Betrieb (drop_betrieb.js: Bestellungen, Gewinn-Tagebuch, Texte).
   Eigener Bereich, gleiche Sprache wie RookiePump: Setzkasten mit 1-px-Fugen, Versal-Etiketten und alle Zahlen in Mono,
   Überschriften in Fraunces, keine Schatten auf der Fläche. Vorsilbe dr-. Farben nur per var()/color-mix() aus T1 – die
   Farben der Kostenarten im Balken stehen an einer Stelle (--c je data-k). Rechner: breit zwei Spalten (Eingaben links,
   Ergebnis rechts klebt unter den Inseln), schmal untereinander mit Kurz-Ergebnis (Tinten-Leiste) über dem Dock.
   #view wird auf der Übersicht alle paar Sekunden neu gebaut – daher hier keine Einblend-Animationen. */

/* ---------- Gemeinsam: Hülle, Versal-Etikett, Abschnittstitel, Ton (Gewinn/Verlust), Text nur für Screenreader */
.dr { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.dr-kicker { font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: var(--s2) 0 calc(var(--s3) * -1);
          font: 600 20px/1.25 var(--serif); letter-spacing: -.025em; font-variation-settings: "SOFT" 100; }
.dr-sec small { font: 500 12.5px/1.45 var(--font); letter-spacing: 0; color: var(--muted); }
.dr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Übersicht: Kopf mit großem Logo (Lichtkante aus Karamell), Satz zum Bereich */
.dr-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s5) var(--s6);
           padding: var(--s6) clamp(20px, 4cqi, 48px); border: 1px solid var(--rule); border-radius: var(--r-lg);
           background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 62%), var(--panel); }
.dr-logo { display: block; width: clamp(84px, 11cqi, 128px); height: auto; aspect-ratio: 1; color: var(--text); }
.dr-hero-txt { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.dr-hero h2 { margin: 0; font: 600 clamp(28px, 3.6cqi, 42px)/1.06 var(--serif); letter-spacing: -.035em; font-variation-settings: "SOFT" 100; }
.dr-hero p { max-width: 60ch; margin: 0; color: var(--muted); text-wrap: pretty; }
.dr-hero .btn.quiet { margin: 2px 0 0 -14px; }   /* Text des leisen Knopfs bündig mit dem Absatz */

/* ---------- Werkzeug-Karten als Setzkasten (Umrisse benachbarter Karten liegen in der Fuge übereinander = eine Linie) */
.dr-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px; padding: 1px;
          border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.dr-tool { display: grid; gap: 10px; align-content: start; min-width: 0; padding: var(--s5); background: var(--panel); outline: 1px solid var(--rule); }
.dr-tool h3 { margin: 0; font: 600 19px/1.25 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.dr-tool p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.dr-tool-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
              color: var(--accent); }
.dr-tool-ic .ic { width: 21px; height: 21px; stroke-width: 1.8; }
/* Hinweis am Seitenende: wo die Daten liegen, woher sie kommen */
.dr-local { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--sunk);
            font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-local .ic { flex: none; margin-top: 2px; color: var(--good); }

/* ---------- Margen-Rechner: zwei Spalten, das Ergebnis klebt unter den Inseln (und rollt selbst, wenn es höher ist als das Fenster) */
.dr-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.dr-form { display: grid; gap: 1px; padding: 1px; margin: 0; border-radius: var(--r-lg); }
/* Eingabe-Gruppen als Setzkasten-Zeilen; erste und letzte Zeile tragen die Rundung */
.dr-grp { min-width: 0; margin: 0; padding: 18px 20px 20px; border: 0; background: var(--panel); outline: 1px solid var(--rule); }
.dr-grp:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dr-grp legend { float: left; display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0 0 14px; padding: 0;
                 font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-grp legend b { color: var(--accent); letter-spacing: .04em; }
.dr-grp legend + * { clear: both; }
.dr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 16px; }
.dr-in { display: grid; gap: 6px; align-content: start; min-width: 0; }
/* Beschriftung, Feld und Hinweis stehen über die ganze Zeile auf gleicher Höhe – auch wenn eine Beschriftung umbricht */
@supports (grid-template-rows: subgrid) {
  .dr-in { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
}
.dr-in label { align-self: end; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text); cursor: pointer; }
.dr-in small { font-size: 11.5px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
/* Zahlenfeld mit Einheit rechts im Feld (€, %, Stk.) – ohne Pfeile, Pfeiltasten gehen weiter */
.dr-num { position: relative; display: block; min-width: 0; }
.dr-num input { width: 100%; height: 42px; padding-right: 46px; font-size: 15px; letter-spacing: -.01em;
                appearance: textfield; -moz-appearance: textfield; }
.dr-num input::-webkit-inner-spin-button, .dr-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dr-num input:not(:focus):is(:invalid, :user-invalid) { box-shadow: none; }   /* kein roter Rahmen des Browsers – der Rechner nimmt jede Zahl */
.dr-num i { position: absolute; top: 50%; right: 13px; translate: 0 -50%; font: 600 12px/1 var(--mono); font-style: normal; color: var(--muted);
            pointer-events: none; }
.dr-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-radius: 0 0 var(--r-lg) var(--r-lg);
                background: var(--panel); outline: 1px solid var(--rule); }
.dr-peek { display: none; }   /* nur einspaltig – siehe Breiten */

/* ---------- Ergebnis: Kopfzahl mit Ton-Kante, Kennzahlen im Setzkasten, Balken, Erklärsätze */
.dr-out { position: sticky; top: var(--top-safe); display: grid; min-width: 0; max-height: calc(100dvh - var(--top-safe) - 16px);
          overflow: hidden auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
          overflow-wrap: anywhere; }   /* sehr lange Zahlen brechen um statt über den Rand (am Handy sonst seitlich rollbar) */
.dr-res-head { display: grid; gap: 6px; padding: 20px 22px 18px; border-bottom: 1px solid var(--rule); box-shadow: inset 4px 0 0 var(--rule-2); }
.dr-res-head.dr-pos { background: var(--tone-good); box-shadow: inset 4px 0 0 var(--good); }
.dr-res-head.dr-neg { background: var(--tone-bad); box-shadow: inset 4px 0 0 var(--bad); }
.dr-big { font: 600 clamp(32px, 3.6cqi, 46px)/1.04 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.dr-pos > .dr-big { color: var(--good); }
.dr-neg > .dr-big { color: var(--bad); }
.dr-res-head p { margin: 0; font-size: 13px; color: var(--muted); }
.dr-res-head p b { font: 600 13px/1.3 var(--mono); color: var(--text); }
.dr-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--rule); background: var(--rule); }
.dr-kpis > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 13px 18px 14px; background: var(--panel); }
.dr-kpis span { font: 600 10px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-kpis b { font: 600 21px/1.2 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }   /* nie „…“ mitten in einer Zahl */
.dr-kpis b.dr-pos { color: var(--good-ink); }
.dr-kpis b.dr-neg { color: var(--bad-ink); }
.dr-kpis small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* Balken „Wohin der Verkaufspreis geht“: Breite per flex-grow aus drop.js, Farbe je Kostenart über --c */
.dr-split { display: grid; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.dr-split h4 { margin: 0; font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-split [data-k="cost"] { --c: var(--accent); }
.dr-split [data-k="ship"] { --c: var(--tech); }
.dr-split [data-k="fees"] { --c: color-mix(in srgb, var(--text) 52%, var(--panel)); }
.dr-split [data-k="ads"] { --c: var(--meme); }
.dr-split [data-k="other"] { --c: color-mix(in srgb, var(--tech) 42%, var(--panel)); }
.dr-split [data-k="vat"] { --c: color-mix(in srgb, var(--text) 20%, var(--panel)); }
.dr-split [data-k="profit"] { --c: var(--good); }
.dr-bar { position: relative; display: flex; gap: 2px; height: 30px; border-radius: var(--r-xs); overflow: hidden; background: var(--sunk); }
.dr-bar > i { flex: 0 1 0; min-width: 2px; background: var(--c); }
/* Verlust: was über den Verkaufspreis hinausgeht, rot schraffiert mit Kante am Preis */
.dr-over { position: absolute; top: 0; right: 0; bottom: 0; border-left: 2px solid var(--bad);
           background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 60%, transparent) 0 4px, transparent 4px 8px); }
.dr-cap { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.dr-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 6px 20px; margin: 2px 0 0; padding: 0; list-style: none; }
.dr-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; }
.dr-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); translate: 0 1px; }
.dr-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-legend b { font: 600 12.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.dr-legend small { min-width: 4ch; font: 500 11px/1.3 var(--mono); text-align: right; color: var(--muted); white-space: nowrap; }
.dr-legend [data-k="loss"] { color: var(--bad-ink); font-weight: 600; }
.dr-legend [data-k="loss"]::before { background: repeating-linear-gradient(135deg, var(--bad) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--bad); }

/* Erklärsätze: Punkt in Ton-Farbe, Zahlen in Mono */
.dr-say { display: grid; gap: 8px; margin: 0; padding: 16px 22px; list-style: none; }
.dr-say li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-say li::before { content: ""; position: absolute; top: .6em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.dr-say li.dr-pos::before { background: var(--good); }
.dr-say li.dr-neg::before { background: var(--bad); }
.dr-say b { font: 600 13px/1.3 var(--mono); color: var(--text); }
.dr-out-note { padding: 0 22px 18px; font-size: 11.5px; }

/* ---------- Kurz-Ergebnis (einspaltig): Tinten-Leiste, klebt über dem Handy-Dock bis zum Ende der Eingaben */
.dr-peek-v { display: grid; min-width: 0; }
.dr-peek-v small { font: 600 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.dr-peek-v b { font: 600 15px/1.25 var(--mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.dr-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--faint);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-ink) 18%, transparent); }
.dr-dot.dr-pos { background: var(--good); }
.dr-dot.dr-neg { background: var(--bad); }
.dr-peek-go { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; padding: 0 12px; border: 1px solid
              color-mix(in srgb, var(--on-ink) 28%, transparent); border-radius: var(--r-sm); background: none; color: inherit; font: 600 12.5px/1 var(--font); }
.dr-peek-go .ic { width: 15px; height: 15px; }
.ic.dr-down { rotate: -90deg; }

/* ---------- Rechner: Hinweis „Werte von <Lieferant> · <Produkt>“ (aus dem Lieferanten-Vergleich übernommen) über beiden
   Spalten; verschwindet, sobald man Einkauf oder Versand von Hand ändert (drop.js) */
.dr-src { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 6px 8px 16px; border: 1px solid var(--rule);
          border-radius: var(--r-md); background: var(--tint); box-shadow: inset 3px 0 0 var(--accent-2); font-size: 13px; line-height: 1.45; }
.dr-src > .ic { flex: none; width: 18px; height: 18px; color: var(--accent); }
.dr-src > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dr-src small { display: block; font-size: 11.5px; color: var(--muted); }
.dr-src-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none;
            color: var(--muted); font: 500 13px/1 var(--font); transition: background-color var(--t-fast), color var(--t-fast); }

/* ---------- Lieferanten-Vergleich: Kopfzeile (womit gerechnet wird, „Produkt anlegen“), je Produkt eine Karte mit den
   Angeboten. Breit eine Tabelle – jedes Angebot ist eine eigene <tbody> (Hauptzeile + Notiz-Zeile); schmal (≤ 900 px
   Inhaltsbreite, siehe Breiten) wird jede <tbody> zur Karte mit Beschriftungen aus data-l. */
.dr-sup-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dr-sup-top > .btn { margin-left: auto; }
.dr-sup-calc { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0; padding: 8px 6px 8px 14px;
               border-radius: var(--r-md); background: var(--sunk); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dr-sup-calc > .ic { flex: none; width: 16px; height: 16px; color: var(--accent); }
.dr-sup-calc > span { flex: 1 1 260px; min-width: 0; text-wrap: pretty; }
.dr-sup-calc b { font-weight: 600; color: var(--text); }
.dr-sup-list { display: grid; gap: var(--s4); }
.dr-sup-p { min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; overflow: clip; }
.dr-sup-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--rule); }
.dr-sup-pt { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.dr-sup-pt h3 { margin: 0; font: 600 21px/1.25 var(--serif); letter-spacing: -.025em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.dr-sup-pt small { font-size: 12px; color: var(--muted); }
.dr-sup-pa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-sup-pa .seg { margin-right: 6px; }
.dr-sup-none { margin: 0; padding: 16px 20px; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.dr-sup-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px 12px 20px; border-top: 1px solid var(--rule);
             background: color-mix(in srgb, var(--sunk) 45%, var(--panel)); }
.dr-sup-pf small { font-size: 12px; color: var(--muted); }
/* leerer Zustand: gestrichelte Fläche mit Icon-Kachel, Satz und Knopf */
.dr-sup-empty { display: grid; justify-items: center; gap: 12px; padding: var(--s7) var(--s5); border: 1px dashed var(--rule-2); border-radius: var(--r-lg);
                background: var(--panel); text-align: center; }
.dr-sup-empty h3 { margin: 0; font: 600 24px/1.2 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; }
.dr-sup-empty p { max-width: 62ch; margin: 0; color: var(--muted); text-wrap: pretty; }

/* Tabelle: Zahlen in Mono und rechtsbündig (td.n), Zeilen oben bündig, Notiz-Zeile ohne Linie dazwischen */
.dr-sup-tw { overflow-x: auto; }
.dr-sup-t { min-width: 760px; }
.dr-sup-t :is(th, td):first-child { padding-left: 20px; }
.dr-sup-t :is(th, td):last-child { padding-right: 16px; }
.dr-sup-o td { padding-top: 14px; padding-bottom: 14px; vertical-align: top; }
.dr-sup-o:last-child > tr:last-child > td { border-bottom: 0; }
.dr-sup-o:has(> .dr-sup-nr) > tr:first-child > td { padding-bottom: 6px; border-bottom-color: transparent; }
.dr-sup-o td.n { font-size: 13.5px; }
.dr-sup-who { min-width: 180px; white-space: normal; }
.dr-sup-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dr-sup-a { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.dr-sup-a .ic { width: 13px; height: 13px; margin-left: 4px; vertical-align: -.1em; color: var(--accent); }
.dr-sup-who small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
/* Abzeichen: „günstigster“ grün, „schnellster“ blau – zarte Fläche mit Punkt */
.dr-sup-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font: 600 9.5px/1.5 var(--mono);
                letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dr-sup-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dr-sup-badge[data-b="cheap"] { background: var(--tone-good); color: var(--good-ink); }
.dr-sup-badge[data-b="fast"] { background: color-mix(in srgb, var(--tech) 14%, transparent); color: color-mix(in srgb, var(--tech) 70%, var(--text)); }
.dr-sup-sum b { font-weight: 700; }
.dr-sup-days { font: 500 13px/1.45 var(--mono); }
.dr-sup-gain b { display: block; font-weight: 700; }
.dr-sup-gain b.dr-pos { color: var(--good-ink); }
.dr-sup-gain b.dr-neg { color: var(--bad-ink); }
.dr-sup-gain small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--mono); color: var(--muted); }
.dr-sup-act { text-align: right; }
.dr-sup-act > * { vertical-align: middle; }
.dr-sup-go { padding: 6px 11px; font-size: 12.5px; }
.dr-sup-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: none;
             color: var(--muted); font: 600 13px/1 var(--font); transition: background-color var(--t-fast), color var(--t-fast); }
.dr-sup-ib .ic { width: 15px; height: 15px; }
/* Notiz: Zeilenumbrüche bleiben; lange Notizen klappen auf (<details>) */
.dr-sup-nr > td { padding-top: 0; white-space: normal; }
.dr-sup-note { max-width: 90ch; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.dr-sup-nl { margin-right: 8px; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: normal; }
.dr-sup-more summary { display: block; max-width: 90ch; list-style: none; cursor: pointer; font-size: 13px; line-height: 1.55; }   /* fließt wie Text */
.dr-sup-more summary::-webkit-details-marker { display: none; }
.dr-sup-cut { color: var(--text); overflow-wrap: anywhere; }
.dr-sup-tg { margin-left: 8px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.dr-sup-more[open] .dr-sup-tg { margin-left: 0; }
.dr-sup-more:not([open]) .dr-sup-tg > :last-child, .dr-sup-more[open] .dr-sup-tg > :first-child, .dr-sup-more[open] .dr-sup-cut { display: none; }
.dr-sup-more .dr-sup-note { margin-top: 6px; }

/* ---------- Formulare im Pop-up (Produkt, Angebot – fester Knoten aus drop.js): Felder zweispaltig, schmal einspaltig */
.dr-sf { display: grid; gap: 16px; margin: 0; }
.dr-sf-intro { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--tone-good);
               color: var(--good-ink); font-size: 13px; font-weight: 600; }
.dr-sf-intro .ic { flex: none; width: 16px; height: 16px; }
.dr-sf-for { display: grid; gap: 2px; margin: 0; }
.dr-sf-for span { font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-sf-for b { font: 600 19px/1.25 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.dr-sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.dr-sf-f { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.dr-sf-wide { grid-column: 1 / -1; }
.dr-sf-f > label, .dr-sf-f > legend { padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.dr-sf-f > legend { float: left; width: 100%; }   /* gefloatet = normales Rasterkind (sonst säße es im Rahmen des fieldset) */
.dr-sf-f > label i { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--muted); }
.dr-sf-f small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.dr-sf-f input, .dr-sf-f textarea { width: 100%; font-size: 14.5px; }
.dr-sf-f input { height: 42px; }
.dr-sf-f textarea { min-height: 112px; }
.dr-sf .dr-num input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dr-sf-two { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--muted); }
.dr-sf [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.dr-sf-msg { margin: 0; color: var(--bad-ink); font-size: 13px; font-weight: 600; }
.dr-sf-msg:empty { display: none; }
.dr-sf-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .dr-peek-go:hover { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
  .dr-src-x:hover, .dr-sup-ib:hover { background: var(--hl); color: var(--text); }
  .dr-sup-ib.dr-sup-x:hover { background: var(--tone-bad); color: var(--bad-ink); }
  .dr-sup-pa .dr-sup-del:hover:not(:disabled) { background: var(--tone-bad); color: var(--bad-ink); }
  a.dr-sup-a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .dr-sup-more summary:hover .dr-sup-tg { text-decoration: underline; text-underline-offset: 3px; }
}
/* ---------- Windows-Kontrastmodus: Balken und Farbfelder behalten ihre Farben (sonst verschwinden sie) */
@media (forced-colors: active) {
  .dr-bar, .dr-legend li::before, .dr-dot { forced-color-adjust: none; }
}

/* ---------- Breiten: Bausteine richten sich nach der Inhaltsbreite (Container „main“) – unter 820 px ist der Rechner einspaltig */
@container main (max-width: 820px) {
  .dr-calc { grid-template-columns: minmax(0, 1fr); }
  .dr-out { position: static; max-height: none; overflow: visible; }
  .dr-peek { position: sticky; bottom: calc(var(--dock-h) + 18px + env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center;
             gap: 12px 16px; margin: 8px 0 0; padding: 6px 6px 6px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink);
             box-shadow: var(--shadow); }
}
@container main (max-width: 640px) {
  .dr-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 18px; }
  .dr-tool { padding: 18px; }
  .dr-grp { padding: 16px 16px 18px; }
  .dr-form-foot { padding: 12px 16px; }
  .dr-res-head, .dr-split, .dr-say { padding-inline: 16px; }
  .dr-out-note { padding-inline: 16px; }
  .dr-kpis > div { padding: 12px 14px; }
  .dr-kpis b { font-size: 18px; }
}
/* Handy: zwei Felder je Zeile, wo es passt (Gebühr % + fix, Monat) – Tippziele bleiben 42 px hoch */
@container main (max-width: 420px) {
  .dr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .dr-fields:has(> .dr-in:only-child) { grid-template-columns: minmax(0, 1fr); }
  .dr-legend { grid-template-columns: minmax(0, 1fr); }
}
/* Lieferanten: unter 900 px Inhaltsbreite wird jedes Angebot (<tbody>) zur Karte – Lieferant über die ganze Breite, darunter
   Einkauf · Versand · Summe, dann Lieferzeit · Gewinn, Notiz und Knöpfe (Beschriftungen aus data-l) */
@container main (max-width: 900px) {
  .dr-sup-t { display: block; min-width: 0; }
  .dr-sup-t > thead { display: none; }
  .dr-sup-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--rule); }
  .dr-sup-o:last-child { border-bottom: 0; }
  .dr-sup-o > tr { display: contents; }
  .dr-sup-o td { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .dr-sup-t :is(th, td):is(:first-child, :last-child) { padding-inline: 0; }
  .dr-sup-o:has(> .dr-sup-nr) > tr:first-child > td { padding-bottom: 0; }
  .dr-sup-o td[data-l]::before { content: attr(data-l); font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .dr-sup-who, .dr-sup-nr > td, .dr-sup-act { grid-column: 1 / -1; }
  .dr-sup-who { min-width: 0; }
  .dr-sup-gain { grid-column: span 2; }
  .dr-sup-nr > td { order: 1; }
  .dr-sup-o .dr-sup-act { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
  .dr-sup-go { flex: 1 1 auto; }
  .dr-sup-ib { width: 40px; height: 40px; border: 1px solid var(--border); }
}
@container main (max-width: 640px) {
  .dr-sup-top > .btn { flex: 1 1 100%; margin-left: 0; }
  .dr-sup-ph { padding: 14px 12px 12px 16px; }
  /* Knöpfe in einer Zeile, der Sortier-Schalter darunter über die ganze Breite */
  .dr-sup-pa { flex: 1 1 100%; }
  .dr-sup-pa .seg { order: 1; flex: 1 1 100%; margin: 2px 0 0; }
  .dr-sup-pa .seg button { flex: 1; }
  .dr-sup-pa > .btn:first-of-type { margin-left: -14px; }   /* Text des leisen Knopfs bündig mit dem Titel */
  .dr-sup-o { gap: 10px; padding: 14px 14px 14px 16px; }
  .dr-sup-pf { padding: 12px 14px 12px 16px; }
  .dr-sup-none { padding: 14px 16px; }
  .dr-sup-empty { padding: var(--s6) 18px; }
}
/* Formular im schmalen Pop-up einspaltig (Container = Inhalt des Pop-ups); am Handy Felder 44 px hoch und 16 px Schrift
   (sonst zoomt iOS beim Tippen hinein) */
@container (max-width: 380px) {
  .dr-sf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dr-sf-f input { height: 44px; }
  .dr-sf-f input, .dr-sf-f textarea { font-size: 16px; }
  .dr-src-x { width: 44px; height: 44px; }
}

/* ---------- RookieDrop · Übersicht und Zusätze im Lieferanten-Vergleich (drop.js): Übersicht mit „Dein Stand“ und allen
   Werkzeugen, Produkt-Check auf der Lieferanten-Karte, Angebote in Fremdwährung (Betrag des Lieferanten, darunter „≈ … €“;
   ohne Kurs deutlich markiert). Gleiche Sprache wie oben: Setzkasten mit 1-px-Fugen (outline der Kinder), Versal-Etiketten und Zahlen in Mono, Farben nur
   per var()/color-mix(). Die Übersicht wird alle paar Sekunden neu gebaut – daher keine Einblend-Animationen. */

/* ---------- Übersicht: Abschnitte „Dein Stand“ und die drei Schritte (Titel sitzt dicht über seinem Setzkasten) */
.dr-hub-me, .dr-hub-step { display: grid; gap: var(--s3); min-width: 0; }
.dr-hub-me > .dr-sec, .dr-hub-step > .dr-sec { margin: 0; }
.dr-hub-n { font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--accent); }
/* „Dein Stand“: je Werkzeug eine Zahl – die ganze Kachel ist ein Knopf zum Werkzeug */
.dr-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; padding: 1px;
               border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.dr-hub-k { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 16px 18px 17px; border: 0; border-radius: 0;
            background: var(--panel); outline: 1px solid var(--rule); color: var(--text); font: inherit; text-align: left; cursor: pointer;
            transition: background-color var(--t-fast); }
.dr-hub-k:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--ring); outline-offset: -2px; }   /* nicht vom Rand abgeschnitten */
.dr-hub-kl { display: flex; align-items: center; gap: 7px; min-width: 0; font: 600 10px/1.35 var(--mono); letter-spacing: .08em;
             text-transform: uppercase; color: var(--muted); }
.dr-hub-kl .ic { width: 14px; height: 14px; color: var(--accent); }
.dr-hub-kv { font: 600 24px/1.15 var(--mono); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-hub-kv.dr-pos { color: var(--good-ink); }
.dr-hub-kv.dr-neg { color: var(--bad-ink); }
.dr-hub-ks { font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.dr-hub-ks .dr-neg { font-weight: 600; color: var(--bad-ink); }
/* öffentliche Seite: Hinweis, dass die übrigen Zahlen privat sind */
.dr-hub-priv { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--sunk);
               font-size: 12.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-hub-priv .ic { flex: none; margin-top: 2px; color: var(--good); }
/* Werkzeug-Kacheln: Icon, Titel, ein Satz, Knopf unten (gleich hoch je Zeile) */
.dr-hub-tile { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
.dr-hub-tile > .btn { justify-self: start; margin-top: 4px; }

/* ---------- Produkt-Check auf der Lieferanten-Karte: zugeklappt eine Zeile (Etikett · 7/10 · zehn Felder · Satz ·
   Aufklappen), aufgeklappt die Kriterien als Setzkasten zum Abhaken */
.dr-sup-chk { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--sunk) 35%, var(--panel)); }
.dr-sup-chk > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 48px; padding: 9px 16px 9px 20px;
                        list-style: none; cursor: pointer; }
.dr-sup-chk > summary::-webkit-details-marker { display: none; }
.dr-sup-chk > summary:focus-visible { outline-offset: -2px; }
.dr-sup-chk-l { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
                color: var(--muted); }
.dr-sup-chk-l .ic { width: 14px; height: 14px; color: var(--accent); }
.dr-sup-chk-n { font: 600 17px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.dr-sup-chk-n small { font-size: 12px; font-weight: 500; color: var(--muted); }
.dr-sup-chk-n.dr-pos { color: var(--good-ink); }
.dr-sup-chk-n.dr-neg { color: var(--bad-ink); }
/* Balken: zehn Felder, erfüllte in Karamell (viele grün, wenige rot) */
.dr-sup-chk-bar { display: flex; gap: 3px; flex: 0 1 150px; min-width: 90px; }
.dr-sup-chk-bar > i { flex: 1; height: 8px; border-radius: 2px; background: var(--rule-2); }
.dr-sup-chk-bar > i[data-on] { background: var(--accent); }
.dr-sup-chk-bar.dr-pos > i[data-on] { background: var(--good); }
.dr-sup-chk-bar.dr-neg > i[data-on] { background: var(--bad); }
.dr-sup-chk-v { flex: 1 1 140px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.dr-sup-chk-tg { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.dr-sup-chk:not([open]) .dr-sup-chk-tg > :last-child, .dr-sup-chk[open] .dr-sup-chk-tg > :first-child { display: none; }
.dr-sup-chk-body { display: grid; gap: 12px; padding: 2px 16px 16px 20px; }
.dr-sup-chk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1px; margin: 0; padding: 1px;
                   list-style: none; border-radius: var(--r-md); overflow: hidden; overflow: clip; }
.dr-sup-chk-it { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 14px; background: var(--panel); outline: 1px solid var(--rule);
                 transition: background-color var(--t-fast); }
.dr-sup-chk-it:has(input:checked) { background: color-mix(in srgb, var(--good) 7%, var(--panel)); }
.dr-sup-chk-it > label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.dr-sup-chk-it input { width: 18px; height: 18px; margin: 1px 0 0; }
.dr-sup-chk-it label > span { display: grid; gap: 2px; min-width: 0; }
.dr-sup-chk-it label b { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.dr-sup-chk-it label small { font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* Zusatz unter einem Kriterium: Faktor Verkaufspreis ÷ Einkauf („Genug Spielraum“), Knopf „Trend prüfen“ – bündig mit dem Text */
.dr-sup-chk-x { margin: 0 0 0 28px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--sunk); font-size: 12px; line-height: 1.45;
                color: var(--muted); overflow-wrap: anywhere; }
.dr-sup-chk-x b { font: 600 12.5px/1.3 var(--mono); color: var(--text); }
.dr-sup-chk-x.dr-pos b { color: var(--good-ink); }
.dr-sup-chk-x.dr-neg b { color: var(--bad-ink); }
.dr-sup-chk-go { justify-self: start; margin-left: 14px; padding: 6px 10px; font-size: 12.5px; }   /* leiser Knopf: Text bündig bei 28 px */
.dr-sup-chk-note { max-width: 90ch; }

/* ---------- Fremdwährung: Hinweis zum Kurs über der Liste, Beträge mit „≈ … €“, fehlender Kurs in Warnfarbe mit Kante */
.dr-sup-fx { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 16px; border: 1px solid var(--rule); border-radius: var(--r-md);
             background: var(--panel); font-size: 12.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-sup-fx > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.dr-sup-fx > span { min-width: 0; overflow-wrap: anywhere; }
.dr-sup-fx b { font-weight: 600; color: var(--text); }
.dr-sup-fx.dr-sup-fx-miss { border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); background: var(--tone-warn); color: var(--warn-ink); }
.dr-sup-fx-miss > .ic, .dr-sup-fx-miss b { color: var(--warn-ink); }
.dr-sup-orig { display: block; }
.dr-sup-o .dr-sup-cur, .dr-sup-o .dr-sup-norate { display: block; margin-top: 2px; font: 500 11px/1.3 var(--mono); color: var(--muted); }
.dr-sup-o .dr-sup-norate { font: 600 11.5px/1.35 var(--font); color: var(--warn-ink); white-space: normal; }
.dr-sup-o-norate > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* Formular: Währung (Auswahl + Kurs daneben), Vorschau „≈ … € in €“ unter den Preisen */
.dr-sf-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dr-sf-cur select { flex: 0 1 260px; min-width: 0; height: 42px; font-size: 14.5px; }
.dr-sf-cur .dr-sf-rate { flex: 1 1 160px; min-width: 0; }
.dr-sf-fx { margin: -6px 0 0; font: 500 12.5px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.dr-sf-fx:empty { display: none; }
.dr-sf-fx.dr-sf-fx-miss { font: 600 12.5px/1.45 var(--font); color: var(--warn-ink); }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .dr-hub-k:hover { background: var(--hover); }
  .dr-hub-k:hover .dr-hub-kl { color: var(--text); }
  .dr-sup-chk > summary:hover .dr-sup-chk-tg { text-decoration: underline; text-underline-offset: 3px; }
  .dr-sup-chk-it:hover:not(:has(input:checked)) { background: var(--hover); }
}
/* Windows-Kontrastmodus: die zehn Felder behalten ihre Farben (sonst verschwinden sie) */
@media (forced-colors: active) {
  .dr-sup-chk-bar { forced-color-adjust: none; }
}

/* ---------- Breiten (Container „main“) */
/* Fingerbreite: Häkchen 22 px (Zusätze rücken mit), Auswahlliste 44 px hoch mit 16 px Schrift (sonst zoomt iOS hinein) */
@media (max-width: 720px) {
  .dr-sf-cur select { height: 44px; font-size: 16px; }
  .dr-sup-chk-it input { width: 22px; height: 22px; margin-top: 0; }
  .dr-sup-chk-x { margin-left: 32px; }
  .dr-sup-chk-go { margin-left: 18px; }
}
@container main (max-width: 900px) {
  /* Angebot als Karte: Kante an der ganzen Karte statt an der ersten Zelle */
  .dr-sup-o-norate { box-shadow: inset 3px 0 0 var(--warn); }
  .dr-sup-o-norate > tr:first-child > td:first-child { box-shadow: none; }
}
@container main (max-width: 640px) {
  .dr-hub-tile > .btn { justify-self: stretch; }
  .dr-sup-chk > summary { padding: 9px 12px 9px 16px; }
  /* Zeile 1: Etikett · Punkte · Aufklappen, Zeile 2: Balken und Satz */
  .dr-sup-chk-l { order: 1; }
  .dr-sup-chk-n { order: 2; }
  .dr-sup-chk-tg { order: 3; }
  .dr-sup-chk-bar { order: 4; flex: 1 1 120px; }
  .dr-sup-chk-v { order: 5; flex: 0 1 auto; }
  .dr-sup-chk-body { padding: 2px 12px 14px 16px; }
  .dr-sup-chk-it { padding: 12px; }
  .dr-sup-fx { padding: 10px 12px; }
}
/* Handy: „Dein Stand“ zweispaltig, ein einzelner Wert (öffentliche Seite) über die ganze Breite */
@container main (max-width: 420px) {
  .dr-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-hub-k { padding: 13px 14px 14px; }
  .dr-hub-k:only-child, .dr-hub-k:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dr-hub-kv { font-size: 19px; }
  .dr-sup-chk-x { margin-left: 0; }
  .dr-sup-chk-go { margin-left: -10px; }
}

/* ---------- RookieDrop · Recherche: Trend-Signale und Shop-Analyse (drop_recherche.js)
   Gleiche Sprache wie oben: Setzkasten mit 1-px-Fugen, Versal-Etiketten, Zahlen in Mono, Überschriften in Fraunces, keine
   Schatten auf der Fläche. Vorsilben dr-rs- (beide Seiten), dr-tr- (Trend-Signale), dr-shp- (Shop-Analyse); genutzt
   werden außerdem .dr, .dr-kicker, .dr-local, .dr-cap, .dr-sr und .dr-tool-ic vom Anfang von T7b. Farben nur per var()/color-mix();
   die Kurven-Farbe steht je Karte in --c (Nachrichten bläulich, Wikipedia Karamell). #view wird alle paar Sekunden neu
   gebaut – daher keine Einblend-Animationen; nur der Lade-Kringel dreht sich (bei „weniger Bewegung“ steht er, T9). */

/* ---------- Gemeinsam: Eingabe-Leiste (Feld + Knopf), „Zuletzt“-Chips, Warten, Fehler, Hinweise, Einstieg, Ergebnis-Kopf */
.dr-rs-form { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 16px 20px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg);
              background: var(--panel); box-shadow: inset 3px 0 0 var(--accent-2); }
.dr-rs-form > label { font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.dr-rs-form > small { max-width: 80ch; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.dr-rs-row { display: flex; gap: 8px; min-width: 0; }
.dr-rs .dr-rs-row input { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 15px; }
.dr-rs .dr-rs-row .btn { flex: none; min-height: 44px; padding-inline: 18px; }

.dr-rs-hist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.dr-rs-hist > .dr-kicker { margin-right: 4px; }
.dr-rs-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 999px;
              background: var(--panel); transition: background-color var(--t-fast), border-color var(--t-fast); }
.dr-rs-chip > button { min-height: 32px; border: 0; background: none; color: var(--text); cursor: pointer; }
.dr-rs-chip-w { min-width: 0; max-width: 28ch; padding: 0 4px 0 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                font: 600 12.5px/32px var(--font); }
.dr-rs-chip-x { display: grid; place-items: center; flex: none; width: 30px; padding: 0; border-radius: 50%; font: 500 11px/1 var(--font); }
.dr-rs-chip > .dr-rs-chip-x { color: var(--muted); }
.dr-rs-chip.on { border-color: transparent; background: var(--ink); }
.dr-rs-chip.on > button { color: var(--on-ink); }
.dr-rs-clear { min-height: 32px; padding: 0 8px; border: 0; background: none; color: var(--muted); font: 600 12px/1 var(--font);
               text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); cursor: pointer; }

.dr-rs-wait { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--rule-2); border-radius: var(--r-lg);
              background: var(--panel); }
.dr-rs-wait > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dr-rs-wait b { font-size: 14px; }
.dr-rs-wait small { font-size: 12.5px; color: var(--muted); }
.dr-rs-spin { flex: none; width: 22px; height: 22px; border: 2px solid var(--rule-2); border-top-color: var(--accent); border-radius: 50%;
              animation: spin .8s linear infinite; }
.dr-rs-err { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); background: var(--tone-bad);
             color: var(--bad-ink); box-shadow: inset 3px 0 0 var(--bad); }
.dr-rs-err > .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.dr-rs-err > div { min-width: 0; }
.dr-rs-err b { font-size: 14px; }
.dr-rs-err p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.dr-rs-err small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* Hinweise des Servers (eine Quelle fiel aus oder bremste) und leise Hinweise (keine Daten, leere Liste) */
.dr-rs-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); background: var(--tone-warn);
              color: var(--warn-ink); box-shadow: inset 3px 0 0 var(--warn); font-size: 13px; line-height: 1.5; }
.dr-rs-note > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.dr-rs-note ul { margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.dr-rs-hint { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--sunk);
              font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-rs-hint > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* Einstieg (noch kein Ergebnis): gestrichelte Fläche wie der leere Lieferanten-Vergleich, Beispiele als Chips */
.dr-rs-intro { display: grid; justify-items: center; gap: 12px; padding: var(--s6) var(--s5); border: 1px dashed var(--rule-2);
               border-radius: var(--r-lg); background: var(--panel); text-align: center; }
.dr-rs-intro h3 { margin: 0; font: 600 24px/1.2 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; }
.dr-rs-intro > p { max-width: 64ch; margin: 0; color: var(--muted); text-wrap: pretty; }
.dr-rs-intro > .dr-rs-tip { font-size: 12.5px; }
.dr-rs-ex { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.dr-rs-ex > .dr-kicker { flex: 1 1 100%; }
.dr-rs-exb { min-height: 34px; padding: 0 14px; border: 1px dashed var(--rule-2); border-radius: 999px; background: none; color: var(--text);
             font: 600 12.5px/1 var(--font); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }

/* Ergebnis-Kopf: Etikett, Titel (Stichwort bzw. Shop als Link), Stand; Knöpfe rechts */
.dr-tr-res, .dr-shp-res { display: grid; gap: var(--s4); min-width: 0; }
.dr-rs-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.dr-rs-ht { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.dr-rs-ht h3 { margin: 0; font: 600 28px/1.12 var(--serif); letter-spacing: -.035em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.dr-rs-ht small { font-size: 12px; color: var(--muted); }
.dr-rs-act { display: flex; flex-wrap: wrap; gap: 6px; }
/* Links nach draußen: Text in Tinte, kleiner Pfeil in Akzentfarbe */
.dr-rs-a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dr-rs-a .ic { width: 13px; height: 13px; margin-left: 4px; vertical-align: -.1em; color: var(--accent); }
.dr-rs-ht h3 .dr-rs-a .ic { width: 18px; height: 18px; }

/* ---------- Trend-Signale: zwei Karten im Setzkasten (Nachrichten | Wikipedia), schmal untereinander */
.dr-tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border-radius: var(--r-lg);
              overflow: hidden; overflow: clip; }
.dr-tr-card { --c: var(--accent); display: grid; gap: 12px; align-content: start; min-width: 0; padding: 18px 20px 16px; background: var(--panel);
              outline: 1px solid var(--rule); }
.dr-tr-card[data-k="news"] { --c: var(--tech); }
.dr-tr-card h4 { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 17px/1.3 var(--serif); letter-spacing: -.015em;
                 overflow-wrap: anywhere; }
.dr-tr-sw { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
/* Veränderung groß in Mono, daneben Erklärung und neutrale Einordnung (Pfeil aus CSS, kein Ton) */
.dr-tr-chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.dr-tr-chg > b { font: 600 34px/1.05 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.dr-tr-chg > small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dr-tr-dir { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--rule-2); border-radius: 999px;
             font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.dr-tr-dir > i { width: 9px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dr-tr-chg[data-dir="down"] .dr-tr-dir > i { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dr-tr-chg[data-dir="flat"] .dr-tr-dir > i { height: 2px; clip-path: none; }
/* Diagramm: SVG streckt sich auf die Breite (preserveAspectRatio none, Striche bleiben 2 px), Beschriftung als HTML darüber */
.dr-tr-chart { min-width: 0; }
.dr-tr-plot { position: relative; height: 150px; }
.dr-tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dr-tr-gl { fill: none; stroke: var(--rule); stroke-width: 1; }
.dr-tr-band { fill: color-mix(in srgb, var(--c) 8%, transparent); }
.dr-tr-area { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: none; }
.dr-tr-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dr-tr-avg { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dr-tr-avg.dr-tr-now { stroke: var(--text); }
.dr-tr-yl { position: absolute; left: 0; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--panel) 82%, transparent);
            font: 500 10.5px/1.25 var(--mono); color: var(--muted); pointer-events: none; }
.dr-tr-yl[data-y="max"] { top: 3px; }
.dr-tr-yl[data-y="mid"] { top: calc(50% + 3px); }
.dr-tr-x { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 500 10.5px/1.2 var(--mono); color: var(--muted); }
.dr-tr-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 0; font-size: 11.5px; color: var(--muted); }
.dr-tr-key i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.dr-tr-key .dr-tr-kb { background: color-mix(in srgb, var(--c) 22%, transparent); }
.dr-tr-key .dr-tr-ka { height: 0; border-top: 2px dashed var(--text); border-radius: 0; vertical-align: 3px; }
/* Kennzahlen: drei Felder im Setzkasten */
.dr-tr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--rule);
               border-radius: var(--r-sm); overflow: hidden; overflow: clip; background: var(--rule); }
.dr-tr-stats > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 8px 10px; background: var(--panel); }
.dr-tr-stats dt { font: 600 9.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-tr-stats dd { margin: 0; font: 600 15px/1.25 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-tr-stats dd small { display: block; font: 500 10.5px/1.3 var(--mono); color: var(--muted); }
.dr-tr-src { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dr-tr-src .dr-rs-a { font-size: 12px; }
/* Quelle fehlt / keine Daten: klarer Hinweis statt leerem Diagramm */
.dr-tr-none { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); }
.dr-tr-none > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.dr-tr-none p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* „Selbst nachsehen“: Links zu Google Trends und TikTok (öffnet nur der Browser) */
.dr-tr-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-size: 13px; }
.dr-tr-more small { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }

/* ---------- Shop-Analyse: Kennzahlen im Setzkasten, Neuheiten je Monat, Sortiment, Werkzeugleiste, Produkt-Raster */
.dr-shp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px; padding: 1px;
               border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.dr-shp-kpis > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 14px 16px; background: var(--panel); outline: 1px solid var(--rule); }
.dr-shp-kpis span { font: 600 10px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-shp-kpis b { font: 600 20px/1.2 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-shp-kpis small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.dr-shp-box { display: grid; gap: 10px; min-width: 0; padding: 16px 20px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.dr-shp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em;
            text-transform: uppercase; color: var(--muted); }
.dr-shp-h small { font: 500 11.5px/1.4 var(--font); letter-spacing: 0; text-transform: none; }
/* Säulen: Höhe in % aus drop_recherche.js, Zahl darüber, Monat darunter */
.dr-shp-mons { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 124px; }
.dr-shp-mon { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 4px; height: 100%; min-width: 0; }
.dr-shp-mon > b { min-height: 1em; font: 600 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dr-shp-mon > i { align-self: end; width: 100%; max-width: 30px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.dr-shp-mon > span { font: 500 10px/1 var(--mono); color: var(--muted); }
/* Sortiment: häufigste Produktarten als Schalter */
.dr-shp-types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-shp-types > .dr-kicker { margin-right: 4px; }
.dr-shp-type { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 12px; border: 1px solid var(--border);
               border-radius: 999px; background: var(--panel); color: var(--text); font: 600 12.5px/1.2 var(--font); cursor: pointer;
               overflow-wrap: anywhere; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.dr-shp-type > b { font: 600 11px/1 var(--mono); color: var(--muted); }
.dr-shp-type.on { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.dr-shp-type.on > b { color: inherit; opacity: .72; }
/* Werkzeugleiste: Suche wächst, Sortierung, „nur Angebote“, Zähler, CSV */
.dr-shp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dr-rs .dr-shp-tools input[type=search] { flex: 1 1 220px; min-width: 0; }
.dr-shp-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dr-shp-chk input { width: 17px; height: 17px; margin: 0; }
.dr-shp-n { margin-left: auto; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.dr-shp-n b { color: var(--text); }
/* Raster: Karten mit quadratischem Bild; außerhalb des Bildes zeichnet der Browser sie erst beim Hinscrollen */
.dr-shp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s3); }
.dr-shp-p { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel);
            overflow: hidden; overflow: clip; content-visibility: auto; contain-intrinsic-size: auto 400px; }
.dr-shp-img { position: relative; aspect-ratio: 1; background: var(--sunk); }
.dr-shp-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.dr-shp-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--faint); }
.dr-shp-noimg .ic { width: 30px; height: 30px; stroke-width: 1.6; }
.dr-shp-bs { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.dr-shp-b { padding: 2px 7px; border-radius: 999px; background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--rule);
            font: 600 9.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.dr-shp-b[data-b="sale"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.dr-shp-b[data-b="new"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.dr-shp-b[data-b="out"] { background: var(--tone-bad); color: var(--bad-ink); box-shadow: none; }
.dr-shp-pb { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px 10px; }
.dr-shp-t { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 14px/1.35 var(--font);
            letter-spacing: 0; overflow-wrap: anywhere; }
.dr-shp-meta { overflow: hidden; font-size: 11.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.dr-shp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; }
.dr-shp-price b { font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.dr-shp-price s { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.dr-shp-since { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.dr-shp-find { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.dr-shp-find .dr-rs-a { font-size: 11.5px; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.dr-shp-pf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 14px 12px;
             border-top: 1px solid var(--rule); }
.dr-shp-pf > .dr-rs-a { font-size: 12.5px; }
.dr-shp-pf > .btn { padding: 6px 10px; font-size: 12px; }
.dr-shp-mw { display: flex; justify-content: center; }
.dr-shp-mw:empty { display: none; }
.dr-shp-mw small { margin-left: 4px; font: 500 11px/1 var(--mono); color: var(--muted); }
.dr-shp-none { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0;
               padding: var(--s5); border: 1px dashed var(--rule-2); border-radius: var(--r-md); color: var(--muted); font-size: 13px; }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .dr-rs-chip:hover { border-color: var(--border-2); }
  .dr-rs-chip:not(.on) > .dr-rs-chip-x:hover { background: var(--tone-bad); color: var(--bad-ink); }
  .dr-rs-clear:hover { color: var(--text); text-decoration-color: currentColor; }
  .dr-rs-exb:hover, .dr-shp-type:not(.on):hover { border-color: var(--border-2); background: var(--hl); }
  a.dr-rs-a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* ---------- Windows-Kontrastmodus: Kurven, Säulen und Farbfelder behalten ihre Farben */
@media (forced-colors: active) {
  .dr-tr-svg, .dr-tr-sw, .dr-tr-dir > i, .dr-tr-key i, .dr-shp-mon > i { forced-color-adjust: none; }
}

/* ---------- Breiten: Bausteine richten sich nach der Inhaltsbreite (Container „main“) */
@container main (max-width: 760px) {
  .dr-tr-grid { grid-template-columns: minmax(0, 1fr); }
}
@container main (max-width: 640px) {
  .dr-rs-form { padding: 14px 14px 12px; }
  .dr-rs-ht h3 { font-size: 23px; }
  .dr-rs-act { flex: 1 1 100%; }
  .dr-rs-act > .btn { flex: 1 1 auto; }
  .dr-rs-intro { padding: var(--s5) 18px; }
  .dr-tr-card { padding: 16px 14px 14px; }
  .dr-tr-chg > b { font-size: 28px; }
  .dr-tr-plot { height: 128px; }
  .dr-shp-box { padding: 14px 16px; }
  .dr-shp-kpis > div { padding: 12px 14px; }
  .dr-shp-kpis b { font-size: 18px; }
  .dr-shp-mons { gap: 3px; height: 108px; }
  .dr-shp-n { flex: 1 1 auto; margin-left: 0; }
}
/* Handy (375 px): Produkte zu zweit nebeneinander, Knöpfe der Karte über die ganze Breite */
@container main (max-width: 460px) {
  .dr-shp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-shp-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* fünfte Kennzahl über die ganze Zeile */
  .dr-rs .dr-shp-tools input[type=search] { flex-basis: 100%; }
  .dr-shp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dr-shp-pb { padding: 10px 10px 8px; }
  .dr-shp-t { font-size: 13px; }
  .dr-shp-price b { font-size: 15px; }
  .dr-shp-pf { padding: 8px 10px 10px; }
  .dr-shp-pf > .btn { flex: 1 1 100%; white-space: normal; }
  .dr-tr-stats dd { font-size: 14px; }
  .dr-tr-stats > div { padding: 7px 8px; }
}
/* Tippziele und Schrift am Handy (16 px – sonst zoomt iOS beim Tippen hinein) */
@media (max-width: 720px) {
  .dr-rs .dr-rs-row input, .dr-rs .dr-shp-tools input[type=search], .dr-rs .dr-shp-tools select { height: 44px; font-size: 16px; }
  .dr-rs-chip > button, .dr-rs-clear, .dr-shp-type, .dr-rs-exb { min-height: 40px; }
  .dr-rs-chip-x { width: 40px; }
}

/* ---------- RookieDrop · Betrieb (drop_betrieb.js): Bestellungen („orders“), Gewinn-Tagebuch („profit“), Textbausteine
   („texts“). Gleiche Sprache wie der Rest von RookieDrop: Flächen mit 1-px-Rand, Versal-Etiketten, Zahlen in Mono, Titel in
   Fraunces, Farben nur per var()/color-mix() aus T1 (Hell und Dunkel kommen damit von selbst). Vorsilben: dr-bt- (gemeinsam),
   dr-ord-, dr-pf-, dr-tx-. Das Bestell-Formular im Pop-up nutzt die Formular-Bausteine des Lieferanten-Vergleichs (dr-sf-…).
   #view wird alle paar Sekunden neu gebaut – daher keine Einblend-Animationen. */

/* ---------- Gemeinsam: leerer Zustand, Fußzeile mit Knöpfen, „Weitere anzeigen“ */
.dr-bt-empty { display: grid; justify-items: center; gap: 12px; padding: var(--s7) var(--s5); border: 1px dashed var(--rule-2); border-radius: var(--r-lg);
               background: var(--panel); text-align: center; }
.dr-bt-empty h3 { margin: 0; font: 600 24px/1.2 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; }
.dr-bt-empty p { max-width: 62ch; margin: 0; color: var(--muted); text-wrap: pretty; }
.dr-bt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dr-bt-foot small { font-size: 12px; color: var(--muted); }
.dr-bt-more { justify-self: center; }
.dr-bt-more small { font-weight: 500; color: var(--muted); }
/* Datumsfelder (Bestellung, Tag): wie die übrigen Felder aus T1 */
.dr-bt input[type=date], .dr-ord-f input[type=date] { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background-color: var(--panel); color: var(--text); font: 500 13.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dr-bt input[type=date]:focus, .dr-ord-f input[type=date]:focus { outline: 2px solid transparent; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Bestellungen: Kopf (Filter-Chips links, Suche und „Bestellung anlegen“ rechts) */
.dr-ord-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.dr-ord-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-ord-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 13px; border: 1px solid var(--border); border-radius: 999px;
               background: var(--sunk); color: var(--muted); font: 600 12.5px/1 var(--font); white-space: nowrap;
               transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.dr-ord-chip b { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: var(--panel); color: var(--text); font: 600 11px/1.2 var(--mono);
                 font-variant-numeric: tabular-nums; text-align: center; }
.dr-ord-chip[data-tone="bad"] b { background: var(--tone-bad); color: var(--bad-ink); }
.dr-ord-chip.on { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.dr-ord-chip.on b { background: color-mix(in srgb, var(--on-ink) 18%, transparent); color: var(--on-ink); }
.dr-ord-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-ord-search { position: relative; display: block; }
.dr-ord-search > .ic { position: absolute; top: 50%; left: 11px; width: 15px; height: 15px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.dr-ord-search input { width: min(260px, 100%); padding-left: 34px; }

/* ---------- Bestellungen: Karten (breit mehrere nebeneinander). Kante links = Status, überfällig rot */
.dr-ord-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: var(--s4); align-items: start; }
.dr-ord-list > .dr-bt-more, .dr-ord-list > .dr-ord-none { grid-column: 1 / -1; }
.dr-ord-c { --st: var(--rule-2); display: grid; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
            box-shadow: inset 3px 0 0 var(--st); overflow: hidden; overflow: clip; }
.dr-ord-c[data-st="bestellt"] { --st: var(--tech); }
.dr-ord-c[data-st="versendet"] { --st: var(--accent-2); }
.dr-ord-c[data-st="zugestellt"] { --st: var(--good); }
.dr-ord-c[data-st="problem"], .dr-ord-c[data-late] { --st: var(--bad); }
.dr-ord-c[data-st="storniert"] { --st: var(--faint); }
.dr-ord-c[data-st="storniert"] .dr-ord-h h3 { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.dr-ord-h { display: grid; gap: 4px; min-width: 0; padding: 16px 18px 12px 20px; }
.dr-ord-h h3 { margin: 4px 0 0; font: 600 19px/1.25 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.dr-ord-h small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.dr-ord-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Status-Pille: zarte Fläche mit Punkt (Farbe je Status) */
.dr-ord-pill { --c: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
               background: color-mix(in srgb, var(--c) 13%, transparent); color: color-mix(in srgb, var(--c) 72%, var(--text));
               font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dr-ord-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.dr-ord-pill[data-st="bestellt"] { --c: var(--tech); }
.dr-ord-pill[data-st="versendet"] { --c: var(--accent); }
.dr-ord-pill[data-st="zugestellt"] { --c: var(--good); }
.dr-ord-pill[data-st="problem"] { --c: var(--bad); }
.dr-ord-pill[data-st="storniert"] { --c: var(--faint); }
.dr-ord-pill[data-st="late"] { --c: var(--bad); background: var(--tone-bad); color: var(--bad-ink); }
/* Angaben: Beschriftung links (Versalien), Wert rechts; schmal untereinander */
.dr-ord-meta { display: grid; gap: 8px; margin: 0; padding: 12px 18px 14px 20px; border-top: 1px solid var(--rule); }
.dr-ord-meta > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: baseline; gap: 2px 12px; }
.dr-ord-meta dt { display: flex; align-items: center; gap: 6px; font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-ord-meta dt .ic { flex: none; width: 13px; height: 13px; translate: 0 -1px; }
.dr-ord-meta dd { min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.dr-ord-meta dd b { font: 600 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.dr-ord-meta dd small { font-size: 12px; color: var(--muted); }
.dr-ord-meta code { padding: 1px 6px; border-radius: var(--r-xs); background: var(--sunk); font-size: 12.5px; }
.dr-ord-day { color: var(--muted); }
[data-late] .dr-ord-day { color: var(--bad-ink); font-weight: 600; }
/* Fortschritt „Tag 9 von 12“ */
.dr-ord-prog { display: block; height: 4px; margin-top: 7px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.dr-ord-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--accent-2); }
[data-late] .dr-ord-prog > i { background: var(--bad); }
.dr-ord-track { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dr-ord-track .ic { width: 13px; height: 13px; }
/* Notiz (lange klappen auf) */
.dr-ord-note { margin: 0; padding: 0 18px 14px 20px; font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.dr-ord-note > span, .dr-ord-nd summary > span { margin-right: 8px; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-ord-nd { padding: 0 18px 14px 20px; }
.dr-ord-nd summary { display: block; list-style: none; cursor: pointer; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.dr-ord-nd summary::-webkit-details-marker { display: none; }
.dr-ord-nd summary b { margin-left: 4px; color: var(--accent); white-space: nowrap; }
.dr-ord-nd[open] summary { display: none; }
.dr-ord-nd .dr-ord-note { padding: 0; }
/* Knöpfe: Schnell-Status links, „Text an Kunde“, Bearbeiten, Löschen rechts */
.dr-ord-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 20px;
              border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--sunk) 45%, var(--panel)); }
.dr-ord-qs, .dr-ord-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dr-ord-more { margin-left: auto; }
.dr-ord-q { padding: 6px 11px; font-size: 12.5px; }
.dr-ord-q.quiet[data-tone="bad"] { color: var(--bad-ink); }
.dr-ord-more > .btn.quiet { padding: 6px 10px; }
.dr-ord-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: none;
             color: var(--muted); font: 600 13px/1 var(--font); transition: background-color var(--t-fast), color var(--t-fast); }
.dr-ord-ib .ic { width: 15px; height: 15px; }
.dr-ord-none { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px; border: 1px dashed var(--rule-2); border-radius: var(--r-lg);
               color: var(--muted); font-size: 13.5px; }
.dr-ord-none .ic { flex: none; width: 18px; height: 18px; color: var(--good); }

/* ---------- Gewinn-Tagebuch: oben Formular | Kennzahlen 7 und 30 Tage (schmal untereinander) */
.dr-pf-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: start; }
.dr-pf-form { display: grid; gap: 14px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
              box-shadow: inset 3px 0 0 var(--accent-2); }
.dr-pf-fh { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 19px/1.25 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.dr-pf-fh .ic { width: 18px; height: 18px; color: var(--accent); }
.dr-pf-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px 12px; }
.dr-pf-in { display: grid; gap: 6px; align-content: start; min-width: 0; }
.dr-pf-in label { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.dr-pf-in label i { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--muted); }
.dr-pf-in small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.dr-pf-in input { width: 100%; height: 42px; }
.dr-pf-in .dr-num input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dr-pf-wide { grid-column: 1 / -1; }
.dr-pf-form [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.dr-pf-foot { display: flex; flex-wrap: wrap; gap: 8px; }
/* Live-Ergebnis des eingetippten Tages und Hinweise (vorhandener Eintrag, Werte aus Bestellungen) */
.dr-pf-live { display: grid; gap: 8px; }
.dr-pf-prev { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--sunk); }
.dr-pf-prev span { font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-pf-prev b { font: 600 20px/1.2 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dr-pf-prev small { flex-basis: 100%; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.dr-pf-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 6px 6px 6px 12px; border: 1px solid var(--rule);
              border-radius: var(--r-md); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dr-pf-hint > .ic { flex: none; width: 15px; height: 15px; color: var(--accent); }
.dr-pf-hint > span { flex: 1 1 200px; min-width: 0; }
.dr-pf-hint b { font-family: var(--mono); color: var(--text); }
.dr-pf-hint .btn { padding: 6px 10px; }
/* Kennzahlen: je Zeitraum ein Setzkasten mit sechs Feldern */
.dr-pf-sum { display: grid; gap: var(--s4); min-width: 0; }
.dr-pf-per { display: grid; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; overflow: clip; }
.dr-pf-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--rule);
            font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.dr-pf-ph small { font: 500 11.5px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.dr-pf-kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.dr-pf-kp > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 12px 16px 13px; background: var(--panel); }
.dr-pf-kp span { font: 600 10px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-pf-kp b { font: 600 19px/1.2 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-pf-kp small { font-size: 11px; line-height: 1.35; color: var(--muted); }
:is(.dr-pf-kp, .dr-pf-prev, .dr-pf-t, .dr-pf-cap) b.dr-pos { color: var(--good-ink); }
:is(.dr-pf-kp, .dr-pf-prev, .dr-pf-t, .dr-pf-cap) b.dr-neg { color: var(--bad-ink); }
/* ROAS gegen Break-even (Margen-Rechner): Kante in Ton-Farbe */
.dr-pf-be { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--r-md);
            background: var(--panel); box-shadow: inset 3px 0 0 var(--rule-2); font-size: 13px; line-height: 1.5; }
.dr-pf-be > .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.dr-pf-be b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dr-pf-be small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.dr-pf-be.dr-pos { background: var(--tone-good); box-shadow: inset 3px 0 0 var(--good); }
.dr-pf-be.dr-pos > .ic { color: var(--good-ink); }
.dr-pf-be.dr-neg { background: var(--tone-bad); box-shadow: inset 3px 0 0 var(--bad); }
.dr-pf-be.dr-neg > .ic { color: var(--bad-ink); }

/* ---------- Gewinn je Tag: Balken (SVG) mit Achse links und Datumszeile darunter */
.dr-pf-chart, .dr-pf-days { display: grid; gap: 10px; min-width: 0; padding: 16px 20px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.dr-pf-ch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font: 600 19px/1.25 var(--serif); letter-spacing: -.02em;
            font-variation-settings: "SOFT" 100; }
.dr-pf-ch small { font: 500 12px/1.45 var(--font); letter-spacing: 0; color: var(--muted); }
/* zwei Spalten: Achse | Balken, darunter (zweite Spalte) die Datumszeile – so steht sie genau unter den Balken */
.dr-pf-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: stretch; }
.dr-pf-axis { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 2px 0; font: 500 10.5px/1.2 var(--mono);
              color: var(--muted); text-align: right; white-space: nowrap; }
.dr-pf-svg { display: block; width: 100%; height: 210px; overflow: visible; }
.dr-pf-zero { stroke: var(--rule-2); stroke-width: 1.5; }
.dr-pf-hit { fill: transparent; }
.dr-pf-bar path { fill: var(--faint); }
.dr-pf-bar.dr-pos path { fill: var(--good); }
.dr-pf-bar.dr-neg path { fill: var(--bad); }
.dr-pf-nil circle { fill: var(--faint); }
.dr-pf-x { grid-column: 2; display: flex; justify-content: space-between; font: 500 10.5px/1.2 var(--mono); color: var(--muted); }
.dr-pf-cap { margin: 0; font-size: 12.5px; color: var(--muted); }
.dr-pf-cap b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dr-pf-nochart { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 22px 16px; border: 1px dashed var(--rule-2); border-radius: var(--r-md);
                 font-size: 13px; line-height: 1.5; color: var(--muted); }
.dr-pf-nochart .ic { flex: none; width: 18px; height: 18px; color: var(--faint); }

/* ---------- Tabelle der Tage (schmal: jede Zeile eine Karte, Beschriftungen aus data-l) */
.dr-pf-days { padding-inline: 0; padding-bottom: 14px; }
.dr-pf-days > .dr-pf-ch, .dr-pf-days > .dr-bt-foot { padding-inline: 20px; }
.dr-pf-tw { overflow-x: auto; }
.dr-pf-t { min-width: 780px; }
.dr-pf-t :is(th, td):first-child { padding-left: 20px; }
.dr-pf-t :is(th, td):last-child { padding-right: 14px; }
.dr-pf-t td.n { font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.dr-pf-d b { font: 600 13px/1.4 var(--mono); }
.dr-pf-d small { display: block; max-width: 34ch; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--muted); }
.dr-pf-g b { font-weight: 700; }
.dr-pf-act { text-align: right; }
.dr-pf-t tbody tr:last-child > td { border-bottom: 0; }
/* Rechner-Werte, mit denen gerechnet wird */
.dr-pf-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 8px 6px 8px 14px; border-radius: var(--r-md);
              background: var(--sunk); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dr-pf-calc > .ic { flex: none; width: 16px; height: 16px; color: var(--accent); }
.dr-pf-calc > span { flex: 1 1 320px; min-width: 0; text-wrap: pretty; }
.dr-pf-calc b { font-weight: 600; color: var(--text); }

/* ---------- Textbausteine: Angaben oben (Name, Shop, Bestellung, Du/Sie), darunter die Bausteine als Karten */
.dr-tx-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; margin: 0; padding: 16px 20px 18px;
             border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.dr-tx-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.dr-tx-f label, .dr-tx-l { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.dr-tx-f input, .dr-tx-f select { width: 100%; height: 40px; }
.dr-tx-f .seg { justify-self: start; }
.dr-tx-f .seg button { min-width: 64px; }
.dr-tx-wide { grid-column: span 2; }
.dr-tx-key { margin: calc(var(--s2) * -1) 0 0; font-size: 12px; color: var(--muted); }
.dr-tx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: var(--s4); align-items: start; }
.dr-tx-c { display: grid; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; overflow: clip; }
.dr-tx-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 14px 14px 12px 18px;
           border-bottom: 1px solid var(--rule); }
.dr-tx-n { padding-top: 4px; font: 600 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--accent); }
.dr-tx-h h3 { margin: 0; font: 600 17px/1.3 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.dr-tx-h small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.dr-tx-h .btn { padding: 6px 11px; font-size: 12.5px; }
.dr-tx-body { margin: 0; padding: 14px 18px 16px; font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.dr-tx-v { font-weight: 600; color: var(--text); }
.dr-tx-gap { padding: 0 2px; border-radius: 4px; background: var(--tone-warn); color: var(--warn-ink); font-weight: 600;
            -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* bricht die Markierung um, hat jede Zeile ihre Ecken */

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  .dr-ord-chip:not(.on):hover { border-color: var(--border-2); color: var(--text); }
  .dr-ord-ib:hover { background: var(--hl); color: var(--text); }
  .dr-ord-ib.dr-ord-x:hover { background: var(--tone-bad); color: var(--bad-ink); }
  .dr-ord-q.quiet[data-tone="bad"]:hover { background: var(--tone-bad); }
  .dr-ord-track:hover, .dr-ord-nd summary:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .dr-pf-bar:hover .dr-pf-hit, .dr-pf-nil:hover .dr-pf-hit { fill: var(--hl); }
  .dr-pf-t tbody tr:hover > td { background: var(--hl); }
}
/* ---------- Windows-Kontrastmodus: Balken, Fortschritt und Pillen-Punkte behalten ihre Farben */
@media (forced-colors: active) {
  .dr-pf-svg, .dr-ord-prog, .dr-ord-pill::before { forced-color-adjust: none; }
}

/* ---------- Breiten (Container „main“) */
@container main (max-width: 900px) {
  .dr-pf-top { grid-template-columns: minmax(0, 1fr); }
}
/* Tabelle der Tage: jede Zeile eine Karte – Datum (mit Notiz) und Knöpfe oben, darunter die Zahlen in drei Spalten */
@container main (max-width: 760px) {
  .dr-pf-t { display: block; min-width: 0; }
  .dr-pf-t > thead { display: none; }
  .dr-pf-t > tbody { display: grid; }
  .dr-pf-t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--rule); }
  .dr-pf-t tbody tr:last-child { border-bottom: 0; }
  .dr-pf-t td { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .dr-pf-t :is(th, td):is(:first-child, :last-child) { padding-inline: 0; }
  .dr-pf-t td[data-l]::before { content: attr(data-l); font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .dr-pf-t .dr-pf-d { grid-column: 1 / 3; grid-row: 1; }
  .dr-pf-t .dr-pf-d::before { display: none; }
  .dr-pf-t .dr-pf-act { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; gap: 4px; }
  .dr-pf-d small { max-width: none; white-space: normal; }
  .dr-ord-ib { width: 40px; height: 40px; border: 1px solid var(--border); }
}
@container main (max-width: 640px) {
  .dr-ord-tools { flex: 1 1 100%; }
  .dr-ord-search { flex: 1 1 180px; }
  .dr-ord-search input { width: 100%; }
  .dr-ord-tools > .btn { flex: 1 1 auto; }
  .dr-ord-h { padding: 14px 14px 10px 16px; }
  .dr-ord-meta { padding: 10px 14px 12px 16px; }
  .dr-ord-meta > div { grid-template-columns: minmax(0, 1fr); }
  .dr-ord-note, .dr-ord-nd { padding: 0 14px 12px 16px; }
  .dr-ord-act { padding: 10px 10px 10px 16px; }
  .dr-ord-qs { flex: 1 1 100%; }
  .dr-ord-qs > .btn:first-child { flex: 1 1 auto; }
  .dr-pf-form { padding: 16px 16px 18px; }
  .dr-pf-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-pf-kp > div { padding: 11px 14px 12px; }
  .dr-pf-kp b { font-size: 17px; }
  .dr-pf-chart { padding: 14px 14px 16px; }
  .dr-pf-svg { height: 160px; }
  .dr-pf-days > .dr-pf-ch, .dr-pf-days > .dr-bt-foot { padding-inline: 16px; }
  .dr-tx-set { padding: 14px 16px 16px; }
  .dr-tx-wide { grid-column: auto; }
  .dr-tx-h { grid-template-columns: auto minmax(0, 1fr); padding: 12px 12px 12px 16px; }
  .dr-tx-h .btn { grid-column: 1 / -1; justify-self: stretch; }
  .dr-tx-body { padding: 12px 16px 14px; }
  .dr-bt-empty { padding: var(--s6) 18px; }
}
@container main (max-width: 420px) {
  .dr-pf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-pf-fields > .dr-pf-in:first-child { grid-column: 1 / -1; }   /* Datum über die ganze Breite */
  .dr-pf-axis { font-size: 9.5px; }
}
/* Handy: Felder 44 px hoch und 16 px Schrift (sonst zoomt iOS beim Tippen hinein) */
@media (max-width: 720px) {
  .dr-pf-in input, .dr-tx-f input, .dr-tx-f select, .dr-ord-search input, .dr-bt input[type=date], .dr-ord-f input[type=date] { height: 44px; font-size: 16px; }
  .dr-ord-q, .dr-tx-h .btn { min-height: 40px; }
}

/* ---------- T7c Konto (Reiter „Anmelden“, konto.js): Karte mit Formularen (Anmelden, Registrieren, Passwort vergessen …),
   Captcha-Kästchen (Rechenaufgabe statt Bilderrätsel), Passwort-Stärke, „Mein Konto“; Admin-Kasten mit Konten und E-Mail-Versand */
.ko { display: grid; justify-items: center; gap: 18px; padding: 4vh 0 32px; }
.ko-card { position: relative; width: min(100%, 440px); padding: 30px 30px 26px; border: 1px solid var(--rule); border-radius: var(--r-xl);
           background: var(--panel); box-shadow: var(--shadow); }
.ko-wait { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.ko-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background: var(--ink); color: var(--on-ink); }
.ko-mark .ic { width: 24px; height: 24px; }
.ko-card h2, .ko-me h2 { margin: 0; font: 600 28px/1.1 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.ko-sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.ko-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 20px; }
.ko-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ko-msg { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 9px; margin: 18px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
          background: var(--sunk); color: var(--text); font-size: 13.5px; line-height: 1.45; }
.ko-msg > span { flex: 1; min-width: 0; }
.ko-msg .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.ko-msg[data-kind="ok"] { background: var(--tone-good); color: var(--good-ink); }
.ko-msg[data-kind="err"] { background: var(--tone-bad); color: var(--bad-ink); }
.ko-msg .ko-link { color: inherit; }
.ko-card form { display: grid; gap: 14px; margin-top: 20px; }
.ko-f { display: grid; gap: 6px; min-width: 0; }
.ko-f > label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ko-f > label em { font-style: normal; font-weight: 500; color: var(--faint); }
.ko-f input { width: 100%; height: 42px; font-size: 16px; }   /* 16 px: iPhone zoomt sonst beim Antippen */
.ko-pw { position: relative; display: block; }
.ko-pw input { padding-right: 46px; }
.ko-eye { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
          border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: color var(--t-fast), background-color var(--t-fast); }
.ko-eye .ic { width: 18px; height: 18px; }
.ko-eye[aria-pressed="true"] { color: var(--accent); }
/* Stärke: vier Striche (1 rot, 2 gelb, 3–4 grün), darunter der Hinweis */
.ko-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ko-meter i { height: 4px; border-radius: 99px; background: var(--rule-2); transition: background-color var(--t-fast); }
.ko-meter b { grid-column: 1 / -1; margin-top: 2px; color: var(--faint); font-size: 12px; font-weight: 500; }
.ko-meter[data-level="1"] i:first-child { background: var(--bad); }
.ko-meter[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.ko-meter[data-level="3"] i:nth-child(-n+3), .ko-meter[data-level="4"] i { background: var(--good); }
.ko-meter[data-level="1"] b { color: var(--bad-ink); }
.ko-meter[data-level="2"] b { color: var(--warn-ink); }
.ko-meter:is([data-level="3"], [data-level="4"]) b { color: var(--good-ink); }
.ko-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.ko-chk { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; cursor: pointer; }
.ko-chk input { flex: none; width: 17px; height: 17px; margin: 0; }
.ko-accept { align-items: flex-start; line-height: 1.45; }
.ko-accept input { margin-top: 1px; }
.ko-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline;
           text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; }
.ko-go { width: 100%; height: 44px; font-size: 14px; }
.ko-go .ic { width: 16px; height: 16px; }
.ko-alt { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.ko-note { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk);
           color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ko-note .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.ko-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* Fallen-Feld für Bots */
/* Captcha: Kästchen → dreht sich (rechnet) → grüner Haken */
.ko-cap { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sunk); }
.ko-cap-box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid var(--border-2); border-radius: 7px;
              background: var(--panel); color: transparent; cursor: pointer;
              transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), border-radius var(--t-fast); }
.ko-cap-box .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.ko-cap[data-cap="run"] .ko-cap-box { border-color: var(--rule-2); border-top-color: var(--accent); border-radius: 50%; cursor: progress; animation: ko-spin .8s linear infinite; }
.ko-cap[data-cap="ok"] .ko-cap-box { border-color: var(--good); background: var(--good); color: var(--panel); cursor: default; }
.ko-cap[data-cap="err"] .ko-cap-box { border-color: var(--bad); }
.ko-cap-t { flex: 1; min-width: 0; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ko-cap[data-cap="err"] .ko-cap-t { color: var(--bad-ink); }
.ko-cap-by { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--faint); font: 600 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ko-cap-by .ic { width: 14px; height: 14px; }
@keyframes ko-spin { to { rotate: 360deg; } }
.ko-spin { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
           vertical-align: -3px; animation: ko-spin .8s linear infinite; }
/* E-Mail verschickt / Link wird bestätigt */
.ko-sent { display: grid; justify-items: center; gap: 10px; margin-top: 18px; text-align: center; }
.ko-sent-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ko-sent-ic .ic { width: 28px; height: 28px; }
.ko-sent-ic .ko-spin { width: 24px; height: 24px; }
.ko-sent p { margin: 0; color: var(--text); line-height: 1.55; text-wrap: pretty; }
.ko-sent p.ko-small { color: var(--muted); font-size: 13px; }
.ko-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ko-sent .ko-acts { justify-content: center; margin-top: 6px; }
.ko-foot { max-width: 440px; margin: 0; color: var(--faint); font-size: 12.5px; text-align: center; }
.ko-foot a { color: var(--muted); }
/* öffentliche Seite ohne Konto: was ein Konto bringt (eigene Daten je Konto, kontodaten.py) */
.ko-plus { width: min(100%, 440px); padding: 18px 22px; border: 1px dashed var(--rule); border-radius: var(--r-lg); color: var(--muted); }
.ko-plus h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text); font-size: 14px; }
.ko-plus ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ko-plus li { display: flex; align-items: flex-start; gap: 10px; }
.ko-plus li .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-2); }
.ko-plus p { margin: 12px 0 0; color: var(--faint); font-size: 12px; }
/* Mein Konto */
.ko-me { display: flex; flex-direction: column; width: min(100%, 640px); }
.ko-me > * + * { margin-top: 16px; }
.ko-me > .ko-live:empty { margin-top: 0; }   /* leerer Meldungs-Bereich ohne Abstand */
.ko-me-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.ko-ava { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
          font: 600 26px/1 var(--serif); }
.ko-me-id { flex: 1; min-width: 0; }
.ko-me-id p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.ko-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tone-good); color: var(--good-ink);
            font-size: 12px; font-weight: 600; }
.ko-badge .ic { width: 15px; height: 15px; }
.ko-me .ko-msg { margin: 0; }
.ko-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-lg);
            background: var(--rule); }
.ko-facts div { padding: 12px 16px; background: var(--panel); }
.ko-facts dt { color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ko-facts dd { margin: 4px 0 0; font-weight: 600; }
.ko-sec { padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.ko-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.ko-sec h3 .ic { width: 17px; height: 17px; color: var(--accent); }
.ko-sec > p { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.ko-sec form { display: grid; gap: 12px; max-width: 380px; }
.ko-danger h3 .ic { color: var(--bad); }
.ko-del { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: none; color: var(--bad-ink); }
/* Admin: Konten und E-Mail-Versand */
.ko-admin { width: min(100%, 640px); padding: 16px 20px; border: 1px dashed var(--rule-2); border-radius: var(--r-lg); color: var(--muted); font-size: 13.5px; }
.ko-admin h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; color: var(--text); font-size: 14px; }
.ko-admin h3 .ic { width: 16px; height: 16px; }
.ko-admin h3 span { color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ko-admin p { margin: 4px 0; line-height: 1.5; }
.ko-admin b { color: var(--text); }
.ko-privacy { font-size: 14px; line-height: 1.6; }
.ko-privacy ul { margin: 10px 0; padding-left: 20px; }
.ko-privacy li + li { margin-top: 6px; }
@media (hover: hover) {
  .ko-eye:hover { color: var(--text); background: var(--hl); }
  .ko-cap[data-cap="idle"] .ko-cap-box:hover, .ko-cap[data-cap="err"] .ko-cap-box:hover { border-color: var(--accent); }
  .ko-link:hover { text-decoration-color: currentColor; }
  .ko-del:hover { background: var(--tone-bad); }
}
@media (max-width: 560px) {
  .ko { padding-top: 8px; }
  .ko-card { padding: 24px 18px 20px; border-radius: var(--r-lg); }
  .ko-facts { grid-template-columns: 1fr; }
  .ko-sec { padding: 18px 16px; }
  .ko-cap-by { display: none; }
}

/* ---------- T7d Rookie-Coin (Reiter „Coin“, coin.js): Kopf mit Kurs und Links, Kasse | Rookie-Pass (schmal untereinander),
   Werkzeuge, Ausgaben | Gebühren, Regeln der Kasse; „Verwalten“ nur auf der Admin-Seite. Präfix cn-, Farben nur über Variablen */
.cn { display: grid; gap: var(--s4); padding-bottom: var(--s6); }
.cn-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
.cn > .cn-wait { justify-content: center; padding: 8vh 0; }
.cn-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.cn-stand { color: var(--muted); font-size: 12px; }
p.cn-stand { margin: 0; }
/* Kopf */
.cn-hero { display: grid; gap: var(--s4); min-width: 0; padding: 24px 26px; border: 1px solid var(--rule); border-radius: var(--r-xl);
           background: var(--panel); box-shadow: var(--shadow-sm); }
.cn-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cn-id > div { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.cn-img { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
          background: var(--ink); color: var(--on-ink); }
.cn-img .ic { width: 26px; height: 26px; }
.cn-id h2 { margin: 0; font: 600 var(--fs-h2)/1.1 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 100; overflow-wrap: anywhere; }
.cn-id h2 span { color: var(--muted); font: 600 .6em/1 var(--mono); letter-spacing: 0; }
.cn-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted);
          font-size: 12px; font-weight: 600; }
.cn-tag .ic { width: 14px; height: 14px; }
.cn-tag.live { background: var(--tone-good); color: var(--good-ink); }
.cn-tag.soon { background: var(--tone-warn); color: var(--warn-ink); }
.cn-lead { max-width: 68ch; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.cn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--rule);
           border-radius: var(--r-lg); background: var(--rule); }
.cn-kpis > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 16px; background: var(--panel); }
.cn-kpis span, .cn-ca small, .cn-wo small, .cn-adm h3 span { color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cn-kpis b { font: 600 18px/1.25 var(--mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cn-kpis small { color: var(--muted); font-size: 12px; }
.cn-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cn-ca, .cn-wo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0; }
.cn-ca { margin-left: auto; }
/* Adresse: Mono-Schild, Kopieren, Solscan */
.cn-addr { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.cn-addr code { padding: 3px 8px; border-radius: var(--r-xs); background: var(--sunk); font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }
.cn-ic { position: relative; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0;
         border-radius: var(--r-xs); background: none; color: var(--muted); cursor: pointer; }
.cn-ic .ic { width: 15px; height: 15px; }
/* Abschnitte */
.cn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); }
.cn-sec { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r-lg);
          background: var(--panel); }
.cn-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 15px; }
.cn-sec h3 .ic { width: 17px; height: 17px; color: var(--accent); }
.cn-sec > p { margin: 0; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.cn-sec .kv { font-size: 13.5px; }
.cn-big { display: grid; gap: 2px; }
.cn-big b { font: 600 30px/1.1 var(--mono); letter-spacing: -.03em; overflow-wrap: anywhere; }
.cn-big small { color: var(--muted); font-size: 13px; }
.cn-msg { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk);
          font-size: 13.5px; line-height: 1.45; }
.cn-msg .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cn-msg.ok { background: var(--tone-good); color: var(--good-ink); }
.cn-msg.err { background: var(--tone-bad); color: var(--bad-ink); }
.cn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Rookie-Pass: verbundene Wallet (grün, wenn der Pass gilt) und Vergleich der Grenzen */
.cn-wallet { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sunk); }
.cn-wallet.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--tone-good); }
.cn-w-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.cn-w-head > .ic { width: 18px; height: 18px; color: var(--accent); }
.cn-wallet.ok .cn-w-head > .ic { color: var(--good-ink); }
.cn-w-head .cn-addr { margin-left: auto; }
.cn-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.cn-tab th, .cn-tab td { padding: 8px 6px; border-bottom: 1px solid var(--rule); text-align: right; font-variant-numeric: tabular-nums;
                         white-space: normal; }   /* Grundstil: nowrap – hier dürfen Kopf und Zeilentitel umbrechen */
.cn-tab thead th { color: var(--muted); font: 600 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: bottom; }
.cn-tab tbody th { padding-left: 0; color: var(--muted); font-weight: 500; text-align: left; }
.cn-tab tbody tr:last-child > * { border-bottom: 0; }
.cn-tab td b { color: var(--good-ink); }
/* Listen: Datum · Text · Betrag · Löschen (Admin) */
.cn-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.cn-rows li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.cn-rows li:last-child { border-bottom: 0; }
.cn-rows time { flex: none; color: var(--muted); font: 500 12.5px/1.4 var(--mono); }
.cn-r-main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; overflow-wrap: anywhere; }
.cn-rows b { display: grid; justify-items: end; flex: none; font: 600 13.5px/1.35 var(--mono); text-align: right; }
.cn-rows b small { color: var(--muted); font: 500 11.5px/1.3 var(--font); }
.cn-tx { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.cn-tx .ic { width: 13px; height: 13px; }
.cn-mehr { justify-self: start; }
.cn-regeln ol { display: grid; gap: 8px; margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.55; }
.cn-foot { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.cn-foot .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.cn-foot b { color: var(--text); }
/* Verwalten (nur Admin): Einstellungen oben, darunter die drei Eintrage-Formulare */
.cn-adm { border-style: dashed; border-color: var(--rule-2); }
.cn-form { display: grid; align-content: start; gap: 12px; min-width: 0; }
.cn-adm > .cn-form { max-width: 640px; }
.cn-form h4 { margin: 0; font-size: 13.5px; }
.cn-form .ko-f input { height: 40px; }
.cn-form input.mono { font-family: var(--mono); font-size: 14px; }
.cn-form .ko-f > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cn-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-adm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (hover: hover) {
  .cn-ic:hover { background: var(--hl); color: var(--text); }
  .cn-tx:hover { text-decoration: underline; }
}
/* Handy: Tippziele mindestens 44 px (die kleinen Symbol-Knöpfe bekommen eine unsichtbare, größere Trefferfläche) */
@media (max-width: 720px) {
  .cn-ic::after { content: ""; position: absolute; inset: -7px; }
}
/* Breiten (Container „main“) */
@container main (max-width: 1100px) { .cn-adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container main (max-width: 860px) {
  .cn-cols, .cn-adm-grid { grid-template-columns: minmax(0, 1fr); }
  .cn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (max-width: 520px) {
  .cn-hero { padding: 18px 16px; border-radius: var(--r-lg); }
  .cn-sec { padding: 16px; }
  .cn-ca, .cn-w-head .cn-addr { margin-left: 0; }
  .cn-2 { grid-template-columns: minmax(0, 1fr); }
  .cn-kpis > div { padding: 10px 12px; }
  .cn-kpis b { font-size: 16px; }
  .cn-big b { font-size: 26px; }
}

/* ---------- T7e 𝕏-Radar: Richtung der Erwähnungen (x_radar.richtung) – neu/steigt grün, flaut ab gelb, still blass */
.xtrend { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--r-xs); vertical-align: middle;
          font: 600 11px/1.4 var(--font); color: var(--muted); background: var(--sunk); }
.xtrend .ic { width: 11px; height: 11px; }
.xtrend:is([data-r="neu"], [data-r="steigt"]) { color: var(--good-ink); background: var(--tone-good); }
.xtrend[data-r="flaut ab"] { color: var(--warn-ink); background: var(--tone-warn); }
.xtrend[data-r="still"] { color: var(--faint); }
.xtrend-note { margin: 0 0 10px; }

/* ---------- T7f Langfristig (langfrist.js): Karten mit Score, Kennzahlen, Stärken/Risiken und der Analyse in Worten
   (aufklappbar: dafür/dagegen, Score-Teile mit Balken, Links). Score-Farbe aus scoreColor() über --c */
.lt-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; }
.lt-note .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.lt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.lt-card { display: grid; gap: 12px; min-width: 0; padding: 16px; }
.lt-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lt-head .lt-icon { width: 40px; height: 40px; border-radius: 50%; }
.lt-name { display: grid; flex: 1; gap: 2px; min-width: 0; }
.lt-name b { font: 600 18px/1.2 var(--serif); overflow-wrap: anywhere; }
.lt-name small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lt-score { display: grid; flex: none; justify-items: center; gap: 2px; min-width: 66px; padding: 6px 10px; border-radius: var(--r-sm);
            color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.lt-score b { font: 700 24px/1 var(--mono); }
.lt-score span { font: 600 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--rule);
           border-radius: var(--r-sm); background: var(--rule); }
.lt-kpis > div { display: grid; gap: 3px; min-width: 0; padding: 8px 10px; background: var(--panel); }
.lt-kpis span { color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lt-kpis b { font: 600 14px/1.25 var(--mono); overflow-wrap: anywhere; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: var(--r-xs); font: 500 12px/1.35 var(--font); }
.lt-chip .ic { flex: none; width: 12px; height: 12px; }
.lt-chip.plus { color: var(--good-ink); background: var(--tone-good); }
.lt-chip.minus { color: var(--bad-ink); background: var(--tone-bad); }
.lt-text { margin: 0; line-height: 1.55; }
.lt-mehr { justify-self: start; }
.lt-detail { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lt-detail h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; }
.lt-detail h4 .ic { width: 14px; height: 14px; }
.lt-detail ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; line-height: 1.45; }
.lt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lt-teile { display: grid; gap: 8px; }
.lt-teil { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; align-items: center; gap: 4px 10px; }
.lt-teil span { font: 600 12px/1.3 var(--font); }
.lt-teil em { font: 600 12px/1 var(--mono); font-style: normal; text-align: right; }
.lt-teil small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.lt-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sunk); }
.lt-bar b { display: block; height: 100%; border-radius: inherit; background: var(--accent-2); }
.lt-hinweis { margin: 0; font-size: 12px; }
.lt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.lt-links small { margin-left: auto; color: var(--faint); }
@media (max-width: 720px) {
  .lt-cols { grid-template-columns: minmax(0, 1fr); }
  .lt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- T7g RookieManager (Social Media, manager.js): Bühne mit Gruß und Zahlen, Formular „Neuer Post“ in Schritten
   (Netzwerk-Kacheln, Text, Ablage, Optionen, Wann), Live-Vorschau, Geplant/Verlauf als Liste mit Statusleiste, Konten.
   Präfix mg- nur hier; rohe Farben gibt es hier nicht, nur var() und color-mix(). Weniger Bewegung: T9 nimmt sie weg. */
.mg { display: grid; gap: 20px; min-width: 0; --rm-halo: var(--panel); }
.mg-karte { min-width: 0; padding: 22px; border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--panel);
  box-shadow: var(--shadow-sm); animation: mg-auf .5s var(--ease) both; }
.mg-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mg-raster-gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-spalte { display: grid; gap: 20px; min-width: 0; }
.mg-spalte > .mg-karte:nth-child(2) { animation-delay: .08s; }
.mg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mg-kopf h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 20px/1.2 var(--serif);
  font-variation-settings: "SOFT" 100; letter-spacing: -.02em; }
.mg-kopf h3 .ic { color: var(--accent-2); }
.mg-ueber { margin: 0; font: 600 10.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.mg-leise { margin: 0; color: var(--muted); }
.mg-klein { font-size: 12.5px; color: var(--muted); }
.mg-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mg-zeile input { flex: 1 1 240px; min-width: 0; }
.mg-meldung { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; }
.mg-meldung.bad, .mg-hinweise .bad { background: var(--tone-bad); color: var(--bad-ink); }
.mg-nichts { margin: 0; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-md); text-align: center; color: var(--muted); font-size: 13px; }
.btn.mg-bad { color: var(--bad-ink); }

/* Bühne: Gruß links, drei Zahlen rechts; großer Ring als Anklang an das Logo */
.mg-buehne { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 32px;
  padding: 26px 28px; border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  background: radial-gradient(120% 150% at 0% 0%, var(--accent-soft) 0%, transparent 55%), linear-gradient(135deg, var(--panel), var(--panel-2));
  animation: mg-auf .55s var(--ease) both; }
.mg-buehne::after { content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  border: 22px solid color-mix(in srgb, var(--accent-2) 13%, transparent); animation: mg-drehen 60s linear infinite; }
.mg-gruss { position: relative; z-index: 1; }
.mg-gruss h2 { margin: 6px 0 8px; font: 600 clamp(26px, 3.4vw, 40px)/1.08 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.03em; }
.mg-zahlen { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.mg-zahl { display: flex; align-items: center; gap: 12px; min-width: 142px; padding: 11px 15px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 82%, transparent); color: var(--text); font: inherit; font-size: 12px;
  text-align: left; line-height: 1.25; transition: translate var(--t-in) var(--spring), box-shadow var(--t-in); }
button.mg-zahl { cursor: pointer; }
button.mg-zahl:hover { translate: 0 -2px; box-shadow: var(--shadow); }
.mg-zahl b { display: block; font: 700 22px/1.05 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mg-zahl > span:last-child { color: var(--muted); }
.mg-zahl > span:last-child b { color: var(--text); }
.mg-ring { position: relative; display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: conic-gradient(var(--accent-2) calc(var(--anteil, 0) * 1turn), var(--line) 0); }
.mg-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }
.mg-ring b { position: relative; font-size: 13.5px; }
.mg-zahl-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }

/* Formular „Neuer Post“: nummerierte Schritte */
.mg-schreiben { display: grid; gap: 20px; counter-reset: mg-schritt; }
.mg-schreiben .mg-kopf { margin-bottom: 0; }
.mg-feld { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 13px; color: var(--muted); }
.mg-feld legend, .mg-feldkopf { display: flex; align-items: center; margin: 0 0 2px; padding: 0; font-weight: 650; font-size: 13.5px; color: var(--text); }
.mg-nr::before { counter-increment: mg-schritt; content: counter(mg-schritt); display: inline-grid; place-items: center; flex: none; width: 21px; height: 21px;
  margin-right: 8px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 11px/1 var(--mono); }
.mg-zaehler { margin-left: auto; padding: 2px 9px; border-radius: 99px; background: var(--sunk); font: 500 11.5px/1.6 var(--mono); color: var(--muted); }
.mg-zaehler.bad { background: var(--tone-bad); color: var(--bad-ink); }
.mg-schreiben textarea { width: 100%; min-height: 128px; }
.mg-eigene summary { width: fit-content; cursor: pointer; font-size: 13px; color: var(--muted); }
.mg-eigene summary:hover { color: var(--text); }
.mg-eigene-felder { display: grid; gap: 10px; margin-top: 10px; }
.mg-eigene-felder textarea { min-height: 64px; }
.mg-profilwahl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Netzwerk-Kacheln: Zeichen bzw. Profilbild, Name, Konto; gewählt = Karamell mit Haken; nicht verbunden = gestrichelt */
.mg-netze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mg-netz { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; cursor: pointer; user-select: none;
  border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--sunk); color: var(--text);
  transition: translate var(--t-in) var(--spring), border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-in); }
.mg-netz:hover { translate: 0 -2px; border-color: var(--line-2); box-shadow: var(--shadow); }
.mg-netz:active { scale: .98; }
.mg-netz input { position: absolute; opacity: 0; pointer-events: none; }
.mg-netz-ic { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); transition: background-color var(--t-fast), color var(--t-fast); }
.mg-netz-ic .ic { width: 22px; height: 22px; }
.mg-netz-ic img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.mg-netz-ic img + .ic { position: absolute; right: -6px; bottom: -6px; width: 21px; height: 21px; padding: 3px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.mg-netz-txt { display: grid; gap: 1px; min-width: 0; }
.mg-netz-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.mg-netz-txt small.warn { color: var(--warn-ink); }
.mg-haken { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); opacity: 0; scale: .3; rotate: -40deg;
  transition: opacity var(--t-fast), scale var(--t-in) var(--spring), rotate var(--t-in) var(--spring); }
.mg-haken .ic { width: 13px; height: 13px; stroke-width: 2.8; }
.mg-netz.an { border-color: var(--accent-2); background: var(--tint); box-shadow: 0 0 0 4px var(--hl); }
.mg-netz.an .mg-netz-ic { border-color: transparent; background: var(--ink); color: var(--on-ink); }
.mg-netz.an .mg-haken { opacity: 1; scale: 1; rotate: 0deg; }
.mg-netz.aus { border-style: dashed; background: transparent; }
.mg-netz.aus .mg-netz-ic, .mg-netz.aus b { opacity: .5; }
.mg-netz.aus small { color: var(--accent); font-weight: 600; }
.mg-netz.aus:hover { border-color: var(--accent-2); }
.mg-netz:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.mg-verbinden { justify-content: space-between; margin-top: 4px; }

/* Ablage für Bilder und Videos, Vorschaubilder mit Fortschritt */
.mg-ablage { display: grid; gap: 6px; justify-items: center; padding: 24px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--sunk); color: var(--text); text-align: center; cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), scale var(--t-in) var(--spring); }
.mg-ablage:hover { border-color: var(--accent-2); }
.mg-ablage.drueber { border-color: var(--accent-2); background: var(--tint); scale: 1.015; }
.mg-ablage input { display: none; }
.mg-ablage-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: var(--panel);
  color: var(--accent); box-shadow: var(--shadow-sm); transition: translate var(--t-in) var(--spring); }
.mg-ablage:hover .mg-ablage-ic { translate: 0 -4px; }
.mg-ablage-ic .ic { width: 22px; height: 22px; }
.mg-medien { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-medien:empty { display: none; }
.mg-medium { position: relative; width: 104px; height: 104px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sunk); }
.mg-medium img, .mg-medium video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-medium.fehler { outline: 2px solid var(--bad); }
.mg-weg { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text); font-size: 15px; line-height: 24px; }
.mg-art { position: absolute; left: 5px; bottom: 7px; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 11px; font-weight: 600; color: var(--text); }
.mg-balken { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--grad); transition: width .2s; }
.mg-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-optionen:not(:has(label:not([hidden]))) { display: none; }

/* Wann? als Umschalter, darunter Datum und Uhrzeit */
.mg-wann { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mg-wann legend { width: 100%; }
.mg-umschalter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--sunk); }
.mg-umschalter label { position: relative; padding: 7px 20px; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.mg-umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.mg-umschalter label:hover { color: var(--text); }
.mg-umschalter label:has(input:checked) { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.mg-umschalter label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
.mg input[type=datetime-local] { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13.5px; }
.mg input[type=datetime-local]:focus { outline: 2px solid transparent; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }
.mg-hinweise { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mg-hinweise:empty { display: none; }
.mg-hinweise li { padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; animation: mg-auf .3s var(--ease) both; }
.mg-hinweise .warn { background: var(--tone-warn); color: var(--warn-ink); }

/* Posten: Verlauf mit Glanzstreifen und Pfeil */
.mg-posten { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 22px;
  border: 0; border-radius: var(--r-lg); background: var(--ink); color: var(--on-ink); font: 600 16px/1 var(--font); cursor: pointer;
  box-shadow: 0 12px 26px -14px var(--glow); transition: translate var(--t-in) var(--spring), box-shadow var(--t-in), opacity var(--t-fast); }
.mg-posten::after { content: "→"; font-size: 18px; transition: translate var(--t-in) var(--spring); }
.mg-posten::before { content: ""; position: absolute; inset: 0; translate: -110% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--on-ink) 26%, transparent) 50%, transparent 70%); transition: translate .8s var(--ease); }
.mg-posten:hover:not(:disabled) { translate: 0 -1px; box-shadow: var(--shadow); }
.mg-posten:hover:not(:disabled)::after { translate: 5px 0; }
.mg-posten:hover:not(:disabled)::before { translate: 110% 0; }
.mg-posten:disabled { opacity: .45; cursor: not-allowed; }
.mg-posten:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Vorschau */
.mg-vorschau { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sunk); }
.mg-vor-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mg-avatar { --rm-halo: var(--accent-soft); display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%;
  background: var(--accent-soft); color: var(--text); }
.mg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-avatar .ic { width: 28px; height: 28px; }
.mg-vor-wer { display: grid; min-width: 0; line-height: 1.3; }
.mg-vor-wer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.mg-vor-medium { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 340px; border-radius: var(--r-md); background: var(--panel-2); }
.mg-vor-medium img, .mg-vor-medium video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-mehr { position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 70%, transparent);
  color: var(--on-ink); font-size: 12px; font-weight: 700; }
.mg-vor-text { margin: 0; max-height: 10.5em; overflow: hidden; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mg-vor-text.leer { color: var(--muted); font-style: italic; }
.mg-tag { color: var(--accent); font-weight: 600; }

/* Geplant, Verlauf und „Zuletzt“: Liste mit farbiger Statusleiste links */
.mg-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-marke { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel); font-size: 12px; color: var(--text); }
.mg-marke .ic { width: 13px; height: 13px; }
.mg-marke.ok { border-color: transparent; background: var(--tone-good); color: var(--good-ink); }
.mg-marke.bad { border-color: transparent; background: var(--tone-bad); color: var(--bad-ink); }
.mg-marke a { color: inherit; }
.mg-liste { display: grid; gap: 10px; }
.mg-eintrag { position: relative; display: grid; gap: 7px; overflow: hidden; padding: 12px 14px 12px 17px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--sunk); transition: translate var(--t-in) var(--spring), box-shadow var(--t-in); }
.mg-eintrag:hover { translate: 0 -1px; box-shadow: var(--shadow-sm); }
.mg-eintrag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.mg-eintrag.s-ok::before { background: var(--good); }
.mg-eintrag.s-warn::before { background: var(--accent-2); }
.mg-eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.mg-eintrag.s-ok .mg-eintrag-kopf b { color: var(--good-ink); }
.mg-eintrag.s-warn .mg-eintrag-kopf b { color: var(--warn-ink); }
.mg-eintrag-text { margin: 0; max-height: 4.5em; overflow: hidden; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mg-eintrag-fehler { margin: 0; font-size: 12px; color: var(--bad-ink); overflow-wrap: anywhere; }
.mg-knoepfe { display: flex; gap: 8px; }

/* Konten */
.mg-konten { display: grid; gap: 10px; margin-bottom: 16px; }
.mg-konto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sunk); }
.mg-konto.aus { border-style: dashed; background: transparent; }
.mg-konto.aus .mg-netz-ic { opacity: .5; }
.mg-konto .mg-netz-txt { flex: 1; }
.mg-punkt { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--faint); }
.mg-punkt.ok { background: var(--good); animation: mg-puls 2.6s var(--ease) infinite; }
.mg-punkt.warn { background: var(--warn); }

/* Ersteinrichtung und Warten */
.mg-start { display: grid; gap: 14px; max-width: 660px; margin: 0 auto; }
.mg-start h3 { margin: 0; font: 600 20px/1.2 var(--serif); }
.mg-start-kopf { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.mg-start-logo .ic { width: 76px; height: 76px; }
.mg-wort { margin: 4px 0; font: 400 clamp(30px, 4.5vw, 42px)/1 var(--font); letter-spacing: -.03em; }
.mg-wort b { font-weight: 700; }
.mg-schritte { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: mg-punkt; }
.mg-schritte li { position: relative; padding-left: 38px; counter-increment: mg-punkt; }
.mg-schritte li::before { content: counter(mg-punkt); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 12px/1 var(--mono); }
.mg-leer { justify-items: center; padding: 40px 16px; text-align: center; color: var(--muted); }
.mg-leer-ic .ic { width: 56px; height: 56px; color: var(--text); }
.mg-leer p { margin: 0; }

@keyframes mg-auf { from { opacity: 0; transform: translateY(12px); } }
@keyframes mg-drehen { to { rotate: 360deg; } }
@keyframes mg-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@container main (max-width: 900px) {
  .mg-raster, .mg-raster-gleich, .mg-buehne { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mg-karte { padding: 18px; }
  .mg-buehne { padding: 20px; }
  .mg-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mg-zahl { flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px; }
  .mg-netze, .mg-optionen { grid-template-columns: minmax(0, 1fr); }
  .mg-start-kopf { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after, .mg { animation: none !important; transition: none !important; }
}

/* ---------- T7h Weiterleitungen als Logo (logoLink in grundlagen.js, Bilder in web/logos): quadratisch, Logo etwas größer als Textsymbole.
   In Gruppen (.actions, .rowact, .btn …) bestimmen deren Regeln Rahmen und Höhe – hier nur Breite und Logo-Größe */
.logo-a { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px; padding: 0 6px; border-radius: var(--r-sm);
          color: var(--muted); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.logo-a .ic { width: 17px; height: 17px; }
.logo-img { display: block; width: 18px; height: 18px; flex: none; object-fit: contain; border-radius: 4px;
            padding: 1px; box-sizing: content-box; background: var(--logo-grund); }
.fomo-btn.big .logo-img { width: 20px; height: 20px; }
.logo-a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
@media (hover: hover) { .logo-a:hover { background: var(--hl); color: var(--text); } }

/* ---------- T8 Ebenen: Inspektor, Bericht, Bühne, Palette */
/* Fenster werden weiter nur über das hidden-Attribut gesteuert. Ebenen: Pop-up 85 < Bericht 88 < Bühne 90 < Schnellkauf 95 < Palette 96.
   Inspektor (.insp) = Pop-up, Bericht, Schnellkauf; fährt von rechts herein. Ab 1280 px (nur mit :has()) liegen Pop-up und Bericht
   als Seitenpanel neben der Arbeitsfläche („Schiebe-Modus“, setzt --deck-r), sonst überlagern sie mit Abdunkeln (ohne Unschärfe).
   Achtung: .gs-box trägt auch pop-box und .gs-body auch pop-body – Inspektor-Regeln deshalb immer mit .insp eingrenzen. */

/* ---------- Gemeinsame Hülle: display mit allow-discrete (bleibt beim Schließen kurz stehen), Abdunkeln blendet weich */
.chartmodal { position: fixed; inset: 0; display: grid; padding: 12px; background-color: transparent;
              transition: background-color var(--t-out);
              transition: display var(--t-out) allow-discrete, background-color var(--t-out); }
.chartmodal:not([hidden]) { background-color: var(--scrim); }
.chartmodal[hidden] { pointer-events: none; }   /* beim Ausblenden (allow-discrete) keine Klicks mehr abfangen */
@starting-style { .chartmodal:not([hidden]) { background-color: transparent; } }
#popModal { z-index: 85; }
#repModal { z-index: 88; }
#chartModal { z-index: 90; }
#buyModal { z-index: 95; }
#searchModal { z-index: 96; }
/* Seite dahinter sperren – nur bei deckenden Ebenen (Pop-up/Bericht sperren erst unterhalb des Schiebe-Modus, siehe Ende) */
html:has(#chartModal:not([hidden]), #buyModal:not([hidden]), #searchModal:not([hidden]), #splash:not([hidden])) { overflow: hidden; }
/* Schließen-Knöpfe aller Fenster: rund, durchsichtig */
#popClose, #repClose, #buyClose, #cmClose, #gsClose {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); font: 500 15px/1 var(--font);
  cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }

/* ---------- Inspektor: Kasten fährt von rechts herein (Überlagerungs-Modus ist der Grundzustand) */
.insp { justify-items: end; }
.insp .pop-box, .insp .rep-box {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg); box-shadow: var(--shadow-lg);
  transform-origin: 0 50%; transition: translate var(--t-in) var(--spring), scale .3s var(--ease), opacity var(--t-out); }
@starting-style { .insp:not([hidden]) .pop-box, .insp:not([hidden]) .rep-box { translate: 100% 0; opacity: 0; } }
/* kurz, weil closePop() den Inhalt sofort leert; ein Coin-Wechsel (hidden an/aus im selben Durchlauf) löst nichts aus */
.insp[hidden] .pop-box, .insp[hidden] .rep-box { translate: 32px 0; opacity: 0; transition-duration: .16s; transition-timing-function: var(--out); }
#popModal .pop-box { width: min(520px, 100% - 48px); }
.insp-wide .rep-box { width: min(760px, 100% - 24px); }
/* Schnellkauf: schmaler „Beleg“ rechts oben, so hoch wie sein Inhalt */
.insp-narrow .pop-box { width: min(var(--buy-w), 100%); height: auto; max-height: 100%; align-self: start; background: var(--panel); }
/* Abdunkeln des Pop-ups, wenn der Bericht darüber liegt (Stapel, siehe Schiebe-Modus) */
.insp .pop-box::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--scrim);
                        opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }

/* ---------- Kopf: Titel in Fraunces, Schließen rund; Lese-Fortschritt als Linie an der Unterkante */
.pop-head { position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 10px 0 20px;
            border-bottom: 1px solid var(--rule); background: var(--bg); }
.pop-head b { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 20px/1.2 var(--serif); font-variation-settings: "SOFT" 100;
              letter-spacing: -.03em; }
.pop-head b .ic { width: 18px; height: 18px; color: var(--accent); }
.insp-narrow .pop-head { background: var(--panel); }
.rep-head { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 56px;
            padding: 12px 60px 12px 20px; border-bottom: 1px solid var(--rule); background: var(--bg); }
.rep-head .icon { width: 36px; height: 36px; }
.rep-head .title { flex: 1 1 160px; min-width: 0; }
.rep-head .sym { font: 600 22px/1.15 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.035em; }
.rep-head .sub { font-size: 12.5px; color: var(--muted); }
.rep-head .actions { position: static; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rep-head .actions button, .rep-head .actions a {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: 600 12.5px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast); }
.rep-head .actions .ic { width: 15px; height: 15px; }
#repClose { position: absolute; top: 8px; right: 10px; }   /* immer oben rechts, auch wenn die Knöpfe umbrechen */
@supports (animation-timeline: scroll()) {
  .insp .pop-box, .insp .rep-box { timeline-scope: --insp-scroll; }
  .insp .pop-body, .insp .rep-body { scroll-timeline: --insp-scroll block; }
  .insp .pop-head::after, .insp .rep-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-2); transform-origin: 0 50%;
    scale: 0 1; pointer-events: none; animation: insp-read linear both; animation-timeline: --insp-scroll; }
}
/* eigene Keyframes: Endwert ausdrücklich, damit die Linie ohne Scrollweg (Zeitleiste inaktiv) unsichtbar bleibt */
@keyframes insp-read { from { scale: 0 1; } to { scale: 1 1; } }

/* ---------- Inhalt (eigener Container, unbenannt – Bausteine richten sich nach der Fensterbreite) */
.pop-body, .rep-body { container-type: inline-size; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid;
                       grid-auto-rows: max-content; align-content: start; }
.insp .pop-body, .insp .rep-body { flex: 1 1 auto; }
.insp:not(.insp-narrow) .pop-body, .insp .rep-body { gap: 16px; padding: 20px; }

/* ---------- Bericht: Kernaussage, Anzeigen, Für/Gegen, nummerierte Kapitel */
.rep-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px 28px; padding: 22px 24px 22px 28px;
            border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: inset 4px 0 0 var(--rc, var(--accent)); }
.rep-hero.r-low { --rc: var(--good); }
.rep-hero.r-medium { --rc: var(--warn); }
.rep-hero.r-high, .rep-hero.r-extreme { --rc: var(--bad); }
.rep-hero h3 { margin: 0 0 12px; font: 500 24px/1.25 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.03em; text-wrap: balance; }
.rep-hero p { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); text-wrap: pretty; }
.rep-hero p.disc { margin: 12px 0 0; font-size: 12px; color: var(--faint); }
.gauges { display: grid; gap: 14px; align-content: center; padding-left: 24px; border-left: 1px solid var(--rule); }
.gauge span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font: 600 10.5px/1.4 var(--mono);
              letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gauge span b { font: 600 13px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--text); }
.gauge i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.gauge i u { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--gc, var(--accent-2)); }
.gauge.risk { --gc: linear-gradient(90deg, var(--good), var(--warn) 55%, var(--bad)); }
.gauge.mom { --gc: var(--accent-2); }
#repBody .gauge i u { animation: grow 1s var(--ease) both; }   /* nur im Bericht-Fenster: der Screener zeichnet alle paar Sekunden neu */
.gcount { display: flex; flex-wrap: wrap; gap: 6px; }
.gcount span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: 11.5px; font-weight: 600; }
.gcount .g { background: var(--tone-good); color: var(--good-ink); }
.gcount .w { background: var(--tone-warn); color: var(--warn-ink); }
.gcount .b { background: var(--tone-bad); color: var(--bad-ink); }
/* Für/Gegen: eine Fläche, zwei Spalten mit Haarlinie dazwischen */
.procon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: clip; border: 1px solid var(--rule); border-radius: var(--r-lg);
          background: var(--panel); }
.procon > .rep-card { border: 0; border-radius: 0; background: none; }
.procon > .rep-card + .rep-card { border-left: 1px solid var(--rule); }
.rep-card { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); }
#repBody .rep-card { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rep-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 16px/1.3 var(--serif); font-variation-settings: "SOFT" 100;
               letter-spacing: -.02em; }
.rep-card h4 .ti { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 0; background: none;
                   box-shadow: none; color: var(--accent); font-style: normal; }
.rep-card h4 .ti .ic { width: 17px; height: 17px; }
.rep-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.rep-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.rep-card li { display: flex; gap: 8px; align-items: flex-start; }
.rep-card li .ic { flex: none; margin-top: 3px; }
.rep-card.pro li .ic, .rep-card.pro h4 .ti { color: var(--good); }
.rep-card.con li .ic, .rep-card.con h4 .ti { color: var(--bad); }
.rep-card.check li .ic { color: var(--accent); }
.rep-card .siglist { margin-top: 10px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; counter-reset: kap; }
.rep-grid > .rep-card h4::before { counter-increment: kap; content: counter(kap, decimal-leading-zero); font: 600 11px/1 var(--mono);
                                   letter-spacing: .02em; color: var(--faint); }
.rep-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; font-size: 12px; color: var(--faint); }
.rep-run { display: grid; gap: 14px; justify-items: center; padding: 48px 20px; text-align: center; color: var(--muted); }
.rep-run b { font: 600 20px/1.3 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.02em; color: var(--text); }
.rep-run .steps { width: min(420px, 100%); text-align: left; }
.rep-inline { display: grid; gap: 14px; margin-bottom: 16px; }

/* ---------- Bühne (Chart): deckend, links neben einem offenen Inspektor; Container „stage“ */
.stage { container: stage / inline-size; inset: 0 var(--deck-r) 0 0; padding: 12px; }
.stage:not([hidden]) { background-color: var(--bg); }
.cm-box { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden;
          border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--panel);
          transition: scale .26s var(--ease), opacity .26s var(--ease); }
@starting-style { .stage:not([hidden]) .cm-box { scale: .985; opacity: 0; } }
.stage[hidden] .cm-box { scale: .99; opacity: 0; transition-duration: .16s; transition-timing-function: var(--out); }
.cm-head { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 56px; padding: 8px 60px 8px 20px;
           border-bottom: 1px solid var(--rule); background: var(--panel); }
.cm-title { flex: 1 1 240px; min-width: 0; }
.cm-title b { display: block; font: 600 20px/1.15 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.03em; }
.cm-title small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; color: var(--muted); }
.cm-price { display: grid; margin: 0 6px; line-height: 1.15; }
.cm-price b { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cm-price span { font: 600 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.cm-head .spacer { display: none; }
.cm-tf button { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cm-zoom button { font-weight: 700; }
#cmClose { position: absolute; top: 8px; right: 10px; }   /* immer oben rechts, auch wenn der Kopf umbricht */
.cm-head .fomo-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); font-size: 13px; }
/* Chart-Fläche und SVG */
.cm-chart { position: relative; flex: 1 1 58%; min-height: 0; background: var(--panel); touch-action: none; cursor: crosshair;
            user-select: none; -webkit-user-select: none; }
.cm-chart.grab { cursor: grabbing; }
.cm-chart > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cm-msg { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 20px; text-align: center; color: var(--muted); font-weight: 600; }
.cm-msg small { font-weight: 500; color: var(--faint); }
.cm-grid line { stroke: var(--rule); stroke-width: 1; }
.cm-axis { fill: var(--faint); font: 500 10.5px var(--mono); font-variant-numeric: tabular-nums; }
.cm-edge { fill: var(--faint); font: 600 11px var(--font); }
.cm-up { fill: var(--good); stroke: var(--good); }
.cm-dn { fill: var(--bad); stroke: var(--bad); }
.cm-vol.cm-up, .cm-vol.cm-dn { opacity: .28; stroke: none; }
.cm-last line { stroke: var(--accent); stroke-dasharray: 3 3; }
.cm-last rect { fill: var(--accent); }
.cm-last text { fill: var(--on-accent); font: 600 10.5px var(--mono); }
.cm-cross line { stroke: var(--muted); stroke-dasharray: 2 3; }
.cm-bot line { stroke-width: 1.2; }
.cm-bot text { font: 700 10.5px var(--font); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.cm-bk line { stroke: var(--accent); stroke-dasharray: 6 4; }
.cm-bk text { fill: var(--accent); }
.cm-bsl line { stroke: var(--bad); stroke-dasharray: 3 4; }
.cm-bsl text { fill: var(--bad); }
.cm-btp line { stroke: var(--good); stroke-dasharray: 3 4; }
.cm-btp text { fill: var(--good); }
.cm-tip { position: absolute; top: 10px; left: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
          background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--muted); font: 600 11.5px/1.4 var(--mono);
          font-variant-numeric: tabular-nums; pointer-events: none; }
.cm-tip:empty { display: none; }
.cm-tip b { margin-right: 2px; color: var(--text); }
.cm-live { position: absolute; right: 86px; bottom: 32px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
           border: 1px solid var(--accent); border-radius: 999px; background: var(--panel); color: var(--accent); font: 600 12px/1 var(--font); cursor: pointer; }
.cm-live .ic { width: 13px; height: 13px; rotate: 180deg; }
/* Analyse: Live-Trades und Holder-Karte (unten, ab 1100 px Bühnenbreite rechts) */
.cm-panel { display: flex; flex-direction: column; flex: 0 0 42%; min-height: 0; border-top: 1px solid var(--rule); background: var(--sunk); }
.cm-panel.shut { flex: 0 0 auto; }
.cm-ptabs { flex: none; display: flex; align-items: center; gap: 20px; min-height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--rule); }
.cm-panel.shut .cm-ptabs { border-bottom: 0; }
.cm-ptabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; border: 0; background: none;
                   color: var(--muted); font: 600 12.5px/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: color var(--t-fast); }
.cm-ptabs button .ic { width: 15px; height: 15px; }
.cm-ptabs button.on { color: var(--text); }
.cm-ptabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.cm-ptabs small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--faint); }
.cm-ptabs .cp-tog { justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.cp-tog .ic { rotate: -90deg; transition: rotate .3s var(--spring); }
.cm-panel.shut .cp-tog .ic { rotate: 90deg; }
.cm-pbody { flex: 1 1 auto; display: grid; gap: 10px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 16px; }
.cp-msg { padding: 18px; text-align: center; }
.cp-load { display: grid; gap: 8px; }
/* Live-Trades */
.tp-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: clip; border: 1px solid var(--rule);
          border-radius: var(--r-sm); background: var(--rule); }
.tp-sum > div { display: grid; gap: 1px; min-width: 0; padding: 8px 10px; background: var(--panel); }
.tp-sum span { font: 600 9.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tp-sum b { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tp-sum small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--faint); }
.tp-bar { height: 6px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--bad) 75%, transparent); }
.tp-bar i { display: block; height: 100%; background: var(--good); }
.tp-rows { display: grid; border-top: 1px solid var(--rule); }
.tp-row { display: grid; grid-template-columns: 52px 60px minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr) 22px; align-items: center;
          gap: 8px; min-height: 32px; padding: 4px 8px; border-bottom: 1px solid var(--rule); font: 500 12px/1.3 var(--mono);
          font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: background-color var(--t-fast); }
.tp-t { color: var(--faint); }
.tp-k { font: 700 11px/1.2 var(--font); letter-spacing: 0; }
.tp-usd, .tp-n, .tp-p { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-n, .tp-p { color: var(--muted); }
.tp-row.buy .tp-k, .tp-row.buy .tp-usd { color: var(--good); }
.tp-row.sell .tp-k, .tp-row.sell .tp-usd { color: var(--bad); }
.tp-row.whale { box-shadow: inset 2px 0 0 var(--accent-2); }
.tp-row.whale .tp-usd { font-weight: 700; }
.tp-row.known { background: var(--tint); }
.tp-usd .ic { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; color: var(--warn); }
.tp-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.tp-m a, .tp-x a { color: var(--muted); text-decoration: none; }
.tp-m em { font: 700 11.5px/1.2 var(--font); font-style: normal; color: var(--accent); }
.tp-x { display: grid; place-items: center; }
.tp-x .ic { width: 13px; height: 13px; }
/* Holder-Karte: Kreise je Art (Farbe über lokale Variable, gilt für SVG-Kreise und Legende) */
.hm-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-sum span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--rule); border-radius: var(--r-xs);
               background: var(--panel); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.hm-sum b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.hm-sum .g b { color: var(--good); }
.hm-sum .w b { color: var(--warn); }
.hm-sum .b b { color: var(--bad); }
.hmap { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); }
.hmap svg { display: block; width: 100%; height: auto; max-height: 320px; }
.b-dev { --t8-hb: var(--bad); }
.b-pool { --t8-hb: var(--tech); }
.b-insider { --t8-hb: var(--warn); }
.b-known { --t8-hb: var(--accent); }
.b-net { --t8-hb: var(--accent-2); }
.b-holder { --t8-hb: var(--rule-2); }
.hb { fill: color-mix(in srgb, var(--t8-hb, var(--rule-2)) 40%, var(--panel)); stroke: color-mix(in srgb, var(--t8-hb, var(--rule-2)) 70%, transparent);
      stroke-width: 1.5; transition: opacity var(--t-fast); }
.hb.b-net { stroke-dasharray: 5 4; stroke-width: 2; }
.hb-t { fill: var(--text); font: 600 12px var(--mono); font-variant-numeric: tabular-nums; text-anchor: middle; pointer-events: none; }
.hb-s { fill: var(--muted); font: 600 9.5px var(--font); text-anchor: middle; pointer-events: none; }
.hm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.hm-legend .hb { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 50%;
                 border: 1.5px solid color-mix(in srgb, var(--t8-hb, var(--rule-2)) 70%, transparent);
                 background: color-mix(in srgb, var(--t8-hb, var(--rule-2)) 40%, var(--panel)); }
.hm-legend .hb.b-net { border-style: dashed; }
.hm-legend small { flex-basis: 100%; font-weight: 500; color: var(--faint); }
.hm-nets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.hm-nets span { padding: 1px 8px; border-radius: var(--r-xs); background: var(--tone-bad); color: var(--bad-ink); font: 600 11.5px/1.5 var(--mono);
                font-variant-numeric: tabular-nums; }
.hm-nets small { flex-basis: 100%; color: var(--faint); }

/* ---------- Befehlspalette (Strg/⌘ K): oben mittig, fällt leicht von oben ein */
.palette { justify-items: center; align-items: start;
           padding: calc(var(--top-safe) + 6vh) calc(12px + var(--deck-r)) calc(var(--dock-h) + 28px + env(safe-area-inset-bottom)) 12px; }
.palette:not([hidden]) { background-color: color-mix(in srgb, var(--scrim) 60%, transparent); }
.gs-box { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(70vh, 640px); max-height: min(70dvh, 640px);
          overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg); box-shadow: var(--shadow-lg);
          transform-origin: 50% 0; transition: scale .32s var(--spring), translate .32s var(--spring), opacity var(--t-out); }
@starting-style { .palette:not([hidden]) .gs-box { scale: .96; translate: 0 -12px; opacity: 0; } }
.palette[hidden] .gs-box { scale: .98; translate: 0 -8px; opacity: 0; transition-duration: .16s; transition-timing-function: var(--out); }
.gs-top { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--rule); }
.gs-top > .ic { width: 20px; height: 20px; color: var(--accent); }
#gsQ { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
       color: var(--text); font: 500 17px/1.2 var(--font); letter-spacing: -.01em; }
#gsQ::placeholder { color: var(--muted); }
#gsQ:focus, #gsQ:focus-visible { border: 0; box-shadow: none; outline: none; }
.gs-body { flex: 1 1 auto; gap: 2px 12px; padding: 8px; }
/* alle Ergebniszeilen teilen sich dieselben Spalten (subgrid) – Preis, MCap usw. stehen genau untereinander */
@supports (grid-template-columns: subgrid) {
  .gs-body { grid-template-columns: 32px minmax(0, 1.4fr) repeat(4, minmax(0, auto)) auto; }
  .gs-body > * { grid-column: 1 / -1; }
  .gs-body > .gs-row { grid-template-columns: subgrid; }
}
.gs-h { padding: 12px 10px 4px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.gs-cmd { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
          background: none; color: var(--text); text-align: left; font: 600 14px/1.2 var(--font); cursor: pointer; transition: background-color var(--t-fast); }
.gs-cmd > .ic { width: 18px; height: 18px; color: var(--muted); }
.gs-cmd.sel > .ic { color: var(--accent); }
.gs-cmd .kbd { margin-left: auto; }
.gs-row { display: grid; grid-template-columns: 32px minmax(0, 1.4fr) repeat(4, minmax(0, auto)) auto; align-items: center; gap: 12px; min-height: 52px;
          padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background-color var(--t-fast); }
.gs-row .icon.sm { width: 28px; height: 28px; font-size: 10px; }
.gs-row.sel, .gs-cmd.sel { background: var(--hl); box-shadow: inset 2px 0 0 var(--accent-2); }
.gs-name { display: grid; min-width: 0; }
.gs-name b { font-size: 14px; }
.gs-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.gs-name em { font-style: normal; font-weight: 700; color: var(--accent); }
.gs-num { display: grid; min-width: 0; }
.gs-num span { font: 600 9.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-num b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
            letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gs-num b.up, .gs-num b.down { font-size: 11px; }
.gs-act { display: flex; justify-content: flex-end; gap: 4px; }
.gs-act button, .gs-act a { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border);
                            border-radius: var(--r-sm); background: transparent; color: var(--text); text-decoration: none; cursor: pointer;
                            transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.gs-act .ic { width: 15px; height: 15px; }
.gs-act [data-report] { border-color: var(--accent); color: var(--accent); }
.gs-act .botbuy .ic { color: var(--warn); }
.gs-addr { display: grid; gap: 2px; width: 100%; margin: 6px 0; padding: 12px 14px; border: 1.5px dashed var(--accent-2); border-radius: var(--r-md);
           background: var(--tint); color: var(--accent); text-align: left; font: 700 14px/1.4 var(--font); cursor: pointer;
           transition: border-style var(--t-fast), background-color var(--t-fast); }
.gs-addr small { font: 400 11px/1.4 var(--mono); font-variant-numeric: slashed-zero; color: var(--muted); word-break: break-all; }
.gs-hint { padding: 22px 12px; text-align: center; font-size: 13.5px; color: var(--muted); }
.gs-hint > .ic { color: var(--accent); }
.gs-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.gs-tips button { height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--sunk); color: var(--text);
                  font: 600 12px/1 var(--mono); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.gs-load { display: grid; gap: 6px; padding: 6px 4px; }

/* ---------- Überfahren (nur mit Maus) */
@media (hover: hover) {
  #popClose:hover, #repClose:hover, #buyClose:hover, #cmClose:hover, #gsClose:hover { background: var(--hl); color: var(--text); }
  .rep-head .actions button:hover, .rep-head .actions a:hover { border-color: var(--border-2); background: var(--hl); }
  .cm-live:hover { background: var(--hl); }
  .cm-ptabs button:hover { color: var(--text); }
  .tp-row:hover { background: var(--hover); }
  .tp-m a:hover, .tp-x a:hover { color: var(--accent); }
  .hmap a:hover .hb, .hmap g:hover .hb { opacity: .8; }
  .gs-row:hover, .gs-cmd:hover { background: var(--hl); }
  .gs-act button:hover, .gs-act a:hover { border-color: var(--accent-2); background: var(--hl); color: var(--accent); }
  .gs-addr:hover { border-style: solid; }
  .gs-tips button:hover { border-color: var(--accent-2); color: var(--accent); }
}

/* ---------- Ältere Browser ohne allow-discrete: Einfahren per Keyframes, Schließen sofort */
@supports not (transition-behavior: allow-discrete) {
  .insp:not([hidden]) .pop-box, .insp:not([hidden]) .rep-box { animation: insp-in var(--t-in) var(--spring) both; }
  .stage:not([hidden]) .cm-box { animation: stage-in .26s var(--ease) both; }
  .palette:not([hidden]) .gs-box { animation: pal-in .32s var(--spring) both; }
}
@keyframes insp-in { from { translate: 100% 0; opacity: 0; } }
@keyframes insp-up { from { translate: 0 100%; opacity: 0; } }
@keyframes stage-in { from { scale: .985; opacity: 0; } }
@keyframes pal-in { from { scale: .96; translate: 0 -12px; opacity: 0; } }

/* ---------- Breiten: Bericht und Chart nach Container, Fenster-Lage nach Fensterbreite */
@container (max-width: 640px) {
  .rep-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 18px 22px; }
  .gauges { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .procon { grid-template-columns: minmax(0, 1fr); }
  .procon > .rep-card + .rep-card { border-left: 0; border-top: 1px solid var(--rule); }
  .rep-hero h3 { font-size: 21px; }
}
@container stage (max-width: 960px) {
  .tp-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-row { grid-template-columns: 52px 56px minmax(0, 1fr) minmax(0, 1.1fr) 20px; }
  .tp-n, .tp-p { display: none; }
  .cm-ptabs small { display: none; }
}
/* breite Bühne: Chart links, Trades/Holder als rechte Spalte */
@container stage (min-width: 1100px) {
  .cm-box { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr);
            grid-template-areas: "head head" "chart panel"; }
  .cm-head { grid-area: head; }
  .cm-chart { grid-area: chart; }
  .cm-panel { grid-area: panel; border-top: 0; border-left: 1px solid var(--rule); }
  .cm-ptabs small { display: none; }
  .cp-tog .ic { rotate: 180deg; }
  .cm-panel.shut .cp-tog .ic { rotate: 0deg; }
  .tp-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-row { grid-template-columns: 48px 52px minmax(0, 1fr) minmax(0, 1.1fr) 20px; }
  .tp-n, .tp-p { display: none; }
  @supports selector(:has(*)) {
    /* eingeklappt: schmale Spalte, Reiter senkrecht */
    .cm-box:has(.cm-panel.shut) { grid-template-columns: minmax(0, 1fr) 44px; }
    .cm-panel.shut .cm-ptabs { flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 8px 0; }
    .cm-panel.shut .cm-ptabs .cp-tog { order: -1; }
    .cm-panel.shut .cm-ptabs button:not(.cp-tog) { writing-mode: vertical-rl; padding: 10px 0; }
  }
}
/* Desktop: Schiebe-Modus – Pop-up und Bericht nicht-modal rechts, die Arbeitsfläche rückt um --deck-r (nur mit :has()) */
@media (min-width: 1280px) {
  @supports selector(:has(*)) {
    html:has(#popModal:not([hidden])) { --deck-r: calc(var(--insp-w) + 24px); }
    html:has(#repModal:not([hidden])) { --deck-r: calc(var(--rep-w) + 12px); }
    html:has(#popModal:not([hidden])):has(#repModal:not([hidden])) { --deck-r: calc(var(--rep-w) + 12px + var(--stack-peek)); }
    /* Hülle nur so breit wie das Panel: ein Klick in die Liste trifft sie nicht, nichts schließt sich */
    #popModal { inset: 0 0 0 auto; width: calc(var(--insp-w) + 24px); padding: 12px; }
    #repModal { inset: 0 0 0 auto; width: calc(var(--rep-w) + 12px); padding: 12px 12px 12px 0; }
    #popModal, #repModal { background-color: transparent; pointer-events: none; }
    #popModal .pop-box, .insp-wide .rep-box { width: 100%; pointer-events: auto; }
    /* Stapel: Bericht über dem Pop-up – das Pop-up rückt nach links, 28 px schauen heraus, leicht abgedunkelt */
    html:has(#repModal:not([hidden])) #popModal:not([hidden]) .pop-box { translate: calc(var(--insp-w) - var(--rep-w) - var(--stack-peek)) 0; scale: .97; }
    html:has(#repModal:not([hidden])) #popModal:not([hidden]) .pop-box::after { opacity: .35; }
  }
}
/* Tablet/Laptop: Pop-up und Bericht überlagern – die Seite dahinter scrollt nicht mit */
@media not all and (min-width: 1280px) {
  html:has(#popModal:not([hidden]), #repModal:not([hidden])) { overflow: hidden; }
}
/* Handy: Pop-up und Bericht als ganze Seite von rechts, Schnellkauf als Blatt von unten, Bühne und Palette bildschirmfüllend */
@media (max-width: 720px) {
  .gs-tips button { height: 44px; }
  #popClose, #repClose, #buyClose, #cmClose, #gsClose { width: 44px; height: 44px; }
  .insp:not(.insp-narrow) { padding: 0; }
  #popModal .pop-box, .insp-wide .rep-box { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none;
                                            padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .insp:not(.insp-narrow) .pop-body, .insp .rep-body { padding: 16px 14px; }
  .pop-head { padding-left: 16px; }
  .rep-head { padding: 10px 60px 10px 14px; }
  #repClose { top: 6px; right: 8px; }
  .rep-head .actions button, .rep-head .actions a { height: 44px; }
  .insp-narrow { align-items: end; justify-items: stretch; padding: 0; }
  .insp-narrow .pop-box { width: 100%; max-height: 92vh; max-height: 92dvh; align-self: end; border-bottom: 0;
                          border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  @starting-style { .insp-narrow:not([hidden]) .pop-box { translate: 0 100%; } }
  .insp-narrow[hidden] .pop-box { translate: 0 24px; }
  .stage { padding: 0; }
  .cm-box { border: 0; border-radius: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  /* Chart-Kopf: oben Name + Schließen, darunter Kurs + Links, dann Zeitraum und Zoom über die ganze Breite */
  .cm-head { gap: 8px; min-height: 0; padding: 8px 8px 10px 14px; }
  .cm-title { order: 1; flex: 1 1 100%; min-height: 44px; display: grid; align-content: center; padding-right: 48px; }
  .cm-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-title small { display: none; }
  #cmClose { top: 6px; right: 8px; }
  .cm-price { order: 3; margin: 0 auto 0 0; }
  #cmOpen, #cmFomo { order: 4; height: 44px; padding: 0 12px; font-size: 12.5px; }
  .cm-tf { order: 5; display: flex; flex: 1 1 100%; }
  .cm-zoom { order: 6; display: flex; flex: 1 1 100%; }
  .cm-tf button, .cm-zoom button { flex: 1; min-height: 44px; }
  .cm-chart { flex: 1 1 54%; }
  .cm-panel { flex: 0 0 46%; }
  .cm-panel.shut { flex: 0 0 auto; }
  .cm-ptabs button { min-height: 44px; }
  .cm-ptabs .cp-tog { width: 44px; height: 44px; }
  .cm-live { right: 76px; bottom: 28px; }
  .tp-row .m-hide { display: none; }
  .palette { align-items: start; justify-items: stretch; padding: env(safe-area-inset-top) 0 0; }
  .gs-box { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; transform-origin: 50% 0; }
  @starting-style { .palette:not([hidden]) .gs-box { translate: 0 -12px; } }
  .gs-top .kbd { display: none; }
  .gs-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  @supports (grid-template-columns: subgrid) { .gs-body { grid-template-columns: 28px minmax(0, 1fr) auto; } }
  .gs-row .m-hide { display: none; }
  .gs-act { grid-column: 1 / -1; justify-content: flex-start; }
  .gs-act button, .gs-act a { width: 44px; height: 44px; }
  @supports not (transition-behavior: allow-discrete) {
    .insp-narrow:not([hidden]) .pop-box { animation-name: insp-up; }
  }
}
/* ---------- T8b Startbildschirm „Abfahrtstafel“ (#splash, Steuerung in extras.js): das Logo ploppt auf und teilt sich in
   RookiePump, RookieDrop und RookieManager, darunter eine Fallblatt-Tafel – Gleis 1 RookiePump (Memecoin-Trading), Gleis 2
   RookieDrop (Dropshipping), Gleis 3 RookieManager (Social Media, seit 26.10.); Kurs-Ticks, Sendungsstatus und Likes
   vereinen die Welten. Grundzustand = Endzustand: der Auftakt läuft nur
   unter :not(.done, .again) und füllt rückwärts (backwards) – .done (Klick auf freie Fläche) / .again (über die Marke
   geöffnet) nehmen ihn weg. Nach der Wahl: data-pick + .out (gewählte Zeile fährt ab, ihr Logo fliegt per --spl-x/-y/-s
   zur Marke). Entwurf aus drei Vorschlägen gewählt (23./24.10.). Rohe Farben gibt es hier nicht, nur var() und color-mix(). */
html.no-splash .splash { display: none; }   /* Neuladen im selben Tab: ohne Startbildschirm (Skript im <head>) */
.splash {
  --spl-x: 0px; --spl-y: 0px; --spl-s: 1;                            /* Flug des Logos zur Marke oben links (setzt JS) */
  --spl-board: color-mix(in srgb, var(--text) 94%, var(--accent));    /* Tafel: Espresso auf hellem Papier */
  --spl-ink: var(--bg);                                               /* Schrift auf der Tafel */
  --spl-dim: color-mix(in srgb, var(--bg) 60%, var(--spl-board));
  --spl-tile: color-mix(in srgb, var(--bg) 9%, var(--spl-board));     /* Fallblatt */
  --spl-rule: color-mix(in srgb, var(--bg) 14%, transparent);
  --spl-edge: transparent;
  --spl-up: color-mix(in srgb, var(--good) 62%, var(--bg));
  --spl-down: color-mix(in srgb, var(--bad) 72%, var(--bg));
  --spl-route: var(--line-2);
  position: fixed; inset: 0; z-index: 120; display: flex; overflow: hidden auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) max(16px, var(--edge)) max(20px, env(safe-area-inset-bottom));
  background: var(--bg); color: var(--text); font-family: var(--font); outline: none; -webkit-tap-highlight-color: transparent;
}
/* Dunkel: die Tafel ist kein Kontrast-Block mehr, sondern eine leicht erhabene Fläche mit Haarkante */
:root[data-theme="dark"] .splash {
  --spl-board: var(--panel); --spl-ink: var(--text); --spl-dim: var(--muted); --spl-tile: var(--panel-2);
  --spl-rule: var(--line); --spl-edge: var(--line-2); --spl-up: var(--good); --spl-down: var(--bad);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .splash {
    --spl-board: var(--panel); --spl-ink: var(--text); --spl-dim: var(--muted); --spl-tile: var(--panel-2);
    --spl-rule: var(--line); --spl-edge: var(--line-2); --spl-up: var(--good); --spl-down: var(--bad);
  }
}
.splash::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); opacity: 0; pointer-events: none; }
.spl-wrap { margin: auto; width: min(1040px, 100%); min-width: 0; }

/* Kopf: gemeinsamer Ring teilt sich in beide Logos; dahinter Kurslinie (links) → Versandroute (rechts) */
.spl-hero { position: relative; display: grid; justify-items: center; text-align: center; margin-bottom: clamp(20px, 4.5vh, 44px); }
.spl-route { position: absolute; left: 0; top: 0; width: 100%; height: 64px; color: var(--spl-route); pointer-events: none; }
.spl-route path { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.spl-lock { position: relative; width: 190px; height: 64px; padding: 0 18px; background: var(--bg); }
.spl-lock::before { content: ""; position: absolute; left: calc(50% - 40px); top: -8px; width: 80px; height: 80px; border-radius: 50%;
  border: 1.5px solid var(--accent-2); opacity: 0; pointer-events: none; }
.spl-lock .spl-mark { position: absolute; top: 0; left: calc(50% - 32px); width: 64px; height: 64px; color: var(--text); }
.spl-lock .spl-mark:nth-of-type(3) { transform: translateX(-46px); }   /* RookiePump links, liegt oben */
.spl-lock .spl-mark:nth-of-type(2) { transform: none; }                /* RookieDrop in der Mitte */
.spl-lock .spl-mark:nth-of-type(1) { transform: translateX(46px); }    /* RookieManager rechts */
/* Mitteilungspunkt des RookieManagers: Rand in der Farbe der Fläche darunter (Kopf, Tafel, beim Flug die Plakette) */
.spl-ping { stroke: var(--spl-board); }
.spl-lock .spl-ping { stroke: var(--bg); }
.splash.out .spl-pick > .spl-mark .spl-ping { stroke: var(--panel); }
.spl-bubble { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.spl-pingdot { fill: var(--accent-2); animation: spl-breathe 3.2s ease-in-out 2.4s infinite; }
/* öffentliche Seite: den privaten RookieManager gibt es nicht (bedienung.js setPublic wechselt ggf. zu RookiePump) –
   Gleis 3 weg, Texte nennen zwei Bereiche */
body.pub .spl-admin, .spl-pub { display: none; }
/* öffentlich ist Gleis 3 (RookieManager) eine Vorschau: blasser, ohne „Öffnen“, mit „Bald“ (extras.js: Klick zeigt die Vorschau) */
.spl-bald { display: none; }
body.pub .spl-bald { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); font: 600 10px/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
body.pub .spl-pick[data-area="manager"] { opacity: .62; }
body.pub .spl-pick[data-area="manager"] .spl-go { visibility: hidden; }
body.pub .spl-pub { display: inline; }
.spl-title { margin: 14px 0 0; font: 600 clamp(40px, 5.6vw, 60px)/1 var(--serif); font-variation-settings: "SOFT" 100;
  letter-spacing: -.03em; color: var(--text); }
.spl-sub { margin: 10px 0 0; max-width: 36ch; text-wrap: balance; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* Tafel */
.spl-board { position: relative; isolation: isolate; padding: 4px 6px 0; color: var(--spl-ink); }
.spl-board::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl); background: var(--spl-board);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--spl-edge); }
.spl-band { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--spl-dim); }
.spl-band b { font-weight: 600; color: var(--accent-2); }
.spl-led { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--spl-up);
  vertical-align: 1px; animation: spl-breathe 3.2s ease-in-out 2s infinite; }
.spl-cols, .spl-pick { display: grid; grid-template-columns: 52px 48px minmax(0, 1fr) 368px 96px; column-gap: 16px; align-items: center; }
.spl-cols { grid-template-columns: 52px 48px minmax(0, 1fr) 156px 196px 96px; padding: 9px 14px; border-block: 1px solid var(--spl-rule);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--spl-dim); }
.spl-cols span:nth-child(2) { grid-column: span 2; }

/* Wahlknopf = eine Zeile der Tafel */
.spl-pick { position: relative; isolation: isolate; width: 100%; min-height: 84px; margin: 0; padding: 16px 14px; border: 0;
  border-radius: var(--r-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.spl-pick + .spl-pick { background: linear-gradient(var(--spl-rule), var(--spl-rule)) 14px 0 / calc(100% - 28px) 1px no-repeat; }
.spl-pick::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--accent-2); transform: scaleY(0); transition: transform .35s var(--spring); }
.spl-pick::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: color-mix(in srgb, var(--spl-ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent); transition: opacity .2s var(--ease); }
.spl-pick.last::before { transform: scaleY(.45); }
.spl-pick:hover::before, .spl-pick:focus-visible::before { transform: scaleY(1); }
.spl-pick:hover::after, .spl-pick:focus-visible::after { opacity: 1; }
.spl-pick:active::after { background: color-mix(in srgb, var(--spl-ink) 11%, transparent); }
.spl-pick:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.spl-pick > .spl-mark { width: 44px; height: 44px; }
.spl-name { display: block; font: 600 clamp(22px, 2.3vw, 28px)/1.05 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.03em; }
.spl-desc { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--spl-dim); }
.spl-tag { display: none; margin-left: 8px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  border-radius: 99px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); vertical-align: 5px; }
.spl-pick.last .spl-tag { display: inline-block; }
.spl-info { display: grid; grid-template-columns: 156px 196px; column-gap: 16px; align-items: center; }
.spl-stat { display: flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--mono); color: var(--spl-dim); }
.spl-stat svg { flex: none; width: 30px; height: 18px; }
.spl-up { fill: var(--spl-up); } .spl-down { fill: var(--spl-down); } .spl-bars { fill: currentColor; }
.spl-scan { stroke: var(--accent-2); stroke-width: 1; opacity: 0; animation: spl-scan 4.5s ease-in-out 3s infinite; }
.spl-go { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--spl-dim); }
.spl-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--spring); }
.spl-pick:hover .spl-go, .spl-pick:focus-visible .spl-go { color: var(--accent-2); }
.spl-pick:hover .spl-go svg, .spl-pick:focus-visible .spl-go svg { transform: translateX(4px); }
.spl-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px 14px;
  border-top: 1px solid var(--spl-rule); font-size: 12.5px; color: var(--spl-dim); }
.spl-keys { font: 500 11px/1.6 var(--mono); letter-spacing: .1em; }
@media (hover: none) { .spl-keys { display: none; } }

/* Fallblatt: Zelle mit Fuge; ein Streifen (Zeilen per Zeilenumbruch, white-space: pre) springt Blatt für Blatt,
   die obere Klappe (::after) fällt bei jedem Sprung um die Fuge. Endstellung = letzte Zeile (.spl-roll) */
.spl-cell { position: relative; overflow: hidden; height: var(--spl-L); border-radius: 5px; background: var(--spl-tile);
  font-family: var(--mono); color: var(--spl-ink); justify-self: start; }
.spl-cell::before { content: ""; position: absolute; inset: 50% 0 auto; z-index: 3; height: 1px; background: var(--spl-board);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--spl-ink) 6%, transparent); }
.spl-cell::after { content: ""; position: absolute; inset: 0 0 50%; z-index: 2; transform-origin: 50% 100%;
  background: linear-gradient(var(--spl-tile), color-mix(in srgb, var(--spl-tile) 78%, var(--spl-board)));
  transform: perspective(120px) rotateX(-90deg); }
.spl-strip { position: relative; z-index: 1; display: block; white-space: pre; line-height: var(--spl-L); }
.spl-flap::before, .spl-tick::before { z-index: 0; }   /* kleine Blätter: Fuge hinter der Schrift (sonst wirkt sie durchgestrichen) */
.spl-roll .spl-strip { transform: translateY(calc(-4 * var(--spl-L))); }
.spl-gleis { --spl-L: 1.6em; --spl-d: var(--spl-g); --spl-p: .075s; width: 40px; font-size: 26px; font-weight: 600; text-align: center; }
.spl-flap { --spl-L: 2.3em; --spl-d: var(--spl-f); --spl-p: .08s; padding: 0 9px; font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; }
.spl-tick { --spl-L: 2.3em; padding: 0 8px; color: var(--accent-2); }
.spl-tick .spl-strip { animation: spl-tick 12s steps(4, end) var(--spl-t) infinite; }        /* Warte-Bewegung: alle 3 s ein Blatt */
.spl-tick::after { animation: spl-flick 3s calc(var(--spl-t) + 3s) infinite; }
.spl-pick[data-area="pump"] { --spl-r: .92s; --spl-g: .98s; --spl-f: 1.04s; --spl-t: 2.4s; }
.spl-pick[data-area="drop"] { --spl-r: 1.02s; --spl-g: 1.08s; --spl-f: 1.14s; --spl-t: 3.9s; }
.spl-pick[data-area="manager"] { --spl-r: 1.12s; --spl-g: 1.18s; --spl-f: 1.24s; --spl-t: 5.4s; }

/* Auftakt (0–1,55 s) */
.splash:where(:not(.done, .again)) .spl-lock { animation: spl-pop .62s var(--spring) .1s backwards; }
.splash:where(:not(.done, .again)) .spl-lock::before { animation: spl-ripple .9s cubic-bezier(.2, .7, .3, 1) .3s backwards; }
.splash:where(:not(.done, .again)) .spl-lock .spl-mark:nth-of-type(3) { animation: spl-split .6s var(--spring) .62s backwards; }
.splash:where(:not(.done, .again)) .spl-lock .spl-mark:nth-of-type(-n+2) { animation: spl-split-in .6s var(--spring) .62s backwards; }
.splash:where(:not(.done, .again)) .spl-route { animation: spl-wipe 1.1s var(--ease) .55s backwards; }
.splash:where(:not(.done, .again)) .spl-title { animation: spl-rise .55s var(--ease) .7s backwards; }
.splash:where(:not(.done, .again)) .spl-sub { animation: spl-rise .55s var(--ease) .8s backwards; }
.splash:where(:not(.done, .again)) .spl-board { animation: spl-unroll .55s var(--ease) .78s backwards; }
.splash:where(:not(.done, .again)) .spl-pick { animation: spl-rise .45s var(--ease) var(--spl-r) backwards; }
.splash:where(:not(.done, .again)) .spl-roll .spl-strip { animation: spl-roll calc(4 * var(--spl-p)) steps(4, end) var(--spl-d) backwards; }
.splash:where(:not(.done, .again)) .spl-roll::after { animation: spl-flap var(--spl-p) var(--out) calc(var(--spl-d) + var(--spl-p)) 4 backwards; }
.splash:where(:not(.done, .again)) .spl-foot { animation: spl-show .4s var(--ease) 1.3s backwards; }
/* Erneut geöffnet (Klick auf die Marke): kein Auftakt, alles in 0,26 s da */
.splash.again { animation: spl-show .18s linear backwards; }
.splash.again .spl-wrap { animation: spl-rise .26s var(--ease) backwards; }

/* Ausblenden nach der Wahl (0,62 s): gewählte Zeile fährt ab, ihr Logo fliegt zur Marke, die andere Zeile weicht */
.splash.out { background: transparent; animation: spl-hold .62s linear forwards; }   /* fängt Klicks bis zuletzt ab (Doppelklick) */
.splash.out .spl-wrap { animation: none; }   /* .again-Einblenden aus – das Logo wurde in Endlage gemessen */
.splash.out::before { opacity: 1; animation: spl-gone .4s var(--out) .14s forwards; }
.splash.out :is(.spl-hero, .spl-band, .spl-cols, .spl-foot) { animation: spl-leave .28s var(--out) forwards; }
.splash.out .spl-board, .splash.out .spl-pick { animation: none; }
.splash.out .spl-board::before { animation: spl-gone .36s var(--out) .08s forwards; }
.splash.out[data-pick="pump"] .spl-pick:not([data-area="pump"]),
.splash.out[data-pick="drop"] .spl-pick:not([data-area="drop"]),
.splash.out[data-pick="manager"] .spl-pick:not([data-area="manager"]) { animation: spl-yield .3s var(--out) forwards; }
.splash.out[data-pick="pump"] [data-area="pump"] :is(.spl-gleis, .spl-what, .spl-info, .spl-go),
.splash.out[data-pick="drop"] [data-area="drop"] :is(.spl-gleis, .spl-what, .spl-info, .spl-go),
.splash.out[data-pick="manager"] [data-area="manager"] :is(.spl-gleis, .spl-what, .spl-info, .spl-go) { animation: spl-depart .4s var(--out) .05s forwards; }
.splash.out[data-pick="pump"] [data-area="pump"]::after,
.splash.out[data-pick="drop"] [data-area="drop"]::after,
.splash.out[data-pick="manager"] [data-area="manager"]::after { opacity: 1; animation: spl-gone .4s var(--out) .12s forwards; }
.splash.out[data-pick="pump"] [data-area="pump"]::before,
.splash.out[data-pick="drop"] [data-area="drop"]::before,
.splash.out[data-pick="manager"] [data-area="manager"]::before { transform: scaleY(1); animation: spl-gone .3s var(--out) .2s forwards; }
.splash.out[data-pick="pump"] [data-area="pump"] > .spl-mark,
.splash.out[data-pick="drop"] [data-area="drop"] > .spl-mark,
.splash.out[data-pick="manager"] [data-area="manager"] > .spl-mark { transform-origin: 0 0; animation: spl-fly .56s cubic-bezier(.6, 0, .2, 1) forwards;
  color: var(--text); background: var(--panel); border-radius: 50%; }   /* hebt sich als Plakette ab und landet auf der Insel */

@keyframes spl-pop { from { opacity: 0; transform: scale(.45); } }
@keyframes spl-ripple { from { opacity: .6; transform: scale(.7); } to { opacity: 0; transform: scale(1.9); } }
@keyframes spl-split { from { transform: translateX(0); } }
@keyframes spl-split-in { from { transform: translateX(0); opacity: 0; } 45% { opacity: 1; } }
@keyframes spl-wipe { from { clip-path: inset(0 50%); } to { clip-path: inset(0 0); } }
@keyframes spl-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes spl-show { from { opacity: 0; } }
@keyframes spl-unroll { from { clip-path: inset(0 -60px 100% -60px); transform: translateY(10px); }
  to { clip-path: inset(-40px -60px -100px -60px); transform: none; } }
@keyframes spl-roll { from { transform: translateY(0); } }
@keyframes spl-flap { from { transform: perspective(120px) rotateX(0deg); } }
@keyframes spl-tick { to { transform: translateY(calc(-4 * var(--spl-L))); } }
@keyframes spl-flick { 0% { transform: perspective(120px) rotateX(0deg); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  9%, 100% { transform: perspective(120px) rotateX(-90deg); } }
@keyframes spl-breathe { 50% { opacity: .35; } }
@keyframes spl-scan { 0%, 100% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 32% { opacity: 1; transform: translateY(12px); }
  40%, 99% { opacity: 0; transform: translateY(12px); } }
@keyframes spl-hold { 0%, 80% { opacity: 1; } to { opacity: 0; } }
@keyframes spl-gone { to { opacity: 0; } }
@keyframes spl-leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes spl-yield { to { opacity: 0; transform: translateX(-20px); } }
@keyframes spl-depart { to { opacity: 0; transform: translateX(32px); } }
@keyframes spl-fly { to { transform: translate(var(--spl-x), var(--spl-y)) scale(var(--spl-s)); } }

/* Schmal (Tablet hochkant, Handy): Spaltenkopf weg, Fracht und Status in eine zweite Zeile */
@media (max-width: 880px) {
  .spl-cols { display: none; }
  .spl-band { font-size: 10px; letter-spacing: .1em; }
  .spl-pick { grid-template-columns: 38px 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; padding: 14px 12px; }
  .spl-pick > .spl-mark { width: 40px; height: 40px; }
  .spl-gleis { width: 36px; font-size: 22px; }
  .spl-go { grid-area: 1 / 4; }
  .spl-flap, .spl-stat { font-size: 10.5px; } .spl-flap { letter-spacing: .04em; } .spl-stat { gap: 8px; }
  .spl-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
  .spl-go > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Weniger Bewegung: alles steht sofort, die Wahl blendet nur weich aus */
@media (prefers-reduced-motion: reduce) {
  .splash, .splash::before, .splash *, .splash *::before, .splash *::after { animation: none !important; transition: none !important; }
  .splash.out { background: var(--bg); animation: spl-gone .35s linear forwards !important; }
}

/* ---------- T8c Startseite RookieStuff (unter der Tafel im #splash, 26.10.): Zahlen von gerade eben, alle Funktionen als
   Karten mit kleiner Grafik (Klick: Bereich + Reiter, extras.js), Quellen mit ihren Logos, Konto, Vertrauen und Fuß mit
   Impressum/Datenschutz. Grafiken über die .v-*-Klassen – Farben nur aus den Tokens (var()/color-mix()). */
.spl-more { display: grid; gap: clamp(36px, 7vh, 64px); margin-top: clamp(28px, 6vh, 56px); padding-bottom: 8px; }
.splash:where(:not(.done, .again)) .spl-more { animation: spl-show .5s var(--ease) 1.5s backwards; }
.splash.out .spl-more { animation: spl-leave .28s var(--out) forwards; }
body.pub .spl-mg-sec .spl-feat { opacity: .72; cursor: default; }   /* RookieManager öffentlich: nur Vorschau */
/* ohne Konto führt jede Karte zur Anmeldung – das steht klein dran; der pausierte Übungs-Bot (body.bot-aus) ist grau */
body.gast .spl-feat:not([data-area="manager"]) .spl-feat-t::after, body.bot-aus .spl-feat[data-tab="bot"] .spl-feat-t::after {
  content: "Mit Konto"; margin-left: auto; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
body.bot-aus .spl-feat[data-tab="bot"] { opacity: .55; filter: grayscale(1); }
body.bot-aus .spl-feat[data-tab="bot"] .spl-feat-t::after { content: "Pausiert"; }
body.pub .spl-mg-sec .spl-feat:hover { transform: none; box-shadow: none; }
.spl-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; padding: 14px 18px;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); color: var(--muted); font: 500 12.5px/1.3 var(--mono); }
.spl-now-k { display: inline-flex; align-items: center; color: var(--faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.spl-now-z b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.spl-kick { margin: 0; color: var(--faint); font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.spl-kick b { color: var(--accent-2); font-weight: 600; }
.spl-sec h2, .spl-konto h2 { margin: 8px 0 0; color: var(--text); font: 600 clamp(26px, 3.4vw, 36px)/1.1 var(--serif);
  font-variation-settings: "SOFT" 100; letter-spacing: -.02em; text-wrap: balance; }
.spl-lead { max-width: 66ch; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.spl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 12px; margin-top: 22px; }
.spl-grid-1 { grid-template-columns: minmax(0, 1fr); }
.spl-feat { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; border: 1px solid var(--rule);
  border-radius: var(--r-lg); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--spring), border-color .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) {
  .spl-feat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-2) 55%, var(--rule)); box-shadow: var(--shadow); }
}
.spl-feat:active { transform: translateY(0); }
.spl-feat:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.spl-feat-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.spl-feat-t .ic { width: 17px; height: 17px; color: var(--accent-2); }
.spl-feat-d { color: var(--muted); font-size: 13px; line-height: 1.45; }
.spl-viz { display: block; box-sizing: border-box; width: 100%; height: 66px; margin-bottom: 4px; padding: 8px 10px; overflow: visible;
  border-radius: var(--r-md); background: var(--bg-2); }
.spl-viz * { vector-effect: non-scaling-stroke; }
.v-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-soft { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-fill { fill: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.v-card { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.v-best { stroke: var(--accent-2); }
.v-bar { fill: color-mix(in srgb, var(--text) 16%, transparent); }
.v-hot, .v-dot, .v-star { fill: var(--accent-2); }
.v-cost { fill: color-mix(in srgb, var(--bad) 45%, transparent); }
.v-up { fill: var(--good); } .v-down { fill: var(--bad); } .v-warn { fill: var(--warn); }
.v-up-s { fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-node { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; }
.v-on { stroke: var(--accent-2); }
.v-ring { fill: none; stroke: var(--line); stroke-width: 3; }
.v-gauge { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; }
.v-num { fill: var(--text); font: 600 11px var(--mono); }
.v-tag { fill: var(--faint); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.v-ping { transform-box: fill-box; transform-origin: center; animation: spl-breathe 2.4s ease-in-out infinite; }
.spl-logos { display: flex; gap: 10px; }
.spl-logos img, .spl-quellen img { box-sizing: content-box; padding: 2px; border-radius: 6px; background: var(--logo-grund); }
.spl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 22px 0 0;
  padding: 0; list-style: none; }
.spl-steps li { display: flex; gap: 14px; padding: 16px; border-top: 2px solid var(--accent-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--panel); }
.spl-steps b { color: var(--accent-2); font: 600 22px/1 var(--mono); }
.spl-steps span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.spl-steps strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 15px; }
.spl-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--faint); font-size: 12px; }
.spl-konto { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: clamp(20px, 4vw, 34px); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow); }
.spl-konto ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.spl-konto li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.spl-konto li .ic { flex: none; width: 18px; height: 18px; color: var(--accent-2); }
.spl-konto-go { display: grid; justify-items: start; gap: 10px; }
.spl-konto-go > span { display: flex; flex-wrap: wrap; gap: 8px; }
.spl-konto-go small { color: var(--faint); font-size: 12px; line-height: 1.45; }
.spl-konto-go > .spl-drin, body.ko-in .spl-konto-go > .spl-gast { display: none; }
body.ko-in .spl-konto-go > .spl-drin { display: flex; }
.spl-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.spl-trust p { display: flex; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.spl-trust .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-2); }
.spl-trust strong { color: var(--text); }
.spl-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 16px 2px 4px;
  border-top: 1px solid var(--rule); color: var(--faint); font-size: 12.5px; }
.spl-end b { color: var(--text); }
.spl-end-links { display: flex; gap: 16px; }
.spl-end-links a { color: var(--muted); text-underline-offset: 3px; }
@media (max-width: 720px) {
  .spl-konto { grid-template-columns: minmax(0, 1fr); }
  .spl-now { justify-content: flex-start; }
}

/* ---------- T9 Bewegung, Rücksicht, öffentliche Seite
   Leitsatz: Bewegung nur mit Bedeutung – Inspektor fährt ein, Bereiche wechseln mit Richtung, nichts treibt im Leerlauf.
   Federkurve --spring (Ankommen), --out (Gehen); Dauern --t-fast / --t-out / --t-in / --t-pill (T1). */

/* ---------- Gemeinsame Keyframes (nur hier definiert – die Teile nutzen sie über animation: <name>).
   Verschiebung über die Einzel-Eigenschaften translate/scale/rotate: sie vertragen sich mit transform der Bausteine */
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes reveal { from { opacity: 0; translate: 0 24px; scale: .985; } }
@keyframes bump { 30% { scale: 1.4; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
/* Laufen-Puls (Bot): Farbe über --pulse am Punkt, sonst grün */
@keyframes runPulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse, var(--good)) 25%, transparent); }
                      50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pulse, var(--good)) 0%, transparent); } }
@keyframes ringBell { 10%, 30% { rotate: 14deg; } 20%, 40% { rotate: -14deg; } 50% { rotate: 0deg; } }
@keyframes sigRing { from { --v: 0; } }   /* Signal-Ring füllt sich (--v ist in T1 mit Typ angemeldet) */
@keyframes needle { from { rotate: -35deg; } }
@keyframes grow { from { width: 0; } }
/* Kurs-Aufleuchten: kurz grün/rot hinterlegt, dann wieder der eigene Grund */
@keyframes flashUp { 0%, 30% { background-color: var(--tone-good); } }
@keyframes flashDown { 0%, 30% { background-color: var(--tone-bad); } }

/* ---------- Einblenden neuer Einträge – nur .enter: #view wird alle 3–10 s neu gezeichnet, dort sonst keine Animation */
.enter { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
/* Kurs hat sich seit dem letzten Abruf geändert: Zahl leuchtet einmal auf */
.flash-up, .flash-down { border-radius: var(--r-xs); }
.flash-up { animation: flashUp 1.2s var(--ease); }
.flash-down { animation: flashDown 1.2s var(--ease); }

/* ---------- Bereich wechseln (grundlagen.js → softSwap("nav")): nur die Arbeitsfläche bewegt sich – mit Richtung aus der
   Reihenfolge der Bereiche (data-vt-dir aus goTab: „fwd“ = Ziel weiter unten in der Leiste bzw. weiter rechts im Handy-Dock);
   ohne Richtung (Unterkategorie) nur Überblenden. Inseln, Leiste und Hinweise bekommen eigene Namen und zeigen sofort den neuen Stand – sonst läge das Bild der
   Arbeitsfläche (benannte Gruppe) während des Wechsels über ihnen */
html.vt-nav main.wrap { view-transition-name: rp-main; }
html.vt-nav .deck-top { view-transition-name: rp-top; }
html.vt-nav .dock { view-transition-name: rp-dock; }
html.vt-nav .toasts { view-transition-name: rp-toasts; }
html.vt-nav::view-transition-old(root) { animation: none; opacity: 0; }
html.vt-nav::view-transition-new(root) { animation: none; }
html.vt-nav::view-transition-group(rp-main) { animation-duration: 0s; }
html.vt-nav::view-transition-group(rp-top), html.vt-nav::view-transition-group(rp-dock), html.vt-nav::view-transition-group(rp-toasts) { animation: none; }
html.vt-nav::view-transition-old(rp-top), html.vt-nav::view-transition-old(rp-dock), html.vt-nav::view-transition-old(rp-toasts) { animation: none; opacity: 0; }
html.vt-nav::view-transition-new(rp-top), html.vt-nav::view-transition-new(rp-dock), html.vt-nav::view-transition-new(rp-toasts) { animation: none; }
html.vt-nav::view-transition-old(rp-main) { animation: vt-fade-out .16s var(--out) both; }
html.vt-nav::view-transition-new(rp-main) { animation: fadeIn .2s var(--ease) both; }
html.vt-nav[data-vt-dir="fwd"]::view-transition-old(rp-main) { animation: vt-out-left .16s var(--out) both; }
html.vt-nav[data-vt-dir="fwd"]::view-transition-new(rp-main) { animation: vt-in-right var(--t-in) var(--ease) both; }
html.vt-nav[data-vt-dir="back"]::view-transition-old(rp-main) { animation: vt-out-right .16s var(--out) both; }
html.vt-nav[data-vt-dir="back"]::view-transition-new(rp-main) { animation: vt-in-left var(--t-in) var(--ease) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-out-left { to { opacity: 0; translate: -24px 0; } }
@keyframes vt-out-right { to { opacity: 0; translate: 24px 0; } }
@keyframes vt-in-right { from { opacity: 0; translate: 24px 0; } }
@keyframes vt-in-left { from { opacity: 0; translate: -24px 0; } }
/* mit der Leiste links gleitet die Fläche senkrecht – wie die Pille */
@media (min-width: 721px) {
  html.vt-nav[data-vt-dir="fwd"]::view-transition-old(rp-main) { animation-name: vt-out-up; }
  html.vt-nav[data-vt-dir="fwd"]::view-transition-new(rp-main) { animation-name: vt-in-down; }
  html.vt-nav[data-vt-dir="back"]::view-transition-old(rp-main) { animation-name: vt-out-down; }
  html.vt-nav[data-vt-dir="back"]::view-transition-new(rp-main) { animation-name: vt-in-up; }
}
@keyframes vt-out-up { to { opacity: 0; translate: 0 -24px; } }
@keyframes vt-out-down { to { opacity: 0; translate: 0 24px; } }
@keyframes vt-in-down { from { opacity: 0; translate: 0 24px; } }
@keyframes vt-in-up { from { opacity: 0; translate: 0 -24px; } }
/* Design wechseln: das neue Design breitet sich als Kreis vom Knopf aus aus (extras.js zeichnet den Kreis) */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Aufklappen weich (Browser mit ::details-content; sonst sofort) */
details::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ==========================================================================================================
   Rücksicht: weniger Bewegung, mehr Kontrast, Windows-Kontrastmodus
   ========================================================================================================== */
/* weniger Bewegung: alles sofort – auch Inspektor, Palette, Pille und gestaffeltes Einblenden */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
                           transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: reduce) {   /* eigener Block: ältere Browser kennen ::details-content nicht und verwürfen sonst alles */
  ::details-content { transition: none !important; }
}
/* mehr Kontrast: kräftigere Linien, Inseln und Leiste deckend */
@media (prefers-contrast: more) {
  :root { --border: color-mix(in srgb, var(--text) 32%, transparent); --border-2: color-mix(in srgb, var(--text) 48%, transparent);
          --rule: var(--line-2); --deck-glass: var(--panel); }
}
/* Windows-Kontrastmodus: Lichtkante weg, Signal-Ring mit Rand (Pille, Inseln und Leiste: siehe T2) */
@media (forced-colors: active) {
  body::before { display: none; }
  .lsig { border: 2px solid CanvasText; }
  /* gewählte Zustände, die sonst nur über Tinten-Fläche oder Schatten zu sehen sind */
  :is(.seg, .presets, .lf-sug, .lf-tog, .themes, .bc-seg) button.on, .follow.on { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .subtabs button.on::after, .cm-ptabs button.on::after { forced-color-adjust: none; background: Highlight; }
  .gs-row.sel, .gs-cmd.sel, .moresheet button.on { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ==========================================================================================================
   Öffentliche Seite: der RookieManager, der Bot mit echtem Geld und die Scanner-Einstellungen gibt es nur auf der
   Admin-Seite. Der Trading-Bot bleibt sichtbar – als Übungs-Bot (nur Spielgeld), daher ohne „Echt“.
   Ohne Konto fehlt außerdem alles mit eigenen Daten; mit Konto (body.ko-in, konto.js) hat jeder seine eigenen
   (Merkliste mit Alarmen, Glocke, Wallets, Ausblenden, Gespeichertes, RookieDrop – Server: kontodaten.py)
   ========================================================================================================== */
body.pub button[data-v="manager"], body.pub button[data-v="mgplan"], body.pub button[data-v="mgverlauf"],
body.pub button[data-v="mgkonten"], body.pub .tabs [data-area="manager"],
body.pub [data-bot-pick="live"], body.pub [data-buy-mode="live"], body.pub #applyBtn { display: none !important; }
body.pub:not(.ko-in) :is(button[data-v="suppliers"], button[data-v="trends"], button[data-v="shops"], button[data-v="orders"],
  button[data-v="profit"], [data-remove], [data-alarm-open], [data-lsave], [data-follow], #clearBtn, #addForm, #bellBtn) { display: none !important; }
/* Mehr-Menü (Handy) sammelt alles, was im Dock unsichtbar ist – dort dieselben Regeln */
body.pub .moresheet :is([data-go="manager"], [data-go="mgplan"], [data-go="mgverlauf"], [data-go="mgkonten"]),
body.pub:not(.ko-in) .moresheet :is([data-go="suppliers"], [data-go="trends"], [data-go="shops"], [data-go="orders"],
  [data-go="profit"]) { display: none !important; }

/* Impressum-Angaben (Admin, konto.js koImpressum) */
.ko-imp { display: grid; gap: 10px; margin-top: 10px; }
.ko-imp-f { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
.ko-imp-f :is(input, textarea) { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.ko-imp-f :is(input, textarea):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.ko-imp-hinweis { color: var(--faint); font-size: 12px; }
.soon-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Pflichtseiten /impressum und /datenschutz (recht.py): eigene, ruhige Lesespalte im Stil der Seite */
.recht-seite { min-height: 100vh; }
.recht { box-sizing: border-box; width: min(100%, 760px); margin: 0 auto; padding: clamp(24px, 6vh, 56px) 16px 48px; line-height: 1.6; }
.recht h1 { margin: 10px 0 4px; font-size: clamp(30px, 5vw, 42px); }
.recht h2 { margin: 30px 0 6px; font-size: 20px; }
.recht p, .recht li { color: var(--muted); font-size: 15px; }
.recht strong { color: var(--text); }
.recht a { color: var(--text); text-underline-offset: 3px; }
.recht-kick { color: var(--faint) !important; font: 500 11px/1.4 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; }
.recht-fehlt { padding: 12px 14px; border: 1px dashed var(--rule-2); border-radius: var(--r-md); }
.recht-zurueck a { color: var(--muted); font-size: 14px; text-decoration: none; }
.recht-fuss { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--faint) !important; font-size: 12.5px !important; }
.recht-fuss a { color: var(--muted); }

/* ---------- Öffentliche Seite ohne Anmeldung (27.10.): nur die Startseite und „Anmelden“ – kein App-Gerüst
   (body.gast, konto.js kontoNav). html.pub-vorab (Kopf-Skript) verdeckt das Gerüst, bis klar ist, ob jemand angemeldet ist. */
html.pub-vorab :is(.deck-top, .shell) { visibility: hidden; }
body.gast :is(.deck-top, #side, #moreSheet, #pageHead, .toolbar, #resultbar) { display: none !important; }
body.gast .shell { padding-left: 0; }
body.gast main.wrap { display: block; max-width: 760px; margin: 0 auto; padding: 16px; }
.ko-start { display: inline-flex; align-items: center; gap: 8px; justify-self: center; padding: 8px 14px; border: 1px solid var(--rule);
  border-radius: 99px; background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.ko-start:hover { color: var(--text); border-color: var(--line-2); }
.ko-start .ic { width: 15px; height: 15px; }
/* Übungs-Bot öffentlich pausiert (body.bot-aus, extras.js refresh): Reiter grau, keine Kauf-Knöpfe, Karte grau */
body.bot-aus :is(#tabs [data-v="bot"], .moresheet [data-go="bot"]) { opacity: .42; }
body.bot-aus .botbuy { display: none !important; }

/* ---------- Schriften (26.10.): eigene Kopie von Fraunces, Instrument Sans und Geist Mono (SIL Open Font License), nur
   Latein und Latein-erweitert – einmal von Google Fonts geholt und von unserem Server ausgeliefert (/web/fonts). Vorher
   lud jeder Besuch die Schriften direkt bei Google – das gab die IP-Adresse jedes Besuchers an Google weiter. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/web/fonts/fraunces-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/web/fonts/fraunces-italic-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/web/fonts/fraunces-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/web/fonts/fraunces.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/web/fonts/geist-mono-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/web/fonts/geist-mono.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(/web/fonts/instrument-sans-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(/web/fonts/instrument-sans.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }