/* Kennzahlenliste: links Begriff, rechts Wert. Kommt in „Allgemeines" dreimal vor. */ .kv { display: grid; gap: 0; } .kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-2); font-size: 12.5px; } .kv > div:last-child { border-bottom: 0; } .kv .k { color: var(--muted); } .kv .v { font-weight: 650; font-variant-numeric: tabular-nums; } /* Umschalter ueber der Kurve */ .seg { display: inline-flex; background: rgba(255,255,255,.04); border: 1px solid var(--border-2); border-radius: 8px; padding: 2px; } .seg button { background: none; border: 0; color: var(--muted); padding: 4px 12px; border-radius: 6px; font-size: 11.5px; cursor: pointer; font-family: inherit; font-weight: 600; } .seg button.on { background: var(--accent-soft); color: var(--text); } /* Stundenbalken „Netto G/V nach Handelszeit" */ .hours { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 128px; margin-top: 4px; } .hours .h { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .hours .h span { border-radius: 3px 3px 0 0; display: block; } .hourlbl { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; font-size: 9px; color: var(--dim); text-align: center; margin-top: 5px; } /* ---- Ringanzeiger: Verlust · Breakeven · Gewinn (20.08.2026) ---- Die Zahlen stehen NEBEN dem Ring, nicht darin: In einen unten offenen Bogen von 92 px passen zwei Zeilen nur, wenn man sie so klein macht, dass niemand sie liest. Dieselbe Bauform wie die Kachel „Gewinntage" im Dashboard. */ /* ---- Die Kachel „Trades": Ring links, Tabelle rechts (20.08.2026) ---- Befund Dirk mit Bild: „die eine braucht ganz viel Platz, die anderen sind halb leer". Gemessen war das genau so — alle drei Kacheln der Reihe 295 px hoch, weil ein Raster seine Zellen gleich hoch macht; „Ergebnis" hatte davon 120 px leer, „Extreme" 94 px. Verursacht hat es diese Kachel, die als EINZIGE zwei Blöcke übereinander stapelte. Nebeneinander ist sie so hoch wie ihr höherer Teil, und die Reihe schrumpft mit. */ .tr-karte { display: grid; /* 118 px ist die Ringspalte: 88 px Ring plus etwas Luft für die Punktreihe darunter. Die zweite Spalte `minmax(0, 1fr)` — NICHT `1fr` —, sonst darf sie nicht unter ihre Inhaltsbreite schrumpfen und schiebt die Kachel auf schmalen Fenstern auseinander. */ grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: start; } /* Ohne Trades bleibt der Ring leer — dann soll die Tabelle die ganze Breite haben und nicht neben einer leeren Spalte kleben. */ .tr-karte:has(#tradesRing:empty) { grid-template-columns: minmax(0, 1fr); } .tr-karte:has(#tradesRing:empty) #tradesRing { display: none; } /* Die Zahl in der Mitte des Bogens. Der Ring ist unten offen, seine Mitte also frei — `position: absolute` über dem SVG, nicht daneben. */ .ring-mitte { position: relative; width: 88px; height: 88px; margin: 0 auto; } /* ⚠️ DIE ZAHL STEHT GENAU IN DER MITTE — dort ist am meisten Platz, und der wird bei dreistelligen Werten gebraucht (Befund Dirk mit Bild, 20.08.2026: „mit einer 1 vorne geht das ja noch, aber mach mal 99 oder sogar 100 % — da wird das dort oben etwas eng"). Vorher stand sie 8 px höher, damit sie im unten offenen Bogen optisch mittig WIRKT. Das war ein Schönheitsgriff mit einem Preis, den man nur bei „17,0" nicht sieht: Der Innenraum ist ein KREIS, seine nutzbare Breite nimmt nach oben und unten ab. Auf Höhe der Mitte sind es 68 px, 8 px darüber nur noch rund 51 — und „100,0" trägt 61. Die Zahl wäre also genau in dem Fall angestoßen, in dem sie am meisten zu sagen hat. Das Prozentzeichen wandert dafür nach unten in die Lücke des Bogens (Vorgabe Dirk). Dort ist ohnehin nichts, und die Zahl bekommt die volle Mitte. */ .ring-proz { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* In der Lücke: Der Bogen lässt unten 90° frei, seine Enden liegen bei y ≈ 77 px. Das Zeichen sitzt darunter, mittig — es berührt keine Kappe, weil es nur rund 10 px breit ist und die Enden 28 px seitlich der Mitte liegen. */ .ring-proz i { /* 2 px statt 0: Nachgemessen ragte das Zeichen sonst 1 px unter den Ringkasten und liess nur 3 px zur Zeile darunter. */ position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; } /* Zahl gross, Prozentzeichen klein in der Lücke darunter (Vorgabe Dirk, 20.08.2026). ⚠️ 25 PX IST NICHT GESCHÄTZT, SONDERN DIE GRENZE. Der Innenraum ist ein Kreis mit 34 px Radius (88 px Ring minus zweimal 10 px Strichbreite, halbiert). Gemessen wurde die tatsächliche Schwärzung von „100,0" — dem breitesten Wert, den es geben kann — gegen diesen Kreis: 24 px → 59,9 × 20 px Tinte → 2,4 px Luft 25 px → 61,9 × 21 px Tinte → 1,3 px Luft ← hier 26 px → 64,9 × 21 px Tinte → berührt den Ring ⚠️ NICHT AM ZEILENKASTEN MESSEN. Der ist rund 12 px höher als die Ziffern und meldet schon bei 25 px eine Kollision, die es nicht gibt. Wer danach geht, macht die Zahl unnötig klein; wer gar nicht misst, merkt es erst an dem einen Tag, an dem jeder Trade im Plus war. */ .ring-proz b { font-size: 25px; font-weight: 650; line-height: 1.05; letter-spacing: -0.5px; } .ring-proz i { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.1; } .ring-unter { margin-top: 4px; text-align: center; } .ring-unter .b { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .ring-teile { display: flex; justify-content: center; gap: 9px; margin-top: 5px; color: var(--muted); font-size: 11.5px; } .ring-teile span { display: flex; align-items: center; gap: 5px; } /* Ein Punkt in der Farbe des Bogens — er ersetzt die Beschriftung. Ohne ihn muesste danebenstehen, welche Farbe was bedeutet, und das ist mehr Text als Aussage. */ .ring-teile i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ---- Die Kennzahl-Zeilen (20.08.2026) ---- Vorher standen Grösse und Abstand als Stilangaben in `zeile()` — an neun Kacheln zugleich festgeschraubt und an keiner änderbar. Jetzt hier, und etwas grösser: 13 px statt 12,5 und 5,5 px Luft statt 4. Das füllt die Kachel, statt die Zeilen unten zusammenzudrängen und oben Platz zu lassen. */ .kz-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 5.5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .kz-zeile .k { color: var(--muted); } /* ⚠️ NICHT UMBRECHEN. Zwei Gründe: Ein Wort, das über zwei Zeilen läuft, macht die Zeile doppelt so hoch wie ihre Nachbarn in derselben Rasterzeile — und `kennzahlGitter()` misst an diesen beiden Feldern, wie breit eine Spalte mindestens sein muss. Ein Umbruch würde die Messung kleinrechnen (siehe die Begründung dort). */ .kz-zeile .k, .kz-zeile .num { white-space: nowrap; } /* ---- Mehrere Kennzahlen nebeneinander (20.08.2026) ---- Vorher stand jede Kennzahl allein in ihrer Zeile, Wort links, Zahl rechts — dazwischen klaffte auf einem breiten Schirm die halbe Kachel (Befund Dirk mit Bild: „ich sehe in dem Bild mehr als genügend Platz"). Jetzt füllen zwei bis drei Paare die Breite. `--kz-min` kommt aus `kennzahlGitter()` in seite.js: die breiteste Zeile DIESER Kachel. Der Vorgabewert 200px gilt nur, falls das Messen ausbleibt — dann lieber zu wenige Spalten als abgeschnittene Wörter. */ .kz-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kz-min, 200px), 1fr)); column-gap: 20px; } /* Im Raster bekommt JEDE Zeile ihre Linie — auch die letzte. Die Ausnahme für das letzte Kind stammte aus der einspaltigen Liste; im Raster hätte sie nur EINE der beiden Zellen der untersten Zeile erwischt und die Kachel sähe unten ausgefranst aus. */ /* ---- Ranglisten: eine Spalte mehr (20.08.2026) ---- Die Rangspalte ist schmal und fest — sie trägt höchstens zwei Ziffern, und sie soll sich nicht mit den Zahlenspalten die Breite teilen. Der Rest ist dasselbe Raster wie bei jeder anderen Gruppentabelle; die Begründung der Mindestbreiten steht dort. */ /* ⚠️ ÜBER DIE VARIABLE, nicht über eine zweite `grid-template-columns`-Angabe. Sonst stünden zwei Rasterangaben gegeneinander, und welche gewinnt, hängt an der Reihenfolge der Dateien — das ist keine Grundlage. */ .gr-liste.mit-platz { --gr-spalten: 34px minmax(70px, 1fr) repeat(4, minmax(60px, 1fr)); } /* Der Platz steht als Zahl da, nicht als Auszeichnung: Wer Erster ist, sieht man am Netto daneben. Eine Medaille wäre eine Wertung, die die Zahl schon enthält. */ .gr-liste.mit-platz .platz { color: var(--dim); font-variant-numeric: tabular-nums; } /* Die ersten drei etwas kräftiger — sie sind der Grund, warum man eine Rangliste liest. */ .gr-liste.mit-platz .gr-zeile:nth-child(2) .platz, .gr-liste.mit-platz .gr-zeile:nth-child(3) .platz, .gr-liste.mit-platz .gr-zeile:nth-child(4) .platz { color: var(--text); font-weight: 650; } /* Gruppen unter der Mindestzahl Trades: sichtbar, aber zurückgenommen — sie stehen da, ohne einen Platz zu beanspruchen. */ .gr-zeile.duenn { opacity: .55; } .gr-zeile.duenn .platz { color: var(--dim); font-weight: 400; } /* ---- Verteilung von MAE und MFE (21.08.2026) ---- Zwei gleich grosse Haelften. `.grid-2g` waere hier falsch: Das ist ein Raster fuer KARTEN, hier stecken beide Bilder in EINER Karte. */ .vt-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 12px; } .vt-kopf { font-size: 12.5px; font-weight: 650; } .vt-zahlen { display: flex; flex-wrap: wrap; gap: 12px; margin: 3px 0 8px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .vt-zahlen b { font-weight: 650; } /* Was jenseits des 98. Perzentils liegt, ist NICHT verschwunden — es steht hier. */ .vt-rest { color: var(--dim); } /* ⚠️ `position: relative` IST DER ANKER FUER FADENKREUZ UND ABLESEKASTEN. Ohne ihn richten sich beide am naechsten positionierten Vorfahren aus — irgendwo auf der Seite. */ .vt-flaeche { position: relative; height: 120px; cursor: crosshair; } /* Fuellt die Flaeche ohne die drei Pixel Grundlinien-Abstand eines Inline-Elements. */ .vt-svg { display: block; width: 100%; height: 100%; } /* Der Durchschnitt durchgezogen (danach hat Dirk gefragt), der Median gestrichelt. Beide heller als die Kurve, damit sie darueber liegen statt darin zu verschwinden. */ .vt-schnitt { stroke: rgba(255,255,255,.85); stroke-width: 1.6; } .vt-median { stroke: rgba(255,255,255,.40); stroke-width: 1.2; stroke-dasharray: 4 4; } .vt-kreuz { stroke: var(--accent); stroke-width: 1.2; } /* Der Kasten am Fadenkreuz. `pointer-events: none` ist Pflicht: Sonst faehrt die Maus ueber den eigenen Kasten, die Flaeche meldet `mouseleave`, das Kreuz verschwindet — und erscheint sofort wieder. Das flackert und sieht nach einem Fehler aus. */ .vt-lesen { position: absolute; bottom: 4px; display: none; pointer-events: none; background: var(--card-fest); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; white-space: nowrap; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; transform: translateX(6px); } .vt-lesen.rechts { transform: translateX(-6px); } /* Die Achse: absolut gesetzte Marken statt eines Rasters — sie stehen an den WERTEN (0, 25, 50 …), und die liegen nicht in gleichen Abstaenden von Zellen. */ .vt-achse { position: relative; height: 15px; margin-top: 4px; color: var(--dim); font-size: 10.5px; font-variant-numeric: tabular-nums; } .vt-achse span { position: absolute; transform: translateX(-50%); } /* Die 0 ganz links wuerde sonst halb aus der Karte ragen. */ .vt-achse span:first-child { transform: none; } /* Eine kurze Erklaerung UNTER der Ueberschrift (nicht am Fuss der Karte). */ .karten-kopfnote { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-top: -2px; } @media (max-width: 700px) { /* Nebeneinander waeren beide Kurven auf einem Telefon je 130 px breit — untereinander bleibt jede lesbar. */ .vt-paar { grid-template-columns: minmax(0, 1fr); } /* ⚠️ DER ABLESEKASTEN IST BREITER ALS DIE KARTE. "1.100 von 1.257 Trades bei 29,0 Ticks oder weniger" braucht rund 250 px in einer 278 px breiten Karte — in der Mitte stehend ragt er hinaus (nachgemessen auf 375 px). Also darf er hier umbrechen; zwei Zeilen sind besser als ein abgeschnittener Satz. */ .vt-lesen { white-space: normal; max-width: 60%; line-height: 1.35; } }