:root { color-scheme: dark;
    --bg:#0a0e14; --panel:#11161f; --panel2:#161d29; --border:#1f2734;
    /* --faint war #5b6572 = 3,1:1 auf --bg -> WCAG-AA-Fail, und es traegt
       Nav-Links, alle Eyebrow-Labels und Tabellen-Subzeilen (alles <14px,
       Large-Text-Ausnahme greift nicht). #7a8593 = 4,6:1. */
    --text:#e8edf4; --muted:#8b96a5; --faint:#7a8593;
    /* Ein-Akzent-Disziplin: Gruen/Rot = P/L-Vorzeichen, Amber = Warnung,
       Blau = Benchmark + Links. Sonst monochrom. */
    --green:#34d07c; --red:#f4626e; --amber:#e3b341; --blue:#5aa2ff;
  --violet:#a78bfa;
    --mono:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
    --radius:14px; }
  * { box-sizing: border-box; }
  body { font-family: system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text);
         margin:0; padding:0 1.1rem 3rem; -webkit-font-smoothing:antialiased; }
  header { display:flex; flex-wrap:wrap; align-items:baseline; gap:1.1rem;
           padding-top:1rem; border-bottom:1px solid var(--border); margin-bottom:1.2rem; }
  header h1 { font-family:var(--mono); font-size:.8rem; margin:0; letter-spacing:.1em;
              text-transform:uppercase; color:var(--muted); font-weight:600;
              padding-bottom:.7rem; }
  nav { display:flex; flex-wrap:wrap; gap:1.05rem; }
  nav a { color:var(--faint); text-decoration:none; font-size:.85rem; font-weight:600;
          white-space:nowrap; padding-bottom:.7rem; margin-bottom:-1px;
          border-bottom:2px solid transparent; }
  nav a:hover { color:var(--text); }
  nav a.active { color:var(--text); border-bottom-color:var(--blue); }
  /* Tastaturnavigation war unsichtbar (kein einziger Fokus-Stil im CSS). */
  :focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:3px; }
  /* Sprungmarke: unsichtbar, bis sie den Tastaturfokus bekommt. */
  .skip { position:absolute; left:-9999px; top:0; background:var(--panel2);
          color:var(--text); padding:.6rem 1rem; border-radius:0 0 8px 0;
          border:1px solid var(--blue); z-index:10; }
  .skip:focus { left:0; }
  .logout { font-size:.8rem; color:var(--muted); padding-bottom:.7rem;
            margin-left:1rem; }
  /* Der pulsierende Punkt sagte „live", aber nichts Handfestes und war nicht
     bedienbar. Ersetzt durch den Pause-Knopf: derselbe Platz, gleiche Aussage
     („laedt automatisch nach"), plus die Moeglichkeit, das abzustellen. */
  .rpause { margin-left:auto; font-family:var(--mono); font-size:.72rem;
            color:var(--muted); background:var(--panel); cursor:pointer;
            border:1px solid var(--border); border-radius:7px;
            padding:.2rem .6rem; margin-bottom:.7rem; }
  .rpause:hover { color:var(--text); border-color:var(--faint); }
  .rpause.statisch { color:var(--faint); cursor:default; background:none;
                    border-style:dashed; }
  .rpause[aria-pressed="true"] { color:var(--amber);
            border-color:color-mix(in srgb, var(--amber) 45%, transparent); }
  /* Sektions-Ueberschrift = Eyebrow + Haarlinie (eine Bildsprache mit .zone) */
  h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
       font-weight:700; margin:1.9rem 0 .7rem; display:flex; align-items:center; gap:.7rem; }
  h2::after { content:""; flex:1; height:1px; background:var(--border); }
  h2 span { text-transform:none; letter-spacing:0; color:var(--muted); }
  .bot-title { font-size:1.2rem; font-weight:700; letter-spacing:-.01em; margin:.2rem 0 .4rem; }
  /* Wertbarkeit (EVALUATION.md §2) — die Frage, die am Stichtag zaehlt.
     Bewusst eine ruhige Zeile: „noch nicht wertbar" ist bei einem Bot, der
     erst seit Tagen laeuft, der Normalfall und kein Alarm. */
  .wb { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
        font-size:.8rem; margin:0 0 .9rem; color:var(--muted); }
  .wb-bar { display:inline-block; width:80px; height:5px; border-radius:99px;
            background:#1c2430; overflow:hidden; flex:0 0 auto; }
  .wb-bar i { display:block; height:100%; border-radius:99px; background:var(--blue); }
  .wb-ok { color:var(--text); font-weight:600; }
  .wb-offen { color:var(--muted); font-weight:600; }
  .wb-zahl { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .wb-fehlt { color:var(--faint); }
  /* Wertbarkeits-Tracker (/vergleich): eine Zeile je Bot, sortiert nach
     Fortschritt — unten steht, wer auf „nicht wertbar" zulaeuft. */
  .wt { display:flex; flex-direction:column; gap:.3rem; max-width:56rem;
        margin:.5rem 0 1.4rem; }
  .wt-row { display:grid; grid-template-columns:minmax(8rem,14rem) 1fr 4.2rem 1fr;
            gap:.7rem; align-items:center; font-size:.82rem; }
  .wt-name { text-decoration:none; font-weight:600; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; }
  .wt-name:hover { text-decoration:underline; }
  .wt-bar { height:8px; border-radius:99px; background:#131a24; overflow:hidden; }
  .wt-bar i { display:block; height:100%; border-radius:99px; }
  .wt-zahl { font-family:var(--mono); font-variant-numeric:tabular-nums;
             text-align:right; color:var(--muted); font-size:.78rem; }
  .wt-status { color:var(--faint); font-size:.76rem; white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:760px) {
    .wt-row { grid-template-columns:1fr 4.2rem; }
    .wt-bar { grid-column:1 / -1; } .wt-status { grid-column:1 / -1; }
  }
  .bot-title .muted { font-family:var(--mono); font-weight:400; font-size:.82rem; }
  table { border-collapse:collapse; width:100%; font-size:.86rem; }
  th, td { padding:.45rem .6rem; border-bottom:1px solid var(--border); text-align:left;
           white-space:nowrap; }
  th { color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.72rem;
       letter-spacing:.05em; position:sticky; top:0; background:var(--bg); }
  tr:hover td { background:rgba(90,162,255,.05); }
  .num { text-align:right; font-variant-numeric:tabular-nums; }
  .pos { color:var(--green); } .neg { color:var(--red); } .muted { color:var(--muted); }
  .pill { display:inline-block; padding:.12rem .6rem; border-radius:999px;
          font-size:.78rem; font-weight:600; border:1px solid var(--border); }
  .alerts { background:rgba(244,98,110,.1); border:1px solid rgba(244,98,110,.35);
            border-radius:12px; padding:.7rem 1rem; margin:.9rem 0; }
  .alerts div { padding:.13rem 0; }
  /* --- Triage: Befunde nach Ursache, Kritisches zuerst -------------------
     Frueher war jeder Alarm eine gleich aussehende Zeile in einem roten
     Kasten — bei geschlossenem Markt 28 Stueck, und „Kill-Line gerissen"
     stand mittendrin. Jetzt traegt jede Zeile ihre Stufe in der Farbe des
     linken Streifens, und was normal ist, ist ruhig. */
  .triage { display:flex; flex-direction:column; gap:.35rem; margin:.9rem 0 1.2rem; }
  .tri { display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem;
         align-items:baseline; padding:.5rem .8rem; border-radius:9px;
         border:1px solid var(--border); background:var(--panel);
         border-left-width:3px; font-size:.88rem; }
  .tri-krit { border-left-color:var(--red);
              background:color-mix(in srgb, var(--red) 8%, var(--panel)); }
  .tri-warn { border-left-color:var(--amber);
              background:color-mix(in srgb, var(--amber) 7%, var(--panel)); }
  /* „Markt zu" ist kein Alarm: kein Farbstreifen, gedaempfte Schrift. */
  .tri-info { border-left-color:var(--border); color:var(--muted); }
  .tri-ico { text-align:center; }
  .tri-txt { min-width:0; }
  .tri-krit .tri-txt b { color:var(--red); }
  .tri-warn .tri-txt b { color:var(--amber); }
  .tri-info .tri-txt b { font-weight:600; color:var(--muted); }
  .tri-detail { display:block; font-size:.8rem; color:var(--muted);
                margin-top:.1rem; line-height:1.5; }
  /* Als <details> darf .tri SELBST kein Grid sein — sonst landet das ganze
     summary im 1,4rem schmalen Icon-Feld und der Text bricht Wort fuer Wort
     um. Das Raster wandert eine Ebene tiefer auf das summary. */
  details.tri { display:block; padding:0; }
  details.tri > summary { display:grid; grid-template-columns:1.4rem 1fr;
                          gap:.6rem; align-items:baseline; cursor:pointer;
                          padding:.5rem .8rem; }
  details.tri > summary::marker,
  details.tri > summary::-webkit-details-marker { content:""; display:none; }
  .tri-bots { display:flex; flex-wrap:wrap; gap:.3rem .5rem;
              font-family:var(--mono); font-size:.76rem; color:var(--faint);
              padding:0 .8rem .6rem 2.8rem; }
  .tri-bots span { border:1px solid var(--border); border-radius:6px;
                   padding:.05rem .45rem; white-space:nowrap; }
  /* Der Aufklapp-Hinweis gehoert an die Zeile, die sich aufklappen laesst. */
  details.tri > summary .tri-txt b::after { content:" ▸"; color:var(--faint);
              font-weight:400; font-size:.8em; }
  details.tri[open] > summary .tri-txt b::after { content:" ▾"; }
  .cards { display:flex; flex-wrap:wrap; gap:.8rem; margin:.7rem 0 1.1rem; }
  .card { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--border);
          border-radius:var(--radius); padding:.9rem 1.1rem; min-width:11rem; }
  .card .k { color:var(--muted); font-size:.7rem; text-transform:uppercase;
             letter-spacing:.08em; font-weight:600; }
  .card .v { font-size:1.5rem; font-weight:700; margin-top:.25rem; letter-spacing:-.01em;
             font-family:var(--mono); font-variant-numeric:tabular-nums; }
  /* Diagramme skalieren mit der Breite. Mit festem `height` haette die
     viewBox das Bild nur geschrumpft und im Rahmen zentriert — auf dem
     Telefon blieb oben und unten ein breiter leerer Streifen. */
  /* Deckel 62rem (03.09.2026): ohne ihn skaliert die viewBox mit dem Container —
     auf einem 2.000-px-Monitor wurde ein Chart zum halben Bildschirm. Auf dem
     Handy bleibt es 100 %, darueber scrollt .scroll statt zu schrumpfen. */
  .chart { width:100%; max-width:62rem; height:auto; display:block; }
  .scroll { overflow-x:auto; }
  /* Ein Bereich, den nur die Maus scrollen kann, ist fuer die Tastatur
     eine Sackgasse (axe: scrollable-region-focusable). `tabindex=0`
     macht ihn anfahrbar, danach scrollen die Pfeiltasten. */
  .scroll:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  /* Auf einem Touchscreen ist ein seitlich scrollbarer Bereich unsichtbar —
     man sieht einen abgeschnittenen Rand und haelt ihn fuer kaputt. Der
     Schatten rechts macht sichtbar, dass da noch etwas kommt; er
     verschwindet, sobald bis zum Ende gescrollt ist (scroll-Timeline des
     Browsers, ohne JS). */
  .scroll { background:
      linear-gradient(to right, var(--bg) 30%, rgba(10,14,20,0)) left / 3rem 100% no-repeat,
      linear-gradient(to left, var(--bg) 30%, rgba(10,14,20,0)) right / 3rem 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(122,133,147,.4), rgba(0,0,0,0)) left / .7rem 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(122,133,147,.4), rgba(0,0,0,0)) right / .7rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll; }
  /* --- Tabs (/betrieb) ---------------------------------------------------
     Ein Tab-Wechsel ist ein Seitenaufruf, kein JavaScript: jeder Tab hat eine
     eigene Adresse und laesst sich verlinken — was ein Deep-Link auf einen
     Service-Log braucht. */
  .tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 1.3rem; }
  .tab { font-size:.82rem; font-weight:600; text-decoration:none;
         color:var(--muted); border:1px solid var(--border); border-radius:8px;
         padding:.3rem .8rem; background:var(--panel); }
  .tab:hover { color:var(--text); border-color:var(--faint); }
  .tab.aktiv { color:var(--text); background:var(--panel2);
               border-color:var(--blue); }
  /* --- P/L je Titel: divergierende Balken um eine Nullachse -------------
     Dieselbe Bildsprache wie das Δ-Ranking auf /rennen: Richtung traegt das
     Vorzeichen, Laenge den Betrag. Gruen/Rot bleibt das P/L-Vorzeichen. */
  .at { display:flex; flex-direction:column; gap:.3rem; max-width:52rem;
        margin:.4rem 0 .3rem; }
  .at-row { display:grid; grid-template-columns:6rem 1fr 5.4rem 2.4rem;
            gap:.6rem; align-items:center; font-size:.82rem; }
  .at-sym { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .at-track { display:flex; height:13px; background:#131a24; border-radius:4px; }
  .at-half { flex:1; display:flex; overflow:hidden; }
  .at-half.l { justify-content:flex-end; border-right:1px solid #38424f; }
  .at-half i { display:block; height:100%; border-radius:2px; opacity:.9; }
  .at-val { text-align:right; font-variant-numeric:tabular-nums; }
  .at-n { text-align:right; color:var(--faint); font-size:.72rem; }
  @media (max-width:640px) { .at-row { grid-template-columns:4.5rem 1fr 4.6rem; }
                             .at-n { display:none; } }
  /* --- Systemvertrauen: die Aussage VOR den Zahlen --------------------- */
  .vertrauen { display:flex; flex-direction:column; gap:.25rem;
               border:1px solid var(--border); border-left-width:3px;
               border-radius:10px; padding:.7rem .9rem; margin:0 0 1.3rem;
               background:var(--panel); font-size:.85rem; }
  .vertrauen b { font-size:.92rem; }
  .vertrauen span { color:var(--muted); font-size:.82rem; line-height:1.55; }
  .vertrauen.ok { border-left-color:var(--border); }
  .vertrauen.ok b { color:var(--text); }
  .vertrauen.bad { border-left-color:var(--red);
                   background:color-mix(in srgb, var(--red) 7%, var(--panel)); }
  .vertrauen.bad b { color:var(--red); }
  /* --- Sortierleiste (/bots) --- */
  .sortleiste { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap;
                font-size:.76rem; color:var(--faint); margin:0 0 .8rem; }
  .sortlink { text-decoration:none; color:var(--muted); border-bottom:1px solid transparent; }
  .sortlink:hover { color:var(--text); }
  .sortlink.aktiv { color:var(--text); border-bottom-color:var(--blue); font-weight:600; }
  /* --- Teaser aufs Verzeichnis (Startseite) --- */
  .teaser { display:flex; align-items:center; gap:.8rem; text-decoration:none;
            color:var(--text); background:var(--panel); border:1px solid var(--border);
            border-radius:var(--radius); padding:.75rem 1rem; margin:.2rem 0 .4rem; }
  .teaser:hover { border-color:var(--faint); background:var(--panel2); }
  .tea-ico { font-size:1.1rem; }
  .tea-sub { display:block; font-size:.78rem; color:var(--muted); font-weight:400;
             margin-top:.1rem; }
  .tea-pfeil { margin-left:auto; color:var(--faint); }
  /* --- Bot-Karten: dieselbe Zeile fuer schmale Bildschirme ---------------
     Zehn Spalten passen nicht auf 390 px. Statt Querscrollen (das auf dem
     Telefon niemand findet) wird aus jeder Zeile eine Karte. */
  .nur-schmal { display:none; }
  .bk { display:grid; grid-template-columns:1.6rem 1fr auto;
        grid-template-areas:"rg mitte rechts" "sp sp sp";
        gap:.2rem .7rem; align-items:center; background:var(--panel);
        border:1px solid var(--border); border-radius:10px;
        padding:.6rem .8rem; margin-bottom:.5rem; }
  .bk.breach { border-left:3px solid var(--red); }
  .bk-rg { grid-area:rg; color:var(--faint); font-size:.72rem; }
  .bk-mitte { grid-area:mitte; min-width:0; }
  .bk-nm { font-weight:700; font-size:.86rem; }
  .bk-rechts { grid-area:rechts; text-align:right; }
  .bk-rechts .mono { font-size:.95rem; font-weight:700; }
  .bk-eq { font-size:.74rem; color:var(--muted); }
  .bk-spark { grid-area:sp; margin-top:.2rem; }
  @media (max-width:700px) {
    .nur-breit { display:none; }
    .nur-schmal { display:block; }
    /* Fingerflaeche statt Textzeile: Ein Bot-Name ist 18 px hoch, WCAG 2.2
       (2.5.8) will 24. Am Desktop entscheidet die Maus, hier der Daumen —
       deshalb greift die Vergroesserung nur in dieser Breite und laesst die
       Tabellenzeilen am grossen Bildschirm kompakt. */
    .bk-nm a, td.name a, .wt-name, .name a, .pod .nm a, .rank-name a,
    .sortlink, .vertrauen a, td a { display:inline-block; padding-block:.28rem; }
    /* Die ganze Karte ist das Ziel: der Link darin darf sich strecken. */
    .bk-nm a { width:100%; }
    .sortleiste { gap:.9rem; }
  }
  a { color:var(--blue); }
  pre { background:var(--panel); border:1px solid var(--border); border-radius:10px;
        padding:.8rem; font-size:.78rem; overflow-x:auto; white-space:pre-wrap; }
  .meter { height:6px; border-radius:999px; background:#1c2430; margin-top:.5rem; overflow:hidden; }
  /* Kein transition: die Seite ist server-gerendert, die Breite steht beim
     ersten Paint fest — es gibt keinen Zustandswechsel zu animieren. */
  /* Fortschritt, nicht Gewinn: blau. Gruen wuerde hier dasselbe Signal
     senden wie eine positive P/L-Zahl daneben und beides entwerten. */
  .meter > div { height:100%; border-radius:999px; background:var(--blue); }
  form.login { max-width:22rem; margin:14vh auto;
               background:linear-gradient(180deg,var(--panel2),var(--panel));
               border:1px solid var(--border); border-radius:16px; padding:1.8rem; }
  form.login input { width:100%; margin:.35rem 0 .9rem; padding:.6rem .75rem; background:var(--bg);
                     color:var(--text); border:1px solid var(--border); border-radius:9px; font-size:1rem; }
  form.login button { width:100%; padding:.65rem; background:var(--blue); color:#04122b; border:0;
                      border-radius:9px; font-size:1rem; font-weight:700; cursor:pointer; }
  @media (max-width: 700px) { th, td { padding:.35rem .4rem; font-size:.8rem; }
                              .card .v { font-size:1.3rem; } }

  /* --- Strategie-Steckbrief + Trigger-Diagramm --- */
  .strat-summary { max-width:70ch; line-height:1.6; color:#d4dbe2; margin:.4rem 0 .8rem; }
  .strat-note { max-width:70ch; color:#9aa4b2; font-size:.85rem; margin:.6rem 0 0; }
  .chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 1rem; }
  .chip { display:inline-flex; gap:.4rem; align-items:baseline; font-size:.82rem;
          background:#151b22; border:1px solid #232a33; border-radius:999px;
          padding:.2rem .7rem; }
  .chip-k { color:#9aa4b2; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
  .trig-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
               gap:.9rem; align-items:start; margin:.3rem 0 .4rem; }
  .trig-branches { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
                   gap:.7rem; }
  .trig-col { background:#12171d; border:1px solid #232a33; border-radius:10px;
              padding:.7rem .8rem; }
  .gate { display:block; font-size:.75rem; font-weight:600; letter-spacing:.02em;
          padding:.25rem .55rem; border-radius:7px; margin-bottom:.6rem;
          border:1px solid; }
  .gate-all    { color:#2ecc71; border-color:#245c3a; background:#12281c; }
  .gate-branch { color:#7fb3ff; border-color:#274056; background:#122130; }
  .gate-ladder { color:#b98cff; border-color:#3d2c5c; background:#1c1430; }
  .gate-veto   { color:#f1c40f; border-color:#5c4a1f; background:#2a2410; }
  .gate-exit   { color:#e88; border-color:#5c2b2b; background:#2a1717; }
  .cond-rail { display:flex; flex-direction:column; gap:.5rem;
               border-left:2px solid #2a333e; margin-left:.35rem; padding-left:.7rem; }
  .cond-rail.entry { border-color:#2ecc71; }
  .cond-rail.veto  { border-color:#f1c40f; }
  .cond-rail.exit  { border-color:#e74c3c; }
  .cond { display:flex; gap:.5rem; align-items:baseline; position:relative; }
  .cond .dot { position:absolute; left:-1.02rem; top:.45rem; width:.5rem; height:.5rem;
               border-radius:50%; background:#2a333e; box-shadow:0 0 0 3px #12171d; }
  .cond-rail.entry .dot { background:#2ecc71; }
  .cond-rail.veto  .dot { background:#f1c40f; }
  .cond-rail.exit  .dot { background:#e74c3c; }
  .cond-txt { display:flex; flex-direction:column; }
  .cond-txt b { font-size:.88rem; font-weight:600; }
  .cond-txt span { font-size:.78rem; color:#9aa4b2; line-height:1.4; }
  .outcome { margin:.7rem 0 0; font-size:.85rem; font-weight:600; padding:.35rem .6rem;
             border-radius:7px; }
  .outcome.entry { color:#2ecc71; background:#12281c; border:1px solid #245c3a; }
  .ladder { display:flex; flex-direction:column; gap:.45rem; }
  .ladder-step { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:.5rem;
                 align-items:center; }
  .ladder-n { width:1.4rem; height:1.4rem; border-radius:50%; background:#1c1430;
              color:#b98cff; border:1px solid #3d2c5c; font-size:.75rem; font-weight:600;
              display:flex; align-items:center; justify-content:center; }
  .ladder-cond b { font-size:.85rem; font-weight:600; }
  .ladder-arrow { color:#9aa4b2; }
  .ladder-out { font-size:.82rem; color:#c8d2dc; }
  @media (max-width:640px) {
    .ladder-step { grid-template-columns:auto 1fr; }
    .ladder-arrow { display:none; }
    .ladder-out { grid-column:2; color:#9aa4b2; font-size:.78rem; }
  }

  /* --- Live-Checkliste (letzter Scan) --- */
  .lc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
             gap:.7rem; margin:.3rem 0 .3rem; }
  .lc-card { background:#12171d; border:1px solid #232a33; border-radius:10px;
             padding:.6rem .75rem; }
  .lc-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.45rem;
             flex-wrap:wrap; }
  .lc-head b { font-size:.92rem; }
  .lc-badge { font-size:.7rem; font-weight:600; padding:.12rem .5rem;
              border-radius:999px; border:1px solid; }
  .lc-go   { color:#2ecc71; border-color:#245c3a; background:#12281c; }
  .lc-wait { color:#9aa4b2; border-color:#2a333e; background:#151b22; }
  .lc-row { display:flex; align-items:flex-start; gap:.45rem; padding:.18rem 0;
            font-size:.84rem; }
  /* Gedimmt, aber lesbar: `opacity:.55` druckte den Kontrast der
     Ist-Werte auf 3,05:1 (WCAG verlangt 4,5). Dass die Daten alt sind,
     sagt ohnehin schon der Kopf der Karte — die Zahlen selbst sind die
     letzten BEKANNTEN und muessen lesbar bleiben. */
  .lc-row.lc-stale { opacity:.85; }
  .lc-ico { width:1.1rem; text-align:center; flex:0 0 auto; }
  .lc-body { flex:1 1 auto; min-width:0; }
  .lc-line { display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
  .lc-label { flex:1 1 auto; }
  /* Der Ist-Wert einer Bedingung („vol_scale = 0,881 | atr_pct = 1,4") war
     der einzige Text im Live-Check mit `white-space:nowrap` — und damit der
     Grund, warum die Bot-Seite quer scrollte.
     Der erste Anlauf hing das Umbrechen an `max-width:700px`. Das war die
     falsche Frage: Nicht der BILDSCHIRM ist eng, sondern die KARTE. Auf dem
     Tablet (768 px) steht der Live-Check in einer schmalen Spalte, die
     Regel griff nicht, und die Seite lief 64 px über den Rand.
     `overflow-wrap:anywhere` fragt nach dem verfügbaren Platz statt nach der
     Viewport-Breite: Wo der Wert passt, bleibt er auf einer Zeile. */
  .lc-val { font-family:ui-monospace,monospace; font-size:.78rem; color:#9aa4b2;
            margin-left:auto; min-width:0; overflow-wrap:anywhere; }
  .lc-line { gap:.2rem .45rem; }
  .lc-bar { height:4px; background:#1c232c; border-radius:99px; margin-top:.25rem;
            overflow:hidden; }
  .lc-bar-fill { height:100%; border-radius:99px; }
  .lc-meter { font-size:.72rem; color:#9aa4b2; background:#151b22;
              border:1px solid #2a333e; border-radius:999px; padding:.1rem .5rem; }

  /* --- Cockpit: Statuszeile, Hero-Zahl, Podium, Renn-Tabelle, Fokus-Chart ---
     Zwei Blickzonen: "laeuft alles?" (Statuswort + Vitalwerte) und "wer fuehrt?"
     (Hero-P/L, Podium, Tabelle). Prinzipien: extremer Groessenkontrast,
     Farbe nur semantisch, Zustand in Form (Meter/Streifen) statt Spaltenlesen. */
  .status { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;
            margin:1.1rem 0 1.4rem; }
  .st-word { display:flex; align-items:center; gap:.55rem; }
  .st-word .dot { width:11px; height:11px; border-radius:50%; }
  .st-word b { font-size:1.45rem; letter-spacing:.06em; font-weight:800; }
  .status.ok   .dot { background:var(--green); box-shadow:0 0 12px rgba(52,208,124,.7); }
  .status.warn .dot { background:var(--amber); box-shadow:0 0 12px rgba(227,179,65,.7); }
  .status.crit .dot { background:var(--red);   box-shadow:0 0 12px rgba(244,98,110,.7); }
  .status.warn .st-word b { color:var(--amber); }
  .status.crit .st-word b { color:var(--red); }
  .st-note { color:var(--muted); font-size:.85rem; max-width:34ch; }
  .vitals { display:flex; gap:1.4rem; flex-wrap:wrap; margin-left:auto; }
  .vital { display:flex; flex-direction:column; gap:.12rem; }
  .vital .k { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
              color:var(--faint); font-weight:600; }
  .vital .v { font-family:var(--mono); font-size:.85rem; color:#c8d2dc;
              font-variant-numeric:tabular-nums; }
  .vital .v.ok { color:var(--green); } .vital .v.bad { color:var(--red); }
  .vital .v.warn { color:var(--amber); }
  .statline { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; margin:.2rem 0 1.3rem; }
  .rchip { font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em;
           border:1px solid; border-radius:6px; padding:.14rem .5rem; }
  .hero { display:flex; align-items:flex-end; gap:2.2rem; flex-wrap:wrap; margin:0 0 .5rem; }
  .hero .hk { font-size:.62rem; text-transform:uppercase; letter-spacing:.12em;
              color:var(--faint); font-weight:700; margin-bottom:.3rem; }
  .hero .big { font-family:var(--mono); font-size:3.2rem; font-weight:700; line-height:1;
               letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .hero .big small { font-size:1rem; color:var(--muted); font-weight:600;
                     letter-spacing:0; margin-left:.35rem; }
  .hero-side { display:flex; gap:1.8rem; flex-wrap:wrap; padding-bottom:.3rem; }
  .hero-side .v { font-family:var(--mono); font-size:1.15rem; font-weight:600;
                  font-variant-numeric:tabular-nums; }
  .zone { font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
          color:var(--faint); font-weight:700; margin:1.7rem 0 .6rem;
          display:flex; align-items:center; gap:.6rem; }
  .zone::after { content:""; flex:1; height:1px; background:var(--border); }
  .podium { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
            gap:.7rem; margin-bottom:.9rem; }
  .pod { background:linear-gradient(180deg,var(--panel2),var(--panel));
         border:1px solid var(--border); border-radius:var(--radius);
         padding:.75rem .9rem; position:relative; }
  .pod.first { border-color:rgba(52,208,124,.45); }
  .pod .rk { position:absolute; top:.65rem; right:.8rem; font-family:var(--mono);
             font-size:.7rem; color:var(--faint); }
  .pod .nm { font-weight:700; font-size:.95rem; }
  .pod .act { color:var(--muted); font-size:.74rem; margin:.15rem 0 .45rem; }
  .pod .pl { font-family:var(--mono); font-size:1.55rem; font-weight:700;
             font-variant-numeric:tabular-nums; line-height:1.1; }
  .pod .eq { font-family:var(--mono); font-size:.9rem; font-weight:600; color:#c8d2dc;
             font-variant-numeric:tabular-nums; margin-top:.1rem; }
  .pod .eq .k { color:var(--faint); font-size:.62rem; text-transform:uppercase;
                letter-spacing:.1em; font-weight:700; margin-right:.4rem; }
  .pod svg { display:block; margin-top:.4rem; }
  .rkd { font-family:var(--mono); font-size:.72rem; }
  /* Rang-Aenderung: die Richtung traegt der Pfeil, nicht die Farbe — ein
     Platz gutgemacht ist kein verdientes Geld. */
  .rk-up, .rk-dn { color:var(--muted); } .rk-eq { color:var(--faint); }
  td.name b { font-size:.86rem; }
  td.name .sub { display:flex; align-items:center; gap:.35rem;
                 font-size:.7rem; color:var(--faint); }
  .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .risk { display:inline-block; width:64px; height:5px; border-radius:99px;
          background:#1c2430; overflow:hidden; vertical-align:middle; }
  /* Der Risiko-Puffer ist ein ZUSTAND, kein Ertrag: im Normalfall ruhig,
     erst amber, wenn er knapp wird (.risk.warn). */
  .risk i { display:block; height:100%; border-radius:99px; background:var(--faint); }
  .risk.warn i { background:var(--amber); }
  /* Gerissen: VOLL und rot. Ein leerer Balken sah aus wie „kein
     Risiko" — ausgerechnet beim ausgeschiedenen Bot. */
  .risk.gerissen i { background:var(--red); }
  /* Einsatz-Balken (2026-08-25): long/short nebeneinander statt einer
     einzigen Bruttozahl. Ein Buch mit 10 long und 10 short steht netto
     bei ~0 und sah bis dahin aus wie 'gar nicht investiert'. Breite =
     Anteil am Brutto, NICHT am Budget — der Hebel steht als Zahl daneben. */
  .expo { display:inline-flex; width:74px; height:5px; border-radius:99px;
          background:#1c2430; overflow:hidden; vertical-align:middle; }
  .expo i { display:block; height:100%; }
  .expo i.l { background:var(--faint); }
  .expo i.s { background:var(--violet); }
  .expo-x { font-size:.72rem; color:var(--muted); margin-left:.4rem;
            font-variant-numeric:tabular-nums; }
  .expo-x.warn { color:var(--amber); font-weight:600; }
  tr.breach td:first-child { box-shadow:inset 3px 0 0 var(--red); }
  .chart-leg { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.4rem;
               font-size:.78rem; color:var(--muted); }
  .chart-leg i { display:inline-block; width:14px; height:3px; border-radius:2px;
                 vertical-align:middle; margin-right:.35rem; }
  .bstat { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); }
  .bstat .bd { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
  /* Zustandspunkte: „haelt eine Position" ist der Normalfall und darf
     nicht so aussehen wie ein Gewinn. Auffallen soll die Abweichung. */
  .bd-hold { background:var(--faint); } .bd-ready { background:var(--blue); }
  .bd-wait, .bd-idle { background:var(--faint); }
  /* --- Zustandsstufen: nur die ABWEICHUNG traegt Farbe ------------------
     Ein gesundes System ist ruhig. Vorher stand im Services-Tab ein gruener
     Haken neben einem 676 Stunden alten Lebenszeichen — das Haekchen meinte
     „eingeschaltet", las sich aber als „laeuft". Jetzt faerbt sich nur, was
     nicht stimmt, und das Wort steht daneben. */
  .zu-warn .bd { background:var(--amber); }
  .zu-warn { color:var(--amber); }
  .zu-krit .bd { background:var(--red); }
  .zu-krit { color:var(--red); }
  .zu-wort { font-size:.72rem; opacity:.85; }
  .legend { font-size:.75rem; color:var(--muted); margin:.55rem 0 0; line-height:1.6; max-width:75ch; }
  /* Erklaerungen und Aeltere aufklappbar statt als Dauer-Absatz: 15 Zeilen
     Legende unter einer Tabelle sind das Eingestaendnis, dass die Tabelle sich
     nicht selbst erklaert — gebraucht werden sie trotzdem, aber nicht bei
     jedem Blick. */
  .mehr { margin-top:.4rem; }
  .mehr > summary { font-size:.75rem; color:var(--faint); cursor:pointer;
                    padding:.45rem 0; font-family:var(--mono); letter-spacing:.02em; }
  .mehr > summary:hover { color:var(--text); }
  @media (max-width:700px) { .hero .big { font-size:2.2rem; }
                             .vitals { margin-left:0; } }

  /* --- Vergleich: divergierende Delta-Balken um eine gemeinsame Null-Achse ---
     Frueher: Balkenlaenge = |Return|/max|Return| -> der groesste VERLIERER war
     der Skalenanker, das Vorzeichen steckte nur in der Farbe, und bei enger
     Spanne (Normalzustand der ersten Wochen) sahen alle 23 Balken gleich aus.
     Jetzt: Nullachse in der Mitte, Ausschlag = Delta zum Benchmark in
     Basispunkten. Richtung traegt das Vorzeichen, Laenge den Betrag. */
  .rank { display:flex; flex-direction:column; gap:.35rem; margin:.4rem 0 .3rem;
          max-width:62rem; }
  .rank-row { display:grid; grid-template-columns:1.6rem minmax(7rem,1fr) 20rem 4.6rem 4.6rem;
              align-items:center; gap:.7rem; font-size:.85rem; }
  .rank-n { text-align:right; color:var(--faint); font-family:var(--mono); font-size:.78rem; }
  .rank-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rank-name a { text-decoration:none; }
  .rank-name a:hover { text-decoration:underline; }
  /* Zwei gleich breite Haelften; die Nullachse liegt exakt auf 50 %. */
  .rank-track { position:relative; height:15px; background:#131a24; border-radius:4px;
                display:flex; }
  .rank-half { flex:1; display:flex; overflow:hidden; }
  .rank-half.l { justify-content:flex-end; border-right:1px solid #38424f; }
  .rank-fill { height:100%; opacity:.9; border-radius:2px; }
  .rank-val { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono);
              font-size:.8rem; }
  .rank-abs { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono);
              font-size:.78rem; color:var(--muted); }
  .rank-row.is-bench .rank-name { color:var(--blue); }
  .rank-row.flat .rank-val { color:var(--muted); }
  .rank-grp { display:flex; align-items:baseline; gap:.6rem; margin:1.1rem 0 .45rem;
              font-size:.76rem; }
  .rank-grp b { font-weight:700; letter-spacing:.02em; }
  .rank-grp span { color:var(--faint); font-family:var(--mono); font-size:.72rem; }
  .rank-head { display:grid; grid-template-columns:1.6rem minmax(7rem,1fr) 20rem 4.6rem 4.6rem;
               gap:.7rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
               color:var(--faint); font-weight:700; margin:.5rem 0 .1rem; max-width:62rem; }
  .rank-head .c { text-align:center; } .rank-head .r { text-align:right; }
  /* KI-Spalte im Cockpit: ZWEI Stufen, nicht ja/nein. `ki-on` heisst, Claude
     sitzt im Orderpfad — faellt er aus, aendert sich das Handeln. `ki-soft`
     heisst, er liefert nur ein Merkmal. Genau diese Unterscheidung ist der
     Kern des KI-Experiments, ein einziger Marker wuerde sie platt machen. */
  /* Lern-Seite: der Reifegrad-Hinweis ist Teil der Funktion, nicht Deko.
     Bei kleinem n stehen einzelne Koeffizienten im Rauschen — eine Seite, die
     zwoelf Zahlen zeigt, ohne das zu sagen, laedt zur Ueberinterpretation ein. */
  .lern-hinweis { font-size:.85rem; padding:.55rem .8rem; border-radius:8px;
                  border-left:3px solid var(--border); background:var(--panel2);
                  margin:.5rem 0 1rem; }
  .lern-hinweis.warn { border-left-color:var(--amber); }
  .lern-hinweis.ok   { border-left-color:var(--green); }
  .big.warn { color:var(--amber); }
  td.ki, td.expo-td { white-space:nowrap; }
  .ki-on, .ki-soft { font-size:.7rem; letter-spacing:.02em; padding:.08rem .34rem;
                     border-radius:999px; border:1px solid transparent; }
  .ki-on   { color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, transparent);
             font-weight:600; }
  .ki-soft { color:var(--muted); border-color:var(--border); }
  /* Richtungs-Kennzeichen: bis 2026-08-25 unterschied NUR das Minuszeichen
     bei 'Stueck' einen Short von einem Long — ein Zeichen in einer
     Zahlenspalte. Farben wie beim Einsatz-
     Balken: Long grau (Normalfall, soll ruhig bleiben), Short violett
     (Ausnahme, soll auffallen). Gruen/Rot bleiben dem P/L-Vorzeichen,
     Blau der Benchmark, Amber den Warnungen. */
  .ls { font-size:.62rem; font-weight:700; letter-spacing:.06em;
        padding:.04rem .3rem; border-radius:4px; border:1px solid transparent;
        margin-left:.35rem; vertical-align:.05rem; }
  .ls-l { color:var(--faint); border-color:var(--border); }
  .ls-s { color:var(--violet); border-color:color-mix(in srgb, var(--violet) 45%, transparent);
          background:color-mix(in srgb, var(--violet) 10%, transparent); }
  .h2-sub { font-weight:400; color:var(--muted); font-size:.8rem;
            text-transform:none; letter-spacing:0; }
  .asof { font-size:.76rem; color:var(--muted); margin:.1rem 0 .9rem;
          font-variant-numeric:tabular-nums; }
  @media (max-width:820px) {
    .rank-row, .rank-head { grid-template-columns:1.4rem minmax(6rem,1fr) 1fr 4.2rem; }
    .rank-abs, .rank-head .abs { display:none; }
  }

  /* --- Letzte Fills: lesbar statt breit ---------------------------------
     Vorher lief die Tabelle über die volle Fensterbreite (2000 px): zwischen
     Bot und Preis lagen Handbreit Leere, das Auge musste jede Zeile abfahren.
     Jetzt gedeckelt, Spalten so schmal wie ihr Inhalt, Zahlen rechtsbündig
     mit tabular-nums, damit Stellen untereinander stehen. */
  table.schmal { max-width:48rem; }
  table.fills { max-width:66rem; }
  table.fills th, table.fills td { padding:.34rem .55rem; }
  .fills .fx-t   { color:var(--faint); width:3.6rem; }
  .fills .fx-bot { font-weight:600; }
  .fills .fx-sym { color:#c8d2dc; }
  .fills .fx-q   { color:var(--muted); white-space:nowrap; }
  .fills .fx-x   { color:var(--faint); padding:0 .1rem; }
  .fills .fx-v   { font-weight:600; }
  .fills .fx-s   { width:4rem; }
  /* Tagesband statt 25× dasselbe Datum in der Zeitspalte */
  .fills tr.fx-day td { background:#0d1219; color:var(--muted);
    font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
    font-weight:700; padding:.3rem .55rem; border-bottom:1px solid var(--border); }
  .fills tr.fx-day + tr td { border-top:0; }
  /* Seite: Pfeil (▲/▼) trägt die RICHTUNG, Farbe das realisierte P/L —
     grün = mit Gewinn verkauft, rot = mit Verlust. Grün/Rot bleibt damit
     ausschließlich das P/L-Vorzeichen (Farbdisziplin). Ein Kauf realisiert
     nichts → neutral; ein Verkauf ohne P/L-Info (alt/Break-even) auch. */
  .fx-side { font-size:.74rem; font-weight:600; white-space:nowrap;
             border:1px solid var(--border); border-radius:6px;
             padding:.08rem .42rem; }
  .fx-neutral { color:var(--muted); }
  .fx-gain { color:var(--green); border-color:rgba(52,208,124,.4);
             background:rgba(52,208,124,.06); }
  .fx-loss { color:var(--red); border-color:rgba(244,98,110,.4);
             background:rgba(244,98,110,.06); }
  .fx-slip-bad { color:var(--red); font-weight:600; }    /* teurer als Ask */
  .fx-slip-odd { color:var(--amber); font-weight:600; }  /* |>100| bps: messen, nicht handeln */
  .fx-leg { text-transform:none; letter-spacing:0; color:var(--faint);
            font-weight:400; font-size:.72rem; }
  @media (max-width:700px) { .fills .fx-v, .fills th:nth-child(6) { display:none; } }

  /* --- AI-Berichte: gerendertes Markdown statt <pre>-Rohtext --- */
  .md-report { max-width:82ch; }
  .md-h { font-weight:700; letter-spacing:-.01em; line-height:1.3; }
  .md-h1 { font-size:1.45rem; margin:1.6rem 0 .6rem; }
  .md-h2 { font-size:1.15rem; margin:1.5rem 0 .5rem; color:var(--text); }
  .md-h3 { font-size:1rem; margin:1.2rem 0 .4rem; color:#c8d2dc; }
  .md-h4 { font-size:.9rem; margin:1rem 0 .3rem; color:var(--muted);
           text-transform:uppercase; letter-spacing:.06em; }
  .md-report p { line-height:1.65; margin:.55rem 0; color:#d4dbe2; }
  .md-report strong { color:var(--text); font-weight:700; }
  .md-ul { line-height:1.7; margin:.4rem 0 .9rem; padding-left:1.25rem; color:#d4dbe2; }
  .md-ul li { margin:.15rem 0; }
  .md-hr { border:0; border-top:1px solid var(--border); margin:1.5rem 0; }
  table.md-table { margin:.5rem 0 1rem; font-size:.85rem; }
  table.md-table td:not(:first-child), table.md-table th:not(:first-child) {
    text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }

  /* --- Bot-Journal: lesbare Zeilen statt key=value-Dump --- */
  .jrow { display:grid; grid-template-columns:4.2rem 1fr; gap:.7rem;
          padding:.4rem .1rem; border-bottom:1px solid var(--border);
          align-items:baseline; }
  .jrow .jt { color:var(--faint); font-family:var(--mono); font-size:.76rem; }
  .jrow .jbody { min-width:0; }
  .jrow .jhead { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
  .jrow .jlabel { font-weight:600; font-size:.9rem; }
  .jrow .jsub { color:var(--muted); font-size:.82rem; }
  .jrow .jmono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .jrow.jerr .jlabel { color:var(--red); }
  .jrow.jwarn .jlabel { color:var(--amber); }
  .j-note { color:var(--muted); font-size:.82rem; margin-top:.15rem;
            line-height:1.5; max-width:75ch; }
  /* Gefaltete Wiederholungen (16x „Tages-Scan"). <details> statt eigenem
     Skript: nativ per Tastatur bedienbar und ohne JS. Die Kopfzeile traegt
     dieselbe Rasterung wie eine .jrow, damit die Spalten durchlaufen. */
  .jgrp { border-bottom:1px solid var(--border); }
  /* summary bleibt ein Block: dann zeichnet der Browser seinen eigenen
     Aufklapp-Pfeil (wie bei den uebrigen Aufklappern der Seite), und die
     Zeitspanne — laenger als ein einzelner Stempel — bricht nicht im
     4,2rem-Raster der Einzelzeilen um. */
  .jgrp > summary { padding:.4rem .1rem; cursor:pointer; }
  .jgrp > summary > span { margin-right:.7rem; }
  .jgrp > summary .jt { white-space:nowrap; }
  .jgrp > summary:hover { background:rgba(90,162,255,.05); }
  .jgrp[open] > summary { border-bottom:1px solid var(--border); }
  .jgrp .jcount { font-family:var(--mono); font-size:.78rem; color:var(--muted);
                  font-variant-numeric:tabular-nums; }
  .jgrp.jwarn .jlabel { color:var(--amber); }
  .jgrp.jerr .jlabel { color:var(--red); }
  .jgrp > .jrow { padding-left:1.1rem; border-bottom:0; }
  .jgrp > .jrow:first-of-type { padding-top:.5rem; }

  /* --- Trigger-Nähe (entwirrt): Bedingungs-Balken + eine Kurve --- */
  .cbar { display:flex; align-items:center; gap:.6rem; font-size:.84rem; margin:.35rem 0; }
  .cbar-l { width:14rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cbar-t { flex:1; height:14px; background:#161d29; border-radius:7px; overflow:hidden; }
  .cbar-f { height:100%; opacity:.85; }
  .cbar-v { width:3rem; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
  .cbar-blk { color:var(--amber); font-size:.72rem; }
  .fazit { display:flex; gap:.6rem; background:#12171d; border:1px solid #232a33;
           border-radius:10px; padding:.7rem .85rem; margin:.4rem 0 .8rem; font-size:.88rem;
           line-height:1.55; }