/* * Chart-Modul (ChartPanel) — 1:1 nach docs/finnavigator_chart-window_v1.html * (Bauplan, Niko-Abnahme 05.06.2026). Präfix cw-. Nur var(--fn-*)-Tokens. */ /* Screenreader-only (z.B. Tabellen-): global statt gescopt, weil mehrere Chart-Komponenten dieselbe Klasse auf eigenes Markup setzen. Blazor scoped CSS haengt an der definierenden Komponente — ein zweites/drittes .cw-*-Tile mit .sr-only bekam die Regel nie und rendert sichtbar statt versteckt (Befund 25.08.2026, ChartExplanationLineHistory-Kachel „Zeitliche Wahrheit der Trendlinien"). Ab der zweiten Wiederholung gehoert die Regel global, nicht ein drittes Mal gescopt. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cw-body { display: flex; height: 100%; min-height: 320px; overflow: hidden; } /* Shared two-stage enlargement for the watchlist/security-detail ChartPanel. Stage 1 fills only .fn-app-main between the shell sidebars; stage 2 fills the complete viewport. */ .cw-body.cw-workspace-expanded { position: fixed; inset: 0 var(--fn-news-sidebar-width, 0) 0 var(--fn-sidebar-width, 0); z-index: var(--fn-layer-workspace); height: auto !important; min-height: 0; background: var(--fn-bg); } .cw-body.cw-viewport-expanded { position: fixed; inset: 0; z-index: var(--fn-layer-viewport); height: auto !important; min-height: 0; background: var(--fn-bg); } /* ===== Steuerspalte links ===== */ .cw-controls { width: 228px; flex: 0 0 228px; border-right: var(--fn-border-width) solid var(--fn-border); background: var(--fn-bg-muted); padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } /* Ein-/ausklappbar mit dem Seitenleisten-Doppelpfeil (SidebarToggle, 22.08.2026): Look und Drehung liegen in SidebarToggle.razor.css — hier nur die Position bündig an der chartzugewandten rechten Kante. */ .cw-controls-head { display: flex; align-items: center; justify-content: flex-end; } .cw-controls.collapsed { width: 44px; flex: 0 0 44px; padding: 12px 8px; overflow: hidden; } .cw-controls.collapsed > *:not(.cw-controls-head) { display: none; } .cw-controls.collapsed .cw-controls-head { justify-content: center; } .cw-group h4 { font-size: 10.5px; font-weight: var(--fn-font-weight-bold); letter-spacing: .10em; text-transform: uppercase; color: var(--fn-text-tertiary); margin: 0 0 8px 0; } .cw-toggles { display: flex; flex-wrap: wrap; gap: 6px; } .cw-toggle { font-family: var(--fn-font); font-size: 11.5px; font-weight: var(--fn-font-weight-medium); color: var(--fn-text-secondary); background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius-pill); padding: 4px 10px; cursor: pointer; transition: all .14s; } .cw-toggle:hover { color: var(--fn-text); border-color: var(--fn-border-strong); } .cw-toggle.on { color: var(--fn-primary); border-color: var(--fn-accent-line); background: var(--fn-accent-soft); } .cw-select { width: 100%; background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); border-radius: 8px; color: var(--fn-text); font-family: var(--fn-font); font-size: 12px; padding: 6px 8px; margin-top: 6px; } /* Compact toolbar variant: content-width, inline (NOT the full-width sidebar select). */ .cw-toolbar .cw-select { width: auto; margin-top: 0; } /* SMA-/MACD-Preset-Listen: Spalten stabil untereinander darstellen. Nur explizit markierte Preset-Selects, damit Muster-/Zeitraum-Selects unberührt bleiben. */ .cw-preset-select { font-family: var(--fn-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: center; text-align-last: center; } .cw-preset-select option { font-family: var(--fn-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: center; white-space: pre; } .cw-tf-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--fn-text-tertiary); margin-left: 4px; } .cw-hint { font-size: 10.5px; color: var(--fn-text-tertiary); margin-top: 6px; line-height: 1.45; } /* VWAP-Optionsblock (Variante 1, 1:1 zur VORSCHAU-VWAP-Chart-Studio): teal-gerahmter Kasten mit Segment-Control (Session/Kumulativ/Anchored) + zwei Checkbox-Zeilen. Nur --fn-*-Tokens. */ .cw-vwap-opt { margin-top: 8px; background: var(--fn-bg-muted); border: var(--fn-border-width) solid var(--fn-cat-teal); border-radius: var(--fn-radius-sm); padding: 9px 10px; } .cw-vwap-opt .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--fn-cat-teal); margin-bottom: 6px; font-weight: 600; } .cw-seg { display: flex; border: var(--fn-border-width) solid var(--fn-border-strong); border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .cw-seg button { flex: 1; font-family: var(--fn-font); font-size: 11px; padding: 5px 4px; background: var(--fn-bg-alt); color: var(--fn-text-secondary); border: none; border-right: var(--fn-border-width) solid var(--fn-border-strong); cursor: pointer; transition: all .14s; } .cw-seg button:last-child { border-right: none; } .cw-seg button:hover:not(.on):not(:disabled) { color: var(--fn-text); } .cw-seg button.on { background: var(--fn-cat-teal); color: var(--fn-on-primary); font-weight: 600; } .cw-seg button:disabled { opacity: .5; cursor: not-allowed; } .cw-opt-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--fn-text-secondary); margin-top: 5px; cursor: pointer; background: none; border: none; padding: 0; text-align: left; width: 100%; font-family: var(--fn-font); } .cw-opt-row:disabled { opacity: .5; cursor: not-allowed; } .cw-chk { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; border: var(--fn-border-width) solid var(--fn-border-strong); background: var(--fn-bg-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--fn-cat-teal); font-size: 10px; } .cw-chk.on { background: var(--fn-teal-soft, rgba(45,212,191,0.12)); border-color: var(--fn-cat-teal); } .cw-switch-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); border-radius: 8px; color: var(--fn-text); font-family: var(--fn-font); text-align: left; padding: 9px 10px; cursor: pointer; } .cw-switch-row:hover { border-color: var(--fn-border-strong); } .cw-switch-row span { min-width: 0; display: grid; gap: 3px; } .cw-switch-row b { font-size: 12px; font-weight: var(--fn-font-weight-bold); } .cw-switch-row small { color: var(--fn-text-tertiary); font-size: 10.5px; line-height: 1.35; } .cw-switch-row i { position: relative; width: 38px; height: 20px; flex: 0 0 38px; border-radius: var(--fn-radius-pill); background: var(--fn-input-bg); border: var(--fn-border-width) solid var(--fn-border); } .cw-switch-row i::after { content: ""; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; border-radius: 50%; background: var(--fn-text-tertiary); transition: transform .14s, background .14s; } .cw-switch-row.on i { border-color: var(--fn-success); background: var(--fn-success-soft); } .cw-switch-row.on i::after { transform: translateX(18px); background: var(--fn-success); } .cw-seg { display: flex; border: var(--fn-border-width) solid var(--fn-border); border-radius: 8px; overflow: hidden; } .cw-seg button { flex: 1; font-family: var(--fn-font); font-size: 11.5px; font-weight: var(--fn-font-weight-medium); color: var(--fn-text-secondary); background: transparent; border: none; padding: 6px 0; cursor: pointer; white-space: nowrap; } .cw-seg button + button { border-left: var(--fn-border-width) solid var(--fn-border); } .cw-seg button.on { color: var(--fn-on-primary); background: var(--fn-primary); } /* ===== Chart-Bereich ===== */ .cw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: calc(var(--fn-log-panel-height, 0px) + 12px); } /* ChartPanel-Stage: rechts der Steuerspalte; trägt die Top-Leiste (Raster·Zeitraum·Intervall) und darunter entweder eine volle Zelle (Layout 1) oder das Raster (Layout 2/3/4). */ /* Stage scrollt intern (sichtbarer Balken); .cw-body wird per JS (fnChart.fitHeight) auf die Viewport-Resthoehe begrenzt, damit dieser Scroll ueberhaupt greift (statt Overlay-Dokumentscroll). */ .cw-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .cw-stage > .cw-main { flex: 1; } /* Sichtbarer, getönter Scrollbalken für die scrollenden Bereiche (Einzel-Chart = .cw-main, Raster = .cw-stage). Nur ::-webkit-scrollbar (KEIN scrollbar-width:thin — das würde in Chromium die Breite auf Overlay/0 ziehen) -> klassischer, immer sichtbarer Balken in Chrome/Edge. */ .cw-main::-webkit-scrollbar, .cw-stage::-webkit-scrollbar { width: 12px; } .cw-main::-webkit-scrollbar-track, .cw-stage::-webkit-scrollbar-track { background: var(--fn-input-bg); } .cw-main::-webkit-scrollbar-thumb, .cw-stage::-webkit-scrollbar-thumb { background: var(--fn-primary); border-radius: 6px; border: 3px solid var(--fn-input-bg); } .cw-main::-webkit-scrollbar-thumb:hover, .cw-stage::-webkit-scrollbar-thumb:hover { background: var(--fn-primary-hover, var(--fn-primary)); } /* Raster-Layouts 1:1 aus dem Chart-Studio (Konzept §7: Split = ChartPanel-Funktion). 3 = einer groß oben, zwei kleine darunter; 2/4 = gleich große Zellen. */ /* Begrenzte Workspace-Höhe, damit das Raster in die Seite passt (kein 5000px-Stapel). Die Zellen teilen sich diese Höhe über die grid-template-rows; ECharts skaliert in die Zelle. Konzept §10: Höhe gehört in die Komponente, nicht als Host-Hack. */ /* Raster als vertikaler Stapel: Chart-Zeilen (höhenverstellbar per Splitter) + aufklappbarer Detailbereich. Ziehen eines Splitters ändert die Höhe der Zeile DARÜBER; der Detailbereich nimmt den Rest — bei eingeklapptem Detail wächst stattdessen die letzte Chart-Zeile. Höhen pro Nutzer/Raster gespeichert. */ .cw-vstack { flex: 0 0 auto; height: 72vh; min-height: 460px; display: flex; flex-direction: column; padding: 12px 16px; } /* Im Schwebefenster (FnFloatingWindow, z. B. ChartAnalysisWindow) hat .cw-body KEINE JS-gemanagte Viewport-Resthoehe (FillViewport=false, siehe ChartPanel.razor + fn-chart.js fitHeight) — die feste 72vh-Hoehe (bemessen fuer die volle Chart-Studio-Seite) hat dort nichts mit der tatsaechlichen Fenstergroesse zu tun: mal zu gross (die Detail-Kacheln werden dann in den .cw-vdetail-Rest gequetscht, teils bis auf dessen min-height von 42px), mal zu klein (unnoetige interne Scrollbar auf .cw-stage). Im Fenster stattdessen den von der Flex-Kette wirklich verfuegbaren Platz ausfuellen (Niko 25.07.2026: „Kacheln werden abgeschnitten" + „Chart hat unnoetigen Scrollbalken"). */ .fn-window-body .cw-vstack { height: auto; flex: 1 1 auto; min-height: 0; } /* Niko 26.07.2026: Chart + Detail-Info = EINE Einheit — KEIN eigener Scrollbalken für die Detail-Kacheln. Nur der INNERE Overflow der Detail-Kette wird aufgelöst (overflow:auto → visible); das Flex-Verhalten (.cw-vdetail: flex 1 1 auto = „Detail nimmt den Rest") bleibt UNVERÄNDERT, damit der Höhen-Splitter .cw-vsplit-detail exakt weiterarbeitet. Muss überhaupt gescrollt werden, übernimmt das der gemeinsame .cw-stage (Chart + Detail zusammen). Nur im Schwebefenster; die volle Chart-Studio-Seite bleibt (fitHeight/Stage-Scroll) unverändert. */ .fn-window-body .cw-vdetail { overflow: visible; } .fn-window-body .cw-vdetail-body { overflow: visible; } .cw-vrow { flex: 0 0 auto; min-height: 90px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cw-vrow.cw-vrow-full { grid-template-columns: minmax(0, 1fr); } /* ============================================================================ Schieberspalte rechts - ersetzt die Griffe INNERHALB des Charts. Abgenommene Vorschau: docs/concepts/VORSCHAU-Chart-Ebenen-Schieber-2026-08-30.html (Niko 30.08.2026: "ich finde die Schieberegler in A und in rechts positioniert als beste Loesung. Zumal man die Scrollbars auch rechts vermutet - dann haben wir hier keinen Bruch in einer erwarteten Bedienung.") WARUM der Umbau: Der fruehere .cw-pane-grip lag absolut UEBER der Zeichenflaeche und wurde ueber vier voneinander abhaengige Pixelwerte platziert (left 56, right 32, margin-top 20, Versatz 9.5) plus einen Sonderfall top: calc(100% - 46px) fuer den letzten. Jede Korrektur an einem Wert verschob die anderen - daher die drei gemeldeten Fehler vom 30.08.2026: Griffe auf unterschiedlichen X-Positionen, zu nah am Zeitbalken, Griff auf einem Band. Die Spalte hat eigenen Platz (das ECharts-Raster gibt rechts entsprechend nach), ueberdeckt nichts und braucht keinen einzigen Ausgleichswert. NICHT betroffen: .cw-vsplit zwischen den Chart-Zeilen - der ist bereits ein Element im Fluss und funktioniert. ============================================================================ */ .cw-pane-lanes { position: absolute; top: 0; right: 0; bottom: 0; width: var(--cw-lane-width, 24px); display: flex; flex-direction: column; z-index: 4; pointer-events: none; /* nur die Kaesten nehmen Zeiger an */ } .cw-pane-lane { position: relative; margin: var(--cw-lane-gap, 3px) var(--cw-lane-inset, 4px); min-height: var(--cw-lane-min, 24px); border: var(--fn-border-width) solid var(--fn-border); border-radius: 3px; background: var(--fn-bg-muted); pointer-events: auto; } /* Fuellung zeigt, wie viel Hoehe die Ebene innerhalb ihrer Grenzen hat. */ .cw-pane-lane-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 2px 2px; background: rgba(92, 200, 255, .28); /* fillerColor des Zeitstrahls, unveraendert */ pointer-events: none; } /* Griffkasten mit drei Strichen - dieselbe Metapher wie der Schieber in der Mitte des Zeitstrahls (ECharts moveHandle), nur senkrecht. */ .cw-pane-knob { position: absolute; left: 50%; transform: translateX(-50%); width: var(--cw-knob-w, 16px); height: var(--cw-knob-h, 11px); border-radius: 2px; background: var(--fn-primary); border: var(--fn-border-width) solid var(--fn-primary-hover, var(--fn-primary)); display: grid; place-items: center; cursor: ns-resize; touch-action: none; z-index: 2; } .cw-pane-knob::before { content: ''; width: 8px; height: 5px; border-top: 1px solid var(--fn-on-primary, #06121f); border-bottom: 1px solid var(--fn-on-primary, #06121f); box-shadow: 0 2px 0 -1px var(--fn-on-primary, #06121f); } .cw-pane-knob:hover, .cw-pane-lane.is-dragging .cw-pane-knob { background: var(--fn-primary-hover, var(--fn-primary)); box-shadow: 0 0 10px var(--fn-accent-soft); } /* Nur eine Ebene vorhanden: nichts zu verteilen - der Balken bleibt sichtbar, damit die Spalte nicht wegspringt, ist aber gesperrt. */ .cw-pane-lane.is-locked { opacity: .45; } .cw-pane-lane.is-locked .cw-pane-knob { cursor: not-allowed; } /* Der Chart-Wirt traegt die Schieberspalte - ohne Bezugspunkt haengt sie an der Seite. */ .cw-chart-host { position: relative; } .cw-vsplit { flex: 0 0 14px; margin: 4px 0; display: flex; align-items: center; justify-content: center; cursor: row-resize; touch-action: none; } .cw-vsplit span { width: 66px; height: 5px; border-radius: 999px; background: var(--fn-primary); box-shadow: 0 0 12px var(--fn-accent-soft); } .cw-vsplit:hover span { background: var(--fn-primary-hover, var(--fn-primary)); } /* Der Splitter zwischen Gesamtchart und Kachelbereich sitzt DIREKT AUF DEM CHART - genau wie der Splitter zwischen zwei Chartzeilen (Niko 31.08.2026: "ich wuerde mir wuenschen das das Panel unten im unteren Griff verschwindet und der griff direkt auf dem Chart sitzt wie der mittlerer Griff"). Er erbt .cw-vsplit deshalb vollstaendig - Hoehe, Rand und Pille. Frueher trug er eine eigene Rahmenkante als Pseudoelement, die den unteren Bereich wie einen Panelkopf abschloss; diese Sonderbehandlung ist ersatzlos entfallen. Die 4 px Luft zum Zeitraum-Balken (Niko 29.08.2026) bleiben erhalten, weil .cw-vsplit margin: 4px 0 traegt. Eigen bleibt allein der Stacking-Kontext: ohne ihn verschwindet der Griff hinter dem Canvas, sobald dieser bis an die Unterkante reicht. */ .cw-vsplit-detail { position: relative; z-index: 5; } .cw-vsplit:focus-visible { outline: 2px solid var(--fn-primary); outline-offset: -2px; } .cw-vsplit[aria-disabled="true"] { cursor: not-allowed; opacity: .45; } .cw-vdetail { flex: 1 1 auto; min-height: 42px; display: flex; flex-direction: column; overflow: hidden; } /* Der Abstand UNTER der Trennkante entspricht dem darueber (Niko 31.08.2026: "der Abstand oben ist ok - den gleichen fuer unten uebernehmen"). Gemessen: oben 4 px, unten 10 px. Die 10 px bringt die geteilte Komponente FnDisclosureGroup mit (.fn-disclosure{margin-top:10px}). Sie gelten weiterhin ZWISCHEN den Kachelgruppen und werden dort nicht angetastet - nur die erste Gruppe unter der Kante wird angeglichen. WARUM NICHT :first-child (am 31.08.2026 gemessen und verworfen): Das erste Kind des Detailbereichs ist section.cs-positions, und die traegt display:none, solange keine Positionen anzuzeigen sind. :first-child traf damit ein unsichtbares Element und blieb wirkungslos. Der Geschwister-Kombinator trifft dagegen zuverlaessig: Die erste sichtbare Gruppe hat keine .fn-disclosure vor sich, jede weitere schon. SPEZIFITAET (am 31.08.2026 gemessen): FnDisclosureGroup ist bereichsbezogenes CSS und kompiliert zu .fn-disclosure[b-xxx] - das sind ebenfalls zwei Gewichte. Bei Gleichstand gewinnt die spaeter geladene Datei, und das gebuendelte Komponenten-CSS kommt nach fn-chart.css. Die Regel braucht deshalb ein drittes Gewicht (.cw-vdetail davor), sonst bleibt sie wirkungslos - genau das ist beim ersten Versuch passiert. */ .cw-vdetail > .cw-vdetail-body > .fn-disclosure { margin-top: 4px; } .cw-vdetail > .cw-vdetail-body > .fn-disclosure ~ .fn-disclosure { margin-top: 10px; } .cw-vdetail-body { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Einzel-Layout (Chart-Studio Raster 1, eingebettetes Detail, Schwebefenster): Legende, Chart-Karte (.cw-chart-host margin 0 16px) und Kursspanne stehen 16 px eingerueckt — die Kachelgruppen darunter bekommen denselben Einzug, damit Karte und Gruppen buendig sind (Niko 22.08.2026). Im Raster 2–4 sind die Zellen randbuendig, dort bleibt die Gruppe es auch. */ .cw-vstack-single .cw-vdetail-body { padding: 0 16px; } .cw-vdetail-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 6px; background: transparent; border: 0; border-top: var(--fn-border-width) solid var(--fn-border); color: var(--fn-text-secondary); font-family: var(--fn-font); font-size: 12px; font-weight: var(--fn-font-weight-medium); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .cw-vdetail-head:hover { color: var(--fn-text); } .cw-vdetail-head .cw-caret { color: var(--fn-primary); font-size: 10px; } .cw-vstack.detail-collapsed .cw-vdetail { flex: 0 0 auto; } .cw-vstack.detail-collapsed .cw-vrow-last { flex-grow: 1; } .cw-cell { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius); background: var(--fn-bg-alt); cursor: pointer; } /* Aktive Zelle: sauberer Rahmen rundum. KEIN inset-Schatten (den überdeckte der Zellen-Kopf oben). */ .cw-cell.active { border-color: var(--fn-primary); } .cw-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border-bottom: var(--fn-border-width) solid var(--fn-border); background: var(--fn-bg-muted); } /* Pro-Zelle Zeitraum/Intervall (jede Zelle eigene Zeit) — wie im Chart-Studio. */ .cw-cell-tf { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; } .cw-cell-tf-select { font-family: var(--fn-font-mono); font-size: 10.5px; line-height: 1; color: var(--fn-primary); border: var(--fn-border-width) solid var(--fn-primary); background: color-mix(in srgb, var(--fn-primary) 10%, transparent); border-radius: var(--fn-radius-pill); padding: 3px 6px; cursor: pointer; } .cw-cell-tf-select:hover { border-color: var(--fn-primary); } .cw-cell-tf-select option { background: var(--fn-bg-alt); color: var(--fn-text); } .cw-cell .cw-main { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: visible; } .cw-cell .cw-legend { flex: 0 0 auto; padding: 7px 11px 0; } .cw-cell .cw-chart-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .cw-cell .cw-chart-wrap .cw-chart-host { flex: 1 1 auto; min-height: 0; height: 100%; margin: 4px 8px 10px; overflow: hidden; } /* Analog zur Raster-Zelle oben: auch der eingebettete Einzel-Chart mit Detailbereich soll den Chart-Host exakt auf die vom Nutzer gezogene Zeilenhoehe (RowHeight(0)/flex-basis) ausfuellen, statt die eigene 52vh-Hoehe weiter unten zu verlangen (Niko 26.07.2026: "wenn ich maximiere ist dann immer noch ein Scrollbalken im Chart"). FEHLERURSACHE der letzten zwei Versuche (26.07.2026, per DOM-Nachverfolgung in ChartCanvas.razor endgueltig gefunden): ChartCanvas rendert IMMER
als eigenes Wurzelelement. Im eingebetteten Einzel-Chart (EmbeddedDetail/!Opt.AllowSplit) ist .cw-main daher ein DIREKTES Kind von .cw-vrow; .cw-chart-wrap liegt aber NOCH EINE EBENE TIEFER, als Kind von .cw-main - der vorige Selektor ".cw-vrow > .cw-chart-wrap" verlangte also einen direkten Eltern-Kind-Bezug, der in Wahrheit nie bestand (".cw-vrow > .cw-main > .cw-chart-wrap") und hat deshalb NIE gegriffen, unabhaengig vom Inhalt der Regel. In der Raster-Zelle liegt .cw-main dagegen unter .cw-cell (".cw-vrow > .cw-cell > .cw-main"), nie direkt unter .cw-vrow - ".cw-vrow > .cw-main" trifft daher NUR den eingebetteten Einzel-Chart und schliesst die Raster-Zelle strukturell aus (nicht nur per Spezifitaet/Reihenfolge). */ .cw-vrow > .cw-main .cw-chart-wrap { flex: 1 1 auto; min-height: 0; } .cw-vrow > .cw-main .cw-chart-wrap .cw-chart-host { flex: 1 1 auto; min-height: 0; height: 100%; } /* Der Abstand zur globalen Log-Leiste gehoert ausschliesslich an den aeusseren Seiteninhalt. ChartCanvas verwendet fuer den eingebetteten Einzel-Chart ebenfalls .cw-main. Ohne diese strukturell begrenzte Ruecksetzung reserviert die innere Chartzeile dieselben 44 px ein zweites Mal und der Gesamtchart-Griff haengt sichtbar unter dem Zeitraum-Balken. */ /* Gemeldeter Fehler (Niko 29.08.2026): "wenn ich den untersten Griff nach oben bewege dann schiebt dieser die Kacheln unter das Chart und der Balken ueberlagert das Chart". Live auf fin-test gemessen: beim Hochziehen des Gesamtchart-Griffs schrumpft .cw-vrow von 414 auf 154 px, waehrend .cw-chart-host und die Canvas bei 373/371 px stehen bleiben - das Chart ragt 259 px ueber seine Zeile und ueberdeckt die Kacheln um 243 px. Ursache ist die Flexbox-Grundregel, nicht der Splitter: Ein Flex-Element hat min-height:auto und schrumpft NIE unter seinen Inhalt. .cw-chart-wrap und .cw-chart-host tragen ihr min-height:0 bereits (Zeilen darunter) - nur .cw-main, das Glied direkt in der Zeile, fehlte es. Damit endete die Kette einen Schritt zu frueh, und die Hoehe erreichte den Chart nie. Bewusst hier und nicht an der globalen .cw-main-Regel: .cw-main ist ausserhalb des Charts der scrollende Seiteninhalt; dort waere min-height:0 eine Verhaltensaenderung. Der Kindselektor trifft NUR den eingebetteten Einzel-Chart (siehe Begruendung der Nachbarregeln). */ .cw-vrow > .cw-main { padding-bottom: 0; min-height: 0; } .cw-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: var(--fn-border-width) solid var(--fn-border); /* Reicht die Breite nicht (z. B. COT-Studio mit Vergleichsleiste + Detailspalte), bricht die rechte Sektion (Werkzeuge/Status) sauber in eine 2. Zeile um — statt zu überlappen oder zu scrollen. Labels bleiben voll (kein Squeeze). Niko 11.07.2026. */ flex-wrap: wrap; row-gap: 8px; flex: 0 0 auto; /* bleibt oben sichtbar, waehrend der Chart-/Detailbereich darunter scrollt */ position: sticky; top: 0; z-index: var(--fn-layer-chart-header); background: var(--fn-bg-muted); } /* Controls must keep their natural width — the toolbar scrolls instead of squeezing them (sonst wird der aktive Button zum Splitter und Labels wie "1 Std"/"Max" werden abgeschnitten). Only the status may yield. */ .cw-toolbar > *:not(.cw-status) { flex-shrink: 0; } /* Raster · Zeitraum · Intervall mittig; Werkzeuge/Status rechts. Gleich breite Spacer links/rechts zentrieren die Gruppe. */ .cw-tf-spacer { flex: 1 1 0; } .cw-tf-group { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } /* Rechte Sektion (Werkzeuge + Status) darf NICHT unter ihre Werkzeugbreite kollabieren — sonst läuft der Inhalt nach links über die Intervall-Gruppe (Overlap, Niko 11.07.2026). min-content = Breite der Werkzeuge (Status ist schrumpfbar, s.u.); reicht der Platz nicht, scrollt die Toolbar (overflow-x) statt zu quetschen. */ .cw-toolbar-right { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: min-content; } .cw-seg-h { display: inline-flex; border: var(--fn-border-width) solid var(--fn-border); border-radius: 8px; overflow: hidden; } .cw-seg-h button { font-family: var(--fn-font); font-size: 11.5px; font-weight: var(--fn-font-weight-medium); color: var(--fn-text-secondary); background: transparent; border: none; padding: 5px 11px; cursor: pointer; flex-shrink: 0; white-space: nowrap; } .cw-seg-h button + button { border-left: var(--fn-border-width) solid var(--fn-border); } .cw-seg-h button.on { color: var(--fn-on-primary); background: var(--fn-primary); } /* Stub-Bar-Warnung am Intervall-Knopf (Timeframe-Vorschau 21.08.2026): 11px-Dreieck im Warnton, auf dem aktiven Knopf in der Kontrastfarbe. Tooltip traegt den ehrlichen Grund. */ .cw-seg-h button .cw-tf-warn { display: inline-flex; margin-left: 4px; color: var(--fn-warning); vertical-align: middle; } .cw-seg-h button .cw-tf-warn .fn-icon, .cw-seg-h button .cw-tf-warn svg { width: 11px; height: 11px; } .cw-seg-h button.on .cw-tf-warn { color: var(--fn-on-primary); } /* Status weicht als Einziges: schrumpft und wird bei Platzmangel mit Ellipsis abgeschnitten (statt die Werkzeuge zu überlagern). flex 0 1 auto + min-width:0 machen die Ellipsis in einem Flex-Item wirksam. */ .cw-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-text-tertiary); white-space: nowrap; } /* Kurs-Update-Balken in der Toolbar (VORSCHAU-Kurs-Update-Balken-Chartleiste, Niko 21.08.2026): fester Verlauf gruen->gelb->rot ueber die Taktbreite; die roten letzten 5 Sekunden = Kurs bereits alt. */ .cw-sync { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .cw-sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fn-success); flex: 0 0 auto; } .cw-sync.paused .dot { background: var(--fn-text-tertiary); } .cw-sync .lbl { font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-text-secondary); white-space: nowrap; } .cw-sync .lbl b { color: var(--fn-text); font-weight: 600; } .cw-sync .lbl .stale { color: var(--fn-danger); font-weight: 600; } .cw-sync-track { position: relative; width: 150px; height: 7px; border-radius: 4px; overflow: hidden; background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); } .cw-sync-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--fn-success) 0%, var(--fn-success) 45%, var(--fn-warning) 66%, var(--fn-danger) 100%); background-size: 150px 100%; background-repeat: no-repeat; } .cw-sync-stale-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--fn-danger) 70%, transparent); } /* Werkzeuge behalten immer ihre volle Breite (nie schrumpfen) — sie sind Aktionen, kein Beiwerk. */ .cw-tools { display: flex; gap: 6px; flex: 0 0 auto; } .cw-tool { /* 30x30 steht als Zahl in der Design-Vorgabe §4c ("`.cw-tool` 30x30"); bis zum 06.09.2026 waren es 26 - der Wert war nie an der Vorgabe gemessen worden. */ width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); border-radius: 6px; color: var(--fn-text-secondary); cursor: pointer; font-size: 12px; } .cw-tool:hover { color: var(--fn-text); border-color: var(--fn-border-strong); } /* Lucide-SVGs im Werkzeug-Button auf Emoji-Maß begrenzen — ohne Regel rendert das SVG 24px und sprengt den 26px-Button (Nikos Befund 23.07., layers-Icon). */ .cw-tool svg { width: 14px; height: 14px; } .cw-tool.on { color: var(--fn-cat-purple); border-color: var(--fn-cat-purple); } /* Positions-Waechter in der Werkzeugzeile (Niko 06.09.2026, „hinter dem Polygon-ICON und vor dem Erweiterte Handelszeiten"). Er ist das geteilte `FnHeaderActionButton` — Ton, Zaehl-Blase und Ungesehen-Punkt bringt es aus der abgenommenen Vorschau mit (fn-dialog-actions.css). Hier steht deshalb NUR die Einpassung in die Zeile: dieselbe Flaeche wie die Nachbarn. Bis zum 06.09.2026 standen hier ein eigener Knopf (.cw-tool-guard) und eine eigene Blase. Beides war ein Eigenbau gegen Design-Vorgabe §3c und wich in jedem Wert von der abgenommenen Blase ab. */ .cw-tools .fn-window-control { width: 30px; height: 30px; background: var(--fn-bg-alt); border-color: var(--fn-border); border-radius: 6px; } /* Ueberfahren EXAKT wie bei `.cw-tool`: nur Textfarbe und Rahmen, keine wechselnde Flaeche. Das geteilte Bauteil faerbt im Kopf zusaetzlich die Flaeche und nimmt `--fn-primary` als Rahmen - in dieser Zeile spraenge der Waechter damit heraus (Niko 07.09.2026: „die ICONS sind alle gleich in dieser Reihe, bitte dieses genauso implementieren"). Glyphengroesse stimmt bereits: das Bauteil zeichnet 14x14, `.cw-tool svg` ebenfalls. */ .cw-tools .fn-window-control:hover { background: var(--fn-bg-alt); color: var(--fn-text); border-color: var(--fn-border-strong); } /* Zustand wie bei den Nachbarn: aktiv faerbt Icon UND Rahmen (Niko 07.09.2026: „sobald es aktiv ist bekommt es einen gruenen Rahmen und wird dann auch gruen eingefaerbt - schaue wie es andere ICONS in der Reihe machen"). Vorbild ist `.cw-tool.on`, das genau das tut: `color` UND `border-color`. Das geteilte Bauteil setzt bisher nur die Farbe (fn-dialog-actions.css) - im Chartkopf gibt es keinen sichtbaren Rahmen, dort braucht es ihn nicht. In DIESER Zeile hat jeder Knopf einen, also traegt ihn auch der Waechter. Deshalb steht die Regel hier und nicht im geteilten Bauteil. Reihenfolge mit Absicht NACH `:hover`: gleiche Spezifitaet, die spaetere Regel gewinnt - sonst verlieren aktive Knoepfe beim Ueberfahren ihre Farbe. Genauso macht es `.cw-tool.on` (Zeile darueber). */ .cw-tools .fn-window-control.fn-window-control-tone-positive { color: var(--fn-success); border-color: var(--fn-success); } .cw-tools .fn-window-control.fn-window-control-tone-caution { color: var(--fn-warning); border-color: var(--fn-warning); } /* Manueller Refresh: Icon dreht, solange geladen wird (Muster Watchlisten-Sync). */ .cw-tool.cw-tool-busy svg, .cw-tool.cw-tool-busy .fn-icon { animation: cw-refresh-spin 0.9s linear infinite; } @keyframes cw-refresh-spin { to { transform: rotate(360deg); } } .cw-legend { display: flex; gap: 16px; padding: 8px 16px; font-size: 11.5px; color: var(--fn-text-secondary); flex-wrap: wrap; flex: 0 0 auto; } .cw-legend span { display: inline-flex; align-items: center; gap: 6px; } .cw-legend .cw-dot { width: 10px; height: 10px; border-radius: var(--fn-radius-round); display: inline-block; } .cw-legend .lg-line i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; } /* Volumen-Strich der Legende — die Farbe stand als Inline-Style im Markup (Befund 20, §1). */ .cw-legend .lg-line i.lg-vol { background: var(--fn-text-tertiary); } .cw-chart-host { flex: 1 1 auto; min-height: 360px; margin: 0 16px; background: var(--fn-bg-muted); border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius); } /* Leeres Chart-Host kollabiert, wenn für die Auflösung keine echten Kursdaten vorliegen. */ .cw-chart-host.is-empty { min-height: 96px; } /* Hinweis statt Chart, wenn keine echten Kursdaten vorliegen (kein Fake). */ .cw-empty { margin: 12px 16px 0; padding: 22px 16px; text-align: center; color: var(--fn-text-tertiary); font-size: 12.5px; } /* (Serien-Tabelle cw-series entfernt — ersetzt durch den Kachelstreifen .cw-series-tiles, Niko 30.06.2026) */ /* ===== Info-Bereich unter dem Chart (Bloomberg-artig, Legacy /analyse-Vertrag) ===== */ .cw-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 16px 16px; flex: 0 0 auto; } @media (max-width: 1100px) { .cw-info { grid-template-columns: 1fr; } } .cw-info-panel { background: var(--fn-bg-muted); border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius); padding: 12px 14px; } .cw-info-panel h5 { margin: 0 0 9px 0; font-size: 11px; font-weight: var(--fn-font-weight-bold); letter-spacing: .09em; text-transform: uppercase; color: var(--fn-text-tertiary); } .cw-info-panel h5.cw-info-sub { margin-top: 12px; } .cw-info-panel p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fn-text); } .cw-info-ai { border-left: 3px solid var(--fn-cat-purple); } .cw-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; } .cw-kv dt { font-size: 11.5px; color: var(--fn-text-secondary); } .cw-kv dd { margin: 0; font-family: var(--fn-font-mono); font-size: 11.5px; color: var(--fn-text); text-align: right; } .cw-kv .pos { color: var(--fn-success); } .cw-kv .neg { color: var(--fn-danger); } /* Richtung IM Kachelinneren farbig (Niko 06.09.2026: „innerhalb der Kachel den Text Short rot / Long grün"). Bis dahin stand „Short" schwarz in der Liste — die Regel gab es nur in der Vorschau, nicht hier. Bewusst eigene Namen statt .pos/.neg: Long ist keine positive Zahl, sondern eine Richtung; dieselben Woerter tragen im Gruppenkopf (cw-dir-chip) schon dieselben Token. */ .cw-kv dd.long, .cw-range-stats .v.long { color: var(--fn-success); } .cw-kv dd.short, .cw-range-stats .v.short { color: var(--fn-danger); } .cw-range-stats .v.long, .cw-range-stats .v.short { font-weight: var(--fn-font-weight-bold); } .cw-dim { color: var(--fn-text-tertiary); font-family: var(--fn-font); } .cw-rating { display: inline-block; font-family: var(--fn-font); font-size: 11px; font-weight: var(--fn-font-weight-bold); border-radius: var(--fn-radius-pill); padding: 1px 9px; border: var(--fn-border-width) solid; } .cw-rating-buy { color: var(--fn-success); border-color: var(--fn-success); background: var(--fn-success-soft); } .cw-rating-hold { color: var(--fn-warning); border-color: var(--fn-warning); background: var(--fn-warning-soft); } .cw-rating-sell { color: var(--fn-danger); border-color: var(--fn-danger); background: var(--fn-danger-soft); } .cw-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cw-chip { font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-text-secondary); background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius-pill); padding: 3px 10px; } .cw-chip-link { cursor: pointer; color: var(--fn-cat-blue); transition: all .14s; } .cw-chip-link:hover { border-color: var(--fn-accent-line); background: var(--fn-accent-soft); color: var(--fn-primary); } .cw-chip-pattern { color: var(--fn-cat-gold); border-color: rgba(251, 191, 36, 0.35); } /* ===== Tag/Vortag-Hoch/Tief-Streifen (Variante A, Niko-Abnahme 08.06.2026) ===== */ .cw-session { display: flex; margin: 10px 16px 0; border: 1px solid var(--fn-border); border-radius: var(--fn-radius); overflow: hidden; background: var(--fn-bg-muted); } .cw-sess-cell { flex: 1; padding: 9px 14px; border-right: 1px solid var(--fn-border); } .cw-sess-cell:last-child { border-right: none; } .cw-sess-cell .k { font-size: 10px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--fn-text-tertiary); margin-bottom: 4px; } .cw-sess-hl { display: flex; gap: 14px; font-family: var(--fn-font-mono); font-size: 13px; } .cw-sess-hl .h { color: var(--fn-success); } .cw-sess-hl .t { color: var(--fn-danger); } .cw-sess-hl .lbl { color: var(--fn-text-tertiary); font-family: var(--fn-font); font-size: 11px; margin-right: 3px; } .cw-sess-range { font-family: var(--fn-font-mono); font-size: 13px; } .cw-sess-range .pct { color: var(--fn-text-secondary); font-size: 11.5px; } /* ===== Kursspanne-Balken Variante B „Fokus-Punkt" (Niko-Abnahme 30.06.2026, VORSCHAU-Kursspanne-Balken-B-FokusPunkt). Vortag-Bügel OBEN · Tagesspanne als Verlauf Tief→Hoch MITTE · aktueller Kurs als Punkt + Wert-Chip UNTEN. Grün/Rot stilidentisch über die EINZIGE Variable --bar-accent. NUR Tokens, kein Hex. Positionen datengetrieben aus SessionStats (DayLeft/Width, PrevLeft/Width, NowLeft). ===== */ .cw-sess-bar-wrap { margin: 9px 16px 0; padding: 10px 14px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius); background: var(--fn-bg-muted); } .cw-sess-bar-k { font-size: 10px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--fn-text-tertiary); margin-bottom: 9px; } /* Stimmungsfarbe als EINZIGE Variable — identischer Stil für grün/rot, nur Farbe wechselt. */ .cw-sess-bar-wrap, .cw-chart-session { --bar-accent: var(--fn-chart-up); } .cw-sess-bar-wrap.variant-b.up, .cw-chart-session.variant-b.up { --bar-accent: var(--fn-chart-up); } .cw-sess-bar-wrap.variant-b.down, .cw-chart-session.variant-b.down { --bar-accent: var(--fn-chart-down); } .cw-sess-bar-wrap.variant-b.flat, .cw-chart-session.variant-b.flat { --bar-accent: var(--fn-cat-blue); } .cw-sess-bar { position: relative; height: 64px; overflow: visible; } .cw-sess-bar .brk, .cw-sess-bar .rail, .cw-sess-bar .tagband, .cw-sess-bar .conn, .cw-sess-bar .nowdot, .cw-sess-bar .chip { position: absolute; } /* Vortag-Bügel OBEN (graue Klammer, ohne Unterkante) */ .cw-sess-bar .brk { z-index: 2; top: 2px; height: 10px; min-width: 3px; border: 1.5px solid color-mix(in srgb, var(--fn-text-secondary) 78%, transparent); border-bottom: none; border-radius: 5px 5px 0 0; } /* Grundlinie = gemeinsame Spanne (Koordinatensystem, zurückhaltend) */ .cw-sess-bar .rail { z-index: 1; left: 0; right: 0; top: 25px; height: 2px; border-radius: 2px; background: var(--fn-border); } /* Tagesspanne MITTE: Verlauf Tief→Hoch in Stimmungsfarbe */ .cw-sess-bar .tagband { z-index: 3; top: 19px; height: 14px; min-width: 3px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--bar-accent) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--bar-accent) 9%, transparent), color-mix(in srgb, var(--bar-accent) 44%, transparent)); } /* Verbinder Punkt → Chip */ .cw-sess-bar .conn { z-index: 4; top: 33px; height: 11px; width: 2px; background: color-mix(in srgb, var(--bar-accent) 55%, transparent); transform: translateX(-50%); } /* Aktueller Kurs: leuchtender Punkt auf dem Balken */ .cw-sess-bar .nowdot { z-index: 5; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--bar-accent); border: 2px solid var(--fn-bg-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bar-accent) 18%, transparent); transform: translate(-50%, -50%); } /* Wert-Chip UNTEN: aktueller Kurs + Position */ .cw-sess-bar .chip { z-index: 4; top: 44px; transform: translateX(-50%); white-space: nowrap; font-family: var(--fn-font-mono); font-size: 12px; font-weight: var(--fn-font-weight-bold); color: var(--fn-text); background: color-mix(in srgb, var(--bar-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bar-accent) 58%, transparent); border-radius: 7px; padding: 2px 8px; } /* Randfaelle: nahe 0 %/100 % nicht zentrieren, sondern nach innen klappen — sonst ragt der halbe Chip aus der Kachel und wird abgeschnitten (Befund 21.08.2026: „219,77" wurde zu „9,77"). */ .cw-sess-bar .chip.edge-left { transform: translateX(0); margin-left: -8px; } .cw-sess-bar .chip.edge-right { transform: translateX(-100%); margin-left: 8px; } /* Accepted information-tile variant: one 22px rail, two independent dashed previous-range marks, the current point and the three-part scale. The older focus-point geometry remains available to chart overlays and legacy detail hosts through .cw-sess-bar. */ .cw-sess-slim { padding: 6px 2px 2px; } .cw-sess-slim-bar { position: relative; height: 22px; border-radius: var(--fn-radius-pill); background: var(--fn-input-bg); border: var(--fn-border-width) solid var(--fn-border); } .cw-sess-slim-bar .fill { position: absolute; inset: 2px auto 2px 2px; border-radius: var(--fn-radius-pill); background: var(--bar-accent); opacity: .45; } .cw-sess-slim-bar .prev-mark { position: absolute; top: -7px; height: 36px; border-left: var(--fn-border-width) dashed var(--fn-text-tertiary); } .cw-sess-slim-bar .nowdot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--fn-radius-round); background: var(--bar-accent); border: 2px solid var(--fn-bg-muted); } .cw-sess-slim-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--fn-text-tertiary); font: 11px/1 var(--fn-font-mono); } .cw-sess-slim-scale span:nth-child(2) { color: var(--fn-text-secondary); } /* In-Chart-Overlay (oben im Chart): gleiches B, nur dunklerer Punktrand für Kontrast auf der Chartfläche. */ .cw-chart-session { border: 1px solid var(--fn-border); border-radius: 10px; background: color-mix(in srgb, var(--fn-bg) 82%, transparent); padding: 10px 12px; backdrop-filter: blur(6px); } .cw-chart-session-title { color: var(--fn-text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: var(--fn-font-weight-bold); margin-bottom: 8px; } .cw-chart-session .nowdot { border-color: var(--fn-bg); } .cw-chart-session-overlay { position: absolute; left: 16px; right: 16px; top: 8px; z-index: 4; pointer-events: none; } .cw-chart-session-overlay .cw-chart-session { pointer-events: auto; } .cw-sess-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--fn-text-tertiary); } .cw-sess-legend i { display: inline-block; margin-right: 5px; vertical-align: middle; } .cw-sess-legend .lg-tag i { width: 14px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--bar-accent) 9%, transparent), color-mix(in srgb, var(--bar-accent) 44%, transparent)); } .cw-sess-legend .lg-prev i { width: 13px; height: 6px; border: 1.5px solid color-mix(in srgb, var(--fn-text-secondary) 78%, transparent); border-bottom: none; border-radius: 3px 3px 0 0; } .cw-sess-legend .lg-now i { width: 11px; height: 11px; border-radius: 50%; background: var(--bar-accent); } /* ===== Serien-Kachelstreifen (Wertpapiere im aktiven Chart) — ersetzt die Serien-Tabelle (Niko 30.06.2026). Klick = aktive Serie → speist die Detail-Kacheln. --tile-accent = Serienfarbe (datengetrieben). NUR Tokens. ===== */ /* Einklappbar (Default 1 Zeile Chips) — spart Platz + schließt die Lücke Chart↔Streifen↔Detail-Kacheln. */ .cw-series-wrap { padding: 8px 16px 2px; } /* overflow-x:auto erzwingt per CSS-Quirk overflow-y:auto -> 3px Chip-Ueberlauf gab eine Scrollbar. overflow-y:hidden unterdrueckt sie (Chip ist vertikal zentriert, kein sichtbares Clipping). */ .cw-series-bar { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; } .cw-series-label { font-size: 10px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--fn-text-tertiary); } .cw-series-toggle { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: var(--fn-border-width) solid var(--fn-border); border-radius: 7px; background: var(--fn-bg-alt); color: var(--fn-text-secondary); cursor: pointer; } .cw-series-toggle:hover { color: var(--fn-primary); border-color: var(--fn-border-strong); } .cw-series-toggle i { width: 15px; height: 15px; } .cw-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius-pill); background: var(--fn-bg-alt); color: var(--fn-text); padding: 4px 11px; font-size: 12px; white-space: nowrap; } .cw-chip:hover { border-color: var(--fn-border-strong); } .cw-chip.active { border-color: var(--fn-primary); box-shadow: inset 0 0 0 1px var(--fn-primary); } .cw-chip-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tile-accent, var(--fn-border-strong)); } .cw-chip .pos { color: var(--fn-success); font-family: var(--fn-font-mono); font-size: 11px; } .cw-chip .neg { color: var(--fn-danger); font-family: var(--fn-font-mono); font-size: 11px; } .cw-series-tiles { display: flex; gap: 12px; padding: 10px 0 2px; overflow-x: auto; } .cw-tile { position: relative; flex: 0 0 auto; min-width: 210px; text-align: left; cursor: pointer; border: var(--fn-border-width) solid var(--fn-border); border-left: 3px solid var(--tile-accent, var(--fn-border-strong)); border-radius: var(--fn-radius); background: var(--fn-bg-alt); padding: 12px 14px 13px; color: var(--fn-text); } .cw-tile:hover { border-color: var(--fn-border-strong); } .cw-tile.active { border-color: var(--fn-primary); box-shadow: inset 0 0 0 1px var(--fn-primary); } .cw-tile-name { font-weight: var(--fn-font-weight-bold); font-size: 14px; line-height: 1.2; padding-right: 28px; } .cw-tile-sym { font-family: var(--fn-font-mono); font-size: 10.5px; color: var(--fn-text-tertiary); margin: 3px 0 10px; } .cw-tile-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; } .cw-tile-kv > div { display: flex; flex-direction: column; min-width: 0; } .cw-tile-kv dt { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-text-tertiary); } .cw-tile-kv dd { margin: 0; font-family: var(--fn-font-mono); font-size: 12.5px; color: var(--fn-text); white-space: nowrap; } .cw-tile-kv dd.pos { color: var(--fn-success); } .cw-tile-kv dd.neg { color: var(--fn-danger); } .cw-tile-actions { position: absolute; top: 9px; right: 10px; display: flex; gap: 8px; } .cw-tile-ic { display: inline-flex; color: var(--fn-text-tertiary); cursor: pointer; } .cw-tile-ic:hover { color: var(--fn-primary); } .cw-tile-ic i { width: 15px; height: 15px; } /* Kaufen/Verkaufen — bläulich, leicht transparent, oben rechts im Chart (nur bei gewählter Watchliste). */ .cw-chart-wrap { position: relative; z-index: var(--fn-layer-chart-content); isolation: isolate; /* Wrap umschliesst den Host eng (Host hat definite 52vh). Ohne flex:0 0 auto wuerde der Wrap im gebundenen .cw-main wachsen und unter dem Chart eine Luecke zum Kachelstreifen lassen. */ flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; } /* Einzel-Chart (nicht Raster-Zelle): DEFINITE Hoehe, sonst hat ECharts im content-getriebenen Flex-Layout keine feste Hoehe und faellt auf ~300px zurueck -> Host wirkt ~30% zu gross (leerer Raum). Raster-Zellen behalten height:100% ueber die spezifischere .cw-cell-Regel. */ .cw-chart-wrap .cw-chart-host { flex: none; height: 52vh; min-height: 360px; } /* Kaufen/Verkaufen ueber dem Chart (Niko 24.08.2026). Gemessen auf fin-test: Die Huelle sitzt an einem Kasten, der 16 px breiter ist als die Chartflaeche - mit right:14px endete "Verkaufen" 2 px AUSSERHALB des Charts. 24 px setzen den Knopf wieder sichtbar in die Flaeche hinein. */ .cw-trade { position: absolute; top: 14px; right: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5; } .cw-trade-row { display: flex; gap: 8px; } /* Stückzahl-Kreis über den Buttons — bläulich, leicht transparent, kreisförmig (wie der RSI-Marker). */ .cw-trade-qty { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: var(--fn-font-weight-bold); color: var(--fn-text); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--fn-cat-blue) 60%, transparent); background: color-mix(in srgb, var(--fn-cat-blue) 18%, transparent); } /* Rechtsklick-Kontextmenü zu Kaufen/Verkaufen: Menge + Löschen. */ .cw-trade-menu-backdrop { position: absolute; inset: 0; z-index: 9; } .cw-trade-menu { position: absolute; top: 50px; right: 14px; z-index: 10; min-width: 182px; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; background: var(--fn-bg-alt); border: 1px solid var(--fn-border-strong); } .cw-tm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; font-size: 12px; color: var(--fn-text-secondary); } .cw-tm-input { width: 64px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; border: 1px solid var(--fn-border-strong); background: var(--fn-bg-muted); color: var(--fn-text); } .cw-tm-btn { text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: var(--fn-font-weight-bold); color: var(--fn-text); border: 1px solid color-mix(in srgb, var(--fn-cat-blue) 45%, transparent); background: color-mix(in srgb, var(--fn-cat-blue) 12%, transparent); } .cw-tm-btn:hover { background: color-mix(in srgb, var(--fn-cat-blue) 22%, transparent); } .cw-tm-btn.danger { border-color: color-mix(in srgb, var(--fn-danger) 50%, transparent); background: color-mix(in srgb, var(--fn-danger) 14%, transparent); } .cw-tm-sep { height: 1px; margin: 3px 2px; background: var(--fn-border); } /* Gleich breit (Niko 24.08.2026: "die Buttons sind nicht gleich gross, das soll so aber sein"): gemessen waren "Kaufen" 70 px und "Verkaufen" 87 px, weil die Breite dem Text folgte. Eine gemeinsame Mindestbreite plus zentrierter Text macht beide gleich, ohne feste Pixelbreite - eine laengere Uebersetzung waechst weiterhin sauber mit. Durchscheinend: Nicht die Fuellung war das Problem (16 %/12 %), sondern blur(6px) - der Weichzeichner verdeckt den Chart darunter. Weniger Weichzeichner, weniger Fuellung. */ .cw-trade-btn { min-width: 96px; justify-content: center; text-align: center; font-size: 12.5px; font-weight: var(--fn-font-weight-bold); padding: 7px 12px; border-radius: 9px; cursor: pointer; color: var(--fn-text); backdrop-filter: blur(2px); border: 1px solid color-mix(in srgb, var(--fn-cat-blue) 55%, transparent); background: color-mix(in srgb, var(--fn-cat-blue) 10%, transparent); } .cw-trade-btn:hover { background: color-mix(in srgb, var(--fn-cat-blue) 30%, transparent); } .cw-trade-btn.sell { border-color: color-mix(in srgb, var(--fn-primary) 50%, transparent); background: color-mix(in srgb, var(--fn-primary) 8%, transparent); } .cw-trade-dialog-backdrop { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fn-bg) 62%, transparent); } .cw-trade-dialog { background: var(--fn-bg-alt); border: 1px solid var(--fn-border-strong); border-radius: 12px; padding: 16px 18px; max-width: 360px; } .cw-trade-dialog h4 { margin: 0 0 6px; font-size: 14px; color: var(--fn-text); } .cw-trade-dialog p { margin: 0 0 14px; font-size: 12.5px; color: var(--fn-text-secondary); } .cw-trade-dialog .row { display: flex; gap: 9px; justify-content: flex-end; } .cw-trade-dialog .btn { font-size: 12.5px; font-weight: var(--fn-font-weight-bold); padding: 7px 15px; border-radius: 8px; cursor: pointer; border: 1px solid var(--fn-border-strong); background: transparent; color: var(--fn-text-secondary); } .cw-trade-dialog .btn.danger { border-color: color-mix(in srgb, var(--fn-danger) 50%, transparent); background: color-mix(in srgb, var(--fn-danger) 16%, transparent); color: var(--fn-text); } .cw-detail-tiles { /* Navigation and the market feed can make the chart much narrower than the viewport. Let the grid use its own available width so two columns appear only when each tile can retain a readable minimum width. */ --cw-info-row-gap: 7px; --cw-info-line-height: 1.4; --cw-info-label-spacing: .05em; --cw-info-content-spacing: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; margin: 0; padding-top: 10px; } /* Kacheln, die sich IMMER die volle Breite teilen (Niko 06.09.2026: „die beiden Kacheln nutzen den vollen Bereich in der Breite und teilen ihn sich"). Das feste Drei-Spalten-Raster daneben laesst bei zwei Kacheln eine Spalte leer; auto-fit verteilt stattdessen auf so viele Spalten, wie Kacheln da sind, und bricht unter 300 px je Kachel selbst um. Nur fuer Gruppen mit wechselnder Kachelzahl — „Informationen" hat feste sechs und behaelt sein 3/2/1-Raster. */ .cw-detail-tiles-fill { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cw-detail-tiles > .cw-detail-tile:nth-of-type(1) { order: 1; } .cw-detail-tiles > .cw-detail-tile:nth-of-type(2) { order: 2; } .cw-detail-tiles > .cw-detail-tile:nth-of-type(3) { order: 3; } .cw-detail-tiles > .cw-detail-tile:nth-of-type(4) { order: 5; } .cw-detail-tiles > .cw-detail-tile:nth-of-type(5) { order: 6; } .cw-detail-tiles > .cw-detail-tile:nth-of-type(6) { order: 7; } .cw-detail-tile { height: 100%; min-height: 0; padding: 0; overflow: hidden; /* Spalte, damit der Grundtext per margin-top:auto an den UNTEREN Rand rueckt statt in der Mitte zu haengen (Niko 08.09.2026: „die Kacheltexte werden grundsaetzlich unten in der Kachel angezeigt, also mit dem Rand unten abschliessen und nicht irgendwo in der Mitte"). */ display: flex; flex-direction: column; } .cw-tile-head { padding: 11px 13px 10px; border-bottom: var(--fn-border-width) solid var(--fn-border); background: color-mix(in srgb, var(--fn-cat-blue) 7%, var(--fn-bg-muted)); } .cw-tile-head h5 { margin: 0; color: var(--fn-text); font-size: 12px; font-weight: var(--fn-font-weight-bold); letter-spacing: 0; text-transform: none; } .cw-tile-head p { margin: 3px 0 0; color: var(--fn-text-tertiary); font-size: 11px; font-family: var(--fn-font-mono); } /* Kachel-Kopf mit Kontexthilfe rechts (Muster Trend-Kompass, Niko 21.08.2026) — geteilt von allen Kacheln der Gruppe „Informationen", deshalb global statt je Komponente. */ .cw-tile-head-help { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .cw-tile-head-help .cw-tile-head-text { min-width: 0; } .cw-kv-flat { padding: 13px 13px 12px; gap: var(--cw-info-row-gap) 18px; } /* Gruppenkopf-Badges der Trend-Kompass-Gruppen (Vorschau .v-badge/.status) — global, weil sie in ChartGroupDisclosure gerendert werden; Gewicht 600 statt 700 (Audit SHOULD). UX-Abgleich 22.08.2026. */ .cw-v-badge { border: var(--fn-border-width) solid currentColor; border-radius: var(--fn-radius-pill); padding: 3px 8px; background: transparent; color: var(--fn-primary); font: 600 12px var(--fn-font); } .cw-v-badge.concept { color: var(--fn-warning); } .cw-status-badge, .cw-grp-title .cw-status { flex: 0 0 auto; overflow: visible; white-space: nowrap; border: var(--fn-border-width) solid currentColor; border-radius: var(--fn-radius-pill); padding: 3px 8px; background: transparent; color: var(--tc-long, var(--fn-success)); font: 600 12px var(--fn-font); } .cw-grp-title .cw-status.short { color: var(--tc-short, var(--fn-danger)); } .cw-grp-title .cw-status.neutral { color: var(--fn-warning); } .cw-grp-title .cw-status.error { color: var(--fn-danger); } .cw-grp-title .cw-status.busy { color: var(--fn-primary); } /* Gruppenfuss der Erklaerung (Vorschau .grp-foot/.handbook): Datenwahrheit-Satz + Handbuch-Link. */ .cw-grp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: var(--fn-border-width) solid var(--fn-border); font-size: 10.5px; color: var(--fn-text-tertiary); } /* Jetzt ein